@royaloperahouse/chord 0.5.8 → 0.5.9
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/CHANGELOG.md +4 -0
- package/dist/chord.cjs.development.js +77 -11
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +77 -11
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +2 -1
- package/dist/types/image.d.ts +23 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -469,7 +469,7 @@ var common = {
|
|
|
469
469
|
gap: '12px'
|
|
470
470
|
},
|
|
471
471
|
tablet: {
|
|
472
|
-
margin: '
|
|
472
|
+
margin: '32px',
|
|
473
473
|
outerMargin: '0',
|
|
474
474
|
gap: '20px'
|
|
475
475
|
},
|
|
@@ -2479,11 +2479,41 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
2479
2479
|
AspectRatio["16:9"] = "16 / 9";
|
|
2480
2480
|
})(exports.AspectRatio || (exports.AspectRatio = {}));
|
|
2481
2481
|
|
|
2482
|
+
var AspectRatioLegacy;
|
|
2483
|
+
|
|
2484
|
+
(function (AspectRatioLegacy) {
|
|
2485
|
+
AspectRatioLegacy["1 / 1"] = "100";
|
|
2486
|
+
AspectRatioLegacy["3 / 4"] = "133";
|
|
2487
|
+
AspectRatioLegacy["4 / 3"] = "75";
|
|
2488
|
+
AspectRatioLegacy["16 / 9"] = "56.25";
|
|
2489
|
+
})(AspectRatioLegacy || (AspectRatioLegacy = {}));
|
|
2490
|
+
|
|
2491
|
+
var AspectRatioWidth;
|
|
2492
|
+
|
|
2493
|
+
(function (AspectRatioWidth) {
|
|
2494
|
+
AspectRatioWidth["1 / 1"] = "1";
|
|
2495
|
+
AspectRatioWidth["3 / 4"] = "0.75";
|
|
2496
|
+
AspectRatioWidth["4 / 3"] = "1.33";
|
|
2497
|
+
AspectRatioWidth["16 / 9"] = "1.78";
|
|
2498
|
+
})(AspectRatioWidth || (AspectRatioWidth = {}));
|
|
2499
|
+
|
|
2482
2500
|
var _templateObject$d;
|
|
2483
|
-
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: ", ";\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n"])), function (_ref) {
|
|
2501
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n position: relative;\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
2484
2502
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2485
2503
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2486
2504
|
return aspectRatio;
|
|
2505
|
+
}, function (_ref2) {
|
|
2506
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
2507
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio;
|
|
2508
|
+
return aspectRatio;
|
|
2509
|
+
}, function (_ref3) {
|
|
2510
|
+
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
2511
|
+
aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
2512
|
+
return AspectRatioLegacy[aspectRatio];
|
|
2513
|
+
}, function (_ref4) {
|
|
2514
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
2515
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
2516
|
+
return aspectRatio;
|
|
2487
2517
|
});
|
|
2488
2518
|
|
|
2489
2519
|
var _templateObject$e, _templateObject2$2;
|
|
@@ -4173,7 +4203,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4173
4203
|
if (window.matchMedia(devices.mobile).matches) {
|
|
4174
4204
|
setSlidesOffsetBefore(20); // Mobile margin grid
|
|
4175
4205
|
} else if (window.matchMedia(devices.tablet).matches) {
|
|
4176
|
-
setSlidesOffsetBefore(
|
|
4206
|
+
setSlidesOffsetBefore(32); // Tablet margin grid
|
|
4177
4207
|
} else {
|
|
4178
4208
|
setSlidesOffsetBefore(Math.floor(window.innerWidth * 0.1) - 3); // 10% of width
|
|
4179
4209
|
}
|
|
@@ -4254,7 +4284,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
4254
4284
|
|
|
4255
4285
|
var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$1;
|
|
4256
4286
|
var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$y || (_templateObject$y = /*#__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(--base-color-black);\n color: var(--base-color-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
4257
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__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 h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 1 / 6;\n padding-top: 32px;\n padding-right: 28px;\n\n h4 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\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: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
|
|
4287
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__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 h4 {\n margin: 0;\n padding: 0;\n }\n\n h5 {\n display: none;\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 1 / 6;\n padding-top: 32px;\n padding-right: 28px;\n padding-left: 32px;\n\n h4 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\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: var(--line-height-altHeader-5);\n\n h4 {\n display: none;\n }\n\n h5 {\n margin: 0;\n padding: 0;\n display: block;\n }\n }\n }\n"])), devices.tablet, function (_ref) {
|
|
4258
4288
|
var theme = _ref.theme;
|
|
4259
4289
|
return theme.fonts.mobile.sizes.altHeaders[4];
|
|
4260
4290
|
}, function (_ref2) {
|
|
@@ -4267,7 +4297,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i |
|
|
|
4267
4297
|
var theme = _ref4.theme;
|
|
4268
4298
|
return theme.fonts.mobile.lineHeights.altHeaders[4];
|
|
4269
4299
|
}, devices.mobile);
|
|
4270
|
-
var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__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 / 6;\n padding: 28px 28px 28px
|
|
4300
|
+
var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__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 / 6;\n padding: 28px 28px 28px 32px;\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);
|
|
4271
4301
|
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.mobile);
|
|
4272
4302
|
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h3 {\n padding: 0;\n margin: 0 0 8px 0;\n }\n\n h6 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n h3 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n\n h6 {\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n }\n }\n }\n"])), devices.tablet, function (_ref5) {
|
|
4273
4303
|
var theme = _ref5.theme;
|
|
@@ -4320,8 +4350,8 @@ var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_t
|
|
|
4320
4350
|
return theme.fonts.mobile.lineHeights.body[1];
|
|
4321
4351
|
}, devices.mobile);
|
|
4322
4352
|
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n"])));
|
|
4323
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-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: 1 / 6 / 3 / 15;\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4324
|
-
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__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.mobile);
|
|
4353
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swiper-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: 1 / 6 / 3 / 15;\n\n .swiper-slide {\n width: calc(100% - 32px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4354
|
+
var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__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 right: 32px;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4325
4355
|
var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
|
|
4326
4356
|
|
|
4327
4357
|
var _excluded$8 = ["text"];
|
|
@@ -4885,7 +4915,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
4885
4915
|
};
|
|
4886
4916
|
|
|
4887
4917
|
var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
|
|
4888
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
4918
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n background-image: url('", "');\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n display: flex;\n align-items: center;\n\n ::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--base-color-black);\n filter: opacity(40%);\n z-index: ", ";\n }\n\n @media ", " {\n & {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n background-image: url('", "');\n background-position: center;\n display: flex;\n align-items: start;\n }\n }\n"])), function (_ref) {
|
|
4889
4919
|
var bgUrlDesktop = _ref.bgUrlDesktop;
|
|
4890
4920
|
return bgUrlDesktop;
|
|
4891
4921
|
}, zIndexes.content, devices.mobile, function (_ref2) {
|
|
@@ -4894,7 +4924,7 @@ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_temp
|
|
|
4894
4924
|
return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
|
|
4895
4925
|
});
|
|
4896
4926
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 . . . . . .'\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 . . . .'\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 & {\n grid-template-areas:\n '. . . . . 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 . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
4897
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__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.contentOverlay, devices.
|
|
4927
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__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.contentOverlay, devices.mobileAndTablet);
|
|
4898
4928
|
var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
4899
4929
|
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__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(3 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(3 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-5);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
4900
4930
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__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: 0;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
@@ -5171,14 +5201,50 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
5171
5201
|
};
|
|
5172
5202
|
|
|
5173
5203
|
var _templateObject$M, _templateObject2$s;
|
|
5174
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n }\n"])), ImageAspectRatioWrapper)
|
|
5204
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
5205
|
+
var _ref$aspectRatio = _ref.aspectRatio,
|
|
5206
|
+
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
5207
|
+
return aspectRatio;
|
|
5208
|
+
}, function (_ref2) {
|
|
5209
|
+
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
5210
|
+
aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
|
|
5211
|
+
height = _ref2.height;
|
|
5212
|
+
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
5213
|
+
});
|
|
5175
5214
|
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
5176
5215
|
|
|
5177
5216
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
5178
5217
|
var caption = _ref.caption,
|
|
5179
5218
|
children = _ref.children,
|
|
5180
5219
|
aspectRatio = _ref.aspectRatio;
|
|
5181
|
-
|
|
5220
|
+
var wrapperRef = React.useRef(null);
|
|
5221
|
+
|
|
5222
|
+
var _useState = React.useState(0),
|
|
5223
|
+
height = _useState[0],
|
|
5224
|
+
setHeight = _useState[1];
|
|
5225
|
+
|
|
5226
|
+
React.useEffect(function () {
|
|
5227
|
+
var setWrapperHeight = function setWrapperHeight() {
|
|
5228
|
+
var _wrapperRef$current;
|
|
5229
|
+
|
|
5230
|
+
return setHeight((wrapperRef == null ? void 0 : (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
|
|
5231
|
+
};
|
|
5232
|
+
|
|
5233
|
+
window.addEventListener('resize', setWrapperHeight);
|
|
5234
|
+
|
|
5235
|
+
if (wrapperRef) {
|
|
5236
|
+
setWrapperHeight();
|
|
5237
|
+
}
|
|
5238
|
+
|
|
5239
|
+
return function () {
|
|
5240
|
+
return window.removeEventListener('resize', setWrapperHeight);
|
|
5241
|
+
};
|
|
5242
|
+
}, [wrapperRef]);
|
|
5243
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
5244
|
+
aspectRatio: aspectRatio,
|
|
5245
|
+
ref: wrapperRef,
|
|
5246
|
+
height: height
|
|
5247
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
5182
5248
|
aspectRatio: aspectRatio
|
|
5183
5249
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
5184
5250
|
};
|