@royaloperahouse/chord 2.3.2 → 2.3.3-a-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 +213 -7
- package/README.md +250 -40
- package/dist/chord.cjs.development.js +714 -451
- 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 +714 -453
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Grid/GridItemLegacy.d.ts +8 -0
- package/dist/components/atoms/Grid/index.d.ts +2 -1
- package/dist/components/atoms/TextField/TextFieldLegacy.d.ts +10 -0
- package/dist/components/atoms/TextField/TextFieldLegacy.style.d.ts +5 -0
- package/dist/components/atoms/TextField/index.d.ts +2 -1
- package/dist/components/atoms/Typography/Typography.d.ts +1 -1
- package/dist/components/atoms/index.d.ts +3 -3
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/PageHeading/index.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
- package/dist/components/molecules/PromoWithTitle/PromoChild.d.ts +2 -2
- package/dist/components/molecules/SectionTitle/SectionTitle.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -1
- package/dist/helpers/generateDomElementId.d.ts +8 -0
- package/dist/index.d.ts +3 -2
- package/dist/types/editorial.d.ts +18 -2
- package/dist/types/formTypes.d.ts +12 -9
- package/dist/types/impactHeader.d.ts +13 -0
- package/dist/types/types.d.ts +10 -1
- package/package.json +1 -1
- package/README.GIT +0 -277
package/dist/chord.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, cloneElement } from 'react';
|
|
1
|
+
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
@@ -120,20 +120,100 @@ var BadgeWrapper = /*#__PURE__*/styled.svg(_templateObject || (_templateObject =
|
|
|
120
120
|
|
|
121
121
|
var StreamBadge = function StreamBadge(_ref) {
|
|
122
122
|
var _ref$fillColor = _ref.fillColor,
|
|
123
|
-
fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor
|
|
123
|
+
fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor,
|
|
124
|
+
_ref$align = _ref.align,
|
|
125
|
+
align = _ref$align === void 0 ? 'center' : _ref$align;
|
|
124
126
|
return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
|
|
125
127
|
fillColor: fillColor,
|
|
126
128
|
width: "100%",
|
|
127
129
|
height: "100%",
|
|
128
|
-
viewBox: "
|
|
129
|
-
fill: "none",
|
|
130
|
+
viewBox: "110 450 865 200",
|
|
130
131
|
xmlns: "http://www.w3.org/2000/svg"
|
|
131
132
|
}, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
|
|
132
|
-
d: "
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
d: "
|
|
136
|
-
|
|
133
|
+
d: "M416.81,485.21c0-9.38-6.6-14.94-18.59-14.94h-23.1v60.79h22.84c13.2,0,20.58-7.12,20.58-17.97,0-7.3-4.86-13.11-13.46-14.07,7.9-1.13,11.73-7.47,11.73-13.8ZM389.28,481.3h5.47c5.47,0,7.64,2.69,7.64,6.51s-2.17,6.51-7.73,6.51h-5.38v-13.03ZM395.79,519.59h-6.51v-14.59h6.42c4.95,0,8.43,2.69,8.43,7.29s-3.39,7.29-8.34,7.29Z",
|
|
134
|
+
"stroke-width": "0"
|
|
135
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
136
|
+
d: "M435.74,518.9h19.19l3.73,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM445.29,487.55l5.82,18.85h-11.64l5.82-18.85Z",
|
|
137
|
+
"stroke-width": "0"
|
|
138
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
139
|
+
d: "M774.06,500.66c0-18.15-13.89-31.7-32.56-31.7s-32.56,13.54-32.56,31.7,13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7ZM723.44,500.66c0-10.59,7.81-18.58,18.06-18.58s18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58-18.06-7.99-18.06-18.58Z",
|
|
140
|
+
"stroke-width": "0"
|
|
141
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
142
|
+
points: "511.38 470.27 511.38 531.06 542.64 531.06 542.64 518.38 525.53 518.38 525.53 470.27 511.38 470.27",
|
|
143
|
+
"stroke-width": "0"
|
|
144
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
145
|
+
points: "610.2 531.06 610.2 482.95 623.83 482.95 623.83 470.27 582.41 470.27 582.41 482.95 596.04 482.95 596.04 531.06 610.2 531.06",
|
|
146
|
+
"stroke-width": "0"
|
|
147
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
148
|
+
points: "578.59 482.95 578.59 470.27 546.46 470.27 546.46 531.06 578.59 531.06 578.59 518.38 560.61 518.38 560.61 506.74 575.03 506.74 575.03 494.06 560.61 494.06 560.61 482.95 578.59 482.95",
|
|
149
|
+
"stroke-width": "0"
|
|
150
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
151
|
+
points: "475.86 470.27 475.86 531.06 507.12 531.06 507.12 518.38 490.01 518.38 490.01 470.27 475.86 470.27",
|
|
152
|
+
"stroke-width": "0"
|
|
153
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
154
|
+
points: "324.76 470.27 324.76 531.06 356.02 531.06 356.02 518.38 338.92 518.38 338.92 470.27 324.76 470.27",
|
|
155
|
+
"stroke-width": "0"
|
|
156
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
157
|
+
d: "M800.98,508.48c12.33,0,20.58-7.99,20.58-19.11s-8.25-19.1-20.58-19.1h-23.19v60.79h14.16v-22.58h9.03ZM791.95,481.91h6.42c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56h-6.42v-15.02Z",
|
|
158
|
+
"stroke-width": "0"
|
|
159
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
160
|
+
d: "M923.95,470.27l-19.45,57.31-11.03-20.75c7.12-2.95,11.46-9.38,11.46-17.45,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.58h3.56l11.55,22.58h27.62l3.73-12.16h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85ZM881.74,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56ZM925.51,506.39l5.82-18.85,5.82,18.85h-11.64Z",
|
|
161
|
+
"stroke-width": "0"
|
|
162
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
163
|
+
d: "M636.25,511c0,12.24,9.38,21.36,22.49,21.36,7.21,0,13.2-2.78,18.24-7.38l4.86,6.08h17.8l-13.37-16.59,9.81-14.33-10.85-7.47-7.64,11.12-16.85-20.84h18.93v-12.68h-36.64v12.68l6.68,8.25c-8.94,4.34-13.46,11.46-13.46,19.8ZM657.61,501.01l11.29,14.07c-2.26,2.34-5.21,4.17-9.03,4.17-5.64,0-9.21-4-9.21-8.77,0-4.26,2.87-7.81,6.95-9.46Z",
|
|
164
|
+
"stroke-width": "0"
|
|
165
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
166
|
+
d: "M176.87,529.41c-9.38-5.9-17.02-14.16-22.06-23.01,6.6-3.04,10.6-9.29,10.6-17.02,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.84h5.13c6.16,12.68,16.06,24.49,27.87,31.78h0l8.08-10.59ZM142.23,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56Z",
|
|
167
|
+
"stroke-width": "0"
|
|
168
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
169
|
+
d: "M284.56,518.9h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM294.11,487.55l5.82,18.85h-11.64l5.82-18.85Z",
|
|
170
|
+
"stroke-width": "0"
|
|
171
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
172
|
+
d: "M201.1,468.97c-18.58,0-32.56,13.54-32.56,31.7s13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7-13.89-31.7-32.56-31.7ZM201.1,519.25c-10.25,0-18.06-7.99-18.06-18.58s7.81-18.58,18.06-18.58,18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58Z",
|
|
173
|
+
"stroke-width": "0"
|
|
174
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
175
|
+
points: "254.42 490.41 242.44 470.27 226.37 470.27 247.3 504.92 247.3 531.06 261.46 531.06 261.46 504.74 282.3 470.27 266.32 470.27 254.42 490.41",
|
|
176
|
+
"stroke-width": "0"
|
|
177
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
178
|
+
points: "857.34 482.95 857.34 470.27 825.21 470.27 825.21 531.06 857.34 531.06 857.34 518.38 839.36 518.38 839.36 506.74 853.78 506.74 853.78 494.06 839.36 494.06 839.36 482.95 857.34 482.95",
|
|
179
|
+
"stroke-width": "0"
|
|
180
|
+
})), align === 'left' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
|
|
181
|
+
d: "M151.07,588.98c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
|
|
182
|
+
"stroke-width": "0"
|
|
183
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
184
|
+
d: "M184,630.37v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
|
|
185
|
+
"stroke-width": "0"
|
|
186
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
187
|
+
d: "M249.5,630.37c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM239.09,596.99c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
|
|
188
|
+
"stroke-width": "0"
|
|
189
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
190
|
+
d: "M271.93,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
|
|
191
|
+
"stroke-width": "0"
|
|
192
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
193
|
+
d: "M353.01,630.37l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM338.5,584.53c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
|
|
194
|
+
"stroke-width": "0"
|
|
195
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
196
|
+
d: "M416.55,630.37v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
|
|
197
|
+
"stroke-width": "0"
|
|
198
|
+
})), align === 'center' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
|
|
199
|
+
d: "M401.56,585.29c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
|
|
200
|
+
"stroke-width": "0"
|
|
201
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
202
|
+
d: "M434.49,626.68v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
|
|
203
|
+
"stroke-width": "0"
|
|
204
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
205
|
+
d: "M500,626.68c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM489.58,593.3c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
|
|
206
|
+
"stroke-width": "0"
|
|
207
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
208
|
+
d: "M522.42,626.68v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
|
|
209
|
+
"stroke-width": "0"
|
|
210
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
211
|
+
d: "M603.5,626.68l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM588.99,580.84c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
|
|
212
|
+
"stroke-width": "0"
|
|
213
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
214
|
+
d: "M667.05,626.68v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
|
|
215
|
+
"stroke-width": "0"
|
|
216
|
+
})));
|
|
137
217
|
};
|
|
138
218
|
|
|
139
219
|
var CinemaBadge = function CinemaBadge(_ref) {
|
|
@@ -2628,7 +2708,39 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
|
|
|
2628
2708
|
});
|
|
2629
2709
|
|
|
2630
2710
|
var _templateObject$b;
|
|
2631
|
-
|
|
2711
|
+
/**
|
|
2712
|
+
* # IMPORTANT
|
|
2713
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
2714
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
2715
|
+
*/
|
|
2716
|
+
|
|
2717
|
+
var GridItemLegacy = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", " / span\n ", ";\n\n @media ", " {\n & {\n grid-column: ", " /\n span ", ";\n }\n }\n\n @media ", " {\n & {\n grid-column: ", " / span\n ", ";\n }\n }\n"])), function (_ref) {
|
|
2718
|
+
var columnStartDesktop = _ref.columnStartDesktop;
|
|
2719
|
+
return columnStartDesktop;
|
|
2720
|
+
}, function (_ref2) {
|
|
2721
|
+
var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
|
|
2722
|
+
columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
|
|
2723
|
+
return columnSpanDesktop;
|
|
2724
|
+
}, devices.mobile, function (_ref3) {
|
|
2725
|
+
var columnStartDevice = _ref3.columnStartDevice,
|
|
2726
|
+
columnStartSmallDevice = _ref3.columnStartSmallDevice;
|
|
2727
|
+
return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
|
|
2728
|
+
}, function (_ref4) {
|
|
2729
|
+
var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
|
|
2730
|
+
columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
|
|
2731
|
+
columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
|
|
2732
|
+
return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
|
|
2733
|
+
}, devices.tablet, function (_ref5) {
|
|
2734
|
+
var columnStartDevice = _ref5.columnStartDevice;
|
|
2735
|
+
return columnStartDevice;
|
|
2736
|
+
}, function (_ref6) {
|
|
2737
|
+
var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
|
|
2738
|
+
columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
|
|
2739
|
+
return columnSpanDevice;
|
|
2740
|
+
});
|
|
2741
|
+
|
|
2742
|
+
var _templateObject$c;
|
|
2743
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
2632
2744
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2633
2745
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2634
2746
|
return aspectRatio;
|
|
@@ -2646,8 +2758,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
|
|
|
2646
2758
|
return aspectRatio;
|
|
2647
2759
|
});
|
|
2648
2760
|
|
|
2649
|
-
var _templateObject$
|
|
2650
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
2761
|
+
var _templateObject$d, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
2762
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
2651
2763
|
var height = _ref.height;
|
|
2652
2764
|
return height ? height + "px" : '6px';
|
|
2653
2765
|
});
|
|
@@ -2730,13 +2842,13 @@ var Progress = function Progress(_ref) {
|
|
|
2730
2842
|
}, renderSteps()));
|
|
2731
2843
|
};
|
|
2732
2844
|
|
|
2733
|
-
var _templateObject$
|
|
2734
|
-
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2845
|
+
var _templateObject$e, _templateObject2$4, _templateObject3$3;
|
|
2846
|
+
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
2735
2847
|
var RadioLine = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 20px;\n grid-template-columns: 1.15em 1fr;\n user-select: none;\n cursor: pointer;\n color: black;\n\n &:focus {\n outline: none;\n }\n\n input[type='radio'] {\n cursor: pointer;\n appearance: none;\n background-color: #ffffff00;\n margin: 0;\n color: black;\n width: 20px;\n height: 20px;\n border: 1px solid black;\n border-radius: 50%;\n position: relative;\n place-content: center;\n display: block;\n }\n\n input[type='radio']::before {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ffffff00;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n input[type='radio']:checked::before {\n background-color: black;\n }\n"])));
|
|
2736
2848
|
var RadioError = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
2737
2849
|
|
|
2738
|
-
var _templateObject$
|
|
2739
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
2850
|
+
var _templateObject$f;
|
|
2851
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__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 margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
2740
2852
|
var typography = _ref.typography;
|
|
2741
2853
|
return typography;
|
|
2742
2854
|
}, function (_ref2) {
|
|
@@ -2792,9 +2904,10 @@ var StyledTag = function StyledTag(_ref) {
|
|
|
2792
2904
|
}, children);
|
|
2793
2905
|
};
|
|
2794
2906
|
var AltHeader = function AltHeader(_ref2) {
|
|
2795
|
-
var
|
|
2907
|
+
var semanticLevel = _ref2.semanticLevel,
|
|
2908
|
+
level = _ref2.level,
|
|
2796
2909
|
children = _ref2.children;
|
|
2797
|
-
var renderedTag = "h" + level;
|
|
2910
|
+
var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
|
|
2798
2911
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
2799
2912
|
tag: renderedTag,
|
|
2800
2913
|
typography: "altHeader",
|
|
@@ -2892,8 +3005,8 @@ var Radio = function Radio(_ref) {
|
|
|
2892
3005
|
}, error)));
|
|
2893
3006
|
};
|
|
2894
3007
|
|
|
2895
|
-
var _templateObject$
|
|
2896
|
-
var Container = /*#__PURE__*/styled.div(_templateObject$
|
|
3008
|
+
var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3009
|
+
var Container = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
2897
3010
|
var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
2898
3011
|
var error = _ref.error,
|
|
2899
3012
|
darkMode = _ref.darkMode,
|
|
@@ -3001,8 +3114,8 @@ var Radio2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3001
3114
|
}, error)));
|
|
3002
3115
|
});
|
|
3003
3116
|
|
|
3004
|
-
var _templateObject$
|
|
3005
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3117
|
+
var _templateObject$h, _templateObject2$6, _templateObject3$5;
|
|
3118
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3006
3119
|
var IconWrapper$1 = /*#__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) {
|
|
3007
3120
|
var theme = _ref.theme;
|
|
3008
3121
|
return theme.colors.primary;
|
|
@@ -3073,8 +3186,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3073
3186
|
}, renderNextIcon()));
|
|
3074
3187
|
};
|
|
3075
3188
|
|
|
3076
|
-
var _templateObject$
|
|
3077
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$
|
|
3189
|
+
var _templateObject$i;
|
|
3190
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3078
3191
|
var fillColor = _ref.fillColor;
|
|
3079
3192
|
return fillColor;
|
|
3080
3193
|
});
|
|
@@ -3098,8 +3211,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3098
3211
|
})));
|
|
3099
3212
|
};
|
|
3100
3213
|
|
|
3101
|
-
var _templateObject$
|
|
3102
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
3214
|
+
var _templateObject$j, _templateObject2$7;
|
|
3215
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3103
3216
|
var Splitter = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
3104
3217
|
|
|
3105
3218
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3118,8 +3231,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3118
3231
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3119
3232
|
};
|
|
3120
3233
|
|
|
3121
|
-
var _templateObject$
|
|
3122
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3234
|
+
var _templateObject$k;
|
|
3235
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3123
3236
|
|
|
3124
3237
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3125
3238
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3329,8 +3442,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3329
3442
|
})))));
|
|
3330
3443
|
};
|
|
3331
3444
|
|
|
3332
|
-
var _templateObject$
|
|
3333
|
-
var CustomImage = /*#__PURE__*/styled.img(_templateObject$
|
|
3445
|
+
var _templateObject$l, _templateObject2$8;
|
|
3446
|
+
var CustomImage = /*#__PURE__*/styled.img(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
|
|
3334
3447
|
var SponsorshipStyledIframe = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
|
|
3335
3448
|
|
|
3336
3449
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3363,8 +3476,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3363
3476
|
}));
|
|
3364
3477
|
};
|
|
3365
3478
|
|
|
3366
|
-
var _templateObject$
|
|
3367
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
3479
|
+
var _templateObject$m, _templateObject2$9;
|
|
3480
|
+
var TabText = /*#__PURE__*/styled.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
|
|
3368
3481
|
if (props.withIcon === 'left') {
|
|
3369
3482
|
return "margin-left: 5px;";
|
|
3370
3483
|
}
|
|
@@ -3463,8 +3576,8 @@ var Tab = function Tab(_ref) {
|
|
|
3463
3576
|
}));
|
|
3464
3577
|
};
|
|
3465
3578
|
|
|
3466
|
-
var _templateObject$
|
|
3467
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3579
|
+
var _templateObject$n, _templateObject2$a;
|
|
3580
|
+
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3468
3581
|
var iconName = _ref.iconName;
|
|
3469
3582
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3470
3583
|
}, function (_ref2) {
|
|
@@ -3515,8 +3628,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3515
3628
|
})) : null, children);
|
|
3516
3629
|
};
|
|
3517
3630
|
|
|
3518
|
-
var _templateObject$
|
|
3519
|
-
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3631
|
+
var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3632
|
+
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3520
3633
|
var width = _ref.width;
|
|
3521
3634
|
return width ? width + "px;" : '100%;';
|
|
3522
3635
|
}, function (_ref2) {
|
|
@@ -3639,8 +3752,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
3639
3752
|
}, error))));
|
|
3640
3753
|
};
|
|
3641
3754
|
|
|
3642
|
-
var _templateObject$
|
|
3643
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
3755
|
+
var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
3756
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3644
3757
|
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
3645
3758
|
var width = _ref.width;
|
|
3646
3759
|
if (!width) return 'none';
|
|
@@ -3766,15 +3879,89 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3766
3879
|
}, error)));
|
|
3767
3880
|
});
|
|
3768
3881
|
|
|
3769
|
-
var _templateObject$
|
|
3770
|
-
var
|
|
3882
|
+
var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
3883
|
+
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3884
|
+
var textStyles = /*#__PURE__*/css(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
3885
|
+
var theme = _ref.theme;
|
|
3886
|
+
return theme.fonts.desktop.weights.body[1];
|
|
3887
|
+
}, function (_ref2) {
|
|
3888
|
+
var theme = _ref2.theme;
|
|
3889
|
+
return theme.fonts.desktop.sizes.altHeaders[6];
|
|
3890
|
+
}, function (_ref3) {
|
|
3891
|
+
var theme = _ref3.theme;
|
|
3892
|
+
return theme.spacing[7];
|
|
3893
|
+
});
|
|
3894
|
+
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
3895
|
+
var width = _ref4.width;
|
|
3896
|
+
return width ? width + 'px' : '196px';
|
|
3897
|
+
}, function (_ref5) {
|
|
3898
|
+
var theme = _ref5.theme;
|
|
3899
|
+
return theme.colors.darkgrey;
|
|
3900
|
+
}, function (_ref6) {
|
|
3901
|
+
var error = _ref6.error,
|
|
3902
|
+
theme = _ref6.theme;
|
|
3903
|
+
if (!error) return;
|
|
3904
|
+
return "\n border: 1px solid " + theme.colors.error + ";\n ";
|
|
3905
|
+
}, function (_ref7) {
|
|
3906
|
+
var theme = _ref7.theme;
|
|
3907
|
+
return theme.colors.lightgrey;
|
|
3908
|
+
}, function (_ref8) {
|
|
3909
|
+
var darkMode = _ref8.darkMode,
|
|
3910
|
+
theme = _ref8.theme;
|
|
3911
|
+
if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
|
|
3912
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
3913
|
+
});
|
|
3914
|
+
var TextLabel$2 = /*#__PURE__*/styled.p(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref9) {
|
|
3915
|
+
var darkMode = _ref9.darkMode,
|
|
3916
|
+
theme = _ref9.theme;
|
|
3917
|
+
return darkMode ? theme.colors.white : theme.colors.black;
|
|
3918
|
+
});
|
|
3919
|
+
var ErrorLabel$2 = /*#__PURE__*/styled.p(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref10) {
|
|
3920
|
+
var darkMode = _ref10.darkMode,
|
|
3921
|
+
theme = _ref10.theme;
|
|
3922
|
+
return darkMode ? theme.colors.white : theme.colors.error;
|
|
3923
|
+
});
|
|
3924
|
+
|
|
3925
|
+
/**
|
|
3926
|
+
* @deprecated
|
|
3927
|
+
*
|
|
3928
|
+
* # IMPORTANT
|
|
3929
|
+
* Please use the `<TextField />` component instead of this component if possible.
|
|
3930
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3931
|
+
* */
|
|
3932
|
+
|
|
3933
|
+
var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
3934
|
+
var label = _ref.label,
|
|
3935
|
+
error = _ref.error,
|
|
3936
|
+
_ref$darkMode = _ref.darkMode,
|
|
3937
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3938
|
+
width = _ref.width,
|
|
3939
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width"]);
|
|
3940
|
+
|
|
3941
|
+
return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel$2, {
|
|
3942
|
+
darkMode: darkMode,
|
|
3943
|
+
"data-testid": "text-field-text-label"
|
|
3944
|
+
}, label), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
|
|
3945
|
+
type: "text",
|
|
3946
|
+
error: error,
|
|
3947
|
+
darkMode: darkMode,
|
|
3948
|
+
"data-testid": "text-field-input",
|
|
3949
|
+
width: width
|
|
3950
|
+
}, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
|
|
3951
|
+
darkMode: darkMode,
|
|
3952
|
+
"data-testid": "text-field-error-label"
|
|
3953
|
+
}, error) : null);
|
|
3954
|
+
};
|
|
3955
|
+
|
|
3956
|
+
var _templateObject$r, _templateObject2$e;
|
|
3957
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$r || (_templateObject$r = /*#__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) {
|
|
3771
3958
|
var iconName = _ref.iconName;
|
|
3772
3959
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3773
3960
|
}, function (_ref2) {
|
|
3774
3961
|
var color = _ref2.color;
|
|
3775
3962
|
return color;
|
|
3776
3963
|
});
|
|
3777
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
3964
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3778
3965
|
|
|
3779
3966
|
var TextLink = function TextLink(_ref) {
|
|
3780
3967
|
var children = _ref.children,
|
|
@@ -3796,20 +3983,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3796
3983
|
})) : null);
|
|
3797
3984
|
};
|
|
3798
3985
|
|
|
3799
|
-
var _templateObject$
|
|
3800
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3986
|
+
var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
|
|
3987
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 10px;\n margin-top: 140px;\n display: grid;\n grid-template-columns: repeat(2, auto);\n font-family: var(--font-family-header);\n font-size: ", ";\n color: ", ";\n width: auto;\n margin: auto;\n"])), function (_ref) {
|
|
3801
3988
|
var fontSize = _ref.fontSize;
|
|
3802
3989
|
return fontSize + 'px';
|
|
3803
3990
|
}, function (_ref2) {
|
|
3804
3991
|
var color = _ref2.color;
|
|
3805
3992
|
return color;
|
|
3806
3993
|
});
|
|
3807
|
-
var LogoRightSide = /*#__PURE__*/styled.div(_templateObject2$
|
|
3808
|
-
var LogoLeftSide = /*#__PURE__*/styled.div(_templateObject3$
|
|
3994
|
+
var LogoRightSide = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-left: 10px;\n font-weight: 500;\n letter-spacing: 1px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
|
|
3995
|
+
var LogoLeftSide = /*#__PURE__*/styled.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-right: 1px solid ", ";\n padding-right: 10px;\n letter-spacing: 2px;\n display: flex;\n flex-direction: column;\n"])), function (_ref3) {
|
|
3809
3996
|
var color = _ref3.color;
|
|
3810
3997
|
return color;
|
|
3811
3998
|
});
|
|
3812
|
-
var LogoLeftSideRow = /*#__PURE__*/styled.div(_templateObject4$
|
|
3999
|
+
var LogoLeftSideRow = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
|
|
3813
4000
|
|
|
3814
4001
|
var TextLogoProduct;
|
|
3815
4002
|
|
|
@@ -3831,12 +4018,12 @@ var Logo = function Logo(_ref) {
|
|
|
3831
4018
|
}, /*#__PURE__*/createElement(LogoLeftSideRow, null, "ROYAL"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "OPERA"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "HOUSE")), /*#__PURE__*/createElement(LogoRightSide, null, productName));
|
|
3832
4019
|
};
|
|
3833
4020
|
|
|
3834
|
-
var _templateObject$
|
|
3835
|
-
var TickboxError = /*#__PURE__*/styled.div(_templateObject$
|
|
4021
|
+
var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7;
|
|
4022
|
+
var TickboxError = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
3836
4023
|
var dark = _ref.dark;
|
|
3837
4024
|
return dark ? 'white' : 'errorstate';
|
|
3838
4025
|
});
|
|
3839
|
-
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$
|
|
4026
|
+
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
3840
4027
|
var dark = _ref2.dark,
|
|
3841
4028
|
disabled = _ref2.disabled;
|
|
3842
4029
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3845,7 +4032,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$f || (_templateO
|
|
|
3845
4032
|
var disabled = _ref3.disabled;
|
|
3846
4033
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3847
4034
|
}, devices.mobileAndTablet);
|
|
3848
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$
|
|
4035
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
3849
4036
|
var dark = _ref4.dark,
|
|
3850
4037
|
disabled = _ref4.disabled,
|
|
3851
4038
|
error = _ref4.error;
|
|
@@ -3861,7 +4048,7 @@ var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$9 || (_template
|
|
|
3861
4048
|
dark = _ref6.dark;
|
|
3862
4049
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3863
4050
|
}, devices.mobile);
|
|
3864
|
-
var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$
|
|
4051
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(\n --base-color-", "\n );\n & svg {\n display: block;\n path {\n fill: var(\n --base-color-", "\n );\n }\n }\n }\n"])), TickboxCheckmark, function (_ref7) {
|
|
3865
4052
|
var dark = _ref7.dark,
|
|
3866
4053
|
whiteBox = _ref7.whiteBox,
|
|
3867
4054
|
disabled = _ref7.disabled;
|
|
@@ -3953,9 +4140,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3953
4140
|
}, error)));
|
|
3954
4141
|
};
|
|
3955
4142
|
|
|
3956
|
-
var _templateObject$
|
|
3957
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
3958
|
-
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
4143
|
+
var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2;
|
|
4144
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4145
|
+
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3959
4146
|
var error = _ref.error,
|
|
3960
4147
|
darkMode = _ref.darkMode,
|
|
3961
4148
|
disabled = _ref.disabled;
|
|
@@ -3978,7 +4165,7 @@ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$
|
|
|
3978
4165
|
if (blackBox) return 'var(--base-color-white)';
|
|
3979
4166
|
return ' var(--base-color-black)';
|
|
3980
4167
|
});
|
|
3981
|
-
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$
|
|
4168
|
+
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
3982
4169
|
var blackBox = _ref4.blackBox,
|
|
3983
4170
|
darkMode = _ref4.darkMode;
|
|
3984
4171
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -3989,8 +4176,8 @@ var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$a || (_templateO
|
|
|
3989
4176
|
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3990
4177
|
return '3px solid var(--base-color-lapislazuli)';
|
|
3991
4178
|
});
|
|
3992
|
-
var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$
|
|
3993
|
-
var TextLabel$
|
|
4179
|
+
var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n svg {\n font-size: 12px;\n width: 1em;\n height: 1em;\n fill: currentColor;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n input[type='checkbox']:checked + ", " & {\n display: block;\n }\n"])), Tickbox$1);
|
|
4180
|
+
var TextLabel$3 = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3994
4181
|
var darkMode = _ref6.darkMode,
|
|
3995
4182
|
disabled = _ref6.disabled;
|
|
3996
4183
|
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
@@ -3998,7 +4185,7 @@ var TextLabel$2 = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject
|
|
|
3998
4185
|
if (disabled) return 'var(--base-color-darkgrey)';
|
|
3999
4186
|
return 'var(--base-color-black)';
|
|
4000
4187
|
});
|
|
4001
|
-
var ErrorLabel$
|
|
4188
|
+
var ErrorLabel$3 = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
4002
4189
|
var darkMode = _ref7.darkMode;
|
|
4003
4190
|
if (darkMode) return 'var(--base-color-white)';
|
|
4004
4191
|
return 'var(--base-color-errorstate)';
|
|
@@ -4050,13 +4237,13 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4050
4237
|
blackBox: blackBox
|
|
4051
4238
|
}, /*#__PURE__*/React__default.createElement(TickboxIcon, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4052
4239
|
iconName: "Tick"
|
|
4053
|
-
}))), /*#__PURE__*/React__default.createElement(TextLabel$
|
|
4240
|
+
}))), /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
4054
4241
|
disabled: disabled,
|
|
4055
4242
|
darkMode: darkMode,
|
|
4056
4243
|
"data-testid": "tickbox-content"
|
|
4057
4244
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4058
4245
|
level: 1
|
|
4059
|
-
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
4246
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
4060
4247
|
darkMode: darkMode,
|
|
4061
4248
|
"data-testid": "tickbox-error-label"
|
|
4062
4249
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -4064,18 +4251,18 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4064
4251
|
}, error)));
|
|
4065
4252
|
});
|
|
4066
4253
|
|
|
4067
|
-
var _templateObject$
|
|
4068
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4254
|
+
var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4255
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4069
4256
|
var color = _ref.color;
|
|
4070
4257
|
return color;
|
|
4071
4258
|
});
|
|
4072
|
-
var Line = /*#__PURE__*/styled.div(_templateObject2$
|
|
4259
|
+
var Line = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4073
4260
|
var color = _ref2.color;
|
|
4074
4261
|
return color;
|
|
4075
4262
|
}, devices.mobileAndTablet);
|
|
4076
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4077
|
-
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4078
|
-
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$
|
|
4263
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4264
|
+
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n display: flex;\n\n @media ", " {\n font-size: var(--font-size-header-5);\n }\n"])), devices.tablet);
|
|
4265
|
+
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n margin-top: 4px;\n"])));
|
|
4079
4266
|
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
4080
4267
|
var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4081
4268
|
var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -4173,8 +4360,8 @@ var Timer = function Timer(_ref) {
|
|
|
4173
4360
|
}));
|
|
4174
4361
|
};
|
|
4175
4362
|
|
|
4176
|
-
var _templateObject$
|
|
4177
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
4363
|
+
var _templateObject$w;
|
|
4364
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
|
|
4178
4365
|
|
|
4179
4366
|
var TypeTags = function TypeTags(_ref) {
|
|
4180
4367
|
var list = _ref.list;
|
|
@@ -4916,12 +5103,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
4916
5103
|
}
|
|
4917
5104
|
});
|
|
4918
5105
|
|
|
4919
|
-
var _templateObject$
|
|
4920
|
-
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$
|
|
4921
|
-
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
4922
|
-
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4923
|
-
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4924
|
-
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
5106
|
+
var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5107
|
+
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
5108
|
+
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
5109
|
+
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5110
|
+
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
5111
|
+
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4925
5112
|
var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
4926
5113
|
var VideoMute = /*#__PURE__*/styled.button(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 17px;\n height: 17px;\n background: none;\n border: none;\n padding: 0;\n svg {\n width: 100%;\n height: 100%;\n }\n cursor: pointer;\n"])));
|
|
4927
5114
|
var thumbStyles = /*#__PURE__*/css(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n -webkit-appearance: none;\n appearance: none;\n border: none;\n height: 8px;\n width: 8px;\n border-radius: 50%;\n background: #ffffff;\n border: none;\n transform: translateY(-25%);\n"])));
|
|
@@ -4990,6 +5177,16 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4990
5177
|
video.loop = loop;
|
|
4991
5178
|
}
|
|
4992
5179
|
}, [loop]);
|
|
5180
|
+
useEffect(function () {
|
|
5181
|
+
var handleFullscreenChange = function handleFullscreenChange() {
|
|
5182
|
+
setIsFullscreen(!!document.fullscreenElement);
|
|
5183
|
+
};
|
|
5184
|
+
|
|
5185
|
+
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
5186
|
+
return function () {
|
|
5187
|
+
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
5188
|
+
};
|
|
5189
|
+
}, []);
|
|
4993
5190
|
var handleFullscreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
|
|
4994
5191
|
var videoContainer;
|
|
4995
5192
|
return runtime_1.wrap(function _callee$(_context) {
|
|
@@ -5124,13 +5321,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5124
5321
|
})));
|
|
5125
5322
|
};
|
|
5126
5323
|
|
|
5127
|
-
var _templateObject$
|
|
5128
|
-
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5129
|
-
var StepperError = /*#__PURE__*/styled.div(_templateObject2$
|
|
5324
|
+
var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7;
|
|
5325
|
+
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
5326
|
+
var StepperError = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
5130
5327
|
var darkMode = _ref.darkMode;
|
|
5131
5328
|
return darkMode ? 'white' : 'errorstate';
|
|
5132
5329
|
});
|
|
5133
|
-
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$
|
|
5330
|
+
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
5134
5331
|
var darkMode = _ref2.darkMode,
|
|
5135
5332
|
disabled = _ref2.disabled,
|
|
5136
5333
|
error = _ref2.error;
|
|
@@ -5152,11 +5349,11 @@ var StepperBox = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3
|
|
|
5152
5349
|
var disabled = _ref6.disabled;
|
|
5153
5350
|
return disabled ? 'midgrey' : 'black';
|
|
5154
5351
|
});
|
|
5155
|
-
var StepperValue = /*#__PURE__*/styled.input(_templateObject4$
|
|
5352
|
+
var StepperValue = /*#__PURE__*/styled.input(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 51px;\n border: 0;\n text-align: center;\n font-family: var(--font-family-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n background-color: transparent;\n cursor: ", ";\n"])), function (_ref7) {
|
|
5156
5353
|
var disabled = _ref7.disabled;
|
|
5157
5354
|
return disabled ? 'not-allowed' : 'text';
|
|
5158
5355
|
});
|
|
5159
|
-
var StepperButton = /*#__PURE__*/styled.div(_templateObject5$
|
|
5356
|
+
var StepperButton = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n\n span {\n display: flex;\n justify-content: center;\n }\n\n svg {\n width: 40%;\n height: auto;\n }\n"])), function (_ref8) {
|
|
5160
5357
|
var disabled = _ref8.disabled;
|
|
5161
5358
|
return disabled ? 'not-allowed' : 'pointer';
|
|
5162
5359
|
});
|
|
@@ -5352,18 +5549,18 @@ var Component = function Component(_ref) {
|
|
|
5352
5549
|
}, error)));
|
|
5353
5550
|
};
|
|
5354
5551
|
|
|
5355
|
-
var _templateObject$
|
|
5356
|
-
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5552
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5553
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5357
5554
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5358
5555
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
5359
5556
|
});
|
|
5360
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5361
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
5362
|
-
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$
|
|
5557
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$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);
|
|
5558
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$f || (_templateObject3$f = /*#__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);
|
|
5559
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref2) {
|
|
5363
5560
|
var visible = _ref2.visible;
|
|
5364
5561
|
return visible ? 'visible' : 'hidden';
|
|
5365
5562
|
}, zIndexes.search, devices.mobile);
|
|
5366
|
-
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
5563
|
+
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n height: 100px;\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref3) {
|
|
5367
5564
|
var visible = _ref3.visible;
|
|
5368
5565
|
return visible ? 'visible' : 'hidden';
|
|
5369
5566
|
}, zIndexes.search, devices.mobile);
|
|
@@ -5377,8 +5574,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObjec
|
|
|
5377
5574
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5378
5575
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
5379
5576
|
|
|
5380
|
-
var _templateObject$
|
|
5381
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5577
|
+
var _templateObject$A;
|
|
5578
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
5382
5579
|
|
|
5383
5580
|
var Logo$1 = function Logo(_ref) {
|
|
5384
5581
|
var _ref$id = _ref.id,
|
|
@@ -5407,11 +5604,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
5407
5604
|
}))));
|
|
5408
5605
|
};
|
|
5409
5606
|
|
|
5410
|
-
var _templateObject$
|
|
5411
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5607
|
+
var _templateObject$B;
|
|
5608
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__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);
|
|
5412
5609
|
|
|
5413
|
-
var _templateObject$
|
|
5414
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5610
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$g, _templateObject4$d;
|
|
5611
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5415
5612
|
var selected = _ref.selected,
|
|
5416
5613
|
colorPrimary = _ref.colorPrimary;
|
|
5417
5614
|
|
|
@@ -5439,9 +5636,9 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObj
|
|
|
5439
5636
|
|
|
5440
5637
|
return '';
|
|
5441
5638
|
});
|
|
5442
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5443
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
5444
|
-
var BasketText = /*#__PURE__*/styled.a(_templateObject4$
|
|
5639
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5640
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__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"])));
|
|
5641
|
+
var BasketText = /*#__PURE__*/styled.a(_templateObject4$d || (_templateObject4$d = /*#__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"])));
|
|
5445
5642
|
|
|
5446
5643
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
5447
5644
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -5599,8 +5796,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5599
5796
|
}, expiryTime ? basketText : text) : ''));
|
|
5600
5797
|
};
|
|
5601
5798
|
|
|
5602
|
-
var _templateObject$
|
|
5603
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5799
|
+
var _templateObject$D, _templateObject2$n;
|
|
5800
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__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) {
|
|
5604
5801
|
var selected = _ref.selected,
|
|
5605
5802
|
colorPrimary = _ref.colorPrimary;
|
|
5606
5803
|
|
|
@@ -5616,7 +5813,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObj
|
|
|
5616
5813
|
var colorPrimary = _ref3.colorPrimary;
|
|
5617
5814
|
return colorPrimary;
|
|
5618
5815
|
});
|
|
5619
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
5816
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5620
5817
|
|
|
5621
5818
|
var Search$1 = function Search(_ref) {
|
|
5622
5819
|
var _ref$selected = _ref.selected,
|
|
@@ -5892,23 +6089,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
5892
6089
|
}));
|
|
5893
6090
|
};
|
|
5894
6091
|
|
|
5895
|
-
var _templateObject$
|
|
5896
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5897
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6092
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject4$e;
|
|
6093
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
6094
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5898
6095
|
if (props.showMenu) {
|
|
5899
6096
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5900
6097
|
}
|
|
5901
6098
|
|
|
5902
6099
|
return "display: none;";
|
|
5903
6100
|
});
|
|
5904
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
6101
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__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) {
|
|
5905
6102
|
var colorPrimary = _ref.colorPrimary;
|
|
5906
6103
|
return colorPrimary;
|
|
5907
6104
|
}, function (_ref2) {
|
|
5908
6105
|
var colorPrimary = _ref2.colorPrimary;
|
|
5909
6106
|
return colorPrimary;
|
|
5910
6107
|
}, devices.mobileAndTablet);
|
|
5911
|
-
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$
|
|
6108
|
+
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5912
6109
|
|
|
5913
6110
|
var Tabs = function Tabs(_ref) {
|
|
5914
6111
|
var _ref$items = _ref.items,
|
|
@@ -6035,11 +6232,11 @@ var Tabs = function Tabs(_ref) {
|
|
|
6035
6232
|
}, "MENU"))));
|
|
6036
6233
|
};
|
|
6037
6234
|
|
|
6038
|
-
var _templateObject$
|
|
6039
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6040
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
6041
|
-
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$
|
|
6042
|
-
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6235
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6236
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: var(--base-color-transparent);\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
6237
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
6238
|
+
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__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"])));
|
|
6239
|
+
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__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);
|
|
6043
6240
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6044
6241
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6045
6242
|
|
|
@@ -6273,18 +6470,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
6273
6470
|
})))));
|
|
6274
6471
|
};
|
|
6275
6472
|
|
|
6276
|
-
var _templateObject$
|
|
6277
|
-
var FooterSection = /*#__PURE__*/styled.section(_templateObject$
|
|
6278
|
-
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6279
|
-
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$
|
|
6280
|
-
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$
|
|
6281
|
-
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$
|
|
6473
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$a, _templateObject6$7;
|
|
6474
|
+
var FooterSection = /*#__PURE__*/styled.section(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
6475
|
+
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
6476
|
+
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
6477
|
+
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
6478
|
+
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
6282
6479
|
var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
6283
6480
|
|
|
6284
|
-
var _templateObject$
|
|
6285
|
-
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$
|
|
6286
|
-
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$
|
|
6287
|
-
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
6481
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$k;
|
|
6482
|
+
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
6483
|
+
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
6484
|
+
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
6288
6485
|
|
|
6289
6486
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6290
6487
|
var _ref$items = _ref.items,
|
|
@@ -6300,12 +6497,12 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6300
6497
|
}));
|
|
6301
6498
|
};
|
|
6302
6499
|
|
|
6303
|
-
var _templateObject$
|
|
6304
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6305
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
6306
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6307
|
-
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$
|
|
6308
|
-
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
6500
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6501
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6502
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
6503
|
+
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
6504
|
+
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6505
|
+
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
6309
6506
|
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6310
6507
|
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
6311
6508
|
var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &&& {\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n }\n"])));
|
|
@@ -6372,15 +6569,15 @@ var Footer = function Footer(_ref) {
|
|
|
6372
6569
|
}, additionalInfo)))));
|
|
6373
6570
|
};
|
|
6374
6571
|
|
|
6375
|
-
var _templateObject$
|
|
6572
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$9;
|
|
6376
6573
|
var LIST_ITEM_GAP = 32;
|
|
6377
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6574
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6378
6575
|
var bottomBorder = _ref.bottomBorder;
|
|
6379
6576
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6380
6577
|
}, zIndexes.anchor);
|
|
6381
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
6382
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6383
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$
|
|
6578
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6579
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6580
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
|
|
6384
6581
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
6385
6582
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6386
6583
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -6391,7 +6588,7 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject4$g || (_templateObject4$g
|
|
|
6391
6588
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6392
6589
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6393
6590
|
});
|
|
6394
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6591
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])), function (_ref5) {
|
|
6395
6592
|
var fullWidth = _ref5.fullWidth;
|
|
6396
6593
|
return fullWidth ? '74px' : '46px';
|
|
6397
6594
|
});
|
|
@@ -6638,17 +6835,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6638
6835
|
})) : null) : null))));
|
|
6639
6836
|
};
|
|
6640
6837
|
|
|
6641
|
-
var _templateObject$
|
|
6642
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6838
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6839
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6643
6840
|
var sticky = _ref.sticky;
|
|
6644
6841
|
return sticky ? 'sticky' : 'initial';
|
|
6645
6842
|
}, zIndexes.anchor);
|
|
6646
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
6647
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
6843
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6844
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
6648
6845
|
var title = _ref2.title;
|
|
6649
6846
|
return title ? 'row' : 'row-reverse';
|
|
6650
6847
|
}, devices.tablet, devices.mobile);
|
|
6651
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
6848
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
6652
6849
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
6653
6850
|
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6654
6851
|
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
@@ -6699,15 +6896,15 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6699
6896
|
}, message)));
|
|
6700
6897
|
};
|
|
6701
6898
|
|
|
6702
|
-
var _templateObject$
|
|
6703
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
6704
|
-
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
6705
|
-
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$
|
|
6899
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$o, _templateObject4$j, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6900
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
6901
|
+
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
6902
|
+
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
6706
6903
|
var theme = _ref.theme;
|
|
6707
6904
|
return theme.colors.primary;
|
|
6708
6905
|
}, Colors.White);
|
|
6709
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
6710
|
-
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
6906
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6907
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6711
6908
|
var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6712
6909
|
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
6713
6910
|
var LineThrough = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
@@ -6780,8 +6977,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
6780
6977
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
6781
6978
|
};
|
|
6782
6979
|
|
|
6783
|
-
var _templateObject$
|
|
6784
|
-
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
6980
|
+
var _templateObject$M;
|
|
6981
|
+
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
|
|
6785
6982
|
|
|
6786
6983
|
var UpsellCards = function UpsellCards(_ref) {
|
|
6787
6984
|
var upsellCards = _ref.upsellCards;
|
|
@@ -6799,20 +6996,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
6799
6996
|
}));
|
|
6800
6997
|
};
|
|
6801
6998
|
|
|
6802
|
-
var _templateObject$
|
|
6803
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
6999
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$p;
|
|
7000
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
|
|
6804
7001
|
var theme = _ref.theme;
|
|
6805
7002
|
return theme.colors.primary;
|
|
6806
7003
|
}, devices.mobile, devices.tablet);
|
|
6807
|
-
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6808
|
-
var TextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
7004
|
+
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
|
|
7005
|
+
var TextContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
6809
7006
|
|
|
6810
|
-
var _templateObject$
|
|
6811
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6812
|
-
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6813
|
-
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6814
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$
|
|
6815
|
-
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
7007
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q, _templateObject4$k, _templateObject5$e;
|
|
7008
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
7009
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
7010
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
7011
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
7012
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), devices.mobile);
|
|
6816
7013
|
|
|
6817
7014
|
var Accordion = function Accordion(_ref) {
|
|
6818
7015
|
var _ref$title = _ref.title,
|
|
@@ -6937,8 +7134,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6937
7134
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6938
7135
|
};
|
|
6939
7136
|
|
|
6940
|
-
var _templateObject$
|
|
6941
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7137
|
+
var _templateObject$P;
|
|
7138
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6942
7139
|
|
|
6943
7140
|
var Accordions = function Accordions(_ref) {
|
|
6944
7141
|
var _ref$items = _ref.items,
|
|
@@ -6956,7 +7153,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6956
7153
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6957
7154
|
contentType: accordion.contentType,
|
|
6958
7155
|
displayLevel: accordion.displayLevel,
|
|
6959
|
-
semanticLevel: accordion.semanticLevel
|
|
7156
|
+
semanticLevel: accordion.semanticLevel,
|
|
7157
|
+
initOpen: accordion.initOpen
|
|
6960
7158
|
}, accordion.children);
|
|
6961
7159
|
}));
|
|
6962
7160
|
};
|
|
@@ -6970,13 +7168,13 @@ var Theme = function Theme(_ref) {
|
|
|
6970
7168
|
}, children);
|
|
6971
7169
|
};
|
|
6972
7170
|
|
|
6973
|
-
var _templateObject$
|
|
6974
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7171
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$r;
|
|
7172
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
|
|
6975
7173
|
var theme = _ref.theme;
|
|
6976
7174
|
return theme.colors.primary;
|
|
6977
7175
|
}, devices.mobile);
|
|
6978
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6979
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7176
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
7177
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
|
|
6980
7178
|
|
|
6981
7179
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
6982
7180
|
var title = _ref.title,
|
|
@@ -7013,8 +7211,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7013
7211
|
}))))));
|
|
7014
7212
|
};
|
|
7015
7213
|
|
|
7016
|
-
var _templateObject$
|
|
7017
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
7214
|
+
var _templateObject$R;
|
|
7215
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\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 display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
7018
7216
|
var bgColor = _ref.bgColor,
|
|
7019
7217
|
theme = _ref.theme;
|
|
7020
7218
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7035,32 +7233,32 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7035
7233
|
}), children);
|
|
7036
7234
|
};
|
|
7037
7235
|
|
|
7038
|
-
var _templateObject$
|
|
7236
|
+
var _templateObject$S, _templateObject2$z, _templateObject3$s, _templateObject4$l, _templateObject5$f, _templateObject6$c, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
|
|
7039
7237
|
var LENGTH_LARGE_TEXT = 28;
|
|
7040
7238
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7041
7239
|
var LENGTH_TEXT_TABLET = 10;
|
|
7042
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7240
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
7043
7241
|
var isCardClickable = _ref.isCardClickable;
|
|
7044
7242
|
return isCardClickable ? 'pointer' : 'default';
|
|
7045
7243
|
}, function (_ref2) {
|
|
7046
7244
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7047
7245
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7048
7246
|
});
|
|
7049
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
7247
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
7050
7248
|
var lineColor = _ref3.lineColor,
|
|
7051
7249
|
theme = _ref3.theme;
|
|
7052
7250
|
if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
|
|
7053
7251
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7054
7252
|
}, zIndexes.contentOverlay);
|
|
7055
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
7056
|
-
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7253
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7254
|
+
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
7057
7255
|
var fullWidth = _ref4.fullWidth;
|
|
7058
7256
|
return fullWidth ? '0' : '20px';
|
|
7059
7257
|
}, function (_ref5) {
|
|
7060
7258
|
var fullWidth = _ref5.fullWidth;
|
|
7061
7259
|
return fullWidth ? '0' : '20px';
|
|
7062
7260
|
});
|
|
7063
|
-
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7261
|
+
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7064
7262
|
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
|
|
7065
7263
|
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7066
7264
|
var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
@@ -7321,9 +7519,9 @@ var Card = function Card(_ref) {
|
|
|
7321
7519
|
dangerouslySetInnerHTML: {
|
|
7322
7520
|
__html: truncatedText
|
|
7323
7521
|
}
|
|
7324
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7522
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7325
7523
|
level: 1
|
|
7326
|
-
}, highlightText))
|
|
7524
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7327
7525
|
fullWidth: fullWidth
|
|
7328
7526
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7329
7527
|
ref: node,
|
|
@@ -7337,9 +7535,9 @@ var Card = function Card(_ref) {
|
|
|
7337
7535
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7338
7536
|
};
|
|
7339
7537
|
|
|
7340
|
-
var _templateObject$
|
|
7341
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7342
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
7538
|
+
var _templateObject$T, _templateObject2$A;
|
|
7539
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
7540
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7343
7541
|
|
|
7344
7542
|
var Cards = function Cards(_ref) {
|
|
7345
7543
|
var cards = _ref.cards,
|
|
@@ -7384,18 +7582,18 @@ var Cards = function Cards(_ref) {
|
|
|
7384
7582
|
}));
|
|
7385
7583
|
};
|
|
7386
7584
|
|
|
7387
|
-
var _templateObject$
|
|
7388
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7389
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7585
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
|
|
7586
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
7587
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
7390
7588
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7391
7589
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7392
7590
|
}, function (_ref2) {
|
|
7393
7591
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7394
7592
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7395
7593
|
}, devices.mobileAndTablet);
|
|
7396
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$
|
|
7397
|
-
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$
|
|
7398
|
-
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7594
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7595
|
+
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7596
|
+
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7399
7597
|
|
|
7400
7598
|
var divideAddressString = function divideAddressString(address) {
|
|
7401
7599
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7453,16 +7651,16 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7453
7651
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7454
7652
|
};
|
|
7455
7653
|
|
|
7456
|
-
var _templateObject$
|
|
7457
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
7458
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7654
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$8;
|
|
7655
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7656
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7459
7657
|
return props.clickable ? 'pointer' : 'default';
|
|
7460
7658
|
}, devices.mobile);
|
|
7461
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7462
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7659
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7660
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7463
7661
|
return props.showImage ? 2 : '1 / span 4';
|
|
7464
7662
|
}, devices.mobile);
|
|
7465
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7663
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
|
|
7466
7664
|
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7467
7665
|
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7468
7666
|
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
@@ -7536,21 +7734,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7536
7734
|
}), link.text)));
|
|
7537
7735
|
};
|
|
7538
7736
|
|
|
7539
|
-
var _templateObject$
|
|
7540
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7737
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$i;
|
|
7738
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7541
7739
|
var imageToLeft = _ref.imageToLeft;
|
|
7542
7740
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7543
7741
|
}, devices.mobile);
|
|
7544
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7742
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7545
7743
|
var imageToLeft = _ref2.imageToLeft;
|
|
7546
7744
|
return imageToLeft ? 'left' : 'right';
|
|
7547
7745
|
}, devices.mobile);
|
|
7548
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7746
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7549
7747
|
var imageToLeft = _ref3.imageToLeft;
|
|
7550
7748
|
return imageToLeft ? 'right' : 'left';
|
|
7551
7749
|
}, devices.mobile);
|
|
7552
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
7553
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
7750
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
7751
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__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"])));
|
|
7554
7752
|
|
|
7555
7753
|
var Editorial = function Editorial(_ref) {
|
|
7556
7754
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7614,10 +7812,10 @@ var BackgroundColour;
|
|
|
7614
7812
|
BackgroundColour["White"] = "white";
|
|
7615
7813
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
7616
7814
|
|
|
7617
|
-
var _templateObject$
|
|
7618
|
-
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$
|
|
7619
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7620
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7815
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p;
|
|
7816
|
+
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
|
|
7817
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7818
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7621
7819
|
if (!props.infoThemed) {
|
|
7622
7820
|
return;
|
|
7623
7821
|
} else {
|
|
@@ -7628,7 +7826,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_template
|
|
|
7628
7826
|
}
|
|
7629
7827
|
}
|
|
7630
7828
|
});
|
|
7631
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
7829
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
7632
7830
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7633
7831
|
}, function (props) {
|
|
7634
7832
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -7741,24 +7939,24 @@ var Information = function Information(_ref) {
|
|
|
7741
7939
|
}))));
|
|
7742
7940
|
};
|
|
7743
7941
|
|
|
7744
|
-
var _templateObject$
|
|
7745
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7942
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
|
|
7943
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7746
7944
|
var theme = _ref.theme;
|
|
7747
7945
|
return theme.colors.primary;
|
|
7748
7946
|
}, function (_ref2) {
|
|
7749
7947
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7750
7948
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7751
7949
|
}, devices.mobile);
|
|
7752
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7753
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7950
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7951
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7754
7952
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7755
7953
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7756
7954
|
}, devices.mobile);
|
|
7757
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7955
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n ", ";\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), function (_ref4) {
|
|
7758
7956
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7759
7957
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7760
7958
|
}, devices.mobile);
|
|
7761
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7959
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
7762
7960
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
7763
7961
|
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
7764
7962
|
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
@@ -7769,14 +7967,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7769
7967
|
link = _ref.link,
|
|
7770
7968
|
_ref$sponsor = _ref.sponsor,
|
|
7771
7969
|
sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
|
|
7772
|
-
children = _ref.children
|
|
7970
|
+
children = _ref.children,
|
|
7971
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7972
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
|
|
7973
|
+
_ref$copyCharLimit = _ref.copyCharLimit,
|
|
7974
|
+
copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
|
|
7975
|
+
_ref$titleCharLimit = _ref.titleCharLimit,
|
|
7976
|
+
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
7773
7977
|
|
|
7774
7978
|
var _ref2 = link || {},
|
|
7775
7979
|
linkText = _ref2.text,
|
|
7776
7980
|
restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
7777
7981
|
|
|
7778
|
-
var truncatedText = text == null ? void 0 : text.substring(0,
|
|
7779
|
-
var truncatedTitle = title && title.substring(0,
|
|
7982
|
+
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
7983
|
+
var truncatedTitle = title && title.substring(0, titleCharLimit);
|
|
7780
7984
|
var isTitleUnAvailable = !title;
|
|
7781
7985
|
return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
|
|
7782
7986
|
"data-testid": "page-heading-wrapper",
|
|
@@ -7787,7 +7991,8 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7787
7991
|
}, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
7788
7992
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7789
7993
|
}, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
|
|
7790
|
-
level: 2
|
|
7994
|
+
level: 2,
|
|
7995
|
+
semanticLevel: semanticLevel
|
|
7791
7996
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
7792
7997
|
"data-testid": "page-heading-text"
|
|
7793
7998
|
}, /*#__PURE__*/React__default.createElement(PageHeadingText, {
|
|
@@ -7833,12 +8038,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7833
8038
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
7834
8039
|
};
|
|
7835
8040
|
|
|
7836
|
-
var _templateObject$
|
|
7837
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7838
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7839
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
7840
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7841
|
-
var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8041
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
|
|
8042
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
8043
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
8044
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
8045
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
8046
|
+
var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7842
8047
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7843
8048
|
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7844
8049
|
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
@@ -7854,7 +8059,9 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7854
8059
|
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
7855
8060
|
bgUrlDevice = _ref.bgUrlDevice,
|
|
7856
8061
|
_ref$bgImageAltText = _ref.bgImageAltText,
|
|
7857
|
-
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText
|
|
8062
|
+
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
|
|
8063
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
8064
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
|
|
7858
8065
|
var truncatedText = text && text.substring(0, 75);
|
|
7859
8066
|
|
|
7860
8067
|
var _ref2 = link || {},
|
|
@@ -7890,7 +8097,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7890
8097
|
}, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
7891
8098
|
"data-testid": "impact-text"
|
|
7892
8099
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
7893
|
-
level: 3
|
|
8100
|
+
level: 3,
|
|
8101
|
+
semanticLevel: semanticLevel
|
|
7894
8102
|
}, truncatedText)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
|
|
7895
8103
|
"data-testid": "impact-link"
|
|
7896
8104
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null), scrollHref ? /*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
@@ -7904,21 +8112,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7904
8112
|
}, "Scroll Down")) : null);
|
|
7905
8113
|
};
|
|
7906
8114
|
|
|
7907
|
-
var _templateObject$
|
|
7908
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8115
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject4$s, _templateObject5$l;
|
|
8116
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7909
8117
|
var color = _ref.color;
|
|
7910
8118
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7911
8119
|
}, devices.mobileAndTablet);
|
|
7912
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
8120
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7913
8121
|
var hasImage = _ref2.hasImage;
|
|
7914
8122
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7915
8123
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7916
8124
|
var hasImage = _ref3.hasImage;
|
|
7917
8125
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7918
8126
|
});
|
|
7919
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7920
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7921
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8127
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
8128
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8129
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7922
8130
|
|
|
7923
8131
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7924
8132
|
var _image$src, _image$alt;
|
|
@@ -7949,8 +8157,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7949
8157
|
}))));
|
|
7950
8158
|
};
|
|
7951
8159
|
|
|
7952
|
-
var _templateObject
|
|
7953
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8160
|
+
var _templateObject$$;
|
|
8161
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7954
8162
|
|
|
7955
8163
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7956
8164
|
var link = _ref.link,
|
|
@@ -7965,14 +8173,16 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7965
8173
|
theme: ThemeType.Stream
|
|
7966
8174
|
}, /*#__PURE__*/React__default.createElement(StreamWrapper, null, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
|
|
7967
8175
|
link: streamLink
|
|
7968
|
-
}), /*#__PURE__*/React__default.createElement(StreamBadge,
|
|
8176
|
+
}), /*#__PURE__*/React__default.createElement(StreamBadge, {
|
|
8177
|
+
align: "left"
|
|
8178
|
+
}))));
|
|
7969
8179
|
};
|
|
7970
8180
|
|
|
7971
|
-
var _templateObject$
|
|
7972
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
7973
|
-
var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$
|
|
7974
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7975
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8181
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8182
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-overline-4);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8183
|
+
var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8184
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8185
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
7976
8186
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
|
|
7977
8187
|
var invert = _ref.invert,
|
|
7978
8188
|
theme = _ref.theme;
|
|
@@ -8073,11 +8283,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
|
|
|
8073
8283
|
}, truncate(stripAllHtmlTags(brandingText), 25));
|
|
8074
8284
|
|
|
8075
8285
|
case 'StreamLogo':
|
|
8076
|
-
return /*#__PURE__*/React__default.createElement(
|
|
8077
|
-
color: color,
|
|
8078
|
-
fontSize: 12,
|
|
8079
|
-
productName: TextLogoProduct.Stream
|
|
8080
|
-
});
|
|
8286
|
+
return /*#__PURE__*/React__default.createElement(StreamBadge, null);
|
|
8081
8287
|
|
|
8082
8288
|
case 'CinemaLogo':
|
|
8083
8289
|
return /*#__PURE__*/React__default.createElement(Logo, {
|
|
@@ -8103,7 +8309,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8103
8309
|
var isIOS = function isIOS() {
|
|
8104
8310
|
try {
|
|
8105
8311
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8106
|
-
if (typeof navigator === undefined) return false;
|
|
8312
|
+
if (typeof navigator === 'undefined') return false;
|
|
8107
8313
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8108
8314
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8109
8315
|
} catch (e) {
|
|
@@ -8119,7 +8325,7 @@ var useIOS = function useIOS() {
|
|
|
8119
8325
|
setIOS = _useState[1];
|
|
8120
8326
|
|
|
8121
8327
|
useEffect(function () {
|
|
8122
|
-
if (typeof navigator === undefined) return;
|
|
8328
|
+
if (typeof navigator === 'undefined') return;
|
|
8123
8329
|
setIOS(isIOS());
|
|
8124
8330
|
}, []);
|
|
8125
8331
|
return IOS;
|
|
@@ -8258,7 +8464,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8258
8464
|
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8259
8465
|
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8260
8466
|
brandingText = _ref4.brandingText,
|
|
8261
|
-
brandingLink = _ref4.brandingLink
|
|
8467
|
+
brandingLink = _ref4.brandingLink,
|
|
8468
|
+
_ref4$showCopy = _ref4.showCopy,
|
|
8469
|
+
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
|
|
8470
|
+
_ref4$semanticLevel = _ref4.semanticLevel,
|
|
8471
|
+
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
8262
8472
|
|
|
8263
8473
|
var _ref5 = link || {},
|
|
8264
8474
|
linkText = _ref5.text,
|
|
@@ -8284,7 +8494,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8284
8494
|
})) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
|
|
8285
8495
|
video: video,
|
|
8286
8496
|
poster: poster
|
|
8287
|
-
})), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8497
|
+
})), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8288
8498
|
className: "page-heading-compact__background",
|
|
8289
8499
|
invert: invert
|
|
8290
8500
|
}, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
|
|
@@ -8294,22 +8504,22 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8294
8504
|
invert: invert
|
|
8295
8505
|
}), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8296
8506
|
level: titleSize,
|
|
8297
|
-
semanticLevel:
|
|
8507
|
+
semanticLevel: semanticLevel
|
|
8298
8508
|
}, title && truncate(title, 40))), link && /*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
|
|
8299
8509
|
invert: invert,
|
|
8300
8510
|
className: "page-heading-compact__button"
|
|
8301
8511
|
}), linkText))));
|
|
8302
8512
|
};
|
|
8303
8513
|
|
|
8304
|
-
var _templateObject
|
|
8305
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject
|
|
8306
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
8514
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t;
|
|
8515
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8516
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
|
|
8307
8517
|
|
|
8308
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
8518
|
+
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
8309
8519
|
var active = _ref.active;
|
|
8310
8520
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8311
8521
|
});
|
|
8312
|
-
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$
|
|
8522
|
+
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
8313
8523
|
|
|
8314
8524
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8315
8525
|
// If there are less than 6 pages, return all pages
|
|
@@ -8378,12 +8588,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
8378
8588
|
}))));
|
|
8379
8589
|
};
|
|
8380
8590
|
|
|
8381
|
-
var _templateObject$
|
|
8382
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8383
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8384
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8385
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8386
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8591
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$h;
|
|
8592
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8593
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
8594
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8595
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
8596
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
8387
8597
|
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
8388
8598
|
|
|
8389
8599
|
var Person = function Person(_ref) {
|
|
@@ -8435,11 +8645,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8435
8645
|
}));
|
|
8436
8646
|
};
|
|
8437
8647
|
|
|
8438
|
-
var _templateObject$
|
|
8439
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8440
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
8441
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8442
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8648
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v;
|
|
8649
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8650
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
8651
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
|
|
8652
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
8443
8653
|
|
|
8444
8654
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8445
8655
|
return array.reduce(function (acc, item) {
|
|
@@ -8450,12 +8660,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8450
8660
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8451
8661
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8452
8662
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8453
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8663
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8664
|
+
key: index
|
|
8665
|
+
}, title));
|
|
8454
8666
|
} else if (index > 0) {
|
|
8455
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8667
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8668
|
+
key: index
|
|
8669
|
+
}, ", ", title);
|
|
8456
8670
|
}
|
|
8457
8671
|
|
|
8458
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8672
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8673
|
+
key: index
|
|
8674
|
+
}, title);
|
|
8459
8675
|
}));
|
|
8460
8676
|
};
|
|
8461
8677
|
|
|
@@ -8507,14 +8723,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8507
8723
|
}));
|
|
8508
8724
|
};
|
|
8509
8725
|
|
|
8510
|
-
var _templateObject$
|
|
8726
|
+
var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$i, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8511
8727
|
var LENGTH_TEXT = 28;
|
|
8512
8728
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8513
8729
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8514
8730
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8515
8731
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8516
8732
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8517
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8733
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__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) {
|
|
8518
8734
|
var imageToLeft = _ref.imageToLeft;
|
|
8519
8735
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8520
8736
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8524,8 +8740,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
|
|
|
8524
8740
|
var asCard = _ref3.asCard;
|
|
8525
8741
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8526
8742
|
});
|
|
8527
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
8528
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
8743
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__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"])));
|
|
8744
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref4) {
|
|
8529
8745
|
var theme = _ref4.theme;
|
|
8530
8746
|
return theme.colors.black;
|
|
8531
8747
|
}, function (_ref5) {
|
|
@@ -8535,7 +8751,7 @@ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_template
|
|
|
8535
8751
|
var theme = _ref6.theme;
|
|
8536
8752
|
return theme.colors.primary;
|
|
8537
8753
|
});
|
|
8538
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8754
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref7) {
|
|
8539
8755
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8540
8756
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8541
8757
|
}, function (_ref8) {
|
|
@@ -8563,7 +8779,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templat
|
|
|
8563
8779
|
|
|
8564
8780
|
return '';
|
|
8565
8781
|
});
|
|
8566
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8782
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8567
8783
|
var marginBottom = _ref10.marginBottom;
|
|
8568
8784
|
return marginBottom + "px";
|
|
8569
8785
|
});
|
|
@@ -8785,26 +9001,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8785
9001
|
}))));
|
|
8786
9002
|
};
|
|
8787
9003
|
|
|
8788
|
-
var _templateObject$
|
|
9004
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F, _templateObject4$x, _templateObject5$p, _templateObject6$j, _templateObject7$d;
|
|
8789
9005
|
var LENGTH_TEXT$2 = 28;
|
|
8790
9006
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8791
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9007
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__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) {
|
|
8792
9008
|
var imageToLeft = _ref.imageToLeft;
|
|
8793
9009
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
8794
9010
|
}, devices.tablet, function (_ref2) {
|
|
8795
9011
|
var imageToLeft = _ref2.imageToLeft;
|
|
8796
9012
|
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'";
|
|
8797
9013
|
}, devices.mobile);
|
|
8798
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9014
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
8799
9015
|
var imageToLeft = _ref3.imageToLeft;
|
|
8800
9016
|
return imageToLeft ? 'left' : 'right';
|
|
8801
9017
|
}, devices.mobile);
|
|
8802
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9018
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
8803
9019
|
var imageToLeft = _ref4.imageToLeft;
|
|
8804
9020
|
return imageToLeft ? 'right' : 'left';
|
|
8805
9021
|
}, devices.mobile);
|
|
8806
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
8807
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
9022
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
|
|
9023
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$p || (_templateObject5$p = /*#__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"])));
|
|
8808
9024
|
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
8809
9025
|
var theme = _ref5.theme;
|
|
8810
9026
|
return theme.colors.black;
|
|
@@ -8841,8 +9057,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
|
|
|
8841
9057
|
return '';
|
|
8842
9058
|
});
|
|
8843
9059
|
|
|
8844
|
-
var _templateObject$
|
|
8845
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9060
|
+
var _templateObject$16;
|
|
9061
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
8846
9062
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8847
9063
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8848
9064
|
return aspectRatio;
|
|
@@ -8854,6 +9070,10 @@ var VideoContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObj
|
|
|
8854
9070
|
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
8855
9071
|
aspectRatio = _ref3$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
8856
9072
|
return AspectRatioLegacy[aspectRatio];
|
|
9073
|
+
}, function (_ref4) {
|
|
9074
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
9075
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
9076
|
+
return aspectRatio;
|
|
8857
9077
|
});
|
|
8858
9078
|
|
|
8859
9079
|
var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
@@ -8870,17 +9090,50 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
8870
9090
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
8871
9091
|
};
|
|
8872
9092
|
|
|
9093
|
+
/**
|
|
9094
|
+
* Generates a random string in the format XXX-XXX.
|
|
9095
|
+
* Does not meet UUID standards.
|
|
9096
|
+
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
9097
|
+
*
|
|
9098
|
+
* @return {string} A random string in the format XXX-XXX.
|
|
9099
|
+
*/
|
|
9100
|
+
var generateDomElementId = function generateDomElementId() {
|
|
9101
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
9102
|
+
var datePart = Date.now().toString().slice(-3);
|
|
9103
|
+
return randomPart + "-" + datePart;
|
|
9104
|
+
};
|
|
9105
|
+
|
|
8873
9106
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8874
9107
|
var video = _ref.video,
|
|
8875
9108
|
settings = _ref.settings;
|
|
8876
|
-
var
|
|
8877
|
-
autoPlay = settings.autoPlay;
|
|
9109
|
+
var videoRef = useRef(null);
|
|
8878
9110
|
|
|
8879
9111
|
var _useState = useState(AspectRatio['16:9']),
|
|
8880
9112
|
aspectRatio = _useState[0],
|
|
8881
9113
|
setAspectRatio = _useState[1];
|
|
8882
9114
|
|
|
8883
|
-
var
|
|
9115
|
+
var _React$useState = React__default.useState(false),
|
|
9116
|
+
isVideoReady = _React$useState[0],
|
|
9117
|
+
setIsVideoReady = _React$useState[1];
|
|
9118
|
+
|
|
9119
|
+
var muted = settings.muted,
|
|
9120
|
+
autoPlay = settings.autoPlay;
|
|
9121
|
+
React__default.useEffect(function () {
|
|
9122
|
+
var changeVideoReadiness = function changeVideoReadiness() {
|
|
9123
|
+
setIsVideoReady(true);
|
|
9124
|
+
};
|
|
9125
|
+
|
|
9126
|
+
if (videoRef.current) {
|
|
9127
|
+
videoRef.current.addEventListener('canplay', changeVideoReadiness);
|
|
9128
|
+
return function () {
|
|
9129
|
+
var _videoRef$current;
|
|
9130
|
+
|
|
9131
|
+
return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
|
|
9132
|
+
};
|
|
9133
|
+
}
|
|
9134
|
+
|
|
9135
|
+
return undefined;
|
|
9136
|
+
}, []);
|
|
8884
9137
|
|
|
8885
9138
|
var handleMetadataLoaded = function handleMetadataLoaded() {
|
|
8886
9139
|
if (videoRef.current) {
|
|
@@ -8889,18 +9142,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8889
9142
|
}
|
|
8890
9143
|
};
|
|
8891
9144
|
|
|
8892
|
-
var
|
|
9145
|
+
var videoElementId = useMemo(function () {
|
|
9146
|
+
return "video-id-" + generateDomElementId();
|
|
9147
|
+
}, []);
|
|
9148
|
+
var clonedVideo = /*#__PURE__*/cloneElement(video, _extends({
|
|
9149
|
+
playsInline: true
|
|
9150
|
+
}, muted ? {
|
|
8893
9151
|
muted: true
|
|
8894
9152
|
} : {}, autoPlay && muted ? {
|
|
8895
9153
|
autoPlay: true
|
|
8896
9154
|
} : {}, {
|
|
8897
9155
|
height: '100%',
|
|
8898
9156
|
width: '100%',
|
|
8899
|
-
onLoadedMetadata: handleMetadataLoaded
|
|
9157
|
+
onLoadedMetadata: handleMetadataLoaded,
|
|
9158
|
+
id: videoElementId
|
|
8900
9159
|
}, {
|
|
9160
|
+
poster: autoPlay && isVideoReady ? undefined : video.props.poster,
|
|
8901
9161
|
ref: videoRef
|
|
8902
9162
|
}));
|
|
8903
|
-
var videoElementId = clonedVideo.props.id;
|
|
8904
9163
|
var videoContainerId = "video-container-for-" + videoElementId;
|
|
8905
9164
|
|
|
8906
9165
|
var videoControlsProps = _extends({}, settings, {
|
|
@@ -8908,14 +9167,12 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8908
9167
|
videoContainerId: videoContainerId
|
|
8909
9168
|
});
|
|
8910
9169
|
|
|
8911
|
-
|
|
8912
|
-
setAspectRatio(AspectRatio['16:9']);
|
|
8913
|
-
}, [video.props.src]);
|
|
9170
|
+
var showVideoControls = autoPlay ? isVideoReady : true;
|
|
8914
9171
|
return /*#__PURE__*/React__default.createElement(VideoContainer, {
|
|
8915
9172
|
aspectRatio: aspectRatio,
|
|
8916
9173
|
id: videoContainerId,
|
|
8917
|
-
"data-testid":
|
|
8918
|
-
}, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
9174
|
+
"data-testid": 'video-container'
|
|
9175
|
+
}, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
8919
9176
|
};
|
|
8920
9177
|
|
|
8921
9178
|
var PromoChild = function PromoChild(_ref) {
|
|
@@ -8949,7 +9206,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8949
9206
|
text = _ref.text,
|
|
8950
9207
|
links = _ref.links,
|
|
8951
9208
|
children = _ref.children,
|
|
8952
|
-
videoSettings = _ref.videoSettings
|
|
9209
|
+
videoSettings = _ref.videoSettings,
|
|
9210
|
+
titleSemanticLevel = _ref.titleSemanticLevel;
|
|
8953
9211
|
|
|
8954
9212
|
var truncate = function truncate(str, n) {
|
|
8955
9213
|
return str.length >= n ? str.substr(0, n) : str;
|
|
@@ -8990,7 +9248,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8990
9248
|
"data-testid": "content-wrapper",
|
|
8991
9249
|
imageToLeft: imageToLeft
|
|
8992
9250
|
}, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8993
|
-
level: titleLevel
|
|
9251
|
+
level: titleLevel,
|
|
9252
|
+
semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
|
|
8994
9253
|
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
|
|
8995
9254
|
dangerouslySetInnerHTML: {
|
|
8996
9255
|
__html: text
|
|
@@ -9002,8 +9261,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9002
9261
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
9003
9262
|
};
|
|
9004
9263
|
|
|
9005
|
-
var _templateObject$
|
|
9006
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9264
|
+
var _templateObject$17;
|
|
9265
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9007
9266
|
|
|
9008
9267
|
/**
|
|
9009
9268
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9061,9 +9320,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9061
9320
|
})));
|
|
9062
9321
|
};
|
|
9063
9322
|
|
|
9064
|
-
var _templateObject$
|
|
9065
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9066
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9323
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$G;
|
|
9324
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9325
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9067
9326
|
var horizontalMode = _ref.horizontalMode;
|
|
9068
9327
|
if (horizontalMode) return 'row';
|
|
9069
9328
|
return 'column';
|
|
@@ -9071,7 +9330,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObjec
|
|
|
9071
9330
|
var gap = _ref2.gap;
|
|
9072
9331
|
return gap + "px";
|
|
9073
9332
|
});
|
|
9074
|
-
var ErrorLabel$
|
|
9333
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9075
9334
|
var darkMode = _ref3.darkMode;
|
|
9076
9335
|
if (darkMode) return 'var(--base-color-white)';
|
|
9077
9336
|
return 'var(--base-color-errorstate)';
|
|
@@ -9143,7 +9402,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9143
9402
|
error: error !== undefined ? '' : undefined,
|
|
9144
9403
|
onChange: changeHandler
|
|
9145
9404
|
}, radio.content);
|
|
9146
|
-
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9405
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
9147
9406
|
darkMode: darkMode,
|
|
9148
9407
|
"data-testid": "radio-group-error-label"
|
|
9149
9408
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9151,10 +9410,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9151
9410
|
}, error)));
|
|
9152
9411
|
};
|
|
9153
9412
|
|
|
9154
|
-
var _templateObject$
|
|
9155
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9156
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9157
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9413
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$H;
|
|
9414
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-lightgrey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9415
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9416
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9158
9417
|
|
|
9159
9418
|
var StatusBanner = function StatusBanner(_ref) {
|
|
9160
9419
|
var statusText = _ref.statusText,
|
|
@@ -9216,14 +9475,15 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9216
9475
|
})))));
|
|
9217
9476
|
};
|
|
9218
9477
|
|
|
9219
|
-
var _templateObject$
|
|
9220
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9478
|
+
var _templateObject$1a;
|
|
9479
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9221
9480
|
|
|
9222
9481
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9223
9482
|
var title = _ref.title,
|
|
9224
9483
|
_ref$size = _ref.size,
|
|
9225
9484
|
size = _ref$size === void 0 ? 'small' : _ref$size,
|
|
9226
|
-
description = _ref.description
|
|
9485
|
+
description = _ref.description,
|
|
9486
|
+
semanticLevel = _ref.semanticLevel;
|
|
9227
9487
|
var headingLevel = size === 'large' ? 1 : 2;
|
|
9228
9488
|
return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9229
9489
|
columnStartDesktop: 3,
|
|
@@ -9231,7 +9491,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9231
9491
|
columnStartDevice: 2,
|
|
9232
9492
|
columnSpanDevice: 12
|
|
9233
9493
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
9234
|
-
level: headingLevel
|
|
9494
|
+
level: headingLevel,
|
|
9495
|
+
semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
|
|
9235
9496
|
}, title)), description && /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9236
9497
|
columnStartDesktop: 3,
|
|
9237
9498
|
columnSpanDesktop: 8,
|
|
@@ -9243,8 +9504,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9243
9504
|
}, description))));
|
|
9244
9505
|
};
|
|
9245
9506
|
|
|
9246
|
-
var _templateObject$
|
|
9247
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
9507
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9508
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9248
9509
|
var theme = _ref.theme;
|
|
9249
9510
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9250
9511
|
}, function (_ref2) {
|
|
@@ -9254,12 +9515,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
|
|
|
9254
9515
|
var theme = _ref3.theme;
|
|
9255
9516
|
return theme.colors.lightgrey;
|
|
9256
9517
|
});
|
|
9257
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
9518
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9258
9519
|
var theme = _ref4.theme;
|
|
9259
9520
|
return theme.colors.darkgrey;
|
|
9260
9521
|
});
|
|
9261
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9262
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
9522
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9523
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9263
9524
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9264
9525
|
var theme = _ref5.theme;
|
|
9265
9526
|
return {
|
|
@@ -9267,7 +9528,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
|
9267
9528
|
color: theme.colors.black,
|
|
9268
9529
|
title: 'Select Arrow'
|
|
9269
9530
|
};
|
|
9270
|
-
})(_templateObject5$
|
|
9531
|
+
})(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
9271
9532
|
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9272
9533
|
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9273
9534
|
var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
@@ -9666,9 +9927,9 @@ function Select(_ref3) {
|
|
|
9666
9927
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9667
9928
|
}
|
|
9668
9929
|
|
|
9669
|
-
var _templateObject$
|
|
9670
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9671
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9930
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$J, _templateObject4$z;
|
|
9931
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9932
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 20px 20px;\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 letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9672
9933
|
var width = _ref.width;
|
|
9673
9934
|
if (!width) return 'none';
|
|
9674
9935
|
return width + 'px';
|
|
@@ -9685,12 +9946,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateOb
|
|
|
9685
9946
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9686
9947
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9687
9948
|
});
|
|
9688
|
-
var TextLabel$
|
|
9949
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9689
9950
|
var darkMode = _ref5.darkMode;
|
|
9690
9951
|
if (darkMode) return "var(--base-color-white)";
|
|
9691
9952
|
return "var(--base-color-black)";
|
|
9692
9953
|
});
|
|
9693
|
-
var ErrorLabel$
|
|
9954
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9694
9955
|
var darkMode = _ref6.darkMode;
|
|
9695
9956
|
if (darkMode) return "var(--base-color-white)";
|
|
9696
9957
|
return "var(--base-color-errorstate)";
|
|
@@ -9707,7 +9968,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9707
9968
|
width = _ref.width,
|
|
9708
9969
|
darkMode = _ref.darkMode,
|
|
9709
9970
|
children = _ref.children;
|
|
9710
|
-
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$
|
|
9971
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9711
9972
|
darkMode: darkMode,
|
|
9712
9973
|
"data-testid": "select2-text-label"
|
|
9713
9974
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9716,7 +9977,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9716
9977
|
width: width,
|
|
9717
9978
|
error: error,
|
|
9718
9979
|
darkMode: darkMode
|
|
9719
|
-
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9980
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9720
9981
|
darkMode: darkMode,
|
|
9721
9982
|
"data-testid": "select2-error-label"
|
|
9722
9983
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9806,8 +10067,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9806
10067
|
})));
|
|
9807
10068
|
};
|
|
9808
10069
|
|
|
9809
|
-
var _templateObject$
|
|
9810
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
10070
|
+
var _templateObject$1d;
|
|
10071
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
9811
10072
|
var theme = _ref.theme;
|
|
9812
10073
|
return theme.colors.primary;
|
|
9813
10074
|
});
|
|
@@ -9835,8 +10096,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9835
10096
|
})));
|
|
9836
10097
|
};
|
|
9837
10098
|
|
|
9838
|
-
var _templateObject$
|
|
9839
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
10099
|
+
var _templateObject$1e, _templateObject2$S;
|
|
10100
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
9840
10101
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9841
10102
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9842
10103
|
return aspectRatio;
|
|
@@ -9846,7 +10107,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1
|
|
|
9846
10107
|
height = _ref2.height;
|
|
9847
10108
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9848
10109
|
});
|
|
9849
|
-
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10110
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
9850
10111
|
|
|
9851
10112
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9852
10113
|
var caption = _ref.caption,
|
|
@@ -9884,13 +10145,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9884
10145
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9885
10146
|
};
|
|
9886
10147
|
|
|
9887
|
-
var _templateObject$
|
|
9888
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9889
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10148
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$K;
|
|
10149
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10150
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9890
10151
|
var displayAttribution = _ref.displayAttribution;
|
|
9891
10152
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9892
10153
|
});
|
|
9893
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10154
|
+
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
|
|
9894
10155
|
|
|
9895
10156
|
var Quote = function Quote(_ref) {
|
|
9896
10157
|
var text = _ref.text,
|
|
@@ -9914,12 +10175,12 @@ var Quote = function Quote(_ref) {
|
|
|
9914
10175
|
}, attribution))));
|
|
9915
10176
|
};
|
|
9916
10177
|
|
|
9917
|
-
var _templateObject$
|
|
9918
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
9919
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9920
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
9921
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9922
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10178
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$l;
|
|
10179
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10180
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10181
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10182
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10183
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9923
10184
|
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
9924
10185
|
|
|
9925
10186
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -9958,11 +10219,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9958
10219
|
}, title)))));
|
|
9959
10220
|
};
|
|
9960
10221
|
|
|
9961
|
-
var _templateObject$
|
|
9962
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9963
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
9964
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
9965
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10222
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B;
|
|
10223
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10224
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
10225
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10226
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
9966
10227
|
|
|
9967
10228
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9968
10229
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10060,15 +10321,113 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10060
10321
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10061
10322
|
};
|
|
10062
10323
|
|
|
10063
|
-
var _templateObject$
|
|
10064
|
-
var
|
|
10065
|
-
var
|
|
10066
|
-
var
|
|
10067
|
-
var
|
|
10324
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s, _templateObject6$m;
|
|
10325
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10326
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10327
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10328
|
+
var color = _ref.color;
|
|
10329
|
+
return "var(--base-color-" + color + ")";
|
|
10330
|
+
});
|
|
10331
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10332
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10333
|
+
var color = _ref2.color;
|
|
10334
|
+
return "var(--base-color-" + color + ")";
|
|
10335
|
+
});
|
|
10336
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10337
|
+
var color = _ref3.color;
|
|
10338
|
+
return "var(--base-color-" + color + ")";
|
|
10339
|
+
});
|
|
10340
|
+
|
|
10341
|
+
/**
|
|
10342
|
+
* Password strength indicator component.
|
|
10343
|
+
* This renders some number of lines (6 by default)
|
|
10344
|
+
* which should become active when the user improves
|
|
10345
|
+
* the strength of the entered password.
|
|
10346
|
+
*
|
|
10347
|
+
* ## Sections
|
|
10348
|
+
* To set number of sections it should be passed
|
|
10349
|
+
* as `sections` prop.
|
|
10350
|
+
*
|
|
10351
|
+
* ## Active section
|
|
10352
|
+
* To set number of active sections it should be passed
|
|
10353
|
+
* as `activeSections` prop.
|
|
10354
|
+
*
|
|
10355
|
+
* ## Colors
|
|
10356
|
+
* Color of every element can be controlled by properties:
|
|
10357
|
+
* `sectionsColor`, `activeSectionsColor`,
|
|
10358
|
+
* `textColor`, `strengthLabelColor`.
|
|
10359
|
+
*
|
|
10360
|
+
* ## Text
|
|
10361
|
+
* `text` prop is used to render some message.
|
|
10362
|
+
* For example error (together with proper red color)
|
|
10363
|
+
* or some password requirement. It can be empty.
|
|
10364
|
+
*
|
|
10365
|
+
* ## Strength label
|
|
10366
|
+
* `strengthLabel` prop is used to render strength characteristic
|
|
10367
|
+
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10368
|
+
* It can be empty.
|
|
10369
|
+
*/
|
|
10370
|
+
|
|
10371
|
+
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10372
|
+
var _ref$sections = _ref.sections,
|
|
10373
|
+
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10374
|
+
_ref$activeSections = _ref.activeSections,
|
|
10375
|
+
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10376
|
+
_ref$sectionsColor = _ref.sectionsColor,
|
|
10377
|
+
sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
|
|
10378
|
+
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10379
|
+
activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
|
|
10380
|
+
_ref$text = _ref.text,
|
|
10381
|
+
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10382
|
+
_ref$textColor = _ref.textColor,
|
|
10383
|
+
textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
|
|
10384
|
+
_ref$strengthLabel = _ref.strengthLabel,
|
|
10385
|
+
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10386
|
+
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10387
|
+
strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
|
|
10388
|
+
|
|
10389
|
+
var setSectionColor = function setSectionColor(index) {
|
|
10390
|
+
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10391
|
+
};
|
|
10392
|
+
|
|
10393
|
+
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10394
|
+
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10395
|
+
};
|
|
10396
|
+
|
|
10397
|
+
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10398
|
+
"data-testid": "password-strength-container"
|
|
10399
|
+
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10400
|
+
"data-testid": "password-strength-sections"
|
|
10401
|
+
}, Array.from({
|
|
10402
|
+
length: sections
|
|
10403
|
+
}, function (_section, i) {
|
|
10404
|
+
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10405
|
+
key: i,
|
|
10406
|
+
color: setSectionColor(i),
|
|
10407
|
+
"data-testid": setSectionDataTestId(i)
|
|
10408
|
+
});
|
|
10409
|
+
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10410
|
+
color: textColor,
|
|
10411
|
+
"data-testid": "password-strength-text"
|
|
10412
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10413
|
+
level: 6
|
|
10414
|
+
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10415
|
+
color: strengthLabelColor,
|
|
10416
|
+
"data-testid": "password-strength-label"
|
|
10417
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10418
|
+
level: 2
|
|
10419
|
+
}, strengthLabel))));
|
|
10420
|
+
};
|
|
10421
|
+
|
|
10422
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t;
|
|
10423
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10424
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
10425
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10426
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10068
10427
|
var isActive = _ref.isActive;
|
|
10069
10428
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10070
10429
|
}, Colors.MidGrey);
|
|
10071
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
10430
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10072
10431
|
var isOpen = _ref2.isOpen;
|
|
10073
10432
|
return isOpen ? 'block' : 'none';
|
|
10074
10433
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10238,112 +10597,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10238
10597
|
});
|
|
10239
10598
|
};
|
|
10240
10599
|
|
|
10241
|
-
var _templateObject$
|
|
10242
|
-
var
|
|
10243
|
-
var
|
|
10244
|
-
var
|
|
10245
|
-
|
|
10246
|
-
return "var(--base-color-" + color + ")";
|
|
10247
|
-
});
|
|
10248
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10249
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10250
|
-
var color = _ref2.color;
|
|
10251
|
-
return "var(--base-color-" + color + ")";
|
|
10252
|
-
});
|
|
10253
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10254
|
-
var color = _ref3.color;
|
|
10255
|
-
return "var(--base-color-" + color + ")";
|
|
10256
|
-
});
|
|
10257
|
-
|
|
10258
|
-
/**
|
|
10259
|
-
* Password strength indicator component.
|
|
10260
|
-
* This renders some number of lines (6 by default)
|
|
10261
|
-
* which should become active when the user improves
|
|
10262
|
-
* the strength of the entered password.
|
|
10263
|
-
*
|
|
10264
|
-
* ## Sections
|
|
10265
|
-
* To set number of sections it should be passed
|
|
10266
|
-
* as `sections` prop.
|
|
10267
|
-
*
|
|
10268
|
-
* ## Active section
|
|
10269
|
-
* To set number of active sections it should be passed
|
|
10270
|
-
* as `activeSections` prop.
|
|
10271
|
-
*
|
|
10272
|
-
* ## Colors
|
|
10273
|
-
* Color of every element can be controlled by properties:
|
|
10274
|
-
* `sectionsColor`, `activeSectionsColor`,
|
|
10275
|
-
* `textColor`, `strengthLabelColor`.
|
|
10276
|
-
*
|
|
10277
|
-
* ## Text
|
|
10278
|
-
* `text` prop is used to render some message.
|
|
10279
|
-
* For example error (together with proper red color)
|
|
10280
|
-
* or some password requirement. It can be empty.
|
|
10281
|
-
*
|
|
10282
|
-
* ## Strength label
|
|
10283
|
-
* `strengthLabel` prop is used to render strength characteristic
|
|
10284
|
-
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10285
|
-
* It can be empty.
|
|
10286
|
-
*/
|
|
10287
|
-
|
|
10288
|
-
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10289
|
-
var _ref$sections = _ref.sections,
|
|
10290
|
-
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10291
|
-
_ref$activeSections = _ref.activeSections,
|
|
10292
|
-
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10293
|
-
_ref$sectionsColor = _ref.sectionsColor,
|
|
10294
|
-
sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
|
|
10295
|
-
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10296
|
-
activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
|
|
10297
|
-
_ref$text = _ref.text,
|
|
10298
|
-
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10299
|
-
_ref$textColor = _ref.textColor,
|
|
10300
|
-
textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
|
|
10301
|
-
_ref$strengthLabel = _ref.strengthLabel,
|
|
10302
|
-
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10303
|
-
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10304
|
-
strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
|
|
10305
|
-
|
|
10306
|
-
var setSectionColor = function setSectionColor(index) {
|
|
10307
|
-
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10308
|
-
};
|
|
10309
|
-
|
|
10310
|
-
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10311
|
-
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10312
|
-
};
|
|
10313
|
-
|
|
10314
|
-
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10315
|
-
"data-testid": "password-strength-container"
|
|
10316
|
-
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10317
|
-
"data-testid": "password-strength-sections"
|
|
10318
|
-
}, Array.from({
|
|
10319
|
-
length: sections
|
|
10320
|
-
}, function (_section, i) {
|
|
10321
|
-
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10322
|
-
key: i,
|
|
10323
|
-
color: setSectionColor(i),
|
|
10324
|
-
"data-testid": setSectionDataTestId(i)
|
|
10325
|
-
});
|
|
10326
|
-
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10327
|
-
color: textColor,
|
|
10328
|
-
"data-testid": "password-strength-text"
|
|
10329
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10330
|
-
level: 6
|
|
10331
|
-
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10332
|
-
color: strengthLabelColor,
|
|
10333
|
-
"data-testid": "password-strength-label"
|
|
10334
|
-
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10335
|
-
level: 2
|
|
10336
|
-
}, strengthLabel))));
|
|
10337
|
-
};
|
|
10338
|
-
|
|
10339
|
-
var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10340
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10341
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10342
|
-
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10343
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10600
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$P, _templateObject4$E, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10601
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10602
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10603
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10604
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10344
10605
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10345
10606
|
}, devices.tablet, devices.mobile);
|
|
10346
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
10607
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
|
|
10347
10608
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10348
10609
|
}, devices.mobile);
|
|
10349
10610
|
var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
@@ -10621,9 +10882,9 @@ var LiveChat = function LiveChat() {
|
|
|
10621
10882
|
});
|
|
10622
10883
|
};
|
|
10623
10884
|
|
|
10624
|
-
var _templateObject$
|
|
10625
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10626
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
10885
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
10886
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
10887
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
10627
10888
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10628
10889
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10629
10890
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10651,11 +10912,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10651
10912
|
}, children)));
|
|
10652
10913
|
};
|
|
10653
10914
|
|
|
10654
|
-
var _templateObject$
|
|
10655
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
10656
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
10657
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10658
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
10915
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
|
|
10916
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
10917
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
10918
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10919
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
10659
10920
|
|
|
10660
10921
|
var MAX_Z_INDEX = 9999999999;
|
|
10661
10922
|
|
|
@@ -10775,8 +11036,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10775
11036
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
10776
11037
|
};
|
|
10777
11038
|
|
|
10778
|
-
var _templateObject$
|
|
10779
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
11039
|
+
var _templateObject$1n;
|
|
11040
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
10780
11041
|
var theme = _ref.theme;
|
|
10781
11042
|
return theme.colors.primary;
|
|
10782
11043
|
}, function (_ref2) {
|
|
@@ -11717,5 +11978,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templa
|
|
|
11717
11978
|
return theme.fonts.tablet.sizes.body[1];
|
|
11718
11979
|
}, devices.desktop, devices.largeDesktop);
|
|
11719
11980
|
|
|
11720
|
-
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
|
|
11981
|
+
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
|
|
11721
11982
|
//# sourceMappingURL=chord.esm.js.map
|