@royaloperahouse/chord 1.1.0 → 1.3.0-b-development-chord-development
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/README.md +99 -44
- package/dist/chord.cjs.development.js +136 -80
- 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 +137 -81
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Typography/Typography.d.ts +1 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +5 -3
- package/dist/helpers/defaultValues.d.ts +7 -0
- package/dist/types/card.d.ts +4 -0
- package/dist/types/editorial.d.ts +16 -0
- package/dist/types/typography.d.ts +5 -1
- package/package.json +11 -10
- package/README.GIT +0 -122
package/dist/chord.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, useMemo } from 'react';
|
|
2
|
-
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
2
|
+
import styled, { ThemeProvider, css, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
|
|
4
4
|
import 'swiper/swiper-bundle.css';
|
|
5
5
|
|
|
@@ -60,7 +60,7 @@ var devices = {
|
|
|
60
60
|
};
|
|
61
61
|
|
|
62
62
|
var _templateObject;
|
|
63
|
-
var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
|
|
63
|
+
var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color- ", ");\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
|
|
64
64
|
var iconName = _ref.iconName;
|
|
65
65
|
return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
|
|
66
66
|
}, function (_ref2) {
|
|
@@ -563,7 +563,7 @@ var Directions = {
|
|
|
563
563
|
down: 'transform: rotate(90deg)',
|
|
564
564
|
reverse: 'transform: scaleX(-1)'
|
|
565
565
|
};
|
|
566
|
-
var Wrapper = /*#__PURE__*/styled.span(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n & svg {\n display: block;\n ", ";\n }\n\n & svg path {\n fill: var(--base-color-", ", ", ");\n }\n"])), function (_ref) {
|
|
566
|
+
var Wrapper = /*#__PURE__*/styled.span(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n & svg {\n display: block;\n ", ";\n }\n\n & svg path {\n fill: var(--base-color- ", ", ", ");\n }\n"])), function (_ref) {
|
|
567
567
|
var _ref$direction = _ref.direction,
|
|
568
568
|
direction = _ref$direction === void 0 ? 'right' : _ref$direction;
|
|
569
569
|
return Directions[direction];
|
|
@@ -2162,7 +2162,7 @@ var SecondaryButton = function SecondaryButton(_ref) {
|
|
|
2162
2162
|
};
|
|
2163
2163
|
|
|
2164
2164
|
var _templateObject$5, _templateObject2;
|
|
2165
|
-
var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n"])), function (_ref) {
|
|
2165
|
+
var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color- ", ");\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n"])), function (_ref) {
|
|
2166
2166
|
var color = _ref.color;
|
|
2167
2167
|
return color;
|
|
2168
2168
|
});
|
|
@@ -2214,7 +2214,7 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 =
|
|
|
2214
2214
|
});
|
|
2215
2215
|
|
|
2216
2216
|
var _templateObject$8;
|
|
2217
|
-
var BadgeWrapper = /*#__PURE__*/styled.svg(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: auto;\n\n g,\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2217
|
+
var BadgeWrapper = /*#__PURE__*/styled.svg(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: auto;\n\n g,\n path {\n fill: var(--base-color- ", ");\n }\n"])), function (_ref) {
|
|
2218
2218
|
var fillColor = _ref.fillColor;
|
|
2219
2219
|
return fillColor;
|
|
2220
2220
|
});
|
|
@@ -2263,7 +2263,7 @@ zLevels.forEach(function (name, index) {
|
|
|
2263
2263
|
|
|
2264
2264
|
var _templateObject$9, _templateObject2$1, _templateObject3;
|
|
2265
2265
|
var TabContainer = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
2266
|
-
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$1 || (_templateObject2$1 = /*#__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 text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2266
|
+
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$1 || (_templateObject2$1 = /*#__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 text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color- ", ");\n }\n"])), function (_ref) {
|
|
2267
2267
|
var colorPrimary = _ref.colorPrimary;
|
|
2268
2268
|
return colorPrimary;
|
|
2269
2269
|
});
|
|
@@ -2423,7 +2423,7 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
2423
2423
|
};
|
|
2424
2424
|
|
|
2425
2425
|
var _templateObject$b;
|
|
2426
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2426
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color- ", ");\n }\n"])), function (_ref) {
|
|
2427
2427
|
var fillColor = _ref.fillColor;
|
|
2428
2428
|
return fillColor;
|
|
2429
2429
|
});
|
|
@@ -2874,7 +2874,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
2874
2874
|
};
|
|
2875
2875
|
|
|
2876
2876
|
var _templateObject$i, _templateObject2$6;
|
|
2877
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$i || (_templateObject$i = /*#__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) {
|
|
2877
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$i || (_templateObject$i = /*#__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) {
|
|
2878
2878
|
var iconName = _ref.iconName;
|
|
2879
2879
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
2880
2880
|
}, function (_ref2) {
|
|
@@ -2906,7 +2906,7 @@ var TextLink = function TextLink(_ref) {
|
|
|
2906
2906
|
};
|
|
2907
2907
|
|
|
2908
2908
|
var _templateObject$j;
|
|
2909
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2909
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family- ", ");\n font-feature-settings: var(--font-feature-settings- ", ");\n font-size: var(--font-size- ", "- ", ");\n font-weight: var(--font-weight- ", "- ", ");\n letter-spacing: var(--letter-spacing- ", "- ", ");\n line-height: var(--line-height- ", "- ", ");\n text-transform: var(--text-transform- ", ");\n word-break: var(--word-break- ", ");\n"])), function (_ref) {
|
|
2910
2910
|
var typography = _ref.typography;
|
|
2911
2911
|
return typography;
|
|
2912
2912
|
}, function (_ref2) {
|
|
@@ -2978,9 +2978,10 @@ var BodyText = function BodyText(_ref3) {
|
|
|
2978
2978
|
}, children);
|
|
2979
2979
|
};
|
|
2980
2980
|
var Header = function Header(_ref4) {
|
|
2981
|
-
var
|
|
2981
|
+
var semanticLevel = _ref4.semanticLevel,
|
|
2982
|
+
level = _ref4.level,
|
|
2982
2983
|
children = _ref4.children;
|
|
2983
|
-
var renderedTag = "h" + level;
|
|
2984
|
+
var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
|
|
2984
2985
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
2985
2986
|
tag: renderedTag,
|
|
2986
2987
|
typography: "header",
|
|
@@ -3013,15 +3014,15 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3013
3014
|
};
|
|
3014
3015
|
|
|
3015
3016
|
var _templateObject$k, _templateObject2$7, _templateObject3$2;
|
|
3016
|
-
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color-", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref) {
|
|
3017
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color- ", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref) {
|
|
3017
3018
|
var dark = _ref.dark;
|
|
3018
3019
|
return dark ? 'white' : 'black';
|
|
3019
3020
|
}, devices.mobileAndTablet);
|
|
3020
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$7 || (_templateObject2$7 = /*#__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 var(--base-color-", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
3021
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$7 || (_templateObject2$7 = /*#__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 var(--base-color- ", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
3021
3022
|
var dark = _ref2.dark;
|
|
3022
3023
|
return dark ? 'white' : 'black';
|
|
3023
3024
|
}, devices.mobile);
|
|
3024
|
-
var TickboxInput = /*#__PURE__*/styled.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
3025
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(--base-color- ", ");\n & svg {\n display: block;\n path {\n fill: var(--base-color- ", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
3025
3026
|
var dark = _ref3.dark;
|
|
3026
3027
|
return dark ? 'white' : 'black';
|
|
3027
3028
|
}, function (_ref4) {
|
|
@@ -3218,7 +3219,7 @@ var _templateObject$p;
|
|
|
3218
3219
|
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__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);
|
|
3219
3220
|
|
|
3220
3221
|
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3221
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__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"])), function (_ref) {
|
|
3222
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__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"])), function (_ref) {
|
|
3222
3223
|
var selected = _ref.selected,
|
|
3223
3224
|
colorPrimary = _ref.colorPrimary;
|
|
3224
3225
|
|
|
@@ -3283,7 +3284,7 @@ var Basket$1 = function Basket(_ref) {
|
|
|
3283
3284
|
};
|
|
3284
3285
|
|
|
3285
3286
|
var _templateObject$r, _templateObject2$b;
|
|
3286
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__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) {
|
|
3287
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__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) {
|
|
3287
3288
|
var selected = _ref.selected,
|
|
3288
3289
|
colorPrimary = _ref.colorPrimary;
|
|
3289
3290
|
|
|
@@ -3579,7 +3580,7 @@ var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObj
|
|
|
3579
3580
|
|
|
3580
3581
|
return "display: none;";
|
|
3581
3582
|
});
|
|
3582
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__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) {
|
|
3583
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__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) {
|
|
3583
3584
|
var colorPrimary = _ref.colorPrimary;
|
|
3584
3585
|
return colorPrimary;
|
|
3585
3586
|
}, function (_ref2) {
|
|
@@ -4989,10 +4990,15 @@ var getButtonsOpacity = function getButtonsOpacity(_ref4) {
|
|
|
4989
4990
|
return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
|
|
4990
4991
|
};
|
|
4991
4992
|
|
|
4992
|
-
var
|
|
4993
|
-
var
|
|
4994
|
-
|
|
4995
|
-
|
|
4993
|
+
var getButtonsMinHeight = function getButtonsMinHeight(_ref5) {
|
|
4994
|
+
var onlyShowButtonsOnHover = _ref5.onlyShowButtonsOnHover;
|
|
4995
|
+
return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
|
|
4996
|
+
};
|
|
4997
|
+
|
|
4998
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref6) {
|
|
4999
|
+
var size = _ref6.size,
|
|
5000
|
+
primaryButtonTextLength = _ref6.primaryButtonTextLength,
|
|
5001
|
+
tertiaryButtonTextLength = _ref6.tertiaryButtonTextLength;
|
|
4996
5002
|
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
|
|
4997
5003
|
|
|
4998
5004
|
if (isLinksLayoutColumn) {
|
|
@@ -5000,9 +5006,15 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
|
|
|
5000
5006
|
}
|
|
5001
5007
|
|
|
5002
5008
|
return '';
|
|
5003
|
-
}, devices.mobile,
|
|
5004
|
-
var
|
|
5005
|
-
|
|
5009
|
+
}, devices.mobile, getButtonsMinHeight, function (_ref7) {
|
|
5010
|
+
var fullWidth = _ref7.fullWidth;
|
|
5011
|
+
return fullWidth ? '0' : '20px';
|
|
5012
|
+
}, function (_ref8) {
|
|
5013
|
+
var fullWidth = _ref8.fullWidth;
|
|
5014
|
+
return fullWidth ? '0' : '20px';
|
|
5015
|
+
}, devices.tablet, getButtonsMinHeight, function (_ref9) {
|
|
5016
|
+
var primaryButtonTextLength = _ref9.primaryButtonTextLength,
|
|
5017
|
+
tertiaryButtonTextLength = _ref9.tertiaryButtonTextLength;
|
|
5006
5018
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
|
|
5007
5019
|
|
|
5008
5020
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5151,7 +5163,8 @@ var Card = function Card(_ref) {
|
|
|
5151
5163
|
size: size,
|
|
5152
5164
|
primaryButtonTextLength: firstButtonText.length,
|
|
5153
5165
|
tertiaryButtonTextLength: secondButtonText.length,
|
|
5154
|
-
onlyShowButtonsOnHover: onlyShowButtonsOnHover
|
|
5166
|
+
onlyShowButtonsOnHover: onlyShowButtonsOnHover,
|
|
5167
|
+
fullWidth: fullWidth
|
|
5155
5168
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
5156
5169
|
};
|
|
5157
5170
|
|
|
@@ -5190,7 +5203,8 @@ var Cards = function Cards(_ref) {
|
|
|
5190
5203
|
links: card.links,
|
|
5191
5204
|
tags: card.tags,
|
|
5192
5205
|
withContinueWatching: card.withContinueWatching,
|
|
5193
|
-
onlyShowButtonsOnHover: card.onlyShowButtonsOnHover
|
|
5206
|
+
onlyShowButtonsOnHover: card.onlyShowButtonsOnHover,
|
|
5207
|
+
fullWidth: card.fullWidth
|
|
5194
5208
|
}));
|
|
5195
5209
|
}));
|
|
5196
5210
|
};
|
|
@@ -5688,47 +5702,41 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5688
5702
|
}));
|
|
5689
5703
|
};
|
|
5690
5704
|
|
|
5691
|
-
var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15;
|
|
5705
|
+
var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
5692
5706
|
var LENGTH_TEXT = 28;
|
|
5693
|
-
var LENGTH_TEXT_TABLET$1 =
|
|
5694
|
-
var
|
|
5707
|
+
var LENGTH_TEXT_TABLET$1 = 12;
|
|
5708
|
+
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
5709
|
+
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
5710
|
+
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
5711
|
+
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
5712
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__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) {
|
|
5695
5713
|
var imageToLeft = _ref.imageToLeft;
|
|
5696
|
-
return imageToLeft ?
|
|
5714
|
+
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
5697
5715
|
}, devices.tablet, function (_ref2) {
|
|
5698
5716
|
var imageToLeft = _ref2.imageToLeft;
|
|
5699
5717
|
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'";
|
|
5700
|
-
}, devices.mobile)
|
|
5701
|
-
|
|
5702
|
-
var imageToLeft = _ref3.imageToLeft;
|
|
5703
|
-
return imageToLeft ? 'left' : 'right';
|
|
5704
|
-
}, devices.mobile);
|
|
5705
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
5706
|
-
var imageToLeft = _ref4.imageToLeft;
|
|
5707
|
-
return imageToLeft ? 'right' : 'left';
|
|
5708
|
-
}, devices.mobile, function (_ref5) {
|
|
5709
|
-
var hideSection = _ref5.hideSection;
|
|
5710
|
-
return hideSection ? 'none' : 'block';
|
|
5718
|
+
}, devices.mobile, function (asCard) {
|
|
5719
|
+
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
5711
5720
|
});
|
|
5712
|
-
var
|
|
5713
|
-
var
|
|
5714
|
-
var
|
|
5715
|
-
var theme = _ref6.theme;
|
|
5721
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$x || (_templateObject2$x = /*#__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"])));
|
|
5722
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__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 (_ref3) {
|
|
5723
|
+
var theme = _ref3.theme;
|
|
5716
5724
|
return theme.colors.black;
|
|
5717
|
-
}, function (
|
|
5718
|
-
var theme =
|
|
5725
|
+
}, function (_ref4) {
|
|
5726
|
+
var theme = _ref4.theme;
|
|
5719
5727
|
return theme.colors.darkgrey;
|
|
5720
|
-
}, function (
|
|
5721
|
-
var theme =
|
|
5728
|
+
}, function (_ref5) {
|
|
5729
|
+
var theme = _ref5.theme;
|
|
5722
5730
|
return theme.colors.primary;
|
|
5723
5731
|
});
|
|
5724
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(
|
|
5725
|
-
var hasTextLinks =
|
|
5732
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__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 (_ref6) {
|
|
5733
|
+
var hasTextLinks = _ref6.hasTextLinks;
|
|
5726
5734
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
5727
|
-
}, function (
|
|
5728
|
-
var
|
|
5729
|
-
primaryButtonTextLength =
|
|
5730
|
-
|
|
5731
|
-
tertiaryButtonTextLength =
|
|
5735
|
+
}, function (_ref7) {
|
|
5736
|
+
var _ref7$primaryButtonTe = _ref7.primaryButtonTextLength,
|
|
5737
|
+
primaryButtonTextLength = _ref7$primaryButtonTe === void 0 ? 0 : _ref7$primaryButtonTe,
|
|
5738
|
+
_ref7$tertiaryButtonT = _ref7.tertiaryButtonTextLength,
|
|
5739
|
+
tertiaryButtonTextLength = _ref7$tertiaryButtonT === void 0 ? 0 : _ref7$tertiaryButtonT;
|
|
5732
5740
|
var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
|
|
5733
5741
|
|
|
5734
5742
|
if (isLinksLayoutColumn) {
|
|
@@ -5736,11 +5744,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5736
5744
|
}
|
|
5737
5745
|
|
|
5738
5746
|
return '';
|
|
5739
|
-
}, devices.mobile, devices.tablet, function (
|
|
5740
|
-
var
|
|
5741
|
-
primaryButtonTextLength =
|
|
5742
|
-
|
|
5743
|
-
tertiaryButtonTextLength =
|
|
5747
|
+
}, devices.mobile, devices.tablet, function (_ref8) {
|
|
5748
|
+
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5749
|
+
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5750
|
+
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
5751
|
+
tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
|
|
5744
5752
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
|
|
5745
5753
|
|
|
5746
5754
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5749,22 +5757,40 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5749
5757
|
|
|
5750
5758
|
return '';
|
|
5751
5759
|
});
|
|
5752
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(
|
|
5753
|
-
var marginBottom =
|
|
5760
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref9) {
|
|
5761
|
+
var marginBottom = _ref9.marginBottom;
|
|
5754
5762
|
return marginBottom + "px";
|
|
5755
5763
|
});
|
|
5756
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(
|
|
5757
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(
|
|
5758
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(
|
|
5759
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(
|
|
5760
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(
|
|
5761
|
-
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(
|
|
5762
|
-
var MobileTitleWrapper = /*#__PURE__*/styled.div(
|
|
5764
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
5765
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
5766
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
5767
|
+
var ExtraContentWrapper = /*#__PURE__*/styled.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);
|
|
5768
|
+
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
5769
|
+
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n"])));
|
|
5770
|
+
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
5771
|
+
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5772
|
+
var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
5773
|
+
var asCardOverrides = /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet);
|
|
5774
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref10) {
|
|
5775
|
+
var imageToLeft = _ref10.imageToLeft;
|
|
5776
|
+
return imageToLeft ? 'left' : 'right';
|
|
5777
|
+
}, devices.mobile);
|
|
5778
|
+
var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n\n ", "\n"])), function (_ref11) {
|
|
5779
|
+
var imageToLeft = _ref11.imageToLeft;
|
|
5780
|
+
return imageToLeft ? 'right' : 'left';
|
|
5781
|
+
}, devices.mobile, function (_ref12) {
|
|
5782
|
+
var hideSection = _ref12.hideSection;
|
|
5783
|
+
return hideSection ? 'none' : 'block';
|
|
5784
|
+
}, function (asCard) {
|
|
5785
|
+
return asCard && asCardOverrides;
|
|
5786
|
+
});
|
|
5787
|
+
var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
|
|
5763
5788
|
|
|
5764
5789
|
var _excluded$j = ["text"],
|
|
5765
5790
|
_excluded2$3 = ["text"],
|
|
5766
5791
|
_excluded3 = ["text"];
|
|
5767
5792
|
var LENGTH_TEXT$1 = 28;
|
|
5793
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
5768
5794
|
|
|
5769
5795
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
5770
5796
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -5782,7 +5808,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5782
5808
|
belowTitleTags = _ref.belowTitleTags,
|
|
5783
5809
|
middleText = _ref.middleText,
|
|
5784
5810
|
bottomText = _ref.bottomText,
|
|
5785
|
-
image = _ref.image
|
|
5811
|
+
image = _ref.image,
|
|
5812
|
+
_ref$asCard = _ref.asCard,
|
|
5813
|
+
asCard = _ref$asCard === void 0 ? false : _ref$asCard,
|
|
5814
|
+
_ref$disableCTA = _ref.disableCTA,
|
|
5815
|
+
disableCTA = _ref$disableCTA === void 0 ? false : _ref$disableCTA,
|
|
5816
|
+
_ref$disabledCTACopy = _ref.disabledCTACopy,
|
|
5817
|
+
disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy;
|
|
5786
5818
|
|
|
5787
5819
|
var _useState = useState(false),
|
|
5788
5820
|
showExtraContent = _useState[0],
|
|
@@ -5792,8 +5824,20 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5792
5824
|
return str.length >= n ? str.substr(0, n) : str;
|
|
5793
5825
|
};
|
|
5794
5826
|
|
|
5827
|
+
var getTitleLevel = function getTitleLevel(titleSize, isCard) {
|
|
5828
|
+
if (isCard) {
|
|
5829
|
+
return 5;
|
|
5830
|
+
}
|
|
5831
|
+
|
|
5832
|
+
if (titleSize === 'large') {
|
|
5833
|
+
return 3;
|
|
5834
|
+
}
|
|
5835
|
+
|
|
5836
|
+
return 2;
|
|
5837
|
+
};
|
|
5838
|
+
|
|
5795
5839
|
var imageToLeft = imagePosition === 'left';
|
|
5796
|
-
var titleLevel = titleSize
|
|
5840
|
+
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
5797
5841
|
var isExtraContentPresent = !!children;
|
|
5798
5842
|
var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
|
|
5799
5843
|
|
|
@@ -5823,6 +5867,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5823
5867
|
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
5824
5868
|
|
|
5825
5869
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
|
|
5870
|
+
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
5826
5871
|
var textLinkItems = textLinks ? textLinks.map(function (link) {
|
|
5827
5872
|
var _link$text = link.text,
|
|
5828
5873
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
@@ -5832,24 +5877,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5832
5877
|
}) : null;
|
|
5833
5878
|
return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
|
|
5834
5879
|
id: anchorLink,
|
|
5835
|
-
|
|
5880
|
+
"data-testid": "grid-wrapper",
|
|
5881
|
+
imageToLeft: imageToLeft,
|
|
5882
|
+
asCard: asCard
|
|
5836
5883
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
|
|
5837
5884
|
"data-testid": "content-wrapper",
|
|
5838
5885
|
imageToLeft: imageToLeft,
|
|
5839
|
-
hideSection: showExtraContent
|
|
5886
|
+
hideSection: showExtraContent,
|
|
5887
|
+
asCard: asCard
|
|
5840
5888
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5841
5889
|
marginBottom: 16
|
|
5842
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5890
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5843
5891
|
list: aboveTitleTags
|
|
5844
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
5892
|
+
})), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
5893
|
+
semanticLevel: 2,
|
|
5845
5894
|
level: titleLevel
|
|
5846
5895
|
}, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5847
5896
|
marginBottom: 8
|
|
5848
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5897
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5849
5898
|
list: belowTitleTags
|
|
5850
5899
|
})), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
|
|
5851
5900
|
dangerouslySetInnerHTML: {
|
|
5852
|
-
__html:
|
|
5901
|
+
__html: textTruncate
|
|
5853
5902
|
}
|
|
5854
5903
|
}), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
|
|
5855
5904
|
dangerouslySetInnerHTML: {
|
|
@@ -5864,12 +5913,19 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5864
5913
|
"data-testid": "buttons-wrapper",
|
|
5865
5914
|
primaryButtonTextLength: primaryButtonText.length,
|
|
5866
5915
|
tertiaryButtonTextLength: tertiaryButtonText.length
|
|
5867
|
-
}, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null,
|
|
5916
|
+
}, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
5917
|
+
bgColor: Colors.MidGrey,
|
|
5918
|
+
onClick: function onClick() {
|
|
5919
|
+
return null;
|
|
5920
|
+
},
|
|
5921
|
+
"data-testid": "diabled-link"
|
|
5922
|
+
}, disabledCTACopy || primaryButtonTextTruncate) : !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
|
|
5868
5923
|
onClick: defaultOnClickHandler
|
|
5869
5924
|
}, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
|
|
5870
5925
|
"data-testid": "extra-content-wrapper",
|
|
5871
5926
|
imageToLeft: imageToLeft
|
|
5872
|
-
}, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
5927
|
+
}, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
5928
|
+
semanticLevel: 2,
|
|
5873
5929
|
level: titleLevel
|
|
5874
5930
|
}, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5875
5931
|
aspectRatio: AspectRatio['4:3']
|
|
@@ -6145,7 +6201,7 @@ var Quote = function Quote(_ref) {
|
|
|
6145
6201
|
};
|
|
6146
6202
|
|
|
6147
6203
|
var _templateObject$V;
|
|
6148
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$V || (_templateObject$V = /*#__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\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\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-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) {
|
|
6204
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$V || (_templateObject$V = /*#__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\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\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-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) {
|
|
6149
6205
|
var theme = _ref.theme;
|
|
6150
6206
|
return theme.colors.primary;
|
|
6151
6207
|
}, function (_ref2) {
|