@royaloperahouse/chord 2.2.11 → 2.2.13
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 +7 -0
- package/dist/chord.cjs.development.js +291 -39
- 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 +290 -40
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/Select2/Select2.d.ts +7 -1
- package/dist/components/molecules/Select2/Select2.style.d.ts +2 -2
- 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 +3 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/formTypes.d.ts +6 -2
- package/dist/types/tableTypes.d.ts +42 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -12,6 +12,7 @@ var moment = _interopDefault(require('moment'));
|
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
13
|
var Select$1 = require('react-select');
|
|
14
14
|
var Select$1__default = _interopDefault(Select$1);
|
|
15
|
+
var Select$2 = _interopDefault(require('react-select/async'));
|
|
15
16
|
var Modal = _interopDefault(require('react-modal'));
|
|
16
17
|
var ScrollLock = _interopDefault(require('react-scrolllock'));
|
|
17
18
|
|
|
@@ -3881,7 +3882,10 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3881
3882
|
onKeyPress: spaceButtonHandler,
|
|
3882
3883
|
dark: isDarkMode,
|
|
3883
3884
|
disabled: disabled,
|
|
3884
|
-
"data-testid": "tickbox"
|
|
3885
|
+
"data-testid": "tickbox",
|
|
3886
|
+
role: "checkbox",
|
|
3887
|
+
"aria-checked": selected ? 'true' : 'false',
|
|
3888
|
+
"aria-labelledby": dataLabel
|
|
3885
3889
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
3886
3890
|
level: 1,
|
|
3887
3891
|
tag: "span"
|
|
@@ -3892,6 +3896,7 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3892
3896
|
dark: isDarkMode,
|
|
3893
3897
|
"aria-labelledby": dataLabel,
|
|
3894
3898
|
whiteBox: whiteBox,
|
|
3899
|
+
"aria-checked": selected ? 'true' : 'false',
|
|
3895
3900
|
disabled: disabled
|
|
3896
3901
|
}), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
|
|
3897
3902
|
dark: isDarkMode,
|
|
@@ -8694,7 +8699,7 @@ function Select(_ref3) {
|
|
|
8694
8699
|
|
|
8695
8700
|
var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
|
|
8696
8701
|
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
8697
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-
|
|
8702
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\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: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
8698
8703
|
var width = _ref.width;
|
|
8699
8704
|
if (!width) return 'none';
|
|
8700
8705
|
return width + 'px';
|
|
@@ -8711,12 +8716,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_t
|
|
|
8711
8716
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
8712
8717
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
8713
8718
|
});
|
|
8714
|
-
var TextLabel$3 = /*#__PURE__*/styled__default.
|
|
8719
|
+
var TextLabel$3 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
8715
8720
|
var darkMode = _ref5.darkMode;
|
|
8716
8721
|
if (darkMode) return "var(--base-color-white)";
|
|
8717
8722
|
return "var(--base-color-black)";
|
|
8718
8723
|
});
|
|
8719
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.
|
|
8724
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
8720
8725
|
var darkMode = _ref6.darkMode;
|
|
8721
8726
|
if (darkMode) return "var(--base-color-white)";
|
|
8722
8727
|
return "var(--base-color-errorstate)";
|
|
@@ -8727,6 +8732,28 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8727
8732
|
iconName: "DropdownArrow"
|
|
8728
8733
|
}));
|
|
8729
8734
|
};
|
|
8735
|
+
var WrapperComponent = function WrapperComponent(_ref) {
|
|
8736
|
+
var label = _ref.label,
|
|
8737
|
+
error = _ref.error,
|
|
8738
|
+
width = _ref.width,
|
|
8739
|
+
darkMode = _ref.darkMode,
|
|
8740
|
+
children = _ref.children;
|
|
8741
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
8742
|
+
darkMode: darkMode,
|
|
8743
|
+
"data-testid": "select2-text-label"
|
|
8744
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8745
|
+
level: 6
|
|
8746
|
+
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8747
|
+
width: width,
|
|
8748
|
+
error: error,
|
|
8749
|
+
darkMode: darkMode
|
|
8750
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
8751
|
+
darkMode: darkMode,
|
|
8752
|
+
"data-testid": "select2-error-label"
|
|
8753
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8754
|
+
level: 6
|
|
8755
|
+
}, error)));
|
|
8756
|
+
};
|
|
8730
8757
|
/**
|
|
8731
8758
|
* A Select2 component wraps react-select with Chord styling and additional elements like
|
|
8732
8759
|
* text and error labels. This should be used just as usual react-select component.
|
|
@@ -8742,42 +8769,72 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8742
8769
|
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8743
8770
|
*/
|
|
8744
8771
|
|
|
8772
|
+
var SelectComponent = function SelectComponent(_ref2) {
|
|
8773
|
+
var label = _ref2.label,
|
|
8774
|
+
error = _ref2.error,
|
|
8775
|
+
width = _ref2.width,
|
|
8776
|
+
_ref2$darkMode = _ref2.darkMode,
|
|
8777
|
+
darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
|
|
8778
|
+
_ref2$isSearchable = _ref2.isSearchable,
|
|
8779
|
+
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
8780
|
+
components = _ref2.components,
|
|
8781
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
|
|
8782
|
+
|
|
8783
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8784
|
+
label: label,
|
|
8785
|
+
error: error,
|
|
8786
|
+
width: width,
|
|
8787
|
+
darkMode: darkMode
|
|
8788
|
+
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
8789
|
+
components: _extends({
|
|
8790
|
+
DropdownIndicator: DropdownIndicator,
|
|
8791
|
+
LoadingIndicator: undefined,
|
|
8792
|
+
IndicatorSeparator: undefined
|
|
8793
|
+
}, components),
|
|
8794
|
+
className: "chord-select-container",
|
|
8795
|
+
classNamePrefix: "chord-select",
|
|
8796
|
+
isSearchable: isSearchable
|
|
8797
|
+
})));
|
|
8798
|
+
};
|
|
8745
8799
|
|
|
8746
|
-
|
|
8800
|
+
/**
|
|
8801
|
+
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
8802
|
+
* component for select instead of regular react-select component. This can be used
|
|
8803
|
+
* for selects with dynamically loaded options, live search components etc.
|
|
8804
|
+
*
|
|
8805
|
+
* # Error state
|
|
8806
|
+
* An error label will be shown below the select if the `error` prop exists.
|
|
8807
|
+
* Also select will be rendered with a red border. An empty string can be passed to
|
|
8808
|
+
* render only error state without error message.
|
|
8809
|
+
*
|
|
8810
|
+
* # Light / Dark mode
|
|
8811
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
8812
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8813
|
+
*/
|
|
8814
|
+
|
|
8815
|
+
var SelectComponent$1 = function SelectComponent(_ref) {
|
|
8747
8816
|
var label = _ref.label,
|
|
8748
8817
|
error = _ref.error,
|
|
8749
8818
|
width = _ref.width,
|
|
8750
8819
|
_ref$darkMode = _ref.darkMode,
|
|
8751
8820
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
8752
|
-
|
|
8753
|
-
|
|
8754
|
-
_ref$placeholder = _ref.placeholder,
|
|
8755
|
-
placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
|
|
8756
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
|
|
8821
|
+
components = _ref.components,
|
|
8822
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
|
|
8757
8823
|
|
|
8758
|
-
return /*#__PURE__*/React__default.createElement(
|
|
8759
|
-
|
|
8760
|
-
"data-testid": "select2-text-label"
|
|
8761
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8762
|
-
level: 6
|
|
8763
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8764
|
-
width: width,
|
|
8824
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8825
|
+
label: label,
|
|
8765
8826
|
error: error,
|
|
8827
|
+
width: width,
|
|
8766
8828
|
darkMode: darkMode
|
|
8767
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
8768
|
-
components: {
|
|
8769
|
-
DropdownIndicator: DropdownIndicator
|
|
8770
|
-
|
|
8771
|
-
|
|
8772
|
-
|
|
8829
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
|
|
8830
|
+
components: _extends({
|
|
8831
|
+
DropdownIndicator: DropdownIndicator,
|
|
8832
|
+
LoadingIndicator: undefined,
|
|
8833
|
+
IndicatorSeparator: undefined
|
|
8834
|
+
}, components),
|
|
8773
8835
|
className: "chord-select-container",
|
|
8774
8836
|
classNamePrefix: "chord-select"
|
|
8775
|
-
}
|
|
8776
|
-
darkMode: darkMode,
|
|
8777
|
-
"data-testid": "select2-error-label"
|
|
8778
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8779
|
-
level: 6
|
|
8780
|
-
}, error)));
|
|
8837
|
+
})));
|
|
8781
8838
|
};
|
|
8782
8839
|
|
|
8783
8840
|
var _templateObject$1a;
|
|
@@ -9214,6 +9271,199 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
9214
9271
|
}, strengthLabel))));
|
|
9215
9272
|
};
|
|
9216
9273
|
|
|
9274
|
+
var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6;
|
|
9275
|
+
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 24px 0;\n text-align: left;\n text-transform: uppercase;\n\n @media ", " {\n padding: 24px 20px 24px 0;\n }\n"])), devices.mobile);
|
|
9276
|
+
var TableCell = /*#__PURE__*/styled__default.td(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 34px 30px 34px 0;\n text-align: left;\n\n @media ", " {\n padding: 24px 20px 24px 0;\n\n > div > label > div {\n margin-top: 24px;\n }\n }\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n"])), devices.mobile, function (props) {
|
|
9277
|
+
return "calc(100% / " + (props.columns - 1) + ")";
|
|
9278
|
+
});
|
|
9279
|
+
var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
9280
|
+
return "var(--base-color-" + props.lineColor + ")";
|
|
9281
|
+
});
|
|
9282
|
+
var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: none;\n }\n"])));
|
|
9283
|
+
var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
|
|
9284
|
+
var active = _ref.active;
|
|
9285
|
+
return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
|
|
9286
|
+
});
|
|
9287
|
+
var Next = /*#__PURE__*/styled__default.span(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
9288
|
+
var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n }\n"])), devices.mobile);
|
|
9289
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
9290
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
9291
|
+
|
|
9292
|
+
var Table = function Table(_ref) {
|
|
9293
|
+
var columns = _ref.columns,
|
|
9294
|
+
headings = _ref.headings,
|
|
9295
|
+
children = _ref.children,
|
|
9296
|
+
lineColors = _ref.lineColors,
|
|
9297
|
+
rowsPerPage = _ref.rowsPerPage,
|
|
9298
|
+
pagination = _ref.pagination;
|
|
9299
|
+
|
|
9300
|
+
var _useState = React.useState(0),
|
|
9301
|
+
currentPage = _useState[0],
|
|
9302
|
+
setCurrentPage = _useState[1];
|
|
9303
|
+
|
|
9304
|
+
var _useState2 = React.useState(false),
|
|
9305
|
+
showScrollButtons = _useState2[0],
|
|
9306
|
+
setShowScrollButtons = _useState2[1];
|
|
9307
|
+
|
|
9308
|
+
var Content = function Content(_ref2) {
|
|
9309
|
+
var content = _ref2.content;
|
|
9310
|
+
return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
|
|
9311
|
+
dangerouslySetInnerHTML: {
|
|
9312
|
+
__html: content
|
|
9313
|
+
}
|
|
9314
|
+
}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
|
|
9315
|
+
};
|
|
9316
|
+
|
|
9317
|
+
var Cell = function Cell(_ref3) {
|
|
9318
|
+
var cell = _ref3.cell,
|
|
9319
|
+
cellIndex = _ref3.cellIndex,
|
|
9320
|
+
columns = _ref3.columns;
|
|
9321
|
+
return /*#__PURE__*/React__default.createElement(TableCell, {
|
|
9322
|
+
key: cellIndex,
|
|
9323
|
+
columns: columns
|
|
9324
|
+
}, /*#__PURE__*/React__default.createElement(Content, {
|
|
9325
|
+
content: cell
|
|
9326
|
+
}));
|
|
9327
|
+
};
|
|
9328
|
+
|
|
9329
|
+
var Row = function Row(_ref4) {
|
|
9330
|
+
var row = _ref4.row,
|
|
9331
|
+
rowIndex = _ref4.rowIndex,
|
|
9332
|
+
columns = _ref4.columns,
|
|
9333
|
+
lineColor = _ref4.lineColor;
|
|
9334
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
|
9335
|
+
key: rowIndex
|
|
9336
|
+
}, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
|
|
9337
|
+
return /*#__PURE__*/React__default.createElement(Cell, {
|
|
9338
|
+
key: index,
|
|
9339
|
+
cell: cell,
|
|
9340
|
+
cellIndex: index,
|
|
9341
|
+
columns: columns
|
|
9342
|
+
});
|
|
9343
|
+
})), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9344
|
+
colSpan: columns
|
|
9345
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9346
|
+
lineColor: lineColor,
|
|
9347
|
+
role: "presentation"
|
|
9348
|
+
}))));
|
|
9349
|
+
};
|
|
9350
|
+
|
|
9351
|
+
var lineColor = lineColors != null ? lineColors : exports.Colors.Cinema;
|
|
9352
|
+
var tableRef = React.useRef(null);
|
|
9353
|
+
React.useEffect(function () {
|
|
9354
|
+
if (tableRef.current) {
|
|
9355
|
+
tableRef.current.scrollTo(0, 0);
|
|
9356
|
+
}
|
|
9357
|
+
}, [children]);
|
|
9358
|
+
|
|
9359
|
+
var horizontalScroll = function horizontalScroll() {
|
|
9360
|
+
if (tableRef.current) {
|
|
9361
|
+
setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
|
|
9362
|
+
}
|
|
9363
|
+
};
|
|
9364
|
+
|
|
9365
|
+
React.useEffect(function () {
|
|
9366
|
+
horizontalScroll();
|
|
9367
|
+
window.addEventListener('resize', horizontalScroll);
|
|
9368
|
+
return function () {
|
|
9369
|
+
return window.removeEventListener('resize', horizontalScroll);
|
|
9370
|
+
};
|
|
9371
|
+
}, []);
|
|
9372
|
+
|
|
9373
|
+
var scrollTable = function scrollTable(direction) {
|
|
9374
|
+
if (tableRef.current) {
|
|
9375
|
+
var currentScroll = tableRef.current.scrollLeft;
|
|
9376
|
+
var scrollAmount = direction === 'left' ? -300 : 300;
|
|
9377
|
+
tableRef.current.scrollTo({
|
|
9378
|
+
left: currentScroll + scrollAmount,
|
|
9379
|
+
behavior: 'smooth'
|
|
9380
|
+
});
|
|
9381
|
+
}
|
|
9382
|
+
};
|
|
9383
|
+
|
|
9384
|
+
var totalRows = Array.isArray(children) ? children.length : 0;
|
|
9385
|
+
var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
|
|
9386
|
+
var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
|
|
9387
|
+
var pageNumbers = Array.from({
|
|
9388
|
+
length: totalPages
|
|
9389
|
+
}, function (_, i) {
|
|
9390
|
+
return i;
|
|
9391
|
+
});
|
|
9392
|
+
var reducedPageNumbers = reducePages(pageNumbers, currentPage);
|
|
9393
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
9394
|
+
onClickPrev: function onClickPrev() {
|
|
9395
|
+
return scrollTable('left');
|
|
9396
|
+
},
|
|
9397
|
+
onClickNext: function onClickNext() {
|
|
9398
|
+
return scrollTable('right');
|
|
9399
|
+
}
|
|
9400
|
+
})), /*#__PURE__*/React__default.createElement(Container$6, {
|
|
9401
|
+
role: "table",
|
|
9402
|
+
tabIndex: 0,
|
|
9403
|
+
ref: tableRef
|
|
9404
|
+
}, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9405
|
+
colSpan: columns
|
|
9406
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9407
|
+
lineColor: lineColor,
|
|
9408
|
+
role: "presentation"
|
|
9409
|
+
})))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
|
|
9410
|
+
return /*#__PURE__*/React__default.createElement(TableHeader, {
|
|
9411
|
+
key: index,
|
|
9412
|
+
role: "columnheader"
|
|
9413
|
+
}, /*#__PURE__*/React__default.createElement(Content, {
|
|
9414
|
+
content: heading
|
|
9415
|
+
}));
|
|
9416
|
+
}))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
|
|
9417
|
+
colSpan: columns
|
|
9418
|
+
}, /*#__PURE__*/React__default.createElement(LineContainer$1, {
|
|
9419
|
+
lineColor: lineColor,
|
|
9420
|
+
role: "presentation"
|
|
9421
|
+
}))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
|
|
9422
|
+
return /*#__PURE__*/React__default.createElement(Row, {
|
|
9423
|
+
key: rowIndex,
|
|
9424
|
+
row: row,
|
|
9425
|
+
rowIndex: rowIndex,
|
|
9426
|
+
columns: columns,
|
|
9427
|
+
lineColor: lineColor
|
|
9428
|
+
});
|
|
9429
|
+
}))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9430
|
+
key: "previous-page",
|
|
9431
|
+
onClick: function onClick() {
|
|
9432
|
+
return setCurrentPage(currentPage - 1);
|
|
9433
|
+
},
|
|
9434
|
+
tabIndex: 0,
|
|
9435
|
+
"aria-label": "Previous page"
|
|
9436
|
+
}, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9437
|
+
iconName: "DropdownArrow",
|
|
9438
|
+
direction: "down"
|
|
9439
|
+
})))), currentPage > 2 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9440
|
+
key: "more-before"
|
|
9441
|
+
}, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), reducedPageNumbers.map(function (number) {
|
|
9442
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
9443
|
+
key: number
|
|
9444
|
+
}, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9445
|
+
key: number,
|
|
9446
|
+
onClick: function onClick() {
|
|
9447
|
+
return setCurrentPage(number);
|
|
9448
|
+
},
|
|
9449
|
+
tabIndex: 0,
|
|
9450
|
+
active: "" + (number === currentPage)
|
|
9451
|
+
}, number + 1));
|
|
9452
|
+
}), currentPage + 4 < totalPages && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9453
|
+
key: "more-after"
|
|
9454
|
+
}, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), currentPage < totalPages - 1 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
|
|
9455
|
+
key: "next-page",
|
|
9456
|
+
onClick: function onClick() {
|
|
9457
|
+
return setCurrentPage(currentPage + 1);
|
|
9458
|
+
},
|
|
9459
|
+
tabIndex: 0,
|
|
9460
|
+
"aria-label": "Next page"
|
|
9461
|
+
}, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
9462
|
+
iconName: "DropdownArrow",
|
|
9463
|
+
direction: "up"
|
|
9464
|
+
})))))));
|
|
9465
|
+
};
|
|
9466
|
+
|
|
9217
9467
|
var UpsellSection = function UpsellSection(_ref) {
|
|
9218
9468
|
var title = _ref.title,
|
|
9219
9469
|
richText = _ref.richText,
|
|
@@ -9302,9 +9552,9 @@ var LiveChat = function LiveChat() {
|
|
|
9302
9552
|
});
|
|
9303
9553
|
};
|
|
9304
9554
|
|
|
9305
|
-
var _templateObject$
|
|
9306
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9307
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
9555
|
+
var _templateObject$1i, _templateObject2$Y;
|
|
9556
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
9557
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
9308
9558
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
9309
9559
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
9310
9560
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -9332,11 +9582,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
9332
9582
|
}, children)));
|
|
9333
9583
|
};
|
|
9334
9584
|
|
|
9335
|
-
var _templateObject$
|
|
9336
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9337
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
9338
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9339
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
9585
|
+
var _templateObject$1j, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
|
|
9586
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
9587
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
9588
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9589
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
9340
9590
|
|
|
9341
9591
|
var MAX_Z_INDEX = 9999999999;
|
|
9342
9592
|
|
|
@@ -9456,8 +9706,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
9456
9706
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
9457
9707
|
};
|
|
9458
9708
|
|
|
9459
|
-
var _templateObject$
|
|
9460
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1j || (_templateObject$1j = /*#__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) {
|
|
9709
|
+
var _templateObject$1k;
|
|
9710
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
9461
9711
|
var theme = _ref.theme;
|
|
9462
9712
|
return theme.colors.primary;
|
|
9463
9713
|
}, function (_ref2) {
|
|
@@ -10455,6 +10705,7 @@ exports.SectionSplitter = SectionSplitter;
|
|
|
10455
10705
|
exports.SectionTitle = SectionTitle;
|
|
10456
10706
|
exports.Select = Select;
|
|
10457
10707
|
exports.Select2 = SelectComponent;
|
|
10708
|
+
exports.Select2Async = SelectComponent$1;
|
|
10458
10709
|
exports.Sponsorship = Sponsorship;
|
|
10459
10710
|
exports.StatusBanner = StatusBanner;
|
|
10460
10711
|
exports.Stepper = Component;
|
|
@@ -10463,6 +10714,7 @@ exports.StreamBadge = StreamBadge;
|
|
|
10463
10714
|
exports.Subtitle = Subtitle;
|
|
10464
10715
|
exports.Tab = Tab;
|
|
10465
10716
|
exports.TabLink = TabLink;
|
|
10717
|
+
exports.Table = Table;
|
|
10466
10718
|
exports.Tabs = Tabs;
|
|
10467
10719
|
exports.TertiaryButton = Button$1;
|
|
10468
10720
|
exports.TextArea = TextArea;
|