@royaloperahouse/harmonic 0.17.2-a → 0.17.2-b
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 +6 -0
- package/dist/components/atoms/Person/Person.style.d.ts +2 -0
- package/dist/components/atoms/Person/index.d.ts +2 -0
- package/dist/components/atoms/RotatorButtons/RotatorButtons.d.ts +1 -1
- package/dist/components/atoms/RotatorButtons/RotatorButtons.style.d.ts +8 -3
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +0 -6
- package/dist/components/molecules/PeopleListing/fixtures.d.ts +4 -0
- package/dist/components/molecules/PersonCard/PersonCard.d.ts +4 -0
- package/dist/components/molecules/PersonCard/PersonCard.style.d.ts +2 -0
- package/dist/components/molecules/PersonCard/index.d.ts +2 -0
- package/dist/components/molecules/PersonDetails/PersonDetails.d.ts +4 -0
- package/dist/components/molecules/PersonDetails/PersonDetails.style.d.ts +2 -0
- package/dist/components/molecules/PersonDetails/index.d.ts +2 -0
- package/dist/components/molecules/Swipe/Swipe.d.ts +3 -0
- package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts +1 -0
- package/dist/components/organisms/AnchorTabBar/AnchorTabBar.style.d.ts +1 -1
- package/dist/components/organisms/Carousels/Carousel/helper.d.ts +2 -2
- package/dist/harmonic.cjs.development.css +5 -4
- package/dist/harmonic.cjs.development.js +470 -248
- 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 +472 -251
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/types/buttonTypes.d.ts +3 -0
- package/dist/types/card.d.ts +7 -0
- package/dist/types/carousel.d.ts +2 -1
- package/package.json +1 -1
- /package/dist/components/{molecules/PeopleListing → atoms/Person}/Person.d.ts +0 -0
|
@@ -3080,11 +3080,18 @@ var ImageAspectRatioWrapper = /*#__PURE__*/React__default.forwardRef(function (_
|
|
|
3080
3080
|
aspectRatio: aspectRatio
|
|
3081
3081
|
}, restProps), React__default.Children.map(children, function (child) {
|
|
3082
3082
|
if (/*#__PURE__*/React__default.isValidElement(child)) {
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
}
|
|
3083
|
+
var finalAlt = alt || child.props.alt || '';
|
|
3084
|
+
var childProps = child.props || {};
|
|
3085
|
+
var clonedProps = {
|
|
3086
|
+
alt: finalAlt
|
|
3087
|
+
};
|
|
3088
|
+
// Only add role="presentation" for decorative images (empty alt)
|
|
3089
|
+
// Don't set role="img" - img elements already have that implicit role
|
|
3090
|
+
// Respect explicit accessibility attributes set by child/parent
|
|
3091
|
+
if (finalAlt === '' && !childProps.role && !childProps['aria-hidden']) {
|
|
3092
|
+
clonedProps.role = 'presentation';
|
|
3093
|
+
}
|
|
3094
|
+
return /*#__PURE__*/React__default.cloneElement(child, clonedProps);
|
|
3088
3095
|
}
|
|
3089
3096
|
return child;
|
|
3090
3097
|
}));
|
|
@@ -3447,7 +3454,19 @@ var Radio2 = /*#__PURE__*/React.forwardRef(Radio2Component);
|
|
|
3447
3454
|
|
|
3448
3455
|
var _templateObject$f, _templateObject2$9, _templateObject3$5, _templateObject4$3, _templateObject5$2;
|
|
3449
3456
|
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3450
|
-
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width:
|
|
3457
|
+
var BaseIconWrapper = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n\n width: ", ";\n height: ", ";\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_ref) {
|
|
3458
|
+
var size = _ref.size;
|
|
3459
|
+
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3460
|
+
}, function (_ref2) {
|
|
3461
|
+
var size = _ref2.size;
|
|
3462
|
+
return size === 'small' ? 'var(--rotator-button-small-width)' : 'var(--rotator-button-width)';
|
|
3463
|
+
}, function (_ref3) {
|
|
3464
|
+
var size = _ref3.size;
|
|
3465
|
+
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3466
|
+
}, function (_ref4) {
|
|
3467
|
+
var size = _ref4.size;
|
|
3468
|
+
return size === 'small' ? 'var(--rotator-button-small-icon-width)' : 'var(--rotator-button-icon-width)';
|
|
3469
|
+
});
|
|
3451
3470
|
var IconWrapper$1 = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--rotator-button-bg-color);\n color: var(--rotator-button-color);\n\n svg path {\n fill: var(--rotator-button-color);\n }\n\n :hover {\n cursor: pointer;\n background-color: var(--rotator-button-hover-bg-color);\n\n && svg path {\n fill: var(--rotator-button-hover-color);\n }\n }\n"])));
|
|
3452
3471
|
var IconUnavailableWrapper = /*#__PURE__*/styled__default(BaseIconWrapper)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-state-disabled);\n color: var(--color-primary-black);\n opacity: 0.2;\n\n svg path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n pointer-events: none;\n }\n"])), devices.mobile);
|
|
3453
3472
|
var FullscreenIconWrapper = /*#__PURE__*/styled__default(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 20px;\n"])));
|
|
@@ -3544,6 +3563,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3544
3563
|
onClickFullscreen = _ref.onClickFullscreen,
|
|
3545
3564
|
_ref$isFullscreen = _ref.isFullscreen,
|
|
3546
3565
|
isFullscreen = _ref$isFullscreen === void 0 ? false : _ref$isFullscreen,
|
|
3566
|
+
_ref$size = _ref.size,
|
|
3567
|
+
size = _ref$size === void 0 ? 'default' : _ref$size,
|
|
3547
3568
|
className = _ref.className;
|
|
3548
3569
|
var _useViewport = useViewport(),
|
|
3549
3570
|
isMobile = _useViewport.isMobile,
|
|
@@ -3601,6 +3622,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3601
3622
|
return /*#__PURE__*/React__default.createElement(ButtonsContainer, {
|
|
3602
3623
|
className: className
|
|
3603
3624
|
}, availablePrev ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3625
|
+
size: size,
|
|
3604
3626
|
onClick: onClickLeftHandler,
|
|
3605
3627
|
onKeyDown: onPrevKeyDownHandler,
|
|
3606
3628
|
tabIndex: 0,
|
|
@@ -3609,8 +3631,10 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3609
3631
|
"aria-label": "Previous slide",
|
|
3610
3632
|
role: "button"
|
|
3611
3633
|
}, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3634
|
+
size: size,
|
|
3612
3635
|
"data-testid": "iconprevnoavailable"
|
|
3613
3636
|
}, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
|
|
3637
|
+
size: size,
|
|
3614
3638
|
onClick: onClickRightHandler,
|
|
3615
3639
|
onKeyDown: onNextKeyDownHandler,
|
|
3616
3640
|
tabIndex: 0,
|
|
@@ -3619,8 +3643,10 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3619
3643
|
"aria-label": "Next slide",
|
|
3620
3644
|
role: "button"
|
|
3621
3645
|
}, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
|
|
3646
|
+
size: size,
|
|
3622
3647
|
"data-testid": "iconnextnoavailable"
|
|
3623
3648
|
}, renderNextIcon())), showFullscreen && !isMobile && !isTablet && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
|
|
3649
|
+
size: size,
|
|
3624
3650
|
onClick: onClickFullscreenHandler,
|
|
3625
3651
|
onKeyDown: onFullscreenKeyDownHandler,
|
|
3626
3652
|
tabIndex: 0,
|
|
@@ -6498,6 +6524,7 @@ var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateOb
|
|
|
6498
6524
|
CarouselType["Image"] = "image";
|
|
6499
6525
|
CarouselType["SmallCard"] = "SmallCard";
|
|
6500
6526
|
CarouselType["LargeCard"] = "LargeCard";
|
|
6527
|
+
CarouselType["PersonCard"] = "PersonCard";
|
|
6501
6528
|
})(exports.CarouselType || (exports.CarouselType = {}));
|
|
6502
6529
|
|
|
6503
6530
|
var clickHandler = function clickHandler(link) {
|
|
@@ -7707,13 +7734,12 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
|
|
|
7707
7734
|
return movedSlides;
|
|
7708
7735
|
};
|
|
7709
7736
|
|
|
7710
|
-
var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange"];
|
|
7737
|
+
var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
|
|
7711
7738
|
var MAX_CLONES_NUMBER = 6;
|
|
7712
7739
|
var CLICK_DRAG_THRESHOLD = 10;
|
|
7713
7740
|
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
7714
7741
|
if (!infinite) return 0;
|
|
7715
|
-
|
|
7716
|
-
return childrenLength;
|
|
7742
|
+
return Math.min(childrenLength, MAX_CLONES_NUMBER);
|
|
7717
7743
|
};
|
|
7718
7744
|
var getSlidedWidth = function getSlidedWidth(slide) {
|
|
7719
7745
|
if (!slide) return 0;
|
|
@@ -7732,6 +7758,7 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7732
7758
|
_ref$slidesAriaHidden = _ref.slidesAriaHidden,
|
|
7733
7759
|
slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
|
|
7734
7760
|
onActiveChange = _ref.onActiveChange,
|
|
7761
|
+
onOverflowChange = _ref.onOverflowChange,
|
|
7735
7762
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
|
|
7736
7763
|
var containerRef = React.useRef(null);
|
|
7737
7764
|
var childRefs = React.useRef([]);
|
|
@@ -7793,8 +7820,18 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7793
7820
|
}
|
|
7794
7821
|
}, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
|
|
7795
7822
|
var updateDimensions = React.useCallback(function () {
|
|
7796
|
-
|
|
7797
|
-
|
|
7823
|
+
var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
|
|
7824
|
+
var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
|
|
7825
|
+
setContainerWidth(cw);
|
|
7826
|
+
setSlideWidths(widths);
|
|
7827
|
+
if (!infinite) {
|
|
7828
|
+
var totalWidth = widths.reduce(function (acc, w) {
|
|
7829
|
+
return acc + w;
|
|
7830
|
+
}, 0);
|
|
7831
|
+
var visibleSpace = cw - (slidesOffsetBefore || 0);
|
|
7832
|
+
var overflow = totalWidth > Math.max(0, visibleSpace);
|
|
7833
|
+
onOverflowChange == null || onOverflowChange(overflow);
|
|
7834
|
+
}
|
|
7798
7835
|
}, []);
|
|
7799
7836
|
React.useEffect(function () {
|
|
7800
7837
|
var animationFrameRequestId = requestAnimationFrame(updateDimensions);
|
|
@@ -7816,10 +7853,16 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7816
7853
|
}
|
|
7817
7854
|
};
|
|
7818
7855
|
var getTranslateX = function getTranslateX() {
|
|
7819
|
-
var
|
|
7856
|
+
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
|
|
7857
|
+
return acc + width;
|
|
7858
|
+
}, 0);
|
|
7859
|
+
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
7860
|
+
};
|
|
7861
|
+
var getTranslateForIndex = function getTranslateForIndex(index) {
|
|
7862
|
+
var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
|
|
7820
7863
|
return acc + width;
|
|
7821
7864
|
}, 0);
|
|
7822
|
-
return
|
|
7865
|
+
return (slidesOffsetBefore || 0) - widthsBefore;
|
|
7823
7866
|
};
|
|
7824
7867
|
var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
|
|
7825
7868
|
var delta = currentTranslate.current - getTranslateX();
|
|
@@ -7829,6 +7872,10 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7829
7872
|
movedSlides = Math.max(1, movedSlides);
|
|
7830
7873
|
var targetIndex = currentIndex + direction * movedSlides;
|
|
7831
7874
|
var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
|
|
7875
|
+
if (!infinite) {
|
|
7876
|
+
currentTranslate.current = getTranslateForIndex(finalIndex);
|
|
7877
|
+
setDragTranslateX(null);
|
|
7878
|
+
}
|
|
7832
7879
|
setTransitioning(true);
|
|
7833
7880
|
setCurrentIndex(finalIndex);
|
|
7834
7881
|
} else {
|
|
@@ -7840,10 +7887,26 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7840
7887
|
setDragTranslateX(null);
|
|
7841
7888
|
};
|
|
7842
7889
|
var canMoveNext = function canMoveNext() {
|
|
7843
|
-
|
|
7844
|
-
|
|
7890
|
+
if (infinite) return true;
|
|
7891
|
+
if (slideWidths.length === 0 || containerWidth === 0) return false;
|
|
7892
|
+
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
7893
|
+
return acc + w;
|
|
7894
|
+
}, 0);
|
|
7895
|
+
var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
|
|
7896
|
+
return acc + w;
|
|
7845
7897
|
}, 0);
|
|
7846
|
-
|
|
7898
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
7899
|
+
var remainingToRight = totalWidth - widthsBefore - visibleSpace;
|
|
7900
|
+
var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
7901
|
+
var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
|
|
7902
|
+
var nextIndex = lastVisibleIndex + 1;
|
|
7903
|
+
if (nextIndex >= slideWidths.length) return false;
|
|
7904
|
+
var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
|
|
7905
|
+
if (nextSlideWidth === 0) return false;
|
|
7906
|
+
var EPS = 1; // pixel tolerance
|
|
7907
|
+
// full next slide fits
|
|
7908
|
+
if (remainingToRight + EPS >= nextSlideWidth) return true;
|
|
7909
|
+
return remainingToRight > 0;
|
|
7847
7910
|
};
|
|
7848
7911
|
var handleTransitionEnd = function handleTransitionEnd() {
|
|
7849
7912
|
setTransitioning(false);
|
|
@@ -7859,7 +7922,12 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7859
7922
|
setIsActive();
|
|
7860
7923
|
setTransitioning(true);
|
|
7861
7924
|
setCurrentIndex(function (prev) {
|
|
7862
|
-
|
|
7925
|
+
var target = infinite ? prev - 1 : Math.max(0, prev - 1);
|
|
7926
|
+
if (!infinite) {
|
|
7927
|
+
currentTranslate.current = getTranslateForIndex(target);
|
|
7928
|
+
setDragTranslateX(null);
|
|
7929
|
+
}
|
|
7930
|
+
return target;
|
|
7863
7931
|
});
|
|
7864
7932
|
};
|
|
7865
7933
|
var goToNext = function goToNext() {
|
|
@@ -7867,13 +7935,28 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7867
7935
|
setIsActive();
|
|
7868
7936
|
setTransitioning(true);
|
|
7869
7937
|
setCurrentIndex(function (prev) {
|
|
7870
|
-
|
|
7938
|
+
var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
|
|
7939
|
+
if (!infinite) {
|
|
7940
|
+
currentTranslate.current = getTranslateForIndex(target);
|
|
7941
|
+
setDragTranslateX(null);
|
|
7942
|
+
}
|
|
7943
|
+
return target;
|
|
7871
7944
|
});
|
|
7872
7945
|
};
|
|
7873
7946
|
React.useImperativeHandle(ref, function () {
|
|
7874
7947
|
return {
|
|
7875
7948
|
nextSlide: goToNext,
|
|
7876
|
-
prevSlide: goToPrev
|
|
7949
|
+
prevSlide: goToPrev,
|
|
7950
|
+
hasOverflow: function hasOverflow() {
|
|
7951
|
+
var totalWidth = slideWidths.reduce(function (acc, w) {
|
|
7952
|
+
return acc + w;
|
|
7953
|
+
}, 0);
|
|
7954
|
+
var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
|
|
7955
|
+
return totalWidth > Math.max(0, visibleSpace);
|
|
7956
|
+
},
|
|
7957
|
+
hasNext: function hasNext() {
|
|
7958
|
+
return canMoveNext();
|
|
7959
|
+
}
|
|
7877
7960
|
};
|
|
7878
7961
|
});
|
|
7879
7962
|
var handleTouchStart = function handleTouchStart(e) {
|
|
@@ -8213,14 +8296,16 @@ var Pagination = function Pagination(_ref) {
|
|
|
8213
8296
|
}))))));
|
|
8214
8297
|
};
|
|
8215
8298
|
|
|
8216
|
-
var _templateObject$X
|
|
8299
|
+
var _templateObject$X;
|
|
8217
8300
|
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8218
|
-
|
|
8219
|
-
var
|
|
8220
|
-
var
|
|
8221
|
-
var
|
|
8222
|
-
|
|
8223
|
-
var
|
|
8301
|
+
|
|
8302
|
+
var _templateObject$Y, _templateObject2$L;
|
|
8303
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8304
|
+
var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
|
|
8305
|
+
|
|
8306
|
+
var _templateObject$Z, _templateObject2$M;
|
|
8307
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
|
|
8308
|
+
var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
|
|
8224
8309
|
|
|
8225
8310
|
var Person = function Person(_ref) {
|
|
8226
8311
|
var person = _ref.person,
|
|
@@ -8239,24 +8324,52 @@ var Person = function Person(_ref) {
|
|
|
8239
8324
|
return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementContent, null, replacement))), personSeparator);
|
|
8240
8325
|
};
|
|
8241
8326
|
|
|
8242
|
-
|
|
8243
|
-
|
|
8244
|
-
|
|
8245
|
-
|
|
8246
|
-
|
|
8247
|
-
|
|
8327
|
+
var PersonDetails = function PersonDetails(_ref) {
|
|
8328
|
+
var _role$people;
|
|
8329
|
+
var role = _ref.role,
|
|
8330
|
+
className = _ref.className;
|
|
8331
|
+
return /*#__PURE__*/React__default.createElement(TextWrapper$2, {
|
|
8332
|
+
className: className
|
|
8333
|
+
}, /*#__PURE__*/React__default.createElement(RoleContent, {
|
|
8248
8334
|
title: "role",
|
|
8249
8335
|
"data-roh": role.dataROH
|
|
8250
8336
|
}, role.name), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
8251
8337
|
tag: "p"
|
|
8252
|
-
}, role.people.map(function (person, personIndex) {
|
|
8338
|
+
}, (_role$people = role.people) == null ? void 0 : _role$people.map(function (person, personIndex, peopleArray) {
|
|
8253
8339
|
return /*#__PURE__*/React__default.createElement(Person, {
|
|
8254
8340
|
key: "" + person.name + personIndex,
|
|
8255
8341
|
person: person,
|
|
8256
|
-
withSeparator:
|
|
8342
|
+
withSeparator: peopleArray.length !== personIndex + 1
|
|
8257
8343
|
});
|
|
8258
8344
|
})));
|
|
8259
|
-
}
|
|
8345
|
+
};
|
|
8346
|
+
|
|
8347
|
+
var _templateObject$_, _templateObject2$N;
|
|
8348
|
+
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
|
|
8349
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
|
|
8350
|
+
|
|
8351
|
+
var PersonCard = function PersonCard(_ref) {
|
|
8352
|
+
var role = _ref.role,
|
|
8353
|
+
className = _ref.className;
|
|
8354
|
+
var hasHeadshot = React__default.useMemo(function () {
|
|
8355
|
+
var _role$people;
|
|
8356
|
+
var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
|
|
8357
|
+
return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
|
|
8358
|
+
}, [role]);
|
|
8359
|
+
if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper, {
|
|
8360
|
+
className: className
|
|
8361
|
+
}, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
|
|
8362
|
+
src: role.people[0].headshot,
|
|
8363
|
+
alt: role.people[0].name
|
|
8364
|
+
})), /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
8365
|
+
role: role
|
|
8366
|
+
}));
|
|
8367
|
+
return /*#__PURE__*/React__default.createElement(PersonDetails, {
|
|
8368
|
+
role: role,
|
|
8369
|
+
className: className
|
|
8370
|
+
});
|
|
8371
|
+
};
|
|
8372
|
+
|
|
8260
8373
|
var PeopleListing = function PeopleListing(_ref) {
|
|
8261
8374
|
var roles = _ref.roles,
|
|
8262
8375
|
className = _ref.className;
|
|
@@ -8265,21 +8378,20 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8265
8378
|
}, roles.map(function (role, index) {
|
|
8266
8379
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8267
8380
|
key: role.name + "-" + index
|
|
8268
|
-
},
|
|
8269
|
-
|
|
8270
|
-
|
|
8271
|
-
})), textSection(role))) : textSection(role));
|
|
8381
|
+
}, /*#__PURE__*/React__default.createElement(PersonCard, {
|
|
8382
|
+
role: role
|
|
8383
|
+
}));
|
|
8272
8384
|
}));
|
|
8273
8385
|
};
|
|
8274
8386
|
|
|
8275
|
-
var _templateObject
|
|
8276
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8277
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8387
|
+
var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$t;
|
|
8388
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8389
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8278
8390
|
var columnCount = _ref.columnCount;
|
|
8279
8391
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8280
8392
|
}, devices.mobile, devices.tablet);
|
|
8281
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8282
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8393
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
8394
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8283
8395
|
|
|
8284
8396
|
// Get the total character length of a property in an array of objects
|
|
8285
8397
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8406,8 +8518,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8406
8518
|
}, creditEntries);
|
|
8407
8519
|
};
|
|
8408
8520
|
|
|
8409
|
-
var _templateObject$
|
|
8410
|
-
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$
|
|
8521
|
+
var _templateObject$10;
|
|
8522
|
+
var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
8411
8523
|
|
|
8412
8524
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
8413
8525
|
var items = _ref.items;
|
|
@@ -8425,14 +8537,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
8425
8537
|
}));
|
|
8426
8538
|
};
|
|
8427
8539
|
|
|
8428
|
-
var _templateObject$
|
|
8540
|
+
var _templateObject$11, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16;
|
|
8429
8541
|
var LENGTH_TEXT = 28;
|
|
8430
8542
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8431
8543
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8432
8544
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8433
8545
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8434
8546
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8435
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8547
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8436
8548
|
var imageToLeft = _ref.imageToLeft;
|
|
8437
8549
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8438
8550
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8442,7 +8554,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$_ ||
|
|
|
8442
8554
|
var asCard = _ref3.asCard;
|
|
8443
8555
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8444
8556
|
});
|
|
8445
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8557
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
|
|
8446
8558
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8447
8559
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8448
8560
|
}, function (_ref5) {
|
|
@@ -8466,16 +8578,16 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B ||
|
|
|
8466
8578
|
}
|
|
8467
8579
|
return '';
|
|
8468
8580
|
});
|
|
8469
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8581
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
|
|
8470
8582
|
var marginBottom = _ref7.marginBottom;
|
|
8471
8583
|
return marginBottom + "px";
|
|
8472
8584
|
}, function (_ref8) {
|
|
8473
8585
|
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
8474
8586
|
return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
|
|
8475
8587
|
});
|
|
8476
|
-
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8477
|
-
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8478
|
-
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8588
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
8589
|
+
var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
8590
|
+
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
|
|
8479
8591
|
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
|
|
8480
8592
|
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
8481
8593
|
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
@@ -8683,28 +8795,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8683
8795
|
}))));
|
|
8684
8796
|
};
|
|
8685
8797
|
|
|
8686
|
-
var _templateObject
|
|
8798
|
+
var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f;
|
|
8687
8799
|
var LENGTH_TEXT$2 = 28;
|
|
8688
8800
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8689
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject
|
|
8801
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
8690
8802
|
var imageToLeft = _ref.imageToLeft;
|
|
8691
8803
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
8692
8804
|
}, devices.tablet, function (_ref2) {
|
|
8693
8805
|
var imageToLeft = _ref2.imageToLeft;
|
|
8694
8806
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
8695
8807
|
}, devices.mobile);
|
|
8696
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8808
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
8697
8809
|
var imageToLeft = _ref3.imageToLeft;
|
|
8698
8810
|
return imageToLeft ? 'left' : 'right';
|
|
8699
8811
|
}, devices.mobile);
|
|
8700
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8812
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
8701
8813
|
var imageToLeft = _ref4.imageToLeft;
|
|
8702
8814
|
return imageToLeft ? 'right' : 'left';
|
|
8703
8815
|
}, devices.mobile);
|
|
8704
|
-
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$
|
|
8705
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$
|
|
8706
|
-
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
8707
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
8816
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8817
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
8818
|
+
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
|
|
8819
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
|
|
8708
8820
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
8709
8821
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
8710
8822
|
_ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
|
|
@@ -8726,8 +8838,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g ||
|
|
|
8726
8838
|
return '';
|
|
8727
8839
|
});
|
|
8728
8840
|
|
|
8729
|
-
var _templateObject$
|
|
8730
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8841
|
+
var _templateObject$13;
|
|
8842
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\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) {
|
|
8731
8843
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8732
8844
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8733
8845
|
return aspectRatio;
|
|
@@ -8909,8 +9021,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8909
9021
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
8910
9022
|
};
|
|
8911
9023
|
|
|
8912
|
-
var _templateObject$
|
|
8913
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9024
|
+
var _templateObject$14;
|
|
9025
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
8914
9026
|
|
|
8915
9027
|
/**
|
|
8916
9028
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -8965,9 +9077,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
8965
9077
|
})));
|
|
8966
9078
|
};
|
|
8967
9079
|
|
|
8968
|
-
var _templateObject$
|
|
8969
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8970
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9080
|
+
var _templateObject$15, _templateObject2$Q, _templateObject3$C;
|
|
9081
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9082
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
8971
9083
|
var horizontalMode = _ref.horizontalMode;
|
|
8972
9084
|
if (horizontalMode) return 'row';
|
|
8973
9085
|
return 'column';
|
|
@@ -8975,7 +9087,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$O || (_temp
|
|
|
8975
9087
|
var gap = _ref2.gap;
|
|
8976
9088
|
return gap + "px";
|
|
8977
9089
|
});
|
|
8978
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9090
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
8979
9091
|
var darkMode = _ref3.darkMode;
|
|
8980
9092
|
if (darkMode) return 'var(--base-color-white)';
|
|
8981
9093
|
return 'var(--base-color-errorstate)';
|
|
@@ -9052,10 +9164,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9052
9164
|
}, error))));
|
|
9053
9165
|
};
|
|
9054
9166
|
|
|
9055
|
-
var _templateObject$
|
|
9056
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9057
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9058
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9167
|
+
var _templateObject$16, _templateObject2$R, _templateObject3$D;
|
|
9168
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9169
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9170
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9059
9171
|
|
|
9060
9172
|
/* eslint-disable react/no-danger */
|
|
9061
9173
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9111,8 +9223,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9111
9223
|
return null;
|
|
9112
9224
|
};
|
|
9113
9225
|
|
|
9114
|
-
var _templateObject$
|
|
9115
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9226
|
+
var _templateObject$17;
|
|
9227
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9116
9228
|
|
|
9117
9229
|
/* ~~~~~~~ new harmonic types ~~~~~~~ */
|
|
9118
9230
|
var HarmonicSize = {
|
|
@@ -9154,8 +9266,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9154
9266
|
}, description)))));
|
|
9155
9267
|
};
|
|
9156
9268
|
|
|
9157
|
-
var _templateObject$
|
|
9158
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9269
|
+
var _templateObject$18, _templateObject2$S, _templateObject3$E, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
|
|
9270
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9159
9271
|
var theme = _ref.theme;
|
|
9160
9272
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9161
9273
|
}, function (_ref2) {
|
|
@@ -9165,12 +9277,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$15 || (_templateObject
|
|
|
9165
9277
|
var theme = _ref3.theme;
|
|
9166
9278
|
return theme.colors.lightgrey;
|
|
9167
9279
|
});
|
|
9168
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
9280
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9169
9281
|
var theme = _ref4.theme;
|
|
9170
9282
|
return theme.colors.darkgrey;
|
|
9171
9283
|
});
|
|
9172
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
9173
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
9284
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9285
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9174
9286
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9175
9287
|
var theme = _ref5.theme;
|
|
9176
9288
|
return {
|
|
@@ -9178,9 +9290,9 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
9178
9290
|
color: theme.colors.black,
|
|
9179
9291
|
title: 'Select Arrow'
|
|
9180
9292
|
};
|
|
9181
|
-
})(_templateObject5$
|
|
9182
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9183
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9293
|
+
})(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
9294
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9295
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9184
9296
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
9185
9297
|
var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9186
9298
|
var theme = _ref6.theme,
|
|
@@ -9535,9 +9647,9 @@ function Select(_ref3) {
|
|
|
9535
9647
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9536
9648
|
}
|
|
9537
9649
|
|
|
9538
|
-
var _templateObject$
|
|
9539
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9540
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9650
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x;
|
|
9651
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9652
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9541
9653
|
var width = _ref.width;
|
|
9542
9654
|
if (!width) return 'none';
|
|
9543
9655
|
return width + "px";
|
|
@@ -9554,12 +9666,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_t
|
|
|
9554
9666
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9555
9667
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9556
9668
|
});
|
|
9557
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9669
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9558
9670
|
var darkMode = _ref5.darkMode;
|
|
9559
9671
|
if (darkMode) return "var(--base-color-white)";
|
|
9560
9672
|
return "var(--base-color-black)";
|
|
9561
9673
|
});
|
|
9562
|
-
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9674
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9563
9675
|
var darkMode = _ref6.darkMode;
|
|
9564
9676
|
if (darkMode) return "var(--base-color-white)";
|
|
9565
9677
|
return "var(--base-color-errorstate)";
|
|
@@ -9673,23 +9785,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9673
9785
|
})));
|
|
9674
9786
|
};
|
|
9675
9787
|
|
|
9676
|
-
var _templateObject$
|
|
9677
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9678
|
-
var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$
|
|
9679
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9788
|
+
var _templateObject$1a, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
|
|
9789
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__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"])));
|
|
9790
|
+
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"])));
|
|
9791
|
+
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) {
|
|
9680
9792
|
var stackCtasEarly = _ref.stackCtasEarly;
|
|
9681
9793
|
return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
|
|
9682
9794
|
}, function (_ref2) {
|
|
9683
9795
|
var stackCtasEarly = _ref2.stackCtasEarly;
|
|
9684
9796
|
return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
|
|
9685
9797
|
}, devices.smallDesktop, devices.mobileAndTablet);
|
|
9686
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9798
|
+
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) {
|
|
9687
9799
|
var singleChild = _ref3.singleChild;
|
|
9688
9800
|
return singleChild ? '0' : '10px';
|
|
9689
9801
|
});
|
|
9690
|
-
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
9691
|
-
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
9802
|
+
var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
9803
|
+
var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
|
|
9692
9804
|
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"])));
|
|
9805
|
+
var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
|
|
9693
9806
|
|
|
9694
9807
|
// Set max. character length
|
|
9695
9808
|
var setMaxCharLength = function setMaxCharLength(value, maxLength) {
|
|
@@ -9752,10 +9865,11 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
9752
9865
|
size: "small"
|
|
9753
9866
|
}, title), subTitle && /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
9754
9867
|
size: "large"
|
|
9755
|
-
}, subTitle), (price || promoPrice) && (/*#__PURE__*/React__default.createElement(PriceRow, null, promoPrice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LineThrough, {
|
|
9868
|
+
}, subTitle), (price || promoPrice) && (/*#__PURE__*/React__default.createElement(PriceRow, null, promoPrice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(VisuallyHidden, null, formatPrice(price) + " strikethrough"), /*#__PURE__*/React__default.createElement(LineThrough, {
|
|
9756
9869
|
tag: "p",
|
|
9757
9870
|
size: "small",
|
|
9758
|
-
serif: true
|
|
9871
|
+
serif: true,
|
|
9872
|
+
"aria-hidden": "true"
|
|
9759
9873
|
}, formatPrice(price)), /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
9760
9874
|
tag: "p",
|
|
9761
9875
|
size: "small",
|
|
@@ -9777,8 +9891,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
9777
9891
|
}, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
|
|
9778
9892
|
};
|
|
9779
9893
|
|
|
9780
|
-
var _templateObject$
|
|
9781
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
9894
|
+
var _templateObject$1b, _templateObject2$U, _templateObject3$H;
|
|
9895
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
9782
9896
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9783
9897
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9784
9898
|
return aspectRatio;
|
|
@@ -9786,10 +9900,10 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$18 || (_temp
|
|
|
9786
9900
|
var _ref2$aspectRatio = _ref2.aspectRatio,
|
|
9787
9901
|
aspectRatio = _ref2$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref2$aspectRatio,
|
|
9788
9902
|
height = _ref2.height;
|
|
9789
|
-
return "calc(
|
|
9903
|
+
return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
|
|
9790
9904
|
});
|
|
9791
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
9792
|
-
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$
|
|
9905
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
|
|
9906
|
+
var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
|
|
9793
9907
|
|
|
9794
9908
|
var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
|
|
9795
9909
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
@@ -9822,13 +9936,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9822
9936
|
}, caption))));
|
|
9823
9937
|
};
|
|
9824
9938
|
|
|
9825
|
-
var _templateObject$
|
|
9826
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9827
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9828
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
9829
|
-
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9830
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9831
|
-
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
9939
|
+
var _templateObject$1c, _templateObject2$V, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$m;
|
|
9940
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
9941
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
9942
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
9943
|
+
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
9944
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9945
|
+
var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
9832
9946
|
|
|
9833
9947
|
var MiniCard = function MiniCard(_ref) {
|
|
9834
9948
|
var _ref$title = _ref.title,
|
|
@@ -9866,18 +9980,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9866
9980
|
}, title)))));
|
|
9867
9981
|
};
|
|
9868
9982
|
|
|
9869
|
-
var _templateObject$
|
|
9870
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9871
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9872
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9983
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u;
|
|
9984
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
9985
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
9986
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
9873
9987
|
var isVisible = _ref.isVisible;
|
|
9874
9988
|
return isVisible ? 'visible' : 'hidden';
|
|
9875
9989
|
});
|
|
9876
|
-
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9990
|
+
var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
9877
9991
|
var isVisible = _ref2.isVisible;
|
|
9878
9992
|
return isVisible ? 'visible' : 'hidden';
|
|
9879
9993
|
});
|
|
9880
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
9994
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
9881
9995
|
|
|
9882
9996
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9883
9997
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -9958,15 +10072,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
9958
10072
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
9959
10073
|
};
|
|
9960
10074
|
|
|
9961
|
-
var _templateObject$
|
|
9962
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$
|
|
9963
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
9964
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
9965
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10075
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
|
|
10076
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10077
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
|
|
10078
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10079
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
|
|
9966
10080
|
var isActive = _ref.isActive;
|
|
9967
10081
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
9968
10082
|
}, exports.Colors.MidGrey);
|
|
9969
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10083
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
9970
10084
|
var isOpen = _ref2.isOpen;
|
|
9971
10085
|
return isOpen ? 'block' : 'none';
|
|
9972
10086
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10122,19 +10236,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10122
10236
|
});
|
|
10123
10237
|
};
|
|
10124
10238
|
|
|
10125
|
-
var _templateObject$
|
|
10126
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10127
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10128
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10239
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w, _templateObject6$n;
|
|
10240
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10241
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10242
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10129
10243
|
var color = _ref.color;
|
|
10130
10244
|
return "var(--base-color-" + color + ")";
|
|
10131
10245
|
});
|
|
10132
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10133
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10246
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10247
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10134
10248
|
var color = _ref2.color;
|
|
10135
10249
|
return "var(--base-color-" + color + ")";
|
|
10136
10250
|
});
|
|
10137
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10251
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10138
10252
|
var color = _ref3.color;
|
|
10139
10253
|
return "var(--base-color-" + color + ")";
|
|
10140
10254
|
});
|
|
@@ -10216,18 +10330,18 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10216
10330
|
}, strengthLabel))));
|
|
10217
10331
|
};
|
|
10218
10332
|
|
|
10219
|
-
var _templateObject$
|
|
10220
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$
|
|
10221
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10222
|
-
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10223
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$
|
|
10333
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
|
|
10334
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10335
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10336
|
+
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10337
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10224
10338
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10225
10339
|
}, devices.tablet, devices.mobile);
|
|
10226
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10340
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
|
|
10227
10341
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10228
10342
|
}, devices.mobile);
|
|
10229
|
-
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$
|
|
10230
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10343
|
+
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);
|
|
10344
|
+
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"])));
|
|
10231
10345
|
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"])));
|
|
10232
10346
|
|
|
10233
10347
|
/* eslint-disable react/no-danger */
|
|
@@ -10431,22 +10545,22 @@ var Table = function Table(_ref) {
|
|
|
10431
10545
|
}))));
|
|
10432
10546
|
};
|
|
10433
10547
|
|
|
10434
|
-
var _templateObject$
|
|
10435
|
-
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
10548
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
|
|
10549
|
+
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10436
10550
|
var theme = _ref.theme;
|
|
10437
10551
|
return "var(--color-" + theme + ")";
|
|
10438
10552
|
}, function (_ref2) {
|
|
10439
10553
|
var theme = _ref2.theme;
|
|
10440
10554
|
return "var(--color-" + theme + ")";
|
|
10441
10555
|
});
|
|
10442
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
10443
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
10444
|
-
var Error = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10445
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
10446
|
-
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10447
|
-
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10556
|
+
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10557
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
|
|
10558
|
+
var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10559
|
+
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);
|
|
10560
|
+
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);
|
|
10561
|
+
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
10448
10562
|
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);
|
|
10449
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
10563
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__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);
|
|
10450
10564
|
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);
|
|
10451
10565
|
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10452
10566
|
var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
|
|
@@ -10856,13 +10970,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
10856
10970
|
}))))));
|
|
10857
10971
|
};
|
|
10858
10972
|
|
|
10859
|
-
var _templateObject$
|
|
10860
|
-
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
10973
|
+
var _templateObject$1i, _templateObject2$$, _templateObject4$F, _templateObject5$z;
|
|
10974
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
|
|
10861
10975
|
var withShadow = _ref.withShadow;
|
|
10862
|
-
return withShadow && styled.css(_templateObject2
|
|
10976
|
+
return withShadow && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
10863
10977
|
}, devices.mobile);
|
|
10864
|
-
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
10865
|
-
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$
|
|
10978
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
|
|
10979
|
+
var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
10866
10980
|
|
|
10867
10981
|
var defaultGrid = {
|
|
10868
10982
|
columnStartDesktop: 2,
|
|
@@ -10920,12 +11034,12 @@ var AnchorBar = function AnchorBar(_ref) {
|
|
|
10920
11034
|
return null;
|
|
10921
11035
|
};
|
|
10922
11036
|
|
|
10923
|
-
var _templateObject$
|
|
10924
|
-
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$
|
|
11037
|
+
var _templateObject$1j, _templateObject2$10;
|
|
11038
|
+
var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
|
|
10925
11039
|
var hide = _ref.hide;
|
|
10926
11040
|
return hide && "display: none;";
|
|
10927
11041
|
}, devices.mobileAndTablet);
|
|
10928
|
-
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11042
|
+
var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
|
|
10929
11043
|
|
|
10930
11044
|
/**
|
|
10931
11045
|
* An accessible component which allows Assistive Technology users to move the focus
|
|
@@ -11017,8 +11131,8 @@ var SkipToMain = function SkipToMain(_ref) {
|
|
|
11017
11131
|
}));
|
|
11018
11132
|
};
|
|
11019
11133
|
|
|
11020
|
-
var _templateObject$
|
|
11021
|
-
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$
|
|
11134
|
+
var _templateObject$1k;
|
|
11135
|
+
var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1k || (_templateObject$1k = /*#__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 text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\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);
|
|
11022
11136
|
|
|
11023
11137
|
var addTypographyClasses = function addTypographyClasses(html) {
|
|
11024
11138
|
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'] + "\">");
|
|
@@ -11073,27 +11187,27 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11073
11187
|
}, gridItemOrContent);
|
|
11074
11188
|
};
|
|
11075
11189
|
|
|
11076
|
-
var _templateObject$
|
|
11190
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$O, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
|
|
11077
11191
|
var color = 'primary-black';
|
|
11078
11192
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11079
11193
|
borderColor: color,
|
|
11080
11194
|
hoveredColor: color,
|
|
11081
11195
|
pressedColor: color,
|
|
11082
11196
|
textColor: color
|
|
11083
|
-
})(_templateObject$
|
|
11084
|
-
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11085
|
-
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$
|
|
11197
|
+
})(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11198
|
+
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11199
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11086
11200
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11087
11201
|
serif: true,
|
|
11088
11202
|
size: 'medium'
|
|
11089
|
-
})(_templateObject4$
|
|
11203
|
+
})(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11090
11204
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11091
11205
|
size: 'large'
|
|
11092
|
-
})(_templateObject5$
|
|
11093
|
-
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
11206
|
+
})(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11207
|
+
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11094
11208
|
var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
|
|
11095
11209
|
size: 'large'
|
|
11096
|
-
})(_templateObject7$
|
|
11210
|
+
})(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11097
11211
|
|
|
11098
11212
|
var Paywall = function Paywall(_ref) {
|
|
11099
11213
|
var className = _ref.className,
|
|
@@ -11286,14 +11400,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11286
11400
|
})))))));
|
|
11287
11401
|
};
|
|
11288
11402
|
|
|
11289
|
-
var _templateObject$
|
|
11290
|
-
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
11291
|
-
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
11292
|
-
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$
|
|
11293
|
-
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11294
|
-
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
11295
|
-
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11296
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$
|
|
11403
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11404
|
+
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11405
|
+
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11406
|
+
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11407
|
+
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11408
|
+
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11409
|
+
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11410
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11297
11411
|
|
|
11298
11412
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11299
11413
|
var Footer = function Footer(_ref) {
|
|
@@ -11351,18 +11465,18 @@ var Footer = function Footer(_ref) {
|
|
|
11351
11465
|
}, additionalInfo))));
|
|
11352
11466
|
};
|
|
11353
11467
|
|
|
11354
|
-
var _templateObject$
|
|
11468
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
|
|
11355
11469
|
var LIST_ITEM_GAP = 32;
|
|
11356
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11470
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__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) {
|
|
11357
11471
|
var bottomBorder = _ref.bottomBorder;
|
|
11358
11472
|
return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
|
|
11359
11473
|
}, zIndexes.anchor, function (_ref2) {
|
|
11360
11474
|
var withShadow = _ref2.withShadow;
|
|
11361
|
-
return withShadow && styled.css(_templateObject2$
|
|
11475
|
+
return withShadow && styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11362
11476
|
});
|
|
11363
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11364
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11365
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
11477
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
11478
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
11479
|
+
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11366
11480
|
var tabsOverflow = _ref3.tabsOverflow;
|
|
11367
11481
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
11368
11482
|
}, LIST_ITEM_GAP, function (_ref4) {
|
|
@@ -11375,7 +11489,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateO
|
|
|
11375
11489
|
});
|
|
11376
11490
|
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) {
|
|
11377
11491
|
var withShadow = _ref7.withShadow;
|
|
11378
|
-
return withShadow && styled.css(_templateObject9$
|
|
11492
|
+
return withShadow && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
11379
11493
|
});
|
|
11380
11494
|
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
|
|
11381
11495
|
var disabled = _ref8.disabled;
|
|
@@ -11632,19 +11746,19 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11632
11746
|
})))) : null))));
|
|
11633
11747
|
};
|
|
11634
11748
|
|
|
11635
|
-
var _templateObject$
|
|
11636
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11749
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
|
|
11750
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
11637
11751
|
var sticky = _ref.sticky;
|
|
11638
11752
|
return sticky ? 'sticky' : 'initial';
|
|
11639
11753
|
}, zIndexes.anchor);
|
|
11640
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11641
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11754
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
|
|
11755
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
11642
11756
|
var title = _ref2.title;
|
|
11643
11757
|
return title ? 'row' : 'row-reverse';
|
|
11644
11758
|
}, devices.tablet, devices.mobile);
|
|
11645
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11646
|
-
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11647
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11759
|
+
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__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);
|
|
11760
|
+
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__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);
|
|
11761
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11648
11762
|
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) {
|
|
11649
11763
|
var theme = _ref3.theme;
|
|
11650
11764
|
return theme.colors.primaryButtonReverseBg;
|
|
@@ -11658,7 +11772,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
11658
11772
|
var theme = _ref6.theme;
|
|
11659
11773
|
return theme.colors.primaryButtonReverse;
|
|
11660
11774
|
});
|
|
11661
|
-
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
11775
|
+
var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
11662
11776
|
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
11663
11777
|
|
|
11664
11778
|
var _excluded$r = ["text"],
|
|
@@ -11692,14 +11806,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
11692
11806
|
}, message))));
|
|
11693
11807
|
};
|
|
11694
11808
|
|
|
11695
|
-
var _templateObject$
|
|
11696
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11697
|
-
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$
|
|
11698
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11699
|
-
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$
|
|
11809
|
+
var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K;
|
|
11810
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__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);
|
|
11811
|
+
var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$15 || (_templateObject2$15 = /*#__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);
|
|
11812
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__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);
|
|
11813
|
+
var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__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);
|
|
11700
11814
|
|
|
11701
|
-
var _templateObject$
|
|
11702
|
-
var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11815
|
+
var _templateObject$1q;
|
|
11816
|
+
var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__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);
|
|
11703
11817
|
|
|
11704
11818
|
var UpsellCards = function UpsellCards(_ref) {
|
|
11705
11819
|
var upsellCards = _ref.upsellCards;
|
|
@@ -11761,9 +11875,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11761
11875
|
})))));
|
|
11762
11876
|
};
|
|
11763
11877
|
|
|
11764
|
-
var _templateObject$
|
|
11765
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11766
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11878
|
+
var _templateObject$1r, _templateObject2$16;
|
|
11879
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
|
|
11880
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
11767
11881
|
var bottomBorder = _ref.bottomBorder;
|
|
11768
11882
|
return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
|
|
11769
11883
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -11794,11 +11908,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
11794
11908
|
}, children)));
|
|
11795
11909
|
};
|
|
11796
11910
|
|
|
11797
|
-
var _templateObject$
|
|
11798
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11799
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
11800
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11801
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
11911
|
+
var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L;
|
|
11912
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__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);
|
|
11913
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$17 || (_templateObject2$17 = /*#__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);
|
|
11914
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11915
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$L || (_templateObject4$L = /*#__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"])));
|
|
11802
11916
|
|
|
11803
11917
|
var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
11804
11918
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -11913,6 +12027,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
11913
12027
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$3, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
11914
12028
|
};
|
|
11915
12029
|
|
|
12030
|
+
var _SLIDE_PRESETS;
|
|
11916
12031
|
var GRID_COLUMN_GAP = 'var(--grid-column-gap)';
|
|
11917
12032
|
var GRID_VALUES = {
|
|
11918
12033
|
desktop: {
|
|
@@ -11936,6 +12051,20 @@ var GRID_VALUES = {
|
|
|
11936
12051
|
gapsPerSlide: 9
|
|
11937
12052
|
}
|
|
11938
12053
|
};
|
|
12054
|
+
var SLIDE_PRESETS = (_SLIDE_PRESETS = {}, _SLIDE_PRESETS[exports.CarouselType.PersonCard] = {
|
|
12055
|
+
desktop: {
|
|
12056
|
+
width: '320px',
|
|
12057
|
+
marginRight: '0'
|
|
12058
|
+
},
|
|
12059
|
+
tablet: {
|
|
12060
|
+
width: '320px',
|
|
12061
|
+
marginRight: '0'
|
|
12062
|
+
},
|
|
12063
|
+
mobile: {
|
|
12064
|
+
width: '219px',
|
|
12065
|
+
marginRight: '0'
|
|
12066
|
+
}
|
|
12067
|
+
}, _SLIDE_PRESETS);
|
|
11939
12068
|
// Grid Calculations
|
|
11940
12069
|
var calculateGridColumnWidth = function calculateGridColumnWidth(gridGapsNumber, gridColumnsNumber) {
|
|
11941
12070
|
return "calc((100% - (" + gridGapsNumber + " * " + GRID_COLUMN_GAP + ")) / " + gridColumnsNumber + ")";
|
|
@@ -11948,6 +12077,10 @@ var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
|
|
|
11948
12077
|
};
|
|
11949
12078
|
// Slide styles
|
|
11950
12079
|
var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
|
|
12080
|
+
var preset = SLIDE_PRESETS[type];
|
|
12081
|
+
if (preset != null && preset.desktop) {
|
|
12082
|
+
return "\n width: " + preset.desktop.width + ";\n margin-right: " + preset.desktop.marginRight + ";\n ";
|
|
12083
|
+
}
|
|
11951
12084
|
var _GRID_VALUES$desktop = GRID_VALUES.desktop,
|
|
11952
12085
|
gapsNumber = _GRID_VALUES$desktop.gapsNumber,
|
|
11953
12086
|
columnsNumber = _GRID_VALUES$desktop.columnsNumber,
|
|
@@ -11962,7 +12095,18 @@ var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActiv
|
|
|
11962
12095
|
var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
|
|
11963
12096
|
return "\n width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n margin-right: " + GRID_COLUMN_GAP + ";\n ";
|
|
11964
12097
|
};
|
|
11965
|
-
var
|
|
12098
|
+
var getCardSlideTabletStyles = function getCardSlideTabletStyles(type) {
|
|
12099
|
+
var preset = SLIDE_PRESETS[type];
|
|
12100
|
+
if (preset != null && preset.tablet) {
|
|
12101
|
+
return "\n width: " + preset.tablet.width + ";\n margin-right: " + preset.tablet.marginRight + ";\n ";
|
|
12102
|
+
}
|
|
12103
|
+
return "\n width: " + (type === exports.CarouselType.SmallCard ? '30%' : '40%') + ";\n ";
|
|
12104
|
+
};
|
|
12105
|
+
var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
|
|
12106
|
+
var preset = SLIDE_PRESETS[type];
|
|
12107
|
+
if (preset != null && preset.mobile) {
|
|
12108
|
+
return "\n width: " + preset.mobile.width + ";\n margin-right: " + preset.mobile.marginRight + ";\n ";
|
|
12109
|
+
}
|
|
11966
12110
|
var _GRID_VALUES$mobile = GRID_VALUES.mobile,
|
|
11967
12111
|
columnsNumber = _GRID_VALUES$mobile.columnsNumber,
|
|
11968
12112
|
gapsNumber = _GRID_VALUES$mobile.gapsNumber,
|
|
@@ -11971,33 +12115,30 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
|
|
|
11971
12115
|
var gridColumnWidth = calculateGridColumnWidth(gapsNumber, columnsNumber);
|
|
11972
12116
|
return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
|
|
11973
12117
|
};
|
|
11974
|
-
var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
|
|
11975
|
-
return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
|
|
11976
|
-
};
|
|
11977
12118
|
|
|
11978
|
-
var _templateObject$
|
|
11979
|
-
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12119
|
+
var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
|
|
12120
|
+
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__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 > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
|
|
11980
12121
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
11981
|
-
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
|
|
12122
|
+
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\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
|
|
11982
12123
|
}, devices.mobile, function (_ref2) {
|
|
11983
12124
|
var imagesHeightDevice = _ref2.imagesHeightDevice;
|
|
11984
|
-
return "&&& {\n .swipe-slide > figure {\n
|
|
12125
|
+
return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
|
|
11985
12126
|
});
|
|
11986
|
-
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12127
|
+
var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
|
|
11987
12128
|
var type = _ref3.type,
|
|
11988
12129
|
isActive = _ref3.isActive;
|
|
11989
|
-
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n
|
|
11990
|
-
}
|
|
11991
|
-
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
11992
|
-
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
11993
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12130
|
+
return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
|
|
12131
|
+
});
|
|
12132
|
+
var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$U || (_templateObject3$U = /*#__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);
|
|
12133
|
+
var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
|
|
12134
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
11994
12135
|
var isDescriptionPresent = _ref4.isDescriptionPresent;
|
|
11995
12136
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
11996
12137
|
});
|
|
11997
|
-
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$
|
|
11998
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12138
|
+
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
|
|
12139
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
11999
12140
|
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12000
|
-
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$
|
|
12141
|
+
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12001
12142
|
var active = _ref5.active;
|
|
12002
12143
|
return active ? 'grid-column: 1 / span 16' : '';
|
|
12003
12144
|
}, devices.tablet, function (_ref6) {
|
|
@@ -12037,9 +12178,34 @@ var Carousel = function Carousel(_ref) {
|
|
|
12037
12178
|
var _useState3 = React.useState(0),
|
|
12038
12179
|
slidesOffsetBefore = _useState3[0],
|
|
12039
12180
|
setSlidesOffsetBefore = _useState3[1];
|
|
12181
|
+
var _useState4 = React.useState(infinite),
|
|
12182
|
+
availablePrev = _useState4[0],
|
|
12183
|
+
setAvailablePrev = _useState4[1];
|
|
12184
|
+
var _useState5 = React.useState(function () {
|
|
12185
|
+
var count = React__default.Children.count(children);
|
|
12186
|
+
return infinite ? true : count > 1;
|
|
12187
|
+
}),
|
|
12188
|
+
availableNext = _useState5[0],
|
|
12189
|
+
setAvailableNext = _useState5[1];
|
|
12190
|
+
var _useState6 = React.useState(true),
|
|
12191
|
+
showRotatorButtons = _useState6[0],
|
|
12192
|
+
setShowRotatorButtons = _useState6[1];
|
|
12040
12193
|
var swipeRef = React.useRef(null);
|
|
12041
12194
|
var carouselRef = React.useRef(null);
|
|
12042
12195
|
var titleButtonsGridRef = React.useRef(null);
|
|
12196
|
+
var childrenCount = React__default.Children.count(children);
|
|
12197
|
+
React.useEffect(function () {
|
|
12198
|
+
if (infinite) {
|
|
12199
|
+
setAvailablePrev(true);
|
|
12200
|
+
setAvailableNext(true);
|
|
12201
|
+
} else {
|
|
12202
|
+
setAvailablePrev(false);
|
|
12203
|
+
setAvailableNext(function () {
|
|
12204
|
+
var _swipeRef$current$has, _swipeRef$current;
|
|
12205
|
+
return (_swipeRef$current$has = (_swipeRef$current = swipeRef.current) == null ? void 0 : _swipeRef$current.hasNext()) != null ? _swipeRef$current$has : childrenCount > 1;
|
|
12206
|
+
});
|
|
12207
|
+
}
|
|
12208
|
+
}, [childrenCount, infinite]);
|
|
12043
12209
|
React.useEffect(function () {
|
|
12044
12210
|
if (type !== exports.CarouselType.Image) return undefined;
|
|
12045
12211
|
var handleFullscreenChange = function handleFullscreenChange() {
|
|
@@ -12065,12 +12231,17 @@ var Carousel = function Carousel(_ref) {
|
|
|
12065
12231
|
React.useEffect(function () {
|
|
12066
12232
|
if (!useOffset || !active) return undefined;
|
|
12067
12233
|
var updateWindowDimensions = function updateWindowDimensions() {
|
|
12234
|
+
var _swipeRef$current2;
|
|
12068
12235
|
if (window.matchMedia(devices.mobile).matches) {
|
|
12069
12236
|
setSlidesOffsetBefore(GRID_OFFSET_MARGIN.mobile);
|
|
12070
12237
|
} else if (window.matchMedia(devices.tablet).matches) {
|
|
12071
12238
|
setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
|
|
12072
12239
|
} else {
|
|
12073
|
-
setSlidesOffsetBefore(Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop);
|
|
12240
|
+
setSlidesOffsetBefore(infinite ? Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop : 0);
|
|
12241
|
+
}
|
|
12242
|
+
var hasNext = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext();
|
|
12243
|
+
if (typeof hasNext === 'boolean') {
|
|
12244
|
+
setAvailableNext(hasNext);
|
|
12074
12245
|
}
|
|
12075
12246
|
};
|
|
12076
12247
|
window.addEventListener('resize', updateWindowDimensions);
|
|
@@ -12080,12 +12251,12 @@ var Carousel = function Carousel(_ref) {
|
|
|
12080
12251
|
};
|
|
12081
12252
|
}, [useOffset, active]);
|
|
12082
12253
|
var onNext = function onNext() {
|
|
12083
|
-
var _swipeRef$
|
|
12084
|
-
(_swipeRef$
|
|
12254
|
+
var _swipeRef$current3;
|
|
12255
|
+
(_swipeRef$current3 = swipeRef.current) == null || _swipeRef$current3.nextSlide();
|
|
12085
12256
|
};
|
|
12086
12257
|
var onPrev = function onPrev() {
|
|
12087
|
-
var _swipeRef$
|
|
12088
|
-
(_swipeRef$
|
|
12258
|
+
var _swipeRef$current4;
|
|
12259
|
+
(_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.prevSlide();
|
|
12089
12260
|
};
|
|
12090
12261
|
var onClickFullscreen = function onClickFullscreen() {
|
|
12091
12262
|
if (!isFullscreen && carouselRef.current) {
|
|
@@ -12094,11 +12265,56 @@ var Carousel = function Carousel(_ref) {
|
|
|
12094
12265
|
document.exitFullscreen();
|
|
12095
12266
|
}
|
|
12096
12267
|
};
|
|
12268
|
+
React.useEffect(function () {
|
|
12269
|
+
if (type !== exports.CarouselType.Image) return undefined;
|
|
12270
|
+
var el = carouselRef.current;
|
|
12271
|
+
if (!el) return undefined;
|
|
12272
|
+
var handleKeydown = function handleKeydown(e) {
|
|
12273
|
+
if (!el.contains(document.activeElement)) return;
|
|
12274
|
+
if (e.key === 'ArrowRight') {
|
|
12275
|
+
var _swipeRef$current5;
|
|
12276
|
+
e.preventDefault();
|
|
12277
|
+
(_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.nextSlide();
|
|
12278
|
+
} else if (e.key === 'ArrowLeft') {
|
|
12279
|
+
var _swipeRef$current6;
|
|
12280
|
+
e.preventDefault();
|
|
12281
|
+
(_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.prevSlide();
|
|
12282
|
+
}
|
|
12283
|
+
};
|
|
12284
|
+
el.addEventListener('keydown', handleKeydown);
|
|
12285
|
+
return function () {
|
|
12286
|
+
return el.removeEventListener('keydown', handleKeydown);
|
|
12287
|
+
};
|
|
12288
|
+
}, [type]);
|
|
12097
12289
|
var onActiveChangeHandler = function onActiveChangeHandler(value) {
|
|
12098
12290
|
if (useOffset && !active) {
|
|
12099
12291
|
setActive(value);
|
|
12100
12292
|
}
|
|
12101
12293
|
};
|
|
12294
|
+
var onIndexChangeHandler = function onIndexChangeHandler(index) {
|
|
12295
|
+
if (infinite) {
|
|
12296
|
+
setAvailablePrev(true);
|
|
12297
|
+
setAvailableNext(true);
|
|
12298
|
+
return;
|
|
12299
|
+
}
|
|
12300
|
+
setAvailablePrev(index > 0);
|
|
12301
|
+
setAvailableNext(function () {
|
|
12302
|
+
var _swipeRef$current$has2, _swipeRef$current7;
|
|
12303
|
+
return (_swipeRef$current$has2 = (_swipeRef$current7 = swipeRef.current) == null ? void 0 : _swipeRef$current7.hasNext()) != null ? _swipeRef$current$has2 : index < Math.max(0, childrenCount - 1);
|
|
12304
|
+
});
|
|
12305
|
+
};
|
|
12306
|
+
var handleOverflowChange = function handleOverflowChange(overflow) {
|
|
12307
|
+
if (!infinite) {
|
|
12308
|
+
var _swipeRef$current8;
|
|
12309
|
+
setShowRotatorButtons(overflow);
|
|
12310
|
+
var hasNext = (_swipeRef$current8 = swipeRef.current) == null ? void 0 : _swipeRef$current8.hasNext();
|
|
12311
|
+
if (typeof hasNext === 'boolean') {
|
|
12312
|
+
setAvailableNext(hasNext);
|
|
12313
|
+
} else {
|
|
12314
|
+
setAvailableNext(overflow);
|
|
12315
|
+
}
|
|
12316
|
+
}
|
|
12317
|
+
};
|
|
12102
12318
|
var carouselTitleId = "carousel-title-" + title;
|
|
12103
12319
|
var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
|
|
12104
12320
|
var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
|
|
@@ -12136,23 +12352,28 @@ var Carousel = function Carousel(_ref) {
|
|
|
12136
12352
|
columnSpanDevice: 2
|
|
12137
12353
|
}, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
|
|
12138
12354
|
"data-testid": "carousel-buttons-wrapper"
|
|
12139
|
-
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12355
|
+
}, (infinite || showRotatorButtons) && (/*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12140
12356
|
onClickNext: onNext,
|
|
12141
12357
|
onClickPrev: onPrev,
|
|
12142
|
-
availablePrev:
|
|
12358
|
+
availablePrev: availablePrev,
|
|
12359
|
+
availableNext: availableNext,
|
|
12143
12360
|
showFullscreen: type === exports.CarouselType.Image,
|
|
12144
12361
|
onClickFullscreen: onClickFullscreen,
|
|
12145
|
-
isFullscreen: isFullscreen
|
|
12146
|
-
|
|
12147
|
-
|
|
12362
|
+
isFullscreen: isFullscreen,
|
|
12363
|
+
size: infinite ? 'default' : 'small'
|
|
12364
|
+
}))))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, Object.assign({}, infinite ? {
|
|
12365
|
+
active: active
|
|
12366
|
+
} : {}, {
|
|
12148
12367
|
columnStartDesktop: 3,
|
|
12149
|
-
columnSpanDesktop: 14,
|
|
12368
|
+
columnSpanDesktop: infinite ? 14 : 13,
|
|
12150
12369
|
columnStartDevice: 2,
|
|
12151
12370
|
columnSpanDevice: 13
|
|
12152
|
-
}, /*#__PURE__*/React__default.createElement(Swipe, {
|
|
12371
|
+
}), /*#__PURE__*/React__default.createElement(Swipe, {
|
|
12153
12372
|
onActiveChange: function onActiveChange(value) {
|
|
12154
12373
|
return onActiveChangeHandler(value);
|
|
12155
12374
|
},
|
|
12375
|
+
onIndexChange: onIndexChangeHandler,
|
|
12376
|
+
onOverflowChange: handleOverflowChange,
|
|
12156
12377
|
"data-testid": "carousel-swipe",
|
|
12157
12378
|
ref: swipeRef,
|
|
12158
12379
|
infinite: infinite,
|
|
@@ -12160,16 +12381,16 @@ var Carousel = function Carousel(_ref) {
|
|
|
12160
12381
|
}, children))));
|
|
12161
12382
|
};
|
|
12162
12383
|
|
|
12163
|
-
var _templateObject$
|
|
12164
|
-
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
12165
|
-
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
12166
|
-
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12167
|
-
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
12168
|
-
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12169
|
-
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12170
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12384
|
+
var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1;
|
|
12385
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1u || (_templateObject$1u = /*#__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);
|
|
12386
|
+
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__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);
|
|
12387
|
+
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12388
|
+
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__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 a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\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);
|
|
12389
|
+
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__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);
|
|
12390
|
+
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12391
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12171
12392
|
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);
|
|
12172
|
-
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$
|
|
12393
|
+
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__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);
|
|
12173
12394
|
var RotatorButtonsWrapper$1 = /*#__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);
|
|
12174
12395
|
var RotatorButtonsWrapperMobile$1 = /*#__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);
|
|
12175
12396
|
var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
|
|
@@ -12473,9 +12694,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
|
|
|
12473
12694
|
})));
|
|
12474
12695
|
};
|
|
12475
12696
|
|
|
12476
|
-
var _templateObject$
|
|
12477
|
-
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
12478
|
-
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
12697
|
+
var _templateObject$1v, _templateObject3$W;
|
|
12698
|
+
var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
|
|
12699
|
+
var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
|
|
12479
12700
|
|
|
12480
12701
|
var MinimalCarousel = function MinimalCarousel(_ref) {
|
|
12481
12702
|
var children = _ref.children;
|
|
@@ -13070,8 +13291,8 @@ var Theme = function Theme(_ref) {
|
|
|
13070
13291
|
}, children);
|
|
13071
13292
|
};
|
|
13072
13293
|
|
|
13073
|
-
var _templateObject$
|
|
13074
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13294
|
+
var _templateObject$1w;
|
|
13295
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", ";\n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n\n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 4px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n\n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n\n }\n\n @media ", " {\n\n }\n }\n"])), function (_ref) {
|
|
13075
13296
|
var theme = _ref.theme;
|
|
13076
13297
|
return theme.colors.primary;
|
|
13077
13298
|
}, function (_ref2) {
|
|
@@ -14018,10 +14239,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1t || (
|
|
|
14018
14239
|
return theme.footer.tablet.paddingBottom;
|
|
14019
14240
|
}, devices.desktop, devices.largeDesktop);
|
|
14020
14241
|
|
|
14021
|
-
var _templateObject$
|
|
14022
|
-
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$
|
|
14023
|
-
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$
|
|
14024
|
-
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$
|
|
14242
|
+
var _templateObject$1x, _templateObject2$1a, _templateObject3$X;
|
|
14243
|
+
var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14244
|
+
var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
|
|
14245
|
+
var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
|
|
14025
14246
|
|
|
14026
14247
|
/* eslint-disable react/no-danger */
|
|
14027
14248
|
var Quote = function Quote(_ref) {
|
|
@@ -14109,6 +14330,7 @@ exports.Pagination = Pagination;
|
|
|
14109
14330
|
exports.PasswordStrength = PasswordStrength;
|
|
14110
14331
|
exports.Paywall = Paywall;
|
|
14111
14332
|
exports.PeopleListing = PeopleListing;
|
|
14333
|
+
exports.PersonCard = PersonCard;
|
|
14112
14334
|
exports.PrimaryButton = PrimaryButton;
|
|
14113
14335
|
exports.Progress = Progress;
|
|
14114
14336
|
exports.PromoWithTags = PromoWithTags;
|