@royaloperahouse/harmonic 0.8.0 → 0.9.1-a

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 (21) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/README.md +252 -43
  3. package/dist/components/atoms/Buttons/Secondary/utils.d.ts +4 -4
  4. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  5. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  6. package/dist/components/molecules/ContactCard/ContactCard.style.d.ts +5 -4
  7. package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts +3 -1
  8. package/dist/harmonic.cjs.development.css +319 -0
  9. package/dist/harmonic.cjs.development.js +149 -111
  10. package/dist/harmonic.cjs.development.js.map +1 -1
  11. package/dist/harmonic.cjs.production.min.js +1 -1
  12. package/dist/harmonic.cjs.production.min.js.map +1 -1
  13. package/dist/harmonic.esm.js +160 -119
  14. package/dist/harmonic.esm.js.map +1 -1
  15. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +1 -0
  16. package/dist/types/buttonTypes.d.ts +2 -0
  17. package/dist/types/contactCard.d.ts +8 -22
  18. package/dist/types/types.d.ts +11 -2
  19. package/dist/types/upsell.d.ts +15 -1
  20. package/package.json +1 -1
  21. package/README.GIT +0 -278
package/dist/harmonic.cjs.development.js CHANGED
@@ -2829,48 +2829,70 @@ var COLORS$1 = {
2829
2829
  hover: 'var(--button-secondary-hover-color)',
2830
2830
  pressed: 'var(--button-secondary-pressed-color)'
2831
2831
  };
2832
+ var isObjectWithKey = function isObjectWithKey(object, key) {
2833
+ return typeof object === 'object' && object !== null && key in object;
2834
+ };
2835
+ var hasSecondaryButtonColor = function hasSecondaryButtonColor(theme) {
2836
+ return isObjectWithKey(theme, 'colors') && isObjectWithKey(theme.colors, 'secondaryButton') && typeof theme.colors.secondaryButton === 'string';
2837
+ };
2832
2838
  var getTextColor$1 = function getTextColor(_ref) {
2833
2839
  var disabled = _ref.disabled,
2834
- textColor = _ref.textColor;
2840
+ textColor = _ref.textColor,
2841
+ theme = _ref.theme;
2835
2842
  if (disabled) {
2836
2843
  return COLORS$1.darkGrey;
2837
2844
  }
2838
2845
  if (textColor) {
2839
2846
  return "var(--color-" + textColor + ")";
2840
2847
  }
2848
+ if (hasSecondaryButtonColor(theme)) {
2849
+ return theme.colors.secondaryButton;
2850
+ }
2841
2851
  return COLORS$1["default"];
2842
2852
  };
2843
2853
  var getBorderColor = function getBorderColor(_ref2) {
2844
2854
  var disabled = _ref2.disabled,
2845
- borderColor = _ref2.borderColor;
2855
+ borderColor = _ref2.borderColor,
2856
+ theme = _ref2.theme;
2846
2857
  if (disabled) {
2847
2858
  return COLORS$1.disabled;
2848
2859
  }
2849
2860
  if (borderColor) {
2850
2861
  return "var(--color-" + borderColor + ")";
2851
2862
  }
2863
+ if (hasSecondaryButtonColor(theme)) {
2864
+ return theme.colors.secondaryButton;
2865
+ }
2852
2866
  return COLORS$1.border;
2853
2867
  };
2854
2868
  var getHoveredColor$1 = function getHoveredColor(_ref3) {
2855
2869
  var disabled = _ref3.disabled,
2856
- hoveredColor = _ref3.hoveredColor;
2870
+ hoveredColor = _ref3.hoveredColor,
2871
+ theme = _ref3.theme;
2857
2872
  if (disabled) {
2858
2873
  return COLORS$1.disabled;
2859
2874
  }
2860
2875
  if (hoveredColor) {
2861
2876
  return "var(--color-" + hoveredColor + ")";
2862
2877
  }
2878
+ if (hasSecondaryButtonColor(theme)) {
2879
+ return theme.colors.secondaryButton;
2880
+ }
2863
2881
  return COLORS$1.hover;
2864
2882
  };
2865
2883
  var getPressedColor$1 = function getPressedColor(_ref4) {
2866
2884
  var disabled = _ref4.disabled,
2867
- pressedColor = _ref4.pressedColor;
2885
+ pressedColor = _ref4.pressedColor,
2886
+ theme = _ref4.theme;
2868
2887
  if (disabled) {
2869
2888
  return COLORS$1.disabled;
2870
2889
  }
2871
2890
  if (pressedColor) {
2872
2891
  return "var(--color-" + pressedColor + ")";
2873
2892
  }
2893
+ if (hasSecondaryButtonColor(theme)) {
2894
+ return theme.colors.secondaryButton;
2895
+ }
2874
2896
  return COLORS$1.pressed;
2875
2897
  };
2876
2898
 
@@ -3811,6 +3833,7 @@ var Tab = function Tab(_ref) {
3811
3833
  className = _ref.className,
3812
3834
  role = _ref.role,
3813
3835
  ariaLabel = _ref.ariaLabel,
3836
+ tabLinkId = _ref.tabLinkId,
3814
3837
  color = _ref.color;
3815
3838
  var clickHandler = function clickHandler() {
3816
3839
  if (onClick) {
@@ -3841,8 +3864,9 @@ var Tab = function Tab(_ref) {
3841
3864
  tabIndex: 0,
3842
3865
  className: className
3843
3866
  }, /*#__PURE__*/React__default.createElement(TabText, {
3844
- color: color,
3867
+ id: tabLinkId,
3845
3868
  trimText: trimText,
3869
+ color: color,
3846
3870
  withTextInMobile: withTextInMobile,
3847
3871
  "aria-hidden": "true"
3848
3872
  }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -5400,6 +5424,7 @@ var Dropdown = function Dropdown(_ref) {
5400
5424
  className = _ref.className,
5401
5425
  role = _ref.role,
5402
5426
  ariaLabel = _ref.ariaLabel,
5427
+ tabLinkId = _ref.tabLinkId,
5403
5428
  trimTabText = _ref.trimTabText;
5404
5429
  var node = React.useRef();
5405
5430
  var _useState = React.useState(false),
@@ -5496,6 +5521,7 @@ var Dropdown = function Dropdown(_ref) {
5496
5521
  };
5497
5522
  var renderTab = function renderTab() {
5498
5523
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
5524
+ tabLinkId: tabLinkId,
5499
5525
  trimText: trimTabText,
5500
5526
  title: title,
5501
5527
  titleLink: titleLink,
@@ -5575,7 +5601,8 @@ var Account = function Account(_ref) {
5575
5601
  iconName: iconName,
5576
5602
  withOptionsInMobile: false,
5577
5603
  withIcon: "left",
5578
- className: className
5604
+ className: className,
5605
+ tabLinkId: "account-link"
5579
5606
  });
5580
5607
  };
5581
5608
 
@@ -6934,7 +6961,7 @@ var core = /*#__PURE__*/_extends({}, common, {
6934
6961
  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
6935
6962
  primary: colors.core,
6936
6963
  primaryButton: colors.core,
6937
- secondaryButton: commonColors.white,
6964
+ secondaryButton: colors.core,
6938
6965
  tertiaryButton: 'transparent',
6939
6966
  auxiliaryButton: 'transparent',
6940
6967
  primaryButtonReverseBg: colors.cinema,
@@ -6947,7 +6974,7 @@ var stream = /*#__PURE__*/_extends({}, common, {
6947
6974
  primaryButton: colors.stream,
6948
6975
  primaryButtonReverseBg: colors.cinema,
6949
6976
  primaryButtonReverse: commonColors.white,
6950
- secondaryButton: commonColors.white,
6977
+ secondaryButton: colors.stream,
6951
6978
  tertiaryButton: 'transparent',
6952
6979
  auxiliaryButton: 'transparent'
6953
6980
  })
@@ -6958,7 +6985,7 @@ var cinema = /*#__PURE__*/_extends({}, common, {
6958
6985
  primaryButton: commonColors.white,
6959
6986
  primaryButtonReverseBg: commonColors.white,
6960
6987
  primaryButtonReverse: colors.cinema,
6961
- secondaryButton: commonColors.white,
6988
+ secondaryButton: colors.cinema,
6962
6989
  tertiaryButton: 'transparent',
6963
6990
  auxiliaryButton: 'transparent'
6964
6991
  })
@@ -6969,7 +6996,7 @@ var schools = /*#__PURE__*/_extends({}, common, {
6969
6996
  primaryButton: colors.core,
6970
6997
  primaryButtonReverseBg: colors.cinema,
6971
6998
  primaryButtonReverse: commonColors.white,
6972
- secondaryButton: commonColors.white,
6999
+ secondaryButton: colors.core,
6973
7000
  tertiaryButton: 'transparent',
6974
7001
  auxiliaryButton: 'transparent'
6975
7002
  }),
@@ -7057,17 +7084,23 @@ var TextOnly = function TextOnly(_ref) {
7057
7084
  })(exports.ButtonType || (exports.ButtonType = {}));
7058
7085
 
7059
7086
  var _templateObject$J, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$7, _templateObject8$4;
7060
- var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-light-grey);\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);
7087
+ var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__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);
7061
7088
  var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
7062
7089
  var PromoLabel = /*#__PURE__*/styled__default.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:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n '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) {
7063
7090
  var theme = _ref.theme;
7064
7091
  return theme.colors.primary;
7065
7092
  }, exports.Colors.White);
7066
- var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
7093
+ var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n"])), function (_ref2) {
7094
+ var stackCtasEarly = _ref2.stackCtasEarly;
7095
+ return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
7096
+ }, function (_ref3) {
7097
+ var stackCtasEarly = _ref3.stackCtasEarly;
7098
+ return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
7099
+ });
7067
7100
  var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
7068
7101
  var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
7069
7102
  var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
7070
- var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-dark-grey);\n"])));
7103
+ var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
7071
7104
 
7072
7105
  // Set max. character length
7073
7106
  var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -7110,8 +7143,13 @@ var UpsellCard = function UpsellCard(_ref) {
7110
7143
  flag = _ref.flag,
7111
7144
  offerTexts = _ref.offerTexts,
7112
7145
  link = _ref.link,
7146
+ secondaryLink = _ref.secondaryLink,
7147
+ _ref$stackCtasEarly = _ref.stackCtasEarly,
7148
+ stackCtasEarly = _ref$stackCtasEarly === void 0 ? false : _ref$stackCtasEarly,
7113
7149
  _ref$theme = _ref.theme,
7114
- theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
7150
+ theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
7151
+ _ref$secondaryTheme = _ref.secondaryTheme,
7152
+ secondaryTheme = _ref$secondaryTheme === void 0 ? exports.ThemeType.Core : _ref$secondaryTheme;
7115
7153
  var truncate = function truncate(str, n) {
7116
7154
  return str.length >= n ? str.slice(0, n) : str;
7117
7155
  };
@@ -7130,13 +7168,17 @@ var UpsellCard = function UpsellCard(_ref) {
7130
7168
  level: 4
7131
7169
  }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
7132
7170
  level: 4
7133
- }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
7171
+ }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
7134
7172
  return /*#__PURE__*/React__default.createElement(OfferText, {
7135
- key: offerText.title,
7173
+ key: "offer-" + index,
7136
7174
  title: offerText.title,
7137
7175
  description: offerText.description
7138
7176
  });
7139
- }), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT))))));
7177
+ }), ((link == null ? void 0 : link.text) || (secondaryLink == null ? void 0 : secondaryLink.text)) && (/*#__PURE__*/React__default.createElement(ButtonContainer, {
7178
+ stackCtasEarly: stackCtasEarly
7179
+ }, (link == null ? void 0 : link.text) && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)), (secondaryLink == null ? void 0 : secondaryLink.text) && (/*#__PURE__*/React__default.createElement(Theme, {
7180
+ theme: secondaryTheme
7181
+ }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT))))))));
7140
7182
  };
7141
7183
 
7142
7184
  var _templateObject$K;
@@ -7146,7 +7188,7 @@ var UpsellCards = function UpsellCards(_ref) {
7146
7188
  var upsellCards = _ref.upsellCards;
7147
7189
  return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
7148
7190
  return /*#__PURE__*/React__default.createElement(UpsellCard, {
7149
- key: "upsell-card-" + index,
7191
+ key: "card-" + index,
7150
7192
  title: card.title,
7151
7193
  subTitle: card.subTitle,
7152
7194
  price: card.price,
@@ -7154,7 +7196,10 @@ var UpsellCards = function UpsellCards(_ref) {
7154
7196
  flag: card.flag,
7155
7197
  offerTexts: card.offerTexts,
7156
7198
  link: card.link,
7157
- theme: card.theme
7199
+ secondaryLink: card.secondaryLink,
7200
+ stackCtasEarly: true,
7201
+ theme: card.theme,
7202
+ secondaryTheme: card.secondaryTheme
7158
7203
  });
7159
7204
  }));
7160
7205
  };
@@ -7168,7 +7213,8 @@ var UpsellSection = function UpsellSection(_ref) {
7168
7213
  theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
7169
7214
  var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
7170
7215
  return _extends({}, card, {
7171
- theme: card.theme || theme
7216
+ theme: card.theme || theme,
7217
+ secondaryTheme: card.secondaryTheme || theme
7172
7218
  });
7173
7219
  }) : [];
7174
7220
  return /*#__PURE__*/React__default.createElement(Theme, {
@@ -8401,7 +8447,8 @@ var Card = function Card(_ref) {
8401
8447
  labelParams = _ref.labelParams,
8402
8448
  _ref$isGridCard = _ref.isGridCard,
8403
8449
  isGridCard = _ref$isGridCard === void 0 ? false : _ref$isGridCard,
8404
- auxiliaryCTA = _ref.auxiliaryCTA;
8450
+ auxiliaryCTA = _ref.auxiliaryCTA,
8451
+ onClick = _ref.onClick;
8405
8452
  var truncate = function truncate(str, n) {
8406
8453
  return str.length >= n ? str.substr(0, n) : str;
8407
8454
  };
@@ -8452,6 +8499,7 @@ var Card = function Card(_ref) {
8452
8499
  }, /*#__PURE__*/React__default.createElement("a", {
8453
8500
  href: firstButton == null ? void 0 : firstButton.href,
8454
8501
  target: firstButton == null ? void 0 : firstButton.target,
8502
+ onClick: onClick,
8455
8503
  className: "targetLink",
8456
8504
  style: {
8457
8505
  flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
@@ -8568,54 +8616,44 @@ var Cards = function Cards(_ref) {
8568
8616
  }));
8569
8617
  };
8570
8618
 
8571
- var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$j;
8572
- var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__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);
8573
- var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__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) {
8574
- var hideBottomBorder = _ref.hideBottomBorder;
8575
- return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
8576
- }, function (_ref2) {
8577
- var hideTopBorder = _ref2.hideTopBorder;
8578
- return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
8579
- }, devices.mobileAndTablet);
8580
- var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8581
- var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8582
- var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__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);
8619
+ var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$j, _templateObject6$g, _templateObject7$b;
8620
+ var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
8621
+ var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])), devices.mobileAndTablet);
8622
+ var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
8623
+ var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
8624
+ var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8625
+ var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8626
+ var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\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 text-decoration: underline;\n text-underline-offset: 4px;\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
8583
8627
 
8584
- var divideAddressString = function divideAddressString(address) {
8585
- return address.split(',').map(function (chunk, i) {
8586
- return /*#__PURE__*/React__default.createElement(BodyText, {
8587
- level: 1,
8588
- key: i
8589
- }, chunk.trim());
8590
- });
8591
- };
8592
8628
  var ContactCard = function ContactCard(_ref) {
8593
- var name = _ref.name,
8629
+ var title = _ref.title,
8630
+ titleSuffix = _ref.titleSuffix,
8594
8631
  description = _ref.description,
8595
8632
  email = _ref.email,
8596
8633
  phone = _ref.phone,
8597
8634
  website = _ref.website,
8598
8635
  address = _ref.address,
8599
- _ref$hideBottomBorder = _ref.hideBottomBorder,
8600
- hideBottomBorder = _ref$hideBottomBorder === void 0 ? false : _ref$hideBottomBorder,
8601
- _ref$hideTopBorder = _ref.hideTopBorder,
8602
- hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
8636
+ className = _ref.className;
8603
8637
  var hasDetails = email || phone || website;
8604
8638
  var addressString = address == null ? void 0 : address.substring(0, 110);
8605
8639
  var descriptionText = description == null ? void 0 : description.substring(0, 110);
8606
- return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
8640
+ return /*#__PURE__*/React__default.createElement("div", {
8641
+ className: className
8642
+ }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
8607
8643
  columnStartDesktop: 3,
8608
- columnSpanDesktop: 8,
8644
+ columnSpanDesktop: 12,
8609
8645
  columnStartDevice: 1,
8610
8646
  columnSpanDevice: 14
8611
8647
  }, /*#__PURE__*/React__default.createElement(Wrapper$4, {
8612
- "data-testid": "contact-card-wrapper",
8613
- hideBottomBorder: hideBottomBorder,
8614
- hideTopBorder: hideTopBorder
8615
- }, /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyText, {
8616
- level: 1
8617
- }, name), descriptionText && /*#__PURE__*/React__default.createElement(Subtitle, {
8618
- level: 2
8648
+ "data-testid": "contact-card-wrapper"
8649
+ }, /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
8650
+ size: "large"
8651
+ }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8652
+ size: "small"
8653
+ }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8654
+ size: "small"
8655
+ }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
8656
+ size: "large"
8619
8657
  }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
8620
8658
  "data-testid": "contact-card-details-block"
8621
8659
  }, email && (/*#__PURE__*/React__default.createElement("a", {
@@ -8631,12 +8669,12 @@ var ContactCard = function ContactCard(_ref) {
8631
8669
  rel: "noreferrer"
8632
8670
  }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
8633
8671
  "data-testid": "contact-card-address-block"
8634
- }, /*#__PURE__*/React__default.createElement(AddressWrapperDesktop, null, /*#__PURE__*/React__default.createElement(BodyText, {
8635
- level: 1
8636
- }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
8672
+ }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8673
+ size: "large"
8674
+ }, addressString)))))))));
8637
8675
  };
8638
8676
 
8639
- var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$k, _templateObject6$g;
8677
+ var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$k, _templateObject6$h;
8640
8678
  var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8641
8679
  var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
8642
8680
  return props.clickable ? 'pointer' : 'default';
@@ -8646,7 +8684,7 @@ var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject
8646
8684
  return props.showImage ? 2 : '1 / span 4';
8647
8685
  }, devices.mobile);
8648
8686
  var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
8649
- var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
8687
+ var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
8650
8688
  return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
8651
8689
  });
8652
8690
 
@@ -8774,14 +8812,13 @@ var _excluded$k = ["text", "onClick"];
8774
8812
  var HotFilters = function HotFilters(_ref) {
8775
8813
  var items = _ref.items,
8776
8814
  className = _ref.className,
8777
- defaultSelectedIndex = _ref.defaultSelectedIndex;
8778
- var _useState = React.useState(defaultSelectedIndex != null ? defaultSelectedIndex : 0),
8779
- selectedIndex = _useState[0],
8780
- setSelectedIndex = _useState[1];
8781
- var handleClick = function handleClick(index, onClick) {
8782
- setSelectedIndex(index);
8815
+ _ref$selectedIndex = _ref.selectedIndex,
8816
+ selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
8817
+ onSelect = _ref.onSelect;
8818
+ var handleClick = React__default.useCallback(function (index, onClick) {
8819
+ if (onSelect) onSelect(index);
8783
8820
  if (onClick) onClick();
8784
- };
8821
+ }, [onSelect]);
8785
8822
  return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
8786
8823
  className: className
8787
8824
  }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
@@ -8798,7 +8835,8 @@ var HotFilters = function HotFilters(_ref) {
8798
8835
  backgroundColor: isSelected ? 'base-black' : 'base-white',
8799
8836
  textColor: isSelected ? 'base-white' : 'base-black',
8800
8837
  hoveredColor: "base-black",
8801
- pressedColor: "black-pressed"
8838
+ pressedColor: "black-pressed",
8839
+ "aria-pressed": isSelected
8802
8840
  }, rest), text);
8803
8841
  })));
8804
8842
  };
@@ -9005,7 +9043,7 @@ var Information = function Information(_ref) {
9005
9043
  })))));
9006
9044
  };
9007
9045
 
9008
- var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$8;
9046
+ var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$i, _templateObject7$c, _templateObject8$8;
9009
9047
  var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
9010
9048
  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
9011
9049
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
@@ -9015,7 +9053,7 @@ var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$z || (_te
9015
9053
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
9016
9054
  return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
9017
9055
  });
9018
- var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__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) {
9056
+ var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__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) {
9019
9057
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
9020
9058
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
9021
9059
  }, devices.mobile);
@@ -9023,8 +9061,8 @@ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_t
9023
9061
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
9024
9062
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
9025
9063
  }, devices.mobile);
9026
- var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
9027
- var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__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 ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
9064
+ var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
9065
+ var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__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 ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
9028
9066
  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
9029
9067
  return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
9030
9068
  }, devices.mobile, function (_ref6) {
@@ -9081,7 +9119,7 @@ var PageHeading = function PageHeading(_ref) {
9081
9119
  className: className,
9082
9120
  "data-testid": "page-heading-wrapper",
9083
9121
  isPageHeadingWithoutTitle: isTitleUnAvailable
9084
- }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
9122
+ }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$3, {
9085
9123
  "data-testid": "page-heading-title",
9086
9124
  isPageHeadingWithoutTitle: isTitleUnAvailable
9087
9125
  }, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
@@ -9106,14 +9144,14 @@ var PageHeading = function PageHeading(_ref) {
9106
9144
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
9107
9145
  };
9108
9146
 
9109
- var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9;
9147
+ var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$n, _templateObject6$j, _templateObject7$d, _templateObject8$9;
9110
9148
  var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__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);
9111
9149
  var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__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);
9112
9150
  var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$A || (_templateObject3$A = /*#__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);
9113
9151
  var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__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);
9114
9152
  var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
9115
- var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__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);
9116
- var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__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);
9153
+ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__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);
9154
+ var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__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);
9117
9155
  var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__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);
9118
9156
 
9119
9157
  var _excluded$l = ["text"];
@@ -9221,7 +9259,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9221
9259
  })))));
9222
9260
  };
9223
9261
 
9224
- var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
9262
+ var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
9225
9263
  var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9226
9264
  var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
9227
9265
  var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__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);
@@ -9233,8 +9271,8 @@ var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$p || (_te
9233
9271
  var showBlock = _ref2.showBlock;
9234
9272
  return showBlock ? 'block' : 'none';
9235
9273
  }, devices.mobile);
9236
- var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
9237
- var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
9274
+ var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
9275
+ var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
9238
9276
  var isBadgePresent = _ref3.isBadgePresent;
9239
9277
  return isBadgePresent ? '1' : '4';
9240
9278
  });
@@ -9243,7 +9281,7 @@ var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$a || (
9243
9281
  return isAdditionalButtonPresent ? '20px' : '0';
9244
9282
  });
9245
9283
  var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
9246
- var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
9284
+ var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
9247
9285
  var theme = _ref5.theme;
9248
9286
  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
9249
9287
  }, devices.mobile, function (_ref6) {
@@ -9397,7 +9435,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9397
9435
  }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
9398
9436
  theme: theme,
9399
9437
  link: additionalLink
9400
- }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
9438
+ }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$4, {
9401
9439
  theme: theme,
9402
9440
  isButtonPresent: !!mainLink || !!additionalLink
9403
9441
  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
@@ -9415,7 +9453,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9415
9453
  theme: theme,
9416
9454
  badge: badge,
9417
9455
  isMobile: isMobile
9418
- }))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
9456
+ }))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$4, {
9419
9457
  theme: theme,
9420
9458
  isButtonPresent: !!mainLink || !!additionalLink
9421
9459
  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
@@ -9435,12 +9473,12 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9435
9473
  })))))))))));
9436
9474
  };
9437
9475
 
9438
- var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject0$6;
9476
+ var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject5$q, _templateObject6$l, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
9439
9477
  var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\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);
9440
9478
  var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__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"])));
9441
9479
  var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
9442
9480
  var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__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);
9443
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$k || (_templateObject6$k = /*#__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 width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
9481
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$l || (_templateObject6$l = /*#__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 width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
9444
9482
  var invert = _ref.invert,
9445
9483
  theme = _ref.theme;
9446
9484
  return invert ? theme.colors.white : theme.colors.primary;
@@ -9456,7 +9494,7 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
9456
9494
  var theme = _ref4.theme;
9457
9495
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
9458
9496
  }, devices.tablet, devices.mobile);
9459
- var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
9497
+ var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
9460
9498
  var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
9461
9499
  var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
9462
9500
  var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$6 || (_templateObject0$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
@@ -9689,21 +9727,21 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9689
9727
  }), linkText))))));
9690
9728
  };
9691
9729
 
9692
- var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
9730
+ var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x, _templateObject5$r, _templateObject6$m, _templateObject7$g;
9693
9731
  // Keep MorePages for Table component until restyle
9694
9732
  var MorePages = /*#__PURE__*/styled__default.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9695
9733
  var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n color: inherit;\n"])));
9696
9734
  var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\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 margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n align-items: center;\n }\n li:first-child {\n margin-left: 0px;\n }\n"])));
9697
9735
  var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9698
9736
  var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9699
- var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
9737
+ var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
9700
9738
  var active = _ref.active;
9701
9739
  return active ? "var(--color-primary-red)" : 'inherit';
9702
9740
  }, function (_ref2) {
9703
9741
  var active = _ref2.active;
9704
9742
  return "1px solid " + (active ? 'var(--color-primary-red)' : 'transparent');
9705
9743
  });
9706
- var PageNav = /*#__PURE__*/styled__default.a(_templateObject7$f || (_templateObject7$f = /*#__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(--color-base-black);\n }\n }\n"])));
9744
+ var PageNav = /*#__PURE__*/styled__default.a(_templateObject7$g || (_templateObject7$g = /*#__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(--color-base-black);\n }\n }\n"])));
9707
9745
 
9708
9746
  var reducePages = function reducePages(pages, currentPage) {
9709
9747
  // If there are less than 6 pages, return all pages
@@ -9772,14 +9810,14 @@ var Pagination = function Pagination(_ref) {
9772
9810
  }))))));
9773
9811
  };
9774
9812
 
9775
- var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$m, _templateObject7$g;
9813
+ var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$n, _templateObject7$h;
9776
9814
  var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__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);
9777
9815
  var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
9778
9816
  var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
9779
9817
  var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9780
9818
  var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9781
- var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$m || (_templateObject6$m = /*#__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"])));
9782
- var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9819
+ var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$n || (_templateObject6$n = /*#__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"])));
9820
+ var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9783
9821
 
9784
9822
  var Person = function Person(_ref) {
9785
9823
  var person = _ref.person,
@@ -9961,7 +9999,7 @@ var CreditListing = function CreditListing(_ref) {
9961
9999
  }, creditEntries);
9962
10000
  };
9963
10001
 
9964
- var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$t, _templateObject6$n, _templateObject7$h, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
10002
+ var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$t, _templateObject6$o, _templateObject7$i, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
9965
10003
  var LENGTH_TEXT = 28;
9966
10004
  var LENGTH_TEXT_TABLET$1 = 12;
9967
10005
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -10008,8 +10046,8 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
10008
10046
  var marginBottom = _ref7.marginBottom;
10009
10047
  return marginBottom + "px";
10010
10048
  });
10011
- var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
10012
- var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10049
+ var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
10050
+ var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10013
10051
  var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
10014
10052
  var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
10015
10053
  var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
@@ -10213,7 +10251,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10213
10251
  }))));
10214
10252
  };
10215
10253
 
10216
- var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i;
10254
+ var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$p, _templateObject7$j;
10217
10255
  var LENGTH_TEXT$2 = 28;
10218
10256
  var LENGTH_TEXT_TABLET$2 = 10;
10219
10257
  var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__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) {
@@ -10233,8 +10271,8 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
10233
10271
  }, devices.mobile);
10234
10272
  var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10235
10273
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10236
- var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
10237
- var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
10274
+ var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
10275
+ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
10238
10276
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
10239
10277
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
10240
10278
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -10667,7 +10705,7 @@ var SectionTitle = function SectionTitle(_ref) {
10667
10705
  }, description)))));
10668
10706
  };
10669
10707
 
10670
- var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10708
+ var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v, _templateObject6$q, _templateObject7$k, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10671
10709
  var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject$1e = /*#__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) {
10672
10710
  var theme = _ref.theme;
10673
10711
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10692,8 +10730,8 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
10692
10730
  title: 'Select Arrow'
10693
10731
  };
10694
10732
  })(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
10695
- var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10696
- var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10733
+ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10734
+ var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10697
10735
  var Options = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10698
10736
  var Option = /*#__PURE__*/styled__default.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10699
10737
  var theme = _ref6.theme,
@@ -11262,13 +11300,13 @@ var Quote = function Quote(_ref) {
11262
11300
  }, attribution))));
11263
11301
  };
11264
11302
 
11265
- var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$w, _templateObject6$q;
11303
+ var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$w, _templateObject6$r;
11266
11304
  var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__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"])));
11267
11305
  var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11268
11306
  var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11269
11307
  var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11270
11308
  var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__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);
11271
- var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__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);
11309
+ var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__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);
11272
11310
 
11273
11311
  var MiniCard = function MiniCard(_ref) {
11274
11312
  var _ref$title = _ref.title,
@@ -11301,7 +11339,7 @@ var MiniCard = function MiniCard(_ref) {
11301
11339
  columnSpanDesktop: 4
11302
11340
  }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
11303
11341
  level: 4
11304
- }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$4, null, /*#__PURE__*/React__default.createElement(Overline, {
11342
+ }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$5, null, /*#__PURE__*/React__default.createElement(Overline, {
11305
11343
  level: 2
11306
11344
  }, title)))));
11307
11345
  };
@@ -11562,7 +11600,7 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
11562
11600
  });
11563
11601
  };
11564
11602
 
11565
- var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$z, _templateObject6$r;
11603
+ var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$z, _templateObject6$s;
11566
11604
  var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11567
11605
  var Sections = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11568
11606
  var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
@@ -11574,7 +11612,7 @@ var Text = /*#__PURE__*/styled__default.div(_templateObject5$z || (_templateObje
11574
11612
  var color = _ref2.color;
11575
11613
  return "var(--base-color-" + color + ")";
11576
11614
  });
11577
- var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
11615
+ var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
11578
11616
  var color = _ref3.color;
11579
11617
  return "var(--base-color-" + color + ")";
11580
11618
  });
@@ -11656,7 +11694,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
11656
11694
  }, strengthLabel))));
11657
11695
  };
11658
11696
 
11659
- var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11697
+ var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$t, _templateObject7$l, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11660
11698
  var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11661
11699
  var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11662
11700
  var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
@@ -11670,8 +11708,8 @@ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$A || (_template
11670
11708
  }, function (props) {
11671
11709
  return "calc(100% / " + (props.columns - 1) + ")";
11672
11710
  }, devices.mobile);
11673
- var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\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: none;\n }\n"])));
11674
- var PageNumber = /*#__PURE__*/styled__default.button(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\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\n /* Active state */\n ", "\n"])), function (_ref) {
11711
+ var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\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: none;\n }\n"])));
11712
+ var PageNumber = /*#__PURE__*/styled__default.button(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\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\n /* Active state */\n ", "\n"])), function (_ref) {
11675
11713
  var active = _ref.active;
11676
11714
  return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11677
11715
  });
@@ -11860,7 +11898,7 @@ var Table = function Table(_ref) {
11860
11898
  }))))))))));
11861
11899
  };
11862
11900
 
11863
- var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$t, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11901
+ var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$u, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11864
11902
  var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
11865
11903
  var theme = _ref.theme;
11866
11904
  return "var(--color-" + theme + ")";
@@ -11872,8 +11910,8 @@ var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 |
11872
11910
  var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
11873
11911
  var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11874
11912
  var Form = /*#__PURE__*/styled__default.form(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error$1);
11875
- var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
11876
- var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11913
+ var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
11914
+ var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11877
11915
  var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11878
11916
  var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
11879
11917
  var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);