@royaloperahouse/harmonic 0.10.0-a → 0.11.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/dist/components/molecules/Pagination/Pagination.style.d.ts +1 -1
- package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +3 -6
- package/dist/harmonic.cjs.development.js +133 -98
- 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 +133 -98
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/types/promoWithTags.d.ts +9 -1
- package/package.json +1 -1
|
@@ -4484,14 +4484,14 @@ var Timer = function Timer(_ref) {
|
|
|
4484
4484
|
};
|
|
4485
4485
|
|
|
4486
4486
|
var _templateObject$t;
|
|
4487
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\
|
|
4487
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2013';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4488
4488
|
|
|
4489
4489
|
var TypeTags = function TypeTags(_ref) {
|
|
4490
4490
|
var list = _ref.list;
|
|
4491
4491
|
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
4492
4492
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
4493
4493
|
key: t
|
|
4494
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4494
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
4495
4495
|
size: "large"
|
|
4496
4496
|
}, t));
|
|
4497
4497
|
}));
|
|
@@ -9914,7 +9914,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9914
9914
|
}, creditEntries);
|
|
9915
9915
|
};
|
|
9916
9916
|
|
|
9917
|
-
var _templateObject$17,
|
|
9917
|
+
var _templateObject$17, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$o, _templateObject7$h, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16;
|
|
9918
9918
|
var LENGTH_TEXT = 28;
|
|
9919
9919
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9920
9920
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -9931,9 +9931,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$17 ||
|
|
|
9931
9931
|
var asCard = _ref3.asCard;
|
|
9932
9932
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9933
9933
|
});
|
|
9934
|
-
var
|
|
9935
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\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"])));
|
|
9936
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__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) {
|
|
9934
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__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) {
|
|
9937
9935
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9938
9936
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9939
9937
|
}, function (_ref5) {
|
|
@@ -9957,38 +9955,39 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$z ||
|
|
|
9957
9955
|
}
|
|
9958
9956
|
return '';
|
|
9959
9957
|
});
|
|
9960
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(
|
|
9958
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n @media ", " {\n margin-bottom: ", ";\n }\n"])), function (_ref7) {
|
|
9961
9959
|
var marginBottom = _ref7.marginBottom;
|
|
9962
9960
|
return marginBottom + "px";
|
|
9963
|
-
})
|
|
9964
|
-
var
|
|
9965
|
-
|
|
9966
|
-
|
|
9967
|
-
var
|
|
9968
|
-
var
|
|
9969
|
-
var
|
|
9970
|
-
var
|
|
9971
|
-
var
|
|
9972
|
-
var
|
|
9973
|
-
var
|
|
9974
|
-
var
|
|
9975
|
-
var
|
|
9976
|
-
var imageToLeft = _ref8.imageToLeft;
|
|
9961
|
+
}, devices.mobile, function (_ref8) {
|
|
9962
|
+
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
9963
|
+
return mobileMarginBottom + "px";
|
|
9964
|
+
});
|
|
9965
|
+
var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
9966
|
+
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"])));
|
|
9967
|
+
var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__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);
|
|
9968
|
+
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__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);
|
|
9969
|
+
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
9970
|
+
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__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);
|
|
9971
|
+
var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), ButtonsContainer$2, devices.tablet);
|
|
9972
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref9) {
|
|
9973
|
+
var imageToLeft = _ref9.imageToLeft;
|
|
9977
9974
|
return imageToLeft ? 'left' : 'right';
|
|
9978
9975
|
}, devices.mobile);
|
|
9979
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(
|
|
9980
|
-
var imageToLeft =
|
|
9976
|
+
var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n display: ", ";\n grid-area: row2;\n align-self: start;\n }\n }\n\n ", "\n"])), function (_ref0) {
|
|
9977
|
+
var imageToLeft = _ref0.imageToLeft;
|
|
9981
9978
|
return imageToLeft ? 'right' : 'left';
|
|
9982
|
-
}, devices.mobile, function (
|
|
9983
|
-
var hideSection =
|
|
9979
|
+
}, devices.mobile, function (_ref1) {
|
|
9980
|
+
var hideSection = _ref1.hideSection;
|
|
9984
9981
|
return hideSection ? 'none' : 'block';
|
|
9985
|
-
}, function (
|
|
9986
|
-
var asCard =
|
|
9982
|
+
}, function (_ref10) {
|
|
9983
|
+
var asCard = _ref10.asCard;
|
|
9987
9984
|
return asCard && asCardOverrides;
|
|
9988
9985
|
});
|
|
9989
|
-
var
|
|
9990
|
-
var
|
|
9991
|
-
var
|
|
9986
|
+
var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
9987
|
+
var EndDateText = /*#__PURE__*/styled__default.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--color-base-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
9988
|
+
var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
9989
|
+
var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject15$1 || (_templateObject15$1 = /*#__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);
|
|
9990
|
+
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
9992
9991
|
|
|
9993
9992
|
var _excluded$n = ["text"],
|
|
9994
9993
|
_excluded2$4 = ["text"],
|
|
@@ -10004,6 +10003,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10004
10003
|
title = _ref$title === void 0 ? '' : _ref$title,
|
|
10005
10004
|
_ref$titleSize = _ref.titleSize,
|
|
10006
10005
|
titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
|
|
10006
|
+
titleHierarchy = _ref.titleHierarchy,
|
|
10007
10007
|
subtitle = _ref.subtitle,
|
|
10008
10008
|
text = _ref.text,
|
|
10009
10009
|
textLinks = _ref.textLinks,
|
|
@@ -10030,15 +10030,12 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10030
10030
|
setIsTimerActive = _useState2[1];
|
|
10031
10031
|
var getTitleLevel = function getTitleLevel(size, isCard) {
|
|
10032
10032
|
if (isCard) {
|
|
10033
|
-
return
|
|
10033
|
+
return 'medium';
|
|
10034
10034
|
}
|
|
10035
|
-
|
|
10036
|
-
return 2;
|
|
10037
|
-
}
|
|
10038
|
-
return 3;
|
|
10035
|
+
return size;
|
|
10039
10036
|
};
|
|
10040
|
-
var imageToLeft = imagePosition === 'left';
|
|
10041
10037
|
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
10038
|
+
var imageToLeft = imagePosition === 'left';
|
|
10042
10039
|
var isExtraContentPresent = !!children;
|
|
10043
10040
|
var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
|
|
10044
10041
|
var handleExtraContent = function handleExtraContent(e) {
|
|
@@ -10070,15 +10067,15 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10070
10067
|
restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
|
|
10071
10068
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$3, {
|
|
10072
10069
|
key: index
|
|
10073
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10070
|
+
}, /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, restTextLink), textLinkText));
|
|
10074
10071
|
}) : null;
|
|
10075
10072
|
var renderTimerBlock = function renderTimerBlock() {
|
|
10076
10073
|
if (!timerParams) return null;
|
|
10077
10074
|
if (!isTimerActive && timerParams.endDateText) {
|
|
10078
10075
|
return /*#__PURE__*/React__default.createElement(EndDateText, {
|
|
10079
10076
|
"data-testid": "promo-with-tags-timer-end-date-text"
|
|
10080
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10081
|
-
|
|
10077
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10078
|
+
size: "medium"
|
|
10082
10079
|
}, timerParams.endDateText));
|
|
10083
10080
|
}
|
|
10084
10081
|
return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
|
|
@@ -10102,30 +10099,37 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10102
10099
|
imageToLeft: imageToLeft,
|
|
10103
10100
|
hideSection: showExtraContent,
|
|
10104
10101
|
asCard: asCard
|
|
10105
|
-
}, renderTimerBlock(), /*#__PURE__*/React__default.createElement(
|
|
10106
|
-
marginBottom:
|
|
10107
|
-
|
|
10102
|
+
}, renderTimerBlock(), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!(aboveTitleTags != null && aboveTitleTags.length) && (/*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
10103
|
+
marginBottom: 24,
|
|
10104
|
+
mobileMarginBottom: 24
|
|
10105
|
+
}, /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
10108
10106
|
list: aboveTitleTags
|
|
10109
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
10110
|
-
|
|
10111
|
-
|
|
10112
|
-
}, title)),
|
|
10113
|
-
marginBottom:
|
|
10114
|
-
|
|
10107
|
+
}))), /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
|
|
10108
|
+
size: titleLevel,
|
|
10109
|
+
hierarchy: titleHierarchy
|
|
10110
|
+
}, title)), !!(belowTitleTags != null && belowTitleTags.length) && (/*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
10111
|
+
marginBottom: 16,
|
|
10112
|
+
mobileMarginBottom: 24
|
|
10113
|
+
}, /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
10115
10114
|
list: belowTitleTags
|
|
10116
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
10115
|
+
}))), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
|
|
10116
|
+
size: "medium"
|
|
10117
|
+
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10118
|
+
size: "large",
|
|
10117
10119
|
dangerouslySetInnerHTML: {
|
|
10118
10120
|
__html: textTruncate
|
|
10119
10121
|
}
|
|
10120
|
-
}), middleText && /*#__PURE__*/React__default.createElement(
|
|
10122
|
+
}), middleText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10123
|
+
size: "large",
|
|
10121
10124
|
dangerouslySetInnerHTML: {
|
|
10122
10125
|
__html: middleText
|
|
10123
10126
|
}
|
|
10124
|
-
}), bottomText && /*#__PURE__*/React__default.createElement(
|
|
10127
|
+
})), bottomText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10128
|
+
size: "large",
|
|
10125
10129
|
dangerouslySetInnerHTML: {
|
|
10126
10130
|
__html: bottomText
|
|
10127
10131
|
}
|
|
10128
|
-
}), !!(textLinks != null && textLinks.length) && /*#__PURE__*/React__default.createElement(TextLinksContainer, null, textLinkItems), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$2, {
|
|
10132
|
+
})), !!(textLinks != null && textLinks.length) && /*#__PURE__*/React__default.createElement(TextLinksContainer, null, textLinkItems), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$2, {
|
|
10129
10133
|
hasTextLinks: !!(textLinks != null && textLinks.length),
|
|
10130
10134
|
"data-testid": "buttons-wrapper",
|
|
10131
10135
|
primaryButtonTextLength: firstButtonText.length,
|
|
@@ -10140,9 +10144,9 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10140
10144
|
}, restFirstButton), primaryButtonTextTruncate)))), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonTextTruncate))))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
|
|
10141
10145
|
"data-testid": "extra-content-wrapper",
|
|
10142
10146
|
imageToLeft: imageToLeft
|
|
10143
|
-
}, showExtraContent && (/*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
10144
|
-
|
|
10145
|
-
|
|
10147
|
+
}, showExtraContent && (/*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
|
|
10148
|
+
size: titleSize,
|
|
10149
|
+
hierarchy: titleHierarchy
|
|
10146
10150
|
}, title))), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
10147
10151
|
aspectRatio: exports.AspectRatio['4:3']
|
|
10148
10152
|
}, isExtraContentPresent && showExtraContent ? (/*#__PURE__*/React__default.createElement(ExtraContentWrapper, null, children, /*#__PURE__*/React__default.createElement(IconWrapper$2, {
|
|
@@ -10166,7 +10170,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10166
10170
|
}))));
|
|
10167
10171
|
};
|
|
10168
10172
|
|
|
10169
|
-
var _templateObject$18, _templateObject2$
|
|
10173
|
+
var _templateObject$18, _templateObject2$U, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$p, _templateObject7$i;
|
|
10170
10174
|
var LENGTH_TEXT$2 = 28;
|
|
10171
10175
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
10172
10176
|
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__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) {
|
|
@@ -10176,7 +10180,7 @@ var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 |
|
|
|
10176
10180
|
var imageToLeft = _ref2.imageToLeft;
|
|
10177
10181
|
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'";
|
|
10178
10182
|
}, devices.mobile);
|
|
10179
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10183
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
10180
10184
|
var imageToLeft = _ref3.imageToLeft;
|
|
10181
10185
|
return imageToLeft ? 'left' : 'right';
|
|
10182
10186
|
}, devices.mobile);
|
|
@@ -10184,9 +10188,9 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
10184
10188
|
var imageToLeft = _ref4.imageToLeft;
|
|
10185
10189
|
return imageToLeft ? 'right' : 'left';
|
|
10186
10190
|
}, devices.mobile);
|
|
10187
|
-
var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10188
|
-
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10189
|
-
var BodyCopyHarmonicWithWrapper$
|
|
10191
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10192
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10193
|
+
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);
|
|
10190
10194
|
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__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) {
|
|
10191
10195
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
10192
10196
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
@@ -10372,12 +10376,12 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10372
10376
|
}, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
|
|
10373
10377
|
"data-testid": "content-wrapper",
|
|
10374
10378
|
imageToLeft: imageToLeft
|
|
10375
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
|
|
10379
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper$1, {
|
|
10376
10380
|
size: titleSize,
|
|
10377
10381
|
hierarchy: titleHierarchy
|
|
10378
|
-
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
|
|
10382
|
+
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
10379
10383
|
size: "medium"
|
|
10380
|
-
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$
|
|
10384
|
+
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
10381
10385
|
size: "large",
|
|
10382
10386
|
dangerouslySetInnerHTML: {
|
|
10383
10387
|
__html: text
|
|
@@ -10445,9 +10449,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
10445
10449
|
})));
|
|
10446
10450
|
};
|
|
10447
10451
|
|
|
10448
|
-
var _templateObject$1b, _templateObject2$
|
|
10452
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$J;
|
|
10449
10453
|
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10450
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10454
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
10451
10455
|
var horizontalMode = _ref.horizontalMode;
|
|
10452
10456
|
if (horizontalMode) return 'row';
|
|
10453
10457
|
return 'column';
|
|
@@ -10532,9 +10536,9 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
10532
10536
|
}, error))));
|
|
10533
10537
|
};
|
|
10534
10538
|
|
|
10535
|
-
var _templateObject$1c, _templateObject2$
|
|
10539
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$K;
|
|
10536
10540
|
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__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);
|
|
10537
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10541
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__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"])));
|
|
10538
10542
|
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__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);
|
|
10539
10543
|
|
|
10540
10544
|
/* eslint-disable react/no-danger */
|
|
@@ -10620,7 +10624,7 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
10620
10624
|
}, description)))));
|
|
10621
10625
|
};
|
|
10622
10626
|
|
|
10623
|
-
var _templateObject$1e, _templateObject2$
|
|
10627
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$q, _templateObject7$j, _templateObject8$e, _templateObject9$8, _templateObject0$8, _templateObject1$5;
|
|
10624
10628
|
var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject$1e = /*#__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) {
|
|
10625
10629
|
var theme = _ref.theme;
|
|
10626
10630
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
@@ -10631,7 +10635,7 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject
|
|
|
10631
10635
|
var theme = _ref3.theme;
|
|
10632
10636
|
return theme.colors.lightgrey;
|
|
10633
10637
|
});
|
|
10634
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
10638
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
10635
10639
|
var theme = _ref4.theme;
|
|
10636
10640
|
return theme.colors.darkgrey;
|
|
10637
10641
|
});
|
|
@@ -11001,9 +11005,9 @@ function Select(_ref3) {
|
|
|
11001
11005
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
11002
11006
|
}
|
|
11003
11007
|
|
|
11004
|
-
var _templateObject$1f, _templateObject2$
|
|
11008
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$M, _templateObject4$C;
|
|
11005
11009
|
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
11006
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11010
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__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) {
|
|
11007
11011
|
var width = _ref.width;
|
|
11008
11012
|
if (!width) return 'none';
|
|
11009
11013
|
return width + "px";
|
|
@@ -11139,7 +11143,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11139
11143
|
})));
|
|
11140
11144
|
};
|
|
11141
11145
|
|
|
11142
|
-
var _templateObject$1g, _templateObject2$
|
|
11146
|
+
var _templateObject$1g, _templateObject2$Z;
|
|
11143
11147
|
var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
|
|
11144
11148
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
11145
11149
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
@@ -11150,7 +11154,7 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1g || (_temp
|
|
|
11150
11154
|
height = _ref2.height;
|
|
11151
11155
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
11152
11156
|
});
|
|
11153
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$
|
|
11157
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
11154
11158
|
|
|
11155
11159
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
11156
11160
|
var caption = _ref.caption,
|
|
@@ -11184,9 +11188,9 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11184
11188
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
11185
11189
|
};
|
|
11186
11190
|
|
|
11187
|
-
var _templateObject$1h, _templateObject2
|
|
11191
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N;
|
|
11188
11192
|
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
11189
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11193
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
11190
11194
|
var displayAttribution = _ref.displayAttribution;
|
|
11191
11195
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
11192
11196
|
});
|
|
@@ -11215,9 +11219,9 @@ var Quote = function Quote(_ref) {
|
|
|
11215
11219
|
}, attribution))));
|
|
11216
11220
|
};
|
|
11217
11221
|
|
|
11218
|
-
var _templateObject$1i, _templateObject2
|
|
11222
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$r;
|
|
11219
11223
|
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__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"])));
|
|
11220
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2
|
|
11224
|
+
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"])));
|
|
11221
11225
|
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11222
11226
|
var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11223
11227
|
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__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);
|
|
@@ -11259,9 +11263,9 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
11259
11263
|
}, title)))));
|
|
11260
11264
|
};
|
|
11261
11265
|
|
|
11262
|
-
var _templateObject$1j, _templateObject2$
|
|
11266
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$E, _templateObject5$x;
|
|
11263
11267
|
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__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"])));
|
|
11264
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11268
|
+
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"])));
|
|
11265
11269
|
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
11266
11270
|
var isVisible = _ref.isVisible;
|
|
11267
11271
|
return isVisible ? 'visible' : 'hidden';
|
|
@@ -11351,9 +11355,9 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
11351
11355
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
11352
11356
|
};
|
|
11353
11357
|
|
|
11354
|
-
var _templateObject$1k, _templateObject2$
|
|
11358
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$Q, _templateObject4$F, _templateObject5$y;
|
|
11355
11359
|
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11356
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
11360
|
+
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);
|
|
11357
11361
|
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$Q || (_templateObject3$Q = /*#__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);
|
|
11358
11362
|
var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__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) {
|
|
11359
11363
|
var isActive = _ref.isActive;
|
|
@@ -11515,9 +11519,9 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
11515
11519
|
});
|
|
11516
11520
|
};
|
|
11517
11521
|
|
|
11518
|
-
var _templateObject$1l, _templateObject2$
|
|
11522
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$R, _templateObject4$G, _templateObject5$z, _templateObject6$s;
|
|
11519
11523
|
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11520
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11524
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11521
11525
|
var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
11522
11526
|
var color = _ref.color;
|
|
11523
11527
|
return "var(--base-color-" + color + ")";
|
|
@@ -11609,11 +11613,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
11609
11613
|
}, strengthLabel))));
|
|
11610
11614
|
};
|
|
11611
11615
|
|
|
11612
|
-
var _templateObject$1m, _templateObject2$
|
|
11616
|
+
var _templateObject$1m, _templateObject2$13, _templateObject3$S, _templateObject4$H, _templateObject5$A, _templateObject6$t, _templateObject7$k, _templateObject8$f;
|
|
11613
11617
|
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11614
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11618
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11615
11619
|
var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11616
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform:
|
|
11620
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__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) {
|
|
11617
11621
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
11618
11622
|
}, devices.tablet, devices.mobile);
|
|
11619
11623
|
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$A || (_templateObject5$A = /*#__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) {
|
|
@@ -11724,20 +11728,53 @@ var Table = function Table(_ref) {
|
|
|
11724
11728
|
var _useState2 = React.useState(false),
|
|
11725
11729
|
showScrollButtons = _useState2[0],
|
|
11726
11730
|
setShowScrollButtons = _useState2[1];
|
|
11731
|
+
var tableRef = React.useRef(null);
|
|
11732
|
+
var _useState3 = React.useState(true),
|
|
11733
|
+
atStart = _useState3[0],
|
|
11734
|
+
setAtStart = _useState3[1];
|
|
11735
|
+
var _useState4 = React.useState(false),
|
|
11736
|
+
atEnd = _useState4[0],
|
|
11737
|
+
setAtEnd = _useState4[1];
|
|
11738
|
+
var checkScrollPosition = function checkScrollPosition() {
|
|
11739
|
+
if (tableRef.current) {
|
|
11740
|
+
var _tableRef$current = tableRef.current,
|
|
11741
|
+
scrollLeft = _tableRef$current.scrollLeft,
|
|
11742
|
+
scrollWidth = _tableRef$current.scrollWidth,
|
|
11743
|
+
clientWidth = _tableRef$current.clientWidth;
|
|
11744
|
+
setAtStart(scrollLeft === 0);
|
|
11745
|
+
setAtEnd(scrollLeft + clientWidth >= scrollWidth);
|
|
11746
|
+
}
|
|
11747
|
+
};
|
|
11748
|
+
var handleNext = function handleNext() {
|
|
11749
|
+
scrollTable(tableRef, 'right');
|
|
11750
|
+
};
|
|
11751
|
+
var handlePrev = function handlePrev() {
|
|
11752
|
+
scrollTable(tableRef, 'left');
|
|
11753
|
+
};
|
|
11727
11754
|
var handlePageChange = function handlePageChange(page) {
|
|
11728
11755
|
setCurrentPage(page - 1);
|
|
11729
11756
|
};
|
|
11730
|
-
var tableRef = React.useRef(null);
|
|
11731
11757
|
React.useLayoutEffect(function () {
|
|
11732
11758
|
var horizontalScroll = function horizontalScroll() {
|
|
11733
11759
|
if (tableRef.current) {
|
|
11734
11760
|
setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
|
|
11761
|
+
checkScrollPosition();
|
|
11735
11762
|
}
|
|
11736
11763
|
};
|
|
11764
|
+
var handleScroll = function handleScroll() {
|
|
11765
|
+
checkScrollPosition();
|
|
11766
|
+
};
|
|
11737
11767
|
horizontalScroll();
|
|
11738
11768
|
window.addEventListener('resize', horizontalScroll);
|
|
11769
|
+
var table = tableRef.current;
|
|
11770
|
+
if (table) {
|
|
11771
|
+
table.addEventListener('scroll', handleScroll);
|
|
11772
|
+
}
|
|
11739
11773
|
return function () {
|
|
11740
|
-
|
|
11774
|
+
window.removeEventListener('resize', horizontalScroll);
|
|
11775
|
+
if (table) {
|
|
11776
|
+
table.removeEventListener('scroll', handleScroll);
|
|
11777
|
+
}
|
|
11741
11778
|
};
|
|
11742
11779
|
}, []);
|
|
11743
11780
|
var totalRows = Array.isArray(children) ? children.length : 1;
|
|
@@ -11764,12 +11801,10 @@ var Table = function Table(_ref) {
|
|
|
11764
11801
|
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11765
11802
|
className: className
|
|
11766
11803
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
11767
|
-
onClickPrev:
|
|
11768
|
-
|
|
11769
|
-
|
|
11770
|
-
|
|
11771
|
-
return scrollTable(tableRef, 'right');
|
|
11772
|
-
}
|
|
11804
|
+
onClickPrev: handlePrev,
|
|
11805
|
+
onClickNext: handleNext,
|
|
11806
|
+
availablePrev: !atStart,
|
|
11807
|
+
availableNext: !atEnd
|
|
11773
11808
|
}))), /*#__PURE__*/React__default.createElement(Container$6, {
|
|
11774
11809
|
role: "table",
|
|
11775
11810
|
tabIndex: 0,
|
|
@@ -11793,7 +11828,7 @@ var Table = function Table(_ref) {
|
|
|
11793
11828
|
}))));
|
|
11794
11829
|
};
|
|
11795
11830
|
|
|
11796
|
-
var _templateObject$1n, _templateObject2$
|
|
11831
|
+
var _templateObject$1n, _templateObject2$14, _templateObject3$T, _templateObject4$I, _templateObject5$B, _templateObject6$u, _templateObject7$l, _templateObject8$g, _templateObject9$9, _templateObject0$9, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
|
|
11797
11832
|
var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11798
11833
|
var theme = _ref.theme;
|
|
11799
11834
|
return "var(--color-" + theme + ")";
|
|
@@ -11801,7 +11836,7 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
|
|
|
11801
11836
|
var theme = _ref2.theme;
|
|
11802
11837
|
return "var(--color-" + theme + ")";
|
|
11803
11838
|
});
|
|
11804
|
-
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
11839
|
+
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);
|
|
11805
11840
|
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$T || (_templateObject3$T = /*#__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);
|
|
11806
11841
|
var Error = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
11807
11842
|
var Form = /*#__PURE__*/styled__default.form(_templateObject5$B || (_templateObject5$B = /*#__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);
|
|
@@ -12216,10 +12251,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12216
12251
|
}))))));
|
|
12217
12252
|
};
|
|
12218
12253
|
|
|
12219
|
-
var _templateObject$1o, _templateObject2$
|
|
12254
|
+
var _templateObject$1o, _templateObject2$15, _templateObject4$J, _templateObject5$C;
|
|
12220
12255
|
var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__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) {
|
|
12221
12256
|
var withShadow = _ref.withShadow;
|
|
12222
|
-
return withShadow && styled.css(_templateObject2$
|
|
12257
|
+
return withShadow && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12223
12258
|
}, devices.mobile);
|
|
12224
12259
|
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$J || (_templateObject4$J = /*#__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);
|
|
12225
12260
|
var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|