@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
package/dist/harmonic.esm.js
CHANGED
|
@@ -4509,14 +4509,14 @@ var Timer = function Timer(_ref) {
|
|
|
4509
4509
|
};
|
|
4510
4510
|
|
|
4511
4511
|
var _templateObject$t;
|
|
4512
|
-
var TypeTagsContainer = /*#__PURE__*/styled.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: '\
|
|
4512
|
+
var TypeTagsContainer = /*#__PURE__*/styled.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"])));
|
|
4513
4513
|
|
|
4514
4514
|
var TypeTags = function TypeTags(_ref) {
|
|
4515
4515
|
var list = _ref.list;
|
|
4516
4516
|
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
4517
4517
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
4518
4518
|
key: t
|
|
4519
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4519
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
4520
4520
|
size: "large"
|
|
4521
4521
|
}, t));
|
|
4522
4522
|
}));
|
|
@@ -9941,7 +9941,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
9941
9941
|
}, creditEntries);
|
|
9942
9942
|
};
|
|
9943
9943
|
|
|
9944
|
-
var _templateObject$17,
|
|
9944
|
+
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;
|
|
9945
9945
|
var LENGTH_TEXT = 28;
|
|
9946
9946
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
9947
9947
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -9958,9 +9958,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templa
|
|
|
9958
9958
|
var asCard = _ref3.asCard;
|
|
9959
9959
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
9960
9960
|
});
|
|
9961
|
-
var
|
|
9962
|
-
var PromoWithTagsText = /*#__PURE__*/styled.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"])));
|
|
9963
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
|
|
9961
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
|
|
9964
9962
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
9965
9963
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
9966
9964
|
}, function (_ref5) {
|
|
@@ -9984,38 +9982,39 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$z || (_templat
|
|
|
9984
9982
|
}
|
|
9985
9983
|
return '';
|
|
9986
9984
|
});
|
|
9987
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(
|
|
9985
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n @media ", " {\n margin-bottom: ", ";\n }\n"])), function (_ref7) {
|
|
9988
9986
|
var marginBottom = _ref7.marginBottom;
|
|
9989
9987
|
return marginBottom + "px";
|
|
9990
|
-
})
|
|
9991
|
-
var
|
|
9992
|
-
|
|
9993
|
-
|
|
9994
|
-
var
|
|
9995
|
-
var
|
|
9996
|
-
var
|
|
9997
|
-
var
|
|
9998
|
-
var
|
|
9999
|
-
var
|
|
10000
|
-
var
|
|
10001
|
-
var
|
|
10002
|
-
var
|
|
10003
|
-
var imageToLeft = _ref8.imageToLeft;
|
|
9988
|
+
}, devices.mobile, function (_ref8) {
|
|
9989
|
+
var mobileMarginBottom = _ref8.mobileMarginBottom;
|
|
9990
|
+
return mobileMarginBottom + "px";
|
|
9991
|
+
});
|
|
9992
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
9993
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled.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"])));
|
|
9994
|
+
var ExtraContentWrapper = /*#__PURE__*/styled.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);
|
|
9995
|
+
var IconWrapper$2 = /*#__PURE__*/styled.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);
|
|
9996
|
+
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
9997
|
+
var MobileTitleWrapper = /*#__PURE__*/styled.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);
|
|
9998
|
+
var asCardOverrides = /*#__PURE__*/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);
|
|
9999
|
+
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.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) {
|
|
10000
|
+
var imageToLeft = _ref9.imageToLeft;
|
|
10004
10001
|
return imageToLeft ? 'left' : 'right';
|
|
10005
10002
|
}, devices.mobile);
|
|
10006
|
-
var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(
|
|
10007
|
-
var imageToLeft =
|
|
10003
|
+
var PromoWithTagsContentWrapper = /*#__PURE__*/styled.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) {
|
|
10004
|
+
var imageToLeft = _ref0.imageToLeft;
|
|
10008
10005
|
return imageToLeft ? 'right' : 'left';
|
|
10009
|
-
}, devices.mobile, function (
|
|
10010
|
-
var hideSection =
|
|
10006
|
+
}, devices.mobile, function (_ref1) {
|
|
10007
|
+
var hideSection = _ref1.hideSection;
|
|
10011
10008
|
return hideSection ? 'none' : 'block';
|
|
10012
|
-
}, function (
|
|
10013
|
-
var asCard =
|
|
10009
|
+
}, function (_ref10) {
|
|
10010
|
+
var asCard = _ref10.asCard;
|
|
10014
10011
|
return asCard && asCardOverrides;
|
|
10015
10012
|
});
|
|
10016
|
-
var
|
|
10017
|
-
var
|
|
10018
|
-
var
|
|
10013
|
+
var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
10014
|
+
var EndDateText = /*#__PURE__*/styled.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);
|
|
10015
|
+
var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(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);
|
|
10016
|
+
var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(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);
|
|
10017
|
+
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10019
10018
|
|
|
10020
10019
|
var _excluded$n = ["text"],
|
|
10021
10020
|
_excluded2$4 = ["text"],
|
|
@@ -10031,6 +10030,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10031
10030
|
title = _ref$title === void 0 ? '' : _ref$title,
|
|
10032
10031
|
_ref$titleSize = _ref.titleSize,
|
|
10033
10032
|
titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
|
|
10033
|
+
titleHierarchy = _ref.titleHierarchy,
|
|
10034
10034
|
subtitle = _ref.subtitle,
|
|
10035
10035
|
text = _ref.text,
|
|
10036
10036
|
textLinks = _ref.textLinks,
|
|
@@ -10057,15 +10057,12 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10057
10057
|
setIsTimerActive = _useState2[1];
|
|
10058
10058
|
var getTitleLevel = function getTitleLevel(size, isCard) {
|
|
10059
10059
|
if (isCard) {
|
|
10060
|
-
return
|
|
10060
|
+
return 'medium';
|
|
10061
10061
|
}
|
|
10062
|
-
|
|
10063
|
-
return 2;
|
|
10064
|
-
}
|
|
10065
|
-
return 3;
|
|
10062
|
+
return size;
|
|
10066
10063
|
};
|
|
10067
|
-
var imageToLeft = imagePosition === 'left';
|
|
10068
10064
|
var titleLevel = getTitleLevel(titleSize, asCard);
|
|
10065
|
+
var imageToLeft = imagePosition === 'left';
|
|
10069
10066
|
var isExtraContentPresent = !!children;
|
|
10070
10067
|
var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
|
|
10071
10068
|
var handleExtraContent = function handleExtraContent(e) {
|
|
@@ -10097,15 +10094,15 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10097
10094
|
restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
|
|
10098
10095
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$3, {
|
|
10099
10096
|
key: index
|
|
10100
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10097
|
+
}, /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, restTextLink), textLinkText));
|
|
10101
10098
|
}) : null;
|
|
10102
10099
|
var renderTimerBlock = function renderTimerBlock() {
|
|
10103
10100
|
if (!timerParams) return null;
|
|
10104
10101
|
if (!isTimerActive && timerParams.endDateText) {
|
|
10105
10102
|
return /*#__PURE__*/React__default.createElement(EndDateText, {
|
|
10106
10103
|
"data-testid": "promo-with-tags-timer-end-date-text"
|
|
10107
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10108
|
-
|
|
10104
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10105
|
+
size: "medium"
|
|
10109
10106
|
}, timerParams.endDateText));
|
|
10110
10107
|
}
|
|
10111
10108
|
return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
|
|
@@ -10129,30 +10126,37 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10129
10126
|
imageToLeft: imageToLeft,
|
|
10130
10127
|
hideSection: showExtraContent,
|
|
10131
10128
|
asCard: asCard
|
|
10132
|
-
}, renderTimerBlock(), /*#__PURE__*/React__default.createElement(
|
|
10133
|
-
marginBottom:
|
|
10134
|
-
|
|
10129
|
+
}, renderTimerBlock(), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!(aboveTitleTags != null && aboveTitleTags.length) && (/*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
10130
|
+
marginBottom: 24,
|
|
10131
|
+
mobileMarginBottom: 24
|
|
10132
|
+
}, /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
10135
10133
|
list: aboveTitleTags
|
|
10136
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
10137
|
-
|
|
10138
|
-
|
|
10139
|
-
}, title)),
|
|
10140
|
-
marginBottom:
|
|
10141
|
-
|
|
10134
|
+
}))), /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
|
|
10135
|
+
size: titleLevel,
|
|
10136
|
+
hierarchy: titleHierarchy
|
|
10137
|
+
}, title)), !!(belowTitleTags != null && belowTitleTags.length) && (/*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
|
|
10138
|
+
marginBottom: 16,
|
|
10139
|
+
mobileMarginBottom: 24
|
|
10140
|
+
}, /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
10142
10141
|
list: belowTitleTags
|
|
10143
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
10142
|
+
}))), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
|
|
10143
|
+
size: "medium"
|
|
10144
|
+
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10145
|
+
size: "large",
|
|
10144
10146
|
dangerouslySetInnerHTML: {
|
|
10145
10147
|
__html: textTruncate
|
|
10146
10148
|
}
|
|
10147
|
-
}), middleText && /*#__PURE__*/React__default.createElement(
|
|
10149
|
+
}), middleText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10150
|
+
size: "large",
|
|
10148
10151
|
dangerouslySetInnerHTML: {
|
|
10149
10152
|
__html: middleText
|
|
10150
10153
|
}
|
|
10151
|
-
}), bottomText && /*#__PURE__*/React__default.createElement(
|
|
10154
|
+
})), bottomText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$1, {
|
|
10155
|
+
size: "large",
|
|
10152
10156
|
dangerouslySetInnerHTML: {
|
|
10153
10157
|
__html: bottomText
|
|
10154
10158
|
}
|
|
10155
|
-
}), !!(textLinks != null && textLinks.length) && /*#__PURE__*/React__default.createElement(TextLinksContainer, null, textLinkItems), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$2, {
|
|
10159
|
+
})), !!(textLinks != null && textLinks.length) && /*#__PURE__*/React__default.createElement(TextLinksContainer, null, textLinkItems), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$2, {
|
|
10156
10160
|
hasTextLinks: !!(textLinks != null && textLinks.length),
|
|
10157
10161
|
"data-testid": "buttons-wrapper",
|
|
10158
10162
|
primaryButtonTextLength: firstButtonText.length,
|
|
@@ -10167,9 +10171,9 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10167
10171
|
}, restFirstButton), primaryButtonTextTruncate)))), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonTextTruncate))))), /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
|
|
10168
10172
|
"data-testid": "extra-content-wrapper",
|
|
10169
10173
|
imageToLeft: imageToLeft
|
|
10170
|
-
}, showExtraContent && (/*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(
|
|
10171
|
-
|
|
10172
|
-
|
|
10174
|
+
}, showExtraContent && (/*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
|
|
10175
|
+
size: titleSize,
|
|
10176
|
+
hierarchy: titleHierarchy
|
|
10173
10177
|
}, title))), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
10174
10178
|
aspectRatio: AspectRatio['4:3']
|
|
10175
10179
|
}, isExtraContentPresent && showExtraContent ? (/*#__PURE__*/React__default.createElement(ExtraContentWrapper, null, children, /*#__PURE__*/React__default.createElement(IconWrapper$2, {
|
|
@@ -10193,7 +10197,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
10193
10197
|
}))));
|
|
10194
10198
|
};
|
|
10195
10199
|
|
|
10196
|
-
var _templateObject$18, _templateObject2$
|
|
10200
|
+
var _templateObject$18, _templateObject2$U, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$p, _templateObject7$i;
|
|
10197
10201
|
var LENGTH_TEXT$2 = 28;
|
|
10198
10202
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
10199
10203
|
var PromoWithTitleGrid = /*#__PURE__*/styled(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) {
|
|
@@ -10203,7 +10207,7 @@ var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$18 || (_templ
|
|
|
10203
10207
|
var imageToLeft = _ref2.imageToLeft;
|
|
10204
10208
|
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'";
|
|
10205
10209
|
}, devices.mobile);
|
|
10206
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10210
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.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) {
|
|
10207
10211
|
var imageToLeft = _ref3.imageToLeft;
|
|
10208
10212
|
return imageToLeft ? 'left' : 'right';
|
|
10209
10213
|
}, devices.mobile);
|
|
@@ -10211,9 +10215,9 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$I ||
|
|
|
10211
10215
|
var imageToLeft = _ref4.imageToLeft;
|
|
10212
10216
|
return imageToLeft ? 'right' : 'left';
|
|
10213
10217
|
}, devices.mobile);
|
|
10214
|
-
var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10215
|
-
var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10216
|
-
var BodyCopyHarmonicWithWrapper$
|
|
10218
|
+
var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
|
|
10219
|
+
var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
|
|
10220
|
+
var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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);
|
|
10217
10221
|
var ButtonsContainer$3 = /*#__PURE__*/styled.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) {
|
|
10218
10222
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
10219
10223
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
@@ -10399,12 +10403,12 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10399
10403
|
}, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
|
|
10400
10404
|
"data-testid": "content-wrapper",
|
|
10401
10405
|
imageToLeft: imageToLeft
|
|
10402
|
-
}, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
|
|
10406
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper$1, {
|
|
10403
10407
|
size: titleSize,
|
|
10404
10408
|
hierarchy: titleHierarchy
|
|
10405
|
-
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
|
|
10409
|
+
}, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
|
|
10406
10410
|
size: "medium"
|
|
10407
|
-
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$
|
|
10411
|
+
}, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
|
|
10408
10412
|
size: "large",
|
|
10409
10413
|
dangerouslySetInnerHTML: {
|
|
10410
10414
|
__html: text
|
|
@@ -10472,9 +10476,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
10472
10476
|
})));
|
|
10473
10477
|
};
|
|
10474
10478
|
|
|
10475
|
-
var _templateObject$1b, _templateObject2$
|
|
10479
|
+
var _templateObject$1b, _templateObject2$V, _templateObject3$J;
|
|
10476
10480
|
var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10477
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10481
|
+
var RadioGroup$1 = /*#__PURE__*/styled.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) {
|
|
10478
10482
|
var horizontalMode = _ref.horizontalMode;
|
|
10479
10483
|
if (horizontalMode) return 'row';
|
|
10480
10484
|
return 'column';
|
|
@@ -10559,9 +10563,9 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
10559
10563
|
}, error))));
|
|
10560
10564
|
};
|
|
10561
10565
|
|
|
10562
|
-
var _templateObject$1c, _templateObject2$
|
|
10566
|
+
var _templateObject$1c, _templateObject2$W, _templateObject3$K;
|
|
10563
10567
|
var StatusBannerWrapper = /*#__PURE__*/styled.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);
|
|
10564
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10568
|
+
var ContentContainer$3 = /*#__PURE__*/styled.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"])));
|
|
10565
10569
|
var SvgContainer$3 = /*#__PURE__*/styled.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);
|
|
10566
10570
|
|
|
10567
10571
|
/* eslint-disable react/no-danger */
|
|
@@ -10647,7 +10651,7 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
10647
10651
|
}, description)))));
|
|
10648
10652
|
};
|
|
10649
10653
|
|
|
10650
|
-
var _templateObject$1e, _templateObject2$
|
|
10654
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$q, _templateObject7$j, _templateObject8$e, _templateObject9$8, _templateObject0$8, _templateObject1$5;
|
|
10651
10655
|
var stateStyles = /*#__PURE__*/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) {
|
|
10652
10656
|
var theme = _ref.theme;
|
|
10653
10657
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
@@ -10658,7 +10662,7 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1e || (_templateObject$1e = /
|
|
|
10658
10662
|
var theme = _ref3.theme;
|
|
10659
10663
|
return theme.colors.lightgrey;
|
|
10660
10664
|
});
|
|
10661
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
10665
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
10662
10666
|
var theme = _ref4.theme;
|
|
10663
10667
|
return theme.colors.darkgrey;
|
|
10664
10668
|
});
|
|
@@ -11028,9 +11032,9 @@ function Select(_ref3) {
|
|
|
11028
11032
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
11029
11033
|
}
|
|
11030
11034
|
|
|
11031
|
-
var _templateObject$1f, _templateObject2$
|
|
11035
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$M, _templateObject4$C;
|
|
11032
11036
|
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
11033
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11037
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.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) {
|
|
11034
11038
|
var width = _ref.width;
|
|
11035
11039
|
if (!width) return 'none';
|
|
11036
11040
|
return width + "px";
|
|
@@ -11166,7 +11170,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
11166
11170
|
})));
|
|
11167
11171
|
};
|
|
11168
11172
|
|
|
11169
|
-
var _templateObject$1g, _templateObject2$
|
|
11173
|
+
var _templateObject$1g, _templateObject2$Z;
|
|
11170
11174
|
var Wrapper$7 = /*#__PURE__*/styled.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) {
|
|
11171
11175
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
11172
11176
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
@@ -11177,7 +11181,7 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObjec
|
|
|
11177
11181
|
height = _ref2.height;
|
|
11178
11182
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
11179
11183
|
});
|
|
11180
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
11184
|
+
var CaptionWrapper = /*#__PURE__*/styled.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"])));
|
|
11181
11185
|
|
|
11182
11186
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
11183
11187
|
var caption = _ref.caption,
|
|
@@ -11211,9 +11215,9 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
11211
11215
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
11212
11216
|
};
|
|
11213
11217
|
|
|
11214
|
-
var _templateObject$1h, _templateObject2
|
|
11218
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$N;
|
|
11215
11219
|
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
11216
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2
|
|
11220
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
11217
11221
|
var displayAttribution = _ref.displayAttribution;
|
|
11218
11222
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
11219
11223
|
});
|
|
@@ -11242,9 +11246,9 @@ var Quote = function Quote(_ref) {
|
|
|
11242
11246
|
}, attribution))));
|
|
11243
11247
|
};
|
|
11244
11248
|
|
|
11245
|
-
var _templateObject$1i, _templateObject2
|
|
11249
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$r;
|
|
11246
11250
|
var CardContainer$1 = /*#__PURE__*/styled.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"])));
|
|
11247
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2
|
|
11251
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
11248
11252
|
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
11249
11253
|
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
11250
11254
|
var IconWrapper$3 = /*#__PURE__*/styled.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);
|
|
@@ -11286,9 +11290,9 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
11286
11290
|
}, title)))));
|
|
11287
11291
|
};
|
|
11288
11292
|
|
|
11289
|
-
var _templateObject$1j, _templateObject2$
|
|
11293
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$E, _templateObject5$x;
|
|
11290
11294
|
var ReadMoreContainer = /*#__PURE__*/styled.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"])));
|
|
11291
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
11295
|
+
var LinkContainer = /*#__PURE__*/styled.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"])));
|
|
11292
11296
|
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
11293
11297
|
var isVisible = _ref.isVisible;
|
|
11294
11298
|
return isVisible ? 'visible' : 'hidden';
|
|
@@ -11378,9 +11382,9 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
11378
11382
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
11379
11383
|
};
|
|
11380
11384
|
|
|
11381
|
-
var _templateObject$1k, _templateObject2$
|
|
11385
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$Q, _templateObject4$F, _templateObject5$y;
|
|
11382
11386
|
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
11383
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$
|
|
11387
|
+
var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey);
|
|
11384
11388
|
var MobileButton = /*#__PURE__*/styled.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"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
11385
11389
|
var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref) {
|
|
11386
11390
|
var isActive = _ref.isActive;
|
|
@@ -11542,9 +11546,9 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
11542
11546
|
});
|
|
11543
11547
|
};
|
|
11544
11548
|
|
|
11545
|
-
var _templateObject$1l, _templateObject2$
|
|
11549
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$R, _templateObject4$G, _templateObject5$z, _templateObject6$s;
|
|
11546
11550
|
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11547
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
11551
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11548
11552
|
var Section = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
11549
11553
|
var color = _ref.color;
|
|
11550
11554
|
return "var(--base-color-" + color + ")";
|
|
@@ -11636,11 +11640,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
11636
11640
|
}, strengthLabel))));
|
|
11637
11641
|
};
|
|
11638
11642
|
|
|
11639
|
-
var _templateObject$1m, _templateObject2$
|
|
11643
|
+
var _templateObject$1m, _templateObject2$13, _templateObject3$S, _templateObject4$H, _templateObject5$A, _templateObject6$t, _templateObject7$k, _templateObject8$f;
|
|
11640
11644
|
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11641
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$
|
|
11645
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11642
11646
|
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11643
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform:
|
|
11647
|
+
var TableHeader = /*#__PURE__*/styled.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) {
|
|
11644
11648
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
11645
11649
|
}, devices.tablet, devices.mobile);
|
|
11646
11650
|
var TableCell = /*#__PURE__*/styled.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) {
|
|
@@ -11751,20 +11755,53 @@ var Table = function Table(_ref) {
|
|
|
11751
11755
|
var _useState2 = useState(false),
|
|
11752
11756
|
showScrollButtons = _useState2[0],
|
|
11753
11757
|
setShowScrollButtons = _useState2[1];
|
|
11758
|
+
var tableRef = useRef(null);
|
|
11759
|
+
var _useState3 = useState(true),
|
|
11760
|
+
atStart = _useState3[0],
|
|
11761
|
+
setAtStart = _useState3[1];
|
|
11762
|
+
var _useState4 = useState(false),
|
|
11763
|
+
atEnd = _useState4[0],
|
|
11764
|
+
setAtEnd = _useState4[1];
|
|
11765
|
+
var checkScrollPosition = function checkScrollPosition() {
|
|
11766
|
+
if (tableRef.current) {
|
|
11767
|
+
var _tableRef$current = tableRef.current,
|
|
11768
|
+
scrollLeft = _tableRef$current.scrollLeft,
|
|
11769
|
+
scrollWidth = _tableRef$current.scrollWidth,
|
|
11770
|
+
clientWidth = _tableRef$current.clientWidth;
|
|
11771
|
+
setAtStart(scrollLeft === 0);
|
|
11772
|
+
setAtEnd(scrollLeft + clientWidth >= scrollWidth);
|
|
11773
|
+
}
|
|
11774
|
+
};
|
|
11775
|
+
var handleNext = function handleNext() {
|
|
11776
|
+
scrollTable(tableRef, 'right');
|
|
11777
|
+
};
|
|
11778
|
+
var handlePrev = function handlePrev() {
|
|
11779
|
+
scrollTable(tableRef, 'left');
|
|
11780
|
+
};
|
|
11754
11781
|
var handlePageChange = function handlePageChange(page) {
|
|
11755
11782
|
setCurrentPage(page - 1);
|
|
11756
11783
|
};
|
|
11757
|
-
var tableRef = useRef(null);
|
|
11758
11784
|
useLayoutEffect(function () {
|
|
11759
11785
|
var horizontalScroll = function horizontalScroll() {
|
|
11760
11786
|
if (tableRef.current) {
|
|
11761
11787
|
setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
|
|
11788
|
+
checkScrollPosition();
|
|
11762
11789
|
}
|
|
11763
11790
|
};
|
|
11791
|
+
var handleScroll = function handleScroll() {
|
|
11792
|
+
checkScrollPosition();
|
|
11793
|
+
};
|
|
11764
11794
|
horizontalScroll();
|
|
11765
11795
|
window.addEventListener('resize', horizontalScroll);
|
|
11796
|
+
var table = tableRef.current;
|
|
11797
|
+
if (table) {
|
|
11798
|
+
table.addEventListener('scroll', handleScroll);
|
|
11799
|
+
}
|
|
11766
11800
|
return function () {
|
|
11767
|
-
|
|
11801
|
+
window.removeEventListener('resize', horizontalScroll);
|
|
11802
|
+
if (table) {
|
|
11803
|
+
table.removeEventListener('scroll', handleScroll);
|
|
11804
|
+
}
|
|
11768
11805
|
};
|
|
11769
11806
|
}, []);
|
|
11770
11807
|
var totalRows = Array.isArray(children) ? children.length : 1;
|
|
@@ -11791,12 +11828,10 @@ var Table = function Table(_ref) {
|
|
|
11791
11828
|
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11792
11829
|
className: className
|
|
11793
11830
|
}, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
11794
|
-
onClickPrev:
|
|
11795
|
-
|
|
11796
|
-
|
|
11797
|
-
|
|
11798
|
-
return scrollTable(tableRef, 'right');
|
|
11799
|
-
}
|
|
11831
|
+
onClickPrev: handlePrev,
|
|
11832
|
+
onClickNext: handleNext,
|
|
11833
|
+
availablePrev: !atStart,
|
|
11834
|
+
availableNext: !atEnd
|
|
11800
11835
|
}))), /*#__PURE__*/React__default.createElement(Container$6, {
|
|
11801
11836
|
role: "table",
|
|
11802
11837
|
tabIndex: 0,
|
|
@@ -11820,7 +11855,7 @@ var Table = function Table(_ref) {
|
|
|
11820
11855
|
}))));
|
|
11821
11856
|
};
|
|
11822
11857
|
|
|
11823
|
-
var _templateObject$1n, _templateObject2$
|
|
11858
|
+
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;
|
|
11824
11859
|
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
11825
11860
|
var theme = _ref.theme;
|
|
11826
11861
|
return "var(--color-" + theme + ")";
|
|
@@ -11828,7 +11863,7 @@ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObjec
|
|
|
11828
11863
|
var theme = _ref2.theme;
|
|
11829
11864
|
return "var(--color-" + theme + ")";
|
|
11830
11865
|
});
|
|
11831
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
11866
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(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);
|
|
11832
11867
|
var SignUpTitleWrapper = /*#__PURE__*/styled('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);
|
|
11833
11868
|
var Error = /*#__PURE__*/styled.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"])));
|
|
11834
11869
|
var Form = /*#__PURE__*/styled.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);
|
|
@@ -12243,10 +12278,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
|
12243
12278
|
}))))));
|
|
12244
12279
|
};
|
|
12245
12280
|
|
|
12246
|
-
var _templateObject$1o, _templateObject2$
|
|
12281
|
+
var _templateObject$1o, _templateObject2$15, _templateObject4$J, _templateObject5$C;
|
|
12247
12282
|
var AnchorBarContainer = /*#__PURE__*/styled(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) {
|
|
12248
12283
|
var withShadow = _ref.withShadow;
|
|
12249
|
-
return withShadow && css(_templateObject2$
|
|
12284
|
+
return withShadow && css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
|
|
12250
12285
|
}, devices.mobile);
|
|
12251
12286
|
var CloseButtonWrapper = /*#__PURE__*/styled.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);
|
|
12252
12287
|
var ContentWrapper$3 = /*#__PURE__*/styled.a(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|