@royaloperahouse/chord 1.2.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 +6 -0
- package/README.md +99 -44
- package/dist/chord.cjs.development.js +114 -71
- 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 +115 -72
- 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/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) {
|
|
@@ -5701,47 +5702,41 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5701
5702
|
}));
|
|
5702
5703
|
};
|
|
5703
5704
|
|
|
5704
|
-
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;
|
|
5705
5706
|
var LENGTH_TEXT = 28;
|
|
5706
|
-
var LENGTH_TEXT_TABLET$1 =
|
|
5707
|
-
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) {
|
|
5708
5713
|
var imageToLeft = _ref.imageToLeft;
|
|
5709
|
-
return imageToLeft ?
|
|
5714
|
+
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
5710
5715
|
}, devices.tablet, function (_ref2) {
|
|
5711
5716
|
var imageToLeft = _ref2.imageToLeft;
|
|
5712
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'";
|
|
5713
|
-
}, devices.mobile)
|
|
5714
|
-
|
|
5715
|
-
var imageToLeft = _ref3.imageToLeft;
|
|
5716
|
-
return imageToLeft ? 'left' : 'right';
|
|
5717
|
-
}, devices.mobile);
|
|
5718
|
-
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) {
|
|
5719
|
-
var imageToLeft = _ref4.imageToLeft;
|
|
5720
|
-
return imageToLeft ? 'right' : 'left';
|
|
5721
|
-
}, devices.mobile, function (_ref5) {
|
|
5722
|
-
var hideSection = _ref5.hideSection;
|
|
5723
|
-
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 " : "";
|
|
5724
5720
|
});
|
|
5725
|
-
var
|
|
5726
|
-
var
|
|
5727
|
-
var
|
|
5728
|
-
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;
|
|
5729
5724
|
return theme.colors.black;
|
|
5730
|
-
}, function (
|
|
5731
|
-
var theme =
|
|
5725
|
+
}, function (_ref4) {
|
|
5726
|
+
var theme = _ref4.theme;
|
|
5732
5727
|
return theme.colors.darkgrey;
|
|
5733
|
-
}, function (
|
|
5734
|
-
var theme =
|
|
5728
|
+
}, function (_ref5) {
|
|
5729
|
+
var theme = _ref5.theme;
|
|
5735
5730
|
return theme.colors.primary;
|
|
5736
5731
|
});
|
|
5737
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(
|
|
5738
|
-
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;
|
|
5739
5734
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
5740
|
-
}, function (
|
|
5741
|
-
var
|
|
5742
|
-
primaryButtonTextLength =
|
|
5743
|
-
|
|
5744
|
-
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;
|
|
5745
5740
|
var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
|
|
5746
5741
|
|
|
5747
5742
|
if (isLinksLayoutColumn) {
|
|
@@ -5749,11 +5744,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5749
5744
|
}
|
|
5750
5745
|
|
|
5751
5746
|
return '';
|
|
5752
|
-
}, devices.mobile, devices.tablet, function (
|
|
5753
|
-
var
|
|
5754
|
-
primaryButtonTextLength =
|
|
5755
|
-
|
|
5756
|
-
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;
|
|
5757
5752
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
|
|
5758
5753
|
|
|
5759
5754
|
if (isLinksLayoutColumnTablet) {
|
|
@@ -5762,22 +5757,40 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
|
|
|
5762
5757
|
|
|
5763
5758
|
return '';
|
|
5764
5759
|
});
|
|
5765
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(
|
|
5766
|
-
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;
|
|
5767
5762
|
return marginBottom + "px";
|
|
5768
5763
|
});
|
|
5769
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(
|
|
5770
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(
|
|
5771
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled.div(
|
|
5772
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(
|
|
5773
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(
|
|
5774
|
-
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(
|
|
5775
|
-
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"])));
|
|
5776
5788
|
|
|
5777
5789
|
var _excluded$j = ["text"],
|
|
5778
5790
|
_excluded2$3 = ["text"],
|
|
5779
5791
|
_excluded3 = ["text"];
|
|
5780
5792
|
var LENGTH_TEXT$1 = 28;
|
|
5793
|
+
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
5781
5794
|
|
|
5782
5795
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
5783
5796
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -5795,7 +5808,13 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5795
5808
|
belowTitleTags = _ref.belowTitleTags,
|
|
5796
5809
|
middleText = _ref.middleText,
|
|
5797
5810
|
bottomText = _ref.bottomText,
|
|
5798
|
-
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;
|
|
5799
5818
|
|
|
5800
5819
|
var _useState = useState(false),
|
|
5801
5820
|
showExtraContent = _useState[0],
|
|
@@ -5805,8 +5824,20 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5805
5824
|
return str.length >= n ? str.substr(0, n) : str;
|
|
5806
5825
|
};
|
|
5807
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
|
+
|
|
5808
5839
|
var imageToLeft = imagePosition === 'left';
|
|
5809
|
-
var titleLevel = titleSize
|
|
5840
|
+
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
5810
5841
|
var isExtraContentPresent = !!children;
|
|
5811
5842
|
var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
|
|
5812
5843
|
|
|
@@ -5836,6 +5867,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5836
5867
|
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
5837
5868
|
|
|
5838
5869
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
|
|
5870
|
+
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
5839
5871
|
var textLinkItems = textLinks ? textLinks.map(function (link) {
|
|
5840
5872
|
var _link$text = link.text,
|
|
5841
5873
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
@@ -5845,24 +5877,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5845
5877
|
}) : null;
|
|
5846
5878
|
return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
|
|
5847
5879
|
id: anchorLink,
|
|
5848
|
-
|
|
5880
|
+
"data-testid": "grid-wrapper",
|
|
5881
|
+
imageToLeft: imageToLeft,
|
|
5882
|
+
asCard: asCard
|
|
5849
5883
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
|
|
5850
5884
|
"data-testid": "content-wrapper",
|
|
5851
5885
|
imageToLeft: imageToLeft,
|
|
5852
|
-
hideSection: showExtraContent
|
|
5886
|
+
hideSection: showExtraContent,
|
|
5887
|
+
asCard: asCard
|
|
5853
5888
|
}, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5854
5889
|
marginBottom: 16
|
|
5855
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5890
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5856
5891
|
list: aboveTitleTags
|
|
5857
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
5892
|
+
})), /*#__PURE__*/React__default.createElement(PromoWithTagsHeader, {
|
|
5893
|
+
semanticLevel: 2,
|
|
5858
5894
|
level: titleLevel
|
|
5859
5895
|
}, title)), subtitle && /*#__PURE__*/React__default.createElement(PromoWithTagsSubtitle, null, subtitle), !!(belowTitleTags != null && belowTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
5860
5896
|
marginBottom: 8
|
|
5861
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
5897
|
+
}, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
|
|
5862
5898
|
list: belowTitleTags
|
|
5863
5899
|
})), /*#__PURE__*/React__default.createElement(PromoWithTagsText, {
|
|
5864
5900
|
dangerouslySetInnerHTML: {
|
|
5865
|
-
__html:
|
|
5901
|
+
__html: textTruncate
|
|
5866
5902
|
}
|
|
5867
5903
|
}), middleText && /*#__PURE__*/React__default.createElement(PromoWithTagsAdditionalText, {
|
|
5868
5904
|
dangerouslySetInnerHTML: {
|
|
@@ -5877,12 +5913,19 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
5877
5913
|
"data-testid": "buttons-wrapper",
|
|
5878
5914
|
primaryButtonTextLength: primaryButtonText.length,
|
|
5879
5915
|
tertiaryButtonTextLength: tertiaryButtonText.length
|
|
5880
|
-
}, 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({
|
|
5881
5923
|
onClick: defaultOnClickHandler
|
|
5882
5924
|
}, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
|
|
5883
5925
|
"data-testid": "extra-content-wrapper",
|
|
5884
5926
|
imageToLeft: imageToLeft
|
|
5885
|
-
}, 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,
|
|
5886
5929
|
level: titleLevel
|
|
5887
5930
|
}, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5888
5931
|
aspectRatio: AspectRatio['4:3']
|
|
@@ -6158,7 +6201,7 @@ var Quote = function Quote(_ref) {
|
|
|
6158
6201
|
};
|
|
6159
6202
|
|
|
6160
6203
|
var _templateObject$V;
|
|
6161
|
-
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) {
|
|
6162
6205
|
var theme = _ref.theme;
|
|
6163
6206
|
return theme.colors.primary;
|
|
6164
6207
|
}, function (_ref2) {
|