@royaloperahouse/harmonic 0.13.2-b → 0.13.2-d

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 +3 -1
  2. package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts +1 -0
  3. package/dist/harmonic.cjs.development.js +29 -24
  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 +29 -24
  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
@@ -4,7 +4,9 @@ export declare const PromoLabel: import("styled-components").StyledComponent<imp
4
4
  export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {
5
5
  stackCtasEarly: boolean;
6
6
  }, never>;
7
- export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {
8
+ singleChild?: boolean | undefined;
9
+ }, never>;
8
10
  export declare const DescriptionWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../types/typography").ITaggedTypographyProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
9
11
  export declare const PriceRow: import("styled-components").StyledComponent<"div", any, {}, never>;
10
12
  export declare const LineThrough: import("styled-components").StyledComponent<({ children, size, em, color, serif, hierarchy, tag, className, ...props }: import("../../../types/typography").HarmonicHeaderProps) => import("react").DOMElement<{
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
@@ -9255,14 +9255,17 @@ var SelectComponent$1 = function SelectComponent(_ref) {
9255
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
- 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) {
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) {
9259
9259
  var stackCtasEarly = _ref.stackCtasEarly;
9260
9260
  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
9261
9261
  }, function (_ref2) {
9262
9262
  var stackCtasEarly = _ref2.stackCtasEarly;
9263
9263
  return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
9264
- }, devices.mobileAndTablet);
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"])));
9264
+ }, devices.smallDesktop, devices.mobileAndTablet);
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: ", ";\n align-items: stretch;\n"])), function (_ref3) {
9266
+ var singleChild = _ref3.singleChild;
9267
+ return singleChild ? '0' : '10px';
9268
+ });
9266
9269
  var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
9267
9270
  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
9271
  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"])));
@@ -9321,13 +9324,14 @@ var UpsellCard = function UpsellCard(_ref) {
9321
9324
  }, /*#__PURE__*/React__default.createElement(Wrapper$6, null, flag && (/*#__PURE__*/React__default.createElement(PromoLabel, {
9322
9325
  tag: "div",
9323
9326
  size: "small"
9324
- }, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9327
+ }, setMaxCharLength(flag, FLAG_CHAR_LIMIT))), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
9328
+ singleChild: !subTitle && !promoPrice && !price
9329
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9325
9330
  tag: "div",
9326
- size: "small",
9327
- serif: true
9331
+ size: "small"
9328
9332
  }, title), subTitle && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
9329
9333
  size: "large"
9330
- }, subTitle), promoPrice ? (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(LineThrough, {
9334
+ }, subTitle), (price || promoPrice) && (/*#__PURE__*/React__default.createElement(PriceRow, null, promoPrice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LineThrough, {
9331
9335
  tag: "p",
9332
9336
  size: "small",
9333
9337
  serif: true
@@ -9335,11 +9339,11 @@ var UpsellCard = function UpsellCard(_ref) {
9335
9339
  tag: "p",
9336
9340
  size: "small",
9337
9341
  serif: true
9338
- }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9342
+ }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
9339
9343
  tag: "p",
9340
9344
  size: "small",
9341
9345
  serif: true
9342
- }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
9346
+ }, formatPrice(price)))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
9343
9347
  return /*#__PURE__*/React__default.createElement(OfferText, {
9344
9348
  key: "offer-" + index,
9345
9349
  title: offerText.title,
@@ -11177,13 +11181,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
11177
11181
  }, message))));
11178
11182
  };
11179
11183
 
11180
- var _templateObject$1i, _templateObject2$10, _templateObject3$Q;
11181
- 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);
11182
- 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);
11183
- 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);
11184
-
11185
- var _templateObject$1j;
11186
- 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);
11184
+ var _templateObject$1i;
11185
+ 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);
11187
11186
 
11188
11187
  var addTypographyClasses = function addTypographyClasses(html) {
11189
11188
  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'] + "\">");
@@ -11205,7 +11204,7 @@ var BodyContent = function BodyContent(_ref) {
11205
11204
  _ref$renderGridItem = _ref.renderGridItem,
11206
11205
  renderGridItem = _ref$renderGridItem === void 0 ? true : _ref$renderGridItem;
11207
11206
  var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
11208
- var content = /*#__PURE__*/React__default.createElement(TextContainer$2, {
11207
+ var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
11209
11208
  tag: "div",
11210
11209
  size: "large",
11211
11210
  "data-testid": "text-container",
@@ -11230,6 +11229,12 @@ var BodyContent = function BodyContent(_ref) {
11230
11229
  }, gridItemOrContent);
11231
11230
  };
11232
11231
 
11232
+ var _templateObject$1j, _templateObject2$10, _templateObject3$Q, _templateObject4$J;
11233
+ 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);
11234
+ 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);
11235
+ 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);
11236
+ 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 @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
11237
+
11233
11238
  var _templateObject$1k;
11234
11239
  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);
11235
11240
 
@@ -11280,7 +11285,7 @@ var UpsellSection = function UpsellSection(_ref) {
11280
11285
  columnSpanSmallDevice: 14
11281
11286
  }, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
11282
11287
  serif: true
11283
- }, title), /*#__PURE__*/React__default.createElement(TextContainer$1, null, /*#__PURE__*/React__default.createElement(BodyContent, {
11288
+ }, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
11284
11289
  text: richText != null ? richText : '',
11285
11290
  columnStartDesktop: 1,
11286
11291
  columnSpanDesktop: 14,
@@ -11326,11 +11331,11 @@ var StickyBar = function StickyBar(_ref) {
11326
11331
  }, children)));
11327
11332
  };
11328
11333
 
11329
- var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$J;
11334
+ var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$K;
11330
11335
  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);
11331
11336
  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);
11332
11337
  var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11333
- 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"])));
11338
+ 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"])));
11334
11339
 
11335
11340
  var _excluded$p = ["isOpen", "setIsOpen", "children", "appElementId"];
11336
11341
  var MAX_Z_INDEX = 9999999999;
@@ -11507,7 +11512,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
11507
11512
  return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
11508
11513
  };
11509
11514
 
11510
- var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$K, _templateObject5$C, _templateObject6$s, _templateObject7$m, _templateObject8$g, _templateObject9$a;
11515
+ var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$L, _templateObject5$C, _templateObject6$s, _templateObject7$m, _templateObject8$g, _templateObject9$a;
11511
11516
  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) {
11512
11517
  var imagesHeightDesktop = _ref.imagesHeightDesktop;
11513
11518
  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 }";
@@ -11521,7 +11526,7 @@ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$13
11521
11526
  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 ";
11522
11527
  }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
11523
11528
  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);
11524
- 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"])));
11529
+ 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"])));
11525
11530
  var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
11526
11531
  var isDescriptionPresent = _ref4.isDescriptionPresent;
11527
11532
  return isDescriptionPresent && 'margin: 20px 0';
@@ -12012,11 +12017,11 @@ var Carousel = function Carousel(_ref) {
12012
12017
  }, children))));
12013
12018
  };
12014
12019
 
12015
- var _templateObject$1p, _templateObject2$15, _templateObject3$T, _templateObject4$L, _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;
12020
+ 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;
12016
12021
  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);
12017
12022
  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);
12018
12023
  var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12019
- 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);
12024
+ 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);
12020
12025
  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);
12021
12026
  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"])));
12022
12027
  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);