@royaloperahouse/chord 2.2.7-a-chord-development → 2.2.7-b-chord-development
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chord.cjs.development.js +657 -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 +655 -343
- package/dist/chord.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
|
@@ -2817,13 +2817,123 @@ var Radio = function Radio(_ref) {
|
|
|
2817
2817
|
}, error)));
|
|
2818
2818
|
};
|
|
2819
2819
|
|
|
2820
|
-
var _templateObject$f, _templateObject2$5, _templateObject3$4;
|
|
2821
|
-
var
|
|
2822
|
-
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) {
|
|
2823
2933
|
var theme = _ref.theme;
|
|
2824
2934
|
return theme.colors.primary;
|
|
2825
2935
|
}, devices.mobile);
|
|
2826
|
-
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);
|
|
2827
2937
|
|
|
2828
2938
|
var RotatorButtons = function RotatorButtons(_ref) {
|
|
2829
2939
|
var onClickPrev = _ref.onClickPrev,
|
|
@@ -2889,8 +2999,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
2889
2999
|
}, renderNextIcon()));
|
|
2890
3000
|
};
|
|
2891
3001
|
|
|
2892
|
-
var _templateObject$
|
|
2893
|
-
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) {
|
|
2894
3004
|
var fillColor = _ref.fillColor;
|
|
2895
3005
|
return fillColor;
|
|
2896
3006
|
});
|
|
@@ -2914,9 +3024,9 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
2914
3024
|
})));
|
|
2915
3025
|
};
|
|
2916
3026
|
|
|
2917
|
-
var _templateObject$
|
|
2918
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
2919
|
-
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"])));
|
|
2920
3030
|
|
|
2921
3031
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
2922
3032
|
var _ref$fullWidth = _ref.fullWidth,
|
|
@@ -2934,8 +3044,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
2934
3044
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
2935
3045
|
};
|
|
2936
3046
|
|
|
2937
|
-
var _templateObject$
|
|
2938
|
-
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"])));
|
|
2939
3049
|
|
|
2940
3050
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
2941
3051
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3145,9 +3255,9 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3145
3255
|
})))));
|
|
3146
3256
|
};
|
|
3147
3257
|
|
|
3148
|
-
var _templateObject$
|
|
3149
|
-
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$
|
|
3150
|
-
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);
|
|
3151
3261
|
|
|
3152
3262
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
|
|
3153
3263
|
var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
|
|
@@ -3179,8 +3289,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3179
3289
|
}));
|
|
3180
3290
|
};
|
|
3181
3291
|
|
|
3182
|
-
var _templateObject$
|
|
3183
|
-
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) {
|
|
3184
3294
|
if (props.withIcon === 'left') {
|
|
3185
3295
|
return "margin-left: 5px;";
|
|
3186
3296
|
}
|
|
@@ -3193,7 +3303,7 @@ var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObje
|
|
|
3193
3303
|
|
|
3194
3304
|
return "";
|
|
3195
3305
|
});
|
|
3196
|
-
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) {
|
|
3197
3307
|
if (props.withIcon === 'left') {
|
|
3198
3308
|
return "\n flex-direction: row-reverse;\n svg {\n margin-right: 6px;\n }";
|
|
3199
3309
|
}
|
|
@@ -3279,8 +3389,8 @@ var Tab = function Tab(_ref) {
|
|
|
3279
3389
|
}));
|
|
3280
3390
|
};
|
|
3281
3391
|
|
|
3282
|
-
var _templateObject$
|
|
3283
|
-
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) {
|
|
3284
3394
|
var iconName = _ref.iconName;
|
|
3285
3395
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3286
3396
|
}, function (_ref2) {
|
|
@@ -3306,9 +3416,9 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
|
|
|
3306
3416
|
var hoverColor = _ref7.hoverColor;
|
|
3307
3417
|
return hoverColor;
|
|
3308
3418
|
});
|
|
3309
|
-
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"])));
|
|
3310
3420
|
|
|
3311
|
-
var _excluded$
|
|
3421
|
+
var _excluded$5 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
|
|
3312
3422
|
|
|
3313
3423
|
var TabLink = function TabLink(_ref) {
|
|
3314
3424
|
var children = _ref.children,
|
|
@@ -3318,7 +3428,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
3318
3428
|
color = _ref$color === void 0 ? exports.Colors.DarkGrey : _ref$color,
|
|
3319
3429
|
_ref$hoverColor = _ref.hoverColor,
|
|
3320
3430
|
hoverColor = _ref$hoverColor === void 0 ? exports.Colors.Primary : _ref$hoverColor,
|
|
3321
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3431
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
3322
3432
|
|
|
3323
3433
|
return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
|
|
3324
3434
|
color: color,
|
|
@@ -3333,19 +3443,19 @@ var TabLink = function TabLink(_ref) {
|
|
|
3333
3443
|
})) : null, children);
|
|
3334
3444
|
};
|
|
3335
3445
|
|
|
3336
|
-
var _templateObject$
|
|
3337
|
-
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) {
|
|
3338
3448
|
var width = _ref.width;
|
|
3339
3449
|
return width ? width + "px;" : '100%;';
|
|
3340
3450
|
}, function (_ref2) {
|
|
3341
3451
|
var height = _ref2.height;
|
|
3342
3452
|
return height + "px;";
|
|
3343
3453
|
});
|
|
3344
|
-
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) {
|
|
3345
3455
|
var darkMode = _ref3.darkMode;
|
|
3346
3456
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
3347
3457
|
});
|
|
3348
|
-
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) {
|
|
3349
3459
|
var error = _ref4.error;
|
|
3350
3460
|
return !!error ? 'var(--base-color-errorstate)' : 'var(--base-color-lightgrey)';
|
|
3351
3461
|
}, function (_ref5) {
|
|
@@ -3360,7 +3470,7 @@ var TextAreaBox = /*#__PURE__*/styled__default.textarea(_templateObject3$5 || (_
|
|
|
3360
3470
|
var darkMode = _ref7.darkMode;
|
|
3361
3471
|
return darkMode ? 'var(--base-color-lemonchiffon)' : 'var(--base-color-lapislazuli)';
|
|
3362
3472
|
});
|
|
3363
|
-
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) {
|
|
3364
3474
|
var darkMode = _ref8.darkMode;
|
|
3365
3475
|
return darkMode ? 'color: var(--base-color-white)' : '';
|
|
3366
3476
|
}, function (_ref9) {
|
|
@@ -3368,7 +3478,7 @@ var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_tem
|
|
|
3368
3478
|
return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
|
|
3369
3479
|
});
|
|
3370
3480
|
|
|
3371
|
-
var _excluded$
|
|
3481
|
+
var _excluded$6 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
|
|
3372
3482
|
/**
|
|
3373
3483
|
* An HTML textarea component for Chord.
|
|
3374
3484
|
*
|
|
@@ -3430,7 +3540,7 @@ var TextArea = function TextArea(_ref) {
|
|
|
3430
3540
|
maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
|
|
3431
3541
|
_ref$tabIndex = _ref.tabIndex,
|
|
3432
3542
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
3433
|
-
textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3543
|
+
textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
3434
3544
|
|
|
3435
3545
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
3436
3546
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -3458,14 +3568,14 @@ var TextArea = function TextArea(_ref) {
|
|
|
3458
3568
|
}, error))));
|
|
3459
3569
|
};
|
|
3460
3570
|
|
|
3461
|
-
var _templateObject$
|
|
3462
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3463
|
-
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) {
|
|
3464
3574
|
var width = _ref.width;
|
|
3465
3575
|
if (!width) return 'none';
|
|
3466
3576
|
return width + 'px';
|
|
3467
3577
|
});
|
|
3468
|
-
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) {
|
|
3469
3579
|
var isPasswordField = _ref2.isPasswordField;
|
|
3470
3580
|
if (isPasswordField) return "80px";
|
|
3471
3581
|
return "20px";
|
|
@@ -3478,19 +3588,19 @@ var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateO
|
|
|
3478
3588
|
if (darkMode) return "4px solid var(--base-color-lemonchiffon)";
|
|
3479
3589
|
return "3px solid var(--base-color-lapislazuli)";
|
|
3480
3590
|
});
|
|
3481
|
-
var ShowHideButton = /*#__PURE__*/styled__default.button(_templateObject4$
|
|
3482
|
-
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) {
|
|
3483
3593
|
var darkMode = _ref5.darkMode;
|
|
3484
3594
|
if (darkMode) return "var(--base-color-white)";
|
|
3485
3595
|
return "var(--base-color-black)";
|
|
3486
3596
|
});
|
|
3487
|
-
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) {
|
|
3488
3598
|
var darkMode = _ref6.darkMode;
|
|
3489
3599
|
if (darkMode) return "var(--base-color-white)";
|
|
3490
3600
|
return "var(--base-color-errorstate)";
|
|
3491
3601
|
});
|
|
3492
3602
|
|
|
3493
|
-
var _excluded$
|
|
3603
|
+
var _excluded$7 = ["label", "type", "error", "darkMode", "width"];
|
|
3494
3604
|
/**
|
|
3495
3605
|
* A text field component, that wraps around the native `<input />` element
|
|
3496
3606
|
* and adds some extra states and information around it (i.e. a text and an error labels,
|
|
@@ -3538,7 +3648,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3538
3648
|
_ref$darkMode = _ref.darkMode,
|
|
3539
3649
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3540
3650
|
width = _ref.width,
|
|
3541
|
-
inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3651
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
3542
3652
|
|
|
3543
3653
|
var _useState = React.useState(false),
|
|
3544
3654
|
showPassword = _useState[0],
|
|
@@ -3559,7 +3669,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3559
3669
|
});
|
|
3560
3670
|
};
|
|
3561
3671
|
|
|
3562
|
-
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, {
|
|
3563
3673
|
darkMode: darkMode,
|
|
3564
3674
|
"data-testid": "text-field-text-label"
|
|
3565
3675
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -3578,7 +3688,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3578
3688
|
onClick: showHideClickHandler
|
|
3579
3689
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
3580
3690
|
level: 1
|
|
3581
|
-
}, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel, {
|
|
3691
|
+
}, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
|
|
3582
3692
|
darkMode: darkMode,
|
|
3583
3693
|
"data-testid": "text-field-error-label"
|
|
3584
3694
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -3586,24 +3696,24 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3586
3696
|
}, error)));
|
|
3587
3697
|
});
|
|
3588
3698
|
|
|
3589
|
-
var _templateObject$
|
|
3590
|
-
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) {
|
|
3591
3701
|
var iconName = _ref.iconName;
|
|
3592
3702
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3593
3703
|
}, function (_ref2) {
|
|
3594
3704
|
var color = _ref2.color;
|
|
3595
3705
|
return color;
|
|
3596
3706
|
});
|
|
3597
|
-
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"])));
|
|
3598
3708
|
|
|
3599
|
-
var _excluded$
|
|
3709
|
+
var _excluded$8 = ["children", "iconName", "iconDirection", "color"];
|
|
3600
3710
|
|
|
3601
3711
|
var TextLink = function TextLink(_ref) {
|
|
3602
3712
|
var children = _ref.children,
|
|
3603
3713
|
iconName = _ref.iconName,
|
|
3604
3714
|
iconDirection = _ref.iconDirection,
|
|
3605
3715
|
color = _ref.color,
|
|
3606
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
3716
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
3607
3717
|
|
|
3608
3718
|
var truncatedString = children.substring(0, 30);
|
|
3609
3719
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
@@ -3618,20 +3728,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3618
3728
|
})) : null);
|
|
3619
3729
|
};
|
|
3620
3730
|
|
|
3621
|
-
var _templateObject$
|
|
3622
|
-
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) {
|
|
3623
3733
|
var fontSize = _ref.fontSize;
|
|
3624
3734
|
return fontSize + 'px';
|
|
3625
3735
|
}, function (_ref2) {
|
|
3626
3736
|
var color = _ref2.color;
|
|
3627
3737
|
return color;
|
|
3628
3738
|
});
|
|
3629
|
-
var LogoRightSide = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3630
|
-
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) {
|
|
3631
3741
|
var color = _ref3.color;
|
|
3632
3742
|
return color;
|
|
3633
3743
|
});
|
|
3634
|
-
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"])));
|
|
3635
3745
|
|
|
3636
3746
|
var TextLogoProduct;
|
|
3637
3747
|
|
|
@@ -3653,12 +3763,12 @@ var Logo = function Logo(_ref) {
|
|
|
3653
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));
|
|
3654
3764
|
};
|
|
3655
3765
|
|
|
3656
|
-
var _templateObject$
|
|
3657
|
-
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) {
|
|
3658
3768
|
var dark = _ref.dark;
|
|
3659
3769
|
return dark ? 'white' : 'errorstate';
|
|
3660
3770
|
});
|
|
3661
|
-
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) {
|
|
3662
3772
|
var dark = _ref2.dark,
|
|
3663
3773
|
disabled = _ref2.disabled;
|
|
3664
3774
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3667,7 +3777,7 @@ var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject2$e || (_te
|
|
|
3667
3777
|
var disabled = _ref3.disabled;
|
|
3668
3778
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3669
3779
|
}, devices.mobileAndTablet);
|
|
3670
|
-
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) {
|
|
3671
3781
|
var dark = _ref4.dark,
|
|
3672
3782
|
disabled = _ref4.disabled,
|
|
3673
3783
|
error = _ref4.error;
|
|
@@ -3683,7 +3793,7 @@ var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$8 || (
|
|
|
3683
3793
|
dark = _ref6.dark;
|
|
3684
3794
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3685
3795
|
}, devices.mobile);
|
|
3686
|
-
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) {
|
|
3687
3797
|
var dark = _ref7.dark,
|
|
3688
3798
|
whiteBox = _ref7.whiteBox,
|
|
3689
3799
|
disabled = _ref7.disabled;
|
|
@@ -3741,7 +3851,7 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3741
3851
|
};
|
|
3742
3852
|
|
|
3743
3853
|
var isDarkMode = mode === exports.TickboxMode.Dark;
|
|
3744
|
-
return /*#__PURE__*/React__default.createElement(TickboxLabel, {
|
|
3854
|
+
return /*#__PURE__*/React__default.createElement(TickboxLabel$1, {
|
|
3745
3855
|
tabIndex: 0,
|
|
3746
3856
|
onKeyPress: spaceButtonHandler,
|
|
3747
3857
|
dark: isDarkMode,
|
|
@@ -3771,19 +3881,131 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3771
3881
|
}, error)));
|
|
3772
3882
|
};
|
|
3773
3883
|
|
|
3774
|
-
var _templateObject$
|
|
3775
|
-
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) {
|
|
3776
3998
|
var color = _ref.color;
|
|
3777
3999
|
return color;
|
|
3778
4000
|
});
|
|
3779
|
-
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) {
|
|
3780
4002
|
var color = _ref2.color;
|
|
3781
4003
|
return color;
|
|
3782
4004
|
}, devices.mobileAndTablet);
|
|
3783
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3784
|
-
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3785
|
-
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
3786
|
-
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);
|
|
3787
4009
|
var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3788
4010
|
var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
3789
4011
|
|
|
@@ -3880,8 +4102,8 @@ var Timer = function Timer(_ref) {
|
|
|
3880
4102
|
}));
|
|
3881
4103
|
};
|
|
3882
4104
|
|
|
3883
|
-
var _templateObject$
|
|
3884
|
-
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"])));
|
|
3885
4107
|
|
|
3886
4108
|
var TypeTags = function TypeTags(_ref) {
|
|
3887
4109
|
var list = _ref.list;
|
|
@@ -3894,13 +4116,13 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
3894
4116
|
}));
|
|
3895
4117
|
};
|
|
3896
4118
|
|
|
3897
|
-
var _templateObject$
|
|
3898
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
3899
|
-
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3900
|
-
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject3$
|
|
3901
|
-
var VideoMute = /*#__PURE__*/styled__default.button(_templateObject4$
|
|
3902
|
-
var thumbStyes = /*#__PURE__*/styled.css(_templateObject5$
|
|
3903
|
-
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"])));
|
|
3904
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) {
|
|
3905
4127
|
var volumeHidden = _ref.volumeHidden;
|
|
3906
4128
|
return volumeHidden ? '40px' : '100px';
|
|
@@ -4006,13 +4228,13 @@ var VideoControls = function VideoControls(_ref) {
|
|
|
4006
4228
|
})));
|
|
4007
4229
|
};
|
|
4008
4230
|
|
|
4009
|
-
var _templateObject$
|
|
4010
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4011
|
-
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) {
|
|
4012
4234
|
var darkMode = _ref.darkMode;
|
|
4013
4235
|
return darkMode ? 'white' : 'errorstate';
|
|
4014
4236
|
});
|
|
4015
|
-
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) {
|
|
4016
4238
|
var darkMode = _ref2.darkMode,
|
|
4017
4239
|
disabled = _ref2.disabled,
|
|
4018
4240
|
error = _ref2.error;
|
|
@@ -4034,11 +4256,11 @@ var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templa
|
|
|
4034
4256
|
var disabled = _ref6.disabled;
|
|
4035
4257
|
return disabled ? 'midgrey' : 'black';
|
|
4036
4258
|
});
|
|
4037
|
-
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) {
|
|
4038
4260
|
var disabled = _ref7.disabled;
|
|
4039
4261
|
return disabled ? 'not-allowed' : 'text';
|
|
4040
4262
|
});
|
|
4041
|
-
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) {
|
|
4042
4264
|
var disabled = _ref8.disabled;
|
|
4043
4265
|
return disabled ? 'not-allowed' : 'pointer';
|
|
4044
4266
|
});
|
|
@@ -4234,22 +4456,22 @@ var Component = function Component(_ref) {
|
|
|
4234
4456
|
}, error)));
|
|
4235
4457
|
};
|
|
4236
4458
|
|
|
4237
|
-
var _templateObject$
|
|
4238
|
-
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) {
|
|
4239
4461
|
var isMenuOpen = _ref.isMenuOpen;
|
|
4240
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 ";
|
|
4241
4463
|
});
|
|
4242
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4243
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
4244
|
-
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) {
|
|
4245
4467
|
var visible = _ref2.visible;
|
|
4246
4468
|
return visible ? 'visible' : 'hidden';
|
|
4247
4469
|
}, zIndexes.search, devices.mobile);
|
|
4248
|
-
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) {
|
|
4249
4471
|
var visible = _ref3.visible;
|
|
4250
4472
|
return visible ? 'visible' : 'hidden';
|
|
4251
4473
|
}, zIndexes.search, devices.mobile);
|
|
4252
|
-
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) {
|
|
4253
4475
|
var theme = _ref4.theme;
|
|
4254
4476
|
return theme.spacing[12];
|
|
4255
4477
|
});
|
|
@@ -4259,8 +4481,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templa
|
|
|
4259
4481
|
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
4260
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);
|
|
4261
4483
|
|
|
4262
|
-
var _templateObject$
|
|
4263
|
-
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"])));
|
|
4264
4486
|
|
|
4265
4487
|
var Logo$1 = function Logo(_ref) {
|
|
4266
4488
|
var _ref$id = _ref.id,
|
|
@@ -4289,11 +4511,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
4289
4511
|
}))));
|
|
4290
4512
|
};
|
|
4291
4513
|
|
|
4292
|
-
var _templateObject$
|
|
4293
|
-
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);
|
|
4294
4516
|
|
|
4295
|
-
var _templateObject$
|
|
4296
|
-
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) {
|
|
4297
4519
|
var selected = _ref.selected,
|
|
4298
4520
|
colorPrimary = _ref.colorPrimary;
|
|
4299
4521
|
|
|
@@ -4321,9 +4543,9 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
4321
4543
|
|
|
4322
4544
|
return '';
|
|
4323
4545
|
});
|
|
4324
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4325
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4326
|
-
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"])));
|
|
4327
4549
|
|
|
4328
4550
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
4329
4551
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -4481,8 +4703,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
4481
4703
|
}, expiryTime ? basketText : text) : ''));
|
|
4482
4704
|
};
|
|
4483
4705
|
|
|
4484
|
-
var _templateObject$
|
|
4485
|
-
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) {
|
|
4486
4708
|
var selected = _ref.selected,
|
|
4487
4709
|
colorPrimary = _ref.colorPrimary;
|
|
4488
4710
|
|
|
@@ -4498,7 +4720,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_te
|
|
|
4498
4720
|
var colorPrimary = _ref3.colorPrimary;
|
|
4499
4721
|
return colorPrimary;
|
|
4500
4722
|
});
|
|
4501
|
-
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"])));
|
|
4502
4724
|
|
|
4503
4725
|
var Search$1 = function Search(_ref) {
|
|
4504
4726
|
var _ref$selected = _ref.selected,
|
|
@@ -4774,23 +4996,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
4774
4996
|
}));
|
|
4775
4997
|
};
|
|
4776
4998
|
|
|
4777
|
-
var _templateObject$
|
|
4778
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4779
|
-
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) {
|
|
4780
5002
|
if (props.showMenu) {
|
|
4781
5003
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
4782
5004
|
}
|
|
4783
5005
|
|
|
4784
5006
|
return "display: none;";
|
|
4785
5007
|
});
|
|
4786
|
-
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) {
|
|
4787
5009
|
var colorPrimary = _ref.colorPrimary;
|
|
4788
5010
|
return colorPrimary;
|
|
4789
5011
|
}, function (_ref2) {
|
|
4790
5012
|
var colorPrimary = _ref2.colorPrimary;
|
|
4791
5013
|
return colorPrimary;
|
|
4792
5014
|
}, devices.mobileAndTablet);
|
|
4793
|
-
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);
|
|
4794
5016
|
|
|
4795
5017
|
var Tabs = function Tabs(_ref) {
|
|
4796
5018
|
var _ref$items = _ref.items,
|
|
@@ -4917,12 +5139,12 @@ var Tabs = function Tabs(_ref) {
|
|
|
4917
5139
|
}, "MENU"))));
|
|
4918
5140
|
};
|
|
4919
5141
|
|
|
4920
|
-
var _templateObject$
|
|
4921
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4922
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4923
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4924
|
-
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4925
|
-
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);
|
|
4926
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);
|
|
4927
5149
|
|
|
4928
5150
|
var SearchBar = function SearchBar(_ref) {
|
|
@@ -5155,18 +5377,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
5155
5377
|
})))));
|
|
5156
5378
|
};
|
|
5157
5379
|
|
|
5158
|
-
var _templateObject$
|
|
5159
|
-
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$
|
|
5160
|
-
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5161
|
-
var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5162
|
-
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5163
|
-
var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5164
|
-
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);
|
|
5165
5387
|
|
|
5166
|
-
var _templateObject$
|
|
5167
|
-
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
5168
|
-
var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$
|
|
5169
|
-
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"])));
|
|
5170
5392
|
|
|
5171
5393
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
5172
5394
|
var _ref$items = _ref.items,
|
|
@@ -5182,13 +5404,13 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
5182
5404
|
}));
|
|
5183
5405
|
};
|
|
5184
5406
|
|
|
5185
|
-
var _templateObject$
|
|
5186
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5187
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5188
|
-
var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5189
|
-
var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$
|
|
5190
|
-
var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5191
|
-
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);
|
|
5192
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"])));
|
|
5193
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"])));
|
|
5194
5416
|
|
|
@@ -5215,7 +5437,7 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
|
5215
5437
|
}, contact.title))));
|
|
5216
5438
|
};
|
|
5217
5439
|
|
|
5218
|
-
var _excluded$
|
|
5440
|
+
var _excluded$a = ["dataRoh"];
|
|
5219
5441
|
|
|
5220
5442
|
var Footer = function Footer(_ref) {
|
|
5221
5443
|
var data = _ref.data;
|
|
@@ -5226,7 +5448,7 @@ var Footer = function Footer(_ref) {
|
|
|
5226
5448
|
|
|
5227
5449
|
var _data$artsLogo = data.artsLogo,
|
|
5228
5450
|
artsDataRoh = _data$artsLogo.dataRoh,
|
|
5229
|
-
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$
|
|
5451
|
+
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$a);
|
|
5230
5452
|
|
|
5231
5453
|
var additionalInfo = data.additionalInfo;
|
|
5232
5454
|
return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -5256,15 +5478,15 @@ var Footer = function Footer(_ref) {
|
|
|
5256
5478
|
}, additionalInfo)))));
|
|
5257
5479
|
};
|
|
5258
5480
|
|
|
5259
|
-
var _templateObject$
|
|
5481
|
+
var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$9;
|
|
5260
5482
|
var LIST_ITEM_GAP = 32;
|
|
5261
|
-
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) {
|
|
5262
5484
|
var bottomBorder = _ref.bottomBorder;
|
|
5263
5485
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
5264
5486
|
}, zIndexes.anchor);
|
|
5265
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
5266
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5267
|
-
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) {
|
|
5268
5490
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
5269
5491
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
5270
5492
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -5275,13 +5497,13 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$e || (_templateO
|
|
|
5275
5497
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
5276
5498
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
5277
5499
|
});
|
|
5278
|
-
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) {
|
|
5279
5501
|
var fullWidth = _ref5.fullWidth;
|
|
5280
5502
|
return fullWidth ? '74px' : '46px';
|
|
5281
5503
|
});
|
|
5282
|
-
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"])));
|
|
5283
5505
|
|
|
5284
|
-
var _excluded$
|
|
5506
|
+
var _excluded$b = ["id", "text"];
|
|
5285
5507
|
|
|
5286
5508
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
5287
5509
|
var tabs = _ref.tabs,
|
|
@@ -5497,7 +5719,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
5497
5719
|
}, tabs.map(function (_ref4) {
|
|
5498
5720
|
var id = _ref4.id,
|
|
5499
5721
|
text = _ref4.text,
|
|
5500
|
-
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$
|
|
5722
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded$b);
|
|
5501
5723
|
|
|
5502
5724
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
5503
5725
|
key: id
|
|
@@ -5524,18 +5746,18 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
5524
5746
|
})) : null) : null))));
|
|
5525
5747
|
};
|
|
5526
5748
|
|
|
5527
|
-
var _templateObject$
|
|
5528
|
-
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) {
|
|
5529
5751
|
var sticky = _ref.sticky;
|
|
5530
5752
|
return sticky ? 'sticky' : 'initial';
|
|
5531
5753
|
}, zIndexes.anchor);
|
|
5532
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
5533
|
-
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) {
|
|
5534
5756
|
var title = _ref2.title;
|
|
5535
5757
|
return title ? 'row' : 'row-reverse';
|
|
5536
5758
|
}, devices.tablet, devices.mobile);
|
|
5537
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5538
|
-
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);
|
|
5539
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);
|
|
5540
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) {
|
|
5541
5763
|
var theme = _ref3.theme;
|
|
@@ -5553,7 +5775,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
5553
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);
|
|
5554
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);
|
|
5555
5777
|
|
|
5556
|
-
var _excluded$
|
|
5778
|
+
var _excluded$c = ["text"],
|
|
5557
5779
|
_excluded2 = ["text"];
|
|
5558
5780
|
|
|
5559
5781
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
@@ -5565,7 +5787,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
5565
5787
|
|
|
5566
5788
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
5567
5789
|
primaryButtonText = _ref2.text,
|
|
5568
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
5790
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
|
|
5569
5791
|
|
|
5570
5792
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
5571
5793
|
secondaryButtonText = _ref3.text,
|
|
@@ -5588,16 +5810,16 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
5588
5810
|
}, message)));
|
|
5589
5811
|
};
|
|
5590
5812
|
|
|
5591
|
-
var _templateObject$
|
|
5592
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5593
|
-
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5594
|
-
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) {
|
|
5595
5817
|
var theme = _ref.theme;
|
|
5596
5818
|
return theme.colors.primary;
|
|
5597
5819
|
}, exports.Colors.White);
|
|
5598
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5599
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5600
|
-
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"])));
|
|
5601
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"])));
|
|
5602
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"])));
|
|
5603
5825
|
|
|
@@ -5669,8 +5891,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
5669
5891
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
5670
5892
|
};
|
|
5671
5893
|
|
|
5672
|
-
var _templateObject$
|
|
5673
|
-
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);
|
|
5674
5896
|
|
|
5675
5897
|
var UpsellCards = function UpsellCards(_ref) {
|
|
5676
5898
|
var upsellCards = _ref.upsellCards;
|
|
@@ -5688,20 +5910,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
5688
5910
|
}));
|
|
5689
5911
|
};
|
|
5690
5912
|
|
|
5691
|
-
var _templateObject$
|
|
5692
|
-
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) {
|
|
5693
5915
|
var theme = _ref.theme;
|
|
5694
5916
|
return theme.colors.primary;
|
|
5695
5917
|
}, devices.mobile, devices.tablet);
|
|
5696
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5697
|
-
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);
|
|
5698
5920
|
|
|
5699
|
-
var _templateObject$
|
|
5700
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5701
|
-
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5702
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5703
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5704
|
-
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);
|
|
5705
5927
|
|
|
5706
5928
|
var Accordion = function Accordion(_ref) {
|
|
5707
5929
|
var _ref$title = _ref.title,
|
|
@@ -5826,8 +6048,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
5826
6048
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
5827
6049
|
};
|
|
5828
6050
|
|
|
5829
|
-
var _templateObject$
|
|
5830
|
-
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"])));
|
|
5831
6053
|
|
|
5832
6054
|
var Accordions = function Accordions(_ref) {
|
|
5833
6055
|
var _ref$items = _ref.items,
|
|
@@ -5860,13 +6082,13 @@ var Theme = function Theme(_ref) {
|
|
|
5860
6082
|
}, children);
|
|
5861
6083
|
};
|
|
5862
6084
|
|
|
5863
|
-
var _templateObject$
|
|
5864
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6085
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q;
|
|
6086
|
+
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) {
|
|
5865
6087
|
var theme = _ref.theme;
|
|
5866
6088
|
return theme.colors.primary;
|
|
5867
6089
|
}, devices.mobile);
|
|
5868
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5869
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6090
|
+
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);
|
|
6091
|
+
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"])));
|
|
5870
6092
|
|
|
5871
6093
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
5872
6094
|
var title = _ref.title,
|
|
@@ -5903,33 +6125,33 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
5903
6125
|
}))))));
|
|
5904
6126
|
};
|
|
5905
6127
|
|
|
5906
|
-
var _templateObject$
|
|
6128
|
+
var _templateObject$P, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13;
|
|
5907
6129
|
var LENGTH_LARGE_TEXT = 28;
|
|
5908
6130
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
5909
6131
|
var LENGTH_TEXT_TABLET = 10;
|
|
5910
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6132
|
+
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) {
|
|
5911
6133
|
var isCardClickable = _ref.isCardClickable;
|
|
5912
6134
|
return isCardClickable ? 'pointer' : 'default';
|
|
5913
6135
|
}, function (_ref2) {
|
|
5914
6136
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
5915
6137
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
5916
6138
|
});
|
|
5917
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6139
|
+
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) {
|
|
5918
6140
|
var lineColor = _ref3.lineColor,
|
|
5919
6141
|
theme = _ref3.theme;
|
|
5920
6142
|
if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
|
|
5921
6143
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
5922
6144
|
}, zIndexes.contentOverlay);
|
|
5923
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5924
|
-
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6145
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
6146
|
+
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) {
|
|
5925
6147
|
var fullWidth = _ref4.fullWidth;
|
|
5926
6148
|
return fullWidth ? '0' : '20px';
|
|
5927
6149
|
}, function (_ref5) {
|
|
5928
6150
|
var fullWidth = _ref5.fullWidth;
|
|
5929
6151
|
return fullWidth ? '0' : '20px';
|
|
5930
6152
|
});
|
|
5931
|
-
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5932
|
-
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6153
|
+
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);
|
|
6154
|
+
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);
|
|
5933
6155
|
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"])));
|
|
5934
6156
|
var HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer$1)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
5935
6157
|
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$2 || (_templateObject9$2 = /*#__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"])));
|
|
@@ -6052,7 +6274,7 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
|
|
|
6052
6274
|
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
6053
6275
|
};
|
|
6054
6276
|
|
|
6055
|
-
var _excluded$
|
|
6277
|
+
var _excluded$d = ["text"],
|
|
6056
6278
|
_excluded2$1 = ["text"];
|
|
6057
6279
|
|
|
6058
6280
|
var _buttonTypeToButton;
|
|
@@ -6107,7 +6329,7 @@ var Card = function Card(_ref) {
|
|
|
6107
6329
|
var _ref2 = firstButton || {},
|
|
6108
6330
|
_ref2$text = _ref2.text,
|
|
6109
6331
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
6110
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6332
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
6111
6333
|
|
|
6112
6334
|
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
|
|
6113
6335
|
var secondButton = links == null ? void 0 : links[1];
|
|
@@ -6197,9 +6419,9 @@ var Card = function Card(_ref) {
|
|
|
6197
6419
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
6198
6420
|
};
|
|
6199
6421
|
|
|
6200
|
-
var _templateObject$
|
|
6201
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6202
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
6422
|
+
var _templateObject$Q, _templateObject2$z;
|
|
6423
|
+
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);
|
|
6424
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6203
6425
|
|
|
6204
6426
|
var Cards = function Cards(_ref) {
|
|
6205
6427
|
var cards = _ref.cards,
|
|
@@ -6243,18 +6465,18 @@ var Cards = function Cards(_ref) {
|
|
|
6243
6465
|
}));
|
|
6244
6466
|
};
|
|
6245
6467
|
|
|
6246
|
-
var _templateObject$
|
|
6247
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6248
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6468
|
+
var _templateObject$R, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$f;
|
|
6469
|
+
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);
|
|
6470
|
+
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) {
|
|
6249
6471
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
6250
6472
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
6251
6473
|
}, function (_ref2) {
|
|
6252
6474
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
6253
6475
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
6254
6476
|
}, devices.mobileAndTablet);
|
|
6255
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6256
|
-
var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6257
|
-
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6477
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6478
|
+
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);
|
|
6479
|
+
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);
|
|
6258
6480
|
|
|
6259
6481
|
var divideAddressString = function divideAddressString(address) {
|
|
6260
6482
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -6312,17 +6534,17 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
6312
6534
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
6313
6535
|
};
|
|
6314
6536
|
|
|
6315
|
-
var _templateObject$
|
|
6316
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
6317
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
6537
|
+
var _templateObject$S, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g, _templateObject6$d, _templateObject7$8;
|
|
6538
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6539
|
+
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) {
|
|
6318
6540
|
return props.clickable ? 'pointer' : 'default';
|
|
6319
6541
|
}, devices.mobile);
|
|
6320
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6321
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6542
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
6543
|
+
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) {
|
|
6322
6544
|
return props.showImage ? 2 : '1 / span 4';
|
|
6323
6545
|
}, devices.mobile);
|
|
6324
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6325
|
-
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6546
|
+
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);
|
|
6547
|
+
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
6326
6548
|
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) {
|
|
6327
6549
|
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 ";
|
|
6328
6550
|
});
|
|
@@ -6395,21 +6617,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
6395
6617
|
}), link.text)));
|
|
6396
6618
|
};
|
|
6397
6619
|
|
|
6398
|
-
var _templateObject$
|
|
6399
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6620
|
+
var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h;
|
|
6621
|
+
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) {
|
|
6400
6622
|
var imageToLeft = _ref.imageToLeft;
|
|
6401
6623
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
6402
6624
|
}, devices.mobile);
|
|
6403
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6625
|
+
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) {
|
|
6404
6626
|
var imageToLeft = _ref2.imageToLeft;
|
|
6405
6627
|
return imageToLeft ? 'left' : 'right';
|
|
6406
6628
|
}, devices.mobile);
|
|
6407
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6629
|
+
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) {
|
|
6408
6630
|
var imageToLeft = _ref3.imageToLeft;
|
|
6409
6631
|
return imageToLeft ? 'right' : 'left';
|
|
6410
6632
|
}, devices.mobile);
|
|
6411
|
-
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$
|
|
6412
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6633
|
+
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"])));
|
|
6634
|
+
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"])));
|
|
6413
6635
|
|
|
6414
6636
|
var Editorial = function Editorial(_ref) {
|
|
6415
6637
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -6473,10 +6695,10 @@ var BackgroundColour;
|
|
|
6473
6695
|
BackgroundColour["White"] = "white";
|
|
6474
6696
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
6475
6697
|
|
|
6476
|
-
var _templateObject$
|
|
6477
|
-
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
6478
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
6479
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
6698
|
+
var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o;
|
|
6699
|
+
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"])));
|
|
6700
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6701
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
6480
6702
|
if (!props.infoThemed) {
|
|
6481
6703
|
return;
|
|
6482
6704
|
} else {
|
|
@@ -6487,7 +6709,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$t || (
|
|
|
6487
6709
|
}
|
|
6488
6710
|
}
|
|
6489
6711
|
});
|
|
6490
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
6712
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
6491
6713
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
6492
6714
|
}, function (props) {
|
|
6493
6715
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -6600,29 +6822,29 @@ var Information = function Information(_ref) {
|
|
|
6600
6822
|
}))));
|
|
6601
6823
|
};
|
|
6602
6824
|
|
|
6603
|
-
var _templateObject$
|
|
6604
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6825
|
+
var _templateObject$V, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$i, _templateObject6$e, _templateObject7$9, _templateObject8$6;
|
|
6826
|
+
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) {
|
|
6605
6827
|
var theme = _ref.theme;
|
|
6606
6828
|
return theme.colors.primary;
|
|
6607
6829
|
}, function (_ref2) {
|
|
6608
6830
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
6609
6831
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
6610
6832
|
}, devices.mobile);
|
|
6611
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
6612
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6833
|
+
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);
|
|
6834
|
+
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) {
|
|
6613
6835
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
6614
6836
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
6615
6837
|
}, devices.mobile);
|
|
6616
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6838
|
+
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) {
|
|
6617
6839
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
6618
6840
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
6619
6841
|
}, devices.mobile);
|
|
6620
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6621
|
-
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6842
|
+
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"])));
|
|
6843
|
+
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);
|
|
6622
6844
|
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);
|
|
6623
6845
|
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"])));
|
|
6624
6846
|
|
|
6625
|
-
var _excluded$
|
|
6847
|
+
var _excluded$e = ["text"];
|
|
6626
6848
|
|
|
6627
6849
|
var PageHeading = function PageHeading(_ref) {
|
|
6628
6850
|
var title = _ref.title,
|
|
@@ -6634,7 +6856,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
6634
6856
|
|
|
6635
6857
|
var _ref2 = link || {},
|
|
6636
6858
|
linkText = _ref2.text,
|
|
6637
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6859
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
|
|
6638
6860
|
|
|
6639
6861
|
var truncatedText = text == null ? void 0 : text.substring(0, 250);
|
|
6640
6862
|
var truncatedTitle = title && title.substring(0, 40);
|
|
@@ -6662,11 +6884,11 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
6662
6884
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
|
|
6663
6885
|
};
|
|
6664
6886
|
|
|
6665
|
-
var _excluded$
|
|
6887
|
+
var _excluded$f = ["link"];
|
|
6666
6888
|
|
|
6667
6889
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
6668
6890
|
var link = _ref.link,
|
|
6669
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6891
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
6670
6892
|
|
|
6671
6893
|
var coreLink = link && _extends({}, link, {
|
|
6672
6894
|
color: exports.Colors.White,
|
|
@@ -6680,11 +6902,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
6680
6902
|
})));
|
|
6681
6903
|
};
|
|
6682
6904
|
|
|
6683
|
-
var _excluded$
|
|
6905
|
+
var _excluded$g = ["link"];
|
|
6684
6906
|
|
|
6685
6907
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
6686
6908
|
var link = _ref.link,
|
|
6687
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
6909
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
6688
6910
|
|
|
6689
6911
|
var cinemaLink = link && _extends({}, link, {
|
|
6690
6912
|
color: exports.Colors.Black,
|
|
@@ -6698,17 +6920,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
6698
6920
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
6699
6921
|
};
|
|
6700
6922
|
|
|
6701
|
-
var _templateObject$
|
|
6702
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6703
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6704
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
6705
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6706
|
-
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6707
|
-
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
6923
|
+
var _templateObject$W, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$f, _templateObject7$a, _templateObject8$7;
|
|
6924
|
+
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);
|
|
6925
|
+
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);
|
|
6926
|
+
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);
|
|
6927
|
+
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);
|
|
6928
|
+
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
6929
|
+
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);
|
|
6708
6930
|
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);
|
|
6709
6931
|
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);
|
|
6710
6932
|
|
|
6711
|
-
var _excluded$
|
|
6933
|
+
var _excluded$h = ["text"];
|
|
6712
6934
|
|
|
6713
6935
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
6714
6936
|
var children = _ref.children,
|
|
@@ -6726,7 +6948,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
6726
6948
|
|
|
6727
6949
|
var _ref2 = link || {},
|
|
6728
6950
|
linkText = _ref2.text,
|
|
6729
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
6951
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$h);
|
|
6730
6952
|
|
|
6731
6953
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
6732
6954
|
bgUrlDesktop: bgUrlDesktop,
|
|
@@ -6771,21 +6993,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
6771
6993
|
}, "Scroll Down")) : null);
|
|
6772
6994
|
};
|
|
6773
6995
|
|
|
6774
|
-
var _templateObject$
|
|
6775
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6996
|
+
var _templateObject$X, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k;
|
|
6997
|
+
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) {
|
|
6776
6998
|
var color = _ref.color;
|
|
6777
6999
|
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 ";
|
|
6778
7000
|
}, devices.mobileAndTablet);
|
|
6779
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7001
|
+
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) {
|
|
6780
7002
|
var hasImage = _ref2.hasImage;
|
|
6781
7003
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
6782
7004
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
6783
7005
|
var hasImage = _ref3.hasImage;
|
|
6784
7006
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
6785
7007
|
});
|
|
6786
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6787
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6788
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7008
|
+
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);
|
|
7009
|
+
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);
|
|
7010
|
+
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);
|
|
6789
7011
|
|
|
6790
7012
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
6791
7013
|
var _image$src, _image$alt;
|
|
@@ -6816,14 +7038,14 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
6816
7038
|
}))));
|
|
6817
7039
|
};
|
|
6818
7040
|
|
|
6819
|
-
var _templateObject$
|
|
6820
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7041
|
+
var _templateObject$Y;
|
|
7042
|
+
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"])));
|
|
6821
7043
|
|
|
6822
|
-
var _excluded$
|
|
7044
|
+
var _excluded$i = ["link"];
|
|
6823
7045
|
|
|
6824
7046
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
6825
7047
|
var link = _ref.link,
|
|
6826
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7048
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
|
|
6827
7049
|
|
|
6828
7050
|
var streamLink = link && _extends({}, link, {
|
|
6829
7051
|
color: exports.Colors.Black,
|
|
@@ -6837,12 +7059,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
6837
7059
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
6838
7060
|
};
|
|
6839
7061
|
|
|
6840
|
-
var _templateObject$
|
|
6841
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6842
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$
|
|
6843
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6844
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6845
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$
|
|
7062
|
+
var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject5$l, _templateObject6$g, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
|
|
7063
|
+
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);
|
|
7064
|
+
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"])));
|
|
7065
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7066
|
+
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);
|
|
7067
|
+
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) {
|
|
6846
7068
|
var invert = _ref.invert,
|
|
6847
7069
|
theme = _ref.theme;
|
|
6848
7070
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -7017,7 +7239,7 @@ var useMobile = function useMobile() {
|
|
|
7017
7239
|
return mobile;
|
|
7018
7240
|
};
|
|
7019
7241
|
|
|
7020
|
-
var _excluded$
|
|
7242
|
+
var _excluded$j = ["text"];
|
|
7021
7243
|
|
|
7022
7244
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
7023
7245
|
var mobileVideo = video.mobile || video.desktop;
|
|
@@ -7133,7 +7355,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7133
7355
|
|
|
7134
7356
|
var _ref5 = link || {},
|
|
7135
7357
|
linkText = _ref5.text,
|
|
7136
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
7358
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
|
|
7137
7359
|
|
|
7138
7360
|
var titleSize = title && title.length > 20 ? 4 : 3;
|
|
7139
7361
|
var video = {
|
|
@@ -7172,15 +7394,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7172
7394
|
}), linkText))));
|
|
7173
7395
|
};
|
|
7174
7396
|
|
|
7175
|
-
var _templateObject$
|
|
7176
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$
|
|
7177
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$
|
|
7397
|
+
var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
|
|
7398
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
7399
|
+
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
|
|
7178
7400
|
|
|
7179
|
-
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
7401
|
+
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) {
|
|
7180
7402
|
var active = _ref.active;
|
|
7181
7403
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
7182
7404
|
});
|
|
7183
|
-
var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$
|
|
7405
|
+
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"])));
|
|
7184
7406
|
|
|
7185
7407
|
var reducePages = function reducePages(pages, currentPage) {
|
|
7186
7408
|
// If there are less than 6 pages, return all pages
|
|
@@ -7249,13 +7471,13 @@ var Pagination = function Pagination(_ref) {
|
|
|
7249
7471
|
}))));
|
|
7250
7472
|
};
|
|
7251
7473
|
|
|
7252
|
-
var _templateObject
|
|
7253
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject
|
|
7254
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7255
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7256
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7257
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7258
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
7474
|
+
var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$m, _templateObject6$h;
|
|
7475
|
+
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);
|
|
7476
|
+
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"])));
|
|
7477
|
+
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"])));
|
|
7478
|
+
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"])));
|
|
7479
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
7480
|
+
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"])));
|
|
7259
7481
|
|
|
7260
7482
|
var Person = function Person(_ref) {
|
|
7261
7483
|
var person = _ref.person,
|
|
@@ -7306,11 +7528,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
7306
7528
|
}));
|
|
7307
7529
|
};
|
|
7308
7530
|
|
|
7309
|
-
var _templateObject$
|
|
7310
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7311
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
7312
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7313
|
-
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7531
|
+
var _templateObject$10, _templateObject2$K, _templateObject3$C, _templateObject4$u;
|
|
7532
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
7533
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
7534
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
|
|
7535
|
+
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"])));
|
|
7314
7536
|
|
|
7315
7537
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
7316
7538
|
return array.reduce(function (acc, item) {
|
|
@@ -7384,14 +7606,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
7384
7606
|
}));
|
|
7385
7607
|
};
|
|
7386
7608
|
|
|
7387
|
-
var _templateObject
|
|
7609
|
+
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$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
7388
7610
|
var LENGTH_TEXT = 28;
|
|
7389
7611
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
7390
7612
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
7391
7613
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
7392
7614
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
7393
7615
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
7394
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject
|
|
7616
|
+
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) {
|
|
7395
7617
|
var imageToLeft = _ref.imageToLeft;
|
|
7396
7618
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
7397
7619
|
}, devices.tablet, function (_ref2) {
|
|
@@ -7401,8 +7623,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$$ ||
|
|
|
7401
7623
|
var asCard = _ref3.asCard;
|
|
7402
7624
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
7403
7625
|
});
|
|
7404
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
7405
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7626
|
+
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"])));
|
|
7627
|
+
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) {
|
|
7406
7628
|
var theme = _ref4.theme;
|
|
7407
7629
|
return theme.colors.black;
|
|
7408
7630
|
}, function (_ref5) {
|
|
@@ -7412,7 +7634,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$B || (
|
|
|
7412
7634
|
var theme = _ref6.theme;
|
|
7413
7635
|
return theme.colors.primary;
|
|
7414
7636
|
});
|
|
7415
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7637
|
+
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) {
|
|
7416
7638
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
7417
7639
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
7418
7640
|
}, function (_ref8) {
|
|
@@ -7440,11 +7662,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$t ||
|
|
|
7440
7662
|
|
|
7441
7663
|
return '';
|
|
7442
7664
|
});
|
|
7443
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7665
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
7444
7666
|
var marginBottom = _ref10.marginBottom;
|
|
7445
7667
|
return marginBottom + "px";
|
|
7446
7668
|
});
|
|
7447
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$
|
|
7669
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
7448
7670
|
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"])));
|
|
7449
7671
|
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"])));
|
|
7450
7672
|
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);
|
|
@@ -7473,7 +7695,7 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19
|
|
|
7473
7695
|
var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
7474
7696
|
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);
|
|
7475
7697
|
|
|
7476
|
-
var _excluded$
|
|
7698
|
+
var _excluded$k = ["text"],
|
|
7477
7699
|
_excluded2$2 = ["text"],
|
|
7478
7700
|
_excluded3 = ["text"];
|
|
7479
7701
|
|
|
@@ -7547,7 +7769,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7547
7769
|
var _ref2 = firstButton || {},
|
|
7548
7770
|
_ref2$text = _ref2.text,
|
|
7549
7771
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7550
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7772
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
7551
7773
|
|
|
7552
7774
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
7553
7775
|
var secondButton = links == null ? void 0 : links[1];
|
|
@@ -7666,27 +7888,27 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7666
7888
|
}))));
|
|
7667
7889
|
};
|
|
7668
7890
|
|
|
7669
|
-
var _templateObject$
|
|
7891
|
+
var _templateObject$12, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$j, _templateObject7$d;
|
|
7670
7892
|
var LENGTH_TEXT$2 = 28;
|
|
7671
7893
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
7672
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7894
|
+
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) {
|
|
7673
7895
|
var imageToLeft = _ref.imageToLeft;
|
|
7674
7896
|
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'";
|
|
7675
7897
|
}, devices.tablet, function (_ref2) {
|
|
7676
7898
|
var imageToLeft = _ref2.imageToLeft;
|
|
7677
7899
|
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'";
|
|
7678
7900
|
}, devices.mobile);
|
|
7679
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7901
|
+
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) {
|
|
7680
7902
|
var imageToLeft = _ref3.imageToLeft;
|
|
7681
7903
|
return imageToLeft ? 'left' : 'right';
|
|
7682
7904
|
}, devices.mobile);
|
|
7683
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7905
|
+
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) {
|
|
7684
7906
|
var imageToLeft = _ref4.imageToLeft;
|
|
7685
7907
|
return imageToLeft ? 'right' : 'left';
|
|
7686
7908
|
}, devices.mobile);
|
|
7687
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7688
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
7689
|
-
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
7909
|
+
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);
|
|
7910
|
+
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"])));
|
|
7911
|
+
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) {
|
|
7690
7912
|
var theme = _ref5.theme;
|
|
7691
7913
|
return theme.colors.black;
|
|
7692
7914
|
}, function (_ref6) {
|
|
@@ -7722,7 +7944,7 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
|
|
|
7722
7944
|
return '';
|
|
7723
7945
|
});
|
|
7724
7946
|
|
|
7725
|
-
var _excluded$
|
|
7947
|
+
var _excluded$l = ["text"],
|
|
7726
7948
|
_excluded2$3 = ["text"];
|
|
7727
7949
|
var LENGTH_TEXT$3 = 28;
|
|
7728
7950
|
|
|
@@ -7749,7 +7971,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7749
7971
|
var _ref2 = primaryButton || {},
|
|
7750
7972
|
_ref2$text = _ref2.text,
|
|
7751
7973
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7752
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7974
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
|
|
7753
7975
|
|
|
7754
7976
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
7755
7977
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -7783,8 +8005,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7783
8005
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
7784
8006
|
};
|
|
7785
8007
|
|
|
7786
|
-
var _templateObject$
|
|
7787
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8008
|
+
var _templateObject$13;
|
|
8009
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
7788
8010
|
|
|
7789
8011
|
/**
|
|
7790
8012
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -7842,10 +8064,100 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
7842
8064
|
})));
|
|
7843
8065
|
};
|
|
7844
8066
|
|
|
7845
|
-
var _templateObject$
|
|
7846
|
-
var
|
|
7847
|
-
var
|
|
7848
|
-
var
|
|
8067
|
+
var _templateObject$14, _templateObject2$N, _templateObject3$F;
|
|
8068
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8069
|
+
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) {
|
|
8070
|
+
var horizontalMode = _ref.horizontalMode;
|
|
8071
|
+
if (horizontalMode) return 'row';
|
|
8072
|
+
return 'column';
|
|
8073
|
+
}, function (_ref2) {
|
|
8074
|
+
var gap = _ref2.gap;
|
|
8075
|
+
return gap + "px";
|
|
8076
|
+
});
|
|
8077
|
+
var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
8078
|
+
var darkMode = _ref3.darkMode;
|
|
8079
|
+
if (darkMode) return 'var(--base-color-white)';
|
|
8080
|
+
return 'var(--base-color-errorstate)';
|
|
8081
|
+
});
|
|
8082
|
+
|
|
8083
|
+
/**
|
|
8084
|
+
* A RadioGroup component, that renders set of Radio2 components inside.
|
|
8085
|
+
* `name` prop should be specified and will be passed as a `name` to each
|
|
8086
|
+
* radio to combine them in one group.
|
|
8087
|
+
*
|
|
8088
|
+
* # Radios
|
|
8089
|
+
* `radios` prop is an array of radios that should be renderet. This is an
|
|
8090
|
+
* array of objects `{content: ReactNode, value: string | number}`.
|
|
8091
|
+
*
|
|
8092
|
+
* # Default value
|
|
8093
|
+
* `defaultValue` prop can be specified to make one of radios checked inittially.
|
|
8094
|
+
* This should be equal to `value` of one of `radios`.
|
|
8095
|
+
*
|
|
8096
|
+
* # Error state
|
|
8097
|
+
* An error label will be shown below the radios if the `error` prop exists.
|
|
8098
|
+
* Also radios will be rendered with a red border. An empty string can be passed to
|
|
8099
|
+
* render only error state without error message.
|
|
8100
|
+
*
|
|
8101
|
+
* # Horizontal mode
|
|
8102
|
+
* If `horizontalMode` prop is true radios will be placed in a row instead of column.
|
|
8103
|
+
*
|
|
8104
|
+
* # Distance between radios
|
|
8105
|
+
* `gap` prop allow to control distance between radios in pixels. This works in default and
|
|
8106
|
+
* horizontal modes.
|
|
8107
|
+
*
|
|
8108
|
+
* # Light / Dark mode
|
|
8109
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
8110
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8111
|
+
*
|
|
8112
|
+
* # Black box mode
|
|
8113
|
+
* If `blackBox` prop is true checked state will be styled as black box with white tick icon.
|
|
8114
|
+
* This style was used before as a default. Not preferred in new components.
|
|
8115
|
+
* This will be ignored if `darkMode` is true.
|
|
8116
|
+
*/
|
|
8117
|
+
|
|
8118
|
+
var RadioGroup2 = function RadioGroup2(_ref) {
|
|
8119
|
+
var radios = _ref.radios,
|
|
8120
|
+
name = _ref.name,
|
|
8121
|
+
_ref$horizontalMode = _ref.horizontalMode,
|
|
8122
|
+
horizontalMode = _ref$horizontalMode === void 0 ? false : _ref$horizontalMode,
|
|
8123
|
+
_ref$gap = _ref.gap,
|
|
8124
|
+
gap = _ref$gap === void 0 ? 30 : _ref$gap,
|
|
8125
|
+
error = _ref.error,
|
|
8126
|
+
darkMode = _ref.darkMode,
|
|
8127
|
+
blackBox = _ref.blackBox,
|
|
8128
|
+
onChange = _ref.onChange,
|
|
8129
|
+
defaultValue = _ref.defaultValue;
|
|
8130
|
+
|
|
8131
|
+
var changeHandler = function changeHandler(e) {
|
|
8132
|
+
onChange == null ? void 0 : onChange(e.target.value);
|
|
8133
|
+
};
|
|
8134
|
+
|
|
8135
|
+
return /*#__PURE__*/React__default.createElement(Container$3, null, /*#__PURE__*/React__default.createElement(RadioGroup$1, {
|
|
8136
|
+
gap: gap,
|
|
8137
|
+
horizontalMode: horizontalMode
|
|
8138
|
+
}, radios.map(function (radio, idx) {
|
|
8139
|
+
return /*#__PURE__*/React__default.createElement(Radio2, {
|
|
8140
|
+
key: radio.value + "-" + idx,
|
|
8141
|
+
name: name,
|
|
8142
|
+
value: radio.value,
|
|
8143
|
+
blackBox: blackBox,
|
|
8144
|
+
darkMode: darkMode,
|
|
8145
|
+
defaultChecked: radio.value === defaultValue,
|
|
8146
|
+
error: error !== undefined ? '' : undefined,
|
|
8147
|
+
onChange: changeHandler
|
|
8148
|
+
}, radio.content);
|
|
8149
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
8150
|
+
darkMode: darkMode,
|
|
8151
|
+
"data-testid": "radio-group-error-label"
|
|
8152
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8153
|
+
level: 6
|
|
8154
|
+
}, error)));
|
|
8155
|
+
};
|
|
8156
|
+
|
|
8157
|
+
var _templateObject$15, _templateObject2$O, _templateObject3$G;
|
|
8158
|
+
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);
|
|
8159
|
+
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"])));
|
|
8160
|
+
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);
|
|
7849
8161
|
|
|
7850
8162
|
var StatusBanner = function StatusBanner(_ref) {
|
|
7851
8163
|
var statusText = _ref.statusText,
|
|
@@ -7907,8 +8219,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
7907
8219
|
})))));
|
|
7908
8220
|
};
|
|
7909
8221
|
|
|
7910
|
-
var _templateObject$
|
|
7911
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8222
|
+
var _templateObject$16;
|
|
8223
|
+
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);
|
|
7912
8224
|
|
|
7913
8225
|
var SectionTitle = function SectionTitle(_ref) {
|
|
7914
8226
|
var title = _ref.title,
|
|
@@ -7934,8 +8246,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
7934
8246
|
}, description))));
|
|
7935
8247
|
};
|
|
7936
8248
|
|
|
7937
|
-
var _templateObject$
|
|
7938
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8249
|
+
var _templateObject$17, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$p, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
8250
|
+
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) {
|
|
7939
8251
|
var theme = _ref.theme;
|
|
7940
8252
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
7941
8253
|
}, function (_ref2) {
|
|
@@ -7945,12 +8257,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$14 || (_templateObject
|
|
|
7945
8257
|
var theme = _ref3.theme;
|
|
7946
8258
|
return theme.colors.lightgrey;
|
|
7947
8259
|
});
|
|
7948
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
8260
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
7949
8261
|
var theme = _ref4.theme;
|
|
7950
8262
|
return theme.colors.darkgrey;
|
|
7951
8263
|
});
|
|
7952
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
7953
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
8264
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
8265
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
7954
8266
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
7955
8267
|
var theme = _ref5.theme;
|
|
7956
8268
|
return {
|
|
@@ -7958,8 +8270,8 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
7958
8270
|
color: theme.colors.black,
|
|
7959
8271
|
title: 'Select Arrow'
|
|
7960
8272
|
};
|
|
7961
|
-
})(_templateObject5$
|
|
7962
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8273
|
+
})(_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"])));
|
|
8274
|
+
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);
|
|
7963
8275
|
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
7964
8276
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
7965
8277
|
var Option = /*#__PURE__*/styled__default.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
@@ -8356,8 +8668,8 @@ function Select(_ref3) {
|
|
|
8356
8668
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
8357
8669
|
}
|
|
8358
8670
|
|
|
8359
|
-
var _templateObject$
|
|
8360
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8671
|
+
var _templateObject$18;
|
|
8672
|
+
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) {
|
|
8361
8673
|
var theme = _ref.theme;
|
|
8362
8674
|
return theme.colors.primary;
|
|
8363
8675
|
});
|
|
@@ -8385,8 +8697,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
8385
8697
|
})));
|
|
8386
8698
|
};
|
|
8387
8699
|
|
|
8388
|
-
var _templateObject$
|
|
8389
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8700
|
+
var _templateObject$19, _templateObject2$Q;
|
|
8701
|
+
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) {
|
|
8390
8702
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8391
8703
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8392
8704
|
return aspectRatio;
|
|
@@ -8396,7 +8708,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templat
|
|
|
8396
8708
|
height = _ref2.height;
|
|
8397
8709
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
8398
8710
|
});
|
|
8399
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8711
|
+
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"])));
|
|
8400
8712
|
|
|
8401
8713
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
8402
8714
|
var caption = _ref.caption,
|
|
@@ -8434,13 +8746,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
8434
8746
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
8435
8747
|
};
|
|
8436
8748
|
|
|
8437
|
-
var _templateObject$
|
|
8438
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8439
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8749
|
+
var _templateObject$1a, _templateObject2$R, _templateObject3$I;
|
|
8750
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
8751
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
8440
8752
|
var displayAttribution = _ref.displayAttribution;
|
|
8441
8753
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
8442
8754
|
});
|
|
8443
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8755
|
+
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);
|
|
8444
8756
|
|
|
8445
8757
|
var Quote = function Quote(_ref) {
|
|
8446
8758
|
var text = _ref.text,
|
|
@@ -8464,13 +8776,13 @@ var Quote = function Quote(_ref) {
|
|
|
8464
8776
|
}, attribution))));
|
|
8465
8777
|
};
|
|
8466
8778
|
|
|
8467
|
-
var _templateObject$
|
|
8468
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8469
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8470
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
8471
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8472
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8473
|
-
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8779
|
+
var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$y, _templateObject5$q, _templateObject6$l;
|
|
8780
|
+
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"])));
|
|
8781
|
+
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"])));
|
|
8782
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
8783
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
8784
|
+
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);
|
|
8785
|
+
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);
|
|
8474
8786
|
|
|
8475
8787
|
var MiniCard = function MiniCard(_ref) {
|
|
8476
8788
|
var _ref$title = _ref.title,
|
|
@@ -8508,11 +8820,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
8508
8820
|
}, title)))));
|
|
8509
8821
|
};
|
|
8510
8822
|
|
|
8511
|
-
var _templateObject$
|
|
8512
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8513
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8514
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8515
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8823
|
+
var _templateObject$1c, _templateObject2$T, _templateObject3$K, _templateObject4$z;
|
|
8824
|
+
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"])));
|
|
8825
|
+
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"])));
|
|
8826
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8827
|
+
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"])));
|
|
8516
8828
|
|
|
8517
8829
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
8518
8830
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -8610,19 +8922,19 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8610
8922
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
8611
8923
|
};
|
|
8612
8924
|
|
|
8613
|
-
var _templateObject$
|
|
8614
|
-
var Container$
|
|
8615
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8616
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8925
|
+
var _templateObject$1d, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$m;
|
|
8926
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
8927
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
8928
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
8617
8929
|
var color = _ref.color;
|
|
8618
8930
|
return "var(--base-color-" + color + ")";
|
|
8619
8931
|
});
|
|
8620
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8621
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8932
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
8933
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
8622
8934
|
var color = _ref2.color;
|
|
8623
8935
|
return "var(--base-color-" + color + ")";
|
|
8624
8936
|
});
|
|
8625
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8937
|
+
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) {
|
|
8626
8938
|
var color = _ref3.color;
|
|
8627
8939
|
return "var(--base-color-" + color + ")";
|
|
8628
8940
|
});
|
|
@@ -8683,7 +8995,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
8683
8995
|
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
8684
8996
|
};
|
|
8685
8997
|
|
|
8686
|
-
return /*#__PURE__*/React__default.createElement(Container$
|
|
8998
|
+
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
8687
8999
|
"data-testid": "password-strength-container"
|
|
8688
9000
|
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
8689
9001
|
"data-testid": "password-strength-sections"
|
|
@@ -8708,17 +9020,17 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
8708
9020
|
}, strengthLabel))));
|
|
8709
9021
|
};
|
|
8710
9022
|
|
|
8711
|
-
var _templateObject$
|
|
8712
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$
|
|
8713
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
9023
|
+
var _templateObject$1e, _templateObject2$V, _templateObject3$M, _templateObject4$B;
|
|
9024
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9025
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$V || (_templateObject2$V = /*#__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) {
|
|
8714
9026
|
var mobileOpen = _ref.mobileOpen;
|
|
8715
9027
|
return mobileOpen ? "block" : 'none';
|
|
8716
9028
|
}, exports.Colors.White, exports.Colors.DarkGrey);
|
|
8717
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
9029
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__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) {
|
|
8718
9030
|
var active = _ref2.active;
|
|
8719
9031
|
return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
8720
9032
|
}, exports.Colors.MidGrey, devices.mobile);
|
|
8721
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$
|
|
9033
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$B || (_templateObject4$B = /*#__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);
|
|
8722
9034
|
|
|
8723
9035
|
/**
|
|
8724
9036
|
* Vertical menu component uses for navigation
|
|
@@ -8878,9 +9190,9 @@ var LiveChat = function LiveChat() {
|
|
|
8878
9190
|
});
|
|
8879
9191
|
};
|
|
8880
9192
|
|
|
8881
|
-
var _templateObject$
|
|
8882
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8883
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
9193
|
+
var _templateObject$1f, _templateObject2$W;
|
|
9194
|
+
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);
|
|
9195
|
+
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) {
|
|
8884
9196
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
8885
9197
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
8886
9198
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -8908,13 +9220,13 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
8908
9220
|
}, children)));
|
|
8909
9221
|
};
|
|
8910
9222
|
|
|
8911
|
-
var _templateObject$
|
|
8912
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8913
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
8914
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8915
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
9223
|
+
var _templateObject$1g, _templateObject2$X, _templateObject3$N, _templateObject4$C;
|
|
9224
|
+
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);
|
|
9225
|
+
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);
|
|
9226
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9227
|
+
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"])));
|
|
8916
9228
|
|
|
8917
|
-
var _excluded$
|
|
9229
|
+
var _excluded$m = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
8918
9230
|
var MAX_Z_INDEX = 9999999999;
|
|
8919
9231
|
|
|
8920
9232
|
if (Modal.defaultStyles.content) {
|
|
@@ -8991,7 +9303,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
8991
9303
|
setIsOpen = _ref.setIsOpen,
|
|
8992
9304
|
children = _ref.children,
|
|
8993
9305
|
appElementId = _ref.appElementId,
|
|
8994
|
-
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
9306
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
|
|
8995
9307
|
|
|
8996
9308
|
var isMobile = useMobile();
|
|
8997
9309
|
var customStyles = {
|
|
@@ -9033,8 +9345,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
9033
9345
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
9034
9346
|
};
|
|
9035
9347
|
|
|
9036
|
-
var _templateObject$
|
|
9037
|
-
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) {
|
|
9348
|
+
var _templateObject$1h;
|
|
9349
|
+
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) {
|
|
9038
9350
|
var theme = _ref.theme;
|
|
9039
9351
|
return theme.colors.primary;
|
|
9040
9352
|
}, function (_ref2) {
|
|
@@ -10019,7 +10331,9 @@ exports.PromoWithTags = PromoWithTags;
|
|
|
10019
10331
|
exports.PromoWithTitle = PromoWithTitle;
|
|
10020
10332
|
exports.Quote = Quote;
|
|
10021
10333
|
exports.Radio = Radio;
|
|
10334
|
+
exports.Radio2 = Radio2;
|
|
10022
10335
|
exports.RadioGroup = RadioGroup;
|
|
10336
|
+
exports.RadioGroup2 = RadioGroup2;
|
|
10023
10337
|
exports.ReadMore = ReadMore;
|
|
10024
10338
|
exports.RotatorButtons = RotatorButtons;
|
|
10025
10339
|
exports.SearchBar = SearchBar;
|
|
@@ -10044,6 +10358,7 @@ exports.TextLink = TextLink;
|
|
|
10044
10358
|
exports.TextOnly = TextOnly;
|
|
10045
10359
|
exports.ThemeProvider = Theme;
|
|
10046
10360
|
exports.Tickbox = Tickbox;
|
|
10361
|
+
exports.Tickbox2 = Tickbox2;
|
|
10047
10362
|
exports.Timer = Timer;
|
|
10048
10363
|
exports.TitleWithCTA = TitleWithCTA;
|
|
10049
10364
|
exports.TypeTags = TypeTags;
|