@royaloperahouse/chord 0.7.0 → 0.7.1
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 +5 -0
- package/README.md +1 -1
- package/dist/chord.cjs.development.js +102 -89
- 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 +102 -90
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/index.d.ts +2 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +0 -1
- package/dist/components/molecules/PeopleListing/Person.d.ts +7 -0
- package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/types/types.d.ts +4 -0
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -2668,8 +2668,40 @@ var TabLink = function TabLink(_ref) {
|
|
|
2668
2668
|
})) : null, children);
|
|
2669
2669
|
};
|
|
2670
2670
|
|
|
2671
|
-
var _templateObject$g;
|
|
2672
|
-
var
|
|
2671
|
+
var _templateObject$g, _templateObject2$4;
|
|
2672
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$g || (_templateObject$g = /*#__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) {
|
|
2673
|
+
var iconName = _ref.iconName;
|
|
2674
|
+
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
2675
|
+
}, function (_ref2) {
|
|
2676
|
+
var color = _ref2.color;
|
|
2677
|
+
return color;
|
|
2678
|
+
});
|
|
2679
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
2680
|
+
|
|
2681
|
+
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
2682
|
+
|
|
2683
|
+
var TextLink = function TextLink(_ref) {
|
|
2684
|
+
var children = _ref.children,
|
|
2685
|
+
iconName = _ref.iconName,
|
|
2686
|
+
iconDirection = _ref.iconDirection,
|
|
2687
|
+
color = _ref.color,
|
|
2688
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
2689
|
+
|
|
2690
|
+
var truncatedString = children.substring(0, 30);
|
|
2691
|
+
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
2692
|
+
color: color,
|
|
2693
|
+
iconName: iconName
|
|
2694
|
+
}, rest), truncatedString, iconName ? /*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
|
|
2695
|
+
"data-testid": "text-link-icon"
|
|
2696
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2697
|
+
iconName: iconName,
|
|
2698
|
+
direction: iconDirection,
|
|
2699
|
+
color: color
|
|
2700
|
+
})) : null);
|
|
2701
|
+
};
|
|
2702
|
+
|
|
2703
|
+
var _templateObject$h;
|
|
2704
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__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) {
|
|
2673
2705
|
var typography = _ref.typography;
|
|
2674
2706
|
return typography;
|
|
2675
2707
|
}, function (_ref2) {
|
|
@@ -2775,12 +2807,12 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
2775
2807
|
}, children);
|
|
2776
2808
|
};
|
|
2777
2809
|
|
|
2778
|
-
var _templateObject$
|
|
2779
|
-
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$
|
|
2810
|
+
var _templateObject$i, _templateObject2$5, _templateObject3;
|
|
2811
|
+
var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$i || (_templateObject$i = /*#__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"])), function (_ref) {
|
|
2780
2812
|
var dark = _ref.dark;
|
|
2781
2813
|
return dark ? 'white' : 'black';
|
|
2782
2814
|
});
|
|
2783
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$
|
|
2815
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$5 || (_templateObject2$5 = /*#__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) {
|
|
2784
2816
|
var dark = _ref2.dark;
|
|
2785
2817
|
return dark ? 'white' : 'black';
|
|
2786
2818
|
}, devices.mobile);
|
|
@@ -2836,8 +2868,8 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
2836
2868
|
})));
|
|
2837
2869
|
};
|
|
2838
2870
|
|
|
2839
|
-
var _templateObject$
|
|
2840
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
2871
|
+
var _templateObject$j;
|
|
2872
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n color: var(--base-color-black);\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
|
|
2841
2873
|
|
|
2842
2874
|
var TypeTags = function TypeTags(_ref) {
|
|
2843
2875
|
var list = _ref.list;
|
|
@@ -2850,9 +2882,9 @@ var TypeTags = function TypeTags(_ref) {
|
|
|
2850
2882
|
}));
|
|
2851
2883
|
};
|
|
2852
2884
|
|
|
2853
|
-
var _templateObject$
|
|
2854
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2855
|
-
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
2885
|
+
var _templateObject$k, _templateObject2$6, _templateObject3$1;
|
|
2886
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
2887
|
+
var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
2856
2888
|
var theme = _ref.theme;
|
|
2857
2889
|
return theme.colors.primary;
|
|
2858
2890
|
}, devices.mobileAndTablet);
|
|
@@ -2926,9 +2958,9 @@ zLevels.forEach(function (name, index) {
|
|
|
2926
2958
|
zIndexes[name] = index;
|
|
2927
2959
|
});
|
|
2928
2960
|
|
|
2929
|
-
var _templateObject$
|
|
2930
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2931
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
2961
|
+
var _templateObject$l, _templateObject2$7, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2962
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
|
|
2963
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
|
|
2932
2964
|
var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
2933
2965
|
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n height: 100px;\n width: 100%\n position: absolute;\n top: 140px;\n z-index: ", ";\n \n @media ", " {\n height: 80px;\n top: 80px;\n }\n"])), zIndexes.search, devices.mobile);
|
|
2934
2966
|
var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet);
|
|
@@ -2938,8 +2970,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8
|
|
|
2938
2970
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
2939
2971
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
2940
2972
|
|
|
2941
|
-
var _templateObject$
|
|
2942
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
2973
|
+
var _templateObject$m;
|
|
2974
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
2943
2975
|
|
|
2944
2976
|
var Logo = function Logo(_ref) {
|
|
2945
2977
|
var _ref$id = _ref.id,
|
|
@@ -2968,11 +3000,11 @@ var Logo = function Logo(_ref) {
|
|
|
2968
3000
|
}))));
|
|
2969
3001
|
};
|
|
2970
3002
|
|
|
2971
|
-
var _templateObject$
|
|
2972
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
3003
|
+
var _templateObject$n;
|
|
3004
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__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);
|
|
2973
3005
|
|
|
2974
|
-
var _templateObject$
|
|
2975
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3006
|
+
var _templateObject$o, _templateObject2$8, _templateObject3$3, _templateObject4$1;
|
|
3007
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__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) {
|
|
2976
3008
|
var selected = _ref.selected,
|
|
2977
3009
|
colorPrimary = _ref.colorPrimary;
|
|
2978
3010
|
|
|
@@ -2991,7 +3023,7 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObj
|
|
|
2991
3023
|
var colorPrimary = _ref4.colorPrimary;
|
|
2992
3024
|
return colorPrimary;
|
|
2993
3025
|
});
|
|
2994
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3026
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
2995
3027
|
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
2996
3028
|
var BasketText = /*#__PURE__*/styled.a(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
2997
3029
|
|
|
@@ -3035,8 +3067,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
3035
3067
|
}, text) : ''));
|
|
3036
3068
|
};
|
|
3037
3069
|
|
|
3038
|
-
var _templateObject$
|
|
3039
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3070
|
+
var _templateObject$p, _templateObject2$9;
|
|
3071
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__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) {
|
|
3040
3072
|
var selected = _ref.selected,
|
|
3041
3073
|
colorPrimary = _ref.colorPrimary;
|
|
3042
3074
|
|
|
@@ -3052,7 +3084,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObj
|
|
|
3052
3084
|
var colorPrimary = _ref3.colorPrimary;
|
|
3053
3085
|
return colorPrimary;
|
|
3054
3086
|
});
|
|
3055
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
3087
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
3056
3088
|
|
|
3057
3089
|
var Search$1 = function Search(_ref) {
|
|
3058
3090
|
var _ref$selected = _ref.selected,
|
|
@@ -3079,9 +3111,9 @@ var Search$1 = function Search(_ref) {
|
|
|
3079
3111
|
})));
|
|
3080
3112
|
};
|
|
3081
3113
|
|
|
3082
|
-
var _templateObject$
|
|
3083
|
-
var TabContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3084
|
-
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$
|
|
3114
|
+
var _templateObject$q, _templateObject2$a, _templateObject3$4;
|
|
3115
|
+
var TabContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
3116
|
+
var OptionItem = /*#__PURE__*/styled.a(_templateObject2$a || (_templateObject2$a = /*#__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) {
|
|
3085
3117
|
var colorPrimary = _ref.colorPrimary;
|
|
3086
3118
|
return colorPrimary;
|
|
3087
3119
|
});
|
|
@@ -3344,9 +3376,9 @@ var NavTop = function NavTop(_ref) {
|
|
|
3344
3376
|
}));
|
|
3345
3377
|
};
|
|
3346
3378
|
|
|
3347
|
-
var _templateObject$
|
|
3348
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3349
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
3379
|
+
var _templateObject$r, _templateObject2$b, _templateObject3$5, _templateObject4$2;
|
|
3380
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
3381
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.mobileAndTablet, function (props) {
|
|
3350
3382
|
if (props.showMenu) {
|
|
3351
3383
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
3352
3384
|
}
|
|
@@ -3362,9 +3394,9 @@ var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateOb
|
|
|
3362
3394
|
}, devices.mobileAndTablet);
|
|
3363
3395
|
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
3364
3396
|
|
|
3365
|
-
var _templateObject$
|
|
3366
|
-
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3367
|
-
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$
|
|
3397
|
+
var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3398
|
+
var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
|
|
3399
|
+
var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\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 text-transform: uppercase;\n cursor: pointer;\n\n ", "\n"])), function (_ref) {
|
|
3368
3400
|
var active = _ref.active,
|
|
3369
3401
|
activeColor = _ref.activeColor;
|
|
3370
3402
|
|
|
@@ -3623,46 +3655,14 @@ var Tabs = function Tabs(_ref) {
|
|
|
3623
3655
|
}, "MENU"))));
|
|
3624
3656
|
};
|
|
3625
3657
|
|
|
3626
|
-
var _templateObject$
|
|
3627
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3628
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
3658
|
+
var _templateObject$t, _templateObject2$d, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
|
|
3659
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100px;\n background-color: var(--base-color-white);\n\n @media ", " {\n column-gap: 12px;\n height: 80px;\n }\n"])), devices.mobile);
|
|
3660
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
3629
3661
|
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
3630
3662
|
var InputContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
3631
3663
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
3632
3664
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
3633
3665
|
|
|
3634
|
-
var _templateObject$t, _templateObject2$d;
|
|
3635
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$t || (_templateObject$t = /*#__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) {
|
|
3636
|
-
var iconName = _ref.iconName;
|
|
3637
|
-
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3638
|
-
}, function (_ref2) {
|
|
3639
|
-
var color = _ref2.color;
|
|
3640
|
-
return color;
|
|
3641
|
-
});
|
|
3642
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3643
|
-
|
|
3644
|
-
var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
|
|
3645
|
-
|
|
3646
|
-
var TextLink = function TextLink(_ref) {
|
|
3647
|
-
var children = _ref.children,
|
|
3648
|
-
iconName = _ref.iconName,
|
|
3649
|
-
iconDirection = _ref.iconDirection,
|
|
3650
|
-
color = _ref.color,
|
|
3651
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
3652
|
-
|
|
3653
|
-
var truncatedString = children.substring(0, 30);
|
|
3654
|
-
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
3655
|
-
color: color,
|
|
3656
|
-
iconName: iconName
|
|
3657
|
-
}, rest), truncatedString, iconName ? /*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
|
|
3658
|
-
"data-testid": "text-link-icon"
|
|
3659
|
-
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
3660
|
-
iconName: iconName,
|
|
3661
|
-
direction: iconDirection,
|
|
3662
|
-
color: color
|
|
3663
|
-
})) : null);
|
|
3664
|
-
};
|
|
3665
|
-
|
|
3666
3666
|
var SearchBar = function SearchBar(_ref) {
|
|
3667
3667
|
var onClick = _ref.onClick,
|
|
3668
3668
|
onClose = _ref.onClose;
|
|
@@ -4525,16 +4525,17 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
4525
4525
|
})));
|
|
4526
4526
|
};
|
|
4527
4527
|
|
|
4528
|
-
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6;
|
|
4528
|
+
var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6, _templateObject7$3;
|
|
4529
4529
|
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
4530
4530
|
var sticky = _ref.sticky;
|
|
4531
4531
|
return sticky ? 'sticky' : 'initial';
|
|
4532
4532
|
}, zIndexes.anchor);
|
|
4533
4533
|
var CTAGridWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
4534
4534
|
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n height: 50px;\n }\n }\n"])), devices.mobile);
|
|
4535
|
-
var
|
|
4536
|
-
var
|
|
4537
|
-
var
|
|
4535
|
+
var GridItemTitleWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n {\n grid-column: 2 / span 9;\n }\n }\n"])), devices.tablet);
|
|
4536
|
+
var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n @media ", " {\n {\n grid-column: 12 / span 3;\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
4537
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
4538
|
+
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref2) {
|
|
4538
4539
|
var theme = _ref2.theme;
|
|
4539
4540
|
return theme.colors.primaryButtonReverseBg;
|
|
4540
4541
|
}, function (_ref3) {
|
|
@@ -4567,7 +4568,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
4567
4568
|
|
|
4568
4569
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
4569
4570
|
sticky: sticky
|
|
4570
|
-
}, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(
|
|
4571
|
+
}, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItemTitleWrapper, {
|
|
4571
4572
|
columnStartDesktop: 2,
|
|
4572
4573
|
columnSpanDesktop: 9,
|
|
4573
4574
|
columnStartDevice: 2,
|
|
@@ -4652,7 +4653,7 @@ var Accordions = function Accordions(_ref) {
|
|
|
4652
4653
|
}));
|
|
4653
4654
|
};
|
|
4654
4655
|
|
|
4655
|
-
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$
|
|
4656
|
+
var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$3, _templateObject9$2;
|
|
4656
4657
|
var LENGTH_LARGE_TEXT = 28;
|
|
4657
4658
|
var LENGTH_SMALL_TEXT = 19;
|
|
4658
4659
|
var LENGTH_TEXT_TABLET = 10;
|
|
@@ -4668,7 +4669,7 @@ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templat
|
|
|
4668
4669
|
});
|
|
4669
4670
|
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
4670
4671
|
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
4671
|
-
var TextContainer = /*#__PURE__*/styled.div(_templateObject7$
|
|
4672
|
+
var TextContainer = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
4672
4673
|
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
4673
4674
|
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n opacity: 0;\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref3) {
|
|
4674
4675
|
var size = _ref3.size,
|
|
@@ -4909,7 +4910,7 @@ var Editorial = function Editorial(_ref) {
|
|
|
4909
4910
|
})))));
|
|
4910
4911
|
};
|
|
4911
4912
|
|
|
4912
|
-
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$
|
|
4913
|
+
var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$5;
|
|
4913
4914
|
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
4914
4915
|
var theme = _ref.theme;
|
|
4915
4916
|
return theme.colors.primary;
|
|
@@ -4919,7 +4920,7 @@ var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObj
|
|
|
4919
4920
|
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), devices.mobile);
|
|
4920
4921
|
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
4921
4922
|
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
4922
|
-
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$
|
|
4923
|
+
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
4923
4924
|
|
|
4924
4925
|
var _excluded$d = ["text"];
|
|
4925
4926
|
|
|
@@ -4990,7 +4991,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4990
4991
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
4991
4992
|
};
|
|
4992
4993
|
|
|
4993
|
-
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$
|
|
4994
|
+
var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$6;
|
|
4994
4995
|
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
4995
4996
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4996
4997
|
return bgUrlDesktop;
|
|
@@ -5004,7 +5005,7 @@ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObj
|
|
|
5004
5005
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
5005
5006
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5006
5007
|
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
5007
|
-
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
5008
|
+
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
5008
5009
|
|
|
5009
5010
|
var _excluded$g = ["text"];
|
|
5010
5011
|
|
|
@@ -5066,11 +5067,23 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
5066
5067
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
|
|
5067
5068
|
};
|
|
5068
5069
|
|
|
5069
|
-
var _templateObject$J, _templateObject2$s, _templateObject3$l
|
|
5070
|
+
var _templateObject$J, _templateObject2$s, _templateObject3$l;
|
|
5070
5071
|
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
|
|
5071
5072
|
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
5072
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n
|
|
5073
|
-
|
|
5073
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
5074
|
+
|
|
5075
|
+
var Person = function Person(_ref) {
|
|
5076
|
+
var person = _ref.person,
|
|
5077
|
+
withSeparator = _ref.withSeparator;
|
|
5078
|
+
var link = person.link,
|
|
5079
|
+
name = person.name,
|
|
5080
|
+
_person$separator = person.separator,
|
|
5081
|
+
separator = _person$separator === void 0 ? ', ' : _person$separator;
|
|
5082
|
+
var personSeparator = withSeparator ? separator : '';
|
|
5083
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, link ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PersonLink, {
|
|
5084
|
+
href: link
|
|
5085
|
+
}, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
|
|
5086
|
+
};
|
|
5074
5087
|
|
|
5075
5088
|
var PeopleListing = function PeopleListing(_ref) {
|
|
5076
5089
|
var roles = _ref.roles;
|
|
@@ -5090,17 +5103,16 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
5090
5103
|
level: 1,
|
|
5091
5104
|
tag: "p"
|
|
5092
5105
|
}, role.people.map(function (person, personIndex) {
|
|
5093
|
-
return
|
|
5106
|
+
return /*#__PURE__*/React__default.createElement(Person, {
|
|
5094
5107
|
key: "" + person.name + personIndex,
|
|
5095
|
-
|
|
5096
|
-
|
|
5097
|
-
|
|
5098
|
-
}, person.name);
|
|
5108
|
+
person: person,
|
|
5109
|
+
withSeparator: role.people.length !== personIndex + 1
|
|
5110
|
+
});
|
|
5099
5111
|
})));
|
|
5100
5112
|
}));
|
|
5101
5113
|
};
|
|
5102
5114
|
|
|
5103
|
-
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$
|
|
5115
|
+
var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$7;
|
|
5104
5116
|
var LENGTH_TEXT = 28;
|
|
5105
5117
|
var LENGTH_TEXT_TABLET$1 = 10;
|
|
5106
5118
|
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
@@ -5118,7 +5130,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$m ||
|
|
|
5118
5130
|
var imageToLeft = _ref4.imageToLeft;
|
|
5119
5131
|
return imageToLeft ? 'right' : 'left';
|
|
5120
5132
|
}, devices.mobile);
|
|
5121
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
5133
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 32px 0;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n & {\n margin: 0 0 24px 0;\n }\n }\n"])), devices.mobile);
|
|
5122
5134
|
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$c || (_templateObject5$c = /*#__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"])));
|
|
5123
5135
|
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
5124
5136
|
var theme = _ref5.theme;
|
|
@@ -5130,7 +5142,7 @@ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templat
|
|
|
5130
5142
|
var theme = _ref7.theme;
|
|
5131
5143
|
return theme.colors.primary;
|
|
5132
5144
|
});
|
|
5133
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$
|
|
5145
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref8) {
|
|
5134
5146
|
var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
|
|
5135
5147
|
primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
|
|
5136
5148
|
_ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
|
|
@@ -6204,5 +6216,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$O || (_templat
|
|
|
6204
6216
|
return theme.spacing[6];
|
|
6205
6217
|
}, devices.desktop, devices.largeDesktop);
|
|
6206
6218
|
|
|
6207
|
-
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6219
|
+
export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
|
|
6208
6220
|
//# sourceMappingURL=chord.esm.js.map
|