@royaloperahouse/chord 2.2.9 → 2.2.10-b-chord-development
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +214 -9
- package/README.md +250 -40
- package/dist/chord.cjs.development.js +531 -208
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +529 -209
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.d.ts +4 -0
- package/dist/components/atoms/Buttons/Auxiliary/AuxiliaryButton.style.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/12px/Expand.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/Utility/Remove.svg.d.ts +4 -0
- package/dist/components/atoms/Icons/SvgIcons/index.d.ts +2 -0
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/Card/Card.style.d.ts +2 -0
- package/dist/components/molecules/PageHeading/index.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
- package/dist/components/molecules/Select2/Select2.d.ts +7 -1
- package/dist/components/molecules/Select2Async/Select2Async.d.ts +18 -0
- package/dist/components/molecules/Select2Async/index.d.ts +2 -0
- package/dist/components/molecules/Table/Table.d.ts +4 -0
- package/dist/components/molecules/Table/Table.style.d.ts +16 -0
- package/dist/components/molecules/Table/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/styles/themes.d.ts +20 -12
- package/dist/types/buttonTypes.d.ts +14 -0
- package/dist/types/card.d.ts +9 -1
- package/dist/types/formTypes.d.ts +19 -12
- package/dist/types/index.d.ts +2 -2
- package/dist/types/passwordStrength.d.ts +6 -6
- package/dist/types/tableTypes.d.ts +42 -0
- package/package.json +1 -1
- package/README.GIT +0 -277
|
@@ -12,6 +12,7 @@ var moment = _interopDefault(require('moment'));
|
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
13
|
var Select$1 = require('react-select');
|
|
14
14
|
var Select$1__default = _interopDefault(Select$1);
|
|
15
|
+
var Select$2 = _interopDefault(require('react-select/async'));
|
|
15
16
|
var Modal = _interopDefault(require('react-modal'));
|
|
16
17
|
var ScrollLock = _interopDefault(require('react-scrolllock'));
|
|
17
18
|
|
|
@@ -629,6 +630,7 @@ var core = /*#__PURE__*/_extends({}, common, {
|
|
|
629
630
|
primaryButton: colors.core,
|
|
630
631
|
secondaryButton: commonColors.white,
|
|
631
632
|
tertiaryButton: 'transparent',
|
|
633
|
+
auxiliaryButton: 'transparent',
|
|
632
634
|
primaryButtonReverseBg: colors.cinema,
|
|
633
635
|
primaryButtonReverse: commonColors.white
|
|
634
636
|
})
|
|
@@ -637,30 +639,33 @@ var stream = /*#__PURE__*/_extends({}, common, {
|
|
|
637
639
|
colors: /*#__PURE__*/_extends({}, commonColors, colors, {
|
|
638
640
|
primary: colors.stream,
|
|
639
641
|
primaryButton: colors.stream,
|
|
642
|
+
primaryButtonReverseBg: colors.cinema,
|
|
643
|
+
primaryButtonReverse: commonColors.white,
|
|
640
644
|
secondaryButton: commonColors.white,
|
|
641
645
|
tertiaryButton: 'transparent',
|
|
642
|
-
|
|
643
|
-
primaryButtonReverse: commonColors.white
|
|
646
|
+
auxiliaryButton: 'transparent'
|
|
644
647
|
})
|
|
645
648
|
});
|
|
646
649
|
var cinema = /*#__PURE__*/_extends({}, common, {
|
|
647
650
|
colors: /*#__PURE__*/_extends({}, commonColors, colors, {
|
|
648
651
|
primary: colors.cinema,
|
|
649
652
|
primaryButton: commonColors.white,
|
|
653
|
+
primaryButtonReverseBg: commonColors.white,
|
|
654
|
+
primaryButtonReverse: colors.cinema,
|
|
650
655
|
secondaryButton: commonColors.white,
|
|
651
656
|
tertiaryButton: 'transparent',
|
|
652
|
-
|
|
653
|
-
primaryButtonReverse: colors.cinema
|
|
657
|
+
auxiliaryButton: 'transparent'
|
|
654
658
|
})
|
|
655
659
|
});
|
|
656
660
|
var schools = /*#__PURE__*/_extends({}, common, {
|
|
657
661
|
colors: /*#__PURE__*/_extends({}, commonColors, colors, {
|
|
658
662
|
primary: colors.core,
|
|
659
663
|
primaryButton: colors.core,
|
|
664
|
+
primaryButtonReverseBg: colors.cinema,
|
|
665
|
+
primaryButtonReverse: commonColors.white,
|
|
660
666
|
secondaryButton: commonColors.white,
|
|
661
667
|
tertiaryButton: 'transparent',
|
|
662
|
-
|
|
663
|
-
primaryButtonReverse: commonColors.white
|
|
668
|
+
auxiliaryButton: 'transparent'
|
|
664
669
|
}),
|
|
665
670
|
fonts: /*#__PURE__*/_extends({}, common.fonts, {
|
|
666
671
|
desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
|
|
@@ -710,21 +715,36 @@ var Wrapper = /*#__PURE__*/styled__default.span(_templateObject$3 || (_templateO
|
|
|
710
715
|
return color || 'black';
|
|
711
716
|
}, core.colors.black);
|
|
712
717
|
|
|
713
|
-
var
|
|
718
|
+
var Expand12px = (function (_ref) {
|
|
714
719
|
var _ref$color = _ref.color,
|
|
715
720
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
716
721
|
return /*#__PURE__*/React.createElement("svg", {
|
|
717
|
-
|
|
718
|
-
|
|
722
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
723
|
+
width: "12",
|
|
724
|
+
height: "12",
|
|
719
725
|
viewBox: "0 0 12 12",
|
|
720
|
-
fill: "none"
|
|
721
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
726
|
+
fill: "none"
|
|
722
727
|
}, /*#__PURE__*/React.createElement("path", {
|
|
723
|
-
d: "M7.
|
|
728
|
+
d: "M7.02857 0H5.31429V4.97143H0V6.68571H5.31429V12H7.02857V6.68571H12V4.97143H7.02857V0Z",
|
|
724
729
|
fill: color
|
|
725
730
|
}));
|
|
726
731
|
});
|
|
727
732
|
|
|
733
|
+
var Remove12px = (function (_ref) {
|
|
734
|
+
var _ref$color = _ref.color,
|
|
735
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
736
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
737
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
738
|
+
width: "12",
|
|
739
|
+
height: "12",
|
|
740
|
+
viewBox: "0 0 12 12",
|
|
741
|
+
fill: "none"
|
|
742
|
+
}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
|
|
743
|
+
d: "M6.9956 5.96581L11.8642 10.8344L10.9042 11.7944L6.0356 6.92581L1.16703 11.7944L0.207031 10.8344L5.0756 5.96581L0.207031 1.16581L1.16703 0.205811L6.0356 5.07438L10.9042 0.205811L11.8642 1.16581L6.9956 5.96581Z",
|
|
744
|
+
fill: color
|
|
745
|
+
})));
|
|
746
|
+
});
|
|
747
|
+
|
|
728
748
|
var Tick = (function (_ref) {
|
|
729
749
|
var _ref$color = _ref.color,
|
|
730
750
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
@@ -1844,6 +1864,21 @@ var Refresh = (function (_ref) {
|
|
|
1844
1864
|
}));
|
|
1845
1865
|
});
|
|
1846
1866
|
|
|
1867
|
+
var Remove = (function (_ref) {
|
|
1868
|
+
var _ref$color = _ref.color,
|
|
1869
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
1870
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
1871
|
+
width: "100%",
|
|
1872
|
+
height: "100%",
|
|
1873
|
+
viewBox: "0 0 12 12",
|
|
1874
|
+
fill: "none",
|
|
1875
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1876
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1877
|
+
d: "M7.06066 5.93957L11.0001 2.00011L9.93945 0.939453L6 4.87891L2.06055 0.939453L0.999887 2.00011L4.93934 5.93957L0.939453 9.93945L2.00011 11.0001L6 7.00023L9.99989 11.0001L11.0605 9.93945L7.06066 5.93957Z",
|
|
1878
|
+
fill: color
|
|
1879
|
+
}));
|
|
1880
|
+
});
|
|
1881
|
+
|
|
1847
1882
|
var Star = (function (_ref) {
|
|
1848
1883
|
var _ref$color = _ref.color,
|
|
1849
1884
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
@@ -2156,6 +2191,7 @@ var IconLibrary = {
|
|
|
2156
2191
|
EditMyList: EditMyList,
|
|
2157
2192
|
Email: Email,
|
|
2158
2193
|
Expand: Expand,
|
|
2194
|
+
Expand12px: Expand12px,
|
|
2159
2195
|
ExternalLink: ExternalLink,
|
|
2160
2196
|
Facebook: Facebook,
|
|
2161
2197
|
Favourite: Favourite,
|
|
@@ -2185,6 +2221,7 @@ var IconLibrary = {
|
|
|
2185
2221
|
Refresh: Refresh,
|
|
2186
2222
|
Reminder: Reminder,
|
|
2187
2223
|
Remove: Remove,
|
|
2224
|
+
Remove12px: Remove12px,
|
|
2188
2225
|
Restart: Restart,
|
|
2189
2226
|
Search: Search,
|
|
2190
2227
|
Seat: Seat,
|
|
@@ -2232,15 +2269,17 @@ var Button = function Button(_ref) {
|
|
|
2232
2269
|
var children = _ref.children,
|
|
2233
2270
|
iconName = _ref.iconName,
|
|
2234
2271
|
iconDirection = _ref.iconDirection,
|
|
2272
|
+
iconClassName = _ref.iconClassName,
|
|
2235
2273
|
color = _ref.color,
|
|
2236
|
-
rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
|
|
2274
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "iconClassName", "color"]);
|
|
2237
2275
|
|
|
2238
2276
|
var truncatedString = children.substring(0, 30);
|
|
2239
2277
|
return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
|
|
2240
2278
|
color: color,
|
|
2241
2279
|
iconName: iconName
|
|
2242
2280
|
}), iconName ? /*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2243
|
-
"data-testid": "button-icon"
|
|
2281
|
+
"data-testid": "button-icon",
|
|
2282
|
+
className: iconClassName
|
|
2244
2283
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2245
2284
|
iconName: iconName,
|
|
2246
2285
|
direction: iconDirection,
|
|
@@ -3565,7 +3604,7 @@ var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$c || (_temp
|
|
|
3565
3604
|
if (!width) return 'none';
|
|
3566
3605
|
return width + 'px';
|
|
3567
3606
|
});
|
|
3568
|
-
var Input = /*#__PURE__*/styled__default.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\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 border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n
|
|
3607
|
+
var Input = /*#__PURE__*/styled__default.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\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 border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none; \n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
|
|
3569
3608
|
var isPasswordField = _ref2.isPasswordField;
|
|
3570
3609
|
if (isPasswordField) return "80px";
|
|
3571
3610
|
return "20px";
|
|
@@ -3673,7 +3712,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3673
3712
|
"data-testid": "text-field-input",
|
|
3674
3713
|
ref: ref
|
|
3675
3714
|
}, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
|
|
3676
|
-
type:
|
|
3715
|
+
type: 'button',
|
|
3677
3716
|
onClick: showHideClickHandler
|
|
3678
3717
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
3679
3718
|
level: 1
|
|
@@ -3843,7 +3882,10 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3843
3882
|
onKeyPress: spaceButtonHandler,
|
|
3844
3883
|
dark: isDarkMode,
|
|
3845
3884
|
disabled: disabled,
|
|
3846
|
-
"data-testid": "tickbox"
|
|
3885
|
+
"data-testid": "tickbox",
|
|
3886
|
+
role: "checkbox",
|
|
3887
|
+
"aria-checked": selected ? 'true' : 'false',
|
|
3888
|
+
"aria-labelledby": dataLabel
|
|
3847
3889
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3848
3890
|
level: 1,
|
|
3849
3891
|
tag: "span"
|
|
@@ -3854,6 +3896,7 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3854
3896
|
dark: isDarkMode,
|
|
3855
3897
|
"aria-labelledby": dataLabel,
|
|
3856
3898
|
whiteBox: whiteBox,
|
|
3899
|
+
"aria-checked": selected ? 'true' : 'false',
|
|
3857
3900
|
disabled: disabled
|
|
3858
3901
|
}), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
|
|
3859
3902
|
dark: isDarkMode,
|
|
@@ -6046,7 +6089,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6046
6089
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6047
6090
|
contentType: accordion.contentType,
|
|
6048
6091
|
displayLevel: accordion.displayLevel,
|
|
6049
|
-
semanticLevel: accordion.semanticLevel
|
|
6092
|
+
semanticLevel: accordion.semanticLevel,
|
|
6093
|
+
initOpen: accordion.initOpen
|
|
6050
6094
|
}, accordion.children);
|
|
6051
6095
|
}));
|
|
6052
6096
|
};
|
|
@@ -6103,11 +6147,33 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
6103
6147
|
}))))));
|
|
6104
6148
|
};
|
|
6105
6149
|
|
|
6106
|
-
var _templateObject$P
|
|
6150
|
+
var _templateObject$P;
|
|
6151
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-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 .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
6152
|
+
var bgColor = _ref.bgColor,
|
|
6153
|
+
theme = _ref.theme;
|
|
6154
|
+
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
6155
|
+
}, function (_ref2) {
|
|
6156
|
+
var color = _ref2.color;
|
|
6157
|
+
return color;
|
|
6158
|
+
});
|
|
6159
|
+
|
|
6160
|
+
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
6161
|
+
var _props$color;
|
|
6162
|
+
|
|
6163
|
+
var children = _ref.children,
|
|
6164
|
+
props = _objectWithoutPropertiesLoose(_ref, ["children"]);
|
|
6165
|
+
|
|
6166
|
+
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
6167
|
+
color: (_props$color = props.color) != null ? _props$color : exports.Colors.Black,
|
|
6168
|
+
iconClassName: "auxiliaryButtonIcon"
|
|
6169
|
+
}), children);
|
|
6170
|
+
};
|
|
6171
|
+
|
|
6172
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
|
|
6107
6173
|
var LENGTH_LARGE_TEXT = 28;
|
|
6108
6174
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
6109
6175
|
var LENGTH_TEXT_TABLET = 10;
|
|
6110
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6176
|
+
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
6111
6177
|
var isCardClickable = _ref.isCardClickable;
|
|
6112
6178
|
return isCardClickable ? 'pointer' : 'default';
|
|
6113
6179
|
}, function (_ref2) {
|
|
@@ -6131,20 +6197,22 @@ var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$k ||
|
|
|
6131
6197
|
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
6132
6198
|
var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
|
|
6133
6199
|
var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__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-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
6134
|
-
var
|
|
6135
|
-
var
|
|
6200
|
+
var HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer$1)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
6201
|
+
var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$2 || (_templateObject9$2 = /*#__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-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 display: block;\n overflow-wrap: break-word;\n"])));
|
|
6202
|
+
var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 30px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
|
|
6136
6203
|
var isVisible = _ref6.isVisible;
|
|
6137
6204
|
return isVisible ? "visible" : 'hidden';
|
|
6138
6205
|
}, devices.mobile, function (_ref7) {
|
|
6139
6206
|
var isGridCard = _ref7.isGridCard;
|
|
6140
6207
|
return isGridCard ? '20px' : '0';
|
|
6141
6208
|
});
|
|
6142
|
-
var
|
|
6209
|
+
var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: var(--editorial-margin-between);\n"])));
|
|
6210
|
+
var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 8px;\n background-color: ", ";\n color: var(--base-color-white);\n"])), function (_ref8) {
|
|
6143
6211
|
var bgColor = _ref8.bgColor,
|
|
6144
6212
|
theme = _ref8.theme;
|
|
6145
6213
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
|
|
6146
6214
|
});
|
|
6147
|
-
var LabelIconWrapper = /*#__PURE__*/styled__default.div(
|
|
6215
|
+
var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
|
|
6148
6216
|
|
|
6149
6217
|
var getButtonsOpacity = function getButtonsOpacity(_ref9) {
|
|
6150
6218
|
var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
|
|
@@ -6156,7 +6224,7 @@ var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
|
|
|
6156
6224
|
return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
|
|
6157
6225
|
};
|
|
6158
6226
|
|
|
6159
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(
|
|
6227
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref11) {
|
|
6160
6228
|
var size = _ref11.size,
|
|
6161
6229
|
primaryButtonTextLength = _ref11.primaryButtonTextLength,
|
|
6162
6230
|
tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
|
|
@@ -6266,6 +6334,8 @@ var Card = function Card(_ref) {
|
|
|
6266
6334
|
subtitle = _ref.subtitle,
|
|
6267
6335
|
_ref$text = _ref.text,
|
|
6268
6336
|
text = _ref$text === void 0 ? '' : _ref$text,
|
|
6337
|
+
_ref$highlightText = _ref.highlightText,
|
|
6338
|
+
highlightText = _ref$highlightText === void 0 ? '' : _ref$highlightText,
|
|
6269
6339
|
links = _ref.links,
|
|
6270
6340
|
_ref$tags = _ref.tags,
|
|
6271
6341
|
tags = _ref$tags === void 0 ? [] : _ref$tags,
|
|
@@ -6283,7 +6353,8 @@ var Card = function Card(_ref) {
|
|
|
6283
6353
|
hoverLineColor = _ref.hoverLineColor,
|
|
6284
6354
|
labelParams = _ref.labelParams,
|
|
6285
6355
|
_ref$isGridCard = _ref.isGridCard,
|
|
6286
|
-
isGridCard = _ref$isGridCard === void 0 ? false : _ref$isGridCard
|
|
6356
|
+
isGridCard = _ref$isGridCard === void 0 ? false : _ref$isGridCard,
|
|
6357
|
+
auxiliaryCTA = _ref.auxiliaryCTA;
|
|
6287
6358
|
|
|
6288
6359
|
var truncate = function truncate(str, n) {
|
|
6289
6360
|
return str.length >= n ? str.substr(0, n) : str;
|
|
@@ -6378,9 +6449,12 @@ var Card = function Card(_ref) {
|
|
|
6378
6449
|
dangerouslySetInnerHTML: {
|
|
6379
6450
|
__html: truncatedText
|
|
6380
6451
|
}
|
|
6381
|
-
}))),
|
|
6452
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
6453
|
+
level: 1
|
|
6454
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, null, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
6382
6455
|
ref: node,
|
|
6383
6456
|
"data-testid": "buttonscontainer",
|
|
6457
|
+
className: "cardButtonsContainer",
|
|
6384
6458
|
size: size,
|
|
6385
6459
|
primaryButtonTextLength: firstButtonText.length,
|
|
6386
6460
|
tertiaryButtonTextLength: secondButtonText.length,
|
|
@@ -6389,8 +6463,8 @@ var Card = function Card(_ref) {
|
|
|
6389
6463
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
6390
6464
|
};
|
|
6391
6465
|
|
|
6392
|
-
var _templateObject$
|
|
6393
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
6466
|
+
var _templateObject$R, _templateObject2$z;
|
|
6467
|
+
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
6394
6468
|
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6395
6469
|
|
|
6396
6470
|
var Cards = function Cards(_ref) {
|
|
@@ -6422,6 +6496,7 @@ var Cards = function Cards(_ref) {
|
|
|
6422
6496
|
title: card.title,
|
|
6423
6497
|
subtitle: card.subtitle,
|
|
6424
6498
|
text: card.text,
|
|
6499
|
+
highlightText: card.highlightText,
|
|
6425
6500
|
links: card.links,
|
|
6426
6501
|
tags: card.tags,
|
|
6427
6502
|
withContinueWatching: card.withContinueWatching,
|
|
@@ -6429,13 +6504,14 @@ var Cards = function Cards(_ref) {
|
|
|
6429
6504
|
hoverLineColor: card.hoverLineColor,
|
|
6430
6505
|
fullWidth: card.fullWidth,
|
|
6431
6506
|
labelParams: card.labelParams,
|
|
6507
|
+
auxiliaryCTA: card.auxiliaryCTA,
|
|
6432
6508
|
isGridCard: true
|
|
6433
6509
|
}));
|
|
6434
6510
|
}));
|
|
6435
6511
|
};
|
|
6436
6512
|
|
|
6437
|
-
var _templateObject$
|
|
6438
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6513
|
+
var _templateObject$S, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$f;
|
|
6514
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
6439
6515
|
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
6440
6516
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
6441
6517
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
@@ -6503,8 +6579,8 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
6503
6579
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
6504
6580
|
};
|
|
6505
6581
|
|
|
6506
|
-
var _templateObject$
|
|
6507
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
6582
|
+
var _templateObject$T, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g, _templateObject6$d, _templateObject7$8;
|
|
6583
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6508
6584
|
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
6509
6585
|
return props.clickable ? 'pointer' : 'default';
|
|
6510
6586
|
}, devices.mobile);
|
|
@@ -6586,8 +6662,8 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
6586
6662
|
}), link.text)));
|
|
6587
6663
|
};
|
|
6588
6664
|
|
|
6589
|
-
var _templateObject$
|
|
6590
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6665
|
+
var _templateObject$U, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h;
|
|
6666
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
6591
6667
|
var imageToLeft = _ref.imageToLeft;
|
|
6592
6668
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
6593
6669
|
}, devices.mobile);
|
|
@@ -6664,8 +6740,8 @@ var BackgroundColour;
|
|
|
6664
6740
|
BackgroundColour["White"] = "white";
|
|
6665
6741
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
6666
6742
|
|
|
6667
|
-
var _templateObject$
|
|
6668
|
-
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
6743
|
+
var _templateObject$V, _templateObject2$D, _templateObject3$v, _templateObject4$o;
|
|
6744
|
+
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
|
|
6669
6745
|
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6670
6746
|
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
6671
6747
|
if (!props.infoThemed) {
|
|
@@ -6791,8 +6867,8 @@ var Information = function Information(_ref) {
|
|
|
6791
6867
|
}))));
|
|
6792
6868
|
};
|
|
6793
6869
|
|
|
6794
|
-
var _templateObject$
|
|
6795
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6870
|
+
var _templateObject$W, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$i, _templateObject6$e, _templateObject7$9, _templateObject8$6;
|
|
6871
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
6796
6872
|
var theme = _ref.theme;
|
|
6797
6873
|
return theme.colors.primary;
|
|
6798
6874
|
}, function (_ref2) {
|
|
@@ -6883,8 +6959,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
6883
6959
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
6884
6960
|
};
|
|
6885
6961
|
|
|
6886
|
-
var _templateObject$
|
|
6887
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6962
|
+
var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$f, _templateObject7$a, _templateObject8$7;
|
|
6963
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__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);
|
|
6888
6964
|
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__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);
|
|
6889
6965
|
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$x || (_templateObject3$x = /*#__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);
|
|
6890
6966
|
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__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);
|
|
@@ -6954,8 +7030,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
6954
7030
|
}, "Scroll Down")) : null);
|
|
6955
7031
|
};
|
|
6956
7032
|
|
|
6957
|
-
var _templateObject$
|
|
6958
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7033
|
+
var _templateObject$Y, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k;
|
|
7034
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__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) {
|
|
6959
7035
|
var color = _ref.color;
|
|
6960
7036
|
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 ";
|
|
6961
7037
|
}, devices.mobileAndTablet);
|
|
@@ -6999,8 +7075,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
6999
7075
|
}))));
|
|
7000
7076
|
};
|
|
7001
7077
|
|
|
7002
|
-
var _templateObject$
|
|
7003
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7078
|
+
var _templateObject$Z;
|
|
7079
|
+
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7004
7080
|
|
|
7005
7081
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7006
7082
|
var link = _ref.link,
|
|
@@ -7018,8 +7094,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7018
7094
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
7019
7095
|
};
|
|
7020
7096
|
|
|
7021
|
-
var _templateObject$
|
|
7022
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7097
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject5$l, _templateObject6$g, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
|
|
7098
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-overline-4);\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);
|
|
7023
7099
|
var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$H || (_templateObject2$H = /*#__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"])));
|
|
7024
7100
|
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7025
7101
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__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);
|
|
@@ -7153,7 +7229,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
7153
7229
|
var isIOS = function isIOS() {
|
|
7154
7230
|
try {
|
|
7155
7231
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
7156
|
-
if (typeof navigator === undefined) return false;
|
|
7232
|
+
if (typeof navigator === 'undefined') return false;
|
|
7157
7233
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
7158
7234
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
7159
7235
|
} catch (e) {
|
|
@@ -7169,7 +7245,7 @@ var useIOS = function useIOS() {
|
|
|
7169
7245
|
setIOS = _useState[1];
|
|
7170
7246
|
|
|
7171
7247
|
React.useEffect(function () {
|
|
7172
|
-
if (typeof navigator === undefined) return;
|
|
7248
|
+
if (typeof navigator === 'undefined') return;
|
|
7173
7249
|
setIOS(isIOS());
|
|
7174
7250
|
}, []);
|
|
7175
7251
|
return IOS;
|
|
@@ -7351,8 +7427,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7351
7427
|
}), linkText))));
|
|
7352
7428
|
};
|
|
7353
7429
|
|
|
7354
|
-
var _templateObject
|
|
7355
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject
|
|
7430
|
+
var _templateObject$$, _templateObject2$I, _templateObject3$A, _templateObject4$s;
|
|
7431
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
7356
7432
|
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
|
|
7357
7433
|
|
|
7358
7434
|
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
@@ -7428,8 +7504,8 @@ var Pagination = function Pagination(_ref) {
|
|
|
7428
7504
|
}))));
|
|
7429
7505
|
};
|
|
7430
7506
|
|
|
7431
|
-
var _templateObject
|
|
7432
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject
|
|
7507
|
+
var _templateObject$10, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$m, _templateObject6$h;
|
|
7508
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$10 || (_templateObject$10 = /*#__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);
|
|
7433
7509
|
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
7434
7510
|
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
7435
7511
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
@@ -7485,11 +7561,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
7485
7561
|
}));
|
|
7486
7562
|
};
|
|
7487
7563
|
|
|
7488
|
-
var _templateObject$
|
|
7489
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7564
|
+
var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u;
|
|
7565
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
7490
7566
|
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
7491
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height:
|
|
7492
|
-
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n
|
|
7567
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
|
|
7568
|
+
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
7493
7569
|
|
|
7494
7570
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
7495
7571
|
return array.reduce(function (acc, item) {
|
|
@@ -7500,12 +7576,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
7500
7576
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
7501
7577
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
7502
7578
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
7503
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
7579
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
7580
|
+
key: index
|
|
7581
|
+
}, title));
|
|
7504
7582
|
} else if (index > 0) {
|
|
7505
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
7583
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
7584
|
+
key: index
|
|
7585
|
+
}, ", ", title);
|
|
7506
7586
|
}
|
|
7507
7587
|
|
|
7508
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
7588
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
7589
|
+
key: index
|
|
7590
|
+
}, title);
|
|
7509
7591
|
}));
|
|
7510
7592
|
};
|
|
7511
7593
|
|
|
@@ -7557,14 +7639,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
7557
7639
|
}));
|
|
7558
7640
|
};
|
|
7559
7641
|
|
|
7560
|
-
var _templateObject$
|
|
7642
|
+
var _templateObject$12, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
7561
7643
|
var LENGTH_TEXT = 28;
|
|
7562
7644
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
7563
7645
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
7564
7646
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
7565
7647
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
7566
7648
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
7567
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7649
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
7568
7650
|
var imageToLeft = _ref.imageToLeft;
|
|
7569
7651
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
7570
7652
|
}, devices.tablet, function (_ref2) {
|
|
@@ -7624,8 +7706,8 @@ var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 ||
|
|
|
7624
7706
|
var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__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);
|
|
7625
7707
|
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
7626
7708
|
var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__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);
|
|
7627
|
-
var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7628
|
-
var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7709
|
+
var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7710
|
+
var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7629
7711
|
var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7630
7712
|
var asCardOverrides = /*#__PURE__*/styled.css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n\n ", " {\n font-size: var(--font-size-overline-2);\n font-weight: var(--font-weight-overline-2);\n line-height: var(--line-height-overline-2);\n letter-spacing: var(--letter-spacing-overline-2);\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
|
|
7631
7713
|
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__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 (_ref11) {
|
|
@@ -7835,10 +7917,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7835
7917
|
}))));
|
|
7836
7918
|
};
|
|
7837
7919
|
|
|
7838
|
-
var _templateObject$
|
|
7920
|
+
var _templateObject$13, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$j, _templateObject7$d;
|
|
7839
7921
|
var LENGTH_TEXT$2 = 28;
|
|
7840
7922
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
7841
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7923
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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) {
|
|
7842
7924
|
var imageToLeft = _ref.imageToLeft;
|
|
7843
7925
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
7844
7926
|
}, devices.tablet, function (_ref2) {
|
|
@@ -7950,8 +8032,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7950
8032
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
7951
8033
|
};
|
|
7952
8034
|
|
|
7953
|
-
var _templateObject$
|
|
7954
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8035
|
+
var _templateObject$14;
|
|
8036
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
7955
8037
|
|
|
7956
8038
|
/**
|
|
7957
8039
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -8009,8 +8091,8 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
8009
8091
|
})));
|
|
8010
8092
|
};
|
|
8011
8093
|
|
|
8012
|
-
var _templateObject$
|
|
8013
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8094
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F;
|
|
8095
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8014
8096
|
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
8015
8097
|
var horizontalMode = _ref.horizontalMode;
|
|
8016
8098
|
if (horizontalMode) return 'row';
|
|
@@ -8099,8 +8181,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
8099
8181
|
}, error)));
|
|
8100
8182
|
};
|
|
8101
8183
|
|
|
8102
|
-
var _templateObject$
|
|
8103
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8184
|
+
var _templateObject$16, _templateObject2$O, _templateObject3$G;
|
|
8185
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-lightgrey);\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);
|
|
8104
8186
|
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__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"])));
|
|
8105
8187
|
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__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);
|
|
8106
8188
|
|
|
@@ -8164,8 +8246,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
8164
8246
|
})))));
|
|
8165
8247
|
};
|
|
8166
8248
|
|
|
8167
|
-
var _templateObject$
|
|
8168
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8249
|
+
var _templateObject$17;
|
|
8250
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
8169
8251
|
|
|
8170
8252
|
var SectionTitle = function SectionTitle(_ref) {
|
|
8171
8253
|
var title = _ref.title,
|
|
@@ -8191,8 +8273,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
8191
8273
|
}, description))));
|
|
8192
8274
|
};
|
|
8193
8275
|
|
|
8194
|
-
var _templateObject$
|
|
8195
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
8276
|
+
var _templateObject$18, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$p, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
8277
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
8196
8278
|
var theme = _ref.theme;
|
|
8197
8279
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
8198
8280
|
}, function (_ref2) {
|
|
@@ -8614,9 +8696,9 @@ function Select(_ref3) {
|
|
|
8614
8696
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
8615
8697
|
}
|
|
8616
8698
|
|
|
8617
|
-
var _templateObject$
|
|
8618
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8619
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-
|
|
8699
|
+
var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
|
|
8700
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
8701
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-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 .chord-select__single-value,\n .chord-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 .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 15px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-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 &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-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 .chord-select__menu-notice {\n padding: 10px 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 .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
8620
8702
|
var width = _ref.width;
|
|
8621
8703
|
if (!width) return 'none';
|
|
8622
8704
|
return width + 'px';
|
|
@@ -8649,6 +8731,28 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8649
8731
|
iconName: "DropdownArrow"
|
|
8650
8732
|
}));
|
|
8651
8733
|
};
|
|
8734
|
+
var WrapperComponent = function WrapperComponent(_ref) {
|
|
8735
|
+
var label = _ref.label,
|
|
8736
|
+
error = _ref.error,
|
|
8737
|
+
width = _ref.width,
|
|
8738
|
+
darkMode = _ref.darkMode,
|
|
8739
|
+
children = _ref.children;
|
|
8740
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
8741
|
+
darkMode: darkMode,
|
|
8742
|
+
"data-testid": "select2-text-label"
|
|
8743
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8744
|
+
level: 6
|
|
8745
|
+
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8746
|
+
width: width,
|
|
8747
|
+
error: error,
|
|
8748
|
+
darkMode: darkMode
|
|
8749
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
8750
|
+
darkMode: darkMode,
|
|
8751
|
+
"data-testid": "select2-error-label"
|
|
8752
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8753
|
+
level: 6
|
|
8754
|
+
}, error)));
|
|
8755
|
+
};
|
|
8652
8756
|
/**
|
|
8653
8757
|
* A Select2 component wraps react-select with Chord styling and additional elements like
|
|
8654
8758
|
* text and error labels. This should be used just as usual react-select component.
|
|
@@ -8664,46 +8768,71 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8664
8768
|
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8665
8769
|
*/
|
|
8666
8770
|
|
|
8771
|
+
var SelectComponent = function SelectComponent(_ref2) {
|
|
8772
|
+
var label = _ref2.label,
|
|
8773
|
+
error = _ref2.error,
|
|
8774
|
+
width = _ref2.width,
|
|
8775
|
+
_ref2$darkMode = _ref2.darkMode,
|
|
8776
|
+
darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
|
|
8777
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode"]);
|
|
8667
8778
|
|
|
8668
|
-
|
|
8779
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8780
|
+
label: label,
|
|
8781
|
+
error: error,
|
|
8782
|
+
width: width,
|
|
8783
|
+
darkMode: darkMode
|
|
8784
|
+
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({
|
|
8785
|
+
components: {
|
|
8786
|
+
DropdownIndicator: DropdownIndicator,
|
|
8787
|
+
LoadingIndicator: undefined,
|
|
8788
|
+
IndicatorSeparator: undefined
|
|
8789
|
+
},
|
|
8790
|
+
className: "chord-select-container",
|
|
8791
|
+
classNamePrefix: "chord-select"
|
|
8792
|
+
}, selectProps)));
|
|
8793
|
+
};
|
|
8794
|
+
|
|
8795
|
+
/**
|
|
8796
|
+
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
8797
|
+
* component for select instead of regular react-select component. This can be used
|
|
8798
|
+
* for selects with dynamically loaded options, live search components etc.
|
|
8799
|
+
*
|
|
8800
|
+
* # Error state
|
|
8801
|
+
* An error label will be shown below the select if the `error` prop exists.
|
|
8802
|
+
* Also select will be rendered with a red border. An empty string can be passed to
|
|
8803
|
+
* render only error state without error message.
|
|
8804
|
+
*
|
|
8805
|
+
* # Light / Dark mode
|
|
8806
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
8807
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8808
|
+
*/
|
|
8809
|
+
|
|
8810
|
+
var SelectComponent$1 = function SelectComponent(_ref) {
|
|
8669
8811
|
var label = _ref.label,
|
|
8670
8812
|
error = _ref.error,
|
|
8671
8813
|
width = _ref.width,
|
|
8672
8814
|
_ref$darkMode = _ref.darkMode,
|
|
8673
8815
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
8674
|
-
|
|
8675
|
-
isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
|
|
8676
|
-
_ref$placeholder = _ref.placeholder,
|
|
8677
|
-
placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
|
|
8678
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
|
|
8816
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable"]);
|
|
8679
8817
|
|
|
8680
|
-
return /*#__PURE__*/React__default.createElement(
|
|
8681
|
-
|
|
8682
|
-
"data-testid": "select2-text-label"
|
|
8683
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8684
|
-
level: 6
|
|
8685
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8686
|
-
width: width,
|
|
8818
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8819
|
+
label: label,
|
|
8687
8820
|
error: error,
|
|
8821
|
+
width: width,
|
|
8688
8822
|
darkMode: darkMode
|
|
8689
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
8823
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({
|
|
8690
8824
|
components: {
|
|
8691
|
-
DropdownIndicator: DropdownIndicator
|
|
8825
|
+
DropdownIndicator: DropdownIndicator,
|
|
8826
|
+
LoadingIndicator: undefined,
|
|
8827
|
+
IndicatorSeparator: undefined
|
|
8692
8828
|
},
|
|
8693
|
-
isSearchable: isSearchable,
|
|
8694
|
-
placeholder: placeholder,
|
|
8695
8829
|
className: "chord-select-container",
|
|
8696
8830
|
classNamePrefix: "chord-select"
|
|
8697
|
-
}, selectProps)))
|
|
8698
|
-
darkMode: darkMode,
|
|
8699
|
-
"data-testid": "select2-error-label"
|
|
8700
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8701
|
-
level: 6
|
|
8702
|
-
}, error)));
|
|
8831
|
+
}, selectProps)));
|
|
8703
8832
|
};
|
|
8704
8833
|
|
|
8705
|
-
var _templateObject$
|
|
8706
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8834
|
+
var _templateObject$1a;
|
|
8835
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__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 text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\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 margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\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 margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
8707
8836
|
var theme = _ref.theme;
|
|
8708
8837
|
return theme.colors.primary;
|
|
8709
8838
|
});
|
|
@@ -8731,8 +8860,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
8731
8860
|
})));
|
|
8732
8861
|
};
|
|
8733
8862
|
|
|
8734
|
-
var _templateObject$
|
|
8735
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8863
|
+
var _templateObject$1b, _templateObject2$R;
|
|
8864
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__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"])), ImageAspectRatioWrapper, function (_ref) {
|
|
8736
8865
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8737
8866
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8738
8867
|
return aspectRatio;
|
|
@@ -8780,8 +8909,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
8780
8909
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
8781
8910
|
};
|
|
8782
8911
|
|
|
8783
|
-
var _templateObject$
|
|
8784
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8912
|
+
var _templateObject$1c, _templateObject2$S, _templateObject3$J;
|
|
8913
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
8785
8914
|
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
8786
8915
|
var displayAttribution = _ref.displayAttribution;
|
|
8787
8916
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
@@ -8810,8 +8939,8 @@ var Quote = function Quote(_ref) {
|
|
|
8810
8939
|
}, attribution))));
|
|
8811
8940
|
};
|
|
8812
8941
|
|
|
8813
|
-
var _templateObject$
|
|
8814
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8942
|
+
var _templateObject$1d, _templateObject2$T, _templateObject3$K, _templateObject4$z, _templateObject5$q, _templateObject6$l;
|
|
8943
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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"])));
|
|
8815
8944
|
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
8816
8945
|
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
8817
8946
|
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
@@ -8854,8 +8983,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
8854
8983
|
}, title)))));
|
|
8855
8984
|
};
|
|
8856
8985
|
|
|
8857
|
-
var _templateObject$
|
|
8858
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8986
|
+
var _templateObject$1e, _templateObject2$U, _templateObject3$L, _templateObject4$A;
|
|
8987
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
|
|
8859
8988
|
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
8860
8989
|
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8861
8990
|
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__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"])));
|
|
@@ -8956,96 +9085,14 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8956
9085
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
8957
9086
|
};
|
|
8958
9087
|
|
|
8959
|
-
var _templateObject$
|
|
8960
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
8961
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$V || (_templateObject2$V = /*#__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 @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\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"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
8962
|
-
var mobileOpen = _ref.mobileOpen;
|
|
8963
|
-
return mobileOpen ? "block" : 'none';
|
|
8964
|
-
}, exports.Colors.White, exports.Colors.DarkGrey);
|
|
8965
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__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 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), exports.Colors.Black, function (_ref2) {
|
|
8966
|
-
var active = _ref2.active;
|
|
8967
|
-
return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
8968
|
-
}, exports.Colors.MidGrey, devices.mobile);
|
|
8969
|
-
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n 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: none;\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 @media ", " {\n display: block;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey, devices.mobile);
|
|
8970
|
-
|
|
8971
|
-
/**
|
|
8972
|
-
* Vertical menu component uses for navigation
|
|
8973
|
-
* inside website chapter. It looks like a vertical
|
|
8974
|
-
* list with clickable items on desktop and dropdown
|
|
8975
|
-
* list on mobile.
|
|
8976
|
-
*
|
|
8977
|
-
* ## Menu items
|
|
8978
|
-
* Menu items should be passed as `items` prop. This
|
|
8979
|
-
* should be an array of objects. Each object should
|
|
8980
|
-
* have `text` (text displayed as a menu item) and
|
|
8981
|
-
* `onClick` (click handler function)
|
|
8982
|
-
*
|
|
8983
|
-
* ## Active menu item
|
|
8984
|
-
* Active menu item should be passed as component `activeItem`
|
|
8985
|
-
* prop. This indicates on which menu item should be highlighted
|
|
8986
|
-
* as active one. Should be equal to `text` prop from one of the `items`
|
|
8987
|
-
*/
|
|
8988
|
-
|
|
8989
|
-
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
8990
|
-
var items = _ref.items,
|
|
8991
|
-
activeItem = _ref.activeItem;
|
|
8992
|
-
|
|
8993
|
-
var _useState = React.useState(false),
|
|
8994
|
-
mobileOpen = _useState[0],
|
|
8995
|
-
setMobileOpen = _useState[1];
|
|
8996
|
-
|
|
8997
|
-
var containerRef = React.useRef(null);
|
|
8998
|
-
|
|
8999
|
-
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
9000
|
-
setMobileOpen(function (prev) {
|
|
9001
|
-
return !prev;
|
|
9002
|
-
});
|
|
9003
|
-
};
|
|
9004
|
-
|
|
9005
|
-
var outsideClickHandler = function outsideClickHandler(event) {
|
|
9006
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
9007
|
-
setMobileOpen(false);
|
|
9008
|
-
}
|
|
9009
|
-
};
|
|
9010
|
-
|
|
9011
|
-
React.useEffect(function () {
|
|
9012
|
-
document.addEventListener('mousedown', outsideClickHandler);
|
|
9013
|
-
return function () {
|
|
9014
|
-
document.removeEventListener('mousedown', outsideClickHandler);
|
|
9015
|
-
};
|
|
9016
|
-
}, [containerRef]);
|
|
9017
|
-
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
9018
|
-
ref: containerRef,
|
|
9019
|
-
"data-testid": "nav-menu-container"
|
|
9020
|
-
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
9021
|
-
mobileOpen: mobileOpen,
|
|
9022
|
-
onClick: mobileButtonClickHandler,
|
|
9023
|
-
"data-testid": "nav-menu-mobile-button"
|
|
9024
|
-
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9025
|
-
iconName: "DropdownArrow",
|
|
9026
|
-
direction: mobileOpen ? 'left' : 'right'
|
|
9027
|
-
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
9028
|
-
mobileOpen: mobileOpen,
|
|
9029
|
-
"data-testid": "nav-menu-list"
|
|
9030
|
-
}, items.map(function (item, idx) {
|
|
9031
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
9032
|
-
key: item.text + "-" + idx
|
|
9033
|
-
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
9034
|
-
onClick: item.onClick,
|
|
9035
|
-
active: item.text === activeItem,
|
|
9036
|
-
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
9037
|
-
}, item.text));
|
|
9038
|
-
})));
|
|
9039
|
-
};
|
|
9040
|
-
|
|
9041
|
-
var _templateObject$1f, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
|
|
9088
|
+
var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r, _templateObject6$m;
|
|
9042
9089
|
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
9043
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9044
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9090
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
9091
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
9045
9092
|
var color = _ref.color;
|
|
9046
9093
|
return "var(--base-color-" + color + ")";
|
|
9047
9094
|
});
|
|
9048
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9095
|
+
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
9049
9096
|
var Text = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
9050
9097
|
var color = _ref2.color;
|
|
9051
9098
|
return "var(--base-color-" + color + ")";
|
|
@@ -9136,6 +9183,279 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
9136
9183
|
}, strengthLabel))));
|
|
9137
9184
|
};
|
|
9138
9185
|
|
|
9186
|
+
var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C;
|
|
9187
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9188
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$W || (_templateObject2$W = /*#__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 @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\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"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
9189
|
+
var mobileOpen = _ref.mobileOpen;
|
|
9190
|
+
return mobileOpen ? "block" : 'none';
|
|
9191
|
+
}, exports.Colors.White, exports.Colors.DarkGrey);
|
|
9192
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$N || (_templateObject3$N = /*#__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 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), exports.Colors.Black, function (_ref2) {
|
|
9193
|
+
var active = _ref2.active;
|
|
9194
|
+
return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
9195
|
+
}, exports.Colors.MidGrey, devices.mobile);
|
|
9196
|
+
var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$C || (_templateObject4$C = /*#__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: none;\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 @media ", " {\n display: block;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey, devices.mobile);
|
|
9197
|
+
|
|
9198
|
+
/**
|
|
9199
|
+
* Vertical menu component uses for navigation
|
|
9200
|
+
* inside website chapter. It looks like a vertical
|
|
9201
|
+
* list with clickable items on desktop and dropdown
|
|
9202
|
+
* list on mobile.
|
|
9203
|
+
*
|
|
9204
|
+
* ## Menu items
|
|
9205
|
+
* Menu items should be passed as `items` prop. This
|
|
9206
|
+
* should be an array of objects. Each object should
|
|
9207
|
+
* have `text` (text displayed as a menu item) and
|
|
9208
|
+
* `onClick` (click handler function)
|
|
9209
|
+
*
|
|
9210
|
+
* ## Active menu item
|
|
9211
|
+
* Active menu item should be passed as component `activeItem`
|
|
9212
|
+
* prop. This indicates on which menu item should be highlighted
|
|
9213
|
+
* as active one. Should be equal to `text` prop from one of the `items`
|
|
9214
|
+
*/
|
|
9215
|
+
|
|
9216
|
+
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
9217
|
+
var items = _ref.items,
|
|
9218
|
+
activeItem = _ref.activeItem;
|
|
9219
|
+
|
|
9220
|
+
var _useState = React.useState(false),
|
|
9221
|
+
mobileOpen = _useState[0],
|
|
9222
|
+
setMobileOpen = _useState[1];
|
|
9223
|
+
|
|
9224
|
+
var containerRef = React.useRef(null);
|
|
9225
|
+
|
|
9226
|
+
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
9227
|
+
setMobileOpen(function (prev) {
|
|
9228
|
+
return !prev;
|
|
9229
|
+
});
|
|
9230
|
+
};
|
|
9231
|
+
|
|
9232
|
+
var outsideClickHandler = function outsideClickHandler(event) {
|
|
9233
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
9234
|
+
setMobileOpen(false);
|
|
9235
|
+
}
|
|
9236
|
+
};
|
|
9237
|
+
|
|
9238
|
+
React.useEffect(function () {
|
|
9239
|
+
document.addEventListener('mousedown', outsideClickHandler);
|
|
9240
|
+
return function () {
|
|
9241
|
+
document.removeEventListener('mousedown', outsideClickHandler);
|
|
9242
|
+
};
|
|
9243
|
+
}, [containerRef]);
|
|
9244
|
+
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
9245
|
+
ref: containerRef,
|
|
9246
|
+
"data-testid": "nav-menu-container"
|
|
9247
|
+
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
9248
|
+
mobileOpen: mobileOpen,
|
|
9249
|
+
onClick: mobileButtonClickHandler,
|
|
9250
|
+
"data-testid": "nav-menu-mobile-button"
|
|
9251
|
+
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9252
|
+
iconName: "DropdownArrow",
|
|
9253
|
+
direction: mobileOpen ? 'left' : 'right'
|
|
9254
|
+
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
9255
|
+
mobileOpen: mobileOpen,
|
|
9256
|
+
"data-testid": "nav-menu-list"
|
|
9257
|
+
}, items.map(function (item, idx) {
|
|
9258
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
9259
|
+
key: item.text + "-" + idx
|
|
9260
|
+
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
9261
|
+
onClick: item.onClick,
|
|
9262
|
+
active: item.text === activeItem,
|
|
9263
|
+
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
9264
|
+
}, item.text));
|
|
9265
|
+
})));
|
|
9266
|
+
};
|
|
9267
|
+
|
|
9268
|
+
var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6;
|
|
9269
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 24px 0;\n text-align: left;\n text-transform: uppercase;\n"])));
|
|
9270
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject2$X || (_templateObject2$X = /*#__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: 34px 30px 34px 0;\n text-align: left;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])), function (props) {
|
|
9271
|
+
return "calc(100% / " + (props.columns - 1) + ")";
|
|
9272
|
+
});
|
|
9273
|
+
var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
9274
|
+
return "var(--base-color-" + props.lineColor + ")";
|
|
9275
|
+
});
|
|
9276
|
+
var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--base-color-transparent);\n }\n"])));
|
|
9277
|
+
var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
|
|
9278
|
+
var active = _ref.active;
|
|
9279
|
+
return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
|
|
9280
|
+
});
|
|
9281
|
+
var Next = /*#__PURE__*/styled__default.span(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
9282
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n"])));
|
|
9283
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
9284
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
9285
|
+
|
|
9286
|
+
var Table = function Table(_ref) {
|
|
9287
|
+
var columns = _ref.columns,
|
|
9288
|
+
headings = _ref.headings,
|
|
9289
|
+
children = _ref.children,
|
|
9290
|
+
lineColors = _ref.lineColors,
|
|
9291
|
+
rowsPerPage = _ref.rowsPerPage,
|
|
9292
|
+
pagination = _ref.pagination;
|
|
9293
|
+
|
|
9294
|
+
var _useState = React.useState(0),
|
|
9295
|
+
currentPage = _useState[0],
|
|
9296
|
+
setCurrentPage = _useState[1];
|
|
9297
|
+
|
|
9298
|
+
var _useState2 = React.useState(false),
|
|
9299
|
+
showScrollButtons = _useState2[0],
|
|
9300
|
+
setShowScrollButtons = _useState2[1];
|
|
9301
|
+
|
|
9302
|
+
var Content = function Content(_ref2) {
|
|
9303
|
+
var content = _ref2.content;
|
|
9304
|
+
return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
|
|
9305
|
+
dangerouslySetInnerHTML: {
|
|
9306
|
+
__html: content
|
|
9307
|
+
}
|
|
9308
|
+
}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
|
|
9309
|
+
};
|
|
9310
|
+
|
|
9311
|
+
var Cell = function Cell(_ref3) {
|
|
9312
|
+
var cell = _ref3.cell,
|
|
9313
|
+
cellIndex = _ref3.cellIndex,
|
|
9314
|
+
columns = _ref3.columns;
|
|
9315
|
+
return /*#__PURE__*/React__default.createElement(TableCell, {
|
|
9316
|
+
key: cellIndex,
|
|
9317
|
+
columns: columns
|
|
9318
|
+
}, /*#__PURE__*/React__default.createElement(Content, {
|
|
9319
|
+
content: cell
|
|
9320
|
+
}));
|
|
9321
|
+
};
|
|
9322
|
+
|
|
9323
|
+
var Row = function Row(_ref4) {
|
|
9324
|
+
var row = _ref4.row,
|
|
9325
|
+
rowIndex = _ref4.rowIndex,
|
|
9326
|
+
columns = _ref4.columns,
|
|
9327
|
+
lineColor = _ref4.lineColor;
|
|
9328
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
|
9329
|
+
key: rowIndex
|
|
9330
|
+
}, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
|
|
9331
|
+
return /*#__PURE__*/React__default.createElement(Cell, {
|
|
9332
|
+
key: index,
|
|
9333
|
+
cell: cell,
|
|
9334
|
+
cellIndex: index,
|
|
9335
|
+
columns: columns
|
|
9336
|
+
});
|
|
9337
|
+
})), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9338
|
+
colSpan: columns
|
|
9339
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9340
|
+
lineColor: lineColor,
|
|
9341
|
+
role: "presentation"
|
|
9342
|
+
}))));
|
|
9343
|
+
};
|
|
9344
|
+
|
|
9345
|
+
var lineColor = lineColors != null ? lineColors : exports.ThemeType.Cinema;
|
|
9346
|
+
var tableRef = React.useRef(null);
|
|
9347
|
+
React.useEffect(function () {
|
|
9348
|
+
if (tableRef.current) {
|
|
9349
|
+
tableRef.current.scrollTo(0, 0);
|
|
9350
|
+
}
|
|
9351
|
+
}, [children]);
|
|
9352
|
+
|
|
9353
|
+
var horizontalScroll = function horizontalScroll() {
|
|
9354
|
+
if (tableRef.current) {
|
|
9355
|
+
setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
|
|
9356
|
+
}
|
|
9357
|
+
};
|
|
9358
|
+
|
|
9359
|
+
React.useEffect(function () {
|
|
9360
|
+
horizontalScroll();
|
|
9361
|
+
window.addEventListener('resize', horizontalScroll);
|
|
9362
|
+
return function () {
|
|
9363
|
+
return window.removeEventListener('resize', horizontalScroll);
|
|
9364
|
+
};
|
|
9365
|
+
}, []);
|
|
9366
|
+
|
|
9367
|
+
var scrollTable = function scrollTable(direction) {
|
|
9368
|
+
if (tableRef.current) {
|
|
9369
|
+
var currentScroll = tableRef.current.scrollLeft;
|
|
9370
|
+
var scrollAmount = direction === 'left' ? -300 : 300;
|
|
9371
|
+
tableRef.current.scrollTo({
|
|
9372
|
+
left: currentScroll + scrollAmount,
|
|
9373
|
+
behavior: 'smooth'
|
|
9374
|
+
});
|
|
9375
|
+
}
|
|
9376
|
+
};
|
|
9377
|
+
|
|
9378
|
+
var totalRows = Array.isArray(children) ? children.length : 0;
|
|
9379
|
+
var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
|
|
9380
|
+
var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
|
|
9381
|
+
var pageNumbers = Array.from({
|
|
9382
|
+
length: totalPages
|
|
9383
|
+
}, function (_, i) {
|
|
9384
|
+
return i;
|
|
9385
|
+
});
|
|
9386
|
+
var reducedPageNumbers = reducePages(pageNumbers, currentPage);
|
|
9387
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
9388
|
+
onClickPrev: function onClickPrev() {
|
|
9389
|
+
return scrollTable('left');
|
|
9390
|
+
},
|
|
9391
|
+
onClickNext: function onClickNext() {
|
|
9392
|
+
return scrollTable('right');
|
|
9393
|
+
}
|
|
9394
|
+
})), /*#__PURE__*/React__default.createElement(Container$6, {
|
|
9395
|
+
role: "table",
|
|
9396
|
+
tabIndex: 0,
|
|
9397
|
+
ref: tableRef
|
|
9398
|
+
}, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9399
|
+
colSpan: columns
|
|
9400
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9401
|
+
lineColor: lineColor,
|
|
9402
|
+
role: "presentation"
|
|
9403
|
+
})))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
|
|
9404
|
+
return /*#__PURE__*/React__default.createElement(TableHeader, {
|
|
9405
|
+
key: index,
|
|
9406
|
+
role: "columnheader"
|
|
9407
|
+
}, /*#__PURE__*/React__default.createElement(Content, {
|
|
9408
|
+
content: heading
|
|
9409
|
+
}));
|
|
9410
|
+
}))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9411
|
+
colSpan: columns
|
|
9412
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9413
|
+
lineColor: lineColor,
|
|
9414
|
+
role: "presentation"
|
|
9415
|
+
}))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
|
|
9416
|
+
return /*#__PURE__*/React__default.createElement(Row, {
|
|
9417
|
+
key: rowIndex,
|
|
9418
|
+
row: row,
|
|
9419
|
+
rowIndex: rowIndex,
|
|
9420
|
+
columns: columns,
|
|
9421
|
+
lineColor: lineColor
|
|
9422
|
+
});
|
|
9423
|
+
}))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9424
|
+
key: "previous-page",
|
|
9425
|
+
onClick: function onClick() {
|
|
9426
|
+
return setCurrentPage(currentPage - 1);
|
|
9427
|
+
},
|
|
9428
|
+
tabIndex: 0,
|
|
9429
|
+
"aria-label": "Previous page"
|
|
9430
|
+
}, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9431
|
+
iconName: "DropdownArrow",
|
|
9432
|
+
direction: "down"
|
|
9433
|
+
})))), reducedPageNumbers.map(function (number) {
|
|
9434
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
9435
|
+
key: number
|
|
9436
|
+
}, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9437
|
+
key: number,
|
|
9438
|
+
onClick: function onClick() {
|
|
9439
|
+
return setCurrentPage(number);
|
|
9440
|
+
},
|
|
9441
|
+
tabIndex: 0,
|
|
9442
|
+
active: "" + (number === currentPage)
|
|
9443
|
+
}, number + 1));
|
|
9444
|
+
}), currentPage + 4 < totalPages && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9445
|
+
key: "more-after"
|
|
9446
|
+
}, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), currentPage < totalPages - 1 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9447
|
+
key: "next-page",
|
|
9448
|
+
onClick: function onClick() {
|
|
9449
|
+
return setCurrentPage(currentPage + 1);
|
|
9450
|
+
},
|
|
9451
|
+
tabIndex: 0,
|
|
9452
|
+
"aria-label": "Next page"
|
|
9453
|
+
}, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9454
|
+
iconName: "DropdownArrow",
|
|
9455
|
+
direction: "up"
|
|
9456
|
+
})))))));
|
|
9457
|
+
};
|
|
9458
|
+
|
|
9139
9459
|
var UpsellSection = function UpsellSection(_ref) {
|
|
9140
9460
|
var title = _ref.title,
|
|
9141
9461
|
richText = _ref.richText,
|
|
@@ -9224,9 +9544,9 @@ var LiveChat = function LiveChat() {
|
|
|
9224
9544
|
});
|
|
9225
9545
|
};
|
|
9226
9546
|
|
|
9227
|
-
var _templateObject$
|
|
9228
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9229
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
9547
|
+
var _templateObject$1i, _templateObject2$Y;
|
|
9548
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
9549
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
9230
9550
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
9231
9551
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
9232
9552
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -9254,11 +9574,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
9254
9574
|
}, children)));
|
|
9255
9575
|
};
|
|
9256
9576
|
|
|
9257
|
-
var _templateObject$
|
|
9258
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9259
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
9260
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9261
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
9577
|
+
var _templateObject$1j, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
|
|
9578
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
9579
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
9580
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9581
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
9262
9582
|
|
|
9263
9583
|
var MAX_Z_INDEX = 9999999999;
|
|
9264
9584
|
|
|
@@ -9378,8 +9698,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
9378
9698
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
9379
9699
|
};
|
|
9380
9700
|
|
|
9381
|
-
var _templateObject$
|
|
9382
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
9701
|
+
var _templateObject$1k;
|
|
9702
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
9383
9703
|
var theme = _ref.theme;
|
|
9384
9704
|
return theme.colors.primary;
|
|
9385
9705
|
}, function (_ref2) {
|
|
@@ -10325,6 +10645,7 @@ exports.Accordions = Accordions;
|
|
|
10325
10645
|
exports.AltHeader = AltHeader;
|
|
10326
10646
|
exports.AnchorTabBar = AnchorTabBar;
|
|
10327
10647
|
exports.AnnouncementBanner = AnnouncementBanner;
|
|
10648
|
+
exports.AuxiliaryButton = AuxiliaryButton;
|
|
10328
10649
|
exports.AuxiliaryNav = AuxiliaryNav;
|
|
10329
10650
|
exports.BodyText = BodyText;
|
|
10330
10651
|
exports.Card = Card;
|
|
@@ -10376,6 +10697,7 @@ exports.SectionSplitter = SectionSplitter;
|
|
|
10376
10697
|
exports.SectionTitle = SectionTitle;
|
|
10377
10698
|
exports.Select = Select;
|
|
10378
10699
|
exports.Select2 = SelectComponent;
|
|
10700
|
+
exports.Select2Async = SelectComponent$1;
|
|
10379
10701
|
exports.Sponsorship = Sponsorship;
|
|
10380
10702
|
exports.StatusBanner = StatusBanner;
|
|
10381
10703
|
exports.Stepper = Component;
|
|
@@ -10384,6 +10706,7 @@ exports.StreamBadge = StreamBadge;
|
|
|
10384
10706
|
exports.Subtitle = Subtitle;
|
|
10385
10707
|
exports.Tab = Tab;
|
|
10386
10708
|
exports.TabLink = TabLink;
|
|
10709
|
+
exports.Table = Table;
|
|
10387
10710
|
exports.Tabs = Tabs;
|
|
10388
10711
|
exports.TertiaryButton = Button$1;
|
|
10389
10712
|
exports.TextArea = TextArea;
|