@royaloperahouse/chord 2.8.1 → 2.9.0

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.
Files changed (18) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/dist/chord.cjs.development.js +113 -20
  3. package/dist/chord.cjs.development.js.map +1 -1
  4. package/dist/chord.cjs.production.min.js +1 -1
  5. package/dist/chord.cjs.production.min.js.map +1 -1
  6. package/dist/chord.esm.js +113 -21
  7. package/dist/chord.esm.js.map +1 -1
  8. package/dist/components/atoms/Tab/Tab.style.d.ts +2 -2
  9. package/dist/components/index.d.ts +2 -2
  10. package/dist/components/molecules/AnchorBar/AnchorBar.d.ts +4 -0
  11. package/dist/components/molecules/AnchorBar/AnchorBar.style.d.ts +4 -0
  12. package/dist/components/molecules/AnchorBar/index.d.ts +2 -0
  13. package/dist/components/molecules/index.d.ts +2 -1
  14. package/dist/index.d.ts +2 -2
  15. package/dist/types/anchorBar.d.ts +20 -0
  16. package/dist/types/signUpForm.d.ts +4 -0
  17. package/dist/types/types.d.ts +2 -0
  18. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,6 @@
1
+ ## [2.9.0]
2
+ - Add new AnchorBar component
3
+
1
4
  ## [2.8.1]
2
5
  - SignUpForm component: Add dropdown on mobile screen
3
6
 
package/dist/chord.cjs.development.js CHANGED
@@ -2941,6 +2941,18 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
2941
2941
  },
2942
2942
  onKeyDown: handleHeaderKeyDown
2943
2943
  };
2944
+
2945
+ var optionItemClickHandler = function optionItemClickHandler(link) {
2946
+ return function (e) {
2947
+ e.preventDefault();
2948
+ if (link) onOptionClick == null ? void 0 : onOptionClick(link);
2949
+ };
2950
+ };
2951
+
2952
+ var containerLinkClickHandler = function containerLinkClickHandler(e) {
2953
+ return e.preventDefault();
2954
+ };
2955
+
2944
2956
  return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
2945
2957
  ref: ref
2946
2958
  }, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
@@ -2957,11 +2969,11 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
2957
2969
  colorPrimary: activeColor,
2958
2970
  withOptionsInMobile: true
2959
2971
  }, options.map(function (optionItem, index) {
2972
+ var _optionItem$optionLin;
2973
+
2960
2974
  return /*#__PURE__*/React__default.createElement(OptionItem, {
2961
2975
  key: "key-" + index + "-" + optionItem.option,
2962
- onClick: function onClick() {
2963
- return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
2964
- },
2976
+ onClick: optionItemClickHandler(optionItem.optionLink),
2965
2977
  onKeyDown: function onKeyDown(e) {
2966
2978
  return handleOptionKeyDown(e, optionItem.optionLink);
2967
2979
  },
@@ -2970,9 +2982,11 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
2970
2982
  onBlur: function onBlur() {
2971
2983
  return handleOptionBlur(index);
2972
2984
  },
2973
- href: optionItem.optionLink
2985
+ href: (_optionItem$optionLin = optionItem.optionLink) != null ? _optionItem$optionLin : '#'
2974
2986
  }, optionItem.option);
2975
2987
  })) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
2988
+ href: "#",
2989
+ onClick: containerLinkClickHandler,
2976
2990
  active: active,
2977
2991
  activeColor: activeColor
2978
2992
  }, headerEvents, {
@@ -3822,6 +3836,10 @@ var Tab = function Tab(_ref) {
3822
3836
  }
3823
3837
  };
3824
3838
 
3839
+ var tabTextClickHandler = function tabTextClickHandler(e) {
3840
+ return e.preventDefault();
3841
+ };
3842
+
3825
3843
  var onFocusHandler = function onFocusHandler() {
3826
3844
  return onFocus == null ? void 0 : onFocus();
3827
3845
  };
@@ -3846,6 +3864,8 @@ var Tab = function Tab(_ref) {
3846
3864
  onKeyDown: onKeyDownHandler,
3847
3865
  tabIndex: 0
3848
3866
  }, /*#__PURE__*/React__default.createElement(TabText, {
3867
+ href: "#",
3868
+ onClick: tabTextClickHandler,
3849
3869
  withTextInMobile: withTextInMobile
3850
3870
  }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
3851
3871
  iconName: iconName
@@ -11240,7 +11260,7 @@ var Form = /*#__PURE__*/styled__default.form(_templateObject5$x || (_templateObj
11240
11260
  var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
11241
11261
  var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
11242
11262
  var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
11243
- var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n &:focus {\n outline: 3px solid var(--base-color-lapislazuli);\n }\n"])), devices.mobile);
11263
+ var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n &:focus {\n outline: 3px solid var(--base-color-lapislazuli);\n }\n"])), devices.mobile);
11244
11264
  var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
11245
11265
  var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11246
11266
  var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
@@ -11361,6 +11381,7 @@ var SignUpForm = function SignUpForm(_ref3) {
11361
11381
  isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
11362
11382
  _ref3$isMobile = _ref3.isMobile,
11363
11383
  isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
11384
+ var formRef = React.useRef(null);
11364
11385
 
11365
11386
  var _useState = React.useState({}),
11366
11387
  errors = _useState[0],
@@ -11472,6 +11493,13 @@ var SignUpForm = function SignUpForm(_ref3) {
11472
11493
  };
11473
11494
  }();
11474
11495
 
11496
+ var handleAnchorClick = function handleAnchorClick(e) {
11497
+ var _formRef$current;
11498
+
11499
+ e.preventDefault();
11500
+ (_formRef$current = formRef.current) == null ? void 0 : _formRef$current.requestSubmit();
11501
+ };
11502
+
11475
11503
  return /*#__PURE__*/React__default.createElement(GridItem, {
11476
11504
  columnStartDesktop: 3,
11477
11505
  columnSpanDesktop: 12,
@@ -11479,6 +11507,7 @@ var SignUpForm = function SignUpForm(_ref3) {
11479
11507
  columnSpanDevice: 12
11480
11508
  }, /*#__PURE__*/React__default.createElement(Form, {
11481
11509
  noValidate: true,
11510
+ ref: formRef,
11482
11511
  onSubmit: handleFormSubmit
11483
11512
  }, !isLoggedIn && /*#__PURE__*/React__default.createElement(FieldsWrapper, null, /*#__PURE__*/React__default.createElement(TextField, {
11484
11513
  label: "First name",
@@ -11535,10 +11564,14 @@ var SignUpForm = function SignUpForm(_ref3) {
11535
11564
  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
11536
11565
  type: "submit"
11537
11566
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
11567
+ href: "#",
11568
+ onClick: handleAnchorClick,
11538
11569
  bgColor: themeToColor(theme)
11539
11570
  }, "Sign up"))) : /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
11540
11571
  type: "submit"
11541
11572
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
11573
+ href: "#",
11574
+ onClick: handleAnchorClick,
11542
11575
  bgColor: themeToColor(theme)
11543
11576
  }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
11544
11577
  href: ctaPrivacy.link
@@ -11555,7 +11588,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
11555
11588
  errorMessage = _ref5.errorMessage,
11556
11589
  _ref5$isLoggedIn = _ref5.isLoggedIn,
11557
11590
  isLoggedIn = _ref5$isLoggedIn === void 0 ? false : _ref5$isLoggedIn,
11558
- submitHandler = _ref5.submitHandler;
11591
+ submitHandler = _ref5.submitHandler,
11592
+ _ref5$isOpened = _ref5.isOpened,
11593
+ isOpened = _ref5$isOpened === void 0 ? false : _ref5$isOpened;
11559
11594
  var signUpHeaderId = 'signup-header';
11560
11595
  var signUpInstructionsId = 'sign-up-instructions';
11561
11596
  var isMobile = useMobile();
@@ -11564,7 +11599,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
11564
11599
  isSuccess = _useState2[0],
11565
11600
  setIsSuccess = _useState2[1];
11566
11601
 
11567
- var _useState3 = React.useState(false),
11602
+ var _useState3 = React.useState(isOpened),
11568
11603
  dropdownOpen = _useState3[0],
11569
11604
  setDropdownOpen = _useState3[1];
11570
11605
 
@@ -11586,6 +11621,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
11586
11621
  });
11587
11622
  }
11588
11623
  }, [isSuccess]);
11624
+ React.useEffect(function () {
11625
+ setDropdownOpen(isOpened);
11626
+ }, [isOpened]);
11589
11627
  return /*#__PURE__*/React__default.createElement(Wrapper$8, {
11590
11628
  theme: themeToColor(theme)
11591
11629
  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
@@ -11651,6 +11689,60 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
11651
11689
  }))));
11652
11690
  };
11653
11691
 
11692
+ var _templateObject$1l, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
11693
+ var AnchorBarContainer = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 50px;\n min-height: 70px;\n background: var(--base-color-white);\n border-top: 2px solid var(--base-color-lightgrey);\n border-bottom: 2px solid var(--base-color-lightgrey);\n z-index: ", ";\n\n @media ", " {\n padding: 0 20px;\n min-height: 60px;\n }\n"])), zIndexes.anchor, devices.mobile);
11694
+ var CTAWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n min-height: 28px;\n\n @media ", " {\n min-height: 24px;\n }\n"])), devices.mobile);
11695
+ var CTALink = /*#__PURE__*/styled__default.a(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-decoration-color: var(--base-color-black);\n text-underline-offset: 4px;\n line-height: 1.6;\n color: var(--base-color-black);\n font-weight: var(--font-weight-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n cursor: pointer;\n"])));
11696
+ var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n"])));
11697
+
11698
+ var AnchorBar = function AnchorBar(_ref) {
11699
+ var cta = _ref.cta,
11700
+ onClickHandler = _ref.onClickHandler,
11701
+ onCloseHandler = _ref.onCloseHandler,
11702
+ _ref$showAnchorBar = _ref.showAnchorBar,
11703
+ showAnchorBar = _ref$showAnchorBar === void 0 ? true : _ref$showAnchorBar;
11704
+
11705
+ var _useState = React.useState(showAnchorBar),
11706
+ isRendered = _useState[0],
11707
+ setIsRendered = _useState[1];
11708
+
11709
+ React.useEffect(function () {
11710
+ return setIsRendered(showAnchorBar);
11711
+ }, [showAnchorBar]);
11712
+
11713
+ var onCtaClickHandler = function onCtaClickHandler(e) {
11714
+ if (onClickHandler) {
11715
+ e.preventDefault();
11716
+ onClickHandler(e);
11717
+ }
11718
+ };
11719
+
11720
+ var onCloseButtonHandler = function onCloseButtonHandler(e) {
11721
+ e.preventDefault();
11722
+ setIsRendered(false);
11723
+ if (onCloseHandler) onCloseHandler();
11724
+ };
11725
+
11726
+ if (isRendered) {
11727
+ var _cta$href;
11728
+
11729
+ return /*#__PURE__*/React__default.createElement(AnchorBarContainer, {
11730
+ "data-testid": "anchor-bar"
11731
+ }, /*#__PURE__*/React__default.createElement(CTAWrapper, null, /*#__PURE__*/React__default.createElement(CTALink, {
11732
+ href: (_cta$href = cta.href) != null ? _cta$href : '#',
11733
+ onClick: onCtaClickHandler
11734
+ }, cta.text)), /*#__PURE__*/React__default.createElement(CloseButtonWrapper, {
11735
+ href: "#",
11736
+ onClick: onCloseButtonHandler,
11737
+ "aria-label": "Close an anchor bar"
11738
+ }, /*#__PURE__*/React__default.createElement(Icon, {
11739
+ iconName: "Close"
11740
+ })));
11741
+ }
11742
+
11743
+ return null;
11744
+ };
11745
+
11654
11746
  var UpsellSection = function UpsellSection(_ref) {
11655
11747
  var title = _ref.title,
11656
11748
  richText = _ref.richText,
@@ -11687,9 +11779,9 @@ var UpsellSection = function UpsellSection(_ref) {
11687
11779
  })))));
11688
11780
  };
11689
11781
 
11690
- var _templateObject$1l, _templateObject2$_;
11691
- var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
11692
- var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$_ || (_templateObject2$_ = /*#__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) {
11782
+ var _templateObject$1m, _templateObject2$$;
11783
+ var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
11784
+ var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$$ || (_templateObject2$$ = /*#__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) {
11693
11785
  var hideBottomBorder = _ref.hideBottomBorder;
11694
11786
  return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
11695
11787
  }, devices.mobileAndTablet, devices.mobile);
@@ -11717,11 +11809,11 @@ var StickyBar = function StickyBar(_ref) {
11717
11809
  }, children)));
11718
11810
  };
11719
11811
 
11720
- var _templateObject$1m, _templateObject2$$, _templateObject3$Q, _templateObject4$F;
11721
- var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__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);
11722
- var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$$ || (_templateObject2$$ = /*#__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);
11723
- var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11724
- var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$F || (_templateObject4$F = /*#__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"])));
11812
+ var _templateObject$1n, _templateObject2$10, _templateObject3$R, _templateObject4$G;
11813
+ var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__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);
11814
+ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$10 || (_templateObject2$10 = /*#__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);
11815
+ var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11816
+ var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$G || (_templateObject4$G = /*#__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"])));
11725
11817
 
11726
11818
  var _excluded$q = ["isOpen", "setIsOpen", "children", "appElementId"];
11727
11819
  var MAX_Z_INDEX = 9999999999;
@@ -11842,9 +11934,9 @@ var ModalWindow = function ModalWindow(_ref) {
11842
11934
  })), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
11843
11935
  };
11844
11936
 
11845
- var _templateObject$1n, _templateObject2$10;
11846
- var FiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n column-gap: 24px;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n row-gap: 18px;\n }\n"])), devices.mobileAndTablet);
11847
- var FilterItemsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n column-gap: 16px;\n row-gap: 12px;\n"])));
11937
+ var _templateObject$1o, _templateObject2$11;
11938
+ var FiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n column-gap: 24px;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n row-gap: 18px;\n }\n"])), devices.mobileAndTablet);
11939
+ var FilterItemsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n column-gap: 16px;\n row-gap: 12px;\n"])));
11848
11940
 
11849
11941
  /**
11850
11942
  * A FilterToggles component that renders a labelled group of toggle buttons
@@ -11907,8 +11999,8 @@ var FilterToggles = function FilterToggles(_ref) {
11907
11999
  })));
11908
12000
  };
11909
12001
 
11910
- var _templateObject$1o;
11911
- var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1o || (_templateObject$1o = /*#__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) {
12002
+ var _templateObject$1p;
12003
+ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__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) {
11912
12004
  var theme = _ref.theme;
11913
12005
  return theme.colors.primary;
11914
12006
  }, function (_ref2) {
@@ -12852,6 +12944,7 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1o || (
12852
12944
  exports.Accordion = Accordion;
12853
12945
  exports.Accordions = Accordions;
12854
12946
  exports.AltHeader = AltHeader;
12947
+ exports.AnchorBar = AnchorBar;
12855
12948
  exports.AnchorTabBar = AnchorTabBar;
12856
12949
  exports.AnnouncementBanner = AnnouncementBanner;
12857
12950
  exports.AuxiliaryButton = AuxiliaryButton;