@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
|
@@ -125,20 +125,100 @@ var BadgeWrapper = /*#__PURE__*/styled__default.svg(_templateObject || (_templat
|
|
|
125
125
|
|
|
126
126
|
var StreamBadge = function StreamBadge(_ref) {
|
|
127
127
|
var _ref$fillColor = _ref.fillColor,
|
|
128
|
-
fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor
|
|
128
|
+
fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor,
|
|
129
|
+
_ref$align = _ref.align,
|
|
130
|
+
align = _ref$align === void 0 ? 'center' : _ref$align;
|
|
129
131
|
return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
|
|
130
132
|
fillColor: fillColor,
|
|
131
133
|
width: "100%",
|
|
132
134
|
height: "100%",
|
|
133
|
-
viewBox: "
|
|
134
|
-
fill: "none",
|
|
135
|
+
viewBox: "110 450 865 200",
|
|
135
136
|
xmlns: "http://www.w3.org/2000/svg"
|
|
136
137
|
}, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
|
|
137
|
-
d: "
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
d: "
|
|
141
|
-
|
|
138
|
+
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",
|
|
139
|
+
"stroke-width": "0"
|
|
140
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
141
|
+
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",
|
|
142
|
+
"stroke-width": "0"
|
|
143
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
144
|
+
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",
|
|
145
|
+
"stroke-width": "0"
|
|
146
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
147
|
+
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",
|
|
148
|
+
"stroke-width": "0"
|
|
149
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
150
|
+
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",
|
|
151
|
+
"stroke-width": "0"
|
|
152
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
153
|
+
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",
|
|
154
|
+
"stroke-width": "0"
|
|
155
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
156
|
+
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",
|
|
157
|
+
"stroke-width": "0"
|
|
158
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
159
|
+
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",
|
|
160
|
+
"stroke-width": "0"
|
|
161
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
162
|
+
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",
|
|
163
|
+
"stroke-width": "0"
|
|
164
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
165
|
+
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",
|
|
166
|
+
"stroke-width": "0"
|
|
167
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
168
|
+
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",
|
|
169
|
+
"stroke-width": "0"
|
|
170
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
171
|
+
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",
|
|
172
|
+
"stroke-width": "0"
|
|
173
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
174
|
+
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",
|
|
175
|
+
"stroke-width": "0"
|
|
176
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
177
|
+
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",
|
|
178
|
+
"stroke-width": "0"
|
|
179
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
180
|
+
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",
|
|
181
|
+
"stroke-width": "0"
|
|
182
|
+
}), /*#__PURE__*/React__default.createElement("polygon", {
|
|
183
|
+
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",
|
|
184
|
+
"stroke-width": "0"
|
|
185
|
+
})), align === 'left' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
|
|
186
|
+
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",
|
|
187
|
+
"stroke-width": "0"
|
|
188
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
189
|
+
d: "M184,630.37v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
|
|
190
|
+
"stroke-width": "0"
|
|
191
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
192
|
+
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",
|
|
193
|
+
"stroke-width": "0"
|
|
194
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
195
|
+
d: "M271.93,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
|
|
196
|
+
"stroke-width": "0"
|
|
197
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
198
|
+
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",
|
|
199
|
+
"stroke-width": "0"
|
|
200
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
201
|
+
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",
|
|
202
|
+
"stroke-width": "0"
|
|
203
|
+
})), align === 'center' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
|
|
204
|
+
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",
|
|
205
|
+
"stroke-width": "0"
|
|
206
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
207
|
+
d: "M434.49,626.68v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
|
|
208
|
+
"stroke-width": "0"
|
|
209
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
210
|
+
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",
|
|
211
|
+
"stroke-width": "0"
|
|
212
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
213
|
+
d: "M522.42,626.68v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
|
|
214
|
+
"stroke-width": "0"
|
|
215
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
216
|
+
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",
|
|
217
|
+
"stroke-width": "0"
|
|
218
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
219
|
+
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",
|
|
220
|
+
"stroke-width": "0"
|
|
221
|
+
})));
|
|
142
222
|
};
|
|
143
223
|
|
|
144
224
|
var CinemaBadge = function CinemaBadge(_ref) {
|
|
@@ -2625,7 +2705,39 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateO
|
|
|
2625
2705
|
});
|
|
2626
2706
|
|
|
2627
2707
|
var _templateObject$b;
|
|
2628
|
-
|
|
2708
|
+
/**
|
|
2709
|
+
* # IMPORTANT
|
|
2710
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
2711
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
2712
|
+
*/
|
|
2713
|
+
|
|
2714
|
+
var GridItemLegacy = /*#__PURE__*/styled__default.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) {
|
|
2715
|
+
var columnStartDesktop = _ref.columnStartDesktop;
|
|
2716
|
+
return columnStartDesktop;
|
|
2717
|
+
}, function (_ref2) {
|
|
2718
|
+
var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
|
|
2719
|
+
columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
|
|
2720
|
+
return columnSpanDesktop;
|
|
2721
|
+
}, devices.mobile, function (_ref3) {
|
|
2722
|
+
var columnStartDevice = _ref3.columnStartDevice,
|
|
2723
|
+
columnStartSmallDevice = _ref3.columnStartSmallDevice;
|
|
2724
|
+
return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
|
|
2725
|
+
}, function (_ref4) {
|
|
2726
|
+
var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
|
|
2727
|
+
columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
|
|
2728
|
+
columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
|
|
2729
|
+
return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
|
|
2730
|
+
}, devices.tablet, function (_ref5) {
|
|
2731
|
+
var columnStartDevice = _ref5.columnStartDevice;
|
|
2732
|
+
return columnStartDevice;
|
|
2733
|
+
}, function (_ref6) {
|
|
2734
|
+
var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
|
|
2735
|
+
columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
|
|
2736
|
+
return columnSpanDevice;
|
|
2737
|
+
});
|
|
2738
|
+
|
|
2739
|
+
var _templateObject$c;
|
|
2740
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.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) {
|
|
2629
2741
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2630
2742
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2631
2743
|
return aspectRatio;
|
|
@@ -2643,8 +2755,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$b
|
|
|
2643
2755
|
return aspectRatio;
|
|
2644
2756
|
});
|
|
2645
2757
|
|
|
2646
|
-
var _templateObject$
|
|
2647
|
-
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2758
|
+
var _templateObject$d, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
2759
|
+
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
2648
2760
|
var height = _ref.height;
|
|
2649
2761
|
return height ? height + "px" : '6px';
|
|
2650
2762
|
});
|
|
@@ -2727,13 +2839,13 @@ var Progress = function Progress(_ref) {
|
|
|
2727
2839
|
}, renderSteps()));
|
|
2728
2840
|
};
|
|
2729
2841
|
|
|
2730
|
-
var _templateObject$
|
|
2731
|
-
var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2842
|
+
var _templateObject$e, _templateObject2$4, _templateObject3$3;
|
|
2843
|
+
var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
2732
2844
|
var RadioLine = /*#__PURE__*/styled__default.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"])));
|
|
2733
2845
|
var RadioError = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
2734
2846
|
|
|
2735
|
-
var _templateObject$
|
|
2736
|
-
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2847
|
+
var _templateObject$f;
|
|
2848
|
+
var Wrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
2737
2849
|
var typography = _ref.typography;
|
|
2738
2850
|
return typography;
|
|
2739
2851
|
}, function (_ref2) {
|
|
@@ -2789,9 +2901,10 @@ var StyledTag = function StyledTag(_ref) {
|
|
|
2789
2901
|
}, children);
|
|
2790
2902
|
};
|
|
2791
2903
|
var AltHeader = function AltHeader(_ref2) {
|
|
2792
|
-
var
|
|
2904
|
+
var semanticLevel = _ref2.semanticLevel,
|
|
2905
|
+
level = _ref2.level,
|
|
2793
2906
|
children = _ref2.children;
|
|
2794
|
-
var renderedTag = "h" + level;
|
|
2907
|
+
var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
|
|
2795
2908
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
2796
2909
|
tag: renderedTag,
|
|
2797
2910
|
typography: "altHeader",
|
|
@@ -2889,8 +3002,8 @@ var Radio = function Radio(_ref) {
|
|
|
2889
3002
|
}, error)));
|
|
2890
3003
|
};
|
|
2891
3004
|
|
|
2892
|
-
var _templateObject$
|
|
2893
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3005
|
+
var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3006
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
2894
3007
|
var Radio$1 = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
2895
3008
|
var error = _ref.error,
|
|
2896
3009
|
darkMode = _ref.darkMode,
|
|
@@ -2998,8 +3111,8 @@ var Radio2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2998
3111
|
}, error)));
|
|
2999
3112
|
});
|
|
3000
3113
|
|
|
3001
|
-
var _templateObject$
|
|
3002
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3114
|
+
var _templateObject$h, _templateObject2$6, _templateObject3$5;
|
|
3115
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3003
3116
|
var IconWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
3004
3117
|
var theme = _ref.theme;
|
|
3005
3118
|
return theme.colors.primary;
|
|
@@ -3070,8 +3183,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3070
3183
|
}, renderNextIcon()));
|
|
3071
3184
|
};
|
|
3072
3185
|
|
|
3073
|
-
var _templateObject$
|
|
3074
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3186
|
+
var _templateObject$i;
|
|
3187
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3075
3188
|
var fillColor = _ref.fillColor;
|
|
3076
3189
|
return fillColor;
|
|
3077
3190
|
});
|
|
@@ -3095,8 +3208,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3095
3208
|
})));
|
|
3096
3209
|
};
|
|
3097
3210
|
|
|
3098
|
-
var _templateObject$
|
|
3099
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
3211
|
+
var _templateObject$j, _templateObject2$7;
|
|
3212
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3100
3213
|
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
3101
3214
|
|
|
3102
3215
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3115,8 +3228,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3115
3228
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3116
3229
|
};
|
|
3117
3230
|
|
|
3118
|
-
var _templateObject$
|
|
3119
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3231
|
+
var _templateObject$k;
|
|
3232
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3120
3233
|
|
|
3121
3234
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3122
3235
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3326,8 +3439,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3326
3439
|
})))));
|
|
3327
3440
|
};
|
|
3328
3441
|
|
|
3329
|
-
var _templateObject$
|
|
3330
|
-
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$
|
|
3442
|
+
var _templateObject$l, _templateObject2$8;
|
|
3443
|
+
var CustomImage = /*#__PURE__*/styled__default.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);
|
|
3331
3444
|
var SponsorshipStyledIframe = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
|
|
3332
3445
|
|
|
3333
3446
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3360,8 +3473,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3360
3473
|
}));
|
|
3361
3474
|
};
|
|
3362
3475
|
|
|
3363
|
-
var _templateObject$
|
|
3364
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3476
|
+
var _templateObject$m, _templateObject2$9;
|
|
3477
|
+
var TabText = /*#__PURE__*/styled__default.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) {
|
|
3365
3478
|
if (props.withIcon === 'left') {
|
|
3366
3479
|
return "margin-left: 5px;";
|
|
3367
3480
|
}
|
|
@@ -3460,8 +3573,8 @@ var Tab = function Tab(_ref) {
|
|
|
3460
3573
|
}));
|
|
3461
3574
|
};
|
|
3462
3575
|
|
|
3463
|
-
var _templateObject$
|
|
3464
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3576
|
+
var _templateObject$n, _templateObject2$a;
|
|
3577
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
3465
3578
|
var iconName = _ref.iconName;
|
|
3466
3579
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3467
3580
|
}, function (_ref2) {
|
|
@@ -3512,8 +3625,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3512
3625
|
})) : null, children);
|
|
3513
3626
|
};
|
|
3514
3627
|
|
|
3515
|
-
var _templateObject$
|
|
3516
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3628
|
+
var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3629
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3517
3630
|
var width = _ref.width;
|
|
3518
3631
|
return width ? width + "px;" : '100%;';
|
|
3519
3632
|
}, function (_ref2) {
|
|
@@ -3636,8 +3749,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
3636
3749
|
}, error))));
|
|
3637
3750
|
};
|
|
3638
3751
|
|
|
3639
|
-
var _templateObject$
|
|
3640
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3752
|
+
var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
3753
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3641
3754
|
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
3642
3755
|
var width = _ref.width;
|
|
3643
3756
|
if (!width) return 'none';
|
|
@@ -3763,15 +3876,89 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3763
3876
|
}, error)));
|
|
3764
3877
|
});
|
|
3765
3878
|
|
|
3766
|
-
var _templateObject$
|
|
3767
|
-
var
|
|
3879
|
+
var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
3880
|
+
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3881
|
+
var textStyles = /*#__PURE__*/styled.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) {
|
|
3882
|
+
var theme = _ref.theme;
|
|
3883
|
+
return theme.fonts.desktop.weights.body[1];
|
|
3884
|
+
}, function (_ref2) {
|
|
3885
|
+
var theme = _ref2.theme;
|
|
3886
|
+
return theme.fonts.desktop.sizes.altHeaders[6];
|
|
3887
|
+
}, function (_ref3) {
|
|
3888
|
+
var theme = _ref3.theme;
|
|
3889
|
+
return theme.spacing[7];
|
|
3890
|
+
});
|
|
3891
|
+
var Input$1 = /*#__PURE__*/styled__default.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) {
|
|
3892
|
+
var width = _ref4.width;
|
|
3893
|
+
return width ? width + 'px' : '196px';
|
|
3894
|
+
}, function (_ref5) {
|
|
3895
|
+
var theme = _ref5.theme;
|
|
3896
|
+
return theme.colors.darkgrey;
|
|
3897
|
+
}, function (_ref6) {
|
|
3898
|
+
var error = _ref6.error,
|
|
3899
|
+
theme = _ref6.theme;
|
|
3900
|
+
if (!error) return;
|
|
3901
|
+
return "\n border: 1px solid " + theme.colors.error + ";\n ";
|
|
3902
|
+
}, function (_ref7) {
|
|
3903
|
+
var theme = _ref7.theme;
|
|
3904
|
+
return theme.colors.lightgrey;
|
|
3905
|
+
}, function (_ref8) {
|
|
3906
|
+
var darkMode = _ref8.darkMode,
|
|
3907
|
+
theme = _ref8.theme;
|
|
3908
|
+
if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
|
|
3909
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
3910
|
+
});
|
|
3911
|
+
var TextLabel$2 = /*#__PURE__*/styled__default.p(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref9) {
|
|
3912
|
+
var darkMode = _ref9.darkMode,
|
|
3913
|
+
theme = _ref9.theme;
|
|
3914
|
+
return darkMode ? theme.colors.white : theme.colors.black;
|
|
3915
|
+
});
|
|
3916
|
+
var ErrorLabel$2 = /*#__PURE__*/styled__default.p(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref10) {
|
|
3917
|
+
var darkMode = _ref10.darkMode,
|
|
3918
|
+
theme = _ref10.theme;
|
|
3919
|
+
return darkMode ? theme.colors.white : theme.colors.error;
|
|
3920
|
+
});
|
|
3921
|
+
|
|
3922
|
+
/**
|
|
3923
|
+
* @deprecated
|
|
3924
|
+
*
|
|
3925
|
+
* # IMPORTANT
|
|
3926
|
+
* Please use the `<TextField />` component instead of this component if possible.
|
|
3927
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3928
|
+
* */
|
|
3929
|
+
|
|
3930
|
+
var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
3931
|
+
var label = _ref.label,
|
|
3932
|
+
error = _ref.error,
|
|
3933
|
+
_ref$darkMode = _ref.darkMode,
|
|
3934
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3935
|
+
width = _ref.width,
|
|
3936
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width"]);
|
|
3937
|
+
|
|
3938
|
+
return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel$2, {
|
|
3939
|
+
darkMode: darkMode,
|
|
3940
|
+
"data-testid": "text-field-text-label"
|
|
3941
|
+
}, label), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
|
|
3942
|
+
type: "text",
|
|
3943
|
+
error: error,
|
|
3944
|
+
darkMode: darkMode,
|
|
3945
|
+
"data-testid": "text-field-input",
|
|
3946
|
+
width: width
|
|
3947
|
+
}, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
|
|
3948
|
+
darkMode: darkMode,
|
|
3949
|
+
"data-testid": "text-field-error-label"
|
|
3950
|
+
}, error) : null);
|
|
3951
|
+
};
|
|
3952
|
+
|
|
3953
|
+
var _templateObject$r, _templateObject2$e;
|
|
3954
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
3768
3955
|
var iconName = _ref.iconName;
|
|
3769
3956
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3770
3957
|
}, function (_ref2) {
|
|
3771
3958
|
var color = _ref2.color;
|
|
3772
3959
|
return color;
|
|
3773
3960
|
});
|
|
3774
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3961
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.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"])));
|
|
3775
3962
|
|
|
3776
3963
|
var TextLink = function TextLink(_ref) {
|
|
3777
3964
|
var children = _ref.children,
|
|
@@ -3793,20 +3980,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3793
3980
|
})) : null);
|
|
3794
3981
|
};
|
|
3795
3982
|
|
|
3796
|
-
var _templateObject$
|
|
3797
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3983
|
+
var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
|
|
3984
|
+
var LogoWrapper = /*#__PURE__*/styled__default.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) {
|
|
3798
3985
|
var fontSize = _ref.fontSize;
|
|
3799
3986
|
return fontSize + 'px';
|
|
3800
3987
|
}, function (_ref2) {
|
|
3801
3988
|
var color = _ref2.color;
|
|
3802
3989
|
return color;
|
|
3803
3990
|
});
|
|
3804
|
-
var LogoRightSide = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3805
|
-
var LogoLeftSide = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3991
|
+
var LogoRightSide = /*#__PURE__*/styled__default.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"])));
|
|
3992
|
+
var LogoLeftSide = /*#__PURE__*/styled__default.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) {
|
|
3806
3993
|
var color = _ref3.color;
|
|
3807
3994
|
return color;
|
|
3808
3995
|
});
|
|
3809
|
-
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3996
|
+
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
|
|
3810
3997
|
|
|
3811
3998
|
var TextLogoProduct;
|
|
3812
3999
|
|
|
@@ -3828,12 +4015,12 @@ var Logo = function Logo(_ref) {
|
|
|
3828
4015
|
}, /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "ROYAL"), /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "OPERA"), /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "HOUSE")), /*#__PURE__*/React.createElement(LogoRightSide, null, productName));
|
|
3829
4016
|
};
|
|
3830
4017
|
|
|
3831
|
-
var _templateObject$
|
|
3832
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4018
|
+
var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7;
|
|
4019
|
+
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
3833
4020
|
var dark = _ref.dark;
|
|
3834
4021
|
return dark ? 'white' : 'errorstate';
|
|
3835
4022
|
});
|
|
3836
|
-
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$
|
|
4023
|
+
var TickboxLabel$1 = /*#__PURE__*/styled__default.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) {
|
|
3837
4024
|
var dark = _ref2.dark,
|
|
3838
4025
|
disabled = _ref2.disabled;
|
|
3839
4026
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3842,7 +4029,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$f || (_
|
|
|
3842
4029
|
var disabled = _ref3.disabled;
|
|
3843
4030
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3844
4031
|
}, devices.mobileAndTablet);
|
|
3845
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$
|
|
4032
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.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) {
|
|
3846
4033
|
var dark = _ref4.dark,
|
|
3847
4034
|
disabled = _ref4.disabled,
|
|
3848
4035
|
error = _ref4.error;
|
|
@@ -3858,7 +4045,7 @@ var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$9 || (
|
|
|
3858
4045
|
dark = _ref6.dark;
|
|
3859
4046
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3860
4047
|
}, devices.mobile);
|
|
3861
|
-
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
4048
|
+
var TickboxInput = /*#__PURE__*/styled__default.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) {
|
|
3862
4049
|
var dark = _ref7.dark,
|
|
3863
4050
|
whiteBox = _ref7.whiteBox,
|
|
3864
4051
|
disabled = _ref7.disabled;
|
|
@@ -3950,9 +4137,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3950
4137
|
}, error)));
|
|
3951
4138
|
};
|
|
3952
4139
|
|
|
3953
|
-
var _templateObject$
|
|
3954
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3955
|
-
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4140
|
+
var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2;
|
|
4141
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4142
|
+
var Tickbox$1 = /*#__PURE__*/styled__default.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) {
|
|
3956
4143
|
var error = _ref.error,
|
|
3957
4144
|
darkMode = _ref.darkMode,
|
|
3958
4145
|
disabled = _ref.disabled;
|
|
@@ -3975,7 +4162,7 @@ var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templat
|
|
|
3975
4162
|
if (blackBox) return 'var(--base-color-white)';
|
|
3976
4163
|
return ' var(--base-color-black)';
|
|
3977
4164
|
});
|
|
3978
|
-
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$
|
|
4165
|
+
var TickboxLabel$2 = /*#__PURE__*/styled__default.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) {
|
|
3979
4166
|
var blackBox = _ref4.blackBox,
|
|
3980
4167
|
darkMode = _ref4.darkMode;
|
|
3981
4168
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -3986,8 +4173,8 @@ var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$a || (_
|
|
|
3986
4173
|
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3987
4174
|
return '3px solid var(--base-color-lapislazuli)';
|
|
3988
4175
|
});
|
|
3989
|
-
var TickboxIcon = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3990
|
-
var TextLabel$
|
|
4176
|
+
var TickboxIcon = /*#__PURE__*/styled__default.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);
|
|
4177
|
+
var TextLabel$3 = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3991
4178
|
var darkMode = _ref6.darkMode,
|
|
3992
4179
|
disabled = _ref6.disabled;
|
|
3993
4180
|
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
@@ -3995,7 +4182,7 @@ var TextLabel$2 = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templ
|
|
|
3995
4182
|
if (disabled) return 'var(--base-color-darkgrey)';
|
|
3996
4183
|
return 'var(--base-color-black)';
|
|
3997
4184
|
});
|
|
3998
|
-
var ErrorLabel$
|
|
4185
|
+
var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3999
4186
|
var darkMode = _ref7.darkMode;
|
|
4000
4187
|
if (darkMode) return 'var(--base-color-white)';
|
|
4001
4188
|
return 'var(--base-color-errorstate)';
|
|
@@ -4047,13 +4234,13 @@ var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4047
4234
|
blackBox: blackBox
|
|
4048
4235
|
}, /*#__PURE__*/React__default.createElement(TickboxIcon, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4049
4236
|
iconName: "Tick"
|
|
4050
|
-
}))), /*#__PURE__*/React__default.createElement(TextLabel$
|
|
4237
|
+
}))), /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
4051
4238
|
disabled: disabled,
|
|
4052
4239
|
darkMode: darkMode,
|
|
4053
4240
|
"data-testid": "tickbox-content"
|
|
4054
4241
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4055
4242
|
level: 1
|
|
4056
|
-
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
4243
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
4057
4244
|
darkMode: darkMode,
|
|
4058
4245
|
"data-testid": "tickbox-error-label"
|
|
4059
4246
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -4061,18 +4248,18 @@ var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4061
4248
|
}, error)));
|
|
4062
4249
|
});
|
|
4063
4250
|
|
|
4064
|
-
var _templateObject$
|
|
4065
|
-
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4251
|
+
var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4252
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4066
4253
|
var color = _ref.color;
|
|
4067
4254
|
return color;
|
|
4068
4255
|
});
|
|
4069
|
-
var Line = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4256
|
+
var Line = /*#__PURE__*/styled__default.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) {
|
|
4070
4257
|
var color = _ref2.color;
|
|
4071
4258
|
return color;
|
|
4072
4259
|
}, devices.mobileAndTablet);
|
|
4073
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4074
|
-
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4075
|
-
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4260
|
+
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4261
|
+
var ValuesWrapper = /*#__PURE__*/styled__default.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);
|
|
4262
|
+
var TimerLabel = /*#__PURE__*/styled__default.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"])));
|
|
4076
4263
|
var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
4077
4264
|
var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4078
4265
|
var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -4170,8 +4357,8 @@ var Timer = function Timer(_ref) {
|
|
|
4170
4357
|
}));
|
|
4171
4358
|
};
|
|
4172
4359
|
|
|
4173
|
-
var _templateObject$
|
|
4174
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4360
|
+
var _templateObject$w;
|
|
4361
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.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"])));
|
|
4175
4362
|
|
|
4176
4363
|
var TypeTags = function TypeTags(_ref) {
|
|
4177
4364
|
var list = _ref.list;
|
|
@@ -4913,12 +5100,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
4913
5100
|
}
|
|
4914
5101
|
});
|
|
4915
5102
|
|
|
4916
|
-
var _templateObject$
|
|
4917
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
4918
|
-
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
4919
|
-
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4920
|
-
var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4921
|
-
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5103
|
+
var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5104
|
+
var VideoPlayButton = /*#__PURE__*/styled__default.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"])));
|
|
5105
|
+
var VideoFullscreenButton = /*#__PURE__*/styled__default.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"])));
|
|
5106
|
+
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5107
|
+
var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.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"])));
|
|
5108
|
+
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4922
5109
|
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
4923
5110
|
var VideoMute = /*#__PURE__*/styled__default.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"])));
|
|
4924
5111
|
var thumbStyles = /*#__PURE__*/styled.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"])));
|
|
@@ -4987,6 +5174,16 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4987
5174
|
video.loop = loop;
|
|
4988
5175
|
}
|
|
4989
5176
|
}, [loop]);
|
|
5177
|
+
React.useEffect(function () {
|
|
5178
|
+
var handleFullscreenChange = function handleFullscreenChange() {
|
|
5179
|
+
setIsFullscreen(!!document.fullscreenElement);
|
|
5180
|
+
};
|
|
5181
|
+
|
|
5182
|
+
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
5183
|
+
return function () {
|
|
5184
|
+
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
5185
|
+
};
|
|
5186
|
+
}, []);
|
|
4990
5187
|
var handleFullscreen = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
|
|
4991
5188
|
var videoContainer;
|
|
4992
5189
|
return runtime_1.wrap(function _callee$(_context) {
|
|
@@ -5121,13 +5318,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5121
5318
|
})));
|
|
5122
5319
|
};
|
|
5123
5320
|
|
|
5124
|
-
var _templateObject$
|
|
5125
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5126
|
-
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5321
|
+
var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7;
|
|
5322
|
+
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
5323
|
+
var StepperError = /*#__PURE__*/styled__default.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) {
|
|
5127
5324
|
var darkMode = _ref.darkMode;
|
|
5128
5325
|
return darkMode ? 'white' : 'errorstate';
|
|
5129
5326
|
});
|
|
5130
|
-
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5327
|
+
var StepperBox = /*#__PURE__*/styled__default.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) {
|
|
5131
5328
|
var darkMode = _ref2.darkMode,
|
|
5132
5329
|
disabled = _ref2.disabled,
|
|
5133
5330
|
error = _ref2.error;
|
|
@@ -5149,11 +5346,11 @@ var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templa
|
|
|
5149
5346
|
var disabled = _ref6.disabled;
|
|
5150
5347
|
return disabled ? 'midgrey' : 'black';
|
|
5151
5348
|
});
|
|
5152
|
-
var StepperValue = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
5349
|
+
var StepperValue = /*#__PURE__*/styled__default.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) {
|
|
5153
5350
|
var disabled = _ref7.disabled;
|
|
5154
5351
|
return disabled ? 'not-allowed' : 'text';
|
|
5155
5352
|
});
|
|
5156
|
-
var StepperButton = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5353
|
+
var StepperButton = /*#__PURE__*/styled__default.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) {
|
|
5157
5354
|
var disabled = _ref8.disabled;
|
|
5158
5355
|
return disabled ? 'not-allowed' : 'pointer';
|
|
5159
5356
|
});
|
|
@@ -5349,18 +5546,18 @@ var Component = function Component(_ref) {
|
|
|
5349
5546
|
}, error)));
|
|
5350
5547
|
};
|
|
5351
5548
|
|
|
5352
|
-
var _templateObject$
|
|
5353
|
-
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5549
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5550
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5354
5551
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5355
5552
|
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 ";
|
|
5356
5553
|
});
|
|
5357
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5358
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
5359
|
-
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5554
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.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);
|
|
5555
|
+
var NavigationGrid = /*#__PURE__*/styled__default(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);
|
|
5556
|
+
var SearchBackground = /*#__PURE__*/styled__default.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) {
|
|
5360
5557
|
var visible = _ref2.visible;
|
|
5361
5558
|
return visible ? 'visible' : 'hidden';
|
|
5362
5559
|
}, zIndexes.search, devices.mobile);
|
|
5363
|
-
var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
5560
|
+
var GridItemSearch = /*#__PURE__*/styled__default(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) {
|
|
5364
5561
|
var visible = _ref3.visible;
|
|
5365
5562
|
return visible ? 'visible' : 'hidden';
|
|
5366
5563
|
}, zIndexes.search, devices.mobile);
|
|
@@ -5374,8 +5571,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_temp
|
|
|
5374
5571
|
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5375
5572
|
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
5376
5573
|
|
|
5377
|
-
var _templateObject$
|
|
5378
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5574
|
+
var _templateObject$A;
|
|
5575
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.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"])));
|
|
5379
5576
|
|
|
5380
5577
|
var Logo$1 = function Logo(_ref) {
|
|
5381
5578
|
var _ref$id = _ref.id,
|
|
@@ -5404,11 +5601,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
5404
5601
|
}))));
|
|
5405
5602
|
};
|
|
5406
5603
|
|
|
5407
|
-
var _templateObject$
|
|
5408
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5604
|
+
var _templateObject$B;
|
|
5605
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.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);
|
|
5409
5606
|
|
|
5410
|
-
var _templateObject$
|
|
5411
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5607
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$g, _templateObject4$d;
|
|
5608
|
+
var BasketContainer = /*#__PURE__*/styled__default.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) {
|
|
5412
5609
|
var selected = _ref.selected,
|
|
5413
5610
|
colorPrimary = _ref.colorPrimary;
|
|
5414
5611
|
|
|
@@ -5436,9 +5633,9 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_te
|
|
|
5436
5633
|
|
|
5437
5634
|
return '';
|
|
5438
5635
|
});
|
|
5439
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5440
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5441
|
-
var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
5636
|
+
var SvgContainer = /*#__PURE__*/styled__default.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"])));
|
|
5637
|
+
var NumContainer = /*#__PURE__*/styled__default.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"])));
|
|
5638
|
+
var BasketText = /*#__PURE__*/styled__default.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"])));
|
|
5442
5639
|
|
|
5443
5640
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
5444
5641
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -5596,8 +5793,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5596
5793
|
}, expiryTime ? basketText : text) : ''));
|
|
5597
5794
|
};
|
|
5598
5795
|
|
|
5599
|
-
var _templateObject$
|
|
5600
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5796
|
+
var _templateObject$D, _templateObject2$n;
|
|
5797
|
+
var SearchContainer = /*#__PURE__*/styled__default.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) {
|
|
5601
5798
|
var selected = _ref.selected,
|
|
5602
5799
|
colorPrimary = _ref.colorPrimary;
|
|
5603
5800
|
|
|
@@ -5613,7 +5810,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_te
|
|
|
5613
5810
|
var colorPrimary = _ref3.colorPrimary;
|
|
5614
5811
|
return colorPrimary;
|
|
5615
5812
|
});
|
|
5616
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5813
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5617
5814
|
|
|
5618
5815
|
var Search$1 = function Search(_ref) {
|
|
5619
5816
|
var _ref$selected = _ref.selected,
|
|
@@ -5889,23 +6086,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
5889
6086
|
}));
|
|
5890
6087
|
};
|
|
5891
6088
|
|
|
5892
|
-
var _templateObject$
|
|
5893
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5894
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6089
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject4$e;
|
|
6090
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
6091
|
+
var ItemsContainer = /*#__PURE__*/styled__default.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) {
|
|
5895
6092
|
if (props.showMenu) {
|
|
5896
6093
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5897
6094
|
}
|
|
5898
6095
|
|
|
5899
6096
|
return "display: none;";
|
|
5900
6097
|
});
|
|
5901
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6098
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.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) {
|
|
5902
6099
|
var colorPrimary = _ref.colorPrimary;
|
|
5903
6100
|
return colorPrimary;
|
|
5904
6101
|
}, function (_ref2) {
|
|
5905
6102
|
var colorPrimary = _ref2.colorPrimary;
|
|
5906
6103
|
return colorPrimary;
|
|
5907
6104
|
}, devices.mobileAndTablet);
|
|
5908
|
-
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6105
|
+
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5909
6106
|
|
|
5910
6107
|
var Tabs = function Tabs(_ref) {
|
|
5911
6108
|
var _ref$items = _ref.items,
|
|
@@ -6032,11 +6229,11 @@ var Tabs = function Tabs(_ref) {
|
|
|
6032
6229
|
}, "MENU"))));
|
|
6033
6230
|
};
|
|
6034
6231
|
|
|
6035
|
-
var _templateObject$
|
|
6036
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6037
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6038
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6039
|
-
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6232
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6233
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.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);
|
|
6234
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
6235
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.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"])));
|
|
6236
|
+
var InputContainer = /*#__PURE__*/styled__default.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);
|
|
6040
6237
|
var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6041
6238
|
var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6042
6239
|
|
|
@@ -6270,18 +6467,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
6270
6467
|
})))));
|
|
6271
6468
|
};
|
|
6272
6469
|
|
|
6273
|
-
var _templateObject$
|
|
6274
|
-
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$
|
|
6275
|
-
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6276
|
-
var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6277
|
-
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6278
|
-
var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6470
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$a, _templateObject6$7;
|
|
6471
|
+
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
6472
|
+
var FooterContainer = /*#__PURE__*/styled__default.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"])));
|
|
6473
|
+
var PolicyLinksRow = /*#__PURE__*/styled__default.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);
|
|
6474
|
+
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
6475
|
+
var ArtsLogoRow = /*#__PURE__*/styled__default.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);
|
|
6279
6476
|
var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
6280
6477
|
|
|
6281
|
-
var _templateObject$
|
|
6282
|
-
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
6283
|
-
var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$
|
|
6284
|
-
var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
6478
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$k;
|
|
6479
|
+
var PolicyLinksList = /*#__PURE__*/styled__default.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);
|
|
6480
|
+
var PolicyLinkItem = /*#__PURE__*/styled__default.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);
|
|
6481
|
+
var PolicyLink = /*#__PURE__*/styled__default.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"])));
|
|
6285
6482
|
|
|
6286
6483
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6287
6484
|
var _ref$items = _ref.items,
|
|
@@ -6297,12 +6494,12 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6297
6494
|
}));
|
|
6298
6495
|
};
|
|
6299
6496
|
|
|
6300
|
-
var _templateObject$
|
|
6301
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6302
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6303
|
-
var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6304
|
-
var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$
|
|
6305
|
-
var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6497
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6498
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.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);
|
|
6499
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.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);
|
|
6500
|
+
var SignUpWrapper = /*#__PURE__*/styled__default.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);
|
|
6501
|
+
var SignUpText = /*#__PURE__*/styled__default.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);
|
|
6502
|
+
var ContactWrapper = /*#__PURE__*/styled__default.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);
|
|
6306
6503
|
var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6307
6504
|
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
6308
6505
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default.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"])));
|
|
@@ -6369,15 +6566,15 @@ var Footer = function Footer(_ref) {
|
|
|
6369
6566
|
}, additionalInfo)))));
|
|
6370
6567
|
};
|
|
6371
6568
|
|
|
6372
|
-
var _templateObject$
|
|
6569
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$9;
|
|
6373
6570
|
var LIST_ITEM_GAP = 32;
|
|
6374
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6571
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.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) {
|
|
6375
6572
|
var bottomBorder = _ref.bottomBorder;
|
|
6376
6573
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6377
6574
|
}, zIndexes.anchor);
|
|
6378
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
6379
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6380
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$
|
|
6575
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6576
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6577
|
+
var TabsList = /*#__PURE__*/styled__default.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) {
|
|
6381
6578
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
6382
6579
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6383
6580
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -6388,7 +6585,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$g || (_templateO
|
|
|
6388
6585
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6389
6586
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6390
6587
|
});
|
|
6391
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6588
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.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) {
|
|
6392
6589
|
var fullWidth = _ref5.fullWidth;
|
|
6393
6590
|
return fullWidth ? '74px' : '46px';
|
|
6394
6591
|
});
|
|
@@ -6635,17 +6832,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6635
6832
|
})) : null) : null))));
|
|
6636
6833
|
};
|
|
6637
6834
|
|
|
6638
|
-
var _templateObject$
|
|
6639
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6835
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6836
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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) {
|
|
6640
6837
|
var sticky = _ref.sticky;
|
|
6641
6838
|
return sticky ? 'sticky' : 'initial';
|
|
6642
6839
|
}, zIndexes.anchor);
|
|
6643
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
6644
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6840
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6841
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.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) {
|
|
6645
6842
|
var title = _ref2.title;
|
|
6646
6843
|
return title ? 'row' : 'row-reverse';
|
|
6647
6844
|
}, devices.tablet, devices.mobile);
|
|
6648
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6845
|
+
var AnchorTitle = /*#__PURE__*/styled__default.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);
|
|
6649
6846
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
6650
6847
|
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6651
6848
|
var PrimaryButtonReverse = /*#__PURE__*/styled__default(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) {
|
|
@@ -6696,15 +6893,15 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6696
6893
|
}, message)));
|
|
6697
6894
|
};
|
|
6698
6895
|
|
|
6699
|
-
var _templateObject$
|
|
6700
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6701
|
-
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6702
|
-
var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6896
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$o, _templateObject4$j, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6897
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.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);
|
|
6898
|
+
var PromoLabelWrapper = /*#__PURE__*/styled__default.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"])));
|
|
6899
|
+
var PromoLabel = /*#__PURE__*/styled__default.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) {
|
|
6703
6900
|
var theme = _ref.theme;
|
|
6704
6901
|
return theme.colors.primary;
|
|
6705
6902
|
}, exports.Colors.White);
|
|
6706
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6707
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6903
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6904
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6708
6905
|
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6709
6906
|
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
6710
6907
|
var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
@@ -6777,8 +6974,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
6777
6974
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
6778
6975
|
};
|
|
6779
6976
|
|
|
6780
|
-
var _templateObject$
|
|
6781
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6977
|
+
var _templateObject$M;
|
|
6978
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.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);
|
|
6782
6979
|
|
|
6783
6980
|
var UpsellCards = function UpsellCards(_ref) {
|
|
6784
6981
|
var upsellCards = _ref.upsellCards;
|
|
@@ -6796,20 +6993,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
6796
6993
|
}));
|
|
6797
6994
|
};
|
|
6798
6995
|
|
|
6799
|
-
var _templateObject$
|
|
6800
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6996
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$p;
|
|
6997
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.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) {
|
|
6801
6998
|
var theme = _ref.theme;
|
|
6802
6999
|
return theme.colors.primary;
|
|
6803
7000
|
}, devices.mobile, devices.tablet);
|
|
6804
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6805
|
-
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7001
|
+
var TitleContainer$2 = /*#__PURE__*/styled__default.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);
|
|
7002
|
+
var TextContainer = /*#__PURE__*/styled__default.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);
|
|
6806
7003
|
|
|
6807
|
-
var _templateObject$
|
|
6808
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6809
|
-
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6810
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6811
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6812
|
-
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7004
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q, _templateObject4$k, _templateObject5$e;
|
|
7005
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
7006
|
+
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
7007
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.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);
|
|
7008
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.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);
|
|
7009
|
+
var ContentContainer = /*#__PURE__*/styled__default.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);
|
|
6813
7010
|
|
|
6814
7011
|
var Accordion = function Accordion(_ref) {
|
|
6815
7012
|
var _ref$title = _ref.title,
|
|
@@ -6934,8 +7131,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6934
7131
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6935
7132
|
};
|
|
6936
7133
|
|
|
6937
|
-
var _templateObject$
|
|
6938
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7134
|
+
var _templateObject$P;
|
|
7135
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6939
7136
|
|
|
6940
7137
|
var Accordions = function Accordions(_ref) {
|
|
6941
7138
|
var _ref$items = _ref.items,
|
|
@@ -6953,7 +7150,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6953
7150
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6954
7151
|
contentType: accordion.contentType,
|
|
6955
7152
|
displayLevel: accordion.displayLevel,
|
|
6956
|
-
semanticLevel: accordion.semanticLevel
|
|
7153
|
+
semanticLevel: accordion.semanticLevel,
|
|
7154
|
+
initOpen: accordion.initOpen
|
|
6957
7155
|
}, accordion.children);
|
|
6958
7156
|
}));
|
|
6959
7157
|
};
|
|
@@ -6967,13 +7165,13 @@ var Theme = function Theme(_ref) {
|
|
|
6967
7165
|
}, children);
|
|
6968
7166
|
};
|
|
6969
7167
|
|
|
6970
|
-
var _templateObject$
|
|
6971
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7168
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$r;
|
|
7169
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.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) {
|
|
6972
7170
|
var theme = _ref.theme;
|
|
6973
7171
|
return theme.colors.primary;
|
|
6974
7172
|
}, devices.mobile);
|
|
6975
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6976
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7173
|
+
var SvgContainer$2 = /*#__PURE__*/styled__default.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);
|
|
7174
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
6977
7175
|
|
|
6978
7176
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
6979
7177
|
var title = _ref.title,
|
|
@@ -7010,8 +7208,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7010
7208
|
}))))));
|
|
7011
7209
|
};
|
|
7012
7210
|
|
|
7013
|
-
var _templateObject$
|
|
7014
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
7211
|
+
var _templateObject$R;
|
|
7212
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(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) {
|
|
7015
7213
|
var bgColor = _ref.bgColor,
|
|
7016
7214
|
theme = _ref.theme;
|
|
7017
7215
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7032,32 +7230,32 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7032
7230
|
}), children);
|
|
7033
7231
|
};
|
|
7034
7232
|
|
|
7035
|
-
var _templateObject$
|
|
7233
|
+
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;
|
|
7036
7234
|
var LENGTH_LARGE_TEXT = 28;
|
|
7037
7235
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7038
7236
|
var LENGTH_TEXT_TABLET = 10;
|
|
7039
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7237
|
+
var CardContainer = /*#__PURE__*/styled__default.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) {
|
|
7040
7238
|
var isCardClickable = _ref.isCardClickable;
|
|
7041
7239
|
return isCardClickable ? 'pointer' : 'default';
|
|
7042
7240
|
}, function (_ref2) {
|
|
7043
7241
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7044
7242
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7045
7243
|
});
|
|
7046
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7244
|
+
var HoverContainer = /*#__PURE__*/styled__default.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) {
|
|
7047
7245
|
var lineColor = _ref3.lineColor,
|
|
7048
7246
|
theme = _ref3.theme;
|
|
7049
7247
|
if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
|
|
7050
7248
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7051
7249
|
}, zIndexes.contentOverlay);
|
|
7052
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7053
|
-
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7250
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7251
|
+
var ContentContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
7054
7252
|
var fullWidth = _ref4.fullWidth;
|
|
7055
7253
|
return fullWidth ? '0' : '20px';
|
|
7056
7254
|
}, function (_ref5) {
|
|
7057
7255
|
var fullWidth = _ref5.fullWidth;
|
|
7058
7256
|
return fullWidth ? '0' : '20px';
|
|
7059
7257
|
});
|
|
7060
|
-
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7258
|
+
var TitleContainer$4 = /*#__PURE__*/styled__default.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);
|
|
7061
7259
|
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
|
|
7062
7260
|
var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7063
7261
|
var HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer$1)(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
@@ -7318,9 +7516,9 @@ var Card = function Card(_ref) {
|
|
|
7318
7516
|
dangerouslySetInnerHTML: {
|
|
7319
7517
|
__html: truncatedText
|
|
7320
7518
|
}
|
|
7321
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7519
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7322
7520
|
level: 1
|
|
7323
|
-
}, highlightText))
|
|
7521
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7324
7522
|
fullWidth: fullWidth
|
|
7325
7523
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7326
7524
|
ref: node,
|
|
@@ -7334,9 +7532,9 @@ var Card = function Card(_ref) {
|
|
|
7334
7532
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7335
7533
|
};
|
|
7336
7534
|
|
|
7337
|
-
var _templateObject$
|
|
7338
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7339
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
7535
|
+
var _templateObject$T, _templateObject2$A;
|
|
7536
|
+
var CardsContainer = /*#__PURE__*/styled__default(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);
|
|
7537
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7340
7538
|
|
|
7341
7539
|
var Cards = function Cards(_ref) {
|
|
7342
7540
|
var cards = _ref.cards,
|
|
@@ -7381,18 +7579,18 @@ var Cards = function Cards(_ref) {
|
|
|
7381
7579
|
}));
|
|
7382
7580
|
};
|
|
7383
7581
|
|
|
7384
|
-
var _templateObject$
|
|
7385
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7386
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7582
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
|
|
7583
|
+
var ContentWrapper = /*#__PURE__*/styled__default.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);
|
|
7584
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.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) {
|
|
7387
7585
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7388
7586
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7389
7587
|
}, function (_ref2) {
|
|
7390
7588
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7391
7589
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7392
7590
|
}, devices.mobileAndTablet);
|
|
7393
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7394
|
-
var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7395
|
-
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7591
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7592
|
+
var AddressWrapperMobile = /*#__PURE__*/styled__default.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);
|
|
7593
|
+
var DetailsWrapper = /*#__PURE__*/styled__default.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);
|
|
7396
7594
|
|
|
7397
7595
|
var divideAddressString = function divideAddressString(address) {
|
|
7398
7596
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7450,16 +7648,16 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7450
7648
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7451
7649
|
};
|
|
7452
7650
|
|
|
7453
|
-
var _templateObject$
|
|
7454
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
7455
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
7651
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$8;
|
|
7652
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7653
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.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) {
|
|
7456
7654
|
return props.clickable ? 'pointer' : 'default';
|
|
7457
7655
|
}, devices.mobile);
|
|
7458
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7459
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7656
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7657
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7460
7658
|
return props.showImage ? 2 : '1 / span 4';
|
|
7461
7659
|
}, devices.mobile);
|
|
7462
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7660
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
7463
7661
|
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7464
7662
|
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7465
7663
|
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 ";
|
|
@@ -7533,21 +7731,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7533
7731
|
}), link.text)));
|
|
7534
7732
|
};
|
|
7535
7733
|
|
|
7536
|
-
var _templateObject$
|
|
7537
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7734
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$i;
|
|
7735
|
+
var EditorialGrid = /*#__PURE__*/styled__default.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) {
|
|
7538
7736
|
var imageToLeft = _ref.imageToLeft;
|
|
7539
7737
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7540
7738
|
}, devices.mobile);
|
|
7541
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7739
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
7542
7740
|
var imageToLeft = _ref2.imageToLeft;
|
|
7543
7741
|
return imageToLeft ? 'left' : 'right';
|
|
7544
7742
|
}, devices.mobile);
|
|
7545
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7743
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7546
7744
|
var imageToLeft = _ref3.imageToLeft;
|
|
7547
7745
|
return imageToLeft ? 'right' : 'left';
|
|
7548
7746
|
}, devices.mobile);
|
|
7549
|
-
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$
|
|
7550
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7747
|
+
var EditorialSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
7748
|
+
var EditorialText = /*#__PURE__*/styled__default.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"])));
|
|
7551
7749
|
|
|
7552
7750
|
var Editorial = function Editorial(_ref) {
|
|
7553
7751
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7611,10 +7809,10 @@ var BackgroundColour;
|
|
|
7611
7809
|
BackgroundColour["White"] = "white";
|
|
7612
7810
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
7613
7811
|
|
|
7614
|
-
var _templateObject$
|
|
7615
|
-
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
7616
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7617
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
7812
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p;
|
|
7813
|
+
var InfoContent = /*#__PURE__*/styled__default('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"])));
|
|
7814
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7815
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7618
7816
|
if (!props.infoThemed) {
|
|
7619
7817
|
return;
|
|
7620
7818
|
} else {
|
|
@@ -7625,7 +7823,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (
|
|
|
7625
7823
|
}
|
|
7626
7824
|
}
|
|
7627
7825
|
});
|
|
7628
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
7826
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
7629
7827
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7630
7828
|
}, function (props) {
|
|
7631
7829
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -7738,24 +7936,24 @@ var Information = function Information(_ref) {
|
|
|
7738
7936
|
}))));
|
|
7739
7937
|
};
|
|
7740
7938
|
|
|
7741
|
-
var _templateObject$
|
|
7742
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7939
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
|
|
7940
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default.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) {
|
|
7743
7941
|
var theme = _ref.theme;
|
|
7744
7942
|
return theme.colors.primary;
|
|
7745
7943
|
}, function (_ref2) {
|
|
7746
7944
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7747
7945
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7748
7946
|
}, devices.mobile);
|
|
7749
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7750
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7947
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(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);
|
|
7948
|
+
var TitleWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
7751
7949
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7752
7950
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7753
7951
|
}, devices.mobile);
|
|
7754
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7952
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.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) {
|
|
7755
7953
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7756
7954
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7757
7955
|
}, devices.mobile);
|
|
7758
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7956
|
+
var TextWrapper = /*#__PURE__*/styled__default.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"])));
|
|
7759
7957
|
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
7760
7958
|
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
7761
7959
|
var PageHeadingText = /*#__PURE__*/styled__default.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"])));
|
|
@@ -7766,14 +7964,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7766
7964
|
link = _ref.link,
|
|
7767
7965
|
_ref$sponsor = _ref.sponsor,
|
|
7768
7966
|
sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
|
|
7769
|
-
children = _ref.children
|
|
7967
|
+
children = _ref.children,
|
|
7968
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7969
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
|
|
7970
|
+
_ref$copyCharLimit = _ref.copyCharLimit,
|
|
7971
|
+
copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
|
|
7972
|
+
_ref$titleCharLimit = _ref.titleCharLimit,
|
|
7973
|
+
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
7770
7974
|
|
|
7771
7975
|
var _ref2 = link || {},
|
|
7772
7976
|
linkText = _ref2.text,
|
|
7773
7977
|
restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
7774
7978
|
|
|
7775
|
-
var truncatedText = text == null ? void 0 : text.substring(0,
|
|
7776
|
-
var truncatedTitle = title && title.substring(0,
|
|
7979
|
+
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
7980
|
+
var truncatedTitle = title && title.substring(0, titleCharLimit);
|
|
7777
7981
|
var isTitleUnAvailable = !title;
|
|
7778
7982
|
return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
|
|
7779
7983
|
"data-testid": "page-heading-wrapper",
|
|
@@ -7784,7 +7988,8 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7784
7988
|
}, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
7785
7989
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7786
7990
|
}, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
|
|
7787
|
-
level: 2
|
|
7991
|
+
level: 2,
|
|
7992
|
+
semanticLevel: semanticLevel
|
|
7788
7993
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
7789
7994
|
"data-testid": "page-heading-text"
|
|
7790
7995
|
}, /*#__PURE__*/React__default.createElement(PageHeadingText, {
|
|
@@ -7830,12 +8035,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7830
8035
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
7831
8036
|
};
|
|
7832
8037
|
|
|
7833
|
-
var _templateObject$
|
|
7834
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7835
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7836
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
7837
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7838
|
-
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8038
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
|
|
8039
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.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);
|
|
8040
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.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);
|
|
8041
|
+
var ImpactGrid = /*#__PURE__*/styled__default(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);
|
|
8042
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.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);
|
|
8043
|
+
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7839
8044
|
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7840
8045
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7841
8046
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.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);
|
|
@@ -7851,7 +8056,9 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7851
8056
|
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
7852
8057
|
bgUrlDevice = _ref.bgUrlDevice,
|
|
7853
8058
|
_ref$bgImageAltText = _ref.bgImageAltText,
|
|
7854
|
-
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText
|
|
8059
|
+
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
|
|
8060
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
8061
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
|
|
7855
8062
|
var truncatedText = text && text.substring(0, 75);
|
|
7856
8063
|
|
|
7857
8064
|
var _ref2 = link || {},
|
|
@@ -7887,7 +8094,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7887
8094
|
}, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
7888
8095
|
"data-testid": "impact-text"
|
|
7889
8096
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
7890
|
-
level: 3
|
|
8097
|
+
level: 3,
|
|
8098
|
+
semanticLevel: semanticLevel
|
|
7891
8099
|
}, truncatedText)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
|
|
7892
8100
|
"data-testid": "impact-link"
|
|
7893
8101
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null), scrollHref ? /*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
@@ -7901,21 +8109,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7901
8109
|
}, "Scroll Down")) : null);
|
|
7902
8110
|
};
|
|
7903
8111
|
|
|
7904
|
-
var _templateObject$
|
|
7905
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8112
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject4$s, _templateObject5$l;
|
|
8113
|
+
var PanelGrid = /*#__PURE__*/styled__default(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) {
|
|
7906
8114
|
var color = _ref.color;
|
|
7907
8115
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7908
8116
|
}, devices.mobileAndTablet);
|
|
7909
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8117
|
+
var LeftPanel = /*#__PURE__*/styled__default.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) {
|
|
7910
8118
|
var hasImage = _ref2.hasImage;
|
|
7911
8119
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7912
8120
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7913
8121
|
var hasImage = _ref3.hasImage;
|
|
7914
8122
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7915
8123
|
});
|
|
7916
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7917
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7918
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8124
|
+
var RightPanel = /*#__PURE__*/styled__default.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);
|
|
8125
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
8126
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7919
8127
|
|
|
7920
8128
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7921
8129
|
var _image$src, _image$alt;
|
|
@@ -7946,8 +8154,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7946
8154
|
}))));
|
|
7947
8155
|
};
|
|
7948
8156
|
|
|
7949
|
-
var _templateObject
|
|
7950
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8157
|
+
var _templateObject$$;
|
|
8158
|
+
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7951
8159
|
|
|
7952
8160
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7953
8161
|
var link = _ref.link,
|
|
@@ -7962,14 +8170,16 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7962
8170
|
theme: exports.ThemeType.Stream
|
|
7963
8171
|
}, /*#__PURE__*/React__default.createElement(StreamWrapper, null, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
|
|
7964
8172
|
link: streamLink
|
|
7965
|
-
}), /*#__PURE__*/React__default.createElement(StreamBadge,
|
|
8173
|
+
}), /*#__PURE__*/React__default.createElement(StreamBadge, {
|
|
8174
|
+
align: "left"
|
|
8175
|
+
}))));
|
|
7966
8176
|
};
|
|
7967
8177
|
|
|
7968
|
-
var _templateObject$
|
|
7969
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7970
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$
|
|
7971
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7972
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8178
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8179
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.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);
|
|
8180
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.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"])));
|
|
8181
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8182
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.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);
|
|
7973
8183
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
|
|
7974
8184
|
var invert = _ref.invert,
|
|
7975
8185
|
theme = _ref.theme;
|
|
@@ -8070,11 +8280,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
|
|
|
8070
8280
|
}, truncate(stripAllHtmlTags(brandingText), 25));
|
|
8071
8281
|
|
|
8072
8282
|
case 'StreamLogo':
|
|
8073
|
-
return /*#__PURE__*/React__default.createElement(
|
|
8074
|
-
color: color,
|
|
8075
|
-
fontSize: 12,
|
|
8076
|
-
productName: TextLogoProduct.Stream
|
|
8077
|
-
});
|
|
8283
|
+
return /*#__PURE__*/React__default.createElement(StreamBadge, null);
|
|
8078
8284
|
|
|
8079
8285
|
case 'CinemaLogo':
|
|
8080
8286
|
return /*#__PURE__*/React__default.createElement(Logo, {
|
|
@@ -8100,7 +8306,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8100
8306
|
var isIOS = function isIOS() {
|
|
8101
8307
|
try {
|
|
8102
8308
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8103
|
-
if (typeof navigator === undefined) return false;
|
|
8309
|
+
if (typeof navigator === 'undefined') return false;
|
|
8104
8310
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8105
8311
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8106
8312
|
} catch (e) {
|
|
@@ -8116,7 +8322,7 @@ var useIOS = function useIOS() {
|
|
|
8116
8322
|
setIOS = _useState[1];
|
|
8117
8323
|
|
|
8118
8324
|
React.useEffect(function () {
|
|
8119
|
-
if (typeof navigator === undefined) return;
|
|
8325
|
+
if (typeof navigator === 'undefined') return;
|
|
8120
8326
|
setIOS(isIOS());
|
|
8121
8327
|
}, []);
|
|
8122
8328
|
return IOS;
|
|
@@ -8255,7 +8461,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8255
8461
|
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8256
8462
|
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8257
8463
|
brandingText = _ref4.brandingText,
|
|
8258
|
-
brandingLink = _ref4.brandingLink
|
|
8464
|
+
brandingLink = _ref4.brandingLink,
|
|
8465
|
+
_ref4$showCopy = _ref4.showCopy,
|
|
8466
|
+
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
|
|
8467
|
+
_ref4$semanticLevel = _ref4.semanticLevel,
|
|
8468
|
+
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
8259
8469
|
|
|
8260
8470
|
var _ref5 = link || {},
|
|
8261
8471
|
linkText = _ref5.text,
|
|
@@ -8281,7 +8491,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8281
8491
|
})) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
|
|
8282
8492
|
video: video,
|
|
8283
8493
|
poster: poster
|
|
8284
|
-
})), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8494
|
+
})), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8285
8495
|
className: "page-heading-compact__background",
|
|
8286
8496
|
invert: invert
|
|
8287
8497
|
}, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
|
|
@@ -8291,22 +8501,22 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8291
8501
|
invert: invert
|
|
8292
8502
|
}), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8293
8503
|
level: titleSize,
|
|
8294
|
-
semanticLevel:
|
|
8504
|
+
semanticLevel: semanticLevel
|
|
8295
8505
|
}, title && truncate(title, 40))), link && /*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
|
|
8296
8506
|
invert: invert,
|
|
8297
8507
|
className: "page-heading-compact__button"
|
|
8298
8508
|
}), linkText))));
|
|
8299
8509
|
};
|
|
8300
8510
|
|
|
8301
|
-
var _templateObject
|
|
8302
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject
|
|
8303
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$
|
|
8511
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t;
|
|
8512
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8513
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.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
|
|
8304
8514
|
|
|
8305
|
-
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8515
|
+
var PageNumber = /*#__PURE__*/styled__default.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) {
|
|
8306
8516
|
var active = _ref.active;
|
|
8307
8517
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8308
8518
|
});
|
|
8309
|
-
var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$
|
|
8519
|
+
var NextPage = /*#__PURE__*/styled__default(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"])));
|
|
8310
8520
|
|
|
8311
8521
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8312
8522
|
// If there are less than 6 pages, return all pages
|
|
@@ -8375,12 +8585,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
8375
8585
|
}))));
|
|
8376
8586
|
};
|
|
8377
8587
|
|
|
8378
|
-
var _templateObject$
|
|
8379
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8380
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8381
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8382
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8383
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8588
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$h;
|
|
8589
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(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);
|
|
8590
|
+
var PersonWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8591
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8592
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
8593
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
8384
8594
|
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
8385
8595
|
|
|
8386
8596
|
var Person = function Person(_ref) {
|
|
@@ -8432,11 +8642,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8432
8642
|
}));
|
|
8433
8643
|
};
|
|
8434
8644
|
|
|
8435
|
-
var _templateObject$
|
|
8436
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8437
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8438
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8439
|
-
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8645
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v;
|
|
8646
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8647
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
8648
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8649
|
+
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
8440
8650
|
|
|
8441
8651
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8442
8652
|
return array.reduce(function (acc, item) {
|
|
@@ -8447,12 +8657,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8447
8657
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8448
8658
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8449
8659
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8450
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8660
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8661
|
+
key: index
|
|
8662
|
+
}, title));
|
|
8451
8663
|
} else if (index > 0) {
|
|
8452
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8664
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8665
|
+
key: index
|
|
8666
|
+
}, ", ", title);
|
|
8453
8667
|
}
|
|
8454
8668
|
|
|
8455
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8669
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8670
|
+
key: index
|
|
8671
|
+
}, title);
|
|
8456
8672
|
}));
|
|
8457
8673
|
};
|
|
8458
8674
|
|
|
@@ -8504,14 +8720,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8504
8720
|
}));
|
|
8505
8721
|
};
|
|
8506
8722
|
|
|
8507
|
-
var _templateObject$
|
|
8723
|
+
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;
|
|
8508
8724
|
var LENGTH_TEXT = 28;
|
|
8509
8725
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8510
8726
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8511
8727
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8512
8728
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8513
8729
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8514
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8730
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(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) {
|
|
8515
8731
|
var imageToLeft = _ref.imageToLeft;
|
|
8516
8732
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8517
8733
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8521,8 +8737,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
|
|
|
8521
8737
|
var asCard = _ref3.asCard;
|
|
8522
8738
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8523
8739
|
});
|
|
8524
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8525
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8740
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
8741
|
+
var PromoWithTagsText = /*#__PURE__*/styled__default.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) {
|
|
8526
8742
|
var theme = _ref4.theme;
|
|
8527
8743
|
return theme.colors.black;
|
|
8528
8744
|
}, function (_ref5) {
|
|
@@ -8532,7 +8748,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$D || (
|
|
|
8532
8748
|
var theme = _ref6.theme;
|
|
8533
8749
|
return theme.colors.primary;
|
|
8534
8750
|
});
|
|
8535
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8751
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
8536
8752
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8537
8753
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8538
8754
|
}, function (_ref8) {
|
|
@@ -8560,7 +8776,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$v ||
|
|
|
8560
8776
|
|
|
8561
8777
|
return '';
|
|
8562
8778
|
});
|
|
8563
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8779
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8564
8780
|
var marginBottom = _ref10.marginBottom;
|
|
8565
8781
|
return marginBottom + "px";
|
|
8566
8782
|
});
|
|
@@ -8782,26 +8998,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8782
8998
|
}))));
|
|
8783
8999
|
};
|
|
8784
9000
|
|
|
8785
|
-
var _templateObject$
|
|
9001
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F, _templateObject4$x, _templateObject5$p, _templateObject6$j, _templateObject7$d;
|
|
8786
9002
|
var LENGTH_TEXT$2 = 28;
|
|
8787
9003
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8788
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9004
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(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) {
|
|
8789
9005
|
var imageToLeft = _ref.imageToLeft;
|
|
8790
9006
|
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'";
|
|
8791
9007
|
}, devices.tablet, function (_ref2) {
|
|
8792
9008
|
var imageToLeft = _ref2.imageToLeft;
|
|
8793
9009
|
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'";
|
|
8794
9010
|
}, devices.mobile);
|
|
8795
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9011
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
8796
9012
|
var imageToLeft = _ref3.imageToLeft;
|
|
8797
9013
|
return imageToLeft ? 'left' : 'right';
|
|
8798
9014
|
}, devices.mobile);
|
|
8799
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9015
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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) {
|
|
8800
9016
|
var imageToLeft = _ref4.imageToLeft;
|
|
8801
9017
|
return imageToLeft ? 'right' : 'left';
|
|
8802
9018
|
}, devices.mobile);
|
|
8803
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8804
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
9019
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled__default.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);
|
|
9020
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
8805
9021
|
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
8806
9022
|
var theme = _ref5.theme;
|
|
8807
9023
|
return theme.colors.black;
|
|
@@ -8838,8 +9054,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
|
|
|
8838
9054
|
return '';
|
|
8839
9055
|
});
|
|
8840
9056
|
|
|
8841
|
-
var _templateObject$
|
|
8842
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9057
|
+
var _templateObject$16;
|
|
9058
|
+
var VideoContainer = /*#__PURE__*/styled__default.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) {
|
|
8843
9059
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8844
9060
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8845
9061
|
return aspectRatio;
|
|
@@ -8851,6 +9067,10 @@ var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_te
|
|
|
8851
9067
|
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
8852
9068
|
aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
8853
9069
|
return AspectRatioLegacy[aspectRatio];
|
|
9070
|
+
}, function (_ref4) {
|
|
9071
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
9072
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
9073
|
+
return aspectRatio;
|
|
8854
9074
|
});
|
|
8855
9075
|
|
|
8856
9076
|
var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
@@ -8867,17 +9087,50 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
8867
9087
|
return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
|
|
8868
9088
|
};
|
|
8869
9089
|
|
|
9090
|
+
/**
|
|
9091
|
+
* Generates a random string in the format XXX-XXX.
|
|
9092
|
+
* Does not meet UUID standards.
|
|
9093
|
+
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
9094
|
+
*
|
|
9095
|
+
* @return {string} A random string in the format XXX-XXX.
|
|
9096
|
+
*/
|
|
9097
|
+
var generateDomElementId = function generateDomElementId() {
|
|
9098
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
9099
|
+
var datePart = Date.now().toString().slice(-3);
|
|
9100
|
+
return randomPart + "-" + datePart;
|
|
9101
|
+
};
|
|
9102
|
+
|
|
8870
9103
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8871
9104
|
var video = _ref.video,
|
|
8872
9105
|
settings = _ref.settings;
|
|
8873
|
-
var
|
|
8874
|
-
autoPlay = settings.autoPlay;
|
|
9106
|
+
var videoRef = React.useRef(null);
|
|
8875
9107
|
|
|
8876
9108
|
var _useState = React.useState(exports.AspectRatio['16:9']),
|
|
8877
9109
|
aspectRatio = _useState[0],
|
|
8878
9110
|
setAspectRatio = _useState[1];
|
|
8879
9111
|
|
|
8880
|
-
var
|
|
9112
|
+
var _React$useState = React__default.useState(false),
|
|
9113
|
+
isVideoReady = _React$useState[0],
|
|
9114
|
+
setIsVideoReady = _React$useState[1];
|
|
9115
|
+
|
|
9116
|
+
var muted = settings.muted,
|
|
9117
|
+
autoPlay = settings.autoPlay;
|
|
9118
|
+
React__default.useEffect(function () {
|
|
9119
|
+
var changeVideoReadiness = function changeVideoReadiness() {
|
|
9120
|
+
setIsVideoReady(true);
|
|
9121
|
+
};
|
|
9122
|
+
|
|
9123
|
+
if (videoRef.current) {
|
|
9124
|
+
videoRef.current.addEventListener('canplay', changeVideoReadiness);
|
|
9125
|
+
return function () {
|
|
9126
|
+
var _videoRef$current;
|
|
9127
|
+
|
|
9128
|
+
return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
|
|
9129
|
+
};
|
|
9130
|
+
}
|
|
9131
|
+
|
|
9132
|
+
return undefined;
|
|
9133
|
+
}, []);
|
|
8881
9134
|
|
|
8882
9135
|
var handleMetadataLoaded = function handleMetadataLoaded() {
|
|
8883
9136
|
if (videoRef.current) {
|
|
@@ -8886,18 +9139,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8886
9139
|
}
|
|
8887
9140
|
};
|
|
8888
9141
|
|
|
8889
|
-
var
|
|
9142
|
+
var videoElementId = React.useMemo(function () {
|
|
9143
|
+
return "video-id-" + generateDomElementId();
|
|
9144
|
+
}, []);
|
|
9145
|
+
var clonedVideo = /*#__PURE__*/React.cloneElement(video, _extends({
|
|
9146
|
+
playsInline: true
|
|
9147
|
+
}, muted ? {
|
|
8890
9148
|
muted: true
|
|
8891
9149
|
} : {}, autoPlay && muted ? {
|
|
8892
9150
|
autoPlay: true
|
|
8893
9151
|
} : {}, {
|
|
8894
9152
|
height: '100%',
|
|
8895
9153
|
width: '100%',
|
|
8896
|
-
onLoadedMetadata: handleMetadataLoaded
|
|
9154
|
+
onLoadedMetadata: handleMetadataLoaded,
|
|
9155
|
+
id: videoElementId
|
|
8897
9156
|
}, {
|
|
9157
|
+
poster: autoPlay && isVideoReady ? undefined : video.props.poster,
|
|
8898
9158
|
ref: videoRef
|
|
8899
9159
|
}));
|
|
8900
|
-
var videoElementId = clonedVideo.props.id;
|
|
8901
9160
|
var videoContainerId = "video-container-for-" + videoElementId;
|
|
8902
9161
|
|
|
8903
9162
|
var videoControlsProps = _extends({}, settings, {
|
|
@@ -8905,14 +9164,12 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8905
9164
|
videoContainerId: videoContainerId
|
|
8906
9165
|
});
|
|
8907
9166
|
|
|
8908
|
-
|
|
8909
|
-
setAspectRatio(exports.AspectRatio['16:9']);
|
|
8910
|
-
}, [video.props.src]);
|
|
9167
|
+
var showVideoControls = autoPlay ? isVideoReady : true;
|
|
8911
9168
|
return /*#__PURE__*/React__default.createElement(VideoContainer, {
|
|
8912
9169
|
aspectRatio: aspectRatio,
|
|
8913
9170
|
id: videoContainerId,
|
|
8914
|
-
"data-testid":
|
|
8915
|
-
}, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
9171
|
+
"data-testid": 'video-container'
|
|
9172
|
+
}, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
8916
9173
|
};
|
|
8917
9174
|
|
|
8918
9175
|
var PromoChild = function PromoChild(_ref) {
|
|
@@ -8946,7 +9203,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8946
9203
|
text = _ref.text,
|
|
8947
9204
|
links = _ref.links,
|
|
8948
9205
|
children = _ref.children,
|
|
8949
|
-
videoSettings = _ref.videoSettings
|
|
9206
|
+
videoSettings = _ref.videoSettings,
|
|
9207
|
+
titleSemanticLevel = _ref.titleSemanticLevel;
|
|
8950
9208
|
|
|
8951
9209
|
var truncate = function truncate(str, n) {
|
|
8952
9210
|
return str.length >= n ? str.substr(0, n) : str;
|
|
@@ -8987,7 +9245,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8987
9245
|
"data-testid": "content-wrapper",
|
|
8988
9246
|
imageToLeft: imageToLeft
|
|
8989
9247
|
}, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8990
|
-
level: titleLevel
|
|
9248
|
+
level: titleLevel,
|
|
9249
|
+
semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
|
|
8991
9250
|
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
|
|
8992
9251
|
dangerouslySetInnerHTML: {
|
|
8993
9252
|
__html: text
|
|
@@ -8999,8 +9258,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8999
9258
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
9000
9259
|
};
|
|
9001
9260
|
|
|
9002
|
-
var _templateObject$
|
|
9003
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9261
|
+
var _templateObject$17;
|
|
9262
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9004
9263
|
|
|
9005
9264
|
/**
|
|
9006
9265
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9058,9 +9317,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9058
9317
|
})));
|
|
9059
9318
|
};
|
|
9060
9319
|
|
|
9061
|
-
var _templateObject$
|
|
9062
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9063
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9320
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$G;
|
|
9321
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9322
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.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) {
|
|
9064
9323
|
var horizontalMode = _ref.horizontalMode;
|
|
9065
9324
|
if (horizontalMode) return 'row';
|
|
9066
9325
|
return 'column';
|
|
@@ -9068,7 +9327,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$N || (_temp
|
|
|
9068
9327
|
var gap = _ref2.gap;
|
|
9069
9328
|
return gap + "px";
|
|
9070
9329
|
});
|
|
9071
|
-
var ErrorLabel$
|
|
9330
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9072
9331
|
var darkMode = _ref3.darkMode;
|
|
9073
9332
|
if (darkMode) return 'var(--base-color-white)';
|
|
9074
9333
|
return 'var(--base-color-errorstate)';
|
|
@@ -9140,7 +9399,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9140
9399
|
error: error !== undefined ? '' : undefined,
|
|
9141
9400
|
onChange: changeHandler
|
|
9142
9401
|
}, radio.content);
|
|
9143
|
-
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9402
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
9144
9403
|
darkMode: darkMode,
|
|
9145
9404
|
"data-testid": "radio-group-error-label"
|
|
9146
9405
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9148,10 +9407,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9148
9407
|
}, error)));
|
|
9149
9408
|
};
|
|
9150
9409
|
|
|
9151
|
-
var _templateObject$
|
|
9152
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9153
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9154
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9410
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$H;
|
|
9411
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.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);
|
|
9412
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.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"])));
|
|
9413
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.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);
|
|
9155
9414
|
|
|
9156
9415
|
var StatusBanner = function StatusBanner(_ref) {
|
|
9157
9416
|
var statusText = _ref.statusText,
|
|
@@ -9213,14 +9472,15 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9213
9472
|
})))));
|
|
9214
9473
|
};
|
|
9215
9474
|
|
|
9216
|
-
var _templateObject$
|
|
9217
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9475
|
+
var _templateObject$1a;
|
|
9476
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
9218
9477
|
|
|
9219
9478
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9220
9479
|
var title = _ref.title,
|
|
9221
9480
|
_ref$size = _ref.size,
|
|
9222
9481
|
size = _ref$size === void 0 ? 'small' : _ref$size,
|
|
9223
|
-
description = _ref.description
|
|
9482
|
+
description = _ref.description,
|
|
9483
|
+
semanticLevel = _ref.semanticLevel;
|
|
9224
9484
|
var headingLevel = size === 'large' ? 1 : 2;
|
|
9225
9485
|
return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9226
9486
|
columnStartDesktop: 3,
|
|
@@ -9228,7 +9488,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9228
9488
|
columnStartDevice: 2,
|
|
9229
9489
|
columnSpanDevice: 12
|
|
9230
9490
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
9231
|
-
level: headingLevel
|
|
9491
|
+
level: headingLevel,
|
|
9492
|
+
semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
|
|
9232
9493
|
}, title)), description && /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9233
9494
|
columnStartDesktop: 3,
|
|
9234
9495
|
columnSpanDesktop: 8,
|
|
@@ -9240,8 +9501,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9240
9501
|
}, description))));
|
|
9241
9502
|
};
|
|
9242
9503
|
|
|
9243
|
-
var _templateObject$
|
|
9244
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9504
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9505
|
+
var stateStyles = /*#__PURE__*/styled.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) {
|
|
9245
9506
|
var theme = _ref.theme;
|
|
9246
9507
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9247
9508
|
}, function (_ref2) {
|
|
@@ -9251,12 +9512,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject
|
|
|
9251
9512
|
var theme = _ref3.theme;
|
|
9252
9513
|
return theme.colors.lightgrey;
|
|
9253
9514
|
});
|
|
9254
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
9515
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9255
9516
|
var theme = _ref4.theme;
|
|
9256
9517
|
return theme.colors.darkgrey;
|
|
9257
9518
|
});
|
|
9258
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
9259
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
9519
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9520
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9260
9521
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9261
9522
|
var theme = _ref5.theme;
|
|
9262
9523
|
return {
|
|
@@ -9264,7 +9525,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
9264
9525
|
color: theme.colors.black,
|
|
9265
9526
|
title: 'Select Arrow'
|
|
9266
9527
|
};
|
|
9267
|
-
})(_templateObject5$
|
|
9528
|
+
})(_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"])));
|
|
9268
9529
|
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9269
9530
|
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9270
9531
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
@@ -9663,9 +9924,9 @@ function Select(_ref3) {
|
|
|
9663
9924
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9664
9925
|
}
|
|
9665
9926
|
|
|
9666
|
-
var _templateObject$
|
|
9667
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9668
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9927
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$J, _templateObject4$z;
|
|
9928
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9929
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
9669
9930
|
var width = _ref.width;
|
|
9670
9931
|
if (!width) return 'none';
|
|
9671
9932
|
return width + 'px';
|
|
@@ -9682,12 +9943,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_t
|
|
|
9682
9943
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9683
9944
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9684
9945
|
});
|
|
9685
|
-
var TextLabel$
|
|
9946
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9686
9947
|
var darkMode = _ref5.darkMode;
|
|
9687
9948
|
if (darkMode) return "var(--base-color-white)";
|
|
9688
9949
|
return "var(--base-color-black)";
|
|
9689
9950
|
});
|
|
9690
|
-
var ErrorLabel$
|
|
9951
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9691
9952
|
var darkMode = _ref6.darkMode;
|
|
9692
9953
|
if (darkMode) return "var(--base-color-white)";
|
|
9693
9954
|
return "var(--base-color-errorstate)";
|
|
@@ -9704,7 +9965,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9704
9965
|
width = _ref.width,
|
|
9705
9966
|
darkMode = _ref.darkMode,
|
|
9706
9967
|
children = _ref.children;
|
|
9707
|
-
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$
|
|
9968
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9708
9969
|
darkMode: darkMode,
|
|
9709
9970
|
"data-testid": "select2-text-label"
|
|
9710
9971
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9713,7 +9974,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9713
9974
|
width: width,
|
|
9714
9975
|
error: error,
|
|
9715
9976
|
darkMode: darkMode
|
|
9716
|
-
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9977
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9717
9978
|
darkMode: darkMode,
|
|
9718
9979
|
"data-testid": "select2-error-label"
|
|
9719
9980
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9803,8 +10064,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9803
10064
|
})));
|
|
9804
10065
|
};
|
|
9805
10066
|
|
|
9806
|
-
var _templateObject$
|
|
9807
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10067
|
+
var _templateObject$1d;
|
|
10068
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
9808
10069
|
var theme = _ref.theme;
|
|
9809
10070
|
return theme.colors.primary;
|
|
9810
10071
|
});
|
|
@@ -9832,8 +10093,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9832
10093
|
})));
|
|
9833
10094
|
};
|
|
9834
10095
|
|
|
9835
|
-
var _templateObject$
|
|
9836
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10096
|
+
var _templateObject$1e, _templateObject2$S;
|
|
10097
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.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) {
|
|
9837
10098
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9838
10099
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9839
10100
|
return aspectRatio;
|
|
@@ -9843,7 +10104,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templat
|
|
|
9843
10104
|
height = _ref2.height;
|
|
9844
10105
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9845
10106
|
});
|
|
9846
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10107
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9847
10108
|
|
|
9848
10109
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9849
10110
|
var caption = _ref.caption,
|
|
@@ -9881,13 +10142,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9881
10142
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9882
10143
|
};
|
|
9883
10144
|
|
|
9884
|
-
var _templateObject$
|
|
9885
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9886
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10145
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$K;
|
|
10146
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10147
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9887
10148
|
var displayAttribution = _ref.displayAttribution;
|
|
9888
10149
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9889
10150
|
});
|
|
9890
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10151
|
+
var Line$1 = /*#__PURE__*/styled__default.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);
|
|
9891
10152
|
|
|
9892
10153
|
var Quote = function Quote(_ref) {
|
|
9893
10154
|
var text = _ref.text,
|
|
@@ -9911,12 +10172,12 @@ var Quote = function Quote(_ref) {
|
|
|
9911
10172
|
}, attribution))));
|
|
9912
10173
|
};
|
|
9913
10174
|
|
|
9914
|
-
var _templateObject$
|
|
9915
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9916
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9917
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
9918
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9919
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10175
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$l;
|
|
10176
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
10177
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10178
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10179
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10180
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.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);
|
|
9920
10181
|
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
9921
10182
|
|
|
9922
10183
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -9955,11 +10216,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9955
10216
|
}, title)))));
|
|
9956
10217
|
};
|
|
9957
10218
|
|
|
9958
|
-
var _templateObject$
|
|
9959
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9960
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9961
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9962
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10219
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B;
|
|
10220
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.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"])));
|
|
10221
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
10222
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10223
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.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"])));
|
|
9963
10224
|
|
|
9964
10225
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9965
10226
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10057,15 +10318,113 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10057
10318
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10058
10319
|
};
|
|
10059
10320
|
|
|
10060
|
-
var _templateObject$
|
|
10061
|
-
var
|
|
10062
|
-
var
|
|
10063
|
-
var
|
|
10064
|
-
var
|
|
10321
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s, _templateObject6$m;
|
|
10322
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10323
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10324
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10325
|
+
var color = _ref.color;
|
|
10326
|
+
return "var(--base-color-" + color + ")";
|
|
10327
|
+
});
|
|
10328
|
+
var BottomLine = /*#__PURE__*/styled__default.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"])));
|
|
10329
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10330
|
+
var color = _ref2.color;
|
|
10331
|
+
return "var(--base-color-" + color + ")";
|
|
10332
|
+
});
|
|
10333
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10334
|
+
var color = _ref3.color;
|
|
10335
|
+
return "var(--base-color-" + color + ")";
|
|
10336
|
+
});
|
|
10337
|
+
|
|
10338
|
+
/**
|
|
10339
|
+
* Password strength indicator component.
|
|
10340
|
+
* This renders some number of lines (6 by default)
|
|
10341
|
+
* which should become active when the user improves
|
|
10342
|
+
* the strength of the entered password.
|
|
10343
|
+
*
|
|
10344
|
+
* ## Sections
|
|
10345
|
+
* To set number of sections it should be passed
|
|
10346
|
+
* as `sections` prop.
|
|
10347
|
+
*
|
|
10348
|
+
* ## Active section
|
|
10349
|
+
* To set number of active sections it should be passed
|
|
10350
|
+
* as `activeSections` prop.
|
|
10351
|
+
*
|
|
10352
|
+
* ## Colors
|
|
10353
|
+
* Color of every element can be controlled by properties:
|
|
10354
|
+
* `sectionsColor`, `activeSectionsColor`,
|
|
10355
|
+
* `textColor`, `strengthLabelColor`.
|
|
10356
|
+
*
|
|
10357
|
+
* ## Text
|
|
10358
|
+
* `text` prop is used to render some message.
|
|
10359
|
+
* For example error (together with proper red color)
|
|
10360
|
+
* or some password requirement. It can be empty.
|
|
10361
|
+
*
|
|
10362
|
+
* ## Strength label
|
|
10363
|
+
* `strengthLabel` prop is used to render strength characteristic
|
|
10364
|
+
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10365
|
+
* It can be empty.
|
|
10366
|
+
*/
|
|
10367
|
+
|
|
10368
|
+
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10369
|
+
var _ref$sections = _ref.sections,
|
|
10370
|
+
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10371
|
+
_ref$activeSections = _ref.activeSections,
|
|
10372
|
+
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10373
|
+
_ref$sectionsColor = _ref.sectionsColor,
|
|
10374
|
+
sectionsColor = _ref$sectionsColor === void 0 ? exports.Colors.MidGrey : _ref$sectionsColor,
|
|
10375
|
+
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10376
|
+
activeSectionsColor = _ref$activeSectionsCo === void 0 ? exports.Colors.Black : _ref$activeSectionsCo,
|
|
10377
|
+
_ref$text = _ref.text,
|
|
10378
|
+
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10379
|
+
_ref$textColor = _ref.textColor,
|
|
10380
|
+
textColor = _ref$textColor === void 0 ? exports.Colors.Black : _ref$textColor,
|
|
10381
|
+
_ref$strengthLabel = _ref.strengthLabel,
|
|
10382
|
+
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10383
|
+
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10384
|
+
strengthLabelColor = _ref$strengthLabelCol === void 0 ? exports.Colors.Black : _ref$strengthLabelCol;
|
|
10385
|
+
|
|
10386
|
+
var setSectionColor = function setSectionColor(index) {
|
|
10387
|
+
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10388
|
+
};
|
|
10389
|
+
|
|
10390
|
+
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10391
|
+
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10392
|
+
};
|
|
10393
|
+
|
|
10394
|
+
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10395
|
+
"data-testid": "password-strength-container"
|
|
10396
|
+
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10397
|
+
"data-testid": "password-strength-sections"
|
|
10398
|
+
}, Array.from({
|
|
10399
|
+
length: sections
|
|
10400
|
+
}, function (_section, i) {
|
|
10401
|
+
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10402
|
+
key: i,
|
|
10403
|
+
color: setSectionColor(i),
|
|
10404
|
+
"data-testid": setSectionDataTestId(i)
|
|
10405
|
+
});
|
|
10406
|
+
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10407
|
+
color: textColor,
|
|
10408
|
+
"data-testid": "password-strength-text"
|
|
10409
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10410
|
+
level: 6
|
|
10411
|
+
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10412
|
+
color: strengthLabelColor,
|
|
10413
|
+
"data-testid": "password-strength-label"
|
|
10414
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10415
|
+
level: 2
|
|
10416
|
+
}, strengthLabel))));
|
|
10417
|
+
};
|
|
10418
|
+
|
|
10419
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t;
|
|
10420
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10421
|
+
var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey);
|
|
10422
|
+
var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10423
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
|
|
10065
10424
|
var isActive = _ref.isActive;
|
|
10066
10425
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10067
10426
|
}, exports.Colors.MidGrey);
|
|
10068
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10427
|
+
var MobileMenuList = /*#__PURE__*/styled__default.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) {
|
|
10069
10428
|
var isOpen = _ref2.isOpen;
|
|
10070
10429
|
return isOpen ? 'block' : 'none';
|
|
10071
10430
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10235,112 +10594,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10235
10594
|
});
|
|
10236
10595
|
};
|
|
10237
10596
|
|
|
10238
|
-
var _templateObject$
|
|
10239
|
-
var
|
|
10240
|
-
var
|
|
10241
|
-
var
|
|
10242
|
-
|
|
10243
|
-
return "var(--base-color-" + color + ")";
|
|
10244
|
-
});
|
|
10245
|
-
var BottomLine = /*#__PURE__*/styled__default.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"])));
|
|
10246
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10247
|
-
var color = _ref2.color;
|
|
10248
|
-
return "var(--base-color-" + color + ")";
|
|
10249
|
-
});
|
|
10250
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10251
|
-
var color = _ref3.color;
|
|
10252
|
-
return "var(--base-color-" + color + ")";
|
|
10253
|
-
});
|
|
10254
|
-
|
|
10255
|
-
/**
|
|
10256
|
-
* Password strength indicator component.
|
|
10257
|
-
* This renders some number of lines (6 by default)
|
|
10258
|
-
* which should become active when the user improves
|
|
10259
|
-
* the strength of the entered password.
|
|
10260
|
-
*
|
|
10261
|
-
* ## Sections
|
|
10262
|
-
* To set number of sections it should be passed
|
|
10263
|
-
* as `sections` prop.
|
|
10264
|
-
*
|
|
10265
|
-
* ## Active section
|
|
10266
|
-
* To set number of active sections it should be passed
|
|
10267
|
-
* as `activeSections` prop.
|
|
10268
|
-
*
|
|
10269
|
-
* ## Colors
|
|
10270
|
-
* Color of every element can be controlled by properties:
|
|
10271
|
-
* `sectionsColor`, `activeSectionsColor`,
|
|
10272
|
-
* `textColor`, `strengthLabelColor`.
|
|
10273
|
-
*
|
|
10274
|
-
* ## Text
|
|
10275
|
-
* `text` prop is used to render some message.
|
|
10276
|
-
* For example error (together with proper red color)
|
|
10277
|
-
* or some password requirement. It can be empty.
|
|
10278
|
-
*
|
|
10279
|
-
* ## Strength label
|
|
10280
|
-
* `strengthLabel` prop is used to render strength characteristic
|
|
10281
|
-
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10282
|
-
* It can be empty.
|
|
10283
|
-
*/
|
|
10284
|
-
|
|
10285
|
-
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10286
|
-
var _ref$sections = _ref.sections,
|
|
10287
|
-
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10288
|
-
_ref$activeSections = _ref.activeSections,
|
|
10289
|
-
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10290
|
-
_ref$sectionsColor = _ref.sectionsColor,
|
|
10291
|
-
sectionsColor = _ref$sectionsColor === void 0 ? exports.Colors.MidGrey : _ref$sectionsColor,
|
|
10292
|
-
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10293
|
-
activeSectionsColor = _ref$activeSectionsCo === void 0 ? exports.Colors.Black : _ref$activeSectionsCo,
|
|
10294
|
-
_ref$text = _ref.text,
|
|
10295
|
-
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10296
|
-
_ref$textColor = _ref.textColor,
|
|
10297
|
-
textColor = _ref$textColor === void 0 ? exports.Colors.Black : _ref$textColor,
|
|
10298
|
-
_ref$strengthLabel = _ref.strengthLabel,
|
|
10299
|
-
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10300
|
-
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10301
|
-
strengthLabelColor = _ref$strengthLabelCol === void 0 ? exports.Colors.Black : _ref$strengthLabelCol;
|
|
10302
|
-
|
|
10303
|
-
var setSectionColor = function setSectionColor(index) {
|
|
10304
|
-
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10305
|
-
};
|
|
10306
|
-
|
|
10307
|
-
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10308
|
-
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10309
|
-
};
|
|
10310
|
-
|
|
10311
|
-
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10312
|
-
"data-testid": "password-strength-container"
|
|
10313
|
-
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10314
|
-
"data-testid": "password-strength-sections"
|
|
10315
|
-
}, Array.from({
|
|
10316
|
-
length: sections
|
|
10317
|
-
}, function (_section, i) {
|
|
10318
|
-
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10319
|
-
key: i,
|
|
10320
|
-
color: setSectionColor(i),
|
|
10321
|
-
"data-testid": setSectionDataTestId(i)
|
|
10322
|
-
});
|
|
10323
|
-
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10324
|
-
color: textColor,
|
|
10325
|
-
"data-testid": "password-strength-text"
|
|
10326
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10327
|
-
level: 6
|
|
10328
|
-
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10329
|
-
color: strengthLabelColor,
|
|
10330
|
-
"data-testid": "password-strength-label"
|
|
10331
|
-
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10332
|
-
level: 2
|
|
10333
|
-
}, strengthLabel))));
|
|
10334
|
-
};
|
|
10335
|
-
|
|
10336
|
-
var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10337
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10338
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10339
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10340
|
-
var TableHeader = /*#__PURE__*/styled__default.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) {
|
|
10597
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$P, _templateObject4$E, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10598
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10599
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10600
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10601
|
+
var TableHeader = /*#__PURE__*/styled__default.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) {
|
|
10341
10602
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10342
10603
|
}, devices.tablet, devices.mobile);
|
|
10343
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10604
|
+
var TableCell = /*#__PURE__*/styled__default.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) {
|
|
10344
10605
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10345
10606
|
}, devices.mobile);
|
|
10346
10607
|
var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
@@ -10618,9 +10879,9 @@ var LiveChat = function LiveChat() {
|
|
|
10618
10879
|
});
|
|
10619
10880
|
};
|
|
10620
10881
|
|
|
10621
|
-
var _templateObject$
|
|
10622
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10623
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
10882
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
10883
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.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);
|
|
10884
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(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) {
|
|
10624
10885
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10625
10886
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10626
10887
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10648,11 +10909,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10648
10909
|
}, children)));
|
|
10649
10910
|
};
|
|
10650
10911
|
|
|
10651
|
-
var _templateObject$
|
|
10652
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10653
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
10654
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10655
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
10912
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
|
|
10913
|
+
var InnerModal = /*#__PURE__*/styled__default.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);
|
|
10914
|
+
var CloseButton = /*#__PURE__*/styled__default.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);
|
|
10915
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10916
|
+
var Overlay = /*#__PURE__*/styled__default(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"])));
|
|
10656
10917
|
|
|
10657
10918
|
var MAX_Z_INDEX = 9999999999;
|
|
10658
10919
|
|
|
@@ -10772,8 +11033,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10772
11033
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
10773
11034
|
};
|
|
10774
11035
|
|
|
10775
|
-
var _templateObject$
|
|
10776
|
-
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
11036
|
+
var _templateObject$1n;
|
|
11037
|
+
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
10777
11038
|
var theme = _ref.theme;
|
|
10778
11039
|
return theme.colors.primary;
|
|
10779
11040
|
}, function (_ref2) {
|
|
@@ -11734,6 +11995,7 @@ exports.Footer = Footer;
|
|
|
11734
11995
|
exports.GlobalStyles = GlobalStyles;
|
|
11735
11996
|
exports.Grid = Grid;
|
|
11736
11997
|
exports.GridItem = GridItem;
|
|
11998
|
+
exports.GridItemLegacy = GridItemLegacy;
|
|
11737
11999
|
exports.Header = Header;
|
|
11738
12000
|
exports.Icon = Icon;
|
|
11739
12001
|
exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
|
|
@@ -11785,6 +12047,7 @@ exports.Tabs = Tabs;
|
|
|
11785
12047
|
exports.TertiaryButton = Button$1;
|
|
11786
12048
|
exports.TextArea = TextArea;
|
|
11787
12049
|
exports.TextField = TextField;
|
|
12050
|
+
exports.TextFieldLegacy = TextFieldLegacy;
|
|
11788
12051
|
exports.TextLink = TextLink;
|
|
11789
12052
|
exports.TextOnly = TextOnly;
|
|
11790
12053
|
exports.ThemeProvider = Theme;
|