@royaloperahouse/harmonic 0.13.2-a → 0.13.2-c

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 (9) hide show
  1. package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts +1 -0
  2. package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts +1 -0
  3. package/dist/harmonic.cjs.development.js +32 -29
  4. package/dist/harmonic.cjs.development.js.map +1 -1
  5. package/dist/harmonic.cjs.production.min.js +1 -1
  6. package/dist/harmonic.cjs.production.min.js.map +1 -1
  7. package/dist/harmonic.esm.js +32 -29
  8. package/dist/harmonic.esm.js.map +1 -1
  9. package/package.json +1 -1
package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare const ButtonContainer: import("styled-components").StyledComponen
5
5
  stackCtasEarly: boolean;
6
6
  }, never>;
7
7
  export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const DescriptionWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
8
9
  export declare const PriceRow: import("styled-components").StyledComponent<"div", any, {}, never>;
9
10
  export declare const LineThrough: import("styled-components").StyledComponent<({ children, size, em, color, serif, hierarchy, tag, className, ...props }: import("../../../types/typography").HarmonicHeaderProps) => import("react").DOMElement<{
10
11
  defaultChecked?: boolean | undefined;
package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts CHANGED
@@ -271,3 +271,4 @@ export declare const TitleContent: import("styled-components").StyledComponent<(
271
271
  onTransitionEndCapture?: ((event: import("react").TransitionEvent<HTMLElement>) => void) | undefined;
272
272
  }, Element>, any, {}, never>;
273
273
  export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
274
+ export declare const TextContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/types").IBodyContentProps>, any, {}, never>;
package/dist/harmonic.cjs.development.js CHANGED
@@ -9252,7 +9252,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
9252
9252
  })));
9253
9253
  };
9254
9254
 
9255
- var _templateObject$15, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h;
9255
+ var _templateObject$15, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b;
9256
9256
  var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
9257
9257
  var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-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\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
9258
9258
  var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\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\n @media ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
@@ -9263,8 +9263,9 @@ var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_t
9263
9263
  return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
9264
9264
  }, devices.mobileAndTablet);
9265
9265
  var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: 10px;\n align-items: stretch;\n"])));
9266
- var PriceRow = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
9267
- var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
9266
+ var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
9267
+ var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
9268
+ var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
9268
9269
 
9269
9270
  // Set max. character length
9270
9271
  var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -9283,7 +9284,8 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(string) {
9283
9284
  var OfferText = function OfferText(_ref) {
9284
9285
  var title = _ref.title,
9285
9286
  description = _ref.description;
9286
- return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
9287
+ return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, null, title), description && /*#__PURE__*/React__default.createElement(DescriptionWrapper$1, {
9288
+ tag: "div",
9287
9289
  size: "large",
9288
9290
  dangerouslySetInnerHTML: {
9289
9291
  __html: description
@@ -9844,7 +9846,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
9844
9846
  }, strengthLabel))));
9845
9847
  };
9846
9848
 
9847
- var _templateObject$1b, _templateObject2$V, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$b;
9849
+ var _templateObject$1b, _templateObject2$V, _templateObject3$L, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
9848
9850
  var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
9849
9851
  var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
9850
9852
  var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
@@ -9856,7 +9858,7 @@ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_template
9856
9858
  }, devices.mobile);
9857
9859
  var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
9858
9860
  var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
9859
- var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
9861
+ var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
9860
9862
 
9861
9863
  /* eslint-disable react/no-danger */
9862
9864
  var Content = function Content(_ref) {
@@ -10059,7 +10061,7 @@ var Table = function Table(_ref) {
10059
10061
  }))));
10060
10062
  };
10061
10063
 
10062
- var _templateObject$1c, _templateObject2$W, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
10064
+ var _templateObject$1c, _templateObject2$W, _templateObject3$M, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
10063
10065
  var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10064
10066
  var theme = _ref.theme;
10065
10067
  return "var(--color-" + theme + ")";
@@ -10073,7 +10075,7 @@ var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObj
10073
10075
  var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__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);
10074
10076
  var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__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);
10075
10077
  var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
10076
- var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10078
+ var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10077
10079
  var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__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);
10078
10080
  var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__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);
10079
10081
  var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
@@ -10834,7 +10836,7 @@ var Footer = function Footer(_ref) {
10834
10836
  }, additionalInfo))));
10835
10837
  };
10836
10838
 
10837
- var _templateObject$1g, _templateObject2$_, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject8$d, _templateObject9$8, _templateObject0$8;
10839
+ var _templateObject$1g, _templateObject2$_, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject8$e, _templateObject9$8, _templateObject0$8;
10838
10840
  var LIST_ITEM_GAP = 32;
10839
10841
  var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
10840
10842
  var bottomBorder = _ref.bottomBorder;
@@ -10856,7 +10858,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$B || (_templateO
10856
10858
  hasTwoArrows = _ref5.hasTwoArrows;
10857
10859
  return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
10858
10860
  });
10859
- var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
10861
+ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
10860
10862
  var withShadow = _ref7.withShadow;
10861
10863
  return withShadow && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
10862
10864
  });
@@ -11115,7 +11117,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
11115
11117
  })))) : null))));
11116
11118
  };
11117
11119
 
11118
- var _templateObject$1h, _templateObject2$$, _templateObject3$P, _templateObject4$I, _templateObject6$r, _templateObject7$l, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11120
+ var _templateObject$1h, _templateObject2$$, _templateObject3$P, _templateObject4$I, _templateObject6$r, _templateObject7$l, _templateObject8$f, _templateObject9$9, _templateObject0$9;
11119
11121
  var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
11120
11122
  var sticky = _ref.sticky;
11121
11123
  return sticky ? 'sticky' : 'initial';
@@ -11128,7 +11130,7 @@ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$P || (_
11128
11130
  var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
11129
11131
  var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
11130
11132
  var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
11131
- var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
11133
+ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
11132
11134
  var theme = _ref3.theme;
11133
11135
  return theme.colors.primaryButtonReverseBg;
11134
11136
  }, function (_ref4) {
@@ -11175,13 +11177,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
11175
11177
  }, message))));
11176
11178
  };
11177
11179
 
11178
- var _templateObject$1i, _templateObject2$10, _templateObject3$Q;
11179
- var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
11180
- var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
11181
- var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
11182
-
11183
- var _templateObject$1j;
11184
- var TextContainer$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n cursor: pointer;\n text-underline-offset: 4px;\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
11180
+ var _templateObject$1i;
11181
+ var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n cursor: pointer;\n text-underline-offset: 4px;\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
11185
11182
 
11186
11183
  var addTypographyClasses = function addTypographyClasses(html) {
11187
11184
  return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
@@ -11203,7 +11200,7 @@ var BodyContent = function BodyContent(_ref) {
11203
11200
  _ref$renderGridItem = _ref.renderGridItem,
11204
11201
  renderGridItem = _ref$renderGridItem === void 0 ? true : _ref$renderGridItem;
11205
11202
  var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
11206
- var content = /*#__PURE__*/React__default.createElement(TextContainer$2, {
11203
+ var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
11207
11204
  tag: "div",
11208
11205
  size: "large",
11209
11206
  "data-testid": "text-container",
@@ -11228,6 +11225,12 @@ var BodyContent = function BodyContent(_ref) {
11228
11225
  }, gridItemOrContent);
11229
11226
  };
11230
11227
 
11228
+ var _templateObject$1j, _templateObject2$10, _templateObject3$Q, _templateObject4$J;
11229
+ var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
11230
+ var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
11231
+ var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
11232
+ var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])));
11233
+
11231
11234
  var _templateObject$1k;
11232
11235
  var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
11233
11236
 
@@ -11278,7 +11281,7 @@ var UpsellSection = function UpsellSection(_ref) {
11278
11281
  columnSpanSmallDevice: 14
11279
11282
  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
11280
11283
  serif: true
11281
- }, title), /*#__PURE__*/React__default.createElement(TextContainer$1, null, /*#__PURE__*/React__default.createElement(BodyContent, {
11284
+ }, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
11282
11285
  text: richText != null ? richText : '',
11283
11286
  columnStartDesktop: 1,
11284
11287
  columnSpanDesktop: 14,
@@ -11324,11 +11327,11 @@ var StickyBar = function StickyBar(_ref) {
11324
11327
  }, children)));
11325
11328
  };
11326
11329
 
11327
- var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$J;
11330
+ var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$K;
11328
11331
  var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
11329
11332
  var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
11330
11333
  var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11331
- var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
11334
+ var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
11332
11335
 
11333
11336
  var _excluded$p = ["isOpen", "setIsOpen", "children", "appElementId"];
11334
11337
  var MAX_Z_INDEX = 9999999999;
@@ -11505,7 +11508,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
11505
11508
  return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
11506
11509
  };
11507
11510
 
11508
- var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$K, _templateObject5$C, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a;
11511
+ var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$L, _templateObject5$C, _templateObject6$s, _templateObject7$m, _templateObject8$g, _templateObject9$a;
11509
11512
  var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n \n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n }\n }\n"])), function (_ref) {
11510
11513
  var imagesHeightDesktop = _ref.imagesHeightDesktop;
11511
11514
  return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n " + getImageSlideStyles(imagesHeightDesktop) + "\n }\n }\n }";
@@ -11519,14 +11522,14 @@ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$13
11519
11522
  return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n width: " + (type === exports.CarouselType.SmallCard ? '30%' : '40%') + ";\n }\n }\n }\n ";
11520
11523
  }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
11521
11524
  var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
11522
- var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
11525
+ var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
11523
11526
  var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
11524
11527
  var isDescriptionPresent = _ref4.isDescriptionPresent;
11525
11528
  return isDescriptionPresent && 'margin: 20px 0';
11526
11529
  });
11527
11530
  var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n"])));
11528
11531
  var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
11529
- var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
11532
+ var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
11530
11533
  var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
11531
11534
  var active = _ref5.active;
11532
11535
  return active ? 'grid-column: 1 / span 16' : '';
@@ -12010,15 +12013,15 @@ var Carousel = function Carousel(_ref) {
12010
12013
  }, children))));
12011
12014
  };
12012
12015
 
12013
- var _templateObject$1p, _templateObject2$15, _templateObject3$T, _templateObject4$L, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1;
12016
+ var _templateObject$1p, _templateObject2$15, _templateObject3$T, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1;
12014
12017
  var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
12015
12018
  var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
12016
12019
  var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12017
- var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
12020
+ var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
12018
12021
  var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
12019
12022
  var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
12020
12023
  var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
12021
- var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
12024
+ var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
12022
12025
  var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
12023
12026
  var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
12024
12027
  var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);