@royaloperahouse/chord 2.3.3 → 2.4.0-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.
Files changed (34) hide show
  1. package/CHANGELOG.md +214 -7
  2. package/README.md +250 -40
  3. package/dist/chord.cjs.development.js +732 -491
  4. package/dist/chord.cjs.development.js.map +1 -1
  5. package/dist/chord.cjs.production.min.js +1 -1
  6. package/dist/chord.cjs.production.min.js.map +1 -1
  7. package/dist/chord.esm.js +732 -493
  8. package/dist/chord.esm.js.map +1 -1
  9. package/dist/components/atoms/Grid/GridItemLegacy.d.ts +8 -0
  10. package/dist/components/atoms/Grid/index.d.ts +2 -1
  11. package/dist/components/atoms/Icons/Icons.d.ts +1 -1
  12. package/dist/components/atoms/Icons/SvgIcons/Descriptors/Wheelchair.svg.d.ts +1 -1
  13. package/dist/components/atoms/Icons/SvgIcons/index.d.ts +1 -1
  14. package/dist/components/atoms/Typography/Typography.d.ts +1 -1
  15. package/dist/components/atoms/index.d.ts +2 -2
  16. package/dist/components/index.d.ts +3 -3
  17. package/dist/components/molecules/PageHeading/index.d.ts +1 -1
  18. package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
  19. package/dist/components/molecules/PromoWithTitle/PromoChild.d.ts +2 -2
  20. package/dist/components/molecules/SectionTitle/SectionTitle.d.ts +1 -1
  21. package/dist/components/molecules/Select/Select.style.d.ts +1 -1
  22. package/dist/components/molecules/Table/Table.style.d.ts +1 -0
  23. package/dist/components/molecules/VideoWithControls/index.d.ts +2 -0
  24. package/dist/components/molecules/index.d.ts +3 -2
  25. package/dist/helpers/generateDomElementId.d.ts +8 -0
  26. package/dist/index.d.ts +3 -2
  27. package/dist/types/editorial.d.ts +18 -2
  28. package/dist/types/formTypes.d.ts +12 -9
  29. package/dist/types/iconTypes.d.ts +5 -0
  30. package/dist/types/impactHeader.d.ts +13 -0
  31. package/dist/types/tableTypes.d.ts +4 -0
  32. package/dist/types/types.d.ts +10 -1
  33. package/package.json +1 -1
  34. package/README.GIT +0 -277
package/dist/chord.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, cloneElement } from 'react';
1
+ import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement, useLayoutEffect } from 'react';
2
2
  import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
3
3
  import moment from 'moment';
4
4
  import { renderToString } from 'react-dom/server';
@@ -120,37 +120,181 @@ var BadgeWrapper = /*#__PURE__*/styled.svg(_templateObject || (_templateObject =
120
120
 
121
121
  var StreamBadge = function StreamBadge(_ref) {
122
122
  var _ref$fillColor = _ref.fillColor,
123
- fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor;
123
+ fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor,
124
+ _ref$align = _ref.align,
125
+ align = _ref$align === void 0 ? 'center' : _ref$align;
124
126
  return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
125
127
  fillColor: fillColor,
126
128
  width: "100%",
127
129
  height: "100%",
128
- viewBox: "0 0 133 37",
129
- fill: "none",
130
+ viewBox: "110 450 865 200",
130
131
  xmlns: "http://www.w3.org/2000/svg"
131
132
  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
132
- d: "M65.582.5h-1.186v36h1.186V.5ZM77.985 21.456l.848-1.009c.8.709 1.615 1.089 2.659 1.089.926 0 1.523-.435 1.523-1.089v-.023c0-.607-.345-.945-1.915-1.306-1.797-.423-2.785-.962-2.785-2.485v-.024c0-1.417 1.181-2.394 2.835-2.394a4.556 4.556 0 0 1 3.025 1.041l-.768 1.065a3.714 3.714 0 0 0-2.281-.857c-.883 0-1.417.446-1.417 1.02v.021c0 .667.39.976 2.028 1.354 1.777.422 2.672 1.065 2.672 2.428v.023c0 1.547-1.226 2.475-2.957 2.475a5.082 5.082 0 0 1-3.467-1.33ZM88.932 15.624h-2.67v-1.298h6.739v1.296h-2.652v7.048h-1.417v-7.046ZM95.443 14.326h3.701c1.044 0 1.868.309 2.407.836a2.5 2.5 0 0 1 .675 1.788v.023c0 1.363-.824 2.19-2.017 2.51l2.294 3.187h-1.675l-2.085-2.946h-1.89v2.946h-1.417l.007-8.344Zm3.597 4.15c1.068 0 1.767-.563 1.767-1.434v-.022c0-.907-.666-1.417-1.776-1.417h-2.178v2.877l2.187-.005ZM104.935 14.326h6.164v1.26h-4.768v2.247h4.23v1.26h-4.23v2.316h4.825v1.26h-6.221v-8.343ZM116.763 14.271h1.306l3.679 8.4h-1.478l-.872-2.028h-4.015l-.871 2.029h-1.443l3.694-8.4Zm2.125 5.111-1.49-3.439-1.49 3.44h2.98ZM124.089 14.326h1.488l2.598 4.014 2.598-4.014h1.487v8.344h-1.398v-6.075l-2.68 3.999h-.048l-2.668-3.975v6.05h-1.375l-.002-8.343ZM1.94 5.708H4.3l2.404 3.221h1.148L5.307 5.542c1.304-.236 2.251-1.041 2.251-2.413v-.024a2.282 2.282 0 0 0-.64-1.634C6.398.949 5.58.64 4.556.64H.992V8.93h.945l.002-3.221Zm0-4.202h2.557c1.337 0 2.126.617 2.126 1.634v.024c0 1.065-.888 1.705-2.126 1.705H1.954l-.015-3.363ZM15.546 9.07c2.52 0 4.236-2 4.236-4.286.012-.012.012-.012 0-.023C19.782 2.477 18.09.51 15.57.51s-4.24 2-4.24 4.284v.023c0 2.277 1.694 4.254 4.216 4.254ZM12.3 4.76c0-1.889 1.35-3.395 3.245-3.395 1.894 0 3.266 1.54 3.266 3.42v.023c0 1.89-1.349 3.398-3.243 3.398S12.3 6.67 12.3 4.784v-.023ZM26.22 8.929h.947v-3.29L30.615.642h-1.091l-2.818 4.144L23.912.642h-1.136L26.22 5.65v3.278ZM36.752.583l-3.779 8.346h.961l.98-2.19h4.514l.968 2.19h1.008L37.627.583h-.874Zm-1.47 5.314 1.89-4.226 1.89 4.226h-3.78ZM51.28 8.065h-4.665V.642h-.935v8.287h5.6v-.864ZM6.718 31.753H1.934V28.07H.998v8.287h.936V32.63h4.784v3.73h.936V28.07h-.936v3.682ZM15.746 27.93c-2.523 0-4.237 2-4.237 4.284v.023c0 2.286 1.693 4.263 4.213 4.263s4.24-2 4.24-4.286c.011-.012.011-.012 0-.024.006-2.277-1.694-4.26-4.216-4.26Zm3.245 4.307c0 1.89-1.351 3.399-3.245 3.399-1.894 0-3.267-1.538-3.267-3.422v-.024c0-1.89 1.349-3.396 3.243-3.396s3.269 1.54 3.269 3.42v.023ZM29.888 32.889c0 1.811-.968 2.735-2.496 2.735-1.587 0-2.534-1.006-2.534-2.794V28.07h-.945v4.818c0 2.345 1.398 3.6 3.446 3.6 2.047 0 3.455-1.255 3.455-3.671v-4.747h-.945l.019 4.818ZM38.335 31.765c-1.823-.39-2.248-.83-2.248-1.611v-.024c0-.746.685-1.337 1.764-1.337.88.002 1.728.321 2.39.9l.546-.722a4.322 4.322 0 0 0-2.915-1.018c-1.573 0-2.72.959-2.72 2.26v.024c0 1.362.876 1.979 2.782 2.392 1.74.366 2.154.805 2.154 1.575v.024c0 .817-.735 1.417-1.847 1.417-1.113 0-1.977-.39-2.834-1.181l-.581.687a4.846 4.846 0 0 0 3.386 1.325c1.654 0 2.834-.923 2.834-2.343v-.023c-.011-1.268-.864-1.944-2.71-2.345ZM46.282 32.605h4.523v-.852h-4.523v-2.83h5.057v-.852h-5.992v8.287h6.05v-.852h-5.115v-2.9ZM4.239 14.214c-2.522 0-4.251 2.001-4.251 4.287v.021c0 2.287 1.693 4.252 4.216 4.252 2.522 0 4.239-2 4.239-4.285.012-.014.012-.014 0-.026.012-2.272-1.682-4.249-4.204-4.249Zm3.245 4.308c0 1.89-1.35 3.399-3.245 3.399C2.345 21.92.97 20.38.97 18.5v-.026c0-1.89 1.351-3.396 3.245-3.396 1.895 0 3.269 1.537 3.269 3.422v.021ZM15.822 14.356h-3.1v8.288h.944V19.72h2.012c1.764 0 3.257-.924 3.257-2.712v-.023c-.01-1.634-1.24-2.629-3.113-2.629Zm2.157 2.688c0 1.089-.9 1.823-2.275 1.823h-2.048v-3.646h2.095c1.34 0 2.228.616 2.228 1.8v.023ZM28.84 21.791h-5.115v-2.9h4.522v-.853h-4.522v-2.83h5.056v-.852H22.79v8.288h6.05v-.853ZM39.228 22.644h1.15l-2.546-3.387c1.301-.236 2.248-1.042 2.248-2.414v-.026a2.28 2.28 0 0 0-.64-1.632c-.52-.522-1.336-.829-2.361-.829h-3.564v8.288h.945v-3.222h2.361l2.407 3.222Zm-4.77-7.423h2.557c1.337 0 2.126.614 2.126 1.632v.026c0 1.065-.888 1.705-2.126 1.705h-2.546l-.012-3.363ZM50.421 20.466l.97 2.19h1.007l-3.779-8.347h-.876l-3.779 8.346h.959l.983-2.189h4.515Zm-2.25-5.068 1.889 4.227h-3.78l1.89-4.227Z"
133
- })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", null, /*#__PURE__*/React__default.createElement("path", {
134
- transform: "translate(0 .5)",
135
- d: "M0 0h132.257v36H0z"
136
- }))));
133
+ d: "M416.81,485.21c0-9.38-6.6-14.94-18.59-14.94h-23.1v60.79h22.84c13.2,0,20.58-7.12,20.58-17.97,0-7.3-4.86-13.11-13.46-14.07,7.9-1.13,11.73-7.47,11.73-13.8ZM389.28,481.3h5.47c5.47,0,7.64,2.69,7.64,6.51s-2.17,6.51-7.73,6.51h-5.38v-13.03ZM395.79,519.59h-6.51v-14.59h6.42c4.95,0,8.43,2.69,8.43,7.29s-3.39,7.29-8.34,7.29Z",
134
+ "stroke-width": "0"
135
+ }), /*#__PURE__*/React__default.createElement("path", {
136
+ d: "M435.74,518.9h19.19l3.73,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM445.29,487.55l5.82,18.85h-11.64l5.82-18.85Z",
137
+ "stroke-width": "0"
138
+ }), /*#__PURE__*/React__default.createElement("path", {
139
+ d: "M774.06,500.66c0-18.15-13.89-31.7-32.56-31.7s-32.56,13.54-32.56,31.7,13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7ZM723.44,500.66c0-10.59,7.81-18.58,18.06-18.58s18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58-18.06-7.99-18.06-18.58Z",
140
+ "stroke-width": "0"
141
+ }), /*#__PURE__*/React__default.createElement("polygon", {
142
+ points: "511.38 470.27 511.38 531.06 542.64 531.06 542.64 518.38 525.53 518.38 525.53 470.27 511.38 470.27",
143
+ "stroke-width": "0"
144
+ }), /*#__PURE__*/React__default.createElement("polygon", {
145
+ points: "610.2 531.06 610.2 482.95 623.83 482.95 623.83 470.27 582.41 470.27 582.41 482.95 596.04 482.95 596.04 531.06 610.2 531.06",
146
+ "stroke-width": "0"
147
+ }), /*#__PURE__*/React__default.createElement("polygon", {
148
+ points: "578.59 482.95 578.59 470.27 546.46 470.27 546.46 531.06 578.59 531.06 578.59 518.38 560.61 518.38 560.61 506.74 575.03 506.74 575.03 494.06 560.61 494.06 560.61 482.95 578.59 482.95",
149
+ "stroke-width": "0"
150
+ }), /*#__PURE__*/React__default.createElement("polygon", {
151
+ points: "475.86 470.27 475.86 531.06 507.12 531.06 507.12 518.38 490.01 518.38 490.01 470.27 475.86 470.27",
152
+ "stroke-width": "0"
153
+ }), /*#__PURE__*/React__default.createElement("polygon", {
154
+ points: "324.76 470.27 324.76 531.06 356.02 531.06 356.02 518.38 338.92 518.38 338.92 470.27 324.76 470.27",
155
+ "stroke-width": "0"
156
+ }), /*#__PURE__*/React__default.createElement("path", {
157
+ d: "M800.98,508.48c12.33,0,20.58-7.99,20.58-19.11s-8.25-19.1-20.58-19.1h-23.19v60.79h14.16v-22.58h9.03ZM791.95,481.91h6.42c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56h-6.42v-15.02Z",
158
+ "stroke-width": "0"
159
+ }), /*#__PURE__*/React__default.createElement("path", {
160
+ d: "M923.95,470.27l-19.45,57.31-11.03-20.75c7.12-2.95,11.46-9.38,11.46-17.45,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.58h3.56l11.55,22.58h27.62l3.73-12.16h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85ZM881.74,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56ZM925.51,506.39l5.82-18.85,5.82,18.85h-11.64Z",
161
+ "stroke-width": "0"
162
+ }), /*#__PURE__*/React__default.createElement("path", {
163
+ d: "M636.25,511c0,12.24,9.38,21.36,22.49,21.36,7.21,0,13.2-2.78,18.24-7.38l4.86,6.08h17.8l-13.37-16.59,9.81-14.33-10.85-7.47-7.64,11.12-16.85-20.84h18.93v-12.68h-36.64v12.68l6.68,8.25c-8.94,4.34-13.46,11.46-13.46,19.8ZM657.61,501.01l11.29,14.07c-2.26,2.34-5.21,4.17-9.03,4.17-5.64,0-9.21-4-9.21-8.77,0-4.26,2.87-7.81,6.95-9.46Z",
164
+ "stroke-width": "0"
165
+ }), /*#__PURE__*/React__default.createElement("path", {
166
+ d: "M176.87,529.41c-9.38-5.9-17.02-14.16-22.06-23.01,6.6-3.04,10.6-9.29,10.6-17.02,0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.15v-22.84h5.13c6.16,12.68,16.06,24.49,27.87,31.78h0l8.08-10.59ZM142.23,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47s-2.43,7.56-8.68,7.56Z",
167
+ "stroke-width": "0"
168
+ }), /*#__PURE__*/React__default.createElement("path", {
169
+ d: "M284.56,518.9h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76l3.73-12.16ZM294.11,487.55l5.82,18.85h-11.64l5.82-18.85Z",
170
+ "stroke-width": "0"
171
+ }), /*#__PURE__*/React__default.createElement("path", {
172
+ d: "M201.1,468.97c-18.58,0-32.56,13.54-32.56,31.7s13.98,31.7,32.56,31.7,32.56-13.55,32.56-31.7-13.89-31.7-32.56-31.7ZM201.1,519.25c-10.25,0-18.06-7.99-18.06-18.58s7.81-18.58,18.06-18.58,18.06,7.99,18.06,18.58-7.73,18.58-18.06,18.58Z",
173
+ "stroke-width": "0"
174
+ }), /*#__PURE__*/React__default.createElement("polygon", {
175
+ points: "254.42 490.41 242.44 470.27 226.37 470.27 247.3 504.92 247.3 531.06 261.46 531.06 261.46 504.74 282.3 470.27 266.32 470.27 254.42 490.41",
176
+ "stroke-width": "0"
177
+ }), /*#__PURE__*/React__default.createElement("polygon", {
178
+ points: "857.34 482.95 857.34 470.27 825.21 470.27 825.21 531.06 857.34 531.06 857.34 518.38 839.36 518.38 839.36 506.74 853.78 506.74 853.78 494.06 839.36 494.06 839.36 482.95 857.34 482.95",
179
+ "stroke-width": "0"
180
+ })), align === 'left' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
181
+ d: "M151.07,588.98c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
182
+ "stroke-width": "0"
183
+ }), /*#__PURE__*/React__default.createElement("path", {
184
+ d: "M184,630.37v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
185
+ "stroke-width": "0"
186
+ }), /*#__PURE__*/React__default.createElement("path", {
187
+ d: "M249.5,630.37c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM239.09,596.99c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
188
+ "stroke-width": "0"
189
+ }), /*#__PURE__*/React__default.createElement("path", {
190
+ d: "M271.93,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
191
+ "stroke-width": "0"
192
+ }), /*#__PURE__*/React__default.createElement("path", {
193
+ d: "M353.01,630.37l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM338.5,584.53c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
194
+ "stroke-width": "0"
195
+ }), /*#__PURE__*/React__default.createElement("path", {
196
+ d: "M416.55,630.37v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
197
+ "stroke-width": "0"
198
+ })), align === 'center' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
199
+ d: "M401.56,585.29c.36-1.96.53-3.12.53-5.25,0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88c0,7.83,8.19,9.17,15.22,11.84,7.21,2.76,16.02,6.41,16.02,17.98s-9.08,18.16-20.47,18.16-20.47-6.85-20.47-18.16c0-2.58.53-4.54,1.07-5.87l7.92-.45c-.62,2.05-.98,4.01-.98,6.32,0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04c0-8.19-8.99-10.24-14.95-12.37-8.37-3.03-16.29-6.59-16.29-17.62s8.63-16.82,18.69-16.82,18.69,6.32,18.69,16.82c0,1.69-.27,3.74-.62,4.9l-7.92.53Z",
200
+ "stroke-width": "0"
201
+ }), /*#__PURE__*/React__default.createElement("path", {
202
+ d: "M434.49,626.68v-55.18h-16.91v-7.12h41.83v7.12h-16.91v55.18h-8.01Z",
203
+ "stroke-width": "0"
204
+ }), /*#__PURE__*/React__default.createElement("path", {
205
+ d: "M500,626.68c-1.69-2.58-1.33-11.04-1.6-16.2-.18-4.18-.98-6.32-2.49-7.83-1.6-1.51-4.18-2.22-7.48-2.22h-10.68v26.26h-8.01v-62.3h20.56c6.59,0,10.68,1.87,13.71,4.89,3.2,3.2,5.34,7.74,5.34,12.91,0,7.3-5.16,14.42-14.15,15.04,6.41.71,10.5,4.9,11.04,12.82l.36,5.52c.27,3.74.36,6.14.8,7.92.27,1.07.8,2.31,1.96,2.85v.36h-9.35ZM489.58,593.3c4.63,0,7.03-1.07,8.72-2.85,1.87-1.96,3.03-4.9,3.03-8.01s-1.16-5.96-3.03-7.92c-1.69-1.78-4.09-3.03-8.72-3.03h-11.84v21.81h11.84Z",
206
+ "stroke-width": "0"
207
+ }), /*#__PURE__*/React__default.createElement("path", {
208
+ d: "M522.42,626.68v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12h-35.16Z",
209
+ "stroke-width": "0"
210
+ }), /*#__PURE__*/React__default.createElement("path", {
211
+ d: "M603.5,626.68l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3h-8.19ZM588.99,580.84c-.89-2.76-1.16-3.92-1.42-5.16-.27,1.25-.53,2.4-1.42,5.16l-7.57,24.48h18.07l-7.65-24.48Z",
212
+ "stroke-width": "0"
213
+ }), /*#__PURE__*/React__default.createElement("path", {
214
+ d: "M667.05,626.68v-37.83c0-2.22,0-4.09.09-6.23-.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72c-.98-2.31-1.42-3.65-2.23-6.23.09,2.14.09,4.01.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07c1.25,3.03,1.69,4.18,2.67,6.76.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3h-7.92Z",
215
+ "stroke-width": "0"
216
+ })));
137
217
  };
138
218
 
139
219
  var CinemaBadge = function CinemaBadge(_ref) {
140
220
  var _ref$fillColor = _ref.fillColor,
141
- fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor;
221
+ fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor,
222
+ _ref$align = _ref.align,
223
+ align = _ref$align === void 0 ? 'center' : _ref$align;
142
224
  return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
143
225
  fillColor: fillColor,
144
226
  width: "100%",
145
227
  height: "100%",
146
- viewBox: "0 0 133 37",
147
- fill: "none",
228
+ viewBox: "110 450 865 200",
148
229
  xmlns: "http://www.w3.org/2000/svg"
149
- }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
150
- d: "M65.582.5h-1.186v36h1.186V.5ZM1.94 5.708H4.3l2.404 3.221h1.148L5.307 5.542c1.304-.236 2.251-1.041 2.251-2.413v-.024a2.281 2.281 0 0 0-.64-1.634C6.398.949 5.58.64 4.556.64H.992V8.93h.945l.002-3.221Zm0-4.202h2.557c1.337 0 2.126.616 2.126 1.634v.024c0 1.065-.888 1.703-2.126 1.703H1.954l-.015-3.361ZM15.546 9.064c2.52 0 4.236-2 4.236-4.287.012-.012.012-.012 0-.023 0-2.284-1.693-4.252-4.213-4.252s-4.24 2-4.24 4.285v.023c0 2.284 1.694 4.254 4.216 4.254ZM12.3 4.754c0-1.89 1.35-3.397 3.245-3.397 1.894 0 3.266 1.538 3.266 3.42v.024c0 1.89-1.349 3.398-3.243 3.398S12.3 6.66 12.3 4.777v-.023ZM26.22 8.929h.947v-3.29L30.615.642h-1.091l-2.818 4.144L23.912.642h-1.136L26.22 5.65v3.278ZM36.752.583l-3.779 8.346h.961l.98-2.19h4.514l.968 2.19h1.008L37.627.583h-.874Zm-1.47 5.313 1.89-4.225 1.89 4.225h-3.78ZM51.28 8.065h-4.665V.642h-.935v8.287h5.6v-.864ZM6.718 31.753H1.934V28.07H.998v8.287h.936V32.63h4.784v3.73h.936V28.07h-.936v3.682ZM15.746 27.93c-2.523 0-4.237 2-4.237 4.283v.024c0 2.286 1.693 4.263 4.213 4.263s4.247-2 4.247-4.291c.011-.012.011-.012 0-.024 0-2.279-1.7-4.256-4.223-4.256Zm3.245 4.307c0 1.89-1.351 3.398-3.245 3.398-1.894 0-3.267-1.537-3.267-3.422v-.023c0-1.89 1.349-3.396 3.243-3.396s3.269 1.537 3.269 3.42v.023ZM29.888 32.89c0 1.81-.968 2.734-2.496 2.734-1.587 0-2.534-1.006-2.534-2.794v-4.759h-.945v4.818c0 2.345 1.398 3.6 3.446 3.6 2.047 0 3.455-1.255 3.455-3.67V28.07h-.945l.019 4.818ZM38.335 31.765c-1.823-.39-2.248-.83-2.248-1.61v-.024c0-.747.685-1.337 1.764-1.337.88.001 1.728.32 2.39.9l.546-.723a4.322 4.322 0 0 0-2.915-1.018c-1.573 0-2.72.959-2.72 2.26v.024c0 1.363.876 1.977 2.782 2.392 1.74.366 2.154.806 2.154 1.576v.02c0 .818-.735 1.418-1.847 1.418-1.113 0-1.977-.39-2.834-1.181l-.581.687a4.847 4.847 0 0 0 3.386 1.325c1.654 0 2.834-.923 2.834-2.345v-.021c-.011-1.266-.864-1.942-2.71-2.343ZM46.282 32.605h4.523v-.852h-4.523v-2.83h5.057v-.852h-5.992v8.287h6.05v-.852h-5.115v-2.9ZM4.239 14.215c-2.522 0-4.251 2-4.251 4.284v.024c0 2.286 1.693 4.263 4.216 4.263 2.522 0 4.239-2 4.239-4.287.012-.012.012-.012 0-.024.012-2.283-1.682-4.26-4.204-4.26Zm3.245 4.308c0 1.889-1.35 3.398-3.245 3.398-1.894 0-3.269-1.54-3.269-3.422v-.024c0-1.889 1.351-3.396 3.245-3.396 1.895 0 3.269 1.538 3.269 3.42v.024ZM15.822 14.356h-3.1v8.288h.944V19.72h2.012c1.764 0 3.257-.926 3.257-2.711v-.024c-.01-1.634-1.24-2.629-3.113-2.629Zm2.157 2.688c0 1.089-.9 1.823-2.275 1.823h-2.048v-3.646h2.095c1.34 0 2.228.614 2.228 1.8v.023ZM28.84 21.791h-5.115v-2.9h4.522v-.853h-4.522V15.21h5.056v-.853H22.79v8.288h6.05v-.853ZM39.228 22.644h1.15l-2.546-3.387c1.301-.236 2.248-1.042 2.248-2.414v-.026a2.28 2.28 0 0 0-.64-1.632c-.52-.522-1.336-.829-2.361-.829h-3.564v8.288h.945v-3.222h2.361l2.407 3.222Zm-4.77-7.423h2.557c1.337 0 2.126.614 2.126 1.632v.026c0 1.065-.888 1.702-2.126 1.702h-2.546l-.012-3.36ZM50.421 20.452l.97 2.192h1.007l-3.779-8.347h-.876l-3.779 8.347h.959l.983-2.192h4.515Zm-2.25-5.066 1.889 4.228h-3.78l1.89-4.228ZM77.985 18.523v-.024a4.252 4.252 0 0 1 4.334-4.346 4.372 4.372 0 0 1 3.294 1.306l-.923 1.051c-.67-.635-1.4-1.05-2.383-1.05-1.63 0-2.834 1.34-2.834 3.018v.021c0 1.689 1.18 3.042 2.834 3.042 1.053 0 1.724-.406 2.451-1.098l.915.923c-.88.902-1.84 1.481-3.41 1.481a4.228 4.228 0 0 1-4.278-4.324ZM88.376 14.293h1.417v8.414h-1.417v-8.415ZM93.116 14.293h1.306l4.6 5.93v-5.93h1.399v8.414H99.24l-4.724-6.09v6.09h-1.398l-.002-8.415ZM103.659 14.293h6.218v1.27h-4.808v2.265h4.265V19.1h-4.265v2.336h4.867v1.27h-6.277v-8.415ZM112.758 14.293h1.502l2.614 4.057 2.624-4.058H121v8.415h-1.417v-6.126l-2.706 4.034h-.045l-2.695-4.015v6.103h-1.386l.007-8.41ZM127.229 14.234h1.318l3.71 8.474h-1.49l-.879-2.045h-4.045l-.879 2.045h-1.457l3.722-8.474Zm2.14 5.156-1.505-3.468-1.502 3.468h3.007Z"
151
- })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", null, /*#__PURE__*/React__default.createElement("path", {
152
- transform: "translate(0 .5)",
153
- d: "M0 0h132.257v36H0z"
230
+ }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
231
+ d: "M416.26,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\n\t\t\t\tc0-7.3-4.86-13.11-13.46-14.07C412.43,497.88,416.26,491.54,416.26,485.21z M388.73,481.3h5.47c5.47,0,7.64,2.69,7.64,6.51\n\t\t\t\tc0,3.82-2.17,6.51-7.73,6.51h-5.38V481.3z M395.24,519.59h-6.51v-14.59h6.42c4.95,0,8.43,2.69,8.43,7.29\n\t\t\t\tC403.58,516.81,400.19,519.59,395.24,519.59z"
232
+ }), /*#__PURE__*/React__default.createElement("path", {
233
+ d: "M773.51,500.66c0-18.15-13.89-31.7-32.56-31.7c-18.58,0-32.56,13.54-32.56,31.7\n\t\t\t\tc0,18.15,13.98,31.7,32.56,31.7C759.61,532.36,773.51,518.81,773.51,500.66z M722.88,500.66c0-10.59,7.81-18.58,18.06-18.58\n\t\t\t\tc10.33,0,18.06,7.99,18.06,18.58c0,10.59-7.73,18.58-18.06,18.58C730.7,519.25,722.88,511.26,722.88,500.66z"
234
+ }), /*#__PURE__*/React__default.createElement("path", {
235
+ d: "M435.19,518.9h19.19l3.73,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76L435.19,518.9z\n\t\t\t\t M444.74,487.55l5.82,18.85h-11.64L444.74,487.55z"
236
+ }), /*#__PURE__*/React__default.createElement("polygon", {
237
+ points: "475.31,470.27 475.31,531.06 506.57,531.06 506.57,518.38 489.46,518.38 489.46,470.27"
238
+ }), /*#__PURE__*/React__default.createElement("polygon", {
239
+ points: "609.65,531.06 609.65,482.95 623.28,482.95 623.28,470.27 581.86,470.27 581.86,482.95 \n\t\t\t\t595.49,482.95 595.49,531.06"
240
+ }), /*#__PURE__*/React__default.createElement("polygon", {
241
+ points: "578.03,482.95 578.03,470.27 545.91,470.27 545.91,531.06 578.03,531.06 578.03,518.38 \n\t\t\t\t560.06,518.38 560.06,506.74 574.47,506.74 574.47,494.06 560.06,494.06 560.06,482.95"
242
+ }), /*#__PURE__*/React__default.createElement("polygon", {
243
+ points: "324.21,470.27 324.21,531.06 355.47,531.06 355.47,518.38 338.36,518.38 338.36,470.27"
244
+ }), /*#__PURE__*/React__default.createElement("polygon", {
245
+ points: "510.82,470.27 510.82,531.06 542.09,531.06 542.09,518.38 524.98,518.38 524.98,470.27"
246
+ }), /*#__PURE__*/React__default.createElement("path", {
247
+ d: "M284,518.9h19.19l3.74,12.16h14.76l-20.67-60.79h-14.85l-20.67,60.79h14.76L284,518.9z M293.55,487.55\n\t\t\t\tl5.82,18.85h-11.64L293.55,487.55z"
248
+ }), /*#__PURE__*/React__default.createElement("path", {
249
+ d: "M635.7,511c0,12.24,9.38,21.36,22.49,21.36c7.21,0,13.2-2.78,18.24-7.38l4.86,6.08h17.8l-13.37-16.59\n\t\t\t\tl9.81-14.33l-10.85-7.47l-7.64,11.12l-16.85-20.84h18.93v-12.68h-36.64v12.68l6.68,8.25C640.21,495.54,635.7,502.66,635.7,511z\n\t\t\t\t M657.06,501.01l11.29,14.07c-2.26,2.34-5.21,4.17-9.03,4.17c-5.64,0-9.21-4-9.21-8.77\n\t\t\t\tC650.11,506.22,652.98,502.66,657.06,501.01z"
250
+ }), /*#__PURE__*/React__default.createElement("path", {
251
+ d: "M176.32,529.41c-9.38-5.9-17.02-14.16-22.06-23.01c6.6-3.04,10.6-9.29,10.6-17.02\n\t\t\t\tc0-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.78h0L176.32,529.41z\n\t\t\t\t M141.67,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47C150.36,493.72,147.93,496.93,141.67,496.93z"
252
+ }), /*#__PURE__*/React__default.createElement("path", {
253
+ d: "M923.39,470.27l-19.45,57.31l-11.03-20.75c7.12-2.95,11.46-9.38,11.46-17.45\n\t\t\t\tc0-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.76\n\t\t\t\tl-20.67-60.79H923.39z M881.19,496.93h-6.43v-15.02h6.43c6.25,0,8.68,3.21,8.68,7.47C889.87,493.72,887.44,496.93,881.19,496.93z\n\t\t\t\t M924.95,506.39l5.82-18.85l5.82,18.85H924.95z"
254
+ }), /*#__PURE__*/React__default.createElement("path", {
255
+ d: "M800.43,508.48c12.33,0,20.58-7.99,20.58-19.11c0-11.03-8.25-19.1-20.58-19.1h-23.19v60.79h14.16v-22.58\n\t\t\t\tH800.43z M791.4,481.91h6.42c6.25,0,8.68,3.21,8.68,7.47c0,4.34-2.43,7.56-8.68,7.56h-6.42V481.91z"
256
+ }), /*#__PURE__*/React__default.createElement("path", {
257
+ d: "M200.55,468.97c-18.58,0-32.56,13.54-32.56,31.7c0,18.15,13.98,31.7,32.56,31.7\n\t\t\t\tc18.67,0,32.56-13.55,32.56-31.7C233.11,482.51,219.22,468.97,200.55,468.97z M200.55,519.25c-10.25,0-18.06-7.99-18.06-18.58\n\t\t\t\tc0-10.59,7.81-18.58,18.06-18.58c10.33,0,18.06,7.99,18.06,18.58C218.61,511.26,210.88,519.25,200.55,519.25z"
258
+ }), /*#__PURE__*/React__default.createElement("polygon", {
259
+ points: "253.87,490.41 241.89,470.27 225.82,470.27 246.75,504.92 246.75,531.06 260.9,531.06 \n\t\t\t\t260.9,504.74 281.74,470.27 265.76,470.27"
260
+ }), /*#__PURE__*/React__default.createElement("polygon", {
261
+ points: "856.79,482.95 856.79,470.27 824.66,470.27 824.66,531.06 856.79,531.06 856.79,518.38 \n\t\t\t\t838.81,518.38 838.81,506.74 853.23,506.74 853.23,494.06 838.81,494.06 838.81,482.95"
262
+ }))), align === 'left' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
263
+ d: "M121.69,630.37v-62.3h8.01v62.3H121.69z"
264
+ }), /*#__PURE__*/React__default.createElement("path", {
265
+ d: "M179.27,630.37l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H179.27z"
266
+ }), /*#__PURE__*/React__default.createElement("path", {
267
+ d: "M266.85,608.12c0,5.79-1.25,10.86-3.92,14.86c-3.83,5.88-9.97,8.72-17.18,8.72c-8.1,0-13.8-3.56-17.44-8.63\n\t\t\tc-4.81-6.59-6.41-15.75-6.41-23.85c0.09-14.86,5.79-32.49,23.94-32.49c11.48,0,19.23,8.63,19.23,19.05c0,1.07-0.09,2.49-0.36,3.65\n\t\t\tl-7.92,0.45c0.18-0.98,0.27-2.14,0.27-3.38c0-6.85-4.01-12.64-11.21-12.64c-12.37,0-15.93,14.6-15.93,25.37\n\t\t\tc0,5.16,0.8,12.28,3.47,17.36c2.49,4.72,6.68,8.01,12.37,8.01c9.43,0,12.82-7.48,13.17-16.91L266.85,608.12z"
268
+ }), /*#__PURE__*/React__default.createElement("path", {
269
+ d: "M278.95,630.37v-62.3h8.01v62.3H278.95z"
270
+ }), /*#__PURE__*/React__default.createElement("path", {
271
+ d: "M336.53,630.37l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.34,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H336.53z"
272
+ }), /*#__PURE__*/React__default.createElement("path", {
273
+ d: "M360.74,630.37v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12H360.74z"
274
+ }), /*#__PURE__*/React__default.createElement("path", {
275
+ d: "M453.75,630.37v-37.83c0-2.22,0-4.09,0.09-6.23c-0.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72\n\t\t\tc-0.98-2.31-1.42-3.65-2.23-6.23c0.09,2.14,0.09,4.01,0.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07\n\t\t\tc1.25,3.03,1.69,4.18,2.67,6.76c0.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3H453.75z"
276
+ }), /*#__PURE__*/React__default.createElement("path", {
277
+ d: "M511.42,630.37l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3H511.42z M496.91,584.53\n\t\t\tc-0.89-2.76-1.16-3.92-1.42-5.16c-0.27,1.25-0.53,2.4-1.42,5.16l-7.57,24.48h18.07L496.91,584.53z"
278
+ }), /*#__PURE__*/React__default.createElement("path", {
279
+ d: "M555.38,588.98c0.36-1.96,0.53-3.12,0.53-5.25c0-6.14-4.54-9.88-10.68-9.88s-10.68,3.74-10.68,9.88\n\t\t\tc0,7.83,8.19,9.17,15.22,11.84c7.21,2.76,16.02,6.41,16.02,17.98c0,11.3-9.08,18.16-20.47,18.16s-20.47-6.85-20.47-18.16\n\t\t\tc0-2.58,0.53-4.54,1.07-5.87l7.92-0.45c-0.62,2.05-0.98,4.01-0.98,6.32c0,7.03,5.43,11.04,12.46,11.04s12.46-4,12.46-11.04\n\t\t\tc0-8.19-8.99-10.24-14.95-12.37c-8.37-3.03-16.29-6.59-16.29-17.62c0-10.5,8.63-16.82,18.69-16.82s18.69,6.32,18.69,16.82\n\t\t\tc0,1.69-0.27,3.74-0.62,4.9L555.38,588.98z"
280
+ })), align === 'center' && /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
281
+ d: "M319.77,626.67v-62.3h8.01v62.3H319.77z"
282
+ }), /*#__PURE__*/React__default.createElement("path", {
283
+ d: "M377.35,626.67l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H377.35z"
284
+ }), /*#__PURE__*/React__default.createElement("path", {
285
+ d: "M464.92,604.42c0,5.79-1.25,10.86-3.92,14.86c-3.83,5.88-9.97,8.72-17.18,8.72c-8.1,0-13.8-3.56-17.45-8.63\n\t\t\tc-4.81-6.59-6.41-15.75-6.41-23.85c0.09-14.86,5.79-32.49,23.94-32.49c11.48,0,19.22,8.63,19.22,19.05c0,1.07-0.09,2.49-0.36,3.65\n\t\t\tl-7.92,0.45c0.18-0.98,0.27-2.14,0.27-3.38c0-6.85-4-12.64-11.21-12.64c-12.37,0-15.93,14.6-15.93,25.37\n\t\t\tc0,5.16,0.8,12.28,3.47,17.36c2.49,4.72,6.68,8.01,12.37,8.01c9.43,0,12.82-7.48,13.17-16.91L464.92,604.42z"
286
+ }), /*#__PURE__*/React__default.createElement("path", {
287
+ d: "M477.03,626.67v-62.3h8.01v62.3H477.03z"
288
+ }), /*#__PURE__*/React__default.createElement("path", {
289
+ d: "M534.61,626.67l-22.34-40.85c-1.33-2.4-2.58-4.81-3.2-6.32c0.09,1.51,0.18,4.09,0.18,6.32v40.85h-8.01v-62.3h8.01\n\t\t\tl22.34,40.85c1.33,2.4,2.58,4.81,3.2,6.32c-0.09-1.51-0.18-4.09-0.18-6.32v-40.85h8.01v62.3H534.61z"
290
+ }), /*#__PURE__*/React__default.createElement("path", {
291
+ d: "M558.81,626.67v-62.3h34.27v7.12h-26.26v20.03h19.14v7.12h-19.14v20.92h27.15v7.12H558.81z"
292
+ }), /*#__PURE__*/React__default.createElement("path", {
293
+ d: "M651.82,626.67v-37.83c0-2.22,0-4.09,0.09-6.23c-0.8,2.58-1.25,3.92-2.23,6.23l-15.75,38.72h-1.78l-15.75-38.72\n\t\t\tc-0.98-2.31-1.42-3.65-2.23-6.23c0.09,2.14,0.09,4.01,0.09,6.23v37.83h-7.92v-62.3h8.01l16.11,39.07\n\t\t\tc1.25,3.03,1.69,4.18,2.67,6.76c0.98-2.58,1.42-3.74,2.67-6.76l15.93-39.07h8.01v62.3H651.82z"
294
+ }), /*#__PURE__*/React__default.createElement("path", {
295
+ d: "M709.49,626.67l-4.54-14.24h-22.7l-4.54,14.24h-8.1l20.03-62.3h8.01l20.03,62.3H709.49z M694.98,580.84\n\t\t\tc-0.89-2.76-1.16-3.92-1.42-5.16c-0.27,1.25-0.53,2.4-1.42,5.16l-7.57,24.48h18.07L694.98,580.84z"
296
+ }), /*#__PURE__*/React__default.createElement("path", {
297
+ d: "M753.46,585.29c0.36-1.96,0.53-3.12,0.53-5.25c0-6.14-4.54-9.88-10.68-9.88c-6.14,0-10.68,3.74-10.68,9.88\n\t\t\tc0,7.83,8.19,9.17,15.22,11.84c7.21,2.76,16.02,6.41,16.02,17.98c0,11.3-9.08,18.16-20.47,18.16s-20.47-6.85-20.47-18.16\n\t\t\tc0-2.58,0.53-4.54,1.07-5.87l7.92-0.45c-0.62,2.05-0.98,4.01-0.98,6.32c0,7.03,5.43,11.04,12.46,11.04c7.03,0,12.46-4,12.46-11.04\n\t\t\tc0-8.19-8.99-10.24-14.95-12.37c-8.37-3.03-16.29-6.59-16.29-17.62c0-10.5,8.63-16.82,18.69-16.82S762,569.36,762,579.86\n\t\t\tc0,1.69-0.27,3.74-0.62,4.9L753.46,585.29z"
154
298
  }))));
155
299
  };
156
300
 
@@ -1396,13 +1540,15 @@ var Tickets = (function (_ref) {
1396
1540
 
1397
1541
  var Wheelchair = (function (_ref) {
1398
1542
  var _ref$color = _ref.color,
1399
- color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
1543
+ color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
1544
+ ariaLabel = _ref.ariaLabel;
1400
1545
  return /*#__PURE__*/createElement("svg", {
1401
1546
  width: "100%",
1402
1547
  height: "100%",
1403
1548
  viewBox: "0 0 24 24",
1404
1549
  fill: "none",
1405
- xmlns: "http://www.w3.org/2000/svg"
1550
+ xmlns: "http://www.w3.org/2000/svg",
1551
+ "aria-label": ariaLabel
1406
1552
  }, /*#__PURE__*/createElement("path", {
1407
1553
  d: "M8.4 18.8c-1.1 0-2.2-.4-3-1.1-.8-.8-1.3-1.8-1.3-2.9-.1-1.6.9-3.2 2.3-3.9l-.4-1c-1.9.9-3 2.8-3 4.9.1 2.8 2.4 5.1 5.3 5.1h.2c2.6-.1 4.7-2.1 5.1-4.6l-1.1-.1c-.3 2-2 3.6-4.1 3.6ZM9.8 4.5c1.2 0 2.2-1 2.2-2.2C12 1.1 11 .1 9.8.1c-1.2 0-2.2 1-2.2 2.2 0 1.2.9 2.2 2.2 2.2Zm0-3.3c.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1Zm4.9 12c-.3-.5-.9-.8-1.6-.8h-2.6V6.3c0-.6-.5-1.2-1.1-1.2H6.2c-.5.1-.9.5-.9 1v3.2h1.1V6.2l2.9.1v7.2h3.8c.3 0 .5.1.6.3l3.4 5.4.9-.6-3.3-5.4Z",
1408
1554
  fill: color
@@ -2283,7 +2429,8 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
2283
2429
  color = _ref.color,
2284
2430
  iconName = _ref.iconName,
2285
2431
  title = _ref.title,
2286
- direction = _ref.direction;
2432
+ direction = _ref.direction,
2433
+ ariaLabel = _ref.ariaLabel;
2287
2434
  var IconComponent = IconLibrary[iconName];
2288
2435
  return /*#__PURE__*/createElement(Wrapper, {
2289
2436
  className: className,
@@ -2291,7 +2438,8 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
2291
2438
  title: title,
2292
2439
  direction: direction
2293
2440
  }, /*#__PURE__*/createElement(IconComponent, {
2294
- color: color
2441
+ color: color,
2442
+ ariaLabel: ariaLabel
2295
2443
  }));
2296
2444
  });
2297
2445
  Icon.displayName = 'Icon';
@@ -2628,7 +2776,39 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
2628
2776
  });
2629
2777
 
2630
2778
  var _templateObject$b;
2631
- var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__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) {
2779
+ /**
2780
+ * # IMPORTANT
2781
+ * Please use the `<GridItem />` component instead of this component if possible.
2782
+ * This component was introduced due to incompatibilities between versions of the Chord library.
2783
+ */
2784
+
2785
+ var GridItemLegacy = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", " / span\n ", ";\n\n @media ", " {\n & {\n grid-column: ", " /\n span ", ";\n }\n }\n\n @media ", " {\n & {\n grid-column: ", " / span\n ", ";\n }\n }\n"])), function (_ref) {
2786
+ var columnStartDesktop = _ref.columnStartDesktop;
2787
+ return columnStartDesktop;
2788
+ }, function (_ref2) {
2789
+ var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
2790
+ columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
2791
+ return columnSpanDesktop;
2792
+ }, devices.mobile, function (_ref3) {
2793
+ var columnStartDevice = _ref3.columnStartDevice,
2794
+ columnStartSmallDevice = _ref3.columnStartSmallDevice;
2795
+ return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
2796
+ }, function (_ref4) {
2797
+ var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
2798
+ columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
2799
+ columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
2800
+ return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
2801
+ }, devices.tablet, function (_ref5) {
2802
+ var columnStartDevice = _ref5.columnStartDevice;
2803
+ return columnStartDevice;
2804
+ }, function (_ref6) {
2805
+ var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
2806
+ columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
2807
+ return columnSpanDevice;
2808
+ });
2809
+
2810
+ var _templateObject$c;
2811
+ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
2632
2812
  var _ref$aspectRatio = _ref.aspectRatio,
2633
2813
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
2634
2814
  return aspectRatio;
@@ -2646,8 +2826,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
2646
2826
  return aspectRatio;
2647
2827
  });
2648
2828
 
2649
- var _templateObject$c, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
2650
- var ProgressView = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
2829
+ var _templateObject$d, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
2830
+ var ProgressView = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
2651
2831
  var height = _ref.height;
2652
2832
  return height ? height + "px" : '6px';
2653
2833
  });
@@ -2730,13 +2910,13 @@ var Progress = function Progress(_ref) {
2730
2910
  }, renderSteps()));
2731
2911
  };
2732
2912
 
2733
- var _templateObject$d, _templateObject2$4, _templateObject3$3;
2734
- var RadioContainer = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
2913
+ var _templateObject$e, _templateObject2$4, _templateObject3$3;
2914
+ var RadioContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
2735
2915
  var RadioLine = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 20px;\n grid-template-columns: 1.15em 1fr;\n user-select: none;\n cursor: pointer;\n color: black;\n\n &:focus {\n outline: none;\n }\n\n input[type='radio'] {\n cursor: pointer;\n appearance: none;\n background-color: #ffffff00;\n margin: 0;\n color: black;\n width: 20px;\n height: 20px;\n border: 1px solid black;\n border-radius: 50%;\n position: relative;\n place-content: center;\n display: block;\n }\n\n input[type='radio']::before {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ffffff00;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n input[type='radio']:checked::before {\n background-color: black;\n }\n"])));
2736
2916
  var RadioError = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
2737
2917
 
2738
- var _templateObject$e;
2739
- var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__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) {
2918
+ var _templateObject$f;
2919
+ var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
2740
2920
  var typography = _ref.typography;
2741
2921
  return typography;
2742
2922
  }, function (_ref2) {
@@ -2792,9 +2972,10 @@ var StyledTag = function StyledTag(_ref) {
2792
2972
  }, children);
2793
2973
  };
2794
2974
  var AltHeader = function AltHeader(_ref2) {
2795
- var level = _ref2.level,
2975
+ var semanticLevel = _ref2.semanticLevel,
2976
+ level = _ref2.level,
2796
2977
  children = _ref2.children;
2797
- var renderedTag = "h" + level;
2978
+ var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
2798
2979
  return /*#__PURE__*/React__default.createElement(StyledTag, {
2799
2980
  tag: renderedTag,
2800
2981
  typography: "altHeader",
@@ -2892,8 +3073,8 @@ var Radio = function Radio(_ref) {
2892
3073
  }, error)));
2893
3074
  };
2894
3075
 
2895
- var _templateObject$f, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
2896
- var Container = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3076
+ var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
3077
+ var Container = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
2897
3078
  var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
2898
3079
  var error = _ref.error,
2899
3080
  darkMode = _ref.darkMode,
@@ -3001,8 +3182,8 @@ var Radio2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
3001
3182
  }, error)));
3002
3183
  });
3003
3184
 
3004
- var _templateObject$g, _templateObject2$6, _templateObject3$5;
3005
- var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
3185
+ var _templateObject$h, _templateObject2$6, _templateObject3$5;
3186
+ var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
3006
3187
  var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
3007
3188
  var theme = _ref.theme;
3008
3189
  return theme.colors.primary;
@@ -3073,8 +3254,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
3073
3254
  }, renderNextIcon()));
3074
3255
  };
3075
3256
 
3076
- var _templateObject$h;
3077
- var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
3257
+ var _templateObject$i;
3258
+ var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
3078
3259
  var fillColor = _ref.fillColor;
3079
3260
  return fillColor;
3080
3261
  });
@@ -3098,8 +3279,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
3098
3279
  })));
3099
3280
  };
3100
3281
 
3101
- var _templateObject$i, _templateObject2$7;
3102
- var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
3282
+ var _templateObject$j, _templateObject2$7;
3283
+ var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
3103
3284
  var Splitter = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
3104
3285
 
3105
3286
  var SectionSplitter = function SectionSplitter(_ref) {
@@ -3118,8 +3299,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
3118
3299
  }, /*#__PURE__*/React__default.createElement(Splitter, null)));
3119
3300
  };
3120
3301
 
3121
- var _templateObject$j;
3122
- var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
3302
+ var _templateObject$k;
3303
+ var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
3123
3304
 
3124
3305
  var SponsorLogo = function SponsorLogo(_ref) {
3125
3306
  var _ref$colorLogo = _ref.colorLogo,
@@ -3329,8 +3510,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
3329
3510
  })))));
3330
3511
  };
3331
3512
 
3332
- var _templateObject$k, _templateObject2$8;
3333
- var CustomImage = /*#__PURE__*/styled.img(_templateObject$k || (_templateObject$k = /*#__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);
3513
+ var _templateObject$l, _templateObject2$8;
3514
+ var CustomImage = /*#__PURE__*/styled.img(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
3334
3515
  var SponsorshipStyledIframe = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
3335
3516
 
3336
3517
  var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
@@ -3363,8 +3544,8 @@ var Sponsorship = function Sponsorship(_ref) {
3363
3544
  }));
3364
3545
  };
3365
3546
 
3366
- var _templateObject$l, _templateObject2$9;
3367
- var TabText = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject$l = /*#__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) {
3547
+ var _templateObject$m, _templateObject2$9;
3548
+ var TabText = /*#__PURE__*/styled.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
3368
3549
  if (props.withIcon === 'left') {
3369
3550
  return "margin-left: 5px;";
3370
3551
  }
@@ -3463,8 +3644,8 @@ var Tab = function Tab(_ref) {
3463
3644
  }));
3464
3645
  };
3465
3646
 
3466
- var _templateObject$m, _templateObject2$a;
3467
- var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$m || (_templateObject$m = /*#__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) {
3647
+ var _templateObject$n, _templateObject2$a;
3648
+ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
3468
3649
  var iconName = _ref.iconName;
3469
3650
  return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
3470
3651
  }, function (_ref2) {
@@ -3515,8 +3696,8 @@ var TabLink = function TabLink(_ref) {
3515
3696
  })) : null, children);
3516
3697
  };
3517
3698
 
3518
- var _templateObject$n, _templateObject2$b, _templateObject3$6, _templateObject4$3;
3519
- var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
3699
+ var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
3700
+ var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
3520
3701
  var width = _ref.width;
3521
3702
  return width ? width + "px;" : '100%;';
3522
3703
  }, function (_ref2) {
@@ -3639,8 +3820,8 @@ var TextArea = function TextArea(_ref) {
3639
3820
  }, error))));
3640
3821
  };
3641
3822
 
3642
- var _templateObject$o, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
3643
- var Container$1 = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3823
+ var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
3824
+ var Container$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3644
3825
  var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
3645
3826
  var width = _ref.width;
3646
3827
  if (!width) return 'none';
@@ -3766,8 +3947,8 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
3766
3947
  }, error)));
3767
3948
  });
3768
3949
 
3769
- var _templateObject$p, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
3770
- var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3950
+ var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
3951
+ var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3771
3952
  var textStyles = /*#__PURE__*/css(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
3772
3953
  var theme = _ref.theme;
3773
3954
  return theme.fonts.desktop.weights.body[1];
@@ -3840,8 +4021,8 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
3840
4021
  }, error) : null);
3841
4022
  };
3842
4023
 
3843
- var _templateObject$q, _templateObject2$e;
3844
- var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$q || (_templateObject$q = /*#__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) {
4024
+ var _templateObject$r, _templateObject2$e;
4025
+ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
3845
4026
  var iconName = _ref.iconName;
3846
4027
  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
3847
4028
  }, function (_ref2) {
@@ -3870,21 +4051,6 @@ var TextLink = function TextLink(_ref) {
3870
4051
  })) : null);
3871
4052
  };
3872
4053
 
3873
- var _templateObject$r, _templateObject2$f, _templateObject3$9, _templateObject4$6;
3874
- var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__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) {
3875
- var fontSize = _ref.fontSize;
3876
- return fontSize + 'px';
3877
- }, function (_ref2) {
3878
- var color = _ref2.color;
3879
- return color;
3880
- });
3881
- var LogoRightSide = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-left: 10px;\n font-weight: 500;\n letter-spacing: 1px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
3882
- var LogoLeftSide = /*#__PURE__*/styled.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-right: 1px solid ", ";\n padding-right: 10px;\n letter-spacing: 2px;\n display: flex;\n flex-direction: column;\n"])), function (_ref3) {
3883
- var color = _ref3.color;
3884
- return color;
3885
- });
3886
- var LogoLeftSideRow = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
3887
-
3888
4054
  var TextLogoProduct;
3889
4055
 
3890
4056
  (function (TextLogoProduct) {
@@ -3892,25 +4058,12 @@ var TextLogoProduct;
3892
4058
  TextLogoProduct["Cinema"] = "CINEMA";
3893
4059
  })(TextLogoProduct || (TextLogoProduct = {}));
3894
4060
 
3895
- var Logo = function Logo(_ref) {
3896
- var color = _ref.color,
3897
- productName = _ref.productName,
3898
- _ref$fontSize = _ref.fontSize,
3899
- fontSize = _ref$fontSize === void 0 ? 12 : _ref$fontSize;
3900
- return /*#__PURE__*/createElement(LogoWrapper, {
3901
- color: color,
3902
- fontSize: fontSize
3903
- }, /*#__PURE__*/createElement(LogoLeftSide, {
3904
- color: color
3905
- }, /*#__PURE__*/createElement(LogoLeftSideRow, null, "ROYAL"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "OPERA"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "HOUSE")), /*#__PURE__*/createElement(LogoRightSide, null, productName));
3906
- };
3907
-
3908
- var _templateObject$s, _templateObject2$g, _templateObject3$a, _templateObject4$7;
4061
+ var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
3909
4062
  var TickboxError = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
3910
4063
  var dark = _ref.dark;
3911
4064
  return dark ? 'white' : 'errorstate';
3912
4065
  });
3913
- var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
4066
+ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$f || (_templateObject2$f = /*#__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) {
3914
4067
  var dark = _ref2.dark,
3915
4068
  disabled = _ref2.disabled;
3916
4069
  if (dark) return disabled ? 'lightgrey' : 'white';
@@ -3919,7 +4072,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$g || (_templateO
3919
4072
  var disabled = _ref3.disabled;
3920
4073
  return disabled ? 'not-allowed' : 'pointer';
3921
4074
  }, devices.mobileAndTablet);
3922
- var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
4075
+ var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$9 || (_templateObject3$9 = /*#__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) {
3923
4076
  var dark = _ref4.dark,
3924
4077
  disabled = _ref4.disabled,
3925
4078
  error = _ref4.error;
@@ -3935,7 +4088,7 @@ var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$a || (_template
3935
4088
  dark = _ref6.dark;
3936
4089
  return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
3937
4090
  }, devices.mobile);
3938
- var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(\n --base-color-", "\n );\n & svg {\n display: block;\n path {\n fill: var(\n --base-color-", "\n );\n }\n }\n }\n"])), TickboxCheckmark, function (_ref7) {
4091
+ var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$6 || (_templateObject4$6 = /*#__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) {
3939
4092
  var dark = _ref7.dark,
3940
4093
  whiteBox = _ref7.whiteBox,
3941
4094
  disabled = _ref7.disabled;
@@ -4027,9 +4180,9 @@ var Tickbox = function Tickbox(_ref) {
4027
4180
  }, error)));
4028
4181
  };
4029
4182
 
4030
- var _templateObject$t, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2;
4183
+ var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$2;
4031
4184
  var Container$2 = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
4032
- var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
4185
+ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__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) {
4033
4186
  var error = _ref.error,
4034
4187
  darkMode = _ref.darkMode,
4035
4188
  disabled = _ref.disabled;
@@ -4052,7 +4205,7 @@ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$h || (_templateObject2$
4052
4205
  if (blackBox) return 'var(--base-color-white)';
4053
4206
  return ' var(--base-color-black)';
4054
4207
  });
4055
- var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
4208
+ var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$a || (_templateObject3$a = /*#__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) {
4056
4209
  var blackBox = _ref4.blackBox,
4057
4210
  darkMode = _ref4.darkMode;
4058
4211
  if (darkMode) return 'var(--base-color-white)';
@@ -4063,7 +4216,7 @@ var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$b || (_templateO
4063
4216
  if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
4064
4217
  return '3px solid var(--base-color-lapislazuli)';
4065
4218
  });
4066
- var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n svg {\n font-size: 12px;\n width: 1em;\n height: 1em;\n fill: currentColor;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n input[type='checkbox']:checked + ", " & {\n display: block;\n }\n"])), Tickbox$1);
4219
+ var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$7 || (_templateObject4$7 = /*#__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);
4067
4220
  var TextLabel$3 = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
4068
4221
  var darkMode = _ref6.darkMode,
4069
4222
  disabled = _ref6.disabled;
@@ -4138,17 +4291,17 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
4138
4291
  }, error)));
4139
4292
  });
4140
4293
 
4141
- var _templateObject$u, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
4294
+ var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
4142
4295
  var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
4143
4296
  var color = _ref.color;
4144
4297
  return color;
4145
4298
  });
4146
- var Line = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
4299
+ var Line = /*#__PURE__*/styled.div(_templateObject2$h || (_templateObject2$h = /*#__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) {
4147
4300
  var color = _ref2.color;
4148
4301
  return color;
4149
4302
  }, devices.mobileAndTablet);
4150
- var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
4151
- var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n display: flex;\n\n @media ", " {\n font-size: var(--font-size-header-5);\n }\n"])), devices.tablet);
4303
+ var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
4304
+ var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__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);
4152
4305
  var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n margin-top: 4px;\n"])));
4153
4306
  var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
4154
4307
  var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
@@ -4990,11 +5143,11 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
4990
5143
  }
4991
5144
  });
4992
5145
 
4993
- var _templateObject$w, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
5146
+ var _templateObject$w, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
4994
5147
  var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$w || (_templateObject$w = /*#__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"])));
4995
- var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
4996
- var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
4997
- var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 10px;\n"])));
5148
+ var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$i || (_templateObject2$i = /*#__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"])));
5149
+ var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
5150
+ var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
4998
5151
  var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
4999
5152
  var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
5000
5153
  var VideoMute = /*#__PURE__*/styled.button(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 17px;\n height: 17px;\n background: none;\n border: none;\n padding: 0;\n svg {\n width: 100%;\n height: 100%;\n }\n cursor: pointer;\n"])));
@@ -5064,6 +5217,16 @@ var VideoControls = function VideoControls(_ref2) {
5064
5217
  video.loop = loop;
5065
5218
  }
5066
5219
  }, [loop]);
5220
+ useEffect(function () {
5221
+ var handleFullscreenChange = function handleFullscreenChange() {
5222
+ setIsFullscreen(!!document.fullscreenElement);
5223
+ };
5224
+
5225
+ document.addEventListener('fullscreenchange', handleFullscreenChange);
5226
+ return function () {
5227
+ document.removeEventListener('fullscreenchange', handleFullscreenChange);
5228
+ };
5229
+ }, []);
5067
5230
  var handleFullscreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
5068
5231
  var videoContainer;
5069
5232
  return runtime_1.wrap(function _callee$(_context) {
@@ -5162,7 +5325,9 @@ var VideoControls = function VideoControls(_ref2) {
5162
5325
  setVolume(newVolume);
5163
5326
  }
5164
5327
  }, [isMuted]);
5165
- return /*#__PURE__*/React__default.createElement(VideoControlsWrapper, null, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper, null, /*#__PURE__*/React__default.createElement(LeftWrapper, null, /*#__PURE__*/React__default.createElement(VideoPlayButton, {
5328
+ return /*#__PURE__*/React__default.createElement(VideoControlsWrapper, {
5329
+ className: "video-controls-container"
5330
+ }, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper, null, /*#__PURE__*/React__default.createElement(LeftWrapper, null, /*#__PURE__*/React__default.createElement(VideoPlayButton, {
5166
5331
  id: "play",
5167
5332
  onClick: handlePlay,
5168
5333
  className: "video-play-button",
@@ -5198,13 +5363,13 @@ var VideoControls = function VideoControls(_ref2) {
5198
5363
  })));
5199
5364
  };
5200
5365
 
5201
- var _templateObject$x, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7;
5366
+ var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$7;
5202
5367
  var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
5203
- var StepperError = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
5368
+ var StepperError = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
5204
5369
  var darkMode = _ref.darkMode;
5205
5370
  return darkMode ? 'white' : 'errorstate';
5206
5371
  });
5207
- var StepperBox = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
5372
+ var StepperBox = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__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) {
5208
5373
  var darkMode = _ref2.darkMode,
5209
5374
  disabled = _ref2.disabled,
5210
5375
  error = _ref2.error;
@@ -5226,7 +5391,7 @@ var StepperBox = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3
5226
5391
  var disabled = _ref6.disabled;
5227
5392
  return disabled ? 'midgrey' : 'black';
5228
5393
  });
5229
- var StepperValue = /*#__PURE__*/styled.input(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 51px;\n border: 0;\n text-align: center;\n font-family: var(--font-family-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n background-color: transparent;\n cursor: ", ";\n"])), function (_ref7) {
5394
+ var StepperValue = /*#__PURE__*/styled.input(_templateObject4$a || (_templateObject4$a = /*#__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) {
5230
5395
  var disabled = _ref7.disabled;
5231
5396
  return disabled ? 'not-allowed' : 'text';
5232
5397
  });
@@ -5426,14 +5591,14 @@ var Component = function Component(_ref) {
5426
5591
  }, error)));
5427
5592
  };
5428
5593
 
5429
- var _templateObject$y, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
5594
+ var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
5430
5595
  var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
5431
5596
  var isMenuOpen = _ref.isMenuOpen;
5432
5597
  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 ";
5433
5598
  });
5434
- var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
5435
- var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
5436
- var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref2) {
5599
+ var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__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);
5600
+ var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__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);
5601
+ var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__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) {
5437
5602
  var visible = _ref2.visible;
5438
5603
  return visible ? 'visible' : 'hidden';
5439
5604
  }, zIndexes.search, devices.mobile);
@@ -5452,9 +5617,9 @@ var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 ||
5452
5617
  var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
5453
5618
 
5454
5619
  var _templateObject$z;
5455
- var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
5620
+ var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
5456
5621
 
5457
- var Logo$1 = function Logo(_ref) {
5622
+ var Logo = function Logo(_ref) {
5458
5623
  var _ref$id = _ref.id,
5459
5624
  id = _ref$id === void 0 ? 'Logo' : _ref$id,
5460
5625
  _ref$dataRoh = _ref.dataRoh,
@@ -5470,7 +5635,7 @@ var Logo$1 = function Logo(_ref) {
5470
5635
  rel: "noopener noreferrer",
5471
5636
  href: urlLink,
5472
5637
  title: title
5473
- }, /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
5638
+ }, /*#__PURE__*/React__default.createElement(LogoWrapper, {
5474
5639
  id: id,
5475
5640
  className: "logoImg"
5476
5641
  }, /*#__PURE__*/React__default.createElement("picture", null, /*#__PURE__*/React__default.createElement("source", {
@@ -5484,7 +5649,7 @@ var Logo$1 = function Logo(_ref) {
5484
5649
  var _templateObject$A;
5485
5650
  var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__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);
5486
5651
 
5487
- var _templateObject$B, _templateObject2$m, _templateObject3$g, _templateObject4$d;
5652
+ var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$c;
5488
5653
  var BasketContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__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) {
5489
5654
  var selected = _ref.selected,
5490
5655
  colorPrimary = _ref.colorPrimary;
@@ -5513,9 +5678,9 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObj
5513
5678
 
5514
5679
  return '';
5515
5680
  });
5516
- var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
5517
- var NumContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
5518
- var BasketText = /*#__PURE__*/styled.a(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
5681
+ var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
5682
+ var NumContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__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"])));
5683
+ var BasketText = /*#__PURE__*/styled.a(_templateObject4$c || (_templateObject4$c = /*#__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"])));
5519
5684
 
5520
5685
  var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
5521
5686
  if (!expiryUnixTimestamp) return 0;
@@ -5673,7 +5838,7 @@ var Basket$1 = function Basket(_ref) {
5673
5838
  }, expiryTime ? basketText : text) : ''));
5674
5839
  };
5675
5840
 
5676
- var _templateObject$C, _templateObject2$n;
5841
+ var _templateObject$C, _templateObject2$m;
5677
5842
  var SearchContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
5678
5843
  var selected = _ref.selected,
5679
5844
  colorPrimary = _ref.colorPrimary;
@@ -5690,7 +5855,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObj
5690
5855
  var colorPrimary = _ref3.colorPrimary;
5691
5856
  return colorPrimary;
5692
5857
  });
5693
- var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
5858
+ var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
5694
5859
 
5695
5860
  var Search$1 = function Search(_ref) {
5696
5861
  var _ref$selected = _ref.selected,
@@ -5966,23 +6131,23 @@ var NavTop = function NavTop(_ref) {
5966
6131
  }));
5967
6132
  };
5968
6133
 
5969
- var _templateObject$D, _templateObject2$o, _templateObject3$h, _templateObject4$e;
6134
+ var _templateObject$D, _templateObject2$n, _templateObject3$g, _templateObject4$d;
5970
6135
  var TabsContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
5971
- var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
6136
+ var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__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) {
5972
6137
  if (props.showMenu) {
5973
6138
  return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
5974
6139
  }
5975
6140
 
5976
6141
  return "display: none;";
5977
6142
  });
5978
- var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
6143
+ var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__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) {
5979
6144
  var colorPrimary = _ref.colorPrimary;
5980
6145
  return colorPrimary;
5981
6146
  }, function (_ref2) {
5982
6147
  var colorPrimary = _ref2.colorPrimary;
5983
6148
  return colorPrimary;
5984
6149
  }, devices.mobileAndTablet);
5985
- var MenuItem = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
6150
+ var MenuItem = /*#__PURE__*/styled.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
5986
6151
 
5987
6152
  var Tabs = function Tabs(_ref) {
5988
6153
  var _ref$items = _ref.items,
@@ -6109,10 +6274,10 @@ var Tabs = function Tabs(_ref) {
6109
6274
  }, "MENU"))));
6110
6275
  };
6111
6276
 
6112
- var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject5$9, _templateObject6$6, _templateObject7$3;
6277
+ var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
6113
6278
  var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__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);
6114
- var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
6115
- var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
6279
+ var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
6280
+ var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__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"])));
6116
6281
  var InputContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
6117
6282
  var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
6118
6283
  var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
@@ -6296,7 +6461,7 @@ var Navigation = function Navigation(_ref) {
6296
6461
  columnSpanDesktop: 1,
6297
6462
  columnStartDevice: 2,
6298
6463
  columnSpanDevice: 2
6299
- }, /*#__PURE__*/React__default.createElement(LogoContainer, null, /*#__PURE__*/React__default.createElement(Logo$1, {
6464
+ }, /*#__PURE__*/React__default.createElement(LogoContainer, null, /*#__PURE__*/React__default.createElement(Logo, {
6300
6465
  urlLink: logoLink,
6301
6466
  desktopImage: desktopLogoUrl,
6302
6467
  devicesImage: devicesLogoUrl
@@ -6347,18 +6512,18 @@ var Navigation = function Navigation(_ref) {
6347
6512
  })))));
6348
6513
  };
6349
6514
 
6350
- var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$a, _templateObject6$7;
6515
+ var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
6351
6516
  var FooterSection = /*#__PURE__*/styled.section(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
6352
- var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
6353
- var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
6354
- var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
6517
+ var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__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"])));
6518
+ var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__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);
6519
+ var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
6355
6520
  var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
6356
6521
  var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
6357
6522
 
6358
- var _templateObject$G, _templateObject2$r, _templateObject3$k;
6523
+ var _templateObject$G, _templateObject2$q, _templateObject3$j;
6359
6524
  var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$G || (_templateObject$G = /*#__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);
6360
- var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
6361
- var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
6525
+ var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$q || (_templateObject2$q = /*#__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);
6526
+ var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
6362
6527
 
6363
6528
  var PolicyLinks = function PolicyLinks(_ref) {
6364
6529
  var _ref$items = _ref.items,
@@ -6374,11 +6539,11 @@ var PolicyLinks = function PolicyLinks(_ref) {
6374
6539
  }));
6375
6540
  };
6376
6541
 
6377
- var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
6542
+ var _templateObject$H, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
6378
6543
  var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__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);
6379
- var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
6380
- var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
6381
- var SignUpText = /*#__PURE__*/styled.p(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
6544
+ var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__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);
6545
+ var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__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);
6546
+ var SignUpText = /*#__PURE__*/styled.p(_templateObject4$f || (_templateObject4$f = /*#__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);
6382
6547
  var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
6383
6548
  var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
6384
6549
  var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
@@ -6446,15 +6611,15 @@ var Footer = function Footer(_ref) {
6446
6611
  }, additionalInfo)))));
6447
6612
  };
6448
6613
 
6449
- var _templateObject$I, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$9;
6614
+ var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9;
6450
6615
  var LIST_ITEM_GAP = 32;
6451
6616
  var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__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) {
6452
6617
  var bottomBorder = _ref.bottomBorder;
6453
6618
  return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
6454
6619
  }, zIndexes.anchor);
6455
- var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
6456
- var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
6457
- var TabsList = /*#__PURE__*/styled.ul(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
6620
+ var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
6621
+ var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
6622
+ var TabsList = /*#__PURE__*/styled.ul(_templateObject4$g || (_templateObject4$g = /*#__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) {
6458
6623
  var tabsOverflow = _ref2.tabsOverflow;
6459
6624
  return tabsOverflow ? 'calc(100% - 74px)' : '100%';
6460
6625
  }, LIST_ITEM_GAP, function (_ref3) {
@@ -6712,17 +6877,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
6712
6877
  })) : null) : null))));
6713
6878
  };
6714
6879
 
6715
- var _templateObject$J, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
6880
+ var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
6716
6881
  var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
6717
6882
  var sticky = _ref.sticky;
6718
6883
  return sticky ? 'sticky' : 'initial';
6719
6884
  }, zIndexes.anchor);
6720
- var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
6721
- var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
6885
+ var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
6886
+ var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__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) {
6722
6887
  var title = _ref2.title;
6723
6888
  return title ? 'row' : 'row-reverse';
6724
6889
  }, devices.tablet, devices.mobile);
6725
- var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
6890
+ var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__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);
6726
6891
  var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
6727
6892
  var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
6728
6893
  var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
@@ -6773,14 +6938,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
6773
6938
  }, message)));
6774
6939
  };
6775
6940
 
6776
- var _templateObject$K, _templateObject2$v, _templateObject3$o, _templateObject4$j, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
6941
+ var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
6777
6942
  var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__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);
6778
- var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
6779
- var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
6943
+ var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
6944
+ var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__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) {
6780
6945
  var theme = _ref.theme;
6781
6946
  return theme.colors.primary;
6782
6947
  }, Colors.White);
6783
- var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
6948
+ var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
6784
6949
  var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
6785
6950
  var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
6786
6951
  var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
@@ -6873,19 +7038,19 @@ var UpsellCards = function UpsellCards(_ref) {
6873
7038
  }));
6874
7039
  };
6875
7040
 
6876
- var _templateObject$M, _templateObject2$w, _templateObject3$p;
7041
+ var _templateObject$M, _templateObject2$v, _templateObject3$o;
6877
7042
  var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__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) {
6878
7043
  var theme = _ref.theme;
6879
7044
  return theme.colors.primary;
6880
7045
  }, devices.mobile, devices.tablet);
6881
- var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
6882
- var TextContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
7046
+ var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
7047
+ var TextContainer = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__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);
6883
7048
 
6884
- var _templateObject$N, _templateObject2$x, _templateObject3$q, _templateObject4$k, _templateObject5$e;
7049
+ var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$j, _templateObject5$e;
6885
7050
  var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
6886
- var LineContainer = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
6887
- var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
6888
- var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
7051
+ var LineContainer = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
7052
+ var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
7053
+ var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__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);
6889
7054
  var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), devices.mobile);
6890
7055
 
6891
7056
  var Accordion = function Accordion(_ref) {
@@ -7030,7 +7195,8 @@ var Accordions = function Accordions(_ref) {
7030
7195
  visibleStandfirst: accordion.visibleStandfirst,
7031
7196
  contentType: accordion.contentType,
7032
7197
  displayLevel: accordion.displayLevel,
7033
- semanticLevel: accordion.semanticLevel
7198
+ semanticLevel: accordion.semanticLevel,
7199
+ initOpen: accordion.initOpen
7034
7200
  }, accordion.children);
7035
7201
  }));
7036
7202
  };
@@ -7044,13 +7210,13 @@ var Theme = function Theme(_ref) {
7044
7210
  }, children);
7045
7211
  };
7046
7212
 
7047
- var _templateObject$P, _templateObject2$y, _templateObject3$r;
7213
+ var _templateObject$P, _templateObject2$x, _templateObject3$q;
7048
7214
  var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__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) {
7049
7215
  var theme = _ref.theme;
7050
7216
  return theme.colors.primary;
7051
7217
  }, devices.mobile);
7052
- var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
7053
- var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
7218
+ var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__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);
7219
+ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__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"])));
7054
7220
 
7055
7221
  var AnnouncementBanner = function AnnouncementBanner(_ref) {
7056
7222
  var title = _ref.title,
@@ -7109,7 +7275,7 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
7109
7275
  }), children);
7110
7276
  };
7111
7277
 
7112
- var _templateObject$R, _templateObject2$z, _templateObject3$s, _templateObject4$l, _templateObject5$f, _templateObject6$c, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
7278
+ var _templateObject$R, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$f, _templateObject6$c, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
7113
7279
  var LENGTH_LARGE_TEXT = 28;
7114
7280
  var LENGTH_SMALL_TEXT$1 = 19;
7115
7281
  var LENGTH_TEXT_TABLET = 10;
@@ -7120,14 +7286,14 @@ var CardContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObjec
7120
7286
  var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
7121
7287
  return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
7122
7288
  });
7123
- var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
7289
+ var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
7124
7290
  var lineColor = _ref3.lineColor,
7125
7291
  theme = _ref3.theme;
7126
7292
  if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
7127
7293
  return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
7128
7294
  }, zIndexes.contentOverlay);
7129
- var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
7130
- var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
7295
+ var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
7296
+ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__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) {
7131
7297
  var fullWidth = _ref4.fullWidth;
7132
7298
  return fullWidth ? '0' : '20px';
7133
7299
  }, function (_ref5) {
@@ -7395,9 +7561,9 @@ var Card = function Card(_ref) {
7395
7561
  dangerouslySetInnerHTML: {
7396
7562
  __html: truncatedText
7397
7563
  }
7398
- }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
7564
+ }))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
7399
7565
  level: 1
7400
- }, highlightText)))), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
7566
+ }, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
7401
7567
  fullWidth: fullWidth
7402
7568
  }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
7403
7569
  ref: node,
@@ -7411,9 +7577,9 @@ var Card = function Card(_ref) {
7411
7577
  }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
7412
7578
  };
7413
7579
 
7414
- var _templateObject$S, _templateObject2$A;
7580
+ var _templateObject$S, _templateObject2$z;
7415
7581
  var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__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);
7416
- var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
7582
+ var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
7417
7583
 
7418
7584
  var Cards = function Cards(_ref) {
7419
7585
  var cards = _ref.cards,
@@ -7458,17 +7624,17 @@ var Cards = function Cards(_ref) {
7458
7624
  }));
7459
7625
  };
7460
7626
 
7461
- var _templateObject$T, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
7627
+ var _templateObject$T, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$g;
7462
7628
  var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__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);
7463
- var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
7629
+ var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__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) {
7464
7630
  var hideBottomBorder = _ref.hideBottomBorder;
7465
7631
  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
7466
7632
  }, function (_ref2) {
7467
7633
  var hideTopBorder = _ref2.hideTopBorder;
7468
7634
  return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
7469
7635
  }, devices.mobileAndTablet);
7470
- var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7471
- var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
7636
+ var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7637
+ var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
7472
7638
  var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
7473
7639
 
7474
7640
  var divideAddressString = function divideAddressString(address) {
@@ -7527,13 +7693,13 @@ var ContactCard = function ContactCard(_ref) {
7527
7693
  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
7528
7694
  };
7529
7695
 
7530
- var _templateObject$U, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$8;
7696
+ var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$d, _templateObject7$8;
7531
7697
  var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7532
- var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
7698
+ var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$B || (_templateObject2$B = /*#__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) {
7533
7699
  return props.clickable ? 'pointer' : 'default';
7534
7700
  }, devices.mobile);
7535
- var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
7536
- var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
7701
+ var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
7702
+ var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__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) {
7537
7703
  return props.showImage ? 2 : '1 / span 4';
7538
7704
  }, devices.mobile);
7539
7705
  var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
@@ -7610,20 +7776,20 @@ var ContentSummary = function ContentSummary(_ref) {
7610
7776
  }), link.text)));
7611
7777
  };
7612
7778
 
7613
- var _templateObject$V, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$i;
7779
+ var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$i;
7614
7780
  var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__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) {
7615
7781
  var imageToLeft = _ref.imageToLeft;
7616
7782
  return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
7617
7783
  }, devices.mobile);
7618
- var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
7784
+ var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
7619
7785
  var imageToLeft = _ref2.imageToLeft;
7620
7786
  return imageToLeft ? 'left' : 'right';
7621
7787
  }, devices.mobile);
7622
- var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
7788
+ var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
7623
7789
  var imageToLeft = _ref3.imageToLeft;
7624
7790
  return imageToLeft ? 'right' : 'left';
7625
7791
  }, devices.mobile);
7626
- var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
7792
+ var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$n || (_templateObject4$n = /*#__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"])));
7627
7793
  var EditorialText = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
7628
7794
 
7629
7795
  var Editorial = function Editorial(_ref) {
@@ -7688,10 +7854,10 @@ var BackgroundColour;
7688
7854
  BackgroundColour["White"] = "white";
7689
7855
  })(BackgroundColour || (BackgroundColour = {}));
7690
7856
 
7691
- var _templateObject$W, _templateObject2$E, _templateObject3$w, _templateObject4$p;
7857
+ var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o;
7692
7858
  var InfoContent = /*#__PURE__*/styled('div')(_templateObject$W || (_templateObject$W = /*#__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"])));
7693
- var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7694
- var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
7859
+ var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7860
+ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
7695
7861
  if (!props.infoThemed) {
7696
7862
  return;
7697
7863
  } else {
@@ -7702,7 +7868,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$w || (_template
7702
7868
  }
7703
7869
  }
7704
7870
  });
7705
- var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
7871
+ var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
7706
7872
  return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
7707
7873
  }, function (props) {
7708
7874
  return "var(--base-color-" + props.background + ")";
@@ -7815,7 +7981,7 @@ var Information = function Information(_ref) {
7815
7981
  }))));
7816
7982
  };
7817
7983
 
7818
- var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
7984
+ var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
7819
7985
  var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__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) {
7820
7986
  var theme = _ref.theme;
7821
7987
  return theme.colors.primary;
@@ -7823,17 +7989,17 @@ var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$X || (_template
7823
7989
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
7824
7990
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
7825
7991
  }, devices.mobile);
7826
- var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
7827
- var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
7992
+ var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$E || (_templateObject2$E = /*#__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);
7993
+ var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__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) {
7828
7994
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
7829
7995
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
7830
7996
  }, devices.mobile);
7831
- var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n ", ";\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), function (_ref4) {
7997
+ var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 30px;\n }\n }\n"])), function (_ref4) {
7832
7998
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
7833
7999
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
7834
8000
  }, devices.mobile);
7835
8001
  var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
7836
- var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
8002
+ var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
7837
8003
  var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
7838
8004
  var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
7839
8005
 
@@ -7843,14 +8009,20 @@ var PageHeading = function PageHeading(_ref) {
7843
8009
  link = _ref.link,
7844
8010
  _ref$sponsor = _ref.sponsor,
7845
8011
  sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
7846
- children = _ref.children;
8012
+ children = _ref.children,
8013
+ _ref$semanticLevel = _ref.semanticLevel,
8014
+ semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
8015
+ _ref$copyCharLimit = _ref.copyCharLimit,
8016
+ copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
8017
+ _ref$titleCharLimit = _ref.titleCharLimit,
8018
+ titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
7847
8019
 
7848
8020
  var _ref2 = link || {},
7849
8021
  linkText = _ref2.text,
7850
8022
  restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
7851
8023
 
7852
- var truncatedText = text == null ? void 0 : text.substring(0, 250);
7853
- var truncatedTitle = title && title.substring(0, 40);
8024
+ var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
8025
+ var truncatedTitle = title && title.substring(0, titleCharLimit);
7854
8026
  var isTitleUnAvailable = !title;
7855
8027
  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
7856
8028
  "data-testid": "page-heading-wrapper",
@@ -7861,14 +8033,15 @@ var PageHeading = function PageHeading(_ref) {
7861
8033
  }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
7862
8034
  isPageHeadingWithoutTitle: isTitleUnAvailable
7863
8035
  }, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
7864
- level: 2
8036
+ level: 2,
8037
+ semanticLevel: semanticLevel
7865
8038
  }, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
7866
8039
  "data-testid": "page-heading-text"
7867
8040
  }, /*#__PURE__*/React__default.createElement(PageHeadingText, {
7868
8041
  dangerouslySetInnerHTML: {
7869
8042
  __html: truncatedText
7870
8043
  }
7871
- })) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$2, {
8044
+ })) : null, sponsor ? /*#__PURE__*/React__default.createElement(LogoWrapper$1, {
7872
8045
  "data-testid": "page-heading-sponsor"
7873
8046
  }, /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
7874
8047
  "data-testid": "page-heading-link"
@@ -7904,15 +8077,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
7904
8077
  theme: ThemeType.Cinema
7905
8078
  }, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
7906
8079
  link: cinemaLink
7907
- }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
8080
+ }), /*#__PURE__*/React__default.createElement(CinemaBadge, {
8081
+ align: "left"
8082
+ })));
7908
8083
  };
7909
8084
 
7910
- var _templateObject$Y, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
8085
+ var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
7911
8086
  var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__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);
7912
- var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
7913
- var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
7914
- var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
7915
- var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
8087
+ var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__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);
8088
+ var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$x || (_templateObject3$x = /*#__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);
8089
+ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__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);
8090
+ var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
7916
8091
  var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
7917
8092
  var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
7918
8093
  var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
@@ -7928,7 +8103,9 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7928
8103
  bgUrlDesktop = _ref.bgUrlDesktop,
7929
8104
  bgUrlDevice = _ref.bgUrlDevice,
7930
8105
  _ref$bgImageAltText = _ref.bgImageAltText,
7931
- bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText;
8106
+ bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
8107
+ _ref$semanticLevel = _ref.semanticLevel,
8108
+ semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
7932
8109
  var truncatedText = text && text.substring(0, 75);
7933
8110
 
7934
8111
  var _ref2 = link || {},
@@ -7959,12 +8136,13 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7959
8136
  src: bgUrlDesktop,
7960
8137
  alt: bgImageAltText,
7961
8138
  "data-testid": "impact-image"
7962
- }))), /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$3, {
8139
+ }))), /*#__PURE__*/React__default.createElement(ImpactGrid, null, children ? /*#__PURE__*/React__default.createElement(LogoWrapper$2, {
7963
8140
  "data-testid": "impact-logo"
7964
8141
  }, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
7965
8142
  "data-testid": "impact-text"
7966
8143
  }, /*#__PURE__*/React__default.createElement(Header, {
7967
- level: 3
8144
+ level: 3,
8145
+ semanticLevel: semanticLevel
7968
8146
  }, truncatedText)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
7969
8147
  "data-testid": "impact-link"
7970
8148
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null), scrollHref ? /*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
@@ -7978,20 +8156,20 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7978
8156
  }, "Scroll Down")) : null);
7979
8157
  };
7980
8158
 
7981
- var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject4$s, _templateObject5$l;
8159
+ var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$l;
7982
8160
  var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__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) {
7983
8161
  var color = _ref.color;
7984
8162
  return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
7985
8163
  }, devices.mobileAndTablet);
7986
- var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
8164
+ var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__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) {
7987
8165
  var hasImage = _ref2.hasImage;
7988
8166
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
7989
8167
  }, devices.mobileAndTablet, function (_ref3) {
7990
8168
  var hasImage = _ref3.hasImage;
7991
8169
  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
7992
8170
  });
7993
- var RightPanel = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
7994
- var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
8171
+ var RightPanel = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__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);
8172
+ var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__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);
7995
8173
  var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
7996
8174
 
7997
8175
  var PageHeadingPanel = function PageHeadingPanel(_ref) {
@@ -8039,15 +8217,17 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
8039
8217
  theme: ThemeType.Stream
8040
8218
  }, /*#__PURE__*/React__default.createElement(StreamWrapper, null, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
8041
8219
  link: streamLink
8042
- }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
8220
+ }), /*#__PURE__*/React__default.createElement(StreamBadge, {
8221
+ align: "left"
8222
+ }))));
8043
8223
  };
8044
8224
 
8045
- var _templateObject$$, _templateObject2$I, _templateObject3$A, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
8225
+ var _templateObject$$, _templateObject2$H, _templateObject3$z, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
8046
8226
  var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__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);
8047
- var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
8048
- var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8227
+ var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$H || (_templateObject2$H = /*#__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"])));
8228
+ var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8049
8229
  var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
8050
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
8230
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 210px;\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 svg {\n max-width: 180px;\n }\n }\n"])), function (_ref) {
8051
8231
  var invert = _ref.invert,
8052
8232
  theme = _ref.theme;
8053
8233
  return invert ? theme.colors.white : theme.colors.primary;
@@ -8147,18 +8327,10 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
8147
8327
  }, truncate(stripAllHtmlTags(brandingText), 25));
8148
8328
 
8149
8329
  case 'StreamLogo':
8150
- return /*#__PURE__*/React__default.createElement(Logo, {
8151
- color: color,
8152
- fontSize: 12,
8153
- productName: TextLogoProduct.Stream
8154
- });
8330
+ return /*#__PURE__*/React__default.createElement(StreamBadge, null);
8155
8331
 
8156
8332
  case 'CinemaLogo':
8157
- return /*#__PURE__*/React__default.createElement(Logo, {
8158
- color: color,
8159
- fontSize: 12,
8160
- productName: TextLogoProduct.Cinema
8161
- });
8333
+ return /*#__PURE__*/React__default.createElement(CinemaBadge, null);
8162
8334
 
8163
8335
  default:
8164
8336
  return null;
@@ -8177,7 +8349,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
8177
8349
  var isIOS = function isIOS() {
8178
8350
  try {
8179
8351
  console.warn('Do not use this on server side rendering, it may throw an error.');
8180
- if (typeof navigator === undefined) return false;
8352
+ if (typeof navigator === 'undefined') return false;
8181
8353
  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
8182
8354
  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
8183
8355
  } catch (e) {
@@ -8193,7 +8365,7 @@ var useIOS = function useIOS() {
8193
8365
  setIOS = _useState[1];
8194
8366
 
8195
8367
  useEffect(function () {
8196
- if (typeof navigator === undefined) return;
8368
+ if (typeof navigator === 'undefined') return;
8197
8369
  setIOS(isIOS());
8198
8370
  }, []);
8199
8371
  return IOS;
@@ -8332,7 +8504,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8332
8504
  _ref4$brandingStyle = _ref4.brandingStyle,
8333
8505
  brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
8334
8506
  brandingText = _ref4.brandingText,
8335
- brandingLink = _ref4.brandingLink;
8507
+ brandingLink = _ref4.brandingLink,
8508
+ _ref4$showCopy = _ref4.showCopy,
8509
+ showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
8510
+ _ref4$semanticLevel = _ref4.semanticLevel,
8511
+ semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
8336
8512
 
8337
8513
  var _ref5 = link || {},
8338
8514
  linkText = _ref5.text,
@@ -8358,7 +8534,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8358
8534
  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
8359
8535
  video: video,
8360
8536
  poster: poster
8361
- })), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
8537
+ })), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
8362
8538
  className: "page-heading-compact__background",
8363
8539
  invert: invert
8364
8540
  }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
@@ -8368,22 +8544,22 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8368
8544
  invert: invert
8369
8545
  }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
8370
8546
  level: titleSize,
8371
- semanticLevel: 1
8547
+ semanticLevel: semanticLevel
8372
8548
  }, title && truncate(title, 40))), link && /*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
8373
8549
  invert: invert,
8374
8550
  className: "page-heading-compact__button"
8375
8551
  }), linkText))));
8376
8552
  };
8377
8553
 
8378
- var _templateObject$10, _templateObject2$J, _templateObject3$B, _templateObject4$t;
8554
+ var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject4$s;
8379
8555
  var MorePages = /*#__PURE__*/styled.span(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
8380
- var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
8556
+ var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$I || (_templateObject2$I = /*#__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
8381
8557
 
8382
- var PageNumber = /*#__PURE__*/styled.a(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
8558
+ var PageNumber = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__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) {
8383
8559
  var active = _ref.active;
8384
8560
  return active === 'true' && " \n color: var(--base-color-core);\n ";
8385
8561
  });
8386
- var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
8562
+ var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$s || (_templateObject4$s = /*#__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"])));
8387
8563
 
8388
8564
  var reducePages = function reducePages(pages, currentPage) {
8389
8565
  // If there are less than 6 pages, return all pages
@@ -8452,11 +8628,11 @@ var Pagination = function Pagination(_ref) {
8452
8628
  }))));
8453
8629
  };
8454
8630
 
8455
- var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$h;
8631
+ var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$n, _templateObject6$h;
8456
8632
  var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__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);
8457
- var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
8458
- var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
8459
- var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
8633
+ var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
8634
+ var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
8635
+ var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
8460
8636
  var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
8461
8637
  var PersonLink = /*#__PURE__*/styled.a(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
8462
8638
 
@@ -8509,11 +8685,11 @@ var PeopleListing = function PeopleListing(_ref) {
8509
8685
  }));
8510
8686
  };
8511
8687
 
8512
- var _templateObject$12, _templateObject2$L, _templateObject3$D, _templateObject4$v;
8688
+ var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u;
8513
8689
  var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8514
- var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
8515
- var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8516
- var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8690
+ var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
8691
+ var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
8692
+ var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
8517
8693
 
8518
8694
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
8519
8695
  return array.reduce(function (acc, item) {
@@ -8524,12 +8700,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
8524
8700
  var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
8525
8701
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
8526
8702
  if (musicTitle.length > 1 && index === musicTitle.length - 1) {
8527
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
8703
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
8704
+ key: index
8705
+ }, title));
8528
8706
  } else if (index > 0) {
8529
- return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
8707
+ return /*#__PURE__*/React__default.createElement("i", {
8708
+ key: index
8709
+ }, ", ", title);
8530
8710
  }
8531
8711
 
8532
- return /*#__PURE__*/React__default.createElement("i", null, title);
8712
+ return /*#__PURE__*/React__default.createElement("i", {
8713
+ key: index
8714
+ }, title);
8533
8715
  }));
8534
8716
  };
8535
8717
 
@@ -8581,7 +8763,7 @@ var CreditListing = function CreditListing(_ref) {
8581
8763
  }));
8582
8764
  };
8583
8765
 
8584
- var _templateObject$13, _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;
8766
+ var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v, _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;
8585
8767
  var LENGTH_TEXT = 28;
8586
8768
  var LENGTH_TEXT_TABLET$1 = 12;
8587
8769
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -8598,8 +8780,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
8598
8780
  var asCard = _ref3.asCard;
8599
8781
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
8600
8782
  });
8601
- var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
8602
- var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref4) {
8783
+ var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$L || (_templateObject2$L = /*#__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"])));
8784
+ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__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) {
8603
8785
  var theme = _ref4.theme;
8604
8786
  return theme.colors.black;
8605
8787
  }, function (_ref5) {
@@ -8609,7 +8791,7 @@ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$E || (_template
8609
8791
  var theme = _ref6.theme;
8610
8792
  return theme.colors.primary;
8611
8793
  });
8612
- var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref7) {
8794
+ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__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) {
8613
8795
  var hasTextLinks = _ref7.hasTextLinks;
8614
8796
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
8615
8797
  }, function (_ref8) {
@@ -8859,7 +9041,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
8859
9041
  }))));
8860
9042
  };
8861
9043
 
8862
- var _templateObject$14, _templateObject2$N, _templateObject3$F, _templateObject4$x, _templateObject5$p, _templateObject6$j, _templateObject7$d;
9044
+ var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$d;
8863
9045
  var LENGTH_TEXT$2 = 28;
8864
9046
  var LENGTH_TEXT_TABLET$2 = 10;
8865
9047
  var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
@@ -8869,15 +9051,15 @@ var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templ
8869
9051
  var imageToLeft = _ref2.imageToLeft;
8870
9052
  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'";
8871
9053
  }, devices.mobile);
8872
- var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
9054
+ var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
8873
9055
  var imageToLeft = _ref3.imageToLeft;
8874
9056
  return imageToLeft ? 'left' : 'right';
8875
9057
  }, devices.mobile);
8876
- var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
9058
+ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__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) {
8877
9059
  var imageToLeft = _ref4.imageToLeft;
8878
9060
  return imageToLeft ? 'right' : 'left';
8879
9061
  }, devices.mobile);
8880
- var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
9062
+ var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__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);
8881
9063
  var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
8882
9064
  var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
8883
9065
  var theme = _ref5.theme;
@@ -8916,7 +9098,7 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
8916
9098
  });
8917
9099
 
8918
9100
  var _templateObject$15;
8919
- var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n"])), function (_ref) {
9101
+ var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__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) {
8920
9102
  var _ref$aspectRatio = _ref.aspectRatio,
8921
9103
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
8922
9104
  return aspectRatio;
@@ -8928,6 +9110,10 @@ var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObj
8928
9110
  var _ref3$aspectRatio = _ref3.aspectRatio,
8929
9111
  aspectRatio = _ref3$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref3$aspectRatio;
8930
9112
  return AspectRatioLegacy[aspectRatio];
9113
+ }, function (_ref4) {
9114
+ var _ref4$aspectRatio = _ref4.aspectRatio,
9115
+ aspectRatio = _ref4$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref4$aspectRatio;
9116
+ return aspectRatio;
8931
9117
  });
8932
9118
 
8933
9119
  var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
@@ -8944,17 +9130,50 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
8944
9130
  return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
8945
9131
  };
8946
9132
 
9133
+ /**
9134
+ * Generates a random string in the format XXX-XXX.
9135
+ * Does not meet UUID standards.
9136
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
9137
+ *
9138
+ * @return {string} A random string in the format XXX-XXX.
9139
+ */
9140
+ var generateDomElementId = function generateDomElementId() {
9141
+ var randomPart = Math.floor(100 + Math.random() * 900).toString();
9142
+ var datePart = Date.now().toString().slice(-3);
9143
+ return randomPart + "-" + datePart;
9144
+ };
9145
+
8947
9146
  var VideoWithControls$1 = function VideoWithControls(_ref) {
8948
9147
  var video = _ref.video,
8949
9148
  settings = _ref.settings;
8950
- var muted = settings.muted,
8951
- autoPlay = settings.autoPlay;
9149
+ var videoRef = useRef(null);
8952
9150
 
8953
9151
  var _useState = useState(AspectRatio['16:9']),
8954
9152
  aspectRatio = _useState[0],
8955
9153
  setAspectRatio = _useState[1];
8956
9154
 
8957
- var videoRef = useRef(null);
9155
+ var _React$useState = React__default.useState(false),
9156
+ isVideoReady = _React$useState[0],
9157
+ setIsVideoReady = _React$useState[1];
9158
+
9159
+ var muted = settings.muted,
9160
+ autoPlay = settings.autoPlay;
9161
+ React__default.useEffect(function () {
9162
+ var changeVideoReadiness = function changeVideoReadiness() {
9163
+ setIsVideoReady(true);
9164
+ };
9165
+
9166
+ if (videoRef.current) {
9167
+ videoRef.current.addEventListener('canplay', changeVideoReadiness);
9168
+ return function () {
9169
+ var _videoRef$current;
9170
+
9171
+ return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
9172
+ };
9173
+ }
9174
+
9175
+ return undefined;
9176
+ }, []);
8958
9177
 
8959
9178
  var handleMetadataLoaded = function handleMetadataLoaded() {
8960
9179
  if (videoRef.current) {
@@ -8963,18 +9182,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
8963
9182
  }
8964
9183
  };
8965
9184
 
8966
- var clonedVideo = /*#__PURE__*/cloneElement(video, _extends({}, muted ? {
9185
+ var videoElementId = useMemo(function () {
9186
+ return "video-id-" + generateDomElementId();
9187
+ }, []);
9188
+ var clonedVideo = /*#__PURE__*/cloneElement(video, _extends({
9189
+ playsInline: true
9190
+ }, muted ? {
8967
9191
  muted: true
8968
9192
  } : {}, autoPlay && muted ? {
8969
9193
  autoPlay: true
8970
9194
  } : {}, {
8971
9195
  height: '100%',
8972
9196
  width: '100%',
8973
- onLoadedMetadata: handleMetadataLoaded
9197
+ onLoadedMetadata: handleMetadataLoaded,
9198
+ id: videoElementId
8974
9199
  }, {
9200
+ poster: autoPlay && isVideoReady ? undefined : video.props.poster,
8975
9201
  ref: videoRef
8976
9202
  }));
8977
- var videoElementId = clonedVideo.props.id;
8978
9203
  var videoContainerId = "video-container-for-" + videoElementId;
8979
9204
 
8980
9205
  var videoControlsProps = _extends({}, settings, {
@@ -8982,14 +9207,13 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
8982
9207
  videoContainerId: videoContainerId
8983
9208
  });
8984
9209
 
8985
- useEffect(function () {
8986
- setAspectRatio(AspectRatio['16:9']);
8987
- }, [video.props.src]);
9210
+ var showVideoControls = autoPlay ? isVideoReady : true;
8988
9211
  return /*#__PURE__*/React__default.createElement(VideoContainer, {
9212
+ className: "video-with-controls-container",
8989
9213
  aspectRatio: aspectRatio,
8990
9214
  id: videoContainerId,
8991
- "data-testid": videoContainerId
8992
- }, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
9215
+ "data-testid": 'video-container'
9216
+ }, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
8993
9217
  };
8994
9218
 
8995
9219
  var PromoChild = function PromoChild(_ref) {
@@ -9023,7 +9247,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9023
9247
  text = _ref.text,
9024
9248
  links = _ref.links,
9025
9249
  children = _ref.children,
9026
- videoSettings = _ref.videoSettings;
9250
+ videoSettings = _ref.videoSettings,
9251
+ titleSemanticLevel = _ref.titleSemanticLevel;
9027
9252
 
9028
9253
  var truncate = function truncate(str, n) {
9029
9254
  return str.length >= n ? str.substr(0, n) : str;
@@ -9064,7 +9289,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9064
9289
  "data-testid": "content-wrapper",
9065
9290
  imageToLeft: imageToLeft
9066
9291
  }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
9067
- level: titleLevel
9292
+ level: titleLevel,
9293
+ semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
9068
9294
  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
9069
9295
  dangerouslySetInnerHTML: {
9070
9296
  __html: text
@@ -9135,9 +9361,9 @@ var RadioGroup = function RadioGroup(_ref) {
9135
9361
  })));
9136
9362
  };
9137
9363
 
9138
- var _templateObject$17, _templateObject2$O, _templateObject3$G;
9364
+ var _templateObject$17, _templateObject2$N, _templateObject3$F;
9139
9365
  var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9140
- var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9366
+ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9141
9367
  var horizontalMode = _ref.horizontalMode;
9142
9368
  if (horizontalMode) return 'row';
9143
9369
  return 'column';
@@ -9145,7 +9371,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObjec
9145
9371
  var gap = _ref2.gap;
9146
9372
  return gap + "px";
9147
9373
  });
9148
- var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9374
+ var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9149
9375
  var darkMode = _ref3.darkMode;
9150
9376
  if (darkMode) return 'var(--base-color-white)';
9151
9377
  return 'var(--base-color-errorstate)';
@@ -9225,10 +9451,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
9225
9451
  }, error)));
9226
9452
  };
9227
9453
 
9228
- var _templateObject$18, _templateObject2$P, _templateObject3$H;
9454
+ var _templateObject$18, _templateObject2$O, _templateObject3$G;
9229
9455
  var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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);
9230
- var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
9231
- var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
9456
+ var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__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"])));
9457
+ var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__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);
9232
9458
 
9233
9459
  var StatusBanner = function StatusBanner(_ref) {
9234
9460
  var statusText = _ref.statusText,
@@ -9297,7 +9523,8 @@ var SectionTitle = function SectionTitle(_ref) {
9297
9523
  var title = _ref.title,
9298
9524
  _ref$size = _ref.size,
9299
9525
  size = _ref$size === void 0 ? 'small' : _ref$size,
9300
- description = _ref.description;
9526
+ description = _ref.description,
9527
+ semanticLevel = _ref.semanticLevel;
9301
9528
  var headingLevel = size === 'large' ? 1 : 2;
9302
9529
  return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
9303
9530
  columnStartDesktop: 3,
@@ -9305,7 +9532,8 @@ var SectionTitle = function SectionTitle(_ref) {
9305
9532
  columnStartDevice: 2,
9306
9533
  columnSpanDevice: 12
9307
9534
  }, /*#__PURE__*/React__default.createElement(Header, {
9308
- level: headingLevel
9535
+ level: headingLevel,
9536
+ semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
9309
9537
  }, title)), description && /*#__PURE__*/React__default.createElement(GridItem, {
9310
9538
  columnStartDesktop: 3,
9311
9539
  columnSpanDesktop: 8,
@@ -9317,7 +9545,7 @@ var SectionTitle = function SectionTitle(_ref) {
9317
9545
  }, description))));
9318
9546
  };
9319
9547
 
9320
- var _templateObject$1a, _templateObject2$Q, _templateObject3$I, _templateObject4$y, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
9548
+ var _templateObject$1a, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
9321
9549
  var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /*#__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) {
9322
9550
  var theme = _ref.theme;
9323
9551
  return "3px solid " + theme.colors.lapisLazuli;
@@ -9328,12 +9556,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /
9328
9556
  var theme = _ref3.theme;
9329
9557
  return theme.colors.lightgrey;
9330
9558
  });
9331
- var borderStyles = /*#__PURE__*/css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9559
+ var borderStyles = /*#__PURE__*/css(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9332
9560
  var theme = _ref4.theme;
9333
9561
  return theme.colors.darkgrey;
9334
9562
  });
9335
- var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9336
- var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9563
+ var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9564
+ var listItemStyles = /*#__PURE__*/css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9337
9565
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
9338
9566
  var theme = _ref5.theme;
9339
9567
  return {
@@ -9740,9 +9968,9 @@ function Select(_ref3) {
9740
9968
  }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
9741
9969
  }
9742
9970
 
9743
- var _templateObject$1b, _templateObject2$R, _templateObject3$J, _templateObject4$z;
9971
+ var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
9744
9972
  var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9745
- var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
9973
+ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__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) {
9746
9974
  var width = _ref.width;
9747
9975
  if (!width) return 'none';
9748
9976
  return width + 'px';
@@ -9759,12 +9987,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateOb
9759
9987
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
9760
9988
  return "0 0 0 3px var(--base-color-lapislazuli)";
9761
9989
  });
9762
- var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9990
+ var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9763
9991
  var darkMode = _ref5.darkMode;
9764
9992
  if (darkMode) return "var(--base-color-white)";
9765
9993
  return "var(--base-color-black)";
9766
9994
  });
9767
- var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9995
+ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9768
9996
  var darkMode = _ref6.darkMode;
9769
9997
  if (darkMode) return "var(--base-color-white)";
9770
9998
  return "var(--base-color-errorstate)";
@@ -9909,7 +10137,7 @@ var TextOnly = function TextOnly(_ref) {
9909
10137
  })));
9910
10138
  };
9911
10139
 
9912
- var _templateObject$1d, _templateObject2$S;
10140
+ var _templateObject$1d, _templateObject2$R;
9913
10141
  var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__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) {
9914
10142
  var _ref$aspectRatio = _ref.aspectRatio,
9915
10143
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
@@ -9920,7 +10148,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1
9920
10148
  height = _ref2.height;
9921
10149
  return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
9922
10150
  });
9923
- var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
10151
+ var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__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"])));
9924
10152
 
9925
10153
  var ImageWithCaption = function ImageWithCaption(_ref) {
9926
10154
  var caption = _ref.caption,
@@ -9958,13 +10186,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
9958
10186
  }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
9959
10187
  };
9960
10188
 
9961
- var _templateObject$1e, _templateObject2$T, _templateObject3$K;
10189
+ var _templateObject$1e, _templateObject2$S, _templateObject3$J;
9962
10190
  var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
9963
- var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
10191
+ var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
9964
10192
  var displayAttribution = _ref.displayAttribution;
9965
10193
  return "display: " + (displayAttribution ? 'block' : 'none') + ";";
9966
10194
  });
9967
- var Line$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
10195
+ var Line$1 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__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);
9968
10196
 
9969
10197
  var Quote = function Quote(_ref) {
9970
10198
  var text = _ref.text,
@@ -9988,11 +10216,11 @@ var Quote = function Quote(_ref) {
9988
10216
  }, attribution))));
9989
10217
  };
9990
10218
 
9991
- var _templateObject$1f, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$l;
10219
+ var _templateObject$1f, _templateObject2$T, _templateObject3$K, _templateObject4$z, _templateObject5$r, _templateObject6$l;
9992
10220
  var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__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"])));
9993
- var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
9994
- var StyledImage = /*#__PURE__*/styled.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
9995
- var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
10221
+ var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10222
+ var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10223
+ var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
9996
10224
  var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
9997
10225
  var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
9998
10226
 
@@ -10032,11 +10260,11 @@ var MiniCard = function MiniCard(_ref) {
10032
10260
  }, title)))));
10033
10261
  };
10034
10262
 
10035
- var _templateObject$1g, _templateObject2$V, _templateObject3$M, _templateObject4$B;
10263
+ var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A;
10036
10264
  var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__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"])));
10037
- var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
10038
- var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10039
- var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
10265
+ var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
10266
+ var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10267
+ var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__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"])));
10040
10268
 
10041
10269
  var keyDown = function keyDown(e, toggleFunction) {
10042
10270
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -10134,15 +10362,113 @@ var ReadMore = function ReadMore(_ref) {
10134
10362
  }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
10135
10363
  };
10136
10364
 
10137
- var _templateObject$1h, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s;
10138
- var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10365
+ var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$s, _templateObject6$m;
10366
+ var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10367
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10368
+ var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10369
+ var color = _ref.color;
10370
+ return "var(--base-color-" + color + ")";
10371
+ });
10372
+ var BottomLine = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10373
+ var Text = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10374
+ var color = _ref2.color;
10375
+ return "var(--base-color-" + color + ")";
10376
+ });
10377
+ var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10378
+ var color = _ref3.color;
10379
+ return "var(--base-color-" + color + ")";
10380
+ });
10381
+
10382
+ /**
10383
+ * Password strength indicator component.
10384
+ * This renders some number of lines (6 by default)
10385
+ * which should become active when the user improves
10386
+ * the strength of the entered password.
10387
+ *
10388
+ * ## Sections
10389
+ * To set number of sections it should be passed
10390
+ * as `sections` prop.
10391
+ *
10392
+ * ## Active section
10393
+ * To set number of active sections it should be passed
10394
+ * as `activeSections` prop.
10395
+ *
10396
+ * ## Colors
10397
+ * Color of every element can be controlled by properties:
10398
+ * `sectionsColor`, `activeSectionsColor`,
10399
+ * `textColor`, `strengthLabelColor`.
10400
+ *
10401
+ * ## Text
10402
+ * `text` prop is used to render some message.
10403
+ * For example error (together with proper red color)
10404
+ * or some password requirement. It can be empty.
10405
+ *
10406
+ * ## Strength label
10407
+ * `strengthLabel` prop is used to render strength characteristic
10408
+ * of entered password. For example: `weak`, `normal`, `strong`, etc.
10409
+ * It can be empty.
10410
+ */
10411
+
10412
+ var PasswordStrength = function PasswordStrength(_ref) {
10413
+ var _ref$sections = _ref.sections,
10414
+ sections = _ref$sections === void 0 ? 6 : _ref$sections,
10415
+ _ref$activeSections = _ref.activeSections,
10416
+ activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
10417
+ _ref$sectionsColor = _ref.sectionsColor,
10418
+ sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
10419
+ _ref$activeSectionsCo = _ref.activeSectionsColor,
10420
+ activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
10421
+ _ref$text = _ref.text,
10422
+ text = _ref$text === void 0 ? '' : _ref$text,
10423
+ _ref$textColor = _ref.textColor,
10424
+ textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
10425
+ _ref$strengthLabel = _ref.strengthLabel,
10426
+ strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
10427
+ _ref$strengthLabelCol = _ref.strengthLabelColor,
10428
+ strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
10429
+
10430
+ var setSectionColor = function setSectionColor(index) {
10431
+ return index < activeSections ? activeSectionsColor : sectionsColor;
10432
+ };
10433
+
10434
+ var setSectionDataTestId = function setSectionDataTestId(index) {
10435
+ return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
10436
+ };
10437
+
10438
+ return /*#__PURE__*/React__default.createElement(Container$5, {
10439
+ "data-testid": "password-strength-container"
10440
+ }, /*#__PURE__*/React__default.createElement(Sections, {
10441
+ "data-testid": "password-strength-sections"
10442
+ }, Array.from({
10443
+ length: sections
10444
+ }, function (_section, i) {
10445
+ return /*#__PURE__*/React__default.createElement(Section, {
10446
+ key: i,
10447
+ color: setSectionColor(i),
10448
+ "data-testid": setSectionDataTestId(i)
10449
+ });
10450
+ })), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
10451
+ color: textColor,
10452
+ "data-testid": "password-strength-text"
10453
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
10454
+ level: 6
10455
+ }, text)), /*#__PURE__*/React__default.createElement(LabelText, {
10456
+ color: strengthLabelColor,
10457
+ "data-testid": "password-strength-label"
10458
+ }, /*#__PURE__*/React__default.createElement(Overline, {
10459
+ level: 2
10460
+ }, strengthLabel))));
10461
+ };
10462
+
10463
+ var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$t;
10464
+ var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10139
10465
  var MenuList = /*#__PURE__*/styled.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
10140
10466
  var MobileButton = /*#__PURE__*/styled.button(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
10141
10467
  var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
10142
10468
  var isActive = _ref.isActive;
10143
10469
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
10144
10470
  }, Colors.MidGrey);
10145
- var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$s || (_templateObject5$s = /*#__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) {
10471
+ var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
10146
10472
  var isOpen = _ref2.isOpen;
10147
10473
  return isOpen ? 'block' : 'none';
10148
10474
  }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -10312,109 +10638,11 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
10312
10638
  });
10313
10639
  };
10314
10640
 
10315
- var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t, _templateObject6$m;
10316
- var Container$5 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10317
- var Sections = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10318
- var Section = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10319
- var color = _ref.color;
10320
- return "var(--base-color-" + color + ")";
10321
- });
10322
- var BottomLine = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10323
- var Text = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10324
- var color = _ref2.color;
10325
- return "var(--base-color-" + color + ")";
10326
- });
10327
- var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10328
- var color = _ref3.color;
10329
- return "var(--base-color-" + color + ")";
10330
- });
10331
-
10332
- /**
10333
- * Password strength indicator component.
10334
- * This renders some number of lines (6 by default)
10335
- * which should become active when the user improves
10336
- * the strength of the entered password.
10337
- *
10338
- * ## Sections
10339
- * To set number of sections it should be passed
10340
- * as `sections` prop.
10341
- *
10342
- * ## Active section
10343
- * To set number of active sections it should be passed
10344
- * as `activeSections` prop.
10345
- *
10346
- * ## Colors
10347
- * Color of every element can be controlled by properties:
10348
- * `sectionsColor`, `activeSectionsColor`,
10349
- * `textColor`, `strengthLabelColor`.
10350
- *
10351
- * ## Text
10352
- * `text` prop is used to render some message.
10353
- * For example error (together with proper red color)
10354
- * or some password requirement. It can be empty.
10355
- *
10356
- * ## Strength label
10357
- * `strengthLabel` prop is used to render strength characteristic
10358
- * of entered password. For example: `weak`, `normal`, `strong`, etc.
10359
- * It can be empty.
10360
- */
10361
-
10362
- var PasswordStrength = function PasswordStrength(_ref) {
10363
- var _ref$sections = _ref.sections,
10364
- sections = _ref$sections === void 0 ? 6 : _ref$sections,
10365
- _ref$activeSections = _ref.activeSections,
10366
- activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
10367
- _ref$sectionsColor = _ref.sectionsColor,
10368
- sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
10369
- _ref$activeSectionsCo = _ref.activeSectionsColor,
10370
- activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
10371
- _ref$text = _ref.text,
10372
- text = _ref$text === void 0 ? '' : _ref$text,
10373
- _ref$textColor = _ref.textColor,
10374
- textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
10375
- _ref$strengthLabel = _ref.strengthLabel,
10376
- strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
10377
- _ref$strengthLabelCol = _ref.strengthLabelColor,
10378
- strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
10379
-
10380
- var setSectionColor = function setSectionColor(index) {
10381
- return index < activeSections ? activeSectionsColor : sectionsColor;
10382
- };
10383
-
10384
- var setSectionDataTestId = function setSectionDataTestId(index) {
10385
- return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
10386
- };
10387
-
10388
- return /*#__PURE__*/React__default.createElement(Container$5, {
10389
- "data-testid": "password-strength-container"
10390
- }, /*#__PURE__*/React__default.createElement(Sections, {
10391
- "data-testid": "password-strength-sections"
10392
- }, Array.from({
10393
- length: sections
10394
- }, function (_section, i) {
10395
- return /*#__PURE__*/React__default.createElement(Section, {
10396
- key: i,
10397
- color: setSectionColor(i),
10398
- "data-testid": setSectionDataTestId(i)
10399
- });
10400
- })), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
10401
- color: textColor,
10402
- "data-testid": "password-strength-text"
10403
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
10404
- level: 6
10405
- }, text)), /*#__PURE__*/React__default.createElement(LabelText, {
10406
- color: strengthLabelColor,
10407
- "data-testid": "password-strength-label"
10408
- }, /*#__PURE__*/React__default.createElement(Overline, {
10409
- level: 2
10410
- }, strengthLabel))));
10411
- };
10412
-
10413
- var _templateObject$1j, _templateObject2$Y, _templateObject3$P, _templateObject4$E, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
10641
+ var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7, _templateObject11$4;
10414
10642
  var TableContainer = /*#__PURE__*/styled.table(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10415
- var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10416
- var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10417
- var TableHeader = /*#__PURE__*/styled.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
10643
+ var Container$6 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10644
+ var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10645
+ var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
10418
10646
  return "calc(100% / " + (props.columns - 1) + ")";
10419
10647
  }, devices.tablet, devices.mobile);
10420
10648
  var TableCell = /*#__PURE__*/styled.td(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
@@ -10430,14 +10658,73 @@ var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject8$c || (_templateOb
10430
10658
  });
10431
10659
  var Next = /*#__PURE__*/styled.span(_templateObject9$7 || (_templateObject9$7 = /*#__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"])));
10432
10660
  var ScrollButtons = /*#__PURE__*/styled.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
10661
+ var AriaDescription = /*#__PURE__*/styled.span(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10433
10662
 
10434
- var Table = function Table(_ref) {
10435
- var columns = _ref.columns,
10436
- headings = _ref.headings,
10437
- children = _ref.children,
10438
- lineColors = _ref.lineColors,
10439
- rowsPerPage = _ref.rowsPerPage,
10440
- pagination = _ref.pagination;
10663
+ var Content = function Content(_ref) {
10664
+ var content = _ref.content;
10665
+ return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
10666
+ dangerouslySetInnerHTML: {
10667
+ __html: content
10668
+ }
10669
+ }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
10670
+ };
10671
+
10672
+ var Cell = function Cell(_ref2) {
10673
+ var cell = _ref2.cell,
10674
+ cellIndex = _ref2.cellIndex,
10675
+ columns = _ref2.columns;
10676
+ return /*#__PURE__*/React__default.createElement(TableCell, {
10677
+ key: cellIndex,
10678
+ columns: columns,
10679
+ role: "gridcell"
10680
+ }, /*#__PURE__*/React__default.createElement(Content, {
10681
+ content: cell
10682
+ }));
10683
+ };
10684
+
10685
+ var Row = function Row(_ref3) {
10686
+ var row = _ref3.row,
10687
+ rowIndex = _ref3.rowIndex,
10688
+ columns = _ref3.columns,
10689
+ lineColor = _ref3.lineColor;
10690
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
10691
+ key: rowIndex
10692
+ }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
10693
+ return /*#__PURE__*/React__default.createElement(Cell, {
10694
+ key: index,
10695
+ cell: cell,
10696
+ cellIndex: index,
10697
+ columns: columns
10698
+ });
10699
+ })), /*#__PURE__*/React__default.createElement("tr", {
10700
+ "aria-hidden": "true"
10701
+ }, /*#__PURE__*/React__default.createElement("td", {
10702
+ colSpan: columns,
10703
+ "aria-hidden": "true"
10704
+ }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10705
+ lineColor: lineColor
10706
+ }))));
10707
+ };
10708
+
10709
+ var scrollTable = function scrollTable(tableRef, direction) {
10710
+ if (tableRef.current) {
10711
+ var currentScroll = tableRef.current.scrollLeft;
10712
+ var scrollAmount = direction === 'left' ? -300 : 300;
10713
+ tableRef.current.scrollTo({
10714
+ left: currentScroll + scrollAmount,
10715
+ behavior: 'smooth'
10716
+ });
10717
+ }
10718
+ };
10719
+
10720
+ var Table = function Table(_ref4) {
10721
+ var columns = _ref4.columns,
10722
+ headings = _ref4.headings,
10723
+ children = _ref4.children,
10724
+ lineColors = _ref4.lineColors,
10725
+ rowsPerPage = _ref4.rowsPerPage,
10726
+ pagination = _ref4.pagination,
10727
+ description = _ref4.description;
10441
10728
 
10442
10729
  var _useState = useState(0),
10443
10730
  currentPage = _useState[0],
@@ -10447,121 +10734,71 @@ var Table = function Table(_ref) {
10447
10734
  showScrollButtons = _useState2[0],
10448
10735
  setShowScrollButtons = _useState2[1];
10449
10736
 
10450
- var Content = function Content(_ref2) {
10451
- var content = _ref2.content;
10452
- return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
10453
- dangerouslySetInnerHTML: {
10454
- __html: content
10455
- }
10456
- }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
10457
- };
10458
-
10459
- var Cell = function Cell(_ref3) {
10460
- var cell = _ref3.cell,
10461
- cellIndex = _ref3.cellIndex,
10462
- columns = _ref3.columns;
10463
- return /*#__PURE__*/React__default.createElement(TableCell, {
10464
- key: cellIndex,
10465
- columns: columns
10466
- }, /*#__PURE__*/React__default.createElement(Content, {
10467
- content: cell
10468
- }));
10469
- };
10470
-
10471
- var Row = function Row(_ref4) {
10472
- var row = _ref4.row,
10473
- rowIndex = _ref4.rowIndex,
10474
- columns = _ref4.columns,
10475
- lineColor = _ref4.lineColor;
10476
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
10477
- key: rowIndex
10478
- }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
10479
- return /*#__PURE__*/React__default.createElement(Cell, {
10480
- key: index,
10481
- cell: cell,
10482
- cellIndex: index,
10483
- columns: columns
10484
- });
10485
- })), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
10486
- colSpan: columns
10487
- }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10488
- lineColor: lineColor,
10489
- role: "presentation"
10490
- }))));
10491
- };
10492
-
10493
10737
  var lineColor = lineColors != null ? lineColors : Colors.Cinema;
10494
10738
  var tableRef = useRef(null);
10495
- useEffect(function () {
10496
- if (tableRef.current) {
10497
- tableRef.current.scrollTo(0, 0);
10498
- }
10499
- }, [children]);
10500
-
10501
- var horizontalScroll = function horizontalScroll() {
10502
- if (tableRef.current) {
10503
- setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
10504
- }
10505
- };
10739
+ useLayoutEffect(function () {
10740
+ var horizontalScroll = function horizontalScroll() {
10741
+ if (tableRef.current) {
10742
+ setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
10743
+ }
10744
+ };
10506
10745
 
10507
- useEffect(function () {
10508
10746
  horizontalScroll();
10509
10747
  window.addEventListener('resize', horizontalScroll);
10748
+ console.log('~~~ horizontal Scroll ~~~');
10510
10749
  return function () {
10511
10750
  return window.removeEventListener('resize', horizontalScroll);
10512
10751
  };
10513
10752
  }, []);
10514
-
10515
- var scrollTable = function scrollTable(direction) {
10516
- if (tableRef.current) {
10517
- var currentScroll = tableRef.current.scrollLeft;
10518
- var scrollAmount = direction === 'left' ? -300 : 300;
10519
- tableRef.current.scrollTo({
10520
- left: currentScroll + scrollAmount,
10521
- behavior: 'smooth'
10522
- });
10523
- }
10524
- };
10525
-
10526
- var totalRows = Array.isArray(children) ? children.length : 0;
10753
+ var totalRows = Array.isArray(children) ? children.length + 1 : 1;
10527
10754
  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
10528
- var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
10529
10755
  var pageNumbers = Array.from({
10530
10756
  length: totalPages
10531
10757
  }, function (_, i) {
10532
10758
  return i;
10533
10759
  });
10534
10760
  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
10761
+ var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
10762
+ var visibleRows = pagination ? Array.isArray(currentRows) ? currentRows.length + 1 : 0 : totalRows;
10535
10763
  return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
10536
10764
  onClickPrev: function onClickPrev() {
10537
- return scrollTable('left');
10765
+ return scrollTable(tableRef, 'left');
10538
10766
  },
10539
10767
  onClickNext: function onClickNext() {
10540
- return scrollTable('right');
10768
+ return scrollTable(tableRef, 'right');
10541
10769
  }
10542
10770
  })), /*#__PURE__*/React__default.createElement(Container$6, {
10543
10771
  role: "table",
10544
10772
  tabIndex: 0,
10545
- ref: tableRef
10546
- }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
10547
- colSpan: columns
10548
- }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10549
- lineColor: lineColor,
10550
- role: "presentation"
10551
- })))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
10773
+ ref: tableRef,
10774
+ "aria-rowcount": totalRows,
10775
+ "aria-colcount": columns
10776
+ }, /*#__PURE__*/React__default.createElement(AriaDescription, {
10777
+ id: "table-description"
10778
+ }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", {
10779
+ role: "rowgroup"
10780
+ }, ' ', /*#__PURE__*/React__default.createElement("tr", {
10781
+ role: "columnheader"
10782
+ }, headings && headings.map(function (heading, index) {
10552
10783
  return /*#__PURE__*/React__default.createElement(TableHeader, {
10553
10784
  key: index,
10554
10785
  role: "columnheader",
10786
+ scope: "col",
10555
10787
  columns: columns
10556
10788
  }, /*#__PURE__*/React__default.createElement(Content, {
10557
10789
  content: heading
10558
10790
  }));
10559
- }))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
10560
- colSpan: columns
10791
+ })), /*#__PURE__*/React__default.createElement("tr", {
10792
+ "aria-hidden": "true"
10793
+ }, ' ', /*#__PURE__*/React__default.createElement("td", {
10794
+ colSpan: columns,
10795
+ "aria-hidden": "true"
10561
10796
  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10562
10797
  lineColor: lineColor,
10563
10798
  role: "presentation"
10564
- }))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
10799
+ })))), /*#__PURE__*/React__default.createElement("tbody", {
10800
+ role: "rowgroup"
10801
+ }, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
10565
10802
  return /*#__PURE__*/React__default.createElement(Row, {
10566
10803
  key: rowIndex,
10567
10804
  row: row,
@@ -10569,7 +10806,9 @@ var Table = function Table(_ref) {
10569
10806
  columns: columns,
10570
10807
  lineColor: lineColor
10571
10808
  });
10572
- }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
10809
+ }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
10810
+ id: "pagination-description"
10811
+ }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
10573
10812
  key: "previous-page",
10574
10813
  onClick: function onClick() {
10575
10814
  return setCurrentPage(currentPage - 1);
@@ -10604,7 +10843,7 @@ var Table = function Table(_ref) {
10604
10843
  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
10605
10844
  iconName: "DropdownArrow",
10606
10845
  direction: "up"
10607
- })))))));
10846
+ }))))))));
10608
10847
  };
10609
10848
 
10610
10849
  var UpsellSection = function UpsellSection(_ref) {
@@ -10695,9 +10934,9 @@ var LiveChat = function LiveChat() {
10695
10934
  });
10696
10935
  };
10697
10936
 
10698
- var _templateObject$1k, _templateObject2$Z;
10937
+ var _templateObject$1k, _templateObject2$Y;
10699
10938
  var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
10700
- var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
10939
+ var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__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) {
10701
10940
  var hideBottomBorder = _ref.hideBottomBorder;
10702
10941
  return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
10703
10942
  }, devices.mobileAndTablet, devices.mobile);
@@ -10725,11 +10964,11 @@ var StickyBar = function StickyBar(_ref) {
10725
10964
  }, children)));
10726
10965
  };
10727
10966
 
10728
- var _templateObject$1l, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
10967
+ var _templateObject$1l, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
10729
10968
  var InnerModal = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__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);
10730
- var CloseButton = /*#__PURE__*/styled.button(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
10731
- var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10732
- var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
10969
+ var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Z || (_templateObject2$Z = /*#__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);
10970
+ var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10971
+ var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$E || (_templateObject4$E = /*#__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"])));
10733
10972
 
10734
10973
  var MAX_Z_INDEX = 9999999999;
10735
10974
 
@@ -11791,5 +12030,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1m || (_templa
11791
12030
  return theme.fonts.tablet.sizes.body[1];
11792
12031
  }, devices.desktop, devices.largeDesktop);
11793
12032
 
11794
- export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
12033
+ export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
11795
12034
  //# sourceMappingURL=chord.esm.js.map