@royaloperahouse/chord 2.2.7 → 2.2.8
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 +4 -0
- package/dist/chord.cjs.development.js +669 -342
- 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 +667 -343
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Radio/Radio.d.ts +3 -0
- package/dist/components/atoms/Radio2/Radio2.d.ts +23 -0
- package/dist/components/atoms/Radio2/Radio2.style.d.ts +7 -0
- package/dist/components/atoms/Radio2/index.d.ts +2 -0
- package/dist/components/atoms/Tickbox/Tickbox.d.ts +3 -0
- package/dist/components/atoms/Tickbox2/Tickbox2.d.ts +23 -0
- package/dist/components/atoms/Tickbox2/Tickbox2.style.d.ts +7 -0
- package/dist/components/atoms/Tickbox2/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +3 -1
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +3 -0
- package/dist/components/molecules/RadioGroup2/RadioGroup2.d.ts +38 -0
- package/dist/components/molecules/RadioGroup2/RadioGroup2.style.d.ts +4 -0
- package/dist/components/molecules/RadioGroup2/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/formTypes.d.ts +112 -0
- package/package.json +1 -1
|
@@ -2774,6 +2774,10 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2774
2774
|
}, children);
|
|
2775
2775
|
};
|
|
2776
2776
|
|
|
2777
|
+
/**
|
|
2778
|
+
* DEPRECATED. Use Radio2 instead
|
|
2779
|
+
*/
|
|
2780
|
+
|
|
2777
2781
|
var Radio = function Radio(_ref) {
|
|
2778
2782
|
var _ref$checked = _ref.checked,
|
|
2779
2783
|
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
@@ -2813,13 +2817,123 @@ var Radio = function Radio(_ref) {
|
|
|
2813
2817
|
}, error)));
|
|
2814
2818
|
};
|
|
2815
2819
|
|
|
2816
|
-
var _templateObject$f, _templateObject2$5, _templateObject3$4;
|
|
2817
|
-
var
|
|
2818
|
-
var
|
|
2820
|
+
var _templateObject$f, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
2821
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
2822
|
+
var Radio$1 = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
2823
|
+
var error = _ref.error,
|
|
2824
|
+
darkMode = _ref.darkMode,
|
|
2825
|
+
disabled = _ref.disabled;
|
|
2826
|
+
if (error !== undefined) return '1px solid var(--error-color-state)';
|
|
2827
|
+
if (disabled) return '1px solid var(--base-color-midgrey)';
|
|
2828
|
+
if (darkMode) return '1px solid var(--base-color-white)';
|
|
2829
|
+
return '1px solid var(--base-color-black)';
|
|
2830
|
+
}, function (_ref2) {
|
|
2831
|
+
var disabled = _ref2.disabled,
|
|
2832
|
+
darkMode = _ref2.darkMode;
|
|
2833
|
+
if (disabled) return 'var(--base-color-lightgrey)';
|
|
2834
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
2835
|
+
return ' var(--base-color-white)';
|
|
2836
|
+
}, function (_ref3) {
|
|
2837
|
+
var disabled = _ref3.disabled,
|
|
2838
|
+
blackBox = _ref3.blackBox,
|
|
2839
|
+
darkMode = _ref3.darkMode;
|
|
2840
|
+
if (disabled) return 'var(--base-color-midgrey)';
|
|
2841
|
+
if (darkMode) return 'var(--base-color-black)';
|
|
2842
|
+
if (blackBox) return 'var(--base-color-white)';
|
|
2843
|
+
return ' var(--base-color-black)';
|
|
2844
|
+
});
|
|
2845
|
+
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='radio'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Radio$1, function (_ref4) {
|
|
2846
|
+
var blackBox = _ref4.blackBox,
|
|
2847
|
+
darkMode = _ref4.darkMode;
|
|
2848
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
2849
|
+
if (blackBox) return 'var(--base-color-black)';
|
|
2850
|
+
return ' var(--base-color-white)';
|
|
2851
|
+
}, Radio$1, function (_ref5) {
|
|
2852
|
+
var darkMode = _ref5.darkMode;
|
|
2853
|
+
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
2854
|
+
return '3px solid var(--base-color-lapislazuli)';
|
|
2855
|
+
});
|
|
2856
|
+
var RadioIcon = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: currentColor;\n input[type='radio']:checked + ", " & {\n display: block;\n }\n"])), Radio$1);
|
|
2857
|
+
var TextLabel = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
2858
|
+
var darkMode = _ref6.darkMode,
|
|
2859
|
+
disabled = _ref6.disabled;
|
|
2860
|
+
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
2861
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
2862
|
+
if (disabled) return 'var(--base-color-darkgrey)';
|
|
2863
|
+
return 'var(--base-color-black)';
|
|
2864
|
+
});
|
|
2865
|
+
var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
2866
|
+
var darkMode = _ref7.darkMode;
|
|
2867
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
2868
|
+
return 'var(--base-color-errorstate)';
|
|
2869
|
+
});
|
|
2870
|
+
|
|
2871
|
+
var _excluded$4 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
2872
|
+
/**
|
|
2873
|
+
* A Radio component, that wraps around the native `<input type="radio"/>` element
|
|
2874
|
+
* and adds some extra styling, states and information around it (i.e. an error label,
|
|
2875
|
+
* error state).
|
|
2876
|
+
*
|
|
2877
|
+
* # Error state
|
|
2878
|
+
* An error label will be shown below the radio if the `error` prop exists.
|
|
2879
|
+
* Also radio will be rendered with a red border. An empty string can be passed to
|
|
2880
|
+
* render only error state without error message.
|
|
2881
|
+
*
|
|
2882
|
+
* # Light / Dark mode
|
|
2883
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
2884
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
2885
|
+
*
|
|
2886
|
+
* # Black box mode
|
|
2887
|
+
* If `blackBox` prop is true checked state will be styled as black box with white tick icon.
|
|
2888
|
+
* This style was used before as a default. Not preferred in new components.
|
|
2889
|
+
* This will be ignored if `darkMode` is true.
|
|
2890
|
+
*/
|
|
2891
|
+
|
|
2892
|
+
var Radio2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
2893
|
+
var children = _ref.children,
|
|
2894
|
+
_ref$disabled = _ref.disabled,
|
|
2895
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
2896
|
+
error = _ref.error,
|
|
2897
|
+
_ref$darkMode = _ref.darkMode,
|
|
2898
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
2899
|
+
_ref$blackBox = _ref.blackBox,
|
|
2900
|
+
blackBox = _ref$blackBox === void 0 ? false : _ref$blackBox,
|
|
2901
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
2902
|
+
|
|
2903
|
+
return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(TickboxLabel, {
|
|
2904
|
+
darkMode: darkMode,
|
|
2905
|
+
blackBox: blackBox
|
|
2906
|
+
}, /*#__PURE__*/React__default.createElement("input", Object.assign({}, inputProps, {
|
|
2907
|
+
disabled: disabled,
|
|
2908
|
+
type: "radio",
|
|
2909
|
+
ref: ref,
|
|
2910
|
+
"data-testid": "radio-input"
|
|
2911
|
+
})), /*#__PURE__*/React__default.createElement(Radio$1, {
|
|
2912
|
+
error: error,
|
|
2913
|
+
darkMode: darkMode,
|
|
2914
|
+
disabled: disabled,
|
|
2915
|
+
blackBox: blackBox
|
|
2916
|
+
}, /*#__PURE__*/React__default.createElement(RadioIcon, null)), /*#__PURE__*/React__default.createElement(TextLabel, {
|
|
2917
|
+
disabled: disabled,
|
|
2918
|
+
darkMode: darkMode,
|
|
2919
|
+
"data-testid": "radio-content"
|
|
2920
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
2921
|
+
level: 1
|
|
2922
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel, {
|
|
2923
|
+
darkMode: darkMode,
|
|
2924
|
+
"data-testid": "radio-error-label"
|
|
2925
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
2926
|
+
level: 6
|
|
2927
|
+
}, error)));
|
|
2928
|
+
});
|
|
2929
|
+
|
|
2930
|
+
var _templateObject$g, _templateObject2$6, _templateObject3$5;
|
|
2931
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2932
|
+
var IconWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
2819
2933
|
var theme = _ref.theme;
|
|
2820
2934
|
return theme.colors.primary;
|
|
2821
2935
|
}, devices.mobile);
|
|
2822
|
-
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
2936
|
+
var IconUnavailableWrapper = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--navigation-large-margin);\n height: var(--navigation-large-margin);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n opacity: 0.2;\n\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n @media ", " {\n opacity: 1;\n pointer-events: none;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n"])), devices.mobile);
|
|
2823
2937
|
|
|
2824
2938
|
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2825
2939
|
var onClickPrev = _ref.onClickPrev,
|
|
@@ -2885,8 +2999,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
2885
2999
|
}, renderNextIcon()));
|
|
2886
3000
|
};
|
|
2887
3001
|
|
|
2888
|
-
var _templateObject$
|
|
2889
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3002
|
+
var _templateObject$h;
|
|
3003
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2890
3004
|
var fillColor = _ref.fillColor;
|
|
2891
3005
|
return fillColor;
|
|
2892
3006
|
});
|
|
@@ -2910,9 +3024,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
2910
3024
|
})));
|
|
2911
3025
|
};
|
|
2912
3026
|
|
|
2913
|
-
var _templateObject$
|
|
2914
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
2915
|
-
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3027
|
+
var _templateObject$i, _templateObject2$7;
|
|
3028
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3029
|
+
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
2916
3030
|
|
|
2917
3031
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
2918
3032
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -2930,8 +3044,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
2930
3044
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
2931
3045
|
};
|
|
2932
3046
|
|
|
2933
|
-
var _templateObject$
|
|
2934
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3047
|
+
var _templateObject$j;
|
|
3048
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
2935
3049
|
|
|
2936
3050
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
2937
3051
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3141,9 +3255,9 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3141
3255
|
})))));
|
|
3142
3256
|
};
|
|
3143
3257
|
|
|
3144
|
-
var _templateObject$
|
|
3145
|
-
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$
|
|
3146
|
-
var SponsorshipStyledIframe = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3258
|
+
var _templateObject$k, _templateObject2$8;
|
|
3259
|
+
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
|
|
3260
|
+
var SponsorshipStyledIframe = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
|
|
3147
3261
|
|
|
3148
3262
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
|
|
3149
3263
|
var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
|
|
@@ -3175,8 +3289,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3175
3289
|
}));
|
|
3176
3290
|
};
|
|
3177
3291
|
|
|
3178
|
-
var _templateObject$
|
|
3179
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3292
|
+
var _templateObject$l, _templateObject2$9;
|
|
3293
|
+
var TabText = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
|
|
3180
3294
|
if (props.withIcon === 'left') {
|
|
3181
3295
|
return "margin-left: 5px;";
|
|
3182
3296
|
}
|
|
@@ -3189,7 +3303,7 @@ var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObje
|
|
|
3189
3303
|
|
|
3190
3304
|
return "";
|
|
3191
3305
|
});
|
|
3192
|
-
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3306
|
+
var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n border-bottom: 1px solid transparent;\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n ", "\n\n ", "\n\n @media ", " {\n svg {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (props) {
|
|
3193
3307
|
if (props.withIcon === 'left') {
|
|
3194
3308
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3195
3309
|
}
|
|
@@ -3275,8 +3389,8 @@ var Tab = function Tab(_ref) {
|
|
|
3275
3389
|
}));
|
|
3276
3390
|
};
|
|
3277
3391
|
|
|
3278
|
-
var _templateObject$
|
|
3279
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3392
|
+
var _templateObject$m, _templateObject2$a;
|
|
3393
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3280
3394
|
var iconName = _ref.iconName;
|
|
3281
3395
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3282
3396
|
}, function (_ref2) {
|
|
@@ -3302,9 +3416,9 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
|
|
|
3302
3416
|
var hoverColor = _ref7.hoverColor;
|
|
3303
3417
|
return hoverColor;
|
|
3304
3418
|
});
|
|
3305
|
-
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3419
|
+
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
3306
3420
|
|
|
3307
|
-
var _excluded$
|
|
3421
|
+
var _excluded$5 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
|
|
3308
3422
|
|
|
3309
3423
|
var TabLink = function TabLink(_ref) {
|
|
3310
3424
|
var children = _ref.children,
|
|
@@ -3314,7 +3428,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
3314
3428
|
color = _ref$color === void 0 ? exports.Colors.DarkGrey : _ref$color,
|
|
3315
3429
|
_ref$hoverColor = _ref.hoverColor,
|
|
3316
3430
|
hoverColor = _ref$hoverColor === void 0 ? exports.Colors.Primary : _ref$hoverColor,
|
|
3317
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3431
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
3318
3432
|
|
|
3319
3433
|
return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
|
|
3320
3434
|
color: color,
|
|
@@ -3329,19 +3443,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
3329
3443
|
})) : null, children);
|
|
3330
3444
|
};
|
|
3331
3445
|
|
|
3332
|
-
var _templateObject$
|
|
3333
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3446
|
+
var _templateObject$n, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3447
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3334
3448
|
var width = _ref.width;
|
|
3335
3449
|
return width ? width + "px;" : '100%;';
|
|
3336
3450
|
}, function (_ref2) {
|
|
3337
3451
|
var height = _ref2.height;
|
|
3338
3452
|
return height + "px;";
|
|
3339
3453
|
});
|
|
3340
|
-
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3454
|
+
var TextAreaLabel = /*#__PURE__*/styled__default.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 0 15px;\n ", ";\n"])), function (_ref3) {
|
|
3341
3455
|
var darkMode = _ref3.darkMode;
|
|
3342
3456
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
3343
3457
|
});
|
|
3344
|
-
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$
|
|
3458
|
+
var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n box-sizing: border-box;\n resize: none;\n padding: 20px;\n width: 100%;\n height: 100%;\n border: 1px solid ", ";\n\n ", ";\n\n :disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline-style: solid;\n outline-width: ", ";\n outline-color: ", ";\n }\n"])), function (_ref4) {
|
|
3345
3459
|
var error = _ref4.error;
|
|
3346
3460
|
return !!error ? 'var(--base-color-errorstate)' : 'var(--base-color-lightgrey)';
|
|
3347
3461
|
}, function (_ref5) {
|
|
@@ -3356,7 +3470,7 @@ var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$5 || (_
|
|
|
3356
3470
|
var darkMode = _ref7.darkMode;
|
|
3357
3471
|
return darkMode ? 'var(--base-color-lemonchiffon)' : 'var(--base-color-lapislazuli)';
|
|
3358
3472
|
});
|
|
3359
|
-
var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3473
|
+
var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n color: ", ";\n margin-block: 15px 0;\n"])), function (_ref8) {
|
|
3360
3474
|
var darkMode = _ref8.darkMode;
|
|
3361
3475
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
3362
3476
|
}, function (_ref9) {
|
|
@@ -3364,7 +3478,7 @@ var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_tem
|
|
|
3364
3478
|
return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
|
|
3365
3479
|
});
|
|
3366
3480
|
|
|
3367
|
-
var _excluded$
|
|
3481
|
+
var _excluded$6 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
|
|
3368
3482
|
/**
|
|
3369
3483
|
* An HTML textarea component for Chord.
|
|
3370
3484
|
*
|
|
@@ -3426,7 +3540,7 @@ var TextArea = function TextArea(_ref) {
|
|
|
3426
3540
|
maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
|
|
3427
3541
|
_ref$tabIndex = _ref.tabIndex,
|
|
3428
3542
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
3429
|
-
textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3543
|
+
textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
3430
3544
|
|
|
3431
3545
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
3432
3546
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -3454,14 +3568,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
3454
3568
|
}, error))));
|
|
3455
3569
|
};
|
|
3456
3570
|
|
|
3457
|
-
var _templateObject$
|
|
3458
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3459
|
-
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3571
|
+
var _templateObject$o, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
3572
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3573
|
+
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
3460
3574
|
var width = _ref.width;
|
|
3461
3575
|
if (!width) return 'none';
|
|
3462
3576
|
return width + 'px';
|
|
3463
3577
|
});
|
|
3464
|
-
var Input = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
3578
|
+
var Input = /*#__PURE__*/styled__default.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
|
|
3465
3579
|
var isPasswordField = _ref2.isPasswordField;
|
|
3466
3580
|
if (isPasswordField) return "80px";
|
|
3467
3581
|
return "20px";
|
|
@@ -3474,19 +3588,19 @@ var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateO
|
|
|
3474
3588
|
if (darkMode) return "4px solid var(--base-color-lemonchiffon)";
|
|
3475
3589
|
return "3px solid var(--base-color-lapislazuli)";
|
|
3476
3590
|
});
|
|
3477
|
-
var ShowHideButton = /*#__PURE__*/styled__default.button(_templateObject4$
|
|
3478
|
-
var TextLabel = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
3591
|
+
var ShowHideButton = /*#__PURE__*/styled__default.button(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 53px;\n top: 50%;\n margin-top: calc(var(--line-height-overline-1) / 2 * -1);\n right: 20px;\n border: none;\n background: none;\n padding: 0;\n display: block;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n color: var(--base-color-black);\n"])));
|
|
3592
|
+
var TextLabel$1 = /*#__PURE__*/styled__default.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
3479
3593
|
var darkMode = _ref5.darkMode;
|
|
3480
3594
|
if (darkMode) return "var(--base-color-white)";
|
|
3481
3595
|
return "var(--base-color-black)";
|
|
3482
3596
|
});
|
|
3483
|
-
var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref6) {
|
|
3597
|
+
var ErrorLabel$1 = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref6) {
|
|
3484
3598
|
var darkMode = _ref6.darkMode;
|
|
3485
3599
|
if (darkMode) return "var(--base-color-white)";
|
|
3486
3600
|
return "var(--base-color-errorstate)";
|
|
3487
3601
|
});
|
|
3488
3602
|
|
|
3489
|
-
var _excluded$
|
|
3603
|
+
var _excluded$7 = ["label", "type", "error", "darkMode", "width"];
|
|
3490
3604
|
/**
|
|
3491
3605
|
* A text field component, that wraps around the native `<input />` element
|
|
3492
3606
|
* and adds some extra states and information around it (i.e. a text and an error labels,
|
|
@@ -3534,7 +3648,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3534
3648
|
_ref$darkMode = _ref.darkMode,
|
|
3535
3649
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3536
3650
|
width = _ref.width,
|
|
3537
|
-
inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3651
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
3538
3652
|
|
|
3539
3653
|
var _useState = React.useState(false),
|
|
3540
3654
|
showPassword = _useState[0],
|
|
@@ -3555,7 +3669,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3555
3669
|
});
|
|
3556
3670
|
};
|
|
3557
3671
|
|
|
3558
|
-
return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel, {
|
|
3672
|
+
return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
|
|
3559
3673
|
darkMode: darkMode,
|
|
3560
3674
|
"data-testid": "text-field-text-label"
|
|
3561
3675
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -3574,7 +3688,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3574
3688
|
onClick: showHideClickHandler
|
|
3575
3689
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
3576
3690
|
level: 1
|
|
3577
|
-
}, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel, {
|
|
3691
|
+
}, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
|
|
3578
3692
|
darkMode: darkMode,
|
|
3579
3693
|
"data-testid": "text-field-error-label"
|
|
3580
3694
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -3582,24 +3696,24 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3582
3696
|
}, error)));
|
|
3583
3697
|
});
|
|
3584
3698
|
|
|
3585
|
-
var _templateObject$
|
|
3586
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3699
|
+
var _templateObject$p, _templateObject2$d;
|
|
3700
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
3587
3701
|
var iconName = _ref.iconName;
|
|
3588
3702
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3589
3703
|
}, function (_ref2) {
|
|
3590
3704
|
var color = _ref2.color;
|
|
3591
3705
|
return color;
|
|
3592
3706
|
});
|
|
3593
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3707
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3594
3708
|
|
|
3595
|
-
var _excluded$
|
|
3709
|
+
var _excluded$8 = ["children", "iconName", "iconDirection", "color"];
|
|
3596
3710
|
|
|
3597
3711
|
var TextLink = function TextLink(_ref) {
|
|
3598
3712
|
var children = _ref.children,
|
|
3599
3713
|
iconName = _ref.iconName,
|
|
3600
3714
|
iconDirection = _ref.iconDirection,
|
|
3601
3715
|
color = _ref.color,
|
|
3602
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3716
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
3603
3717
|
|
|
3604
3718
|
var truncatedString = children.substring(0, 30);
|
|
3605
3719
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
@@ -3614,20 +3728,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3614
3728
|
})) : null);
|
|
3615
3729
|
};
|
|
3616
3730
|
|
|
3617
|
-
var _templateObject$
|
|
3618
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3731
|
+
var _templateObject$q, _templateObject2$e, _templateObject3$8, _templateObject4$5;
|
|
3732
|
+
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 10px;\n margin-top: 140px;\n display: grid;\n grid-template-columns: repeat(2, auto);\n font-family: var(--font-family-header);\n font-size: ", ";\n color: ", ";\n width: auto;\n margin: auto;\n"])), function (_ref) {
|
|
3619
3733
|
var fontSize = _ref.fontSize;
|
|
3620
3734
|
return fontSize + 'px';
|
|
3621
3735
|
}, function (_ref2) {
|
|
3622
3736
|
var color = _ref2.color;
|
|
3623
3737
|
return color;
|
|
3624
3738
|
});
|
|
3625
|
-
var LogoRightSide = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3626
|
-
var LogoLeftSide = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3739
|
+
var LogoRightSide = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-left: 10px;\n font-weight: 500;\n letter-spacing: 1px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
|
|
3740
|
+
var LogoLeftSide = /*#__PURE__*/styled__default.div(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-right: 1px solid ", ";\n padding-right: 10px;\n letter-spacing: 2px;\n display: flex;\n flex-direction: column;\n"])), function (_ref3) {
|
|
3627
3741
|
var color = _ref3.color;
|
|
3628
3742
|
return color;
|
|
3629
3743
|
});
|
|
3630
|
-
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3744
|
+
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
|
|
3631
3745
|
|
|
3632
3746
|
var TextLogoProduct;
|
|
3633
3747
|
|
|
@@ -3649,12 +3763,12 @@ var Logo = function Logo(_ref) {
|
|
|
3649
3763
|
}, /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "ROYAL"), /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "OPERA"), /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "HOUSE")), /*#__PURE__*/React.createElement(LogoRightSide, null, productName));
|
|
3650
3764
|
};
|
|
3651
3765
|
|
|
3652
|
-
var _templateObject$
|
|
3653
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3766
|
+
var _templateObject$r, _templateObject2$f, _templateObject3$9, _templateObject4$6;
|
|
3767
|
+
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
3654
3768
|
var dark = _ref.dark;
|
|
3655
3769
|
return dark ? 'white' : 'errorstate';
|
|
3656
3770
|
});
|
|
3657
|
-
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject2$
|
|
3771
|
+
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
3658
3772
|
var dark = _ref2.dark,
|
|
3659
3773
|
disabled = _ref2.disabled;
|
|
3660
3774
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3663,7 +3777,7 @@ var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject2$e || (_te
|
|
|
3663
3777
|
var disabled = _ref3.disabled;
|
|
3664
3778
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3665
3779
|
}, devices.mobileAndTablet);
|
|
3666
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$
|
|
3780
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
3667
3781
|
var dark = _ref4.dark,
|
|
3668
3782
|
disabled = _ref4.disabled,
|
|
3669
3783
|
error = _ref4.error;
|
|
@@ -3679,7 +3793,7 @@ var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$8 || (
|
|
|
3679
3793
|
dark = _ref6.dark;
|
|
3680
3794
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3681
3795
|
}, devices.mobile);
|
|
3682
|
-
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
3796
|
+
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(\n --base-color-", "\n );\n & svg {\n display: block;\n path {\n fill: var(\n --base-color-", "\n );\n }\n }\n }\n"])), TickboxCheckmark, function (_ref7) {
|
|
3683
3797
|
var dark = _ref7.dark,
|
|
3684
3798
|
whiteBox = _ref7.whiteBox,
|
|
3685
3799
|
disabled = _ref7.disabled;
|
|
@@ -3695,6 +3809,10 @@ var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject4$5 || (_te
|
|
|
3695
3809
|
return 'white';
|
|
3696
3810
|
});
|
|
3697
3811
|
|
|
3812
|
+
/**
|
|
3813
|
+
* DEPRECATED. Use Tickbox2 instead
|
|
3814
|
+
*/
|
|
3815
|
+
|
|
3698
3816
|
var Tickbox = function Tickbox(_ref) {
|
|
3699
3817
|
var children = _ref.children,
|
|
3700
3818
|
onChange = _ref.onChange,
|
|
@@ -3733,7 +3851,7 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3733
3851
|
};
|
|
3734
3852
|
|
|
3735
3853
|
var isDarkMode = mode === exports.TickboxMode.Dark;
|
|
3736
|
-
return /*#__PURE__*/React__default.createElement(TickboxLabel, {
|
|
3854
|
+
return /*#__PURE__*/React__default.createElement(TickboxLabel$1, {
|
|
3737
3855
|
tabIndex: 0,
|
|
3738
3856
|
onKeyPress: spaceButtonHandler,
|
|
3739
3857
|
dark: isDarkMode,
|
|
@@ -3763,19 +3881,131 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3763
3881
|
}, error)));
|
|
3764
3882
|
};
|
|
3765
3883
|
|
|
3766
|
-
var _templateObject$
|
|
3767
|
-
var
|
|
3884
|
+
var _templateObject$s, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$3, _templateObject6$2;
|
|
3885
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3886
|
+
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3887
|
+
var error = _ref.error,
|
|
3888
|
+
darkMode = _ref.darkMode,
|
|
3889
|
+
disabled = _ref.disabled;
|
|
3890
|
+
if (error !== undefined) return '1px solid var(--error-color-state)';
|
|
3891
|
+
if (disabled) return '1px solid var(--base-color-midgrey)';
|
|
3892
|
+
if (darkMode) return '1px solid var(--base-color-white)';
|
|
3893
|
+
return '1px solid var(--base-color-black)';
|
|
3894
|
+
}, function (_ref2) {
|
|
3895
|
+
var disabled = _ref2.disabled,
|
|
3896
|
+
darkMode = _ref2.darkMode;
|
|
3897
|
+
if (disabled) return 'var(--base-color-lightgrey)';
|
|
3898
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3899
|
+
return ' var(--base-color-white)';
|
|
3900
|
+
}, function (_ref3) {
|
|
3901
|
+
var disabled = _ref3.disabled,
|
|
3902
|
+
blackBox = _ref3.blackBox,
|
|
3903
|
+
darkMode = _ref3.darkMode;
|
|
3904
|
+
if (disabled) return 'var(--base-color-midgrey)';
|
|
3905
|
+
if (darkMode) return 'var(--base-color-black)';
|
|
3906
|
+
if (blackBox) return 'var(--base-color-white)';
|
|
3907
|
+
return ' var(--base-color-black)';
|
|
3908
|
+
});
|
|
3909
|
+
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
3910
|
+
var blackBox = _ref4.blackBox,
|
|
3911
|
+
darkMode = _ref4.darkMode;
|
|
3912
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3913
|
+
if (blackBox) return 'var(--base-color-black)';
|
|
3914
|
+
return ' var(--base-color-white)';
|
|
3915
|
+
}, Tickbox$1, function (_ref5) {
|
|
3916
|
+
var darkMode = _ref5.darkMode;
|
|
3917
|
+
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3918
|
+
return '3px solid var(--base-color-lapislazuli)';
|
|
3919
|
+
});
|
|
3920
|
+
var TickboxIcon = /*#__PURE__*/styled__default.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n svg {\n font-size: 12px;\n width: 1em;\n height: 1em;\n fill: currentColor;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n input[type='checkbox']:checked + ", " & {\n display: block;\n }\n"])), Tickbox$1);
|
|
3921
|
+
var TextLabel$2 = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3922
|
+
var darkMode = _ref6.darkMode,
|
|
3923
|
+
disabled = _ref6.disabled;
|
|
3924
|
+
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
3925
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3926
|
+
if (disabled) return 'var(--base-color-darkgrey)';
|
|
3927
|
+
return 'var(--base-color-black)';
|
|
3928
|
+
});
|
|
3929
|
+
var ErrorLabel$2 = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3930
|
+
var darkMode = _ref7.darkMode;
|
|
3931
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
3932
|
+
return 'var(--base-color-errorstate)';
|
|
3933
|
+
});
|
|
3934
|
+
|
|
3935
|
+
var _excluded$9 = ["children", "disabled", "error", "darkMode", "blackBox"];
|
|
3936
|
+
/**
|
|
3937
|
+
* A Tickbox component, that wraps around the native `<input type="checkbox"/>` element
|
|
3938
|
+
* and adds some extra styling, states and information around it (i.e. an error label,
|
|
3939
|
+
* error state).
|
|
3940
|
+
*
|
|
3941
|
+
* # Error state
|
|
3942
|
+
* An error label will be shown below the tickbox if the `error` prop exists.
|
|
3943
|
+
* Also tickbox will be rendered with a red border. An empty string can be passed to
|
|
3944
|
+
* render only error state without error message.
|
|
3945
|
+
*
|
|
3946
|
+
* # Light / Dark mode
|
|
3947
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
3948
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
3949
|
+
*
|
|
3950
|
+
* # Black box mode
|
|
3951
|
+
* If `blackBox` prop is true checked state will be styled as black box with white tick icon.
|
|
3952
|
+
* This style was used before as a default. Not preferred in new components.
|
|
3953
|
+
* This will be ignored if `darkMode` is true.
|
|
3954
|
+
*/
|
|
3955
|
+
|
|
3956
|
+
var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3957
|
+
var children = _ref.children,
|
|
3958
|
+
_ref$disabled = _ref.disabled,
|
|
3959
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
3960
|
+
error = _ref.error,
|
|
3961
|
+
_ref$darkMode = _ref.darkMode,
|
|
3962
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3963
|
+
_ref$blackBox = _ref.blackBox,
|
|
3964
|
+
blackBox = _ref$blackBox === void 0 ? false : _ref$blackBox,
|
|
3965
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
3966
|
+
|
|
3967
|
+
return /*#__PURE__*/React__default.createElement(Container$2, null, /*#__PURE__*/React__default.createElement(TickboxLabel$2, {
|
|
3968
|
+
darkMode: darkMode,
|
|
3969
|
+
blackBox: blackBox
|
|
3970
|
+
}, /*#__PURE__*/React__default.createElement("input", Object.assign({}, inputProps, {
|
|
3971
|
+
disabled: disabled,
|
|
3972
|
+
type: "checkbox",
|
|
3973
|
+
ref: ref,
|
|
3974
|
+
"data-testid": "tickbox-input"
|
|
3975
|
+
})), /*#__PURE__*/React__default.createElement(Tickbox$1, {
|
|
3976
|
+
error: error,
|
|
3977
|
+
darkMode: darkMode,
|
|
3978
|
+
disabled: disabled,
|
|
3979
|
+
blackBox: blackBox
|
|
3980
|
+
}, /*#__PURE__*/React__default.createElement(TickboxIcon, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
3981
|
+
iconName: "Tick"
|
|
3982
|
+
}))), /*#__PURE__*/React__default.createElement(TextLabel$2, {
|
|
3983
|
+
disabled: disabled,
|
|
3984
|
+
darkMode: darkMode,
|
|
3985
|
+
"data-testid": "tickbox-content"
|
|
3986
|
+
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3987
|
+
level: 1
|
|
3988
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
|
|
3989
|
+
darkMode: darkMode,
|
|
3990
|
+
"data-testid": "tickbox-error-label"
|
|
3991
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
3992
|
+
level: 6
|
|
3993
|
+
}, error)));
|
|
3994
|
+
});
|
|
3995
|
+
|
|
3996
|
+
var _templateObject$t, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$3, _templateObject7, _templateObject8;
|
|
3997
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
3768
3998
|
var color = _ref.color;
|
|
3769
3999
|
return color;
|
|
3770
4000
|
});
|
|
3771
|
-
var Line = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4001
|
+
var Line = /*#__PURE__*/styled__default.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
3772
4002
|
var color = _ref2.color;
|
|
3773
4003
|
return color;
|
|
3774
4004
|
}, devices.mobileAndTablet);
|
|
3775
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3776
|
-
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3777
|
-
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
3778
|
-
var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
4005
|
+
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4006
|
+
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 display: flex;\n\n @media ", " {\n font-size: var(--font-size-header-5);\n }\n"])), devices.tablet);
|
|
4007
|
+
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n margin-top: 4px;\n"])));
|
|
4008
|
+
var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
3779
4009
|
var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3780
4010
|
var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3781
4011
|
|
|
@@ -3872,8 +4102,8 @@ var Timer = function Timer(_ref) {
|
|
|
3872
4102
|
}));
|
|
3873
4103
|
};
|
|
3874
4104
|
|
|
3875
|
-
var _templateObject$
|
|
3876
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4105
|
+
var _templateObject$u;
|
|
4106
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
|
|
3877
4107
|
|
|
3878
4108
|
var TypeTags = function TypeTags(_ref) {
|
|
3879
4109
|
var list = _ref.list;
|
|
@@ -3886,13 +4116,13 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
3886
4116
|
}));
|
|
3887
4117
|
};
|
|
3888
4118
|
|
|
3889
|
-
var _templateObject$
|
|
3890
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
3891
|
-
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3892
|
-
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
3893
|
-
var VideoMute = /*#__PURE__*/styled__default.button(_templateObject4$
|
|
3894
|
-
var thumbStyes = /*#__PURE__*/styled.css(_templateObject5$
|
|
3895
|
-
var trackStyles = /*#__PURE__*/styled.css(_templateObject6$
|
|
4119
|
+
var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$4, _templateObject7$1;
|
|
4120
|
+
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n"])));
|
|
4121
|
+
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50px;\n bottom: 24px;\n display: flex;\n align-items: center;\n @media ", " {\n left: 20px;\n bottom: 12px;\n }\n"])), devices.mobile);
|
|
4122
|
+
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
4123
|
+
var VideoMute = /*#__PURE__*/styled__default.button(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 17px;\n height: 17px;\n background: none;\n border: none;\n padding: 0;\n svg {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
4124
|
+
var thumbStyes = /*#__PURE__*/styled.css(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n -webkit-appearance: none;\n appearance: none;\n border: none;\n height: 8px;\n width: 8px;\n border-radius: 50%;\n background: #ffffff;\n border: none;\n transform: translateY(-25%);\n"])));
|
|
4125
|
+
var trackStyles = /*#__PURE__*/styled.css(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n cursor: pointer;\n height: 4px;\n cursor: pointer;\n background: rgb(241, 241, 241, 0.5);\n border-radius: 1.3px;\n border: none;\n"])));
|
|
3896
4126
|
var VolumeControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n margin: 12px 12px;\n padding: 0;\n background-color: rgb(26, 26, 26, 0.6);\n height: 36px;\n width: ", ";\n align-items: center;\n justify-content: center;\n\n /* Range slider overrides */\n input[type='range' i] {\n -webkit-appearance: none;\n appearance: none;\n width: 42px;\n margin: 0;\n margin-left: 7px;\n background: transparent; /* Otherwise white in Chrome */\n\n ::-webkit-slider-runnable-track {\n ", "\n }\n ::-moz-range-track {\n ", "\n }\n ::-ms-track {\n ", "\n }\n ::-ms-fill-lower {\n ", "\n }\n ::-ms-fill-upper {\n ", "\n }\n\n ::-webkit-slider-thumb {\n ", "\n }\n ::-moz-range-thumb {\n ", "\n }\n ::-ms-thumb {\n ", "\n }\n }\n"])), function (_ref) {
|
|
3897
4127
|
var volumeHidden = _ref.volumeHidden;
|
|
3898
4128
|
return volumeHidden ? '40px' : '100px';
|
|
@@ -3998,13 +4228,13 @@ var VideoControls = function VideoControls(_ref) {
|
|
|
3998
4228
|
})));
|
|
3999
4229
|
};
|
|
4000
4230
|
|
|
4001
|
-
var _templateObject$
|
|
4002
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4003
|
-
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4231
|
+
var _templateObject$w, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6;
|
|
4232
|
+
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
4233
|
+
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
4004
4234
|
var darkMode = _ref.darkMode;
|
|
4005
4235
|
return darkMode ? 'white' : 'errorstate';
|
|
4006
4236
|
});
|
|
4007
|
-
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4237
|
+
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
4008
4238
|
var darkMode = _ref2.darkMode,
|
|
4009
4239
|
disabled = _ref2.disabled,
|
|
4010
4240
|
error = _ref2.error;
|
|
@@ -4026,11 +4256,11 @@ var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templa
|
|
|
4026
4256
|
var disabled = _ref6.disabled;
|
|
4027
4257
|
return disabled ? 'midgrey' : 'black';
|
|
4028
4258
|
});
|
|
4029
|
-
var StepperValue = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
4259
|
+
var StepperValue = /*#__PURE__*/styled__default.input(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 51px;\n border: 0;\n text-align: center;\n font-family: var(--font-family-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n background-color: transparent;\n cursor: ", ";\n"])), function (_ref7) {
|
|
4030
4260
|
var disabled = _ref7.disabled;
|
|
4031
4261
|
return disabled ? 'not-allowed' : 'text';
|
|
4032
4262
|
});
|
|
4033
|
-
var StepperButton = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4263
|
+
var StepperButton = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n\n span {\n display: flex;\n justify-content: center;\n }\n\n svg {\n width: 40%;\n height: auto;\n }\n"])), function (_ref8) {
|
|
4034
4264
|
var disabled = _ref8.disabled;
|
|
4035
4265
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4036
4266
|
});
|
|
@@ -4226,22 +4456,22 @@ var Component = function Component(_ref) {
|
|
|
4226
4456
|
}, error)));
|
|
4227
4457
|
};
|
|
4228
4458
|
|
|
4229
|
-
var _templateObject$
|
|
4230
|
-
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4459
|
+
var _templateObject$x, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
|
|
4460
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
4231
4461
|
var isMenuOpen = _ref.isMenuOpen;
|
|
4232
4462
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
4233
4463
|
});
|
|
4234
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4235
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
4236
|
-
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4464
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
|
|
4465
|
+
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
|
|
4466
|
+
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref2) {
|
|
4237
4467
|
var visible = _ref2.visible;
|
|
4238
4468
|
return visible ? 'visible' : 'hidden';
|
|
4239
4469
|
}, zIndexes.search, devices.mobile);
|
|
4240
|
-
var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
4470
|
+
var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n height: 100px;\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref3) {
|
|
4241
4471
|
var visible = _ref3.visible;
|
|
4242
4472
|
return visible ? 'visible' : 'hidden';
|
|
4243
4473
|
}, zIndexes.search, devices.mobile);
|
|
4244
|
-
var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$
|
|
4474
|
+
var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-top: ", ";\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet, function (_ref4) {
|
|
4245
4475
|
var theme = _ref4.theme;
|
|
4246
4476
|
return theme.spacing[12];
|
|
4247
4477
|
});
|
|
@@ -4251,8 +4481,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templa
|
|
|
4251
4481
|
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
4252
4482
|
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
4253
4483
|
|
|
4254
|
-
var _templateObject$
|
|
4255
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4484
|
+
var _templateObject$y;
|
|
4485
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
4256
4486
|
|
|
4257
4487
|
var Logo$1 = function Logo(_ref) {
|
|
4258
4488
|
var _ref$id = _ref.id,
|
|
@@ -4281,11 +4511,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
4281
4511
|
}))));
|
|
4282
4512
|
};
|
|
4283
4513
|
|
|
4284
|
-
var _templateObject$
|
|
4285
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4514
|
+
var _templateObject$z;
|
|
4515
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
4286
4516
|
|
|
4287
|
-
var _templateObject$
|
|
4288
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4517
|
+
var _templateObject$A, _templateObject2$l, _templateObject3$f, _templateObject4$c;
|
|
4518
|
+
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
4289
4519
|
var selected = _ref.selected,
|
|
4290
4520
|
colorPrimary = _ref.colorPrimary;
|
|
4291
4521
|
|
|
@@ -4313,9 +4543,9 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
4313
4543
|
|
|
4314
4544
|
return '';
|
|
4315
4545
|
});
|
|
4316
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4317
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4318
|
-
var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
4546
|
+
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
4547
|
+
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
4548
|
+
var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
4319
4549
|
|
|
4320
4550
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
4321
4551
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -4473,8 +4703,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
4473
4703
|
}, expiryTime ? basketText : text) : ''));
|
|
4474
4704
|
};
|
|
4475
4705
|
|
|
4476
|
-
var _templateObject$
|
|
4477
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4706
|
+
var _templateObject$B, _templateObject2$m;
|
|
4707
|
+
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
4478
4708
|
var selected = _ref.selected,
|
|
4479
4709
|
colorPrimary = _ref.colorPrimary;
|
|
4480
4710
|
|
|
@@ -4490,7 +4720,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_te
|
|
|
4490
4720
|
var colorPrimary = _ref3.colorPrimary;
|
|
4491
4721
|
return colorPrimary;
|
|
4492
4722
|
});
|
|
4493
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4723
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
4494
4724
|
|
|
4495
4725
|
var Search$1 = function Search(_ref) {
|
|
4496
4726
|
var _ref$selected = _ref.selected,
|
|
@@ -4766,23 +4996,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
4766
4996
|
}));
|
|
4767
4997
|
};
|
|
4768
4998
|
|
|
4769
|
-
var _templateObject$
|
|
4770
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4771
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4999
|
+
var _templateObject$C, _templateObject2$n, _templateObject3$g, _templateObject4$d;
|
|
5000
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5001
|
+
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
4772
5002
|
if (props.showMenu) {
|
|
4773
5003
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
4774
5004
|
}
|
|
4775
5005
|
|
|
4776
5006
|
return "display: none;";
|
|
4777
5007
|
});
|
|
4778
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5008
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\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-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
4779
5009
|
var colorPrimary = _ref.colorPrimary;
|
|
4780
5010
|
return colorPrimary;
|
|
4781
5011
|
}, function (_ref2) {
|
|
4782
5012
|
var colorPrimary = _ref2.colorPrimary;
|
|
4783
5013
|
return colorPrimary;
|
|
4784
5014
|
}, devices.mobileAndTablet);
|
|
4785
|
-
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5015
|
+
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
4786
5016
|
|
|
4787
5017
|
var Tabs = function Tabs(_ref) {
|
|
4788
5018
|
var _ref$items = _ref.items,
|
|
@@ -4909,12 +5139,12 @@ var Tabs = function Tabs(_ref) {
|
|
|
4909
5139
|
}, "MENU"))));
|
|
4910
5140
|
};
|
|
4911
5141
|
|
|
4912
|
-
var _templateObject$
|
|
4913
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4914
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4915
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4916
|
-
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4917
|
-
var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
5142
|
+
var _templateObject$D, _templateObject2$o, _templateObject3$h, _templateObject5$8, _templateObject6$6, _templateObject7$3;
|
|
5143
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: var(--base-color-transparent);\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
5144
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
5145
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
5146
|
+
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
5147
|
+
var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4918
5148
|
var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4919
5149
|
|
|
4920
5150
|
var SearchBar = function SearchBar(_ref) {
|
|
@@ -5147,18 +5377,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
5147
5377
|
})))));
|
|
5148
5378
|
};
|
|
5149
5379
|
|
|
5150
|
-
var _templateObject$
|
|
5151
|
-
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$
|
|
5152
|
-
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5153
|
-
var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5154
|
-
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5155
|
-
var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5156
|
-
var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$
|
|
5380
|
+
var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$9, _templateObject6$7;
|
|
5381
|
+
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
5382
|
+
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
5383
|
+
var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
5384
|
+
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
5385
|
+
var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
5386
|
+
var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
5157
5387
|
|
|
5158
|
-
var _templateObject$
|
|
5159
|
-
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
5160
|
-
var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$
|
|
5161
|
-
var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
5388
|
+
var _templateObject$F, _templateObject2$q, _templateObject3$j;
|
|
5389
|
+
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
5390
|
+
var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
5391
|
+
var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
5162
5392
|
|
|
5163
5393
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
5164
5394
|
var _ref$items = _ref.items,
|
|
@@ -5174,13 +5404,13 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
5174
5404
|
}));
|
|
5175
5405
|
};
|
|
5176
5406
|
|
|
5177
|
-
var _templateObject$
|
|
5178
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5179
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5180
|
-
var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5181
|
-
var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$
|
|
5182
|
-
var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5183
|
-
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
5407
|
+
var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$a, _templateObject6$8, _templateObject7$4, _templateObject8$2;
|
|
5408
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
5409
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
5410
|
+
var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
5411
|
+
var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
5412
|
+
var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
5413
|
+
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
5184
5414
|
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
5185
5415
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &&& {\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n }\n"])));
|
|
5186
5416
|
|
|
@@ -5207,7 +5437,7 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
|
5207
5437
|
}, contact.title))));
|
|
5208
5438
|
};
|
|
5209
5439
|
|
|
5210
|
-
var _excluded$
|
|
5440
|
+
var _excluded$a = ["dataRoh"];
|
|
5211
5441
|
|
|
5212
5442
|
var Footer = function Footer(_ref) {
|
|
5213
5443
|
var data = _ref.data;
|
|
@@ -5218,7 +5448,7 @@ var Footer = function Footer(_ref) {
|
|
|
5218
5448
|
|
|
5219
5449
|
var _data$artsLogo = data.artsLogo,
|
|
5220
5450
|
artsDataRoh = _data$artsLogo.dataRoh,
|
|
5221
|
-
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$
|
|
5451
|
+
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$a);
|
|
5222
5452
|
|
|
5223
5453
|
var additionalInfo = data.additionalInfo;
|
|
5224
5454
|
return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -5248,15 +5478,15 @@ var Footer = function Footer(_ref) {
|
|
|
5248
5478
|
}, additionalInfo)))));
|
|
5249
5479
|
};
|
|
5250
5480
|
|
|
5251
|
-
var _templateObject$
|
|
5481
|
+
var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$9;
|
|
5252
5482
|
var LIST_ITEM_GAP = 32;
|
|
5253
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5483
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
5254
5484
|
var bottomBorder = _ref.bottomBorder;
|
|
5255
5485
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
5256
5486
|
}, zIndexes.anchor);
|
|
5257
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
5258
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5259
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$
|
|
5487
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
5488
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
5489
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
|
|
5260
5490
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
5261
5491
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
5262
5492
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -5267,13 +5497,13 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$e || (_templateO
|
|
|
5267
5497
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
5268
5498
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
5269
5499
|
});
|
|
5270
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5500
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])), function (_ref5) {
|
|
5271
5501
|
var fullWidth = _ref5.fullWidth;
|
|
5272
5502
|
return fullWidth ? '74px' : '46px';
|
|
5273
5503
|
});
|
|
5274
|
-
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
5504
|
+
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
|
|
5275
5505
|
|
|
5276
|
-
var _excluded$
|
|
5506
|
+
var _excluded$b = ["id", "text"];
|
|
5277
5507
|
|
|
5278
5508
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
5279
5509
|
var tabs = _ref.tabs,
|
|
@@ -5489,7 +5719,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
5489
5719
|
}, tabs.map(function (_ref4) {
|
|
5490
5720
|
var id = _ref4.id,
|
|
5491
5721
|
text = _ref4.text,
|
|
5492
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
5722
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$b);
|
|
5493
5723
|
|
|
5494
5724
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
5495
5725
|
key: id
|
|
@@ -5516,18 +5746,18 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
5516
5746
|
})) : null) : null))));
|
|
5517
5747
|
};
|
|
5518
5748
|
|
|
5519
|
-
var _templateObject$
|
|
5520
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5749
|
+
var _templateObject$I, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$3, _templateObject9$1, _templateObject10$1;
|
|
5750
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
5521
5751
|
var sticky = _ref.sticky;
|
|
5522
5752
|
return sticky ? 'sticky' : 'initial';
|
|
5523
5753
|
}, zIndexes.anchor);
|
|
5524
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
5525
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5754
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
5755
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
5526
5756
|
var title = _ref2.title;
|
|
5527
5757
|
return title ? 'row' : 'row-reverse';
|
|
5528
5758
|
}, devices.tablet, devices.mobile);
|
|
5529
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5530
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
5759
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
5760
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
5531
5761
|
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
5532
5762
|
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
5533
5763
|
var theme = _ref3.theme;
|
|
@@ -5545,7 +5775,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
5545
5775
|
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5546
5776
|
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
5547
5777
|
|
|
5548
|
-
var _excluded$
|
|
5778
|
+
var _excluded$c = ["text"],
|
|
5549
5779
|
_excluded2 = ["text"];
|
|
5550
5780
|
|
|
5551
5781
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
@@ -5557,7 +5787,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
5557
5787
|
|
|
5558
5788
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
5559
5789
|
primaryButtonText = _ref2.text,
|
|
5560
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5790
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
5561
5791
|
|
|
5562
5792
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
5563
5793
|
secondaryButtonText = _ref3.text,
|
|
@@ -5580,16 +5810,16 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
5580
5810
|
}, message)));
|
|
5581
5811
|
};
|
|
5582
5812
|
|
|
5583
|
-
var _templateObject$
|
|
5584
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5585
|
-
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5586
|
-
var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5813
|
+
var _templateObject$J, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject5$c, _templateObject6$b, _templateObject7$6, _templateObject8$4;
|
|
5814
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
5815
|
+
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
5816
|
+
var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
5587
5817
|
var theme = _ref.theme;
|
|
5588
5818
|
return theme.colors.primary;
|
|
5589
5819
|
}, exports.Colors.White);
|
|
5590
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5591
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5592
|
-
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
5820
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
5821
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
5822
|
+
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
5593
5823
|
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
5594
5824
|
var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
5595
5825
|
|
|
@@ -5661,8 +5891,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
5661
5891
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
5662
5892
|
};
|
|
5663
5893
|
|
|
5664
|
-
var _templateObject$
|
|
5665
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5894
|
+
var _templateObject$K;
|
|
5895
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
|
|
5666
5896
|
|
|
5667
5897
|
var UpsellCards = function UpsellCards(_ref) {
|
|
5668
5898
|
var upsellCards = _ref.upsellCards;
|
|
@@ -5680,20 +5910,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
5680
5910
|
}));
|
|
5681
5911
|
};
|
|
5682
5912
|
|
|
5683
|
-
var _templateObject$
|
|
5684
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5913
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$o;
|
|
5914
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
|
|
5685
5915
|
var theme = _ref.theme;
|
|
5686
5916
|
return theme.colors.primary;
|
|
5687
5917
|
}, devices.mobile, devices.tablet);
|
|
5688
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5689
|
-
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5918
|
+
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
|
|
5919
|
+
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5690
5920
|
|
|
5691
|
-
var _templateObject$
|
|
5692
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5693
|
-
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5694
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5695
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5696
|
-
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5921
|
+
var _templateObject$M, _templateObject2$w, _templateObject3$p, _templateObject4$j, _templateObject5$d;
|
|
5922
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
5923
|
+
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
5924
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
5925
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
5926
|
+
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s 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\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), devices.mobile);
|
|
5697
5927
|
|
|
5698
5928
|
var Accordion = function Accordion(_ref) {
|
|
5699
5929
|
var _ref$title = _ref.title,
|
|
@@ -5818,8 +6048,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
5818
6048
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
5819
6049
|
};
|
|
5820
6050
|
|
|
5821
|
-
var _templateObject$
|
|
5822
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6051
|
+
var _templateObject$N;
|
|
6052
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
5823
6053
|
|
|
5824
6054
|
var Accordions = function Accordions(_ref) {
|
|
5825
6055
|
var _ref$items = _ref.items,
|
|
@@ -5851,13 +6081,13 @@ var Theme = function Theme(_ref) {
|
|
|
5851
6081
|
}, children);
|
|
5852
6082
|
};
|
|
5853
6083
|
|
|
5854
|
-
var _templateObject$
|
|
5855
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6084
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q;
|
|
6085
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
|
|
5856
6086
|
var theme = _ref.theme;
|
|
5857
6087
|
return theme.colors.primary;
|
|
5858
6088
|
}, devices.mobile);
|
|
5859
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5860
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6089
|
+
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
6090
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s 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 color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
|
|
5861
6091
|
|
|
5862
6092
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
5863
6093
|
var title = _ref.title,
|
|
@@ -5894,33 +6124,33 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
5894
6124
|
}))))));
|
|
5895
6125
|
};
|
|
5896
6126
|
|
|
5897
|
-
var _templateObject$
|
|
6127
|
+
var _templateObject$P, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
|
|
5898
6128
|
var LENGTH_LARGE_TEXT = 28;
|
|
5899
6129
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
5900
6130
|
var LENGTH_TEXT_TABLET = 10;
|
|
5901
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6131
|
+
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
5902
6132
|
var isCardClickable = _ref.isCardClickable;
|
|
5903
6133
|
return isCardClickable ? 'pointer' : 'default';
|
|
5904
6134
|
}, function (_ref2) {
|
|
5905
6135
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
5906
6136
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
5907
6137
|
});
|
|
5908
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6138
|
+
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
5909
6139
|
var lineColor = _ref3.lineColor,
|
|
5910
6140
|
theme = _ref3.theme;
|
|
5911
6141
|
if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
|
|
5912
6142
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
5913
6143
|
}, zIndexes.contentOverlay);
|
|
5914
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5915
|
-
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6144
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
6145
|
+
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
5916
6146
|
var fullWidth = _ref4.fullWidth;
|
|
5917
6147
|
return fullWidth ? '0' : '20px';
|
|
5918
6148
|
}, function (_ref5) {
|
|
5919
6149
|
var fullWidth = _ref5.fullWidth;
|
|
5920
6150
|
return fullWidth ? '0' : '20px';
|
|
5921
6151
|
});
|
|
5922
|
-
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5923
|
-
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6152
|
+
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
6153
|
+
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
|
|
5924
6154
|
var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
5925
6155
|
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
5926
6156
|
var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 30px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
|
|
@@ -6042,7 +6272,7 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
|
|
|
6042
6272
|
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
6043
6273
|
};
|
|
6044
6274
|
|
|
6045
|
-
var _excluded$
|
|
6275
|
+
var _excluded$d = ["text"],
|
|
6046
6276
|
_excluded2$1 = ["text"];
|
|
6047
6277
|
|
|
6048
6278
|
var _buttonTypeToButton;
|
|
@@ -6095,7 +6325,7 @@ var Card = function Card(_ref) {
|
|
|
6095
6325
|
var _ref2 = firstButton || {},
|
|
6096
6326
|
_ref2$text = _ref2.text,
|
|
6097
6327
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
6098
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6328
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
6099
6329
|
|
|
6100
6330
|
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
|
|
6101
6331
|
var secondButton = links == null ? void 0 : links[1];
|
|
@@ -6183,9 +6413,9 @@ var Card = function Card(_ref) {
|
|
|
6183
6413
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
6184
6414
|
};
|
|
6185
6415
|
|
|
6186
|
-
var _templateObject$
|
|
6187
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6188
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
6416
|
+
var _templateObject$Q, _templateObject2$z;
|
|
6417
|
+
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6418
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6189
6419
|
|
|
6190
6420
|
var Cards = function Cards(_ref) {
|
|
6191
6421
|
var cards = _ref.cards,
|
|
@@ -6228,18 +6458,18 @@ var Cards = function Cards(_ref) {
|
|
|
6228
6458
|
}));
|
|
6229
6459
|
};
|
|
6230
6460
|
|
|
6231
|
-
var _templateObject$
|
|
6232
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6233
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6461
|
+
var _templateObject$R, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$f;
|
|
6462
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
6463
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
6234
6464
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
6235
6465
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
6236
6466
|
}, function (_ref2) {
|
|
6237
6467
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
6238
6468
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
6239
6469
|
}, devices.mobileAndTablet);
|
|
6240
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6241
|
-
var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6242
|
-
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6470
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6471
|
+
var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6472
|
+
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\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 color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
6243
6473
|
|
|
6244
6474
|
var divideAddressString = function divideAddressString(address) {
|
|
6245
6475
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -6297,17 +6527,17 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
6297
6527
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
6298
6528
|
};
|
|
6299
6529
|
|
|
6300
|
-
var _templateObject$
|
|
6301
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
6302
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
6530
|
+
var _templateObject$S, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g, _templateObject6$d, _templateObject7$8;
|
|
6531
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6532
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
6303
6533
|
return props.clickable ? 'pointer' : 'default';
|
|
6304
6534
|
}, devices.mobile);
|
|
6305
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6306
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6535
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
6536
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
6307
6537
|
return props.showImage ? 2 : '1 / span 4';
|
|
6308
6538
|
}, devices.mobile);
|
|
6309
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6310
|
-
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6539
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
|
|
6540
|
+
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
6311
6541
|
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
6312
6542
|
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
6313
6543
|
});
|
|
@@ -6380,21 +6610,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
6380
6610
|
}), link.text)));
|
|
6381
6611
|
};
|
|
6382
6612
|
|
|
6383
|
-
var _templateObject$
|
|
6384
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6613
|
+
var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h;
|
|
6614
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
6385
6615
|
var imageToLeft = _ref.imageToLeft;
|
|
6386
6616
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
6387
6617
|
}, devices.mobile);
|
|
6388
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6618
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
6389
6619
|
var imageToLeft = _ref2.imageToLeft;
|
|
6390
6620
|
return imageToLeft ? 'left' : 'right';
|
|
6391
6621
|
}, devices.mobile);
|
|
6392
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6622
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
6393
6623
|
var imageToLeft = _ref3.imageToLeft;
|
|
6394
6624
|
return imageToLeft ? 'right' : 'left';
|
|
6395
6625
|
}, devices.mobile);
|
|
6396
|
-
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$
|
|
6397
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6626
|
+
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
6627
|
+
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
6398
6628
|
|
|
6399
6629
|
var Editorial = function Editorial(_ref) {
|
|
6400
6630
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -6458,10 +6688,10 @@ var BackgroundColour;
|
|
|
6458
6688
|
BackgroundColour["White"] = "white";
|
|
6459
6689
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
6460
6690
|
|
|
6461
|
-
var _templateObject$
|
|
6462
|
-
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
6463
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
6464
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
6691
|
+
var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o;
|
|
6692
|
+
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
|
|
6693
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6694
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
6465
6695
|
if (!props.infoThemed) {
|
|
6466
6696
|
return;
|
|
6467
6697
|
} else {
|
|
@@ -6472,7 +6702,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$t || (
|
|
|
6472
6702
|
}
|
|
6473
6703
|
}
|
|
6474
6704
|
});
|
|
6475
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
6705
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
6476
6706
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
6477
6707
|
}, function (props) {
|
|
6478
6708
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -6585,29 +6815,29 @@ var Information = function Information(_ref) {
|
|
|
6585
6815
|
}))));
|
|
6586
6816
|
};
|
|
6587
6817
|
|
|
6588
|
-
var _templateObject$
|
|
6589
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6818
|
+
var _templateObject$V, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$i, _templateObject6$e, _templateObject7$9, _templateObject8$6;
|
|
6819
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
6590
6820
|
var theme = _ref.theme;
|
|
6591
6821
|
return theme.colors.primary;
|
|
6592
6822
|
}, function (_ref2) {
|
|
6593
6823
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
6594
6824
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
6595
6825
|
}, devices.mobile);
|
|
6596
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
6597
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6826
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
6827
|
+
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
6598
6828
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
6599
6829
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
6600
6830
|
}, devices.mobile);
|
|
6601
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6831
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n ", ";\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), function (_ref4) {
|
|
6602
6832
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
6603
6833
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
6604
6834
|
}, devices.mobile);
|
|
6605
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6606
|
-
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6835
|
+
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
6836
|
+
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
6607
6837
|
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
6608
6838
|
var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
6609
6839
|
|
|
6610
|
-
var _excluded$
|
|
6840
|
+
var _excluded$e = ["text"];
|
|
6611
6841
|
|
|
6612
6842
|
var PageHeading = function PageHeading(_ref) {
|
|
6613
6843
|
var title = _ref.title,
|
|
@@ -6619,7 +6849,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
6619
6849
|
|
|
6620
6850
|
var _ref2 = link || {},
|
|
6621
6851
|
linkText = _ref2.text,
|
|
6622
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6852
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
|
|
6623
6853
|
|
|
6624
6854
|
var truncatedText = text == null ? void 0 : text.substring(0, 250);
|
|
6625
6855
|
var truncatedTitle = title && title.substring(0, 40);
|
|
@@ -6647,11 +6877,11 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
6647
6877
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
|
|
6648
6878
|
};
|
|
6649
6879
|
|
|
6650
|
-
var _excluded$
|
|
6880
|
+
var _excluded$f = ["link"];
|
|
6651
6881
|
|
|
6652
6882
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
6653
6883
|
var link = _ref.link,
|
|
6654
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6884
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
6655
6885
|
|
|
6656
6886
|
var coreLink = link && _extends({}, link, {
|
|
6657
6887
|
color: exports.Colors.White,
|
|
@@ -6665,11 +6895,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
6665
6895
|
})));
|
|
6666
6896
|
};
|
|
6667
6897
|
|
|
6668
|
-
var _excluded$
|
|
6898
|
+
var _excluded$g = ["link"];
|
|
6669
6899
|
|
|
6670
6900
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
6671
6901
|
var link = _ref.link,
|
|
6672
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6902
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
6673
6903
|
|
|
6674
6904
|
var cinemaLink = link && _extends({}, link, {
|
|
6675
6905
|
color: exports.Colors.Black,
|
|
@@ -6683,17 +6913,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
6683
6913
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
6684
6914
|
};
|
|
6685
6915
|
|
|
6686
|
-
var _templateObject$
|
|
6687
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6688
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6689
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
6690
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6691
|
-
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6692
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6916
|
+
var _templateObject$W, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$f, _templateObject7$a, _templateObject8$7;
|
|
6917
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
6918
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
6919
|
+
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
6920
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
6921
|
+
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
6922
|
+
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
6693
6923
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
6694
6924
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
6695
6925
|
|
|
6696
|
-
var _excluded$
|
|
6926
|
+
var _excluded$h = ["text"];
|
|
6697
6927
|
|
|
6698
6928
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
6699
6929
|
var children = _ref.children,
|
|
@@ -6711,7 +6941,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
6711
6941
|
|
|
6712
6942
|
var _ref2 = link || {},
|
|
6713
6943
|
linkText = _ref2.text,
|
|
6714
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6944
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$h);
|
|
6715
6945
|
|
|
6716
6946
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
6717
6947
|
bgUrlDesktop: bgUrlDesktop,
|
|
@@ -6756,21 +6986,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
6756
6986
|
}, "Scroll Down")) : null);
|
|
6757
6987
|
};
|
|
6758
6988
|
|
|
6759
|
-
var _templateObject$
|
|
6760
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6989
|
+
var _templateObject$X, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k;
|
|
6990
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
6761
6991
|
var color = _ref.color;
|
|
6762
6992
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
6763
6993
|
}, devices.mobileAndTablet);
|
|
6764
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6994
|
+
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
6765
6995
|
var hasImage = _ref2.hasImage;
|
|
6766
6996
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
6767
6997
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
6768
6998
|
var hasImage = _ref3.hasImage;
|
|
6769
6999
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
6770
7000
|
});
|
|
6771
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6772
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6773
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7001
|
+
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
7002
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
7003
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
6774
7004
|
|
|
6775
7005
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
6776
7006
|
var _image$src, _image$alt;
|
|
@@ -6801,14 +7031,14 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
6801
7031
|
}))));
|
|
6802
7032
|
};
|
|
6803
7033
|
|
|
6804
|
-
var _templateObject$
|
|
6805
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7034
|
+
var _templateObject$Y;
|
|
7035
|
+
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
6806
7036
|
|
|
6807
|
-
var _excluded$
|
|
7037
|
+
var _excluded$i = ["link"];
|
|
6808
7038
|
|
|
6809
7039
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
6810
7040
|
var link = _ref.link,
|
|
6811
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7041
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
|
|
6812
7042
|
|
|
6813
7043
|
var streamLink = link && _extends({}, link, {
|
|
6814
7044
|
color: exports.Colors.Black,
|
|
@@ -6822,12 +7052,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
6822
7052
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
6823
7053
|
};
|
|
6824
7054
|
|
|
6825
|
-
var _templateObject$
|
|
6826
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6827
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$
|
|
6828
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6829
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6830
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$
|
|
7055
|
+
var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject5$l, _templateObject6$g, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
|
|
7056
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-overline-4);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
7057
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
7058
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7059
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
7060
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
|
|
6831
7061
|
var invert = _ref.invert,
|
|
6832
7062
|
theme = _ref.theme;
|
|
6833
7063
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -7002,7 +7232,7 @@ var useMobile = function useMobile() {
|
|
|
7002
7232
|
return mobile;
|
|
7003
7233
|
};
|
|
7004
7234
|
|
|
7005
|
-
var _excluded$
|
|
7235
|
+
var _excluded$j = ["text"];
|
|
7006
7236
|
|
|
7007
7237
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7008
7238
|
var mobileVideo = video.mobile || video.desktop;
|
|
@@ -7118,7 +7348,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7118
7348
|
|
|
7119
7349
|
var _ref5 = link || {},
|
|
7120
7350
|
linkText = _ref5.text,
|
|
7121
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
7351
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
|
|
7122
7352
|
|
|
7123
7353
|
var titleSize = title && title.length > 20 ? 4 : 3;
|
|
7124
7354
|
var video = {
|
|
@@ -7157,15 +7387,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7157
7387
|
}), linkText))));
|
|
7158
7388
|
};
|
|
7159
7389
|
|
|
7160
|
-
var _templateObject$
|
|
7161
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$
|
|
7162
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$
|
|
7390
|
+
var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
|
|
7391
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
7392
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
|
|
7163
7393
|
|
|
7164
|
-
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
7394
|
+
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
7165
7395
|
var active = _ref.active;
|
|
7166
7396
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
7167
7397
|
});
|
|
7168
|
-
var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$
|
|
7398
|
+
var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
7169
7399
|
|
|
7170
7400
|
var reducePages = function reducePages(pages, currentPage) {
|
|
7171
7401
|
// If there are less than 6 pages, return all pages
|
|
@@ -7234,13 +7464,13 @@ var Pagination = function Pagination(_ref) {
|
|
|
7234
7464
|
}))));
|
|
7235
7465
|
};
|
|
7236
7466
|
|
|
7237
|
-
var _templateObject
|
|
7238
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject
|
|
7239
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7240
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7241
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7242
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7243
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
7467
|
+
var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$m, _templateObject6$h;
|
|
7468
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
7469
|
+
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
7470
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
7471
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
7472
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
7473
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
7244
7474
|
|
|
7245
7475
|
var Person = function Person(_ref) {
|
|
7246
7476
|
var person = _ref.person,
|
|
@@ -7291,11 +7521,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
7291
7521
|
}));
|
|
7292
7522
|
};
|
|
7293
7523
|
|
|
7294
|
-
var _templateObject$
|
|
7295
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7296
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
7297
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7298
|
-
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7524
|
+
var _templateObject$10, _templateObject2$K, _templateObject3$C, _templateObject4$u;
|
|
7525
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
7526
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
7527
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
7528
|
+
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
7299
7529
|
|
|
7300
7530
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
7301
7531
|
return array.reduce(function (acc, item) {
|
|
@@ -7363,14 +7593,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
7363
7593
|
}));
|
|
7364
7594
|
};
|
|
7365
7595
|
|
|
7366
|
-
var _templateObject
|
|
7596
|
+
var _templateObject$11, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
7367
7597
|
var LENGTH_TEXT = 28;
|
|
7368
7598
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
7369
7599
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
7370
7600
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
7371
7601
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
7372
7602
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
7373
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject
|
|
7603
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
7374
7604
|
var imageToLeft = _ref.imageToLeft;
|
|
7375
7605
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
7376
7606
|
}, devices.tablet, function (_ref2) {
|
|
@@ -7380,8 +7610,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ ||
|
|
|
7380
7610
|
var asCard = _ref3.asCard;
|
|
7381
7611
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
7382
7612
|
});
|
|
7383
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
7384
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7613
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
7614
|
+
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref4) {
|
|
7385
7615
|
var theme = _ref4.theme;
|
|
7386
7616
|
return theme.colors.black;
|
|
7387
7617
|
}, function (_ref5) {
|
|
@@ -7391,7 +7621,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$B || (
|
|
|
7391
7621
|
var theme = _ref6.theme;
|
|
7392
7622
|
return theme.colors.primary;
|
|
7393
7623
|
});
|
|
7394
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7624
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref7) {
|
|
7395
7625
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
7396
7626
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
7397
7627
|
}, function (_ref8) {
|
|
@@ -7419,11 +7649,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$t ||
|
|
|
7419
7649
|
|
|
7420
7650
|
return '';
|
|
7421
7651
|
});
|
|
7422
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7652
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
7423
7653
|
var marginBottom = _ref10.marginBottom;
|
|
7424
7654
|
return marginBottom + "px";
|
|
7425
7655
|
});
|
|
7426
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$
|
|
7656
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
7427
7657
|
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
7428
7658
|
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
7429
7659
|
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
@@ -7452,7 +7682,7 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19
|
|
|
7452
7682
|
var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
7453
7683
|
var EndDateText = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
7454
7684
|
|
|
7455
|
-
var _excluded$
|
|
7685
|
+
var _excluded$k = ["text"],
|
|
7456
7686
|
_excluded2$2 = ["text"],
|
|
7457
7687
|
_excluded3 = ["text"];
|
|
7458
7688
|
|
|
@@ -7526,7 +7756,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7526
7756
|
var _ref2 = firstButton || {},
|
|
7527
7757
|
_ref2$text = _ref2.text,
|
|
7528
7758
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7529
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7759
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
7530
7760
|
|
|
7531
7761
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
7532
7762
|
var secondButton = links == null ? void 0 : links[1];
|
|
@@ -7645,27 +7875,27 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7645
7875
|
}))));
|
|
7646
7876
|
};
|
|
7647
7877
|
|
|
7648
|
-
var _templateObject$
|
|
7878
|
+
var _templateObject$12, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$j, _templateObject7$d;
|
|
7649
7879
|
var LENGTH_TEXT$2 = 28;
|
|
7650
7880
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
7651
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7881
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
7652
7882
|
var imageToLeft = _ref.imageToLeft;
|
|
7653
7883
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
7654
7884
|
}, devices.tablet, function (_ref2) {
|
|
7655
7885
|
var imageToLeft = _ref2.imageToLeft;
|
|
7656
7886
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
7657
7887
|
}, devices.mobile);
|
|
7658
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7888
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
7659
7889
|
var imageToLeft = _ref3.imageToLeft;
|
|
7660
7890
|
return imageToLeft ? 'left' : 'right';
|
|
7661
7891
|
}, devices.mobile);
|
|
7662
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7892
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
7663
7893
|
var imageToLeft = _ref4.imageToLeft;
|
|
7664
7894
|
return imageToLeft ? 'right' : 'left';
|
|
7665
7895
|
}, devices.mobile);
|
|
7666
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7667
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
7668
|
-
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7896
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
|
|
7897
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
7898
|
+
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
7669
7899
|
var theme = _ref5.theme;
|
|
7670
7900
|
return theme.colors.black;
|
|
7671
7901
|
}, function (_ref6) {
|
|
@@ -7701,7 +7931,7 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
|
|
|
7701
7931
|
return '';
|
|
7702
7932
|
});
|
|
7703
7933
|
|
|
7704
|
-
var _excluded$
|
|
7934
|
+
var _excluded$l = ["text"],
|
|
7705
7935
|
_excluded2$3 = ["text"];
|
|
7706
7936
|
var LENGTH_TEXT$3 = 28;
|
|
7707
7937
|
|
|
@@ -7728,7 +7958,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7728
7958
|
var _ref2 = primaryButton || {},
|
|
7729
7959
|
_ref2$text = _ref2.text,
|
|
7730
7960
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7731
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7961
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
7732
7962
|
|
|
7733
7963
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
7734
7964
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -7762,8 +7992,12 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7762
7992
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
7763
7993
|
};
|
|
7764
7994
|
|
|
7765
|
-
var _templateObject$
|
|
7766
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7995
|
+
var _templateObject$13;
|
|
7996
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
7997
|
+
|
|
7998
|
+
/**
|
|
7999
|
+
* DEPRECATED. Use RadioGroup2 instead
|
|
8000
|
+
*/
|
|
7767
8001
|
|
|
7768
8002
|
var RadioGroup = function RadioGroup(_ref) {
|
|
7769
8003
|
var radios = _ref.radios,
|
|
@@ -7817,10 +8051,100 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
7817
8051
|
})));
|
|
7818
8052
|
};
|
|
7819
8053
|
|
|
7820
|
-
var _templateObject$
|
|
7821
|
-
var
|
|
7822
|
-
var
|
|
7823
|
-
var
|
|
8054
|
+
var _templateObject$14, _templateObject2$N, _templateObject3$F;
|
|
8055
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8056
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
8057
|
+
var horizontalMode = _ref.horizontalMode;
|
|
8058
|
+
if (horizontalMode) return 'row';
|
|
8059
|
+
return 'column';
|
|
8060
|
+
}, function (_ref2) {
|
|
8061
|
+
var gap = _ref2.gap;
|
|
8062
|
+
return gap + "px";
|
|
8063
|
+
});
|
|
8064
|
+
var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
8065
|
+
var darkMode = _ref3.darkMode;
|
|
8066
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
8067
|
+
return 'var(--base-color-errorstate)';
|
|
8068
|
+
});
|
|
8069
|
+
|
|
8070
|
+
/**
|
|
8071
|
+
* A RadioGroup component, that renders set of Radio2 components inside.
|
|
8072
|
+
* `name` prop should be specified and will be passed as a `name` to each
|
|
8073
|
+
* radio to combine them in one group.
|
|
8074
|
+
*
|
|
8075
|
+
* # Radios
|
|
8076
|
+
* `radios` prop is an array of radios that should be renderet. This is an
|
|
8077
|
+
* array of objects `{content: ReactNode, value: string | number}`.
|
|
8078
|
+
*
|
|
8079
|
+
* # Default value
|
|
8080
|
+
* `defaultValue` prop can be specified to make one of radios checked inittially.
|
|
8081
|
+
* This should be equal to `value` of one of `radios`.
|
|
8082
|
+
*
|
|
8083
|
+
* # Error state
|
|
8084
|
+
* An error label will be shown below the radios if the `error` prop exists.
|
|
8085
|
+
* Also radios will be rendered with a red border. An empty string can be passed to
|
|
8086
|
+
* render only error state without error message.
|
|
8087
|
+
*
|
|
8088
|
+
* # Horizontal mode
|
|
8089
|
+
* If `horizontalMode` prop is true radios will be placed in a row instead of column.
|
|
8090
|
+
*
|
|
8091
|
+
* # Distance between radios
|
|
8092
|
+
* `gap` prop allow to control distance between radios in pixels. This works in default and
|
|
8093
|
+
* horizontal modes.
|
|
8094
|
+
*
|
|
8095
|
+
* # Light / Dark mode
|
|
8096
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
8097
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8098
|
+
*
|
|
8099
|
+
* # Black box mode
|
|
8100
|
+
* If `blackBox` prop is true checked state will be styled as black box with white tick icon.
|
|
8101
|
+
* This style was used before as a default. Not preferred in new components.
|
|
8102
|
+
* This will be ignored if `darkMode` is true.
|
|
8103
|
+
*/
|
|
8104
|
+
|
|
8105
|
+
var RadioGroup2 = function RadioGroup2(_ref) {
|
|
8106
|
+
var radios = _ref.radios,
|
|
8107
|
+
name = _ref.name,
|
|
8108
|
+
_ref$horizontalMode = _ref.horizontalMode,
|
|
8109
|
+
horizontalMode = _ref$horizontalMode === void 0 ? false : _ref$horizontalMode,
|
|
8110
|
+
_ref$gap = _ref.gap,
|
|
8111
|
+
gap = _ref$gap === void 0 ? 30 : _ref$gap,
|
|
8112
|
+
error = _ref.error,
|
|
8113
|
+
darkMode = _ref.darkMode,
|
|
8114
|
+
blackBox = _ref.blackBox,
|
|
8115
|
+
onChange = _ref.onChange,
|
|
8116
|
+
defaultValue = _ref.defaultValue;
|
|
8117
|
+
|
|
8118
|
+
var changeHandler = function changeHandler(e) {
|
|
8119
|
+
onChange == null ? void 0 : onChange(e.target.value);
|
|
8120
|
+
};
|
|
8121
|
+
|
|
8122
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup$1, {
|
|
8123
|
+
gap: gap,
|
|
8124
|
+
horizontalMode: horizontalMode
|
|
8125
|
+
}, radios.map(function (radio, idx) {
|
|
8126
|
+
return /*#__PURE__*/React__default.createElement(Radio2, {
|
|
8127
|
+
key: radio.value + "-" + idx,
|
|
8128
|
+
name: name,
|
|
8129
|
+
value: radio.value,
|
|
8130
|
+
blackBox: blackBox,
|
|
8131
|
+
darkMode: darkMode,
|
|
8132
|
+
defaultChecked: radio.value === defaultValue,
|
|
8133
|
+
error: error !== undefined ? '' : undefined,
|
|
8134
|
+
onChange: changeHandler
|
|
8135
|
+
}, radio.content);
|
|
8136
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
8137
|
+
darkMode: darkMode,
|
|
8138
|
+
"data-testid": "radio-group-error-label"
|
|
8139
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8140
|
+
level: 6
|
|
8141
|
+
}, error)));
|
|
8142
|
+
};
|
|
8143
|
+
|
|
8144
|
+
var _templateObject$15, _templateObject2$O, _templateObject3$G;
|
|
8145
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__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);
|
|
8146
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__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"])));
|
|
8147
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__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);
|
|
7824
8148
|
|
|
7825
8149
|
var StatusBanner = function StatusBanner(_ref) {
|
|
7826
8150
|
var statusText = _ref.statusText,
|
|
@@ -7882,8 +8206,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
7882
8206
|
})))));
|
|
7883
8207
|
};
|
|
7884
8208
|
|
|
7885
|
-
var _templateObject$
|
|
7886
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8209
|
+
var _templateObject$16;
|
|
8210
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__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);
|
|
7887
8211
|
|
|
7888
8212
|
var SectionTitle = function SectionTitle(_ref) {
|
|
7889
8213
|
var title = _ref.title,
|
|
@@ -7909,8 +8233,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
7909
8233
|
}, description))));
|
|
7910
8234
|
};
|
|
7911
8235
|
|
|
7912
|
-
var _templateObject$
|
|
7913
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8236
|
+
var _templateObject$17, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$p, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
8237
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$17 || (_templateObject$17 = /*#__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) {
|
|
7914
8238
|
var theme = _ref.theme;
|
|
7915
8239
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
7916
8240
|
}, function (_ref2) {
|
|
@@ -7920,12 +8244,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$14 || (_templateObject
|
|
|
7920
8244
|
var theme = _ref3.theme;
|
|
7921
8245
|
return theme.colors.lightgrey;
|
|
7922
8246
|
});
|
|
7923
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
8247
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
7924
8248
|
var theme = _ref4.theme;
|
|
7925
8249
|
return theme.colors.darkgrey;
|
|
7926
8250
|
});
|
|
7927
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
7928
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
8251
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
8252
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
7929
8253
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
7930
8254
|
var theme = _ref5.theme;
|
|
7931
8255
|
return {
|
|
@@ -7933,8 +8257,8 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
7933
8257
|
color: theme.colors.black,
|
|
7934
8258
|
title: 'Select Arrow'
|
|
7935
8259
|
};
|
|
7936
|
-
})(_templateObject5$
|
|
7937
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8260
|
+
})(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
8261
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
7938
8262
|
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
7939
8263
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
7940
8264
|
var Option = /*#__PURE__*/styled__default.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
@@ -8331,8 +8655,8 @@ function Select(_ref3) {
|
|
|
8331
8655
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
8332
8656
|
}
|
|
8333
8657
|
|
|
8334
|
-
var _templateObject$
|
|
8335
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8658
|
+
var _templateObject$18;
|
|
8659
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__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) {
|
|
8336
8660
|
var theme = _ref.theme;
|
|
8337
8661
|
return theme.colors.primary;
|
|
8338
8662
|
});
|
|
@@ -8360,8 +8684,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
8360
8684
|
})));
|
|
8361
8685
|
};
|
|
8362
8686
|
|
|
8363
|
-
var _templateObject$
|
|
8364
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8687
|
+
var _templateObject$19, _templateObject2$Q;
|
|
8688
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__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) {
|
|
8365
8689
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8366
8690
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8367
8691
|
return aspectRatio;
|
|
@@ -8371,7 +8695,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templat
|
|
|
8371
8695
|
height = _ref2.height;
|
|
8372
8696
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
8373
8697
|
});
|
|
8374
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8698
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__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"])));
|
|
8375
8699
|
|
|
8376
8700
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
8377
8701
|
var caption = _ref.caption,
|
|
@@ -8409,13 +8733,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
8409
8733
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
8410
8734
|
};
|
|
8411
8735
|
|
|
8412
|
-
var _templateObject$
|
|
8413
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8414
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8736
|
+
var _templateObject$1a, _templateObject2$R, _templateObject3$I;
|
|
8737
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
8738
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
8415
8739
|
var displayAttribution = _ref.displayAttribution;
|
|
8416
8740
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
8417
8741
|
});
|
|
8418
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8742
|
+
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__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);
|
|
8419
8743
|
|
|
8420
8744
|
var Quote = function Quote(_ref) {
|
|
8421
8745
|
var text = _ref.text,
|
|
@@ -8439,13 +8763,13 @@ var Quote = function Quote(_ref) {
|
|
|
8439
8763
|
}, attribution))));
|
|
8440
8764
|
};
|
|
8441
8765
|
|
|
8442
|
-
var _templateObject$
|
|
8443
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8444
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8445
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
8446
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8447
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8448
|
-
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8766
|
+
var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$y, _templateObject5$q, _templateObject6$l;
|
|
8767
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__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"])));
|
|
8768
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
8769
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
8770
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
8771
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__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);
|
|
8772
|
+
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__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);
|
|
8449
8773
|
|
|
8450
8774
|
var MiniCard = function MiniCard(_ref) {
|
|
8451
8775
|
var _ref$title = _ref.title,
|
|
@@ -8483,11 +8807,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
8483
8807
|
}, title)))));
|
|
8484
8808
|
};
|
|
8485
8809
|
|
|
8486
|
-
var _templateObject$
|
|
8487
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8488
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8489
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8490
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8810
|
+
var _templateObject$1c, _templateObject2$T, _templateObject3$K, _templateObject4$z;
|
|
8811
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__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"])));
|
|
8812
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
8813
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8814
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__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"])));
|
|
8491
8815
|
|
|
8492
8816
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
8493
8817
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -8585,17 +8909,17 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8585
8909
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
8586
8910
|
};
|
|
8587
8911
|
|
|
8588
|
-
var _templateObject$
|
|
8589
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$
|
|
8590
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
8912
|
+
var _templateObject$1d, _templateObject2$U, _templateObject3$L, _templateObject4$A;
|
|
8913
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
8914
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
8591
8915
|
var mobileOpen = _ref.mobileOpen;
|
|
8592
8916
|
return mobileOpen ? "block" : 'none';
|
|
8593
8917
|
}, exports.Colors.White, exports.Colors.DarkGrey);
|
|
8594
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
8918
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), exports.Colors.Black, function (_ref2) {
|
|
8595
8919
|
var active = _ref2.active;
|
|
8596
8920
|
return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
8597
8921
|
}, exports.Colors.MidGrey, devices.mobile);
|
|
8598
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$
|
|
8922
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$A || (_templateObject4$A = /*#__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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey, devices.mobile);
|
|
8599
8923
|
|
|
8600
8924
|
/**
|
|
8601
8925
|
* Vertical menu component uses for navigation
|
|
@@ -8667,19 +8991,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
|
8667
8991
|
})));
|
|
8668
8992
|
};
|
|
8669
8993
|
|
|
8670
|
-
var _templateObject$
|
|
8671
|
-
var Container$
|
|
8672
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8673
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8994
|
+
var _templateObject$1e, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r, _templateObject6$m;
|
|
8995
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
8996
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
8997
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
8674
8998
|
var color = _ref.color;
|
|
8675
8999
|
return "var(--base-color-" + color + ")";
|
|
8676
9000
|
});
|
|
8677
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8678
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9001
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
9002
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
8679
9003
|
var color = _ref2.color;
|
|
8680
9004
|
return "var(--base-color-" + color + ")";
|
|
8681
9005
|
});
|
|
8682
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9006
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
8683
9007
|
var color = _ref3.color;
|
|
8684
9008
|
return "var(--base-color-" + color + ")";
|
|
8685
9009
|
});
|
|
@@ -8740,7 +9064,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
8740
9064
|
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
8741
9065
|
};
|
|
8742
9066
|
|
|
8743
|
-
return /*#__PURE__*/React__default.createElement(Container$
|
|
9067
|
+
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
8744
9068
|
"data-testid": "password-strength-container"
|
|
8745
9069
|
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
8746
9070
|
"data-testid": "password-strength-sections"
|
|
@@ -8853,9 +9177,9 @@ var LiveChat = function LiveChat() {
|
|
|
8853
9177
|
});
|
|
8854
9178
|
};
|
|
8855
9179
|
|
|
8856
|
-
var _templateObject$
|
|
8857
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8858
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
9180
|
+
var _templateObject$1f, _templateObject2$W;
|
|
9181
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
9182
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$W || (_templateObject2$W = /*#__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) {
|
|
8859
9183
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
8860
9184
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
8861
9185
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -8883,13 +9207,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
8883
9207
|
}, children)));
|
|
8884
9208
|
};
|
|
8885
9209
|
|
|
8886
|
-
var _templateObject$
|
|
8887
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8888
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
8889
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8890
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
9210
|
+
var _templateObject$1g, _templateObject2$X, _templateObject3$N, _templateObject4$C;
|
|
9211
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__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);
|
|
9212
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$X || (_templateObject2$X = /*#__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);
|
|
9213
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9214
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$C || (_templateObject4$C = /*#__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"])));
|
|
8891
9215
|
|
|
8892
|
-
var _excluded$
|
|
9216
|
+
var _excluded$m = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
8893
9217
|
var MAX_Z_INDEX = 9999999999;
|
|
8894
9218
|
|
|
8895
9219
|
if (Modal.defaultStyles.content) {
|
|
@@ -8966,7 +9290,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
8966
9290
|
setIsOpen = _ref.setIsOpen,
|
|
8967
9291
|
children = _ref.children,
|
|
8968
9292
|
appElementId = _ref.appElementId,
|
|
8969
|
-
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9293
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
|
|
8970
9294
|
|
|
8971
9295
|
var isMobile = useMobile();
|
|
8972
9296
|
var customStyles = {
|
|
@@ -9008,8 +9332,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
9008
9332
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
9009
9333
|
};
|
|
9010
9334
|
|
|
9011
|
-
var _templateObject$
|
|
9012
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
9335
|
+
var _templateObject$1h;
|
|
9336
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1h || (_templateObject$1h = /*#__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) {
|
|
9013
9337
|
var theme = _ref.theme;
|
|
9014
9338
|
return theme.colors.primary;
|
|
9015
9339
|
}, function (_ref2) {
|
|
@@ -9994,7 +10318,9 @@ exports.PromoWithTags = PromoWithTags;
|
|
|
9994
10318
|
exports.PromoWithTitle = PromoWithTitle;
|
|
9995
10319
|
exports.Quote = Quote;
|
|
9996
10320
|
exports.Radio = Radio;
|
|
10321
|
+
exports.Radio2 = Radio2;
|
|
9997
10322
|
exports.RadioGroup = RadioGroup;
|
|
10323
|
+
exports.RadioGroup2 = RadioGroup2;
|
|
9998
10324
|
exports.ReadMore = ReadMore;
|
|
9999
10325
|
exports.RotatorButtons = RotatorButtons;
|
|
10000
10326
|
exports.SearchBar = SearchBar;
|
|
@@ -10019,6 +10345,7 @@ exports.TextLink = TextLink;
|
|
|
10019
10345
|
exports.TextOnly = TextOnly;
|
|
10020
10346
|
exports.ThemeProvider = Theme;
|
|
10021
10347
|
exports.Tickbox = Tickbox;
|
|
10348
|
+
exports.Tickbox2 = Tickbox2;
|
|
10022
10349
|
exports.Timer = Timer;
|
|
10023
10350
|
exports.TitleWithCTA = TitleWithCTA;
|
|
10024
10351
|
exports.TypeTags = TypeTags;
|