@royaloperahouse/harmonic 0.13.2-b → 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.
- package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts +1 -0
- package/dist/harmonic.cjs.development.js +16 -15
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +16 -15
- package/dist/harmonic.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -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>;
|
|
@@ -11177,13 +11177,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
11177
11177
|
}, message))));
|
|
11178
11178
|
};
|
|
11179
11179
|
|
|
11180
|
-
var _templateObject$1i
|
|
11181
|
-
var
|
|
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);
|
|
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);
|
|
11187
11182
|
|
|
11188
11183
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11189
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'] + "\">");
|
|
@@ -11205,7 +11200,7 @@ var BodyContent = function BodyContent(_ref) {
|
|
|
11205
11200
|
_ref$renderGridItem = _ref.renderGridItem,
|
|
11206
11201
|
renderGridItem = _ref$renderGridItem === void 0 ? true : _ref$renderGridItem;
|
|
11207
11202
|
var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
|
|
11208
|
-
var content = /*#__PURE__*/React__default.createElement(TextContainer$
|
|
11203
|
+
var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
|
|
11209
11204
|
tag: "div",
|
|
11210
11205
|
size: "large",
|
|
11211
11206
|
"data-testid": "text-container",
|
|
@@ -11230,6 +11225,12 @@ var BodyContent = function BodyContent(_ref) {
|
|
|
11230
11225
|
}, gridItemOrContent);
|
|
11231
11226
|
};
|
|
11232
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
|
+
|
|
11233
11234
|
var _templateObject$1k;
|
|
11234
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);
|
|
11235
11236
|
|
|
@@ -11280,7 +11281,7 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11280
11281
|
columnSpanSmallDevice: 14
|
|
11281
11282
|
}, /*#__PURE__*/React__default.createElement(UpsellBorderBox, null, /*#__PURE__*/React__default.createElement(TitleContent, {
|
|
11282
11283
|
serif: true
|
|
11283
|
-
}, title), /*#__PURE__*/React__default.createElement(TextContainer$
|
|
11284
|
+
}, title), /*#__PURE__*/React__default.createElement(TextContainer$2, null, /*#__PURE__*/React__default.createElement(TextContent, {
|
|
11284
11285
|
text: richText != null ? richText : '',
|
|
11285
11286
|
columnStartDesktop: 1,
|
|
11286
11287
|
columnSpanDesktop: 14,
|
|
@@ -11326,11 +11327,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
11326
11327
|
}, children)));
|
|
11327
11328
|
};
|
|
11328
11329
|
|
|
11329
|
-
var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$
|
|
11330
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$R, _templateObject4$K;
|
|
11330
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);
|
|
11331
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);
|
|
11332
11333
|
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11333
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
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"])));
|
|
11334
11335
|
|
|
11335
11336
|
var _excluded$p = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
11336
11337
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -11507,7 +11508,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
|
|
|
11507
11508
|
return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
|
|
11508
11509
|
};
|
|
11509
11510
|
|
|
11510
|
-
var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$
|
|
11511
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$S, _templateObject4$L, _templateObject5$C, _templateObject6$s, _templateObject7$m, _templateObject8$g, _templateObject9$a;
|
|
11511
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) {
|
|
11512
11513
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
11513
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 }";
|
|
@@ -11521,7 +11522,7 @@ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$13
|
|
|
11521
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 ";
|
|
11522
11523
|
}, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
|
|
11523
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);
|
|
11524
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
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"])));
|
|
11525
11526
|
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
11526
11527
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
11527
11528
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
@@ -12012,11 +12013,11 @@ var Carousel = function Carousel(_ref) {
|
|
|
12012
12013
|
}, children))));
|
|
12013
12014
|
};
|
|
12014
12015
|
|
|
12015
|
-
var _templateObject$1p, _templateObject2$15, _templateObject3$T, _templateObject4$
|
|
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;
|
|
12016
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);
|
|
12017
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);
|
|
12018
12019
|
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$
|
|
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);
|
|
12020
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);
|
|
12021
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"])));
|
|
12022
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);
|