@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
package/dist/chord.esm.js
CHANGED
|
@@ -3,6 +3,7 @@ import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components
|
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
5
5
|
import Select$1, { components } from 'react-select';
|
|
6
|
+
import Select$2 from 'react-select/async';
|
|
6
7
|
import Modal from 'react-modal';
|
|
7
8
|
import ScrollLock from 'react-scrolllock';
|
|
8
9
|
|
|
@@ -624,6 +625,7 @@ var core = /*#__PURE__*/_extends({}, common, {
|
|
|
624
625
|
primaryButton: colors.core,
|
|
625
626
|
secondaryButton: commonColors.white,
|
|
626
627
|
tertiaryButton: 'transparent',
|
|
628
|
+
auxiliaryButton: 'transparent',
|
|
627
629
|
primaryButtonReverseBg: colors.cinema,
|
|
628
630
|
primaryButtonReverse: commonColors.white
|
|
629
631
|
})
|
|
@@ -632,30 +634,33 @@ var stream = /*#__PURE__*/_extends({}, common, {
|
|
|
632
634
|
colors: /*#__PURE__*/_extends({}, commonColors, colors, {
|
|
633
635
|
primary: colors.stream,
|
|
634
636
|
primaryButton: colors.stream,
|
|
637
|
+
primaryButtonReverseBg: colors.cinema,
|
|
638
|
+
primaryButtonReverse: commonColors.white,
|
|
635
639
|
secondaryButton: commonColors.white,
|
|
636
640
|
tertiaryButton: 'transparent',
|
|
637
|
-
|
|
638
|
-
primaryButtonReverse: commonColors.white
|
|
641
|
+
auxiliaryButton: 'transparent'
|
|
639
642
|
})
|
|
640
643
|
});
|
|
641
644
|
var cinema = /*#__PURE__*/_extends({}, common, {
|
|
642
645
|
colors: /*#__PURE__*/_extends({}, commonColors, colors, {
|
|
643
646
|
primary: colors.cinema,
|
|
644
647
|
primaryButton: commonColors.white,
|
|
648
|
+
primaryButtonReverseBg: commonColors.white,
|
|
649
|
+
primaryButtonReverse: colors.cinema,
|
|
645
650
|
secondaryButton: commonColors.white,
|
|
646
651
|
tertiaryButton: 'transparent',
|
|
647
|
-
|
|
648
|
-
primaryButtonReverse: colors.cinema
|
|
652
|
+
auxiliaryButton: 'transparent'
|
|
649
653
|
})
|
|
650
654
|
});
|
|
651
655
|
var schools = /*#__PURE__*/_extends({}, common, {
|
|
652
656
|
colors: /*#__PURE__*/_extends({}, commonColors, colors, {
|
|
653
657
|
primary: colors.core,
|
|
654
658
|
primaryButton: colors.core,
|
|
659
|
+
primaryButtonReverseBg: colors.cinema,
|
|
660
|
+
primaryButtonReverse: commonColors.white,
|
|
655
661
|
secondaryButton: commonColors.white,
|
|
656
662
|
tertiaryButton: 'transparent',
|
|
657
|
-
|
|
658
|
-
primaryButtonReverse: commonColors.white
|
|
663
|
+
auxiliaryButton: 'transparent'
|
|
659
664
|
}),
|
|
660
665
|
fonts: /*#__PURE__*/_extends({}, common.fonts, {
|
|
661
666
|
desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
|
|
@@ -705,21 +710,36 @@ var Wrapper = /*#__PURE__*/styled.span(_templateObject$3 || (_templateObject$3 =
|
|
|
705
710
|
return color || 'black';
|
|
706
711
|
}, core.colors.black);
|
|
707
712
|
|
|
708
|
-
var
|
|
713
|
+
var Expand12px = (function (_ref) {
|
|
709
714
|
var _ref$color = _ref.color,
|
|
710
715
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
711
716
|
return /*#__PURE__*/createElement("svg", {
|
|
712
|
-
|
|
713
|
-
|
|
717
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
718
|
+
width: "12",
|
|
719
|
+
height: "12",
|
|
714
720
|
viewBox: "0 0 12 12",
|
|
715
|
-
fill: "none"
|
|
716
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
721
|
+
fill: "none"
|
|
717
722
|
}, /*#__PURE__*/createElement("path", {
|
|
718
|
-
d: "M7.
|
|
723
|
+
d: "M7.02857 0H5.31429V4.97143H0V6.68571H5.31429V12H7.02857V6.68571H12V4.97143H7.02857V0Z",
|
|
719
724
|
fill: color
|
|
720
725
|
}));
|
|
721
726
|
});
|
|
722
727
|
|
|
728
|
+
var Remove12px = (function (_ref) {
|
|
729
|
+
var _ref$color = _ref.color,
|
|
730
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
731
|
+
return /*#__PURE__*/createElement("svg", {
|
|
732
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
733
|
+
width: "12",
|
|
734
|
+
height: "12",
|
|
735
|
+
viewBox: "0 0 12 12",
|
|
736
|
+
fill: "none"
|
|
737
|
+
}, /*#__PURE__*/createElement("g", null, /*#__PURE__*/createElement("path", {
|
|
738
|
+
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",
|
|
739
|
+
fill: color
|
|
740
|
+
})));
|
|
741
|
+
});
|
|
742
|
+
|
|
723
743
|
var Tick = (function (_ref) {
|
|
724
744
|
var _ref$color = _ref.color,
|
|
725
745
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
@@ -1839,6 +1859,21 @@ var Refresh = (function (_ref) {
|
|
|
1839
1859
|
}));
|
|
1840
1860
|
});
|
|
1841
1861
|
|
|
1862
|
+
var Remove = (function (_ref) {
|
|
1863
|
+
var _ref$color = _ref.color,
|
|
1864
|
+
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
1865
|
+
return /*#__PURE__*/createElement("svg", {
|
|
1866
|
+
width: "100%",
|
|
1867
|
+
height: "100%",
|
|
1868
|
+
viewBox: "0 0 12 12",
|
|
1869
|
+
fill: "none",
|
|
1870
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1871
|
+
}, /*#__PURE__*/createElement("path", {
|
|
1872
|
+
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",
|
|
1873
|
+
fill: color
|
|
1874
|
+
}));
|
|
1875
|
+
});
|
|
1876
|
+
|
|
1842
1877
|
var Star = (function (_ref) {
|
|
1843
1878
|
var _ref$color = _ref.color,
|
|
1844
1879
|
color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
|
|
@@ -2151,6 +2186,7 @@ var IconLibrary = {
|
|
|
2151
2186
|
EditMyList: EditMyList,
|
|
2152
2187
|
Email: Email,
|
|
2153
2188
|
Expand: Expand,
|
|
2189
|
+
Expand12px: Expand12px,
|
|
2154
2190
|
ExternalLink: ExternalLink,
|
|
2155
2191
|
Facebook: Facebook,
|
|
2156
2192
|
Favourite: Favourite,
|
|
@@ -2180,6 +2216,7 @@ var IconLibrary = {
|
|
|
2180
2216
|
Refresh: Refresh,
|
|
2181
2217
|
Reminder: Reminder,
|
|
2182
2218
|
Remove: Remove,
|
|
2219
|
+
Remove12px: Remove12px,
|
|
2183
2220
|
Restart: Restart,
|
|
2184
2221
|
Search: Search,
|
|
2185
2222
|
Seat: Seat,
|
|
@@ -2227,15 +2264,17 @@ var Button = function Button(_ref) {
|
|
|
2227
2264
|
var children = _ref.children,
|
|
2228
2265
|
iconName = _ref.iconName,
|
|
2229
2266
|
iconDirection = _ref.iconDirection,
|
|
2267
|
+
iconClassName = _ref.iconClassName,
|
|
2230
2268
|
color = _ref.color,
|
|
2231
|
-
rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
|
|
2269
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "iconClassName", "color"]);
|
|
2232
2270
|
|
|
2233
2271
|
var truncatedString = children.substring(0, 30);
|
|
2234
2272
|
return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
|
|
2235
2273
|
color: color,
|
|
2236
2274
|
iconName: iconName
|
|
2237
2275
|
}), iconName ? /*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
|
|
2238
|
-
"data-testid": "button-icon"
|
|
2276
|
+
"data-testid": "button-icon",
|
|
2277
|
+
className: iconClassName
|
|
2239
2278
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2240
2279
|
iconName: iconName,
|
|
2241
2280
|
direction: iconDirection,
|
|
@@ -3568,7 +3607,7 @@ var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObjec
|
|
|
3568
3607
|
if (!width) return 'none';
|
|
3569
3608
|
return width + 'px';
|
|
3570
3609
|
});
|
|
3571
|
-
var Input = /*#__PURE__*/styled.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
|
|
3610
|
+
var Input = /*#__PURE__*/styled.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) {
|
|
3572
3611
|
var isPasswordField = _ref2.isPasswordField;
|
|
3573
3612
|
if (isPasswordField) return "80px";
|
|
3574
3613
|
return "20px";
|
|
@@ -3676,7 +3715,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3676
3715
|
"data-testid": "text-field-input",
|
|
3677
3716
|
ref: ref
|
|
3678
3717
|
}, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
|
|
3679
|
-
type:
|
|
3718
|
+
type: 'button',
|
|
3680
3719
|
onClick: showHideClickHandler
|
|
3681
3720
|
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
3682
3721
|
level: 1
|
|
@@ -3846,7 +3885,10 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3846
3885
|
onKeyPress: spaceButtonHandler,
|
|
3847
3886
|
dark: isDarkMode,
|
|
3848
3887
|
disabled: disabled,
|
|
3849
|
-
"data-testid": "tickbox"
|
|
3888
|
+
"data-testid": "tickbox",
|
|
3889
|
+
role: "checkbox",
|
|
3890
|
+
"aria-checked": selected ? 'true' : 'false',
|
|
3891
|
+
"aria-labelledby": dataLabel
|
|
3850
3892
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3851
3893
|
level: 1,
|
|
3852
3894
|
tag: "span"
|
|
@@ -3857,6 +3899,7 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3857
3899
|
dark: isDarkMode,
|
|
3858
3900
|
"aria-labelledby": dataLabel,
|
|
3859
3901
|
whiteBox: whiteBox,
|
|
3902
|
+
"aria-checked": selected ? 'true' : 'false',
|
|
3860
3903
|
disabled: disabled
|
|
3861
3904
|
}), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
|
|
3862
3905
|
dark: isDarkMode,
|
|
@@ -6049,7 +6092,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6049
6092
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6050
6093
|
contentType: accordion.contentType,
|
|
6051
6094
|
displayLevel: accordion.displayLevel,
|
|
6052
|
-
semanticLevel: accordion.semanticLevel
|
|
6095
|
+
semanticLevel: accordion.semanticLevel,
|
|
6096
|
+
initOpen: accordion.initOpen
|
|
6053
6097
|
}, accordion.children);
|
|
6054
6098
|
}));
|
|
6055
6099
|
};
|
|
@@ -6106,11 +6150,33 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
6106
6150
|
}))))));
|
|
6107
6151
|
};
|
|
6108
6152
|
|
|
6109
|
-
var _templateObject$P
|
|
6153
|
+
var _templateObject$P;
|
|
6154
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(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) {
|
|
6155
|
+
var bgColor = _ref.bgColor,
|
|
6156
|
+
theme = _ref.theme;
|
|
6157
|
+
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
6158
|
+
}, function (_ref2) {
|
|
6159
|
+
var color = _ref2.color;
|
|
6160
|
+
return color;
|
|
6161
|
+
});
|
|
6162
|
+
|
|
6163
|
+
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
6164
|
+
var _props$color;
|
|
6165
|
+
|
|
6166
|
+
var children = _ref.children,
|
|
6167
|
+
props = _objectWithoutPropertiesLoose(_ref, ["children"]);
|
|
6168
|
+
|
|
6169
|
+
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
6170
|
+
color: (_props$color = props.color) != null ? _props$color : Colors.Black,
|
|
6171
|
+
iconClassName: "auxiliaryButtonIcon"
|
|
6172
|
+
}), children);
|
|
6173
|
+
};
|
|
6174
|
+
|
|
6175
|
+
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;
|
|
6110
6176
|
var LENGTH_LARGE_TEXT = 28;
|
|
6111
6177
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
6112
6178
|
var LENGTH_TEXT_TABLET = 10;
|
|
6113
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6179
|
+
var CardContainer = /*#__PURE__*/styled.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) {
|
|
6114
6180
|
var isCardClickable = _ref.isCardClickable;
|
|
6115
6181
|
return isCardClickable ? 'pointer' : 'default';
|
|
6116
6182
|
}, function (_ref2) {
|
|
@@ -6134,20 +6200,22 @@ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$k || (_templat
|
|
|
6134
6200
|
var TitleContainer$4 = /*#__PURE__*/styled.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);
|
|
6135
6201
|
var TitleContainerMobile = /*#__PURE__*/styled.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);
|
|
6136
6202
|
var TextContainer$1 = /*#__PURE__*/styled.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"])));
|
|
6137
|
-
var
|
|
6138
|
-
var
|
|
6203
|
+
var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
6204
|
+
var SubtitleContainer = /*#__PURE__*/styled.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"])));
|
|
6205
|
+
var LabelContainer = /*#__PURE__*/styled.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) {
|
|
6139
6206
|
var isVisible = _ref6.isVisible;
|
|
6140
6207
|
return isVisible ? "visible" : 'hidden';
|
|
6141
6208
|
}, devices.mobile, function (_ref7) {
|
|
6142
6209
|
var isGridCard = _ref7.isGridCard;
|
|
6143
6210
|
return isGridCard ? '20px' : '0';
|
|
6144
6211
|
});
|
|
6145
|
-
var
|
|
6212
|
+
var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: var(--editorial-margin-between);\n"])));
|
|
6213
|
+
var LabelElements = /*#__PURE__*/styled.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) {
|
|
6146
6214
|
var bgColor = _ref8.bgColor,
|
|
6147
6215
|
theme = _ref8.theme;
|
|
6148
6216
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
|
|
6149
6217
|
});
|
|
6150
|
-
var LabelIconWrapper = /*#__PURE__*/styled.div(
|
|
6218
|
+
var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
|
|
6151
6219
|
|
|
6152
6220
|
var getButtonsOpacity = function getButtonsOpacity(_ref9) {
|
|
6153
6221
|
var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
|
|
@@ -6159,7 +6227,7 @@ var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
|
|
|
6159
6227
|
return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
|
|
6160
6228
|
};
|
|
6161
6229
|
|
|
6162
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(
|
|
6230
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.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) {
|
|
6163
6231
|
var size = _ref11.size,
|
|
6164
6232
|
primaryButtonTextLength = _ref11.primaryButtonTextLength,
|
|
6165
6233
|
tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
|
|
@@ -6269,6 +6337,8 @@ var Card = function Card(_ref) {
|
|
|
6269
6337
|
subtitle = _ref.subtitle,
|
|
6270
6338
|
_ref$text = _ref.text,
|
|
6271
6339
|
text = _ref$text === void 0 ? '' : _ref$text,
|
|
6340
|
+
_ref$highlightText = _ref.highlightText,
|
|
6341
|
+
highlightText = _ref$highlightText === void 0 ? '' : _ref$highlightText,
|
|
6272
6342
|
links = _ref.links,
|
|
6273
6343
|
_ref$tags = _ref.tags,
|
|
6274
6344
|
tags = _ref$tags === void 0 ? [] : _ref$tags,
|
|
@@ -6286,7 +6356,8 @@ var Card = function Card(_ref) {
|
|
|
6286
6356
|
hoverLineColor = _ref.hoverLineColor,
|
|
6287
6357
|
labelParams = _ref.labelParams,
|
|
6288
6358
|
_ref$isGridCard = _ref.isGridCard,
|
|
6289
|
-
isGridCard = _ref$isGridCard === void 0 ? false : _ref$isGridCard
|
|
6359
|
+
isGridCard = _ref$isGridCard === void 0 ? false : _ref$isGridCard,
|
|
6360
|
+
auxiliaryCTA = _ref.auxiliaryCTA;
|
|
6290
6361
|
|
|
6291
6362
|
var truncate = function truncate(str, n) {
|
|
6292
6363
|
return str.length >= n ? str.substr(0, n) : str;
|
|
@@ -6381,9 +6452,12 @@ var Card = function Card(_ref) {
|
|
|
6381
6452
|
dangerouslySetInnerHTML: {
|
|
6382
6453
|
__html: truncatedText
|
|
6383
6454
|
}
|
|
6384
|
-
}))),
|
|
6455
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
6456
|
+
level: 1
|
|
6457
|
+
}, 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, {
|
|
6385
6458
|
ref: node,
|
|
6386
6459
|
"data-testid": "buttonscontainer",
|
|
6460
|
+
className: "cardButtonsContainer",
|
|
6387
6461
|
size: size,
|
|
6388
6462
|
primaryButtonTextLength: firstButtonText.length,
|
|
6389
6463
|
tertiaryButtonTextLength: secondButtonText.length,
|
|
@@ -6392,8 +6466,8 @@ var Card = function Card(_ref) {
|
|
|
6392
6466
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
6393
6467
|
};
|
|
6394
6468
|
|
|
6395
|
-
var _templateObject$
|
|
6396
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
6469
|
+
var _templateObject$R, _templateObject2$z;
|
|
6470
|
+
var CardsContainer = /*#__PURE__*/styled(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);
|
|
6397
6471
|
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
6398
6472
|
|
|
6399
6473
|
var Cards = function Cards(_ref) {
|
|
@@ -6425,6 +6499,7 @@ var Cards = function Cards(_ref) {
|
|
|
6425
6499
|
title: card.title,
|
|
6426
6500
|
subtitle: card.subtitle,
|
|
6427
6501
|
text: card.text,
|
|
6502
|
+
highlightText: card.highlightText,
|
|
6428
6503
|
links: card.links,
|
|
6429
6504
|
tags: card.tags,
|
|
6430
6505
|
withContinueWatching: card.withContinueWatching,
|
|
@@ -6432,13 +6507,14 @@ var Cards = function Cards(_ref) {
|
|
|
6432
6507
|
hoverLineColor: card.hoverLineColor,
|
|
6433
6508
|
fullWidth: card.fullWidth,
|
|
6434
6509
|
labelParams: card.labelParams,
|
|
6510
|
+
auxiliaryCTA: card.auxiliaryCTA,
|
|
6435
6511
|
isGridCard: true
|
|
6436
6512
|
}));
|
|
6437
6513
|
}));
|
|
6438
6514
|
};
|
|
6439
6515
|
|
|
6440
|
-
var _templateObject$
|
|
6441
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6516
|
+
var _templateObject$S, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$f;
|
|
6517
|
+
var ContentWrapper = /*#__PURE__*/styled.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);
|
|
6442
6518
|
var Wrapper$4 = /*#__PURE__*/styled.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) {
|
|
6443
6519
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
6444
6520
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
@@ -6506,8 +6582,8 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
6506
6582
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
6507
6583
|
};
|
|
6508
6584
|
|
|
6509
|
-
var _templateObject$
|
|
6510
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
6585
|
+
var _templateObject$T, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g, _templateObject6$d, _templateObject7$8;
|
|
6586
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6511
6587
|
var ContentSummaryWrapper = /*#__PURE__*/styled.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) {
|
|
6512
6588
|
return props.clickable ? 'pointer' : 'default';
|
|
6513
6589
|
}, devices.mobile);
|
|
@@ -6589,8 +6665,8 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
6589
6665
|
}), link.text)));
|
|
6590
6666
|
};
|
|
6591
6667
|
|
|
6592
|
-
var _templateObject$
|
|
6593
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
6668
|
+
var _templateObject$U, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h;
|
|
6669
|
+
var EditorialGrid = /*#__PURE__*/styled.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) {
|
|
6594
6670
|
var imageToLeft = _ref.imageToLeft;
|
|
6595
6671
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
6596
6672
|
}, devices.mobile);
|
|
@@ -6667,8 +6743,8 @@ var BackgroundColour;
|
|
|
6667
6743
|
BackgroundColour["White"] = "white";
|
|
6668
6744
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
6669
6745
|
|
|
6670
|
-
var _templateObject$
|
|
6671
|
-
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$
|
|
6746
|
+
var _templateObject$V, _templateObject2$D, _templateObject3$v, _templateObject4$o;
|
|
6747
|
+
var InfoContent = /*#__PURE__*/styled('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"])));
|
|
6672
6748
|
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
6673
6749
|
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
6674
6750
|
if (!props.infoThemed) {
|
|
@@ -6794,8 +6870,8 @@ var Information = function Information(_ref) {
|
|
|
6794
6870
|
}))));
|
|
6795
6871
|
};
|
|
6796
6872
|
|
|
6797
|
-
var _templateObject$
|
|
6798
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6873
|
+
var _templateObject$W, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$i, _templateObject6$e, _templateObject7$9, _templateObject8$6;
|
|
6874
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.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) {
|
|
6799
6875
|
var theme = _ref.theme;
|
|
6800
6876
|
return theme.colors.primary;
|
|
6801
6877
|
}, function (_ref2) {
|
|
@@ -6886,8 +6962,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
6886
6962
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
6887
6963
|
};
|
|
6888
6964
|
|
|
6889
|
-
var _templateObject$
|
|
6890
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6965
|
+
var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$f, _templateObject7$a, _templateObject8$7;
|
|
6966
|
+
var ImpactWrapper = /*#__PURE__*/styled.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);
|
|
6891
6967
|
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.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);
|
|
6892
6968
|
var ImpactGrid = /*#__PURE__*/styled(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);
|
|
6893
6969
|
var SponsorWrapper = /*#__PURE__*/styled.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);
|
|
@@ -6957,8 +7033,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
6957
7033
|
}, "Scroll Down")) : null);
|
|
6958
7034
|
};
|
|
6959
7035
|
|
|
6960
|
-
var _templateObject$
|
|
6961
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7036
|
+
var _templateObject$Y, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k;
|
|
7037
|
+
var PanelGrid = /*#__PURE__*/styled(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) {
|
|
6962
7038
|
var color = _ref.color;
|
|
6963
7039
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
6964
7040
|
}, devices.mobileAndTablet);
|
|
@@ -7002,8 +7078,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7002
7078
|
}))));
|
|
7003
7079
|
};
|
|
7004
7080
|
|
|
7005
|
-
var _templateObject$
|
|
7006
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7081
|
+
var _templateObject$Z;
|
|
7082
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7007
7083
|
|
|
7008
7084
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7009
7085
|
var link = _ref.link,
|
|
@@ -7021,8 +7097,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7021
7097
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
7022
7098
|
};
|
|
7023
7099
|
|
|
7024
|
-
var _templateObject$
|
|
7025
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
7100
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject5$l, _templateObject6$g, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
|
|
7101
|
+
var BrandingTextBlock = /*#__PURE__*/styled.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);
|
|
7026
7102
|
var BrandingTextBody = /*#__PURE__*/styled.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"])));
|
|
7027
7103
|
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
7028
7104
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.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);
|
|
@@ -7156,7 +7232,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
7156
7232
|
var isIOS = function isIOS() {
|
|
7157
7233
|
try {
|
|
7158
7234
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
7159
|
-
if (typeof navigator === undefined) return false;
|
|
7235
|
+
if (typeof navigator === 'undefined') return false;
|
|
7160
7236
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
7161
7237
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
7162
7238
|
} catch (e) {
|
|
@@ -7172,7 +7248,7 @@ var useIOS = function useIOS() {
|
|
|
7172
7248
|
setIOS = _useState[1];
|
|
7173
7249
|
|
|
7174
7250
|
useEffect(function () {
|
|
7175
|
-
if (typeof navigator === undefined) return;
|
|
7251
|
+
if (typeof navigator === 'undefined') return;
|
|
7176
7252
|
setIOS(isIOS());
|
|
7177
7253
|
}, []);
|
|
7178
7254
|
return IOS;
|
|
@@ -7354,8 +7430,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7354
7430
|
}), linkText))));
|
|
7355
7431
|
};
|
|
7356
7432
|
|
|
7357
|
-
var _templateObject
|
|
7358
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject
|
|
7433
|
+
var _templateObject$$, _templateObject2$I, _templateObject3$A, _templateObject4$s;
|
|
7434
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
7359
7435
|
var PageNumberWrapper = /*#__PURE__*/styled.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
|
|
7360
7436
|
|
|
7361
7437
|
var PageNumber = /*#__PURE__*/styled.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) {
|
|
@@ -7431,8 +7507,8 @@ var Pagination = function Pagination(_ref) {
|
|
|
7431
7507
|
}))));
|
|
7432
7508
|
};
|
|
7433
7509
|
|
|
7434
|
-
var _templateObject
|
|
7435
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject
|
|
7510
|
+
var _templateObject$10, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$m, _templateObject6$h;
|
|
7511
|
+
var PeopleListingGrid = /*#__PURE__*/styled(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);
|
|
7436
7512
|
var PersonWrapper = /*#__PURE__*/styled.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"])));
|
|
7437
7513
|
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
7438
7514
|
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
@@ -7488,11 +7564,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
7488
7564
|
}));
|
|
7489
7565
|
};
|
|
7490
7566
|
|
|
7491
|
-
var _templateObject$
|
|
7492
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7567
|
+
var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u;
|
|
7568
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
7493
7569
|
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
7494
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height:
|
|
7495
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n
|
|
7570
|
+
var DescriptionWrapper = /*#__PURE__*/styled.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"])));
|
|
7571
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
7496
7572
|
|
|
7497
7573
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
7498
7574
|
return array.reduce(function (acc, item) {
|
|
@@ -7503,12 +7579,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
7503
7579
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
7504
7580
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
7505
7581
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
7506
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
7582
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
7583
|
+
key: index
|
|
7584
|
+
}, title));
|
|
7507
7585
|
} else if (index > 0) {
|
|
7508
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
7586
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
7587
|
+
key: index
|
|
7588
|
+
}, ", ", title);
|
|
7509
7589
|
}
|
|
7510
7590
|
|
|
7511
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
7591
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
7592
|
+
key: index
|
|
7593
|
+
}, title);
|
|
7512
7594
|
}));
|
|
7513
7595
|
};
|
|
7514
7596
|
|
|
@@ -7560,14 +7642,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
7560
7642
|
}));
|
|
7561
7643
|
};
|
|
7562
7644
|
|
|
7563
|
-
var _templateObject$
|
|
7645
|
+
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;
|
|
7564
7646
|
var LENGTH_TEXT = 28;
|
|
7565
7647
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
7566
7648
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
7567
7649
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
7568
7650
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
7569
7651
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
7570
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7652
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(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) {
|
|
7571
7653
|
var imageToLeft = _ref.imageToLeft;
|
|
7572
7654
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
7573
7655
|
}, devices.tablet, function (_ref2) {
|
|
@@ -7627,8 +7709,8 @@ var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templa
|
|
|
7627
7709
|
var IconWrapper$2 = /*#__PURE__*/styled.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);
|
|
7628
7710
|
var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
7629
7711
|
var MobileTitleWrapper = /*#__PURE__*/styled.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);
|
|
7630
|
-
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7631
|
-
var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7712
|
+
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7713
|
+
var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7632
7714
|
var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
7633
7715
|
var asCardOverrides = /*#__PURE__*/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);
|
|
7634
7716
|
var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.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) {
|
|
@@ -7838,10 +7920,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7838
7920
|
}))));
|
|
7839
7921
|
};
|
|
7840
7922
|
|
|
7841
|
-
var _templateObject$
|
|
7923
|
+
var _templateObject$13, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$j, _templateObject7$d;
|
|
7842
7924
|
var LENGTH_TEXT$2 = 28;
|
|
7843
7925
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
7844
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7926
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(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) {
|
|
7845
7927
|
var imageToLeft = _ref.imageToLeft;
|
|
7846
7928
|
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'";
|
|
7847
7929
|
}, devices.tablet, function (_ref2) {
|
|
@@ -7953,8 +8035,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7953
8035
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
7954
8036
|
};
|
|
7955
8037
|
|
|
7956
|
-
var _templateObject$
|
|
7957
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8038
|
+
var _templateObject$14;
|
|
8039
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
7958
8040
|
|
|
7959
8041
|
/**
|
|
7960
8042
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -8012,8 +8094,8 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
8012
8094
|
})));
|
|
8013
8095
|
};
|
|
8014
8096
|
|
|
8015
|
-
var _templateObject$
|
|
8016
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
8097
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F;
|
|
8098
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8017
8099
|
var RadioGroup$1 = /*#__PURE__*/styled.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) {
|
|
8018
8100
|
var horizontalMode = _ref.horizontalMode;
|
|
8019
8101
|
if (horizontalMode) return 'row';
|
|
@@ -8102,8 +8184,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
8102
8184
|
}, error)));
|
|
8103
8185
|
};
|
|
8104
8186
|
|
|
8105
|
-
var _templateObject$
|
|
8106
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8187
|
+
var _templateObject$16, _templateObject2$O, _templateObject3$G;
|
|
8188
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.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);
|
|
8107
8189
|
var ContentContainer$3 = /*#__PURE__*/styled.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"])));
|
|
8108
8190
|
var SvgContainer$3 = /*#__PURE__*/styled.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);
|
|
8109
8191
|
|
|
@@ -8167,8 +8249,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
8167
8249
|
})))));
|
|
8168
8250
|
};
|
|
8169
8251
|
|
|
8170
|
-
var _templateObject$
|
|
8171
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8252
|
+
var _templateObject$17;
|
|
8253
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.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);
|
|
8172
8254
|
|
|
8173
8255
|
var SectionTitle = function SectionTitle(_ref) {
|
|
8174
8256
|
var title = _ref.title,
|
|
@@ -8194,8 +8276,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
8194
8276
|
}, description))));
|
|
8195
8277
|
};
|
|
8196
8278
|
|
|
8197
|
-
var _templateObject$
|
|
8198
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
8279
|
+
var _templateObject$18, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$p, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
8280
|
+
var stateStyles = /*#__PURE__*/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) {
|
|
8199
8281
|
var theme = _ref.theme;
|
|
8200
8282
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
8201
8283
|
}, function (_ref2) {
|
|
@@ -8617,9 +8699,9 @@ function Select(_ref3) {
|
|
|
8617
8699
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
8618
8700
|
}
|
|
8619
8701
|
|
|
8620
|
-
var _templateObject$
|
|
8621
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
8622
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.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-
|
|
8702
|
+
var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
|
|
8703
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
8704
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.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) {
|
|
8623
8705
|
var width = _ref.width;
|
|
8624
8706
|
if (!width) return 'none';
|
|
8625
8707
|
return width + 'px';
|
|
@@ -8652,6 +8734,28 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8652
8734
|
iconName: "DropdownArrow"
|
|
8653
8735
|
}));
|
|
8654
8736
|
};
|
|
8737
|
+
var WrapperComponent = function WrapperComponent(_ref) {
|
|
8738
|
+
var label = _ref.label,
|
|
8739
|
+
error = _ref.error,
|
|
8740
|
+
width = _ref.width,
|
|
8741
|
+
darkMode = _ref.darkMode,
|
|
8742
|
+
children = _ref.children;
|
|
8743
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
8744
|
+
darkMode: darkMode,
|
|
8745
|
+
"data-testid": "select2-text-label"
|
|
8746
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8747
|
+
level: 6
|
|
8748
|
+
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8749
|
+
width: width,
|
|
8750
|
+
error: error,
|
|
8751
|
+
darkMode: darkMode
|
|
8752
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
8753
|
+
darkMode: darkMode,
|
|
8754
|
+
"data-testid": "select2-error-label"
|
|
8755
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8756
|
+
level: 6
|
|
8757
|
+
}, error)));
|
|
8758
|
+
};
|
|
8655
8759
|
/**
|
|
8656
8760
|
* A Select2 component wraps react-select with Chord styling and additional elements like
|
|
8657
8761
|
* text and error labels. This should be used just as usual react-select component.
|
|
@@ -8667,46 +8771,71 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8667
8771
|
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8668
8772
|
*/
|
|
8669
8773
|
|
|
8774
|
+
var SelectComponent = function SelectComponent(_ref2) {
|
|
8775
|
+
var label = _ref2.label,
|
|
8776
|
+
error = _ref2.error,
|
|
8777
|
+
width = _ref2.width,
|
|
8778
|
+
_ref2$darkMode = _ref2.darkMode,
|
|
8779
|
+
darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
|
|
8780
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode"]);
|
|
8670
8781
|
|
|
8671
|
-
|
|
8782
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8783
|
+
label: label,
|
|
8784
|
+
error: error,
|
|
8785
|
+
width: width,
|
|
8786
|
+
darkMode: darkMode
|
|
8787
|
+
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({
|
|
8788
|
+
components: {
|
|
8789
|
+
DropdownIndicator: DropdownIndicator,
|
|
8790
|
+
LoadingIndicator: undefined,
|
|
8791
|
+
IndicatorSeparator: undefined
|
|
8792
|
+
},
|
|
8793
|
+
className: "chord-select-container",
|
|
8794
|
+
classNamePrefix: "chord-select"
|
|
8795
|
+
}, selectProps)));
|
|
8796
|
+
};
|
|
8797
|
+
|
|
8798
|
+
/**
|
|
8799
|
+
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
8800
|
+
* component for select instead of regular react-select component. This can be used
|
|
8801
|
+
* for selects with dynamically loaded options, live search components etc.
|
|
8802
|
+
*
|
|
8803
|
+
* # Error state
|
|
8804
|
+
* An error label will be shown below the select if the `error` prop exists.
|
|
8805
|
+
* Also select will be rendered with a red border. An empty string can be passed to
|
|
8806
|
+
* render only error state without error message.
|
|
8807
|
+
*
|
|
8808
|
+
* # Light / Dark mode
|
|
8809
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
8810
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8811
|
+
*/
|
|
8812
|
+
|
|
8813
|
+
var SelectComponent$1 = function SelectComponent(_ref) {
|
|
8672
8814
|
var label = _ref.label,
|
|
8673
8815
|
error = _ref.error,
|
|
8674
8816
|
width = _ref.width,
|
|
8675
8817
|
_ref$darkMode = _ref.darkMode,
|
|
8676
8818
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
8677
|
-
|
|
8678
|
-
isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
|
|
8679
|
-
_ref$placeholder = _ref.placeholder,
|
|
8680
|
-
placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
|
|
8681
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
|
|
8819
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable"]);
|
|
8682
8820
|
|
|
8683
|
-
return /*#__PURE__*/React__default.createElement(
|
|
8684
|
-
|
|
8685
|
-
"data-testid": "select2-text-label"
|
|
8686
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8687
|
-
level: 6
|
|
8688
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8689
|
-
width: width,
|
|
8821
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8822
|
+
label: label,
|
|
8690
8823
|
error: error,
|
|
8824
|
+
width: width,
|
|
8691
8825
|
darkMode: darkMode
|
|
8692
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
8826
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({
|
|
8693
8827
|
components: {
|
|
8694
|
-
DropdownIndicator: DropdownIndicator
|
|
8828
|
+
DropdownIndicator: DropdownIndicator,
|
|
8829
|
+
LoadingIndicator: undefined,
|
|
8830
|
+
IndicatorSeparator: undefined
|
|
8695
8831
|
},
|
|
8696
|
-
isSearchable: isSearchable,
|
|
8697
|
-
placeholder: placeholder,
|
|
8698
8832
|
className: "chord-select-container",
|
|
8699
8833
|
classNamePrefix: "chord-select"
|
|
8700
|
-
}, selectProps)))
|
|
8701
|
-
darkMode: darkMode,
|
|
8702
|
-
"data-testid": "select2-error-label"
|
|
8703
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8704
|
-
level: 6
|
|
8705
|
-
}, error)));
|
|
8834
|
+
}, selectProps)));
|
|
8706
8835
|
};
|
|
8707
8836
|
|
|
8708
|
-
var _templateObject$
|
|
8709
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
8837
|
+
var _templateObject$1a;
|
|
8838
|
+
var TextContainer$2 = /*#__PURE__*/styled.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) {
|
|
8710
8839
|
var theme = _ref.theme;
|
|
8711
8840
|
return theme.colors.primary;
|
|
8712
8841
|
});
|
|
@@ -8734,8 +8863,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
8734
8863
|
})));
|
|
8735
8864
|
};
|
|
8736
8865
|
|
|
8737
|
-
var _templateObject$
|
|
8738
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
8866
|
+
var _templateObject$1b, _templateObject2$R;
|
|
8867
|
+
var Wrapper$6 = /*#__PURE__*/styled.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) {
|
|
8739
8868
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8740
8869
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8741
8870
|
return aspectRatio;
|
|
@@ -8783,8 +8912,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
8783
8912
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
8784
8913
|
};
|
|
8785
8914
|
|
|
8786
|
-
var _templateObject$
|
|
8787
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
8915
|
+
var _templateObject$1c, _templateObject2$S, _templateObject3$J;
|
|
8916
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
8788
8917
|
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
8789
8918
|
var displayAttribution = _ref.displayAttribution;
|
|
8790
8919
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
@@ -8813,8 +8942,8 @@ var Quote = function Quote(_ref) {
|
|
|
8813
8942
|
}, attribution))));
|
|
8814
8943
|
};
|
|
8815
8944
|
|
|
8816
|
-
var _templateObject$
|
|
8817
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
8945
|
+
var _templateObject$1d, _templateObject2$T, _templateObject3$K, _templateObject4$z, _templateObject5$q, _templateObject6$l;
|
|
8946
|
+
var CardContainer$1 = /*#__PURE__*/styled.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"])));
|
|
8818
8947
|
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
8819
8948
|
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
8820
8949
|
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
@@ -8857,8 +8986,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
8857
8986
|
}, title)))));
|
|
8858
8987
|
};
|
|
8859
8988
|
|
|
8860
|
-
var _templateObject$
|
|
8861
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8989
|
+
var _templateObject$1e, _templateObject2$U, _templateObject3$L, _templateObject4$A;
|
|
8990
|
+
var ReadMoreContainer = /*#__PURE__*/styled.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"])));
|
|
8862
8991
|
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
8863
8992
|
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8864
8993
|
var ContentContainer$5 = /*#__PURE__*/styled.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"])));
|
|
@@ -8959,96 +9088,14 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8959
9088
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
8960
9089
|
};
|
|
8961
9090
|
|
|
8962
|
-
var _templateObject$
|
|
8963
|
-
var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
8964
|
-
var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
8965
|
-
var mobileOpen = _ref.mobileOpen;
|
|
8966
|
-
return mobileOpen ? "block" : 'none';
|
|
8967
|
-
}, Colors.White, Colors.DarkGrey);
|
|
8968
|
-
var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref2) {
|
|
8969
|
-
var active = _ref2.active;
|
|
8970
|
-
return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
8971
|
-
}, Colors.MidGrey, devices.mobile);
|
|
8972
|
-
var MobileButton = /*#__PURE__*/styled.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"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
|
|
8973
|
-
|
|
8974
|
-
/**
|
|
8975
|
-
* Vertical menu component uses for navigation
|
|
8976
|
-
* inside website chapter. It looks like a vertical
|
|
8977
|
-
* list with clickable items on desktop and dropdown
|
|
8978
|
-
* list on mobile.
|
|
8979
|
-
*
|
|
8980
|
-
* ## Menu items
|
|
8981
|
-
* Menu items should be passed as `items` prop. This
|
|
8982
|
-
* should be an array of objects. Each object should
|
|
8983
|
-
* have `text` (text displayed as a menu item) and
|
|
8984
|
-
* `onClick` (click handler function)
|
|
8985
|
-
*
|
|
8986
|
-
* ## Active menu item
|
|
8987
|
-
* Active menu item should be passed as component `activeItem`
|
|
8988
|
-
* prop. This indicates on which menu item should be highlighted
|
|
8989
|
-
* as active one. Should be equal to `text` prop from one of the `items`
|
|
8990
|
-
*/
|
|
8991
|
-
|
|
8992
|
-
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
8993
|
-
var items = _ref.items,
|
|
8994
|
-
activeItem = _ref.activeItem;
|
|
8995
|
-
|
|
8996
|
-
var _useState = useState(false),
|
|
8997
|
-
mobileOpen = _useState[0],
|
|
8998
|
-
setMobileOpen = _useState[1];
|
|
8999
|
-
|
|
9000
|
-
var containerRef = useRef(null);
|
|
9001
|
-
|
|
9002
|
-
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
9003
|
-
setMobileOpen(function (prev) {
|
|
9004
|
-
return !prev;
|
|
9005
|
-
});
|
|
9006
|
-
};
|
|
9007
|
-
|
|
9008
|
-
var outsideClickHandler = function outsideClickHandler(event) {
|
|
9009
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
9010
|
-
setMobileOpen(false);
|
|
9011
|
-
}
|
|
9012
|
-
};
|
|
9013
|
-
|
|
9014
|
-
useEffect(function () {
|
|
9015
|
-
document.addEventListener('mousedown', outsideClickHandler);
|
|
9016
|
-
return function () {
|
|
9017
|
-
document.removeEventListener('mousedown', outsideClickHandler);
|
|
9018
|
-
};
|
|
9019
|
-
}, [containerRef]);
|
|
9020
|
-
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
9021
|
-
ref: containerRef,
|
|
9022
|
-
"data-testid": "nav-menu-container"
|
|
9023
|
-
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
9024
|
-
mobileOpen: mobileOpen,
|
|
9025
|
-
onClick: mobileButtonClickHandler,
|
|
9026
|
-
"data-testid": "nav-menu-mobile-button"
|
|
9027
|
-
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9028
|
-
iconName: "DropdownArrow",
|
|
9029
|
-
direction: mobileOpen ? 'left' : 'right'
|
|
9030
|
-
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
9031
|
-
mobileOpen: mobileOpen,
|
|
9032
|
-
"data-testid": "nav-menu-list"
|
|
9033
|
-
}, items.map(function (item, idx) {
|
|
9034
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
9035
|
-
key: item.text + "-" + idx
|
|
9036
|
-
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
9037
|
-
onClick: item.onClick,
|
|
9038
|
-
active: item.text === activeItem,
|
|
9039
|
-
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
9040
|
-
}, item.text));
|
|
9041
|
-
})));
|
|
9042
|
-
};
|
|
9043
|
-
|
|
9044
|
-
var _templateObject$1f, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
|
|
9091
|
+
var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r, _templateObject6$m;
|
|
9045
9092
|
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
9046
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
9047
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
9093
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
9094
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
9048
9095
|
var color = _ref.color;
|
|
9049
9096
|
return "var(--base-color-" + color + ")";
|
|
9050
9097
|
});
|
|
9051
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
9098
|
+
var BottomLine = /*#__PURE__*/styled.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"])));
|
|
9052
9099
|
var Text = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
9053
9100
|
var color = _ref2.color;
|
|
9054
9101
|
return "var(--base-color-" + color + ")";
|
|
@@ -9139,6 +9186,279 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
9139
9186
|
}, strengthLabel))));
|
|
9140
9187
|
};
|
|
9141
9188
|
|
|
9189
|
+
var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C;
|
|
9190
|
+
var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
9191
|
+
var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
9192
|
+
var mobileOpen = _ref.mobileOpen;
|
|
9193
|
+
return mobileOpen ? "block" : 'none';
|
|
9194
|
+
}, Colors.White, Colors.DarkGrey);
|
|
9195
|
+
var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref2) {
|
|
9196
|
+
var active = _ref2.active;
|
|
9197
|
+
return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
9198
|
+
}, Colors.MidGrey, devices.mobile);
|
|
9199
|
+
var MobileButton = /*#__PURE__*/styled.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"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
|
|
9200
|
+
|
|
9201
|
+
/**
|
|
9202
|
+
* Vertical menu component uses for navigation
|
|
9203
|
+
* inside website chapter. It looks like a vertical
|
|
9204
|
+
* list with clickable items on desktop and dropdown
|
|
9205
|
+
* list on mobile.
|
|
9206
|
+
*
|
|
9207
|
+
* ## Menu items
|
|
9208
|
+
* Menu items should be passed as `items` prop. This
|
|
9209
|
+
* should be an array of objects. Each object should
|
|
9210
|
+
* have `text` (text displayed as a menu item) and
|
|
9211
|
+
* `onClick` (click handler function)
|
|
9212
|
+
*
|
|
9213
|
+
* ## Active menu item
|
|
9214
|
+
* Active menu item should be passed as component `activeItem`
|
|
9215
|
+
* prop. This indicates on which menu item should be highlighted
|
|
9216
|
+
* as active one. Should be equal to `text` prop from one of the `items`
|
|
9217
|
+
*/
|
|
9218
|
+
|
|
9219
|
+
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
9220
|
+
var items = _ref.items,
|
|
9221
|
+
activeItem = _ref.activeItem;
|
|
9222
|
+
|
|
9223
|
+
var _useState = useState(false),
|
|
9224
|
+
mobileOpen = _useState[0],
|
|
9225
|
+
setMobileOpen = _useState[1];
|
|
9226
|
+
|
|
9227
|
+
var containerRef = useRef(null);
|
|
9228
|
+
|
|
9229
|
+
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
9230
|
+
setMobileOpen(function (prev) {
|
|
9231
|
+
return !prev;
|
|
9232
|
+
});
|
|
9233
|
+
};
|
|
9234
|
+
|
|
9235
|
+
var outsideClickHandler = function outsideClickHandler(event) {
|
|
9236
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
9237
|
+
setMobileOpen(false);
|
|
9238
|
+
}
|
|
9239
|
+
};
|
|
9240
|
+
|
|
9241
|
+
useEffect(function () {
|
|
9242
|
+
document.addEventListener('mousedown', outsideClickHandler);
|
|
9243
|
+
return function () {
|
|
9244
|
+
document.removeEventListener('mousedown', outsideClickHandler);
|
|
9245
|
+
};
|
|
9246
|
+
}, [containerRef]);
|
|
9247
|
+
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
9248
|
+
ref: containerRef,
|
|
9249
|
+
"data-testid": "nav-menu-container"
|
|
9250
|
+
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
9251
|
+
mobileOpen: mobileOpen,
|
|
9252
|
+
onClick: mobileButtonClickHandler,
|
|
9253
|
+
"data-testid": "nav-menu-mobile-button"
|
|
9254
|
+
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9255
|
+
iconName: "DropdownArrow",
|
|
9256
|
+
direction: mobileOpen ? 'left' : 'right'
|
|
9257
|
+
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
9258
|
+
mobileOpen: mobileOpen,
|
|
9259
|
+
"data-testid": "nav-menu-list"
|
|
9260
|
+
}, items.map(function (item, idx) {
|
|
9261
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
9262
|
+
key: item.text + "-" + idx
|
|
9263
|
+
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
9264
|
+
onClick: item.onClick,
|
|
9265
|
+
active: item.text === activeItem,
|
|
9266
|
+
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
9267
|
+
}, item.text));
|
|
9268
|
+
})));
|
|
9269
|
+
};
|
|
9270
|
+
|
|
9271
|
+
var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6;
|
|
9272
|
+
var TableHeader = /*#__PURE__*/styled.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"])));
|
|
9273
|
+
var TableCell = /*#__PURE__*/styled.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) {
|
|
9274
|
+
return "calc(100% / " + (props.columns - 1) + ")";
|
|
9275
|
+
});
|
|
9276
|
+
var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
9277
|
+
return "var(--base-color-" + props.lineColor + ")";
|
|
9278
|
+
});
|
|
9279
|
+
var Pagination$1 = /*#__PURE__*/styled.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"])));
|
|
9280
|
+
var PageNumber$1 = /*#__PURE__*/styled.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) {
|
|
9281
|
+
var active = _ref.active;
|
|
9282
|
+
return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
|
|
9283
|
+
});
|
|
9284
|
+
var Next = /*#__PURE__*/styled.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"])));
|
|
9285
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n"])));
|
|
9286
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
9287
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
9288
|
+
|
|
9289
|
+
var Table = function Table(_ref) {
|
|
9290
|
+
var columns = _ref.columns,
|
|
9291
|
+
headings = _ref.headings,
|
|
9292
|
+
children = _ref.children,
|
|
9293
|
+
lineColors = _ref.lineColors,
|
|
9294
|
+
rowsPerPage = _ref.rowsPerPage,
|
|
9295
|
+
pagination = _ref.pagination;
|
|
9296
|
+
|
|
9297
|
+
var _useState = useState(0),
|
|
9298
|
+
currentPage = _useState[0],
|
|
9299
|
+
setCurrentPage = _useState[1];
|
|
9300
|
+
|
|
9301
|
+
var _useState2 = useState(false),
|
|
9302
|
+
showScrollButtons = _useState2[0],
|
|
9303
|
+
setShowScrollButtons = _useState2[1];
|
|
9304
|
+
|
|
9305
|
+
var Content = function Content(_ref2) {
|
|
9306
|
+
var content = _ref2.content;
|
|
9307
|
+
return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
|
|
9308
|
+
dangerouslySetInnerHTML: {
|
|
9309
|
+
__html: content
|
|
9310
|
+
}
|
|
9311
|
+
}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
|
|
9312
|
+
};
|
|
9313
|
+
|
|
9314
|
+
var Cell = function Cell(_ref3) {
|
|
9315
|
+
var cell = _ref3.cell,
|
|
9316
|
+
cellIndex = _ref3.cellIndex,
|
|
9317
|
+
columns = _ref3.columns;
|
|
9318
|
+
return /*#__PURE__*/React__default.createElement(TableCell, {
|
|
9319
|
+
key: cellIndex,
|
|
9320
|
+
columns: columns
|
|
9321
|
+
}, /*#__PURE__*/React__default.createElement(Content, {
|
|
9322
|
+
content: cell
|
|
9323
|
+
}));
|
|
9324
|
+
};
|
|
9325
|
+
|
|
9326
|
+
var Row = function Row(_ref4) {
|
|
9327
|
+
var row = _ref4.row,
|
|
9328
|
+
rowIndex = _ref4.rowIndex,
|
|
9329
|
+
columns = _ref4.columns,
|
|
9330
|
+
lineColor = _ref4.lineColor;
|
|
9331
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
|
9332
|
+
key: rowIndex
|
|
9333
|
+
}, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
|
|
9334
|
+
return /*#__PURE__*/React__default.createElement(Cell, {
|
|
9335
|
+
key: index,
|
|
9336
|
+
cell: cell,
|
|
9337
|
+
cellIndex: index,
|
|
9338
|
+
columns: columns
|
|
9339
|
+
});
|
|
9340
|
+
})), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9341
|
+
colSpan: columns
|
|
9342
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9343
|
+
lineColor: lineColor,
|
|
9344
|
+
role: "presentation"
|
|
9345
|
+
}))));
|
|
9346
|
+
};
|
|
9347
|
+
|
|
9348
|
+
var lineColor = lineColors != null ? lineColors : ThemeType.Cinema;
|
|
9349
|
+
var tableRef = useRef(null);
|
|
9350
|
+
useEffect(function () {
|
|
9351
|
+
if (tableRef.current) {
|
|
9352
|
+
tableRef.current.scrollTo(0, 0);
|
|
9353
|
+
}
|
|
9354
|
+
}, [children]);
|
|
9355
|
+
|
|
9356
|
+
var horizontalScroll = function horizontalScroll() {
|
|
9357
|
+
if (tableRef.current) {
|
|
9358
|
+
setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
|
|
9359
|
+
}
|
|
9360
|
+
};
|
|
9361
|
+
|
|
9362
|
+
useEffect(function () {
|
|
9363
|
+
horizontalScroll();
|
|
9364
|
+
window.addEventListener('resize', horizontalScroll);
|
|
9365
|
+
return function () {
|
|
9366
|
+
return window.removeEventListener('resize', horizontalScroll);
|
|
9367
|
+
};
|
|
9368
|
+
}, []);
|
|
9369
|
+
|
|
9370
|
+
var scrollTable = function scrollTable(direction) {
|
|
9371
|
+
if (tableRef.current) {
|
|
9372
|
+
var currentScroll = tableRef.current.scrollLeft;
|
|
9373
|
+
var scrollAmount = direction === 'left' ? -300 : 300;
|
|
9374
|
+
tableRef.current.scrollTo({
|
|
9375
|
+
left: currentScroll + scrollAmount,
|
|
9376
|
+
behavior: 'smooth'
|
|
9377
|
+
});
|
|
9378
|
+
}
|
|
9379
|
+
};
|
|
9380
|
+
|
|
9381
|
+
var totalRows = Array.isArray(children) ? children.length : 0;
|
|
9382
|
+
var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
|
|
9383
|
+
var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
|
|
9384
|
+
var pageNumbers = Array.from({
|
|
9385
|
+
length: totalPages
|
|
9386
|
+
}, function (_, i) {
|
|
9387
|
+
return i;
|
|
9388
|
+
});
|
|
9389
|
+
var reducedPageNumbers = reducePages(pageNumbers, currentPage);
|
|
9390
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
9391
|
+
onClickPrev: function onClickPrev() {
|
|
9392
|
+
return scrollTable('left');
|
|
9393
|
+
},
|
|
9394
|
+
onClickNext: function onClickNext() {
|
|
9395
|
+
return scrollTable('right');
|
|
9396
|
+
}
|
|
9397
|
+
})), /*#__PURE__*/React__default.createElement(Container$6, {
|
|
9398
|
+
role: "table",
|
|
9399
|
+
tabIndex: 0,
|
|
9400
|
+
ref: tableRef
|
|
9401
|
+
}, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9402
|
+
colSpan: columns
|
|
9403
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9404
|
+
lineColor: lineColor,
|
|
9405
|
+
role: "presentation"
|
|
9406
|
+
})))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
|
|
9407
|
+
return /*#__PURE__*/React__default.createElement(TableHeader, {
|
|
9408
|
+
key: index,
|
|
9409
|
+
role: "columnheader"
|
|
9410
|
+
}, /*#__PURE__*/React__default.createElement(Content, {
|
|
9411
|
+
content: heading
|
|
9412
|
+
}));
|
|
9413
|
+
}))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9414
|
+
colSpan: columns
|
|
9415
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9416
|
+
lineColor: lineColor,
|
|
9417
|
+
role: "presentation"
|
|
9418
|
+
}))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
|
|
9419
|
+
return /*#__PURE__*/React__default.createElement(Row, {
|
|
9420
|
+
key: rowIndex,
|
|
9421
|
+
row: row,
|
|
9422
|
+
rowIndex: rowIndex,
|
|
9423
|
+
columns: columns,
|
|
9424
|
+
lineColor: lineColor
|
|
9425
|
+
});
|
|
9426
|
+
}))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9427
|
+
key: "previous-page",
|
|
9428
|
+
onClick: function onClick() {
|
|
9429
|
+
return setCurrentPage(currentPage - 1);
|
|
9430
|
+
},
|
|
9431
|
+
tabIndex: 0,
|
|
9432
|
+
"aria-label": "Previous page"
|
|
9433
|
+
}, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9434
|
+
iconName: "DropdownArrow",
|
|
9435
|
+
direction: "down"
|
|
9436
|
+
})))), reducedPageNumbers.map(function (number) {
|
|
9437
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
9438
|
+
key: number
|
|
9439
|
+
}, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9440
|
+
key: number,
|
|
9441
|
+
onClick: function onClick() {
|
|
9442
|
+
return setCurrentPage(number);
|
|
9443
|
+
},
|
|
9444
|
+
tabIndex: 0,
|
|
9445
|
+
active: "" + (number === currentPage)
|
|
9446
|
+
}, number + 1));
|
|
9447
|
+
}), currentPage + 4 < totalPages && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9448
|
+
key: "more-after"
|
|
9449
|
+
}, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), currentPage < totalPages - 1 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9450
|
+
key: "next-page",
|
|
9451
|
+
onClick: function onClick() {
|
|
9452
|
+
return setCurrentPage(currentPage + 1);
|
|
9453
|
+
},
|
|
9454
|
+
tabIndex: 0,
|
|
9455
|
+
"aria-label": "Next page"
|
|
9456
|
+
}, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9457
|
+
iconName: "DropdownArrow",
|
|
9458
|
+
direction: "up"
|
|
9459
|
+
})))))));
|
|
9460
|
+
};
|
|
9461
|
+
|
|
9142
9462
|
var UpsellSection = function UpsellSection(_ref) {
|
|
9143
9463
|
var title = _ref.title,
|
|
9144
9464
|
richText = _ref.richText,
|
|
@@ -9227,9 +9547,9 @@ var LiveChat = function LiveChat() {
|
|
|
9227
9547
|
});
|
|
9228
9548
|
};
|
|
9229
9549
|
|
|
9230
|
-
var _templateObject$
|
|
9231
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9232
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
9550
|
+
var _templateObject$1i, _templateObject2$Y;
|
|
9551
|
+
var StickyBarWrapper = /*#__PURE__*/styled.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);
|
|
9552
|
+
var StickyBarGrid = /*#__PURE__*/styled(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) {
|
|
9233
9553
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
9234
9554
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
9235
9555
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -9257,11 +9577,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
9257
9577
|
}, children)));
|
|
9258
9578
|
};
|
|
9259
9579
|
|
|
9260
|
-
var _templateObject$
|
|
9261
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
9262
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
9263
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9264
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
9580
|
+
var _templateObject$1j, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
|
|
9581
|
+
var InnerModal = /*#__PURE__*/styled.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);
|
|
9582
|
+
var CloseButton = /*#__PURE__*/styled.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);
|
|
9583
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9584
|
+
var Overlay = /*#__PURE__*/styled(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"])));
|
|
9265
9585
|
|
|
9266
9586
|
var MAX_Z_INDEX = 9999999999;
|
|
9267
9587
|
|
|
@@ -9381,8 +9701,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
9381
9701
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
9382
9702
|
};
|
|
9383
9703
|
|
|
9384
|
-
var _templateObject$
|
|
9385
|
-
var GlobalStyles = /*#__PURE__*/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) {
|
|
9704
|
+
var _templateObject$1k;
|
|
9705
|
+
var GlobalStyles = /*#__PURE__*/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) {
|
|
9386
9706
|
var theme = _ref.theme;
|
|
9387
9707
|
return theme.colors.primary;
|
|
9388
9708
|
}, function (_ref2) {
|
|
@@ -10323,5 +10643,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1i || (_templa
|
|
|
10323
10643
|
return theme.fonts.tablet.sizes.body[1];
|
|
10324
10644
|
}, devices.desktop, devices.largeDesktop);
|
|
10325
10645
|
|
|
10326
|
-
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
|
|
10646
|
+
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
|
|
10327
10647
|
//# sourceMappingURL=chord.esm.js.map
|