@royaloperahouse/harmonic 0.1.7 → 0.1.8-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/README.md +252 -43
- package/dist/components/Typography/Typography.d.ts +1 -1
- package/dist/components/Typography/utils.d.ts +7 -0
- package/dist/components/atoms/Buttons/Secondary/utils.d.ts +0 -1
- package/dist/components/atoms/Buttons/Tertiary/utils.d.ts +1 -1
- package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.style.d.ts +1 -1
- package/dist/components/molecules/Information/Information.style.d.ts +4 -10
- package/dist/components/molecules/Information/utils.d.ts +10 -0
- package/dist/harmonic.cjs.development.css +25 -4
- package/dist/harmonic.cjs.development.js +180 -130
- 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 +185 -136
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/index.d.ts +2 -2
- package/dist/types/information.d.ts +11 -37
- package/dist/types/typography.d.ts +9 -4
- package/package.json +1 -1
- package/README.GIT +0 -278
|
@@ -364,17 +364,57 @@ function _taggedTemplateLiteralLoose(e, t) {
|
|
|
364
364
|
return t || (t = e.slice(0)), e.raw = t, e;
|
|
365
365
|
}
|
|
366
366
|
|
|
367
|
-
|
|
367
|
+
// Utility function for creating className strings
|
|
368
|
+
var createClassNames = function createClassNames(baseClass, options) {
|
|
369
|
+
var size = options.size,
|
|
370
|
+
_options$color = options.color,
|
|
371
|
+
color = _options$color === void 0 ? 'primary' : _options$color,
|
|
372
|
+
serif = options.serif,
|
|
373
|
+
em = options.em,
|
|
374
|
+
className = options.className;
|
|
375
|
+
return [baseClass, size, "color-" + color, serif ? 'serif' : '', em ? 'em' : '', className || ''].filter(Boolean).join(' ');
|
|
376
|
+
};
|
|
377
|
+
|
|
378
|
+
var _excluded = ["children", "size", "color", "className"],
|
|
379
|
+
_excluded2 = ["children", "size", "color", "className"];
|
|
380
|
+
/* ~~~ Headers - size and hierarchy set separately ~~~ */
|
|
381
|
+
var HarmonicHeader = function HarmonicHeader(_ref2) {
|
|
382
|
+
var children = _ref2.children,
|
|
383
|
+
size = _ref2.size,
|
|
384
|
+
em = _ref2.em,
|
|
385
|
+
_ref2$color = _ref2.color,
|
|
386
|
+
color = _ref2$color === void 0 ? 'primary' : _ref2$color,
|
|
387
|
+
serif = _ref2.serif,
|
|
388
|
+
Tag = _ref2.hierarchy,
|
|
389
|
+
className = _ref2.className;
|
|
390
|
+
var classNames = createClassNames('header', {
|
|
391
|
+
size: size,
|
|
392
|
+
color: color,
|
|
393
|
+
serif: serif,
|
|
394
|
+
em: em,
|
|
395
|
+
className: className
|
|
396
|
+
});
|
|
397
|
+
return /*#__PURE__*/React__default.createElement(Tag, {
|
|
398
|
+
className: classNames
|
|
399
|
+
}, children);
|
|
400
|
+
};
|
|
368
401
|
/* ~~~ Body Copy Text - (use case) ~~~ */
|
|
369
402
|
var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
|
|
370
403
|
var children = _ref4.children,
|
|
371
|
-
size = _ref4.size,
|
|
404
|
+
_ref4$size = _ref4.size,
|
|
405
|
+
size = _ref4$size === void 0 ? 'medium' : _ref4$size,
|
|
372
406
|
_ref4$color = _ref4.color,
|
|
373
407
|
color = _ref4$color === void 0 ? 'primary' : _ref4$color,
|
|
374
|
-
className = _ref4.className
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
408
|
+
className = _ref4.className,
|
|
409
|
+
props = _objectWithoutPropertiesLoose(_ref4, _excluded);
|
|
410
|
+
var classNames = createClassNames('bodycopy', {
|
|
411
|
+
size: size,
|
|
412
|
+
color: color,
|
|
413
|
+
className: className
|
|
414
|
+
});
|
|
415
|
+
return /*#__PURE__*/React__default.createElement("p", Object.assign({
|
|
416
|
+
className: classNames
|
|
417
|
+
}, props), children);
|
|
378
418
|
};
|
|
379
419
|
/* ~~~ Overline - (use case) ~~~ */
|
|
380
420
|
var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
@@ -383,9 +423,14 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
|
|
|
383
423
|
_ref5$color = _ref5.color,
|
|
384
424
|
color = _ref5$color === void 0 ? 'primary' : _ref5$color,
|
|
385
425
|
className = _ref5.className,
|
|
386
|
-
props = _objectWithoutPropertiesLoose(_ref5,
|
|
426
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
|
|
427
|
+
var classNames = createClassNames('overline', {
|
|
428
|
+
size: size,
|
|
429
|
+
color: color,
|
|
430
|
+
className: className
|
|
431
|
+
});
|
|
387
432
|
return /*#__PURE__*/React__default.createElement("p", Object.assign({
|
|
388
|
-
className:
|
|
433
|
+
className: classNames
|
|
389
434
|
}, props), children);
|
|
390
435
|
};
|
|
391
436
|
|
|
@@ -673,11 +718,11 @@ var devices = {
|
|
|
673
718
|
};
|
|
674
719
|
|
|
675
720
|
var _templateObject$1, _templateObject2;
|
|
676
|
-
var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n
|
|
721
|
+
var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
|
|
677
722
|
var iconName = _ref.iconName;
|
|
678
723
|
return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
|
|
679
724
|
}, devices.mobile);
|
|
680
|
-
var ButtonIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n display: inline-block;\n
|
|
725
|
+
var ButtonIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n display: inline-block;\n"])));
|
|
681
726
|
|
|
682
727
|
var _templateObject$2;
|
|
683
728
|
var Directions = {
|
|
@@ -2623,7 +2668,7 @@ var getBackgroundColor = function getBackgroundColor(_ref2) {
|
|
|
2623
2668
|
};
|
|
2624
2669
|
|
|
2625
2670
|
var _templateObject$3, _templateObject2$1;
|
|
2626
|
-
var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n
|
|
2671
|
+
var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n background-color: ", ";\n border-color: ", ";\n }\n\n :active {\n background-color: ", ";\n border-color: ", ";\n }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, getTextColor, COLORS.hover, COLORS.hover, COLORS.pressed, COLORS.pressed);
|
|
2627
2672
|
var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2628
2673
|
|
|
2629
2674
|
var _excluded$3 = ["children", "disabled", "className"];
|
|
@@ -2676,13 +2721,9 @@ var getTextColor$1 = function getTextColor(_ref) {
|
|
|
2676
2721
|
}
|
|
2677
2722
|
return COLORS$1["default"];
|
|
2678
2723
|
};
|
|
2679
|
-
var
|
|
2680
|
-
var disabled = _ref2.disabled
|
|
2681
|
-
|
|
2682
|
-
};
|
|
2683
|
-
var getBorderColor = function getBorderColor(_ref3) {
|
|
2684
|
-
var disabled = _ref3.disabled,
|
|
2685
|
-
borderColor = _ref3.borderColor;
|
|
2724
|
+
var getBorderColor = function getBorderColor(_ref2) {
|
|
2725
|
+
var disabled = _ref2.disabled,
|
|
2726
|
+
borderColor = _ref2.borderColor;
|
|
2686
2727
|
if (disabled) {
|
|
2687
2728
|
return COLORS$1.disabled;
|
|
2688
2729
|
}
|
|
@@ -2693,7 +2734,10 @@ var getBorderColor = function getBorderColor(_ref3) {
|
|
|
2693
2734
|
};
|
|
2694
2735
|
|
|
2695
2736
|
var _templateObject$4, _templateObject2$2;
|
|
2696
|
-
var SecondaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n
|
|
2737
|
+
var SecondaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n ", "\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$1, function (_ref) {
|
|
2738
|
+
var disabled = _ref.disabled;
|
|
2739
|
+
return disabled && COLORS$1.disabled;
|
|
2740
|
+
}, getBorderColor, getPointerEvents, getTextColor$1, COLORS$1.hover, COLORS$1.hover, COLORS$1.hover, COLORS$1.pressed, COLORS$1.pressed, COLORS$1.pressed);
|
|
2697
2741
|
var AriaDescription$1 = /*#__PURE__*/styled__default.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
2698
2742
|
|
|
2699
2743
|
var _excluded$4 = ["children", "disabled", "className"];
|
|
@@ -2732,7 +2776,7 @@ var COLORS$2 = {
|
|
|
2732
2776
|
hover: 'var(--button-tertiary-hover-color)',
|
|
2733
2777
|
pressed: 'var(--button-tertiary-pressed-color)'
|
|
2734
2778
|
};
|
|
2735
|
-
var
|
|
2779
|
+
var getTextColor$2 = function getTextColor(_ref) {
|
|
2736
2780
|
var disabled = _ref.disabled,
|
|
2737
2781
|
textColor = _ref.textColor;
|
|
2738
2782
|
if (disabled) {
|
|
@@ -2745,7 +2789,7 @@ var getButtonColor = function getButtonColor(_ref) {
|
|
|
2745
2789
|
};
|
|
2746
2790
|
|
|
2747
2791
|
var _templateObject$5, _templateObject2$3;
|
|
2748
|
-
var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n :hover:not(:active) {\n color: ", ";\n\n
|
|
2792
|
+
var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
|
|
2749
2793
|
var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n min-width: 20px;\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n display: inline-block;\n"])));
|
|
2750
2794
|
|
|
2751
2795
|
var _excluded$5 = ["children", "className"];
|
|
@@ -6250,7 +6294,7 @@ var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_te
|
|
|
6250
6294
|
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
6251
6295
|
|
|
6252
6296
|
var _excluded$f = ["text"],
|
|
6253
|
-
_excluded2 = ["text"];
|
|
6297
|
+
_excluded2$1 = ["text"];
|
|
6254
6298
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
6255
6299
|
var title = _ref.title,
|
|
6256
6300
|
links = _ref.links,
|
|
@@ -6262,7 +6306,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6262
6306
|
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
|
|
6263
6307
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
6264
6308
|
secondaryButtonText = _ref3.text,
|
|
6265
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
6309
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
|
|
6266
6310
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
6267
6311
|
sticky: sticky
|
|
6268
6312
|
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
@@ -6891,31 +6935,6 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
6891
6935
|
ButtonType["Tertiary"] = "Tertiary";
|
|
6892
6936
|
})(exports.ButtonType || (exports.ButtonType = {}));
|
|
6893
6937
|
|
|
6894
|
-
var IInformationCtaVariant;
|
|
6895
|
-
(function (IInformationCtaVariant) {
|
|
6896
|
-
IInformationCtaVariant["Primary"] = "Primary";
|
|
6897
|
-
IInformationCtaVariant["Secondary"] = "Secondary";
|
|
6898
|
-
IInformationCtaVariant["Tertiary"] = "Tertiary";
|
|
6899
|
-
IInformationCtaVariant["TextLink"] = "TextLink";
|
|
6900
|
-
})(IInformationCtaVariant || (IInformationCtaVariant = {}));
|
|
6901
|
-
var IInformationCtaTheme;
|
|
6902
|
-
(function (IInformationCtaTheme) {
|
|
6903
|
-
IInformationCtaTheme["Cinema"] = "Cinema";
|
|
6904
|
-
IInformationCtaTheme["Core"] = "Core";
|
|
6905
|
-
IInformationCtaTheme["Stream"] = "Stream";
|
|
6906
|
-
})(IInformationCtaTheme || (IInformationCtaTheme = {}));
|
|
6907
|
-
var IInformationTitleVariant;
|
|
6908
|
-
(function (IInformationTitleVariant) {
|
|
6909
|
-
IInformationTitleVariant["Header"] = "Header";
|
|
6910
|
-
IInformationTitleVariant["AltHeader"] = "AltHeader";
|
|
6911
|
-
})(IInformationTitleVariant || (IInformationTitleVariant = {}));
|
|
6912
|
-
(function (IInformationBackgroundColour) {
|
|
6913
|
-
IInformationBackgroundColour["Cinema"] = "cinema";
|
|
6914
|
-
IInformationBackgroundColour["Core"] = "core";
|
|
6915
|
-
IInformationBackgroundColour["Stream"] = "stream";
|
|
6916
|
-
IInformationBackgroundColour["White"] = "white";
|
|
6917
|
-
})(exports.IInformationBackgroundColour || (exports.IInformationBackgroundColour = {}));
|
|
6918
|
-
|
|
6919
6938
|
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$4;
|
|
6920
6939
|
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-light-grey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
6921
6940
|
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
@@ -7430,17 +7449,17 @@ var COLORS$3 = {
|
|
|
7430
7449
|
"default": 'var(--button-auxiliary-color)',
|
|
7431
7450
|
background: 'var(--button-auxiliary-bg-color)'
|
|
7432
7451
|
};
|
|
7433
|
-
var getTextColor$
|
|
7452
|
+
var getTextColor$3 = function getTextColor(_ref) {
|
|
7434
7453
|
var textColor = _ref.textColor;
|
|
7435
7454
|
return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
|
|
7436
7455
|
};
|
|
7437
|
-
var getBackgroundColor$
|
|
7456
|
+
var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
7438
7457
|
var backgroundColor = _ref2.backgroundColor;
|
|
7439
7458
|
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
7440
7459
|
};
|
|
7441
7460
|
|
|
7442
7461
|
var _templateObject$Q;
|
|
7443
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$
|
|
7462
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
|
|
7444
7463
|
|
|
7445
7464
|
var _excluded$h = ["children", "className"];
|
|
7446
7465
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -7594,7 +7613,7 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
|
|
|
7594
7613
|
};
|
|
7595
7614
|
|
|
7596
7615
|
var _excluded$i = ["text"],
|
|
7597
|
-
_excluded2$
|
|
7616
|
+
_excluded2$2 = ["text"];
|
|
7598
7617
|
var _buttonTypeToButton;
|
|
7599
7618
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
7600
7619
|
var LENGTH_SMALL_TEXT$2 = 19;
|
|
@@ -7647,7 +7666,7 @@ var Card = function Card(_ref) {
|
|
|
7647
7666
|
var _ref3 = secondButton || {},
|
|
7648
7667
|
_ref3$text = _ref3.text,
|
|
7649
7668
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
7650
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
7669
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
|
|
7651
7670
|
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
|
|
7652
7671
|
var hoverHandler = function hoverHandler(value) {
|
|
7653
7672
|
if (value) {
|
|
@@ -7968,26 +7987,70 @@ var Editorial = function Editorial(_ref) {
|
|
|
7968
7987
|
})))));
|
|
7969
7988
|
};
|
|
7970
7989
|
|
|
7971
|
-
var
|
|
7972
|
-
|
|
7990
|
+
var InformationCtaVariants = {
|
|
7991
|
+
Primary: 'Primary',
|
|
7992
|
+
Secondary: 'Secondary',
|
|
7993
|
+
Tertiary: 'Tertiary',
|
|
7994
|
+
TextLink: 'TextLink'
|
|
7995
|
+
};
|
|
7996
|
+
|
|
7997
|
+
var COLORS$4 = {
|
|
7998
|
+
"default": 'var(--information-panel-button-color)',
|
|
7999
|
+
background: 'var(--information-panel-button-bg-color)',
|
|
8000
|
+
hover: 'var(--information-panel-button-hover-color)',
|
|
8001
|
+
pressed: 'var(--information-panel-button-pressed-color)'
|
|
8002
|
+
};
|
|
8003
|
+
var getTextColor$4 = function getTextColor(variant, colorValue) {
|
|
8004
|
+
return variant === InformationCtaVariants.Primary ? COLORS$4["default"] : colorValue;
|
|
8005
|
+
};
|
|
8006
|
+
var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
|
|
8007
|
+
return variant === InformationCtaVariants.Primary ? "background-color: " + colorValue + ";" : '';
|
|
8008
|
+
};
|
|
8009
|
+
var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
8010
|
+
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary ? "border-color: " + colorValue + ";" : '';
|
|
8011
|
+
};
|
|
8012
|
+
|
|
8013
|
+
var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p;
|
|
8014
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
|
|
7973
8015
|
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7974
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px
|
|
7975
|
-
|
|
7976
|
-
|
|
7977
|
-
|
|
7978
|
-
|
|
7979
|
-
|
|
7980
|
-
|
|
7981
|
-
|
|
7982
|
-
|
|
7983
|
-
|
|
7984
|
-
|
|
7985
|
-
|
|
7986
|
-
|
|
7987
|
-
|
|
7988
|
-
|
|
7989
|
-
|
|
8016
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
|
|
8017
|
+
var variant = _ref.variant;
|
|
8018
|
+
return getTextColor$4(variant, COLORS$4.background);
|
|
8019
|
+
}, function (_ref2) {
|
|
8020
|
+
var variant = _ref2.variant;
|
|
8021
|
+
return getBackgroundColor$2(variant, COLORS$4.background);
|
|
8022
|
+
}, function (_ref3) {
|
|
8023
|
+
var variant = _ref3.variant;
|
|
8024
|
+
return getBorderColor$1(variant, COLORS$4.background);
|
|
8025
|
+
}, function (_ref4) {
|
|
8026
|
+
var variant = _ref4.variant;
|
|
8027
|
+
return getTextColor$4(variant, COLORS$4.background);
|
|
8028
|
+
}, function (_ref5) {
|
|
8029
|
+
var variant = _ref5.variant;
|
|
8030
|
+
return getTextColor$4(variant, COLORS$4.hover);
|
|
8031
|
+
}, function (_ref6) {
|
|
8032
|
+
var variant = _ref6.variant;
|
|
8033
|
+
return getBackgroundColor$2(variant, COLORS$4.hover);
|
|
8034
|
+
}, function (_ref7) {
|
|
8035
|
+
var variant = _ref7.variant;
|
|
8036
|
+
return getBorderColor$1(variant, COLORS$4.hover);
|
|
8037
|
+
}, function (_ref8) {
|
|
8038
|
+
var variant = _ref8.variant;
|
|
8039
|
+
return getTextColor$4(variant, COLORS$4.hover);
|
|
8040
|
+
}, function (_ref9) {
|
|
8041
|
+
var variant = _ref9.variant;
|
|
8042
|
+
return getTextColor$4(variant, COLORS$4.pressed);
|
|
8043
|
+
}, function (_ref10) {
|
|
8044
|
+
var variant = _ref10.variant;
|
|
8045
|
+
return getBackgroundColor$2(variant, COLORS$4.pressed);
|
|
8046
|
+
}, function (_ref11) {
|
|
8047
|
+
var variant = _ref11.variant;
|
|
8048
|
+
return getBorderColor$1(variant, COLORS$4.pressed);
|
|
8049
|
+
}, function (_ref12) {
|
|
8050
|
+
var variant = _ref12.variant;
|
|
8051
|
+
return getTextColor$4(variant, COLORS$4.pressed);
|
|
7990
8052
|
});
|
|
8053
|
+
var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
|
|
7991
8054
|
|
|
7992
8055
|
// Helper function for rendering buttons based on the variant
|
|
7993
8056
|
var renderButton = function renderButton(_ref) {
|
|
@@ -7998,7 +8061,7 @@ var renderButton = function renderButton(_ref) {
|
|
|
7998
8061
|
iconDirection = _ref.iconDirection,
|
|
7999
8062
|
target = _ref.target;
|
|
8000
8063
|
switch (variant) {
|
|
8001
|
-
case
|
|
8064
|
+
case InformationCtaVariants.Secondary:
|
|
8002
8065
|
return /*#__PURE__*/React__default.createElement(SecondaryButton, {
|
|
8003
8066
|
href: link,
|
|
8004
8067
|
iconName: iconName,
|
|
@@ -8006,13 +8069,13 @@ var renderButton = function renderButton(_ref) {
|
|
|
8006
8069
|
target: target,
|
|
8007
8070
|
"aria-label": text
|
|
8008
8071
|
}, text);
|
|
8009
|
-
case
|
|
8072
|
+
case InformationCtaVariants.Tertiary:
|
|
8010
8073
|
return /*#__PURE__*/React__default.createElement(TertiaryButton, {
|
|
8011
8074
|
href: link,
|
|
8012
8075
|
target: target,
|
|
8013
8076
|
"aria-label": text
|
|
8014
8077
|
}, text);
|
|
8015
|
-
case
|
|
8078
|
+
case InformationCtaVariants.TextLink:
|
|
8016
8079
|
return /*#__PURE__*/React__default.createElement(TextLink, {
|
|
8017
8080
|
href: link,
|
|
8018
8081
|
iconName: iconName,
|
|
@@ -8032,17 +8095,15 @@ var renderButton = function renderButton(_ref) {
|
|
|
8032
8095
|
};
|
|
8033
8096
|
var InfoCta = function InfoCta(_ref2) {
|
|
8034
8097
|
var _ref2$variant = _ref2.variant,
|
|
8035
|
-
variant = _ref2$variant === void 0 ?
|
|
8098
|
+
variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
|
|
8036
8099
|
link = _ref2.link,
|
|
8037
8100
|
text = _ref2.text,
|
|
8038
8101
|
iconName = _ref2.iconName,
|
|
8039
8102
|
iconDirection = _ref2.iconDirection,
|
|
8040
|
-
infoThemed = _ref2.infoThemed,
|
|
8041
8103
|
_ref2$target = _ref2.target,
|
|
8042
8104
|
target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
|
|
8043
8105
|
return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
|
|
8044
|
-
variant: variant
|
|
8045
|
-
infoThemed: infoThemed
|
|
8106
|
+
variant: variant
|
|
8046
8107
|
}, renderButton({
|
|
8047
8108
|
variant: variant,
|
|
8048
8109
|
link: link,
|
|
@@ -8058,40 +8119,27 @@ var smallColumnSpan = 4;
|
|
|
8058
8119
|
var largeColumnSpan = 9;
|
|
8059
8120
|
var mediumWordBreakpoint = 8;
|
|
8060
8121
|
var longWordBreakpoint = 13;
|
|
8061
|
-
var getColumnSpan = function getColumnSpan(
|
|
8062
|
-
if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
|
|
8122
|
+
var getColumnSpan = function getColumnSpan(longestWordLength) {
|
|
8063
8123
|
if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
|
|
8064
8124
|
if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
|
|
8065
8125
|
return defaultColumnSpan;
|
|
8066
8126
|
};
|
|
8067
|
-
var renderTitle = function renderTitle(props) {
|
|
8068
|
-
var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
|
|
8069
|
-
return props.variant === IInformationTitleVariant.Header ? (/*#__PURE__*/React__default.createElement(Header, {
|
|
8070
|
-
level: headerLevel
|
|
8071
|
-
}, props.text)) : (/*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8072
|
-
level: headerLevel
|
|
8073
|
-
}, props.text));
|
|
8074
|
-
};
|
|
8075
8127
|
var Information = function Information(_ref) {
|
|
8076
8128
|
var body = _ref.body,
|
|
8077
8129
|
title = _ref.title,
|
|
8078
|
-
background = _ref.background,
|
|
8079
8130
|
cta = _ref.cta,
|
|
8080
8131
|
className = _ref.className;
|
|
8081
8132
|
var safeTitle = title || {
|
|
8082
8133
|
text: '',
|
|
8083
|
-
|
|
8084
|
-
textSize: 5
|
|
8134
|
+
textSize: 'medium'
|
|
8085
8135
|
}; // Provide a fallback
|
|
8086
8136
|
var titleWords = safeTitle.text.split(' ');
|
|
8087
8137
|
var titleWordLengths = titleWords.map(function (word) {
|
|
8088
8138
|
return word.length;
|
|
8089
8139
|
});
|
|
8090
8140
|
var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
|
|
8091
|
-
var titleColumnSpan = getColumnSpan(
|
|
8092
|
-
var bgColour = background != null ? background : exports.IInformationBackgroundColour.White;
|
|
8141
|
+
var titleColumnSpan = getColumnSpan(maxTitleWordLength);
|
|
8093
8142
|
return /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
8094
|
-
background: bgColour,
|
|
8095
8143
|
"data-testid": "infoWrapper",
|
|
8096
8144
|
className: className
|
|
8097
8145
|
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -8099,20 +8147,22 @@ var Information = function Information(_ref) {
|
|
|
8099
8147
|
columnStartDevice: 2,
|
|
8100
8148
|
columnSpanDesktop: titleColumnSpan,
|
|
8101
8149
|
columnSpanDevice: 12
|
|
8102
|
-
}, /*#__PURE__*/React__default.createElement(InfoTitle, null,
|
|
8150
|
+
}, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8151
|
+
hierarchy: "h2",
|
|
8152
|
+
size: safeTitle.textSize,
|
|
8153
|
+
color: "inherit"
|
|
8154
|
+
}, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8103
8155
|
columnStartDesktop: titleColumnSpan + 2,
|
|
8104
8156
|
columnStartDevice: 2,
|
|
8105
8157
|
columnSpanDesktop: 14 - titleColumnSpan,
|
|
8106
8158
|
columnSpanDevice: 12
|
|
8107
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
8108
|
-
background: bgColour,
|
|
8159
|
+
}, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
|
|
8109
8160
|
dangerouslySetInnerHTML: {
|
|
8110
8161
|
__html: body
|
|
8111
8162
|
}
|
|
8112
8163
|
}), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
|
|
8113
8164
|
link: cta.link,
|
|
8114
8165
|
variant: cta.variant,
|
|
8115
|
-
infoThemed: bgColour !== exports.IInformationBackgroundColour.White,
|
|
8116
8166
|
text: cta.text,
|
|
8117
8167
|
iconName: cta.iconName,
|
|
8118
8168
|
iconDirection: cta.iconDirection,
|
|
@@ -8120,7 +8170,7 @@ var Information = function Information(_ref) {
|
|
|
8120
8170
|
})))));
|
|
8121
8171
|
};
|
|
8122
8172
|
|
|
8123
|
-
var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$
|
|
8173
|
+
var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$9, _templateObject8$6;
|
|
8124
8174
|
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // remove spacing above/below for all semantic levels of the title\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
8125
8175
|
var theme = _ref.theme;
|
|
8126
8176
|
return theme.colors.primary;
|
|
@@ -8137,7 +8187,7 @@ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_t
|
|
|
8137
8187
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
8138
8188
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
8139
8189
|
}, devices.mobile);
|
|
8140
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8190
|
+
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
8141
8191
|
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
8142
8192
|
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
8143
8193
|
var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
@@ -8218,12 +8268,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
8218
8268
|
})));
|
|
8219
8269
|
};
|
|
8220
8270
|
|
|
8221
|
-
var _templateObject$Y, _templateObject2$J, _templateObject3$w, _templateObject4$r, _templateObject5$
|
|
8271
|
+
var _templateObject$Y, _templateObject2$J, _templateObject3$w, _templateObject4$r, _templateObject5$l, _templateObject6$g, _templateObject7$a, _templateObject8$7;
|
|
8222
8272
|
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
8223
8273
|
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
8224
8274
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
8225
8275
|
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
8226
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8276
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
8227
8277
|
var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
8228
8278
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
8229
8279
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
@@ -8291,7 +8341,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8291
8341
|
}, "Scroll Down"))) : null);
|
|
8292
8342
|
};
|
|
8293
8343
|
|
|
8294
|
-
var _templateObject$Z, _templateObject2$K, _templateObject3$x, _templateObject4$s, _templateObject5$
|
|
8344
|
+
var _templateObject$Z, _templateObject2$K, _templateObject3$x, _templateObject4$s, _templateObject5$m;
|
|
8295
8345
|
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
8296
8346
|
var color = _ref.color;
|
|
8297
8347
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
@@ -8305,7 +8355,7 @@ var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templat
|
|
|
8305
8355
|
});
|
|
8306
8356
|
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
8307
8357
|
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8308
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8358
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
8309
8359
|
|
|
8310
8360
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8311
8361
|
var _image$src, _image$alt;
|
|
@@ -8355,11 +8405,11 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
8355
8405
|
}))));
|
|
8356
8406
|
};
|
|
8357
8407
|
|
|
8358
|
-
var _templateObject$$, _templateObject2$L, _templateObject3$y, _templateObject5$
|
|
8408
|
+
var _templateObject$$, _templateObject2$L, _templateObject3$y, _templateObject5$n, _templateObject6$h, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
|
|
8359
8409
|
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8360
8410
|
var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8361
8411
|
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8362
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8412
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
8363
8413
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
|
|
8364
8414
|
var invert = _ref.invert,
|
|
8365
8415
|
theme = _ref.theme;
|
|
@@ -8687,12 +8737,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
8687
8737
|
})))));
|
|
8688
8738
|
};
|
|
8689
8739
|
|
|
8690
|
-
var _templateObject$11, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$
|
|
8740
|
+
var _templateObject$11, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$o, _templateObject6$i, _templateObject7$c;
|
|
8691
8741
|
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8692
8742
|
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
8693
8743
|
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8694
8744
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
8695
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8745
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8696
8746
|
var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
8697
8747
|
var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
|
|
8698
8748
|
|
|
@@ -8876,7 +8926,7 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8876
8926
|
}, creditEntries);
|
|
8877
8927
|
};
|
|
8878
8928
|
|
|
8879
|
-
var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$
|
|
8929
|
+
var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$9, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8880
8930
|
var LENGTH_TEXT = 28;
|
|
8881
8931
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8882
8932
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
@@ -8919,7 +8969,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$w ||
|
|
|
8919
8969
|
}
|
|
8920
8970
|
return '';
|
|
8921
8971
|
});
|
|
8922
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8972
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref7) {
|
|
8923
8973
|
var marginBottom = _ref7.marginBottom;
|
|
8924
8974
|
return marginBottom + "px";
|
|
8925
8975
|
});
|
|
@@ -8953,7 +9003,7 @@ var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject20 || (_tem
|
|
|
8953
9003
|
var EndDateText = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
8954
9004
|
|
|
8955
9005
|
var _excluded$p = ["text"],
|
|
8956
|
-
_excluded2$
|
|
9006
|
+
_excluded2$3 = ["text"],
|
|
8957
9007
|
_excluded3 = ["text"];
|
|
8958
9008
|
var _buttonTypeToButton$1;
|
|
8959
9009
|
var LENGTH_TEXT$1 = 28;
|
|
@@ -9021,7 +9071,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9021
9071
|
var _ref3 = secondButton || {},
|
|
9022
9072
|
_ref3$text = _ref3.text,
|
|
9023
9073
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
9024
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
9074
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
9025
9075
|
var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
|
|
9026
9076
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
9027
9077
|
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
|
|
@@ -9128,7 +9178,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9128
9178
|
}))));
|
|
9129
9179
|
};
|
|
9130
9180
|
|
|
9131
|
-
var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x, _templateObject5$
|
|
9181
|
+
var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x, _templateObject5$q, _templateObject6$k, _templateObject7$e;
|
|
9132
9182
|
var LENGTH_TEXT$2 = 28;
|
|
9133
9183
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9134
9184
|
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__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) {
|
|
@@ -9147,7 +9197,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
|
|
|
9147
9197
|
return imageToLeft ? 'right' : 'left';
|
|
9148
9198
|
}, devices.mobile);
|
|
9149
9199
|
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
|
|
9150
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
9200
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
9151
9201
|
var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__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"])));
|
|
9152
9202
|
var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__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) {
|
|
9153
9203
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
@@ -9298,7 +9348,7 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9298
9348
|
};
|
|
9299
9349
|
|
|
9300
9350
|
var _excluded$q = ["text"],
|
|
9301
|
-
_excluded2$
|
|
9351
|
+
_excluded2$4 = ["text"];
|
|
9302
9352
|
var LENGTH_TEXT$3 = 28;
|
|
9303
9353
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
9304
9354
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9329,7 +9379,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9329
9379
|
var _ref3 = tertiaryButton || {},
|
|
9330
9380
|
_ref3$text = _ref3.text,
|
|
9331
9381
|
tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
9332
|
-
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
9382
|
+
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
9333
9383
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
|
|
9334
9384
|
var defaultVideoSettings = {
|
|
9335
9385
|
muted: true,
|
|
@@ -9597,7 +9647,7 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9597
9647
|
}, description)))));
|
|
9598
9648
|
};
|
|
9599
9649
|
|
|
9600
|
-
var _templateObject$1a, _templateObject2$T, _templateObject3$G, _templateObject4$y, _templateObject5$
|
|
9650
|
+
var _templateObject$1a, _templateObject2$T, _templateObject3$G, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9601
9651
|
var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject$1a = /*#__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) {
|
|
9602
9652
|
var theme = _ref.theme;
|
|
9603
9653
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
@@ -9621,7 +9671,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
9621
9671
|
color: theme.colors.black,
|
|
9622
9672
|
title: 'Select Arrow'
|
|
9623
9673
|
};
|
|
9624
|
-
})(_templateObject5$
|
|
9674
|
+
})(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
9625
9675
|
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9626
9676
|
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9627
9677
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
@@ -10192,12 +10242,12 @@ var Quote = function Quote(_ref) {
|
|
|
10192
10242
|
}, attribution))));
|
|
10193
10243
|
};
|
|
10194
10244
|
|
|
10195
|
-
var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$A, _templateObject5$
|
|
10245
|
+
var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$A, _templateObject5$s, _templateObject6$m;
|
|
10196
10246
|
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
|
|
10197
10247
|
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10198
10248
|
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10199
10249
|
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10200
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10250
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__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);
|
|
10201
10251
|
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
10202
10252
|
|
|
10203
10253
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -10236,7 +10286,7 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10236
10286
|
}, title)))));
|
|
10237
10287
|
};
|
|
10238
10288
|
|
|
10239
|
-
var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$B, _templateObject5$
|
|
10289
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$B, _templateObject5$t;
|
|
10240
10290
|
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__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"])));
|
|
10241
10291
|
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__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"])));
|
|
10242
10292
|
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
@@ -10247,7 +10297,7 @@ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B ||
|
|
|
10247
10297
|
var isVisible = _ref2.isVisible;
|
|
10248
10298
|
return isVisible ? 'visible' : 'hidden';
|
|
10249
10299
|
});
|
|
10250
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10300
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
|
|
10251
10301
|
|
|
10252
10302
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
10253
10303
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10328,7 +10378,7 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10328
10378
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10329
10379
|
};
|
|
10330
10380
|
|
|
10331
|
-
var _templateObject$1g, _templateObject2$Z, _templateObject3$L, _templateObject4$C, _templateObject5$
|
|
10381
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$L, _templateObject4$C, _templateObject5$u;
|
|
10332
10382
|
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10333
10383
|
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Z || (_templateObject2$Z = /*#__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);
|
|
10334
10384
|
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$L || (_templateObject3$L = /*#__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);
|
|
@@ -10336,7 +10386,7 @@ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_template
|
|
|
10336
10386
|
var isActive = _ref.isActive;
|
|
10337
10387
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10338
10388
|
}, exports.Colors.MidGrey);
|
|
10339
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10389
|
+
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10340
10390
|
var isOpen = _ref2.isOpen;
|
|
10341
10391
|
return isOpen ? 'block' : 'none';
|
|
10342
10392
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10492,7 +10542,7 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10492
10542
|
});
|
|
10493
10543
|
};
|
|
10494
10544
|
|
|
10495
|
-
var _templateObject$1h, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$
|
|
10545
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$v, _templateObject6$n;
|
|
10496
10546
|
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10497
10547
|
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10498
10548
|
var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
@@ -10500,7 +10550,7 @@ var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateO
|
|
|
10500
10550
|
return "var(--base-color-" + color + ")";
|
|
10501
10551
|
});
|
|
10502
10552
|
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10503
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10553
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10504
10554
|
var color = _ref2.color;
|
|
10505
10555
|
return "var(--base-color-" + color + ")";
|
|
10506
10556
|
});
|
|
@@ -10586,7 +10636,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10586
10636
|
}, strengthLabel))));
|
|
10587
10637
|
};
|
|
10588
10638
|
|
|
10589
|
-
var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$
|
|
10639
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$w, _templateObject6$o, _templateObject7$g, _templateObject8$b, _templateObject9$7, _templateObject10$7;
|
|
10590
10640
|
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10591
10641
|
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10592
10642
|
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
@@ -10595,7 +10645,7 @@ var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$E || (_templa
|
|
|
10595
10645
|
}, function (props) {
|
|
10596
10646
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10597
10647
|
}, devices.tablet, devices.mobile);
|
|
10598
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10648
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n border-bottom: 1px solid;\n border-color: ", ";\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 padding: 20px 20px 20px 0;\n }\n"])), function (props) {
|
|
10599
10649
|
return "var(--base-color-" + props.lineColor + ")";
|
|
10600
10650
|
}, function (props) {
|
|
10601
10651
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
@@ -10790,7 +10840,7 @@ var Table = function Table(_ref) {
|
|
|
10790
10840
|
}))))))))));
|
|
10791
10841
|
};
|
|
10792
10842
|
|
|
10793
|
-
var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$
|
|
10843
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
|
|
10794
10844
|
var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10795
10845
|
var theme = _ref.theme;
|
|
10796
10846
|
return "var(--base-color-" + theme + ")";
|
|
@@ -10801,7 +10851,7 @@ var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1j || (_temp
|
|
|
10801
10851
|
var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
10802
10852
|
var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--base-color-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);
|
|
10803
10853
|
var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-color-errorstate);\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10804
|
-
var Form = /*#__PURE__*/styled__default.form(_templateObject5$
|
|
10854
|
+
var Form = /*#__PURE__*/styled__default.form(_templateObject5$x || (_templateObject5$x = /*#__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$1);
|
|
10805
10855
|
var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
10806
10856
|
var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
|
|
10807
10857
|
var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
|