@royaloperahouse/chord 2.2.12 → 2.2.13-a-chord-development

package/dist/chord.esm.js

@@ -3,6 +3,7 @@ import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components
 import moment from 'moment';
 import { renderToString } from 'react-dom/server';
 import Select$1, { components } from 'react-select';
+import Select$2 from 'react-select/async';
 import Modal from 'react-modal';
 import ScrollLock from 'react-scrolllock';
 
@@ -3606,7 +3607,7 @@ var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObjec
   if (!width) return 'none';
   return width + 'px';
 });
-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) {
+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) {
   var isPasswordField = _ref2.isPasswordField;
   if (isPasswordField) return "80px";
   return "20px";
@@ -3714,7 +3715,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "text-field-input",
     ref: ref
   }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
-    type: "button",
+    type: 'button',
     onClick: showHideClickHandler
   }, /*#__PURE__*/React__default.createElement(Overline, {
     level: 1
@@ -6091,7 +6092,8 @@ var Accordions = function Accordions(_ref) {
       visibleStandfirst: accordion.visibleStandfirst,
       contentType: accordion.contentType,
       displayLevel: accordion.displayLevel,
-      semanticLevel: accordion.semanticLevel
+      semanticLevel: accordion.semanticLevel,
+      initOpen: accordion.initOpen
     }, accordion.children);
   }));
 };
@@ -6456,9 +6458,9 @@ var Card = function Card(_ref) {
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
-  }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
+  }))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, highlightText)))), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
+  }, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
     fullWidth: fullWidth
   }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
@@ -7238,7 +7240,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
 var isIOS = function isIOS() {
   try {
     console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
+    if (typeof navigator === 'undefined') return false;
     return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
     navigator.userAgent.includes('Mac') && 'ontouchend' in document;
   } catch (e) {
@@ -7254,7 +7256,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   useEffect(function () {
-    if (typeof navigator === undefined) return;
+    if (typeof navigator === 'undefined') return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -7573,8 +7575,8 @@ var PeopleListing = function PeopleListing(_ref) {
 var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u;
 var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n"])));
-var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+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"])));
+var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
 
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
   return array.reduce(function (acc, item) {
@@ -7585,12 +7587,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
 var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
     if (musicTitle.length > 1 && index === musicTitle.length - 1) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
+        key: index
+      }, title));
     } else if (index > 0) {
-      return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
+      return /*#__PURE__*/React__default.createElement("i", {
+        key: index
+      }, ", ", title);
     }
 
-    return /*#__PURE__*/React__default.createElement("i", null, title);
+    return /*#__PURE__*/React__default.createElement("i", {
+      key: index
+    }, title);
   }));
 };
 
@@ -8701,7 +8709,7 @@ function Select(_ref3) {
 
 var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
 var Container$4 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-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__indicator-separator {\n    display: none;\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-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-darkgrey);\n    text-align: left;\n  }\n"])), function (_ref) {
+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: 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) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + 'px';
@@ -8718,12 +8726,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateOb
   if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
   return "0 0 0 3px var(--base-color-lapislazuli)";
 });
-var TextLabel$3 = /*#__PURE__*/styled.p(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
+var TextLabel$3 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-black)";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled.p(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-errorstate)";
@@ -8734,6 +8742,28 @@ var DropdownIndicator = function DropdownIndicator(props) {
     iconName: "DropdownArrow"
   }));
 };
+var WrapperComponent = function WrapperComponent(_ref) {
+  var label = _ref.label,
+      error = _ref.error,
+      width = _ref.width,
+      darkMode = _ref.darkMode,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
+    darkMode: darkMode,
+    "data-testid": "select2-text-label"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
+    width: width,
+    error: error,
+    darkMode: darkMode
+  }, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
+    darkMode: darkMode,
+    "data-testid": "select2-error-label"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, error)));
+};
 /**
  * A Select2 component wraps react-select with Chord styling and additional elements like
  * text and error labels. This should be used just as usual react-select component.
@@ -8749,42 +8779,72 @@ var DropdownIndicator = function DropdownIndicator(props) {
  * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
  */
 
+var SelectComponent = function SelectComponent(_ref2) {
+  var label = _ref2.label,
+      error = _ref2.error,
+      width = _ref2.width,
+      _ref2$darkMode = _ref2.darkMode,
+      darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
+      _ref2$isSearchable = _ref2.isSearchable,
+      isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
+      components = _ref2.components,
+      selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
+
+  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
+    label: label,
+    error: error,
+    width: width,
+    darkMode: darkMode
+  }, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
+    components: _extends({
+      DropdownIndicator: DropdownIndicator,
+      LoadingIndicator: undefined,
+      IndicatorSeparator: undefined
+    }, components),
+    className: "chord-select-container",
+    classNamePrefix: "chord-select",
+    isSearchable: isSearchable
+  })));
+};
+
+/**
+ * The Select2Async component is similar to Select 2, but uses react-select async
+ * component for select instead of regular react-select component. This can be used
+ * for selects with dynamically loaded options, live search components etc.
+ *
+ * # Error state
+ * An error label will be shown below the select if the `error` prop exists.
+ * Also select will be rendered with a red border. An empty string can be passed to
+ * render only error state without error message.
+ *
+ * # Light / Dark mode
+ * The component can also adapt its styles for light / dark mode. If you want this component
+ * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
+ */
 
-var SelectComponent = function SelectComponent(_ref) {
+var SelectComponent$1 = function SelectComponent(_ref) {
   var label = _ref.label,
       error = _ref.error,
       width = _ref.width,
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
-      _ref$isSearchable = _ref.isSearchable,
-      isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
-      selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
+      components = _ref.components,
+      selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
 
-  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
-    darkMode: darkMode,
-    "data-testid": "select2-text-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
-    width: width,
+  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
+    label: label,
     error: error,
+    width: width,
     darkMode: darkMode
-  }, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({
-    components: {
-      DropdownIndicator: DropdownIndicator
-    },
-    isSearchable: isSearchable,
-    placeholder: placeholder,
+  }, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
+    components: _extends({
+      DropdownIndicator: DropdownIndicator,
+      LoadingIndicator: undefined,
+      IndicatorSeparator: undefined
+    }, components),
     className: "chord-select-container",
     classNamePrefix: "chord-select"
-  }, selectProps)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
-    darkMode: darkMode,
-    "data-testid": "select2-error-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, error)));
+  })));
 };
 
 var _templateObject$1a;
@@ -9041,96 +9101,14 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
 };
 
-var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B;
-var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-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) {
-  var mobileOpen = _ref.mobileOpen;
-  return mobileOpen ? "block" : 'none';
-}, Colors.White, Colors.DarkGrey);
-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) {
-  var active = _ref2.active;
-  return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
-}, Colors.MidGrey, devices.mobile);
-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);
-
-/**
- * Vertical menu component uses for navigation
- * inside website chapter. It looks like a vertical
- * list with clickable items on desktop and dropdown
- * list on mobile.
- *
- * ## Menu items
- * Menu items should be passed as `items` prop. This
- * should be an array of objects. Each object should
- * have `text` (text displayed as a menu item) and
- * `onClick` (click handler function)
- *
- * ## Active menu item
- * Active menu item should be passed as component `activeItem`
- * prop. This indicates on which menu item should be highlighted
- * as active one. Should be equal to `text` prop from one of the `items`
- */
-
-var AuxiliaryNav = function AuxiliaryNav(_ref) {
-  var items = _ref.items,
-      activeItem = _ref.activeItem;
-
-  var _useState = useState(false),
-      mobileOpen = _useState[0],
-      setMobileOpen = _useState[1];
-
-  var containerRef = useRef(null);
-
-  var mobileButtonClickHandler = function mobileButtonClickHandler() {
-    setMobileOpen(function (prev) {
-      return !prev;
-    });
-  };
-
-  var outsideClickHandler = function outsideClickHandler(event) {
-    if (containerRef.current && !containerRef.current.contains(event.target)) {
-      setMobileOpen(false);
-    }
-  };
-
-  useEffect(function () {
-    document.addEventListener('mousedown', outsideClickHandler);
-    return function () {
-      document.removeEventListener('mousedown', outsideClickHandler);
-    };
-  }, [containerRef]);
-  return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
-    ref: containerRef,
-    "data-testid": "nav-menu-container"
-  }, /*#__PURE__*/React__default.createElement(MobileButton, {
-    mobileOpen: mobileOpen,
-    onClick: mobileButtonClickHandler,
-    "data-testid": "nav-menu-mobile-button"
-  }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow",
-    direction: mobileOpen ? 'left' : 'right'
-  })), /*#__PURE__*/React__default.createElement(MenuList, {
-    mobileOpen: mobileOpen,
-    "data-testid": "nav-menu-list"
-  }, items.map(function (item, idx) {
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: item.text + "-" + idx
-    }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
-      onClick: item.onClick,
-      active: item.text === activeItem,
-      "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
-    }, item.text));
-  })));
-};
-
-var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
-var Container$5 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r, _templateObject6$m;
+var Container$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--base-color-" + color + ")";
 });
-var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
+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"])));
 var Text = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
@@ -9221,23 +9199,106 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6;
-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\n  @media ", " {\n    padding: 24px 20px 24px 0;\n  }\n"])), devices.mobile);
-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  @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) {
+var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C;
+var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+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) {
+  var mobileOpen = _ref.mobileOpen;
+  return mobileOpen ? "block" : 'none';
+}, Colors.White, Colors.DarkGrey);
+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) {
+  var active = _ref2.active;
+  return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
+}, Colors.MidGrey, devices.mobile);
+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);
+
+/**
+ * Vertical menu component uses for navigation
+ * inside website chapter. It looks like a vertical
+ * list with clickable items on desktop and dropdown
+ * list on mobile.
+ *
+ * ## Menu items
+ * Menu items should be passed as `items` prop. This
+ * should be an array of objects. Each object should
+ * have `text` (text displayed as a menu item) and
+ * `onClick` (click handler function)
+ *
+ * ## Active menu item
+ * Active menu item should be passed as component `activeItem`
+ * prop. This indicates on which menu item should be highlighted
+ * as active one. Should be equal to `text` prop from one of the `items`
+ */
+
+var AuxiliaryNav = function AuxiliaryNav(_ref) {
+  var items = _ref.items,
+      activeItem = _ref.activeItem;
+
+  var _useState = useState(false),
+      mobileOpen = _useState[0],
+      setMobileOpen = _useState[1];
+
+  var containerRef = useRef(null);
+
+  var mobileButtonClickHandler = function mobileButtonClickHandler() {
+    setMobileOpen(function (prev) {
+      return !prev;
+    });
+  };
+
+  var outsideClickHandler = function outsideClickHandler(event) {
+    if (containerRef.current && !containerRef.current.contains(event.target)) {
+      setMobileOpen(false);
+    }
+  };
+
+  useEffect(function () {
+    document.addEventListener('mousedown', outsideClickHandler);
+    return function () {
+      document.removeEventListener('mousedown', outsideClickHandler);
+    };
+  }, [containerRef]);
+  return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
+    ref: containerRef,
+    "data-testid": "nav-menu-container"
+  }, /*#__PURE__*/React__default.createElement(MobileButton, {
+    mobileOpen: mobileOpen,
+    onClick: mobileButtonClickHandler,
+    "data-testid": "nav-menu-mobile-button"
+  }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow",
+    direction: mobileOpen ? 'left' : 'right'
+  })), /*#__PURE__*/React__default.createElement(MenuList, {
+    mobileOpen: mobileOpen,
+    "data-testid": "nav-menu-list"
+  }, items.map(function (item, idx) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: item.text + "-" + idx
+    }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
+      onClick: item.onClick,
+      active: item.text === activeItem,
+      "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
+    }, item.text));
+  })));
+};
+
+var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject10$6;
+var TableContainer = /*#__PURE__*/styled.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__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 30px 24px 0;\n  text-align: left;\n  text-transform: uppercase;\n  white-space: nowrap;\n\n  @media ", " {\n    padding: 24px 20px 24px 0;\n  }\n"])), devices.mobile);
+var TableCell = /*#__PURE__*/styled.td(_templateObject5$s || (_templateObject5$s = /*#__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\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) {
   return "calc(100% / " + (props.columns - 1) + ")";
 });
-var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: ", ";\n  width: 100%;\n"])), function (props) {
+var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: ", ";\n  width: 100%;\n"])), function (props) {
   return "var(--base-color-" + props.lineColor + ")";
 });
-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: none;\n  }\n"])));
-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) {
+var Pagination$1 = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__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"])));
+var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject8$b || (_templateObject8$b = /*#__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) {
   var active = _ref.active;
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
-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"])));
-var ScrollButtons = /*#__PURE__*/styled.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);
-var TableContainer = /*#__PURE__*/styled.table(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Next = /*#__PURE__*/styled.span(_templateObject9$6 || (_templateObject9$6 = /*#__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"])));
+var ScrollButtons = /*#__PURE__*/styled.div(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
 
 var Table = function Table(_ref) {
   var columns = _ref.columns,
@@ -9340,7 +9401,7 @@ var Table = function Table(_ref) {
     return i;
   });
   var reducedPageNumbers = reducePages(pageNumbers, currentPage);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickPrev: function onClickPrev() {
       return scrollTable('left');
     },
@@ -10598,5 +10659,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templa
   return theme.fonts.tablet.sizes.body[1];
 }, devices.desktop, devices.largeDesktop);
 
-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, 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 };
+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 };
 //# sourceMappingURL=chord.esm.js.map