@royaloperahouse/harmonic 0.15.0 → 0.17.0-a
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 +0 -7
- package/README.md +252 -43
- package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/Card/Card.style.d.ts +1 -1
- package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts +1 -1
- package/dist/components/molecules/Information/Information.style.d.ts +1 -1
- package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.d.ts +4 -0
- package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.style.d.ts +14 -0
- package/dist/components/molecules/PageHeading/HighlightCarousel/index.d.ts +2 -0
- package/dist/components/molecules/PageHeading/index.d.ts +2 -2
- package/dist/components/molecules/Pagination/Pagination.style.d.ts +1 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +273 -3
- package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +273 -3
- package/dist/components/molecules/index.d.ts +2 -2
- package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +271 -1
- package/dist/harmonic.cjs.development.js +126 -101
- 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 +126 -101
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/impactHeader.d.ts +2 -20
- package/dist/types/types.d.ts +0 -61
- package/package.json +1 -1
- package/README.GIT +0 -294
- package/dist/components/molecules/CastFilter/CastFilters.d.ts +0 -4
- package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -16
- package/dist/components/molecules/CastFilter/index.d.ts +0 -2
- package/dist/components/molecules/PageHeading/Highlight/Highlight.d.ts +0 -4
- package/dist/components/molecules/PageHeading/Highlight/Highlight.style.d.ts +0 -9
- package/dist/components/molecules/PageHeading/Highlight/index.d.ts +0 -2
|
@@ -7489,7 +7489,7 @@ var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$4
|
|
|
7489
7489
|
|
|
7490
7490
|
var _templateObject$O, _templateObject2$B;
|
|
7491
7491
|
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
7492
|
-
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n
|
|
7492
|
+
var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
7493
7493
|
var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
7494
7494
|
var transitioning = _ref.transitioning;
|
|
7495
7495
|
return transitioning ? 'transform 0.3s ease' : 'none';
|
|
@@ -9851,58 +9851,10 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
|
9851
9851
|
})))))))))));
|
|
9852
9852
|
};
|
|
9853
9853
|
|
|
9854
|
-
var _templateObject$15, _templateObject2$Q, _templateObject3$E,
|
|
9855
|
-
var
|
|
9856
|
-
|
|
9857
|
-
|
|
9858
|
-
leftNoImage: '1 / 1 / 3 / 12',
|
|
9859
|
-
right: '1 / 7 / 3 / 17'
|
|
9860
|
-
},
|
|
9861
|
-
mobile: {
|
|
9862
|
-
leftWithImage: '3 / 1 / 4 / 15',
|
|
9863
|
-
leftNoImage: '1 / 1 / 3 / 15',
|
|
9864
|
-
right: '2 / 1 / 3 / 15'
|
|
9865
|
-
}
|
|
9866
|
-
};
|
|
9867
|
-
var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
|
|
9868
|
-
var $background = _ref.$background;
|
|
9869
|
-
return "var(--color-" + $background + ")";
|
|
9870
|
-
});
|
|
9871
|
-
var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
9872
|
-
var hasImage = _ref2.hasImage;
|
|
9873
|
-
return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
|
|
9874
|
-
}, devices.mobileAndTablet, function (_ref3) {
|
|
9875
|
-
var hasImage = _ref3.hasImage;
|
|
9876
|
-
return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
|
|
9877
|
-
});
|
|
9878
|
-
var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
|
|
9879
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
9880
|
-
|
|
9881
|
-
var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
|
|
9882
|
-
var _image$src, _image$alt;
|
|
9883
|
-
var image = _ref.image,
|
|
9884
|
-
children = _ref.children,
|
|
9885
|
-
_ref$background = _ref.background,
|
|
9886
|
-
background = _ref$background === void 0 ? 'base-black' : _ref$background,
|
|
9887
|
-
className = _ref.className;
|
|
9888
|
-
return /*#__PURE__*/React__default.createElement(HighlightPanelGrid, {
|
|
9889
|
-
className: className,
|
|
9890
|
-
"$background": background,
|
|
9891
|
-
"data-testid": "highlight-heading-wrapper"
|
|
9892
|
-
}, /*#__PURE__*/React__default.createElement(LeftPanel$1, {
|
|
9893
|
-
hasImage: !!image
|
|
9894
|
-
}, /*#__PURE__*/React__default.createElement(Wrapper$6, null, children)), image && (/*#__PURE__*/React__default.createElement(RightPanel$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
9895
|
-
aspectRatio: exports.AspectRatio['4:3']
|
|
9896
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
9897
|
-
src: (_image$src = image == null ? void 0 : image.src) != null ? _image$src : '',
|
|
9898
|
-
alt: (_image$alt = image == null ? void 0 : image.alt) != null ? _image$alt : ''
|
|
9899
|
-
})))));
|
|
9900
|
-
};
|
|
9901
|
-
|
|
9902
|
-
var _templateObject$16, _templateObject2$R, _templateObject3$F, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$8, _templateObject0$7;
|
|
9903
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
9904
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
9905
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
9854
|
+
var _templateObject$15, _templateObject2$Q, _templateObject3$E, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$8, _templateObject0$7;
|
|
9855
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
9856
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
9857
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
9906
9858
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
9907
9859
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
9908
9860
|
var invert = _ref.invert,
|
|
@@ -10123,13 +10075,86 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
10123
10075
|
}), linkText))))));
|
|
10124
10076
|
};
|
|
10125
10077
|
|
|
10126
|
-
var _templateObject$
|
|
10078
|
+
var _templateObject$16, _templateObject2$R, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h;
|
|
10079
|
+
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$16 || (_templateObject$16 = /*#__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 color: var(--color-base-white);\n user-select: none;\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
10080
|
+
var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
|
|
10081
|
+
var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
|
|
10082
|
+
var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
|
|
10083
|
+
var hasImages = _ref.hasImages;
|
|
10084
|
+
return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
10085
|
+
}, devices.mobile, function (_ref2) {
|
|
10086
|
+
var hasImages = _ref2.hasImages;
|
|
10087
|
+
return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
10088
|
+
});
|
|
10089
|
+
var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
|
|
10090
|
+
var hasMultipleImages = _ref3.hasMultipleImages;
|
|
10091
|
+
return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
|
|
10092
|
+
}, devices.mobile);
|
|
10093
|
+
var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-bottom: 8px;\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 margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
|
|
10094
|
+
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__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);
|
|
10095
|
+
|
|
10096
|
+
var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
|
|
10097
|
+
var title = _ref.title,
|
|
10098
|
+
subtitle = _ref.subtitle,
|
|
10099
|
+
text = _ref.text,
|
|
10100
|
+
images = _ref.images;
|
|
10101
|
+
var headerImages = images || [];
|
|
10102
|
+
var hasImages = !!headerImages.length;
|
|
10103
|
+
var hasMultipleImages = headerImages.length > 1;
|
|
10104
|
+
var swipeRef = React.useRef(null);
|
|
10105
|
+
var onNext = function onNext() {
|
|
10106
|
+
var _swipeRef$current;
|
|
10107
|
+
return (_swipeRef$current = swipeRef.current) == null ? void 0 : _swipeRef$current.nextSlide();
|
|
10108
|
+
};
|
|
10109
|
+
var onPrev = function onPrev() {
|
|
10110
|
+
var _swipeRef$current2;
|
|
10111
|
+
return (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.prevSlide();
|
|
10112
|
+
};
|
|
10113
|
+
return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
|
|
10114
|
+
theme: exports.ThemeType.Stream
|
|
10115
|
+
}, /*#__PURE__*/React__default.createElement(HighlightsGrid$1, null, hasImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10116
|
+
onClickNext: onNext,
|
|
10117
|
+
onClickPrev: onPrev
|
|
10118
|
+
}))), /*#__PURE__*/React__default.createElement(HighlightsInfoWrapper, {
|
|
10119
|
+
hasImages: hasImages
|
|
10120
|
+
}, /*#__PURE__*/React__default.createElement(HighlightTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
10121
|
+
size: "large",
|
|
10122
|
+
hierarchy: "h1"
|
|
10123
|
+
}, title), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
10124
|
+
size: "large"
|
|
10125
|
+
}, subtitle)), text ? (/*#__PURE__*/React__default.createElement(HighlightTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, null, /*#__PURE__*/React__default.createElement("span", {
|
|
10126
|
+
dangerouslySetInnerHTML: {
|
|
10127
|
+
__html: text
|
|
10128
|
+
}
|
|
10129
|
+
})))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
|
|
10130
|
+
hasMultipleImages: hasMultipleImages
|
|
10131
|
+
}, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
|
|
10132
|
+
"data-testid": "rotator-buttons"
|
|
10133
|
+
}, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10134
|
+
onClickNext: onNext,
|
|
10135
|
+
onClickPrev: onPrev
|
|
10136
|
+
}))), /*#__PURE__*/React__default.createElement(Swipe, {
|
|
10137
|
+
infinite: hasMultipleImages,
|
|
10138
|
+
ref: swipeRef
|
|
10139
|
+
}, headerImages.map(function (image, index) {
|
|
10140
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
10141
|
+
key: "carousel-image-" + index
|
|
10142
|
+
}, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
10143
|
+
aspectRatio: exports.AspectRatio['4:3']
|
|
10144
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
10145
|
+
src: image.src,
|
|
10146
|
+
alt: image.alt
|
|
10147
|
+
})));
|
|
10148
|
+
}))))));
|
|
10149
|
+
};
|
|
10150
|
+
|
|
10151
|
+
var _templateObject$17, _templateObject2$S, _templateObject3$G, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$d;
|
|
10127
10152
|
var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
|
|
10128
10153
|
var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
10129
10154
|
var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
|
|
10130
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$
|
|
10131
|
-
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$
|
|
10132
|
-
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$
|
|
10155
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
|
|
10156
|
+
var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
10157
|
+
var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
|
|
10133
10158
|
var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
|
|
10134
10159
|
var active = _ref.active;
|
|
10135
10160
|
return active ? "var(--color-primary-red)" : 'inherit';
|
|
@@ -10282,14 +10307,14 @@ var Pagination = function Pagination(_ref) {
|
|
|
10282
10307
|
}))))));
|
|
10283
10308
|
};
|
|
10284
10309
|
|
|
10285
|
-
var _templateObject$18, _templateObject2$T, _templateObject3$H, _templateObject4$z, _templateObject5$
|
|
10310
|
+
var _templateObject$18, _templateObject2$T, _templateObject3$H, _templateObject4$z, _templateObject5$u, _templateObject6$n, _templateObject7$j;
|
|
10286
10311
|
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\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);
|
|
10287
10312
|
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
10288
10313
|
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
10289
10314
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
10290
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10291
|
-
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$
|
|
10292
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$
|
|
10315
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
10316
|
+
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
10317
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
|
|
10293
10318
|
|
|
10294
10319
|
var Person = function Person(_ref) {
|
|
10295
10320
|
var person = _ref.person,
|
|
@@ -10480,7 +10505,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
10480
10505
|
}, creditEntries);
|
|
10481
10506
|
};
|
|
10482
10507
|
|
|
10483
|
-
var _templateObject$1a, _templateObject3$J, _templateObject4$B, _templateObject5$
|
|
10508
|
+
var _templateObject$1a, _templateObject3$J, _templateObject4$B, _templateObject5$v, _templateObject6$o, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16;
|
|
10484
10509
|
var LENGTH_TEXT = 28;
|
|
10485
10510
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
10486
10511
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -10528,9 +10553,9 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
|
10528
10553
|
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
10529
10554
|
return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
|
|
10530
10555
|
});
|
|
10531
|
-
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10532
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
10533
|
-
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10556
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
10557
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
10558
|
+
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__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);
|
|
10534
10559
|
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__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);
|
|
10535
10560
|
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
10536
10561
|
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__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);
|
|
@@ -10735,7 +10760,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10735
10760
|
}))));
|
|
10736
10761
|
};
|
|
10737
10762
|
|
|
10738
|
-
var _templateObject$1b, _templateObject2$V, _templateObject3$K, _templateObject4$C, _templateObject5$
|
|
10763
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$K, _templateObject4$C, _templateObject5$w, _templateObject6$p, _templateObject7$l;
|
|
10739
10764
|
var LENGTH_TEXT$2 = 28;
|
|
10740
10765
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
10741
10766
|
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$1b || (_templateObject$1b = /*#__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) {
|
|
@@ -10754,9 +10779,9 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
10754
10779
|
return imageToLeft ? 'right' : 'left';
|
|
10755
10780
|
}, devices.mobile);
|
|
10756
10781
|
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10757
|
-
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$
|
|
10758
|
-
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$
|
|
10759
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
10782
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10783
|
+
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$p || (_templateObject6$p = /*#__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);
|
|
10784
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__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) {
|
|
10760
10785
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
10761
10786
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
10762
10787
|
_ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
|
|
@@ -11111,7 +11136,7 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
11111
11136
|
}, description)))));
|
|
11112
11137
|
};
|
|
11113
11138
|
|
|
11114
|
-
var _templateObject$1g, _templateObject2$Y, _templateObject3$N, _templateObject4$D, _templateObject5$
|
|
11139
|
+
var _templateObject$1g, _templateObject2$Y, _templateObject3$N, _templateObject4$D, _templateObject5$x, _templateObject6$q, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9, _templateObject1$5;
|
|
11115
11140
|
var stateStyles = /*#__PURE__*/styled.css(_templateObject$1g || (_templateObject$1g = /*#__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) {
|
|
11116
11141
|
var theme = _ref.theme;
|
|
11117
11142
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
@@ -11135,9 +11160,9 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
11135
11160
|
color: theme.colors.black,
|
|
11136
11161
|
title: 'Select Arrow'
|
|
11137
11162
|
};
|
|
11138
|
-
})(_templateObject5$
|
|
11139
|
-
var Wrapper$
|
|
11140
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11163
|
+
})(_templateObject5$x || (_templateObject5$x = /*#__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"])));
|
|
11164
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
11165
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
11141
11166
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
11142
11167
|
var Option = /*#__PURE__*/styled__default.li(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
11143
11168
|
var theme = _ref6.theme,
|
|
@@ -11445,7 +11470,7 @@ function Select(_ref3) {
|
|
|
11445
11470
|
}
|
|
11446
11471
|
setSelectedValue(options[0]);
|
|
11447
11472
|
}, [options, resetWhenOptionsUpdate]);
|
|
11448
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11473
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
11449
11474
|
level: 1,
|
|
11450
11475
|
tag: "p",
|
|
11451
11476
|
"data-testid": "select-label"
|
|
@@ -11631,7 +11656,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11631
11656
|
};
|
|
11632
11657
|
|
|
11633
11658
|
var _templateObject$1i, _templateObject2$_;
|
|
11634
|
-
var Wrapper$
|
|
11659
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n margin: 0;\n\n ", " {\n height: calc(100% - 34px);\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n\n @media ", " {\n height: calc(100% - 30px);\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
11635
11660
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
11636
11661
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
11637
11662
|
return aspectRatio;
|
|
@@ -11719,7 +11744,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11719
11744
|
};
|
|
11720
11745
|
return /*#__PURE__*/React__default.cloneElement(childElement, newProps);
|
|
11721
11746
|
});
|
|
11722
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11747
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, {
|
|
11723
11748
|
aspectRatio: aspectRatio,
|
|
11724
11749
|
ref: wrapperRef,
|
|
11725
11750
|
height: height
|
|
@@ -11730,13 +11755,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11730
11755
|
}, caption));
|
|
11731
11756
|
};
|
|
11732
11757
|
|
|
11733
|
-
var _templateObject$1j, _templateObject2$$, _templateObject3$P, _templateObject4$F, _templateObject5$
|
|
11758
|
+
var _templateObject$1j, _templateObject2$$, _templateObject3$P, _templateObject4$F, _templateObject5$y, _templateObject6$r;
|
|
11734
11759
|
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__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"])));
|
|
11735
11760
|
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
11736
11761
|
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11737
11762
|
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11738
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
11739
|
-
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
11763
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$y || (_templateObject5$y = /*#__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);
|
|
11764
|
+
var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__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);
|
|
11740
11765
|
|
|
11741
11766
|
var MiniCard = function MiniCard(_ref) {
|
|
11742
11767
|
var _ref$title = _ref.title,
|
|
@@ -11774,7 +11799,7 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
11774
11799
|
}, title)))));
|
|
11775
11800
|
};
|
|
11776
11801
|
|
|
11777
|
-
var _templateObject$1k, _templateObject2$10, _templateObject3$Q, _templateObject4$G, _templateObject5$
|
|
11802
|
+
var _templateObject$1k, _templateObject2$10, _templateObject3$Q, _templateObject4$G, _templateObject5$z;
|
|
11778
11803
|
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1k || (_templateObject$1k = /*#__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"])));
|
|
11779
11804
|
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__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"])));
|
|
11780
11805
|
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
@@ -11785,7 +11810,7 @@ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$G ||
|
|
|
11785
11810
|
var isVisible = _ref2.isVisible;
|
|
11786
11811
|
return isVisible ? 'visible' : 'hidden';
|
|
11787
11812
|
});
|
|
11788
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
11813
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$z || (_templateObject5$z = /*#__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"])));
|
|
11789
11814
|
|
|
11790
11815
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
11791
11816
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -11866,7 +11891,7 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
11866
11891
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
11867
11892
|
};
|
|
11868
11893
|
|
|
11869
|
-
var _templateObject$1l, _templateObject2$11, _templateObject3$R, _templateObject4$H, _templateObject5$
|
|
11894
|
+
var _templateObject$1l, _templateObject2$11, _templateObject3$R, _templateObject4$H, _templateObject5$A;
|
|
11870
11895
|
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11871
11896
|
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$11 || (_templateObject2$11 = /*#__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);
|
|
11872
11897
|
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$R || (_templateObject3$R = /*#__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);
|
|
@@ -11874,7 +11899,7 @@ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$H || (_template
|
|
|
11874
11899
|
var isActive = _ref.isActive;
|
|
11875
11900
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
11876
11901
|
}, exports.Colors.MidGrey);
|
|
11877
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
11902
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$A || (_templateObject5$A = /*#__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) {
|
|
11878
11903
|
var isOpen = _ref2.isOpen;
|
|
11879
11904
|
return isOpen ? 'block' : 'none';
|
|
11880
11905
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -12030,7 +12055,7 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
12030
12055
|
});
|
|
12031
12056
|
};
|
|
12032
12057
|
|
|
12033
|
-
var _templateObject$1m, _templateObject2$12, _templateObject3$S, _templateObject4$I, _templateObject5$
|
|
12058
|
+
var _templateObject$1m, _templateObject2$12, _templateObject3$S, _templateObject4$I, _templateObject5$B, _templateObject6$s;
|
|
12034
12059
|
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
12035
12060
|
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
12036
12061
|
var Section = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
@@ -12038,11 +12063,11 @@ var Section = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateO
|
|
|
12038
12063
|
return "var(--base-color-" + color + ")";
|
|
12039
12064
|
});
|
|
12040
12065
|
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
12041
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
12066
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
12042
12067
|
var color = _ref2.color;
|
|
12043
12068
|
return "var(--base-color-" + color + ")";
|
|
12044
12069
|
});
|
|
12045
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12070
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
12046
12071
|
var color = _ref3.color;
|
|
12047
12072
|
return "var(--base-color-" + color + ")";
|
|
12048
12073
|
});
|
|
@@ -12124,18 +12149,18 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
12124
12149
|
}, strengthLabel))));
|
|
12125
12150
|
};
|
|
12126
12151
|
|
|
12127
|
-
var _templateObject$1n, _templateObject2$13, _templateObject3$T, _templateObject4$J, _templateObject5$
|
|
12152
|
+
var _templateObject$1n, _templateObject2$13, _templateObject3$T, _templateObject4$J, _templateObject5$C, _templateObject6$t, _templateObject7$n, _templateObject8$g;
|
|
12128
12153
|
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
12129
12154
|
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
12130
|
-
var Wrapper$
|
|
12155
|
+
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
12131
12156
|
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$J || (_templateObject4$J = /*#__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) {
|
|
12132
12157
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
12133
12158
|
}, devices.tablet, devices.mobile);
|
|
12134
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
12159
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$C || (_templateObject5$C = /*#__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) {
|
|
12135
12160
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
12136
12161
|
}, devices.mobile);
|
|
12137
|
-
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$
|
|
12138
|
-
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12162
|
+
var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$t || (_templateObject6$t = /*#__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);
|
|
12163
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__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"])));
|
|
12139
12164
|
var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
12140
12165
|
|
|
12141
12166
|
/* eslint-disable react/no-danger */
|
|
@@ -12309,7 +12334,7 @@ var Table = function Table(_ref) {
|
|
|
12309
12334
|
} else {
|
|
12310
12335
|
visibleRows = totalRows;
|
|
12311
12336
|
}
|
|
12312
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
12337
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
12313
12338
|
className: className
|
|
12314
12339
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
12315
12340
|
onClickPrev: handlePrev,
|
|
@@ -12339,8 +12364,8 @@ var Table = function Table(_ref) {
|
|
|
12339
12364
|
}))));
|
|
12340
12365
|
};
|
|
12341
12366
|
|
|
12342
|
-
var _templateObject$1o, _templateObject2$14, _templateObject3$U, _templateObject4$K, _templateObject5$
|
|
12343
|
-
var Wrapper$
|
|
12367
|
+
var _templateObject$1o, _templateObject2$14, _templateObject3$U, _templateObject4$K, _templateObject5$D, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
|
|
12368
|
+
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
12344
12369
|
var theme = _ref.theme;
|
|
12345
12370
|
return "var(--color-" + theme + ")";
|
|
12346
12371
|
}, function (_ref2) {
|
|
@@ -12350,9 +12375,9 @@ var Wrapper$a = /*#__PURE__*/styled__default('div')(_templateObject$1o || (_temp
|
|
|
12350
12375
|
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
12351
12376
|
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$U || (_templateObject3$U = /*#__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);
|
|
12352
12377
|
var Error = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
12353
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
12354
|
-
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
12355
|
-
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12378
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$D || (_templateObject5$D = /*#__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);
|
|
12379
|
+
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__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);
|
|
12380
|
+
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
12356
12381
|
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
12357
12382
|
var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__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);
|
|
12358
12383
|
var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__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);
|
|
@@ -12699,7 +12724,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12699
12724
|
React.useEffect(function () {
|
|
12700
12725
|
setDropdownOpen(isOpened);
|
|
12701
12726
|
}, [isOpened]);
|
|
12702
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
12727
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, {
|
|
12703
12728
|
theme: themeToColor(theme),
|
|
12704
12729
|
className: className
|
|
12705
12730
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -12764,13 +12789,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12764
12789
|
}))))));
|
|
12765
12790
|
};
|
|
12766
12791
|
|
|
12767
|
-
var _templateObject$1p, _templateObject2$15, _templateObject4$L, _templateObject5$
|
|
12792
|
+
var _templateObject$1p, _templateObject2$15, _templateObject4$L, _templateObject5$E;
|
|
12768
12793
|
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1p || (_templateObject$1p = /*#__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) {
|
|
12769
12794
|
var withShadow = _ref.withShadow;
|
|
12770
12795
|
return withShadow && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12771
12796
|
}, devices.mobile);
|
|
12772
12797
|
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$L || (_templateObject4$L = /*#__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);
|
|
12773
|
-
var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject5$
|
|
12798
|
+
var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
12774
12799
|
|
|
12775
12800
|
var AnchorBar = function AnchorBar(_ref) {
|
|
12776
12801
|
var cta = _ref.cta,
|
|
@@ -13855,7 +13880,7 @@ exports.NavigationText = NavigationText;
|
|
|
13855
13880
|
exports.Overline = Overline;
|
|
13856
13881
|
exports.PageHeading = PageHeading;
|
|
13857
13882
|
exports.PageHeadingCompact = PageHeadingCompact;
|
|
13858
|
-
exports.
|
|
13883
|
+
exports.PageHeadingHighlightCarousel = PageHeadingHighlightCarousel;
|
|
13859
13884
|
exports.PageHeadingImpact = PageHeadingImpact;
|
|
13860
13885
|
exports.PageHeadingPanel = PageHeadingPanel;
|
|
13861
13886
|
exports.PageHeadingPromo = PageHeadingPromo;
|