@royaloperahouse/harmonic 0.18.3-c → 0.18.3-e

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 (19) hide show
  1. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  2. package/dist/components/atoms/Icons/SvgIcons/index.d.ts +0 -3
  3. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  4. package/dist/components/molecules/Select2/Select2.d.ts +1 -1
  5. package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
  6. package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +1 -1
  7. package/dist/harmonic.cjs.development.css +0 -319
  8. package/dist/harmonic.cjs.development.js +132 -183
  9. package/dist/harmonic.cjs.development.js.map +1 -1
  10. package/dist/harmonic.cjs.production.min.js +1 -1
  11. package/dist/harmonic.cjs.production.min.js.map +1 -1
  12. package/dist/harmonic.esm.js +140 -194
  13. package/dist/harmonic.esm.js.map +1 -1
  14. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  15. package/dist/types/types.d.ts +1 -9
  16. package/package.json +4 -3
  17. package/dist/components/atoms/Icons/SvgIcons/Access/Captioned.svg.d.ts +0 -4
  18. package/dist/components/atoms/Icons/SvgIcons/Access/FamilyFriendly.svg.d.ts +0 -4
  19. package/dist/components/atoms/Icons/SvgIcons/Access/TouchTour.svg.d.ts +0 -4
package/dist/harmonic.cjs.development.js CHANGED
@@ -8,7 +8,7 @@ var React = require('react');
8
8
  var React__default = _interopDefault(React);
9
9
  var styled = require('styled-components');
10
10
  var styled__default = _interopDefault(styled);
11
- var dateFns = require('date-fns');
11
+ var moment = _interopDefault(require('moment'));
12
12
  var server = require('react-dom/server');
13
13
  var Select$1 = require('react-select');
14
14
  var Select$1__default = _interopDefault(Select$1);
@@ -2018,7 +2018,7 @@ var AudioDescription = (function (_ref) {
2018
2018
  return /*#__PURE__*/React.createElement("svg", {
2019
2019
  width: "100%",
2020
2020
  height: "100%",
2021
- viewBox: "0 0 25 25",
2021
+ viewBox: "0 0 24 24",
2022
2022
  fill: "none",
2023
2023
  xmlns: "http://www.w3.org/2000/svg",
2024
2024
  "aria-label": ariaLabel
@@ -2026,10 +2026,10 @@ var AudioDescription = (function (_ref) {
2026
2026
  d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
2027
2027
  fill: color
2028
2028
  }), /*#__PURE__*/React.createElement("path", {
2029
- d: "M10.8194 15.0008L10.4494 13.7708H8.49937L8.12937 15.0008H7.10938L8.97937 9.05078H9.99937L11.8694 15.0008H10.8094H10.8194ZM9.76938 11.5608C9.65938 11.2108 9.56938 10.9108 9.46938 10.5208C9.35938 10.9208 9.26937 11.2508 9.16937 11.5608L8.74937 12.9208H10.1794L9.75938 11.5608H9.76938Z",
2029
+ d: "M8.17938 9H9.33938L11.8994 15H10.5894L9.99937 13.64H7.44937L6.88937 15H5.60938L8.17938 9ZM9.57937 12.53L8.73937 10.53L7.89937 12.53H9.57937Z",
2030
2030
  fill: color
2031
2031
  }), /*#__PURE__*/React.createElement("path", {
2032
- d: "M12.6797 15.0008V9.05078H14.3797C15.1197 9.05078 15.5597 9.21078 15.9097 9.49078C16.5697 10.0208 16.8497 10.9508 16.8497 12.0208C16.8497 13.0908 16.5697 14.0308 15.9097 14.5508C15.5597 14.8308 15.1197 14.9908 14.3797 14.9908H12.6797V15.0008ZM14.1197 14.1108C14.6597 14.1108 14.9197 14.0908 15.1597 13.9108C15.6997 13.5108 15.7797 12.5308 15.7797 12.0208C15.7797 11.5108 15.6997 10.5308 15.1597 10.1308C14.9197 9.95078 14.6697 9.93078 14.1197 9.93078H13.7397V14.0908H14.1197V14.1108Z",
2032
+ d: "M12.9199 8.99994H15.2199C15.628 8.97678 16.0364 9.03723 16.4202 9.17759C16.8041 9.31795 17.1552 9.53526 17.452 9.81618C17.7489 10.0971 17.9852 10.4357 18.1464 10.8112C18.3077 11.1867 18.3906 11.5913 18.3899 11.9999C18.3906 12.4086 18.3077 12.8131 18.1464 13.1887C17.9852 13.5642 17.7489 13.9028 17.452 14.1837C17.1552 14.4646 16.8041 14.6819 16.4202 14.8223C16.0364 14.9626 15.628 15.0231 15.2199 14.9999H12.9199V8.99994ZM14.1799 10.1399V13.8199H15.1799C15.4276 13.8417 15.6771 13.8101 15.9115 13.7273C16.1459 13.6445 16.3599 13.5124 16.539 13.34C16.7181 13.1675 16.8582 12.9587 16.9497 12.7275C17.0413 12.4964 17.0823 12.2483 17.0699 11.9999C17.0814 11.7544 17.0414 11.5092 16.9523 11.28C16.8633 11.0509 16.7273 10.843 16.553 10.6697C16.3787 10.4963 16.17 10.3614 15.9404 10.2736C15.7108 10.1858 15.4654 10.1471 15.2199 10.1599L14.1799 10.1399Z",
2033
2033
  fill: color
2034
2034
  }));
2035
2035
  });
@@ -2069,16 +2069,16 @@ var BritishSignLanguage = (function (_ref) {
2069
2069
  xmlns: "http://www.w3.org/2000/svg",
2070
2070
  "aria-label": ariaLabel
2071
2071
  }, /*#__PURE__*/React.createElement("path", {
2072
- d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
2072
+ d: "M21.6953 5.33203V19.332H3.69531V5.33203H21.6953ZM22.6953 4.33203H2.69531V20.332H22.6953V4.33203Z",
2073
2073
  fill: color
2074
2074
  }), /*#__PURE__*/React.createElement("path", {
2075
- d: "M5.32031 14.9988V9.04883H7.52031C8.18031 9.04883 8.62031 9.28883 8.91031 9.66883C9.11031 9.91883 9.23031 10.2588 9.23031 10.6088C9.23031 11.1788 8.93031 11.7488 8.34031 11.9388C8.95031 12.1288 9.40031 12.6688 9.40031 13.3988C9.40031 13.9288 9.17031 14.3488 8.85031 14.6288C8.58031 14.8688 8.23031 14.9988 7.55031 14.9988H5.32031ZM7.31031 11.5688C7.68031 11.5688 7.85031 11.4888 7.97031 11.3488C8.10031 11.1988 8.17031 10.9788 8.17031 10.7588C8.17031 10.5188 8.10031 10.3088 7.97031 10.1588C7.85031 10.0188 7.68031 9.93883 7.31031 9.93883H6.38031V11.5688H7.31031ZM7.45031 14.1088C7.86031 14.1088 8.04031 14.0088 8.17031 13.8188C8.27031 13.6788 8.33031 13.4788 8.33031 13.2788C8.33031 13.0588 8.27031 12.8488 8.17031 12.7188C8.04031 12.5288 7.86031 12.4288 7.45031 12.4288H6.38031V14.1088H7.45031Z",
2075
+ d: "M5.69531 15.156V9.33203H8.37531C9.03931 9.33203 9.56731 9.51603 9.90331 9.84403C10.1673 10.116 10.2953 10.436 10.2953 10.836V10.852C10.2953 11.516 9.93531 11.884 9.51931 12.116C10.1913 12.364 10.6233 12.756 10.6233 13.54V13.556C10.6233 14.62 9.75931 15.156 8.44731 15.156H5.69531ZM9.07131 11.052V11.036C9.07131 10.644 8.75931 10.412 8.19931 10.412H6.88731V11.708H8.11931C8.70331 11.708 9.07131 11.508 9.07131 11.052ZM9.39931 13.396C9.39931 12.98 9.08731 12.732 8.39931 12.732H6.88731V14.076H8.44731C9.03931 14.076 9.39931 13.86 9.39931 13.412V13.396Z",
2076
2076
  fill: color
2077
2077
  }), /*#__PURE__*/React.createElement("path", {
2078
- d: "M13.0719 11.0897C13.1019 10.9497 13.1219 10.7697 13.1219 10.5997C13.1219 10.0897 12.7919 9.78969 12.2419 9.78969C11.6919 9.78969 11.3919 10.1297 11.3919 10.5797C11.3919 11.2597 12.2819 11.3997 13.0519 11.7397C13.6919 12.0197 14.2519 12.4197 14.2519 13.3897C14.2519 14.4897 13.3419 15.1197 12.2319 15.1197C11.1219 15.1197 10.1719 14.5097 10.1719 13.3897C10.1719 13.1597 10.2119 12.9097 10.2619 12.7897L11.2319 12.7097C11.1919 12.8497 11.1519 13.1097 11.1519 13.3097C11.1519 13.8997 11.6319 14.2697 12.2519 14.2697C12.7219 14.2697 13.2119 13.9697 13.2119 13.4097C13.2119 12.6397 12.4119 12.5397 11.6719 12.2497C10.9619 11.9697 10.3519 11.5597 10.3519 10.6097C10.3519 9.65969 11.1619 8.92969 12.2119 8.92969C13.2619 8.92969 14.0919 9.59969 14.0919 10.5597C14.0919 10.7097 14.0619 10.8997 14.0319 10.9997L13.0719 11.0897Z",
2078
+ d: "M13.1593 15.316C12.2713 15.316 11.3913 15.012 10.6953 14.388L11.4233 13.516C11.9513 13.956 12.5033 14.236 13.1833 14.236C13.7273 14.236 14.0633 14.004 14.0633 13.644V13.628C14.0633 13.284 13.8553 13.108 12.8633 12.86C11.6713 12.564 10.9273 12.228 10.9273 11.084V11.068C10.9273 10.028 11.7753 9.33203 12.9593 9.33203C13.8073 9.33203 14.5193 9.59603 15.1113 10.068L14.4633 10.996C13.9513 10.628 13.4393 10.412 12.9353 10.412C12.4233 10.412 12.1513 10.66 12.1513 10.956V10.972C12.1513 11.372 12.4073 11.508 13.4313 11.772C14.6233 12.076 15.2873 12.508 15.2873 13.508V13.524C15.2873 14.668 14.4073 15.316 13.1593 15.316Z",
2079
2079
  fill: color
2080
2080
  }), /*#__PURE__*/React.createElement("path", {
2081
- d: "M15.3281 14.9988V9.04883H16.3881V14.1088H18.7681V14.9988H15.3281Z",
2081
+ d: "M15.6953 15.156V9.33203H16.9193V14.036H19.8553V15.156H15.6953Z",
2082
2082
  fill: color
2083
2083
  }));
2084
2084
  });
@@ -2152,78 +2152,6 @@ var OpenCaptions = (function (_ref) {
2152
2152
  }));
2153
2153
  });
2154
2154
 
2155
- var Captioned = (function (_ref) {
2156
- var _ref$color = _ref.color,
2157
- color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
2158
- ariaLabel = _ref.ariaLabel;
2159
- return /*#__PURE__*/React.createElement("svg", {
2160
- xmlns: "http://www.w3.org/2000/svg",
2161
- width: "100%",
2162
- height: "100%",
2163
- viewBox: "0 0 25 25",
2164
- fill: "none",
2165
- "aria-label": ariaLabel
2166
- }, /*#__PURE__*/React.createElement("path", {
2167
- d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
2168
- fill: color
2169
- }), /*#__PURE__*/React.createElement("path", {
2170
- d: "M9.23998 12.89C9.23998 13.43 9.12999 13.91 8.87999 14.29C8.53999 14.83 7.92999 15.12 7.17999 15.12C6.33999 15.12 5.63998 14.71 5.23998 13.91C4.98998 13.41 4.85999 12.76 4.85999 12.01C4.85999 10.12 5.68999 8.91 7.18999 8.91C8.28999 8.91 9.06998 9.71 9.06998 10.85C9.06998 10.94 9.06999 11.14 9.03999 11.25L8.06998 11.29C8.08998 11.21 8.09999 11.06 8.09999 10.92C8.09999 10.31 7.79999 9.8 7.18999 9.8C6.35999 9.8 5.92999 10.68 5.92999 12.01C5.92999 12.53 5.98999 12.98 6.11999 13.34C6.28999 13.82 6.59999 14.22 7.18999 14.22C7.93999 14.22 8.30999 13.71 8.34999 12.69L9.24999 12.74V12.88L9.23998 12.89Z",
2171
- fill: color
2172
- }), /*#__PURE__*/React.createElement("path", {
2173
- d: "M13.31 15L12.94 13.77H10.99L10.62 15H9.59998L11.47 9.05H12.49L14.36 15H13.3H13.31ZM12.27 11.56C12.16 11.21 12.07 10.91 11.97 10.52C11.86 10.92 11.77 11.25 11.67 11.56L11.25 12.92H12.68L12.26 11.56H12.27Z",
2174
- fill: color
2175
- }), /*#__PURE__*/React.createElement("path", {
2176
- d: "M15.17 15V9.05H17.27C17.88 9.05 18.27 9.21 18.56 9.47C18.93 9.8 19.12 10.29 19.12 10.83C19.12 11.37 18.92 11.86 18.56 12.19C18.27 12.45 17.88 12.61 17.27 12.61H16.23V14.99H15.17V15ZM17.11 11.73C17.52 11.73 17.71 11.64 17.84 11.48C17.98 11.32 18.06 11.09 18.06 10.83C18.06 10.57 17.98 10.35 17.84 10.18C17.71 10.03 17.52 9.93 17.11 9.93H16.23V11.72H17.11V11.73Z",
2177
- fill: color
2178
- }));
2179
- });
2180
-
2181
- var FamilyFriendly = (function (_ref) {
2182
- var _ref$color = _ref.color,
2183
- color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
2184
- ariaLabel = _ref.ariaLabel;
2185
- return /*#__PURE__*/React.createElement("svg", {
2186
- xmlns: "http://www.w3.org/2000/svg",
2187
- width: "100%",
2188
- height: "100%",
2189
- viewBox: "0 0 25 25",
2190
- fill: "none",
2191
- "aria-label": ariaLabel
2192
- }, /*#__PURE__*/React.createElement("path", {
2193
- d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
2194
- fill: color
2195
- }), /*#__PURE__*/React.createElement("path", {
2196
- d: "M8.21 15V9.04999H11.57V9.93999H9.28V11.64H10.89V12.49H9.28V15H8.22H8.21Z",
2197
- fill: color
2198
- }), /*#__PURE__*/React.createElement("path", {
2199
- d: "M12.48 15V9.04999H15.84V9.93999H13.55V11.64H15.16V12.49H13.55V15H12.49H12.48Z",
2200
- fill: color
2201
- }));
2202
- });
2203
-
2204
- var TouchTour = (function (_ref) {
2205
- var _ref$color = _ref.color,
2206
- color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
2207
- ariaLabel = _ref.ariaLabel;
2208
- return /*#__PURE__*/React.createElement("svg", {
2209
- width: "100%",
2210
- height: "100%",
2211
- viewBox: "0 0 25 25",
2212
- fill: "none",
2213
- xmlns: "http://www.w3.org/2000/svg",
2214
- "aria-label": ariaLabel
2215
- }, /*#__PURE__*/React.createElement("path", {
2216
- d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
2217
- fill: color
2218
- }), /*#__PURE__*/React.createElement("path", {
2219
- d: "M8.91 15V9.94H7.38V9.05H11.5V9.94H9.97001V15H8.91Z",
2220
- fill: color
2221
- }), /*#__PURE__*/React.createElement("path", {
2222
- d: "M14.03 15V9.94H12.5V9.05H16.62V9.94H15.09V15H14.03Z",
2223
- fill: color
2224
- }));
2225
- });
2226
-
2227
2155
  var Forward10 = (function (_ref) {
2228
2156
  var _ref$color = _ref.color,
2229
2157
  color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
@@ -2371,13 +2299,13 @@ var RelaxedPerformance = (function (_ref) {
2371
2299
  xmlns: "http://www.w3.org/2000/svg",
2372
2300
  "aria-label": ariaLabel
2373
2301
  }, /*#__PURE__*/React.createElement("path", {
2374
- d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
2302
+ d: "M21.6953 5.33203V19.332H3.69531V5.33203H21.6953ZM22.6953 4.33203H2.69531V20.332H22.6953V4.33203Z",
2375
2303
  fill: color
2376
2304
  }), /*#__PURE__*/React.createElement("path", {
2377
- d: "M10.3678 15.0008C10.2278 14.7508 10.2378 14.3408 10.2278 13.9408L10.2078 13.4208C10.2078 13.0508 10.1278 12.8608 9.99781 12.7308C9.85781 12.5908 9.64781 12.5808 9.36781 12.5808H8.56781V15.0008H7.50781V9.05078H9.64781C10.2578 9.05078 10.6478 9.21078 10.9378 9.47078C11.2878 9.78078 11.4978 10.2408 11.4978 10.7408C11.4978 11.4408 11.0078 12.1308 10.1478 12.1908C10.7578 12.2608 11.1478 12.6408 11.1978 13.4008L11.2278 13.9308C11.2578 14.2908 11.2578 14.5208 11.3078 14.6908C11.3378 14.7908 11.3878 14.9108 11.4978 14.9608V14.9908H10.3678V15.0008ZM9.48781 11.7308C9.89781 11.7308 10.0878 11.6408 10.2178 11.4808C10.3578 11.3208 10.4378 11.0908 10.4378 10.8308C10.4378 10.5708 10.3578 10.3508 10.2178 10.1808C10.0878 10.0308 9.89781 9.93078 9.48781 9.93078H8.56781V11.7208H9.48781V11.7308Z",
2305
+ d: "M7.69531 15.156V9.33203H10.3433C11.0793 9.33203 11.6553 9.54003 12.0393 9.92403C12.3593 10.244 12.5273 10.7 12.5273 11.236V11.252C12.5273 12.196 12.0073 12.788 11.2553 13.052L12.7113 15.156H11.2713L9.98331 13.26H8.91931V15.156H7.69531ZM8.91931 12.172H10.2633C10.9033 12.172 11.2873 11.828 11.2873 11.316V11.3C11.2873 10.74 10.8873 10.444 10.2393 10.444H8.91931V12.172Z",
2378
2306
  fill: color
2379
2307
  }), /*#__PURE__*/React.createElement("path", {
2380
- d: "M12.6016 15.0008V9.05078H14.7016C15.3116 9.05078 15.7016 9.21078 15.9916 9.47078C16.3616 9.80078 16.5516 10.2908 16.5516 10.8308C16.5516 11.3708 16.3516 11.8608 15.9916 12.1908C15.7016 12.4508 15.3116 12.6108 14.7016 12.6108H13.6616V14.9908H12.6016V15.0008ZM14.5416 11.7308C14.9516 11.7308 15.1416 11.6408 15.2716 11.4808C15.4116 11.3208 15.4916 11.0908 15.4916 10.8308C15.4916 10.5708 15.4116 10.3508 15.2716 10.1808C15.1416 10.0308 14.9516 9.93078 14.5416 9.93078H13.6616V11.7208H14.5416V11.7308Z",
2308
+ d: "M13.6953 15.156V9.33203H16.0553C17.4393 9.33203 18.2793 10.148 18.2793 11.332V11.348C18.2793 12.692 17.2313 13.38 15.9353 13.38H14.9193V15.156H13.6953ZM14.9193 12.284H15.9753C16.6393 12.284 17.0393 11.892 17.0393 11.372V11.356C17.0393 10.764 16.6153 10.444 15.9513 10.444H14.9193V12.284Z",
2381
2309
  fill: color
2382
2310
  }));
2383
2311
  });
@@ -2529,7 +2457,6 @@ var IconLibrary = {
2529
2457
  Clips: Clips,
2530
2458
  Clock: Clock,
2531
2459
  Close: Close,
2532
- Captioned: Captioned,
2533
2460
  ClosedCaptions: ClosedCaptions,
2534
2461
  Confirm: Confirm,
2535
2462
  CreditCard: CreditCard,
@@ -2542,7 +2469,6 @@ var IconLibrary = {
2542
2469
  Expand12px: Expand12px,
2543
2470
  ExternalLink: ExternalLink,
2544
2471
  Facebook: Facebook,
2545
- FamilyFriendly: FamilyFriendly,
2546
2472
  Favourite: Favourite,
2547
2473
  FavouriteFull: FavouriteFull,
2548
2474
  Filter: Filter,
@@ -2591,7 +2517,6 @@ var IconLibrary = {
2591
2517
  Tick: Tick,
2592
2518
  Tickets: Tickets,
2593
2519
  Tiktok: Tiktok,
2594
- TouchTour: TouchTour,
2595
2520
  Trailer: Trailer,
2596
2521
  Twitter: Twitter,
2597
2522
  User: User,
@@ -3899,7 +3824,6 @@ var Tab = function Tab(_ref) {
3899
3824
  className = _ref.className,
3900
3825
  role = _ref.role,
3901
3826
  ariaLabel = _ref.ariaLabel,
3902
- tabLinkId = _ref.tabLinkId,
3903
3827
  color = _ref.color,
3904
3828
  dataTestId = _ref.dataTestId,
3905
3829
  isOpen = _ref.isOpen;
@@ -3934,9 +3858,8 @@ var Tab = function Tab(_ref) {
3934
3858
  className: className,
3935
3859
  "data-testid": dataTestId
3936
3860
  }, /*#__PURE__*/React__default.createElement(TabText, {
3937
- id: tabLinkId,
3938
- trimText: trimText,
3939
3861
  color: color,
3862
+ trimText: trimText,
3940
3863
  withTextInMobile: withTextInMobile,
3941
3864
  "aria-hidden": "true"
3942
3865
  }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -4621,31 +4544,6 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
4621
4544
  var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4622
4545
  var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4623
4546
 
4624
- var pad = function pad(num) {
4625
- return String(num || 0).padStart(2, '0');
4626
- };
4627
- var renderTimerValue = function renderTimerValue(value, label, separator) {
4628
- if (separator === void 0) {
4629
- separator = true;
4630
- }
4631
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
4632
- className: "harmonic-timer-value"
4633
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
4634
- color: "inherit",
4635
- hierarchy: "h3",
4636
- size: "medium",
4637
- "data-testid": label
4638
- }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
4639
- className: "harmonic-timer-label"
4640
- }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4641
- color: "inherit",
4642
- size: "large"
4643
- }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
4644
- color: "inherit",
4645
- hierarchy: "h3",
4646
- size: "medium"
4647
- }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
4648
- };
4649
4547
  var Timer = function Timer(_ref) {
4650
4548
  var endDate = _ref.endDate,
4651
4549
  title = _ref.title,
@@ -4654,22 +4552,43 @@ var Timer = function Timer(_ref) {
4654
4552
  bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
4655
4553
  _ref$color = _ref.color,
4656
4554
  color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
4657
- var _useState = React.useState('00'),
4658
- seconds = _useState[0],
4659
- setSeconds = _useState[1];
4660
- var _useState2 = React.useState('00'),
4661
- minutes = _useState2[0],
4662
- setMinutes = _useState2[1];
4663
- var _useState3 = React.useState('00'),
4664
- hours = _useState3[0],
4665
- setHours = _useState3[1];
4666
- var _useState4 = React.useState('00'),
4667
- days = _useState4[0],
4668
- setDays = _useState4[1];
4669
- var _useState5 = React.useState(false),
4670
- isEndDateReached = _useState5[0],
4671
- setIsEndDateReached = _useState5[1];
4672
- React.useEffect(function () {
4555
+ var _React$useState = React__default.useState('00'),
4556
+ seconds = _React$useState[0],
4557
+ setSeconds = _React$useState[1];
4558
+ var _React$useState2 = React__default.useState('00'),
4559
+ minutes = _React$useState2[0],
4560
+ setMinutes = _React$useState2[1];
4561
+ var _React$useState3 = React__default.useState('00'),
4562
+ hours = _React$useState3[0],
4563
+ setHours = _React$useState3[1];
4564
+ var _React$useState4 = React__default.useState('00'),
4565
+ days = _React$useState4[0],
4566
+ setDays = _React$useState4[1];
4567
+ var _React$useState5 = React__default.useState(false),
4568
+ isEndDateReached = _React$useState5[0],
4569
+ setIsEndDateReached = _React$useState5[1];
4570
+ var renderTimerValue = function renderTimerValue(value, label, separator) {
4571
+ if (separator === void 0) {
4572
+ separator = true;
4573
+ }
4574
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
4575
+ className: "harmonic-timer-value"
4576
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
4577
+ color: "inherit",
4578
+ hierarchy: "h3",
4579
+ size: "medium"
4580
+ }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
4581
+ className: "harmonic-timer-label"
4582
+ }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4583
+ color: "inherit",
4584
+ size: "large"
4585
+ }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
4586
+ color: "inherit",
4587
+ hierarchy: "h3",
4588
+ size: "medium"
4589
+ }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
4590
+ };
4591
+ React__default.useEffect(function () {
4673
4592
  if (isEndDateReached) return undefined;
4674
4593
  // We use this to set values for the timer immediately
4675
4594
  var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4677,21 +4596,19 @@ var Timer = function Timer(_ref) {
4677
4596
  return setInterval(fn, delay);
4678
4597
  };
4679
4598
  var updateValues = function updateValues() {
4680
- var futureDate = new Date(endDate);
4681
- var nowDate = new Date();
4682
- var diffInMs = futureDate.getTime() - nowDate.getTime();
4683
- if (diffInMs < 0) {
4599
+ var futureDate = moment(endDate);
4600
+ var nowDate = moment();
4601
+ var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
4602
+ var difference = moment(differenceInMilliseconds).utc();
4603
+ if (differenceInMilliseconds < 0) {
4684
4604
  setIsEndDateReached(true);
4685
4605
  if (endDateHandler) endDateHandler();
4686
4606
  } else {
4687
- var duration = dateFns.intervalToDuration({
4688
- start: nowDate,
4689
- end: futureDate
4690
- });
4691
- var daysDiff = pad(dateFns.differenceInDays(futureDate, nowDate));
4692
- var hoursDiff = pad(duration.hours);
4693
- var minutesDiff = pad(duration.minutes);
4694
- var secondsDiff = pad(duration.seconds);
4607
+ var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
4608
+ var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
4609
+ var hoursDiff = difference.format('HH');
4610
+ var minutesDiff = difference.format('mm');
4611
+ var secondsDiff = difference.format('ss');
4695
4612
  setDays(daysDiff);
4696
4613
  setHours(hoursDiff);
4697
4614
  setMinutes(minutesDiff);
@@ -4703,7 +4620,7 @@ var Timer = function Timer(_ref) {
4703
4620
  clearInterval(interval);
4704
4621
  };
4705
4622
  });
4706
- var hideTimer = dateFns.isPast(new Date(endDate));
4623
+ var hideTimer = moment(endDate).isBefore(moment());
4707
4624
  if (hideTimer) return null;
4708
4625
  return /*#__PURE__*/React__default.createElement(TimerWrapper, {
4709
4626
  color: color
@@ -5421,7 +5338,6 @@ var Dropdown = function Dropdown(_ref) {
5421
5338
  className = _ref.className,
5422
5339
  role = _ref.role,
5423
5340
  ariaLabel = _ref.ariaLabel,
5424
- tabLinkId = _ref.tabLinkId,
5425
5341
  trimTabText = _ref.trimTabText;
5426
5342
  var node = React.useRef();
5427
5343
  var _useState = React.useState(false),
@@ -5518,7 +5434,6 @@ var Dropdown = function Dropdown(_ref) {
5518
5434
  };
5519
5435
  var renderTab = function renderTab() {
5520
5436
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
5521
- tabLinkId: tabLinkId,
5522
5437
  trimText: trimTabText,
5523
5438
  title: title,
5524
5439
  titleLink: titleLink,
@@ -5598,8 +5513,7 @@ var Account = function Account(_ref) {
5598
5513
  iconName: iconName,
5599
5514
  withOptionsInMobile: false,
5600
5515
  withIcon: "left",
5601
- className: className,
5602
- tabLinkId: "account-link"
5516
+ className: className
5603
5517
  });
5604
5518
  };
5605
5519
 
@@ -5988,21 +5902,43 @@ var Accordion = function Accordion(_ref) {
5988
5902
  var content = React.useRef(null);
5989
5903
  var timeoutRef = React.useRef(null);
5990
5904
  var rafRef = React.useRef(null);
5905
+ var resizeObserverRef = React.useRef(null);
5991
5906
  React.useEffect(function () {
5992
- if (content != null && content.current && initOpen) {
5907
+ if (content.current && initOpen) {
5993
5908
  setTextHeight(content.current.scrollHeight + "px");
5994
5909
  }
5995
- }, [content, initOpen]);
5910
+ }, [initOpen]);
5996
5911
  React.useEffect(function () {
5997
- if (openAccordion && content != null && content.current) {
5998
- rafRef.current = window.requestAnimationFrame(function () {
5999
- var _content$current$scro, _content$current;
6000
- setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
6001
- });
6002
- } else if (!openAccordion) {
5912
+ var el = content.current;
5913
+ if (!el) return;
5914
+ if (!openAccordion) {
6003
5915
  setTextHeight('0px');
5916
+ if (resizeObserverRef.current) {
5917
+ resizeObserverRef.current.disconnect();
5918
+ resizeObserverRef.current = null;
5919
+ }
5920
+ return;
5921
+ }
5922
+ var updateHeight = function updateHeight() {
5923
+ setTextHeight(el.scrollHeight + "px");
5924
+ };
5925
+ rafRef.current = window.requestAnimationFrame(updateHeight);
5926
+ if ('ResizeObserver' in window) {
5927
+ var ro = new ResizeObserver(updateHeight);
5928
+ ro.observe(el);
5929
+ resizeObserverRef.current = ro;
5930
+ return function () {
5931
+ ro.disconnect();
5932
+ resizeObserverRef.current = null;
5933
+ };
6004
5934
  }
6005
- }, [openAccordion, childrenVisibility, content]);
5935
+ return function () {
5936
+ if (rafRef.current) {
5937
+ window.cancelAnimationFrame(rafRef.current);
5938
+ rafRef.current = null;
5939
+ }
5940
+ };
5941
+ }, [openAccordion, childrenVisibility, children]);
6006
5942
  React.useEffect(function () {
6007
5943
  return function () {
6008
5944
  if (timeoutRef.current) {
@@ -6013,12 +5949,15 @@ var Accordion = function Accordion(_ref) {
6013
5949
  window.cancelAnimationFrame(rafRef.current);
6014
5950
  rafRef.current = null;
6015
5951
  }
5952
+ if (resizeObserverRef.current) {
5953
+ resizeObserverRef.current.disconnect();
5954
+ resizeObserverRef.current = null;
5955
+ }
6016
5956
  };
6017
5957
  }, []);
6018
5958
  var toggleAccordion = function toggleAccordion() {
6019
5959
  if (React__default.Children.count(children) === 0) return;
6020
5960
  if (openAccordion) {
6021
- setIcon(collapsedStateIconData);
6022
5961
  setOpenAccordion(false);
6023
5962
  setTextHeight('0px');
6024
5963
  setIcon(collapsedStateIconData);
@@ -6062,9 +6001,9 @@ var Accordion = function Accordion(_ref) {
6062
6001
  "aria-live": openAccordion ? 'polite' : 'off',
6063
6002
  tag: "div",
6064
6003
  size: "large"
6065
- }, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
6004
+ }, childrenVisibility && (/*#__PURE__*/React__default.createElement(ChildrenContainer, {
6066
6005
  isVisible: childrenVisibility
6067
- }, children)));
6006
+ }, children))));
6068
6007
  };
6069
6008
 
6070
6009
  var _templateObject$E;
@@ -8959,7 +8898,7 @@ var _excluded$m = ["text"],
8959
8898
  _excluded3$1 = ["text"];
8960
8899
  var _buttonTypeToButton$1;
8961
8900
  var LENGTH_TEXT$1 = 28;
8962
- var LENGTH_TEXT_PARAGRAPH = 185;
8901
+ var LENGTH_TEXT_PARAGRAPH = 130;
8963
8902
  var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
8964
8903
  var PromoWithTags = function PromoWithTags(_ref) {
8965
8904
  var _ref$imagePosition = _ref.imagePosition,
@@ -10004,35 +9943,35 @@ function Select(_ref3) {
10004
9943
 
10005
9944
  var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
10006
9945
  var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10007
- var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-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 .harmonic-select__single-value,\n .harmonic-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 .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-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 &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-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 .harmonic-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 .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
9946
+ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-base-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-base-dark-grey);\n }\n\n .harmonic-select__single-value {\n color: var(--color-base-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-dark-grey);\n background: var(--color-base-light-grey);\n }\n\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-mid-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-base-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-base-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-base-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
10008
9947
  var width = _ref.width;
10009
9948
  if (!width) return 'none';
10010
9949
  return width + "px";
10011
9950
  }, function (_ref2) {
10012
9951
  var error = _ref2.error;
10013
- if (error !== undefined) return "1px solid var(--base-color-errorstate)";
10014
- return "1px solid var(--base-color-dark-grey)";
9952
+ if (error !== undefined) return "1px solid var(--color-base-errorstate)";
9953
+ return "1px solid var(--color-base-dark-grey)";
10015
9954
  }, function (_ref3) {
10016
9955
  var error = _ref3.error;
10017
- if (error !== undefined) return "var(--base-color-errorstate)";
10018
- return "var(--base-color-dark-grey)";
9956
+ if (error !== undefined) return "var(--color-base-errorstate)";
9957
+ return "var(--color-base-dark-grey)";
10019
9958
  }, function (_ref4) {
10020
9959
  var darkMode = _ref4.darkMode;
10021
- if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
10022
- return "0 0 0 3px var(--base-color-lapislazuli)";
10023
- });
10024
- var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9960
+ if (darkMode) return "0 0 0 4px var(--color-base-lemonchiffon)";
9961
+ return "0 0 0 3px var(--color-base-lapislazuli)";
9962
+ }, devices.mobile, devices.mobile);
9963
+ var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 24px;\n color: ", ";\n"])), function (_ref5) {
10025
9964
  var darkMode = _ref5.darkMode;
10026
- if (darkMode) return "var(--base-color-white)";
10027
- return "var(--base-color-black)";
9965
+ if (darkMode) return "var(--color-base-white)";
9966
+ return "var(--color-base-black)";
10028
9967
  });
10029
9968
  var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
10030
9969
  var darkMode = _ref6.darkMode;
10031
- if (darkMode) return "var(--base-color-white)";
10032
- return "var(--base-color-errorstate)";
9970
+ if (darkMode) return "var(--color-base-white)";
9971
+ return "var(--color-base-errorstate)";
10033
9972
  });
10034
9973
 
10035
- var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9974
+ var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
10036
9975
  var DropdownIndicator = function DropdownIndicator(props) {
10037
9976
  return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
10038
9977
  iconName: "DropdownArrow"
@@ -10043,12 +9982,15 @@ var WrapperComponent = function WrapperComponent(_ref) {
10043
9982
  error = _ref.error,
10044
9983
  width = _ref.width,
10045
9984
  darkMode = _ref.darkMode,
10046
- children = _ref.children;
10047
- return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
9985
+ children = _ref.children,
9986
+ className = _ref.className;
9987
+ return /*#__PURE__*/React__default.createElement(Container$4, {
9988
+ className: className
9989
+ }, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
10048
9990
  darkMode: darkMode,
10049
9991
  "data-testid": "select2-text-label"
10050
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
10051
- level: 6
9992
+ }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
9993
+ size: 'large'
10052
9994
  }, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
10053
9995
  width: width,
10054
9996
  error: error,
@@ -10056,8 +9998,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
10056
9998
  }, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
10057
9999
  darkMode: darkMode,
10058
10000
  "data-testid": "select2-error-label"
10059
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
10060
- level: 6
10001
+ }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
10002
+ size: 'medium'
10061
10003
  }, error))));
10062
10004
  };
10063
10005
  /**
@@ -10083,12 +10025,14 @@ var SelectComponent = function SelectComponent(_ref2) {
10083
10025
  _ref2$isSearchable = _ref2.isSearchable,
10084
10026
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
10085
10027
  components = _ref2.components,
10028
+ className = _ref2.className,
10086
10029
  selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
10087
10030
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
10088
10031
  label: label,
10089
10032
  error: error,
10090
10033
  width: width,
10091
- darkMode: darkMode
10034
+ darkMode: darkMode,
10035
+ className: className
10092
10036
  }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
10093
10037
  components: _extends({
10094
10038
  DropdownIndicator: DropdownIndicator,
@@ -11522,9 +11466,14 @@ var BodyContent = function BodyContent(_ref2) {
11522
11466
  _ref2$renderGridItem = _ref2.renderGridItem,
11523
11467
  renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
11524
11468
  var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
11525
- var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
11469
+ var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
11470
+ tag: "div",
11471
+ size: "large",
11472
+ "data-testid": "text-container",
11526
11473
  className: textContainerClassName,
11527
- html: text
11474
+ dangerouslySetInnerHTML: {
11475
+ __html: addTypographyClasses(text)
11476
+ }
11528
11477
  });
11529
11478
  var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
11530
11479
  columnStartDesktop: columnStartDesktop,