@royaloperahouse/harmonic 0.9.2-a → 0.9.3-a

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 (20) hide show
  1. package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
  2. package/dist/components/molecules/Information/Information.style.d.ts +1 -1
  3. package/dist/components/molecules/Pagination/Pagination.d.ts +10 -3
  4. package/dist/components/molecules/Pagination/Pagination.style.d.ts +3 -3
  5. package/dist/components/molecules/Pagination/components/NavButtonOrLink.d.ts +4 -0
  6. package/dist/components/molecules/Pagination/components/PageLinkOrButton.d.ts +4 -0
  7. package/dist/components/molecules/Pagination/components/index.d.ts +2 -0
  8. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +1 -1
  9. package/dist/components/molecules/Table/Table.style.d.ts +1 -8
  10. package/dist/components/molecules/Table/components/DataCells.d.ts +7 -0
  11. package/dist/components/molecules/Table/components/HeaderCells.d.ts +7 -0
  12. package/dist/harmonic.cjs.development.js +197 -145
  13. package/dist/harmonic.cjs.development.js.map +1 -1
  14. package/dist/harmonic.cjs.production.min.js +1 -1
  15. package/dist/harmonic.cjs.production.min.js.map +1 -1
  16. package/dist/harmonic.esm.js +197 -145
  17. package/dist/harmonic.esm.js.map +1 -1
  18. package/dist/types/pagination.d.ts +9 -0
  19. package/dist/types/tableTypes.d.ts +8 -25
  20. package/package.json +1 -1
package/dist/harmonic.cjs.development.js CHANGED
@@ -9726,21 +9726,76 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9726
9726
  }), linkText))))));
9727
9727
  };
9728
9728
 
9729
- var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x, _templateObject5$r, _templateObject6$m, _templateObject7$g;
9730
- // Keep MorePages for Table component until restyle
9731
- var MorePages = /*#__PURE__*/styled__default.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9732
- var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n color: inherit;\n"])));
9733
- var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n align-items: center;\n }\n li:first-child {\n margin-left: 0px;\n }\n"])));
9734
- var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9735
- var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9736
- var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
9729
+ var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$m, _templateObject7$g, _templateObject8$c;
9730
+ var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover,\n &:focus {\n outline: none;\n }\n"])));
9731
+ var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9732
+ var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9733
+ var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n align-items: center;\n }\n li:first-child {\n margin-left: 0px;\n }\n"])));
9734
+ var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9735
+ var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9736
+ var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
9737
9737
  var active = _ref.active;
9738
9738
  return active ? "var(--color-primary-red)" : 'inherit';
9739
9739
  }, function (_ref2) {
9740
9740
  var active = _ref2.active;
9741
9741
  return "1px solid " + (active ? 'var(--color-primary-red)' : 'transparent');
9742
9742
  });
9743
- var PageNav = /*#__PURE__*/styled__default.a(_templateObject7$g || (_templateObject7$g = /*#__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(--color-base-black);\n }\n }\n"])));
9743
+
9744
+ var NavButtonOrLink = function NavButtonOrLink(_ref) {
9745
+ var page = _ref.page,
9746
+ children = _ref.children,
9747
+ onPageChange = _ref.onPageChange,
9748
+ baseUrl = _ref.baseUrl,
9749
+ keyProp = _ref.keyProp,
9750
+ testId = _ref.testId,
9751
+ ariaLabel = _ref.ariaLabel;
9752
+ if (onPageChange) {
9753
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9754
+ "aria-label": ariaLabel,
9755
+ as: "button",
9756
+ type: "button",
9757
+ onClick: function onClick() {
9758
+ return onPageChange(page);
9759
+ },
9760
+ key: keyProp,
9761
+ "data-testid": testId
9762
+ }, children);
9763
+ }
9764
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9765
+ "aria-label": ariaLabel,
9766
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9767
+ key: keyProp,
9768
+ "data-testid": testId
9769
+ }, children);
9770
+ };
9771
+
9772
+ var PageLinkOrButton = function PageLinkOrButton(_ref) {
9773
+ var page = _ref.page,
9774
+ children = _ref.children,
9775
+ onPageChange = _ref.onPageChange,
9776
+ baseUrl = _ref.baseUrl,
9777
+ keyProp = _ref.keyProp,
9778
+ testId = _ref.testId,
9779
+ ariaLabel = _ref.ariaLabel;
9780
+ if (onPageChange) {
9781
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9782
+ "aria-label": ariaLabel,
9783
+ as: "button",
9784
+ type: "button",
9785
+ onClick: function onClick() {
9786
+ return onPageChange(page);
9787
+ },
9788
+ key: keyProp,
9789
+ "data-testid": testId
9790
+ }, children);
9791
+ }
9792
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9793
+ "aria-label": ariaLabel,
9794
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9795
+ key: keyProp,
9796
+ "data-testid": testId
9797
+ }, children);
9798
+ };
9744
9799
 
9745
9800
  var reducePages = function reducePages(pages, currentPage) {
9746
9801
  // If there are less than 6 pages, return all pages
@@ -9762,33 +9817,42 @@ var Pagination = function Pagination(_ref) {
9762
9817
  var pageCount = _ref.pageCount,
9763
9818
  currentPage = _ref.currentPage,
9764
9819
  baseUrl = _ref.baseUrl,
9765
- className = _ref.className;
9766
- // Array of page numbers starting at 1
9820
+ className = _ref.className,
9821
+ onPageChange = _ref.onPageChange;
9767
9822
  var pageNumbers = Array.from(Array(pageCount + 1).keys()).slice(1);
9768
9823
  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
9769
9824
  return /*#__PURE__*/React__default.createElement(PageNumberWrapper, {
9770
9825
  className: className
9771
- },
9772
- // {/* Left arrow only appears after page 1 */
9773
- currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNav, {
9774
- href: baseUrl + "1"
9826
+ }, currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9827
+ ariaLabel: "Backward arrow, skip to first page",
9828
+ page: 1,
9829
+ onPageChange: onPageChange,
9830
+ baseUrl: baseUrl
9775
9831
  }, /*#__PURE__*/React__default.createElement(Icon, {
9832
+ "aria-hidden": "true",
9776
9833
  iconName: "LastPageArrow",
9777
9834
  direction: "right"
9778
9835
  }))), /*#__PURE__*/React__default.createElement(PreviousPageItem, {
9779
9836
  key: "previous-page",
9780
9837
  "data-testid": "left-arrow"
9781
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9782
- href: "" + baseUrl + (currentPage - 1)
9838
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9839
+ ariaLabel: "Backward arrow, skip one page back",
9840
+ page: currentPage - 1,
9841
+ onPageChange: onPageChange,
9842
+ baseUrl: baseUrl
9783
9843
  }, /*#__PURE__*/React__default.createElement(Icon, {
9844
+ "aria-hidden": "true",
9784
9845
  iconName: "ArrowPagination",
9785
9846
  direction: "right"
9786
9847
  }))))), reducedPageNumbers.map(function (page) {
9787
9848
  return /*#__PURE__*/React__default.createElement("li", {
9788
9849
  key: page
9789
- }, /*#__PURE__*/React__default.createElement(PaginationLink, {
9790
- href: "" + baseUrl + page,
9791
- "data-testid": "page-number"
9850
+ }, /*#__PURE__*/React__default.createElement(PageLinkOrButton, {
9851
+ ariaLabel: "Page " + page + ", " + (page === currentPage ? 'it is a current page' : "skip to page " + page),
9852
+ page: page,
9853
+ onPageChange: onPageChange,
9854
+ baseUrl: baseUrl,
9855
+ testId: "page-number"
9792
9856
  }, /*#__PURE__*/React__default.createElement(TextLinkPagination, {
9793
9857
  size: "large",
9794
9858
  active: page === currentPage
@@ -9796,24 +9860,32 @@ var Pagination = function Pagination(_ref) {
9796
9860
  }), currentPage < pageCount && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
9797
9861
  key: "next-page",
9798
9862
  "data-testid": "right-arrow"
9799
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9800
- href: "" + baseUrl + (currentPage + 1)
9863
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9864
+ ariaLabel: "Forward arrow, skip one page forward",
9865
+ page: currentPage + 1,
9866
+ onPageChange: onPageChange,
9867
+ baseUrl: baseUrl
9801
9868
  }, /*#__PURE__*/React__default.createElement(Icon, {
9869
+ "aria-hidden": "true",
9802
9870
  iconName: "ArrowPagination",
9803
9871
  direction: "left"
9804
- }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(PageNav, {
9805
- href: "" + baseUrl + pageCount
9872
+ }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9873
+ ariaLabel: "Forward arrow, skip to last page",
9874
+ page: pageCount,
9875
+ onPageChange: onPageChange,
9876
+ baseUrl: baseUrl
9806
9877
  }, /*#__PURE__*/React__default.createElement(Icon, {
9878
+ "aria-hidden": "true",
9807
9879
  iconName: "LastPageArrow",
9808
9880
  direction: "left"
9809
9881
  }))))));
9810
9882
  };
9811
9883
 
9812
- var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$n, _templateObject7$h;
9884
+ var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$n, _templateObject7$h;
9813
9885
  var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
9814
9886
  var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
9815
9887
  var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
9816
- var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9888
+ var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9817
9889
  var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9818
9890
  var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
9819
9891
  var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
@@ -9873,14 +9945,14 @@ var PeopleListing = function PeopleListing(_ref) {
9873
9945
  }));
9874
9946
  };
9875
9947
 
9876
- var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z;
9948
+ var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$y;
9877
9949
  var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
9878
9950
  var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
9879
9951
  var columnCount = _ref.columnCount;
9880
9952
  return "repeat(" + columnCount + ", 1fr)";
9881
9953
  }, devices.mobile, devices.tablet);
9882
9954
  var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
9883
- var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
9955
+ var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
9884
9956
 
9885
9957
  // Get the total character length of a property in an array of objects
9886
9958
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -9998,7 +10070,7 @@ var CreditListing = function CreditListing(_ref) {
9998
10070
  }, creditEntries);
9999
10071
  };
10000
10072
 
10001
- var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$t, _templateObject6$o, _templateObject7$i, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
10073
+ var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$o, _templateObject7$i, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
10002
10074
  var LENGTH_TEXT = 28;
10003
10075
  var LENGTH_TEXT_TABLET$1 = 12;
10004
10076
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -10017,7 +10089,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$17 ||
10017
10089
  });
10018
10090
  var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
10019
10091
  var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n"])));
10020
- var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
10092
+ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
10021
10093
  var hasTextLinks = _ref4.hasTextLinks;
10022
10094
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
10023
10095
  }, function (_ref5) {
@@ -10047,7 +10119,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
10047
10119
  });
10048
10120
  var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
10049
10121
  var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10050
- var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
10122
+ var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
10051
10123
  var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
10052
10124
  var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
10053
10125
  var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
@@ -10250,7 +10322,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10250
10322
  }))));
10251
10323
  };
10252
10324
 
10253
- var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$p, _templateObject7$j;
10325
+ var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$p, _templateObject7$j;
10254
10326
  var LENGTH_TEXT$2 = 28;
10255
10327
  var LENGTH_TEXT_TABLET$2 = 10;
10256
10328
  var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
@@ -10268,7 +10340,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
10268
10340
  var imageToLeft = _ref4.imageToLeft;
10269
10341
  return imageToLeft ? 'right' : 'left';
10270
10342
  }, devices.mobile);
10271
- var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10343
+ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10272
10344
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10273
10345
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
10274
10346
  var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
@@ -10704,7 +10776,7 @@ var SectionTitle = function SectionTitle(_ref) {
10704
10776
  }, description)))));
10705
10777
  };
10706
10778
 
10707
- var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v, _templateObject6$q, _templateObject7$k, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10779
+ var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10708
10780
  var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
10709
10781
  var theme = _ref.theme;
10710
10782
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10720,7 +10792,7 @@ var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Y || (_templateObjec
10720
10792
  return theme.colors.darkgrey;
10721
10793
  });
10722
10794
  var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
10723
- var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10795
+ var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10724
10796
  var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
10725
10797
  var theme = _ref5.theme;
10726
10798
  return {
@@ -10731,7 +10803,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
10731
10803
  })(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
10732
10804
  var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10733
10805
  var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10734
- var Options = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10806
+ var Options = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10735
10807
  var Option = /*#__PURE__*/styled__default.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10736
10808
  var theme = _ref6.theme,
10737
10809
  hover = _ref6.hover;
@@ -11085,7 +11157,7 @@ function Select(_ref3) {
11085
11157
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
11086
11158
  }
11087
11159
 
11088
- var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$D;
11160
+ var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$C;
11089
11161
  var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
11090
11162
  var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-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 .harmonic-select__single-value,\n .harmonic-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 .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-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 &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-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 .harmonic-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 .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
11091
11163
  var width = _ref.width;
@@ -11109,7 +11181,7 @@ var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templ
11109
11181
  if (darkMode) return "var(--base-color-white)";
11110
11182
  return "var(--base-color-black)";
11111
11183
  });
11112
- var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11184
+ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11113
11185
  var darkMode = _ref6.darkMode;
11114
11186
  if (darkMode) return "var(--base-color-white)";
11115
11187
  return "var(--base-color-errorstate)";
@@ -11299,11 +11371,11 @@ var Quote = function Quote(_ref) {
11299
11371
  }, attribution))));
11300
11372
  };
11301
11373
 
11302
- var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$w, _templateObject6$r;
11374
+ var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$r;
11303
11375
  var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
11304
11376
  var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11305
11377
  var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11306
- var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11378
+ var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11307
11379
  var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
11308
11380
  var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
11309
11381
 
@@ -11343,14 +11415,14 @@ var MiniCard = function MiniCard(_ref) {
11343
11415
  }, title)))));
11344
11416
  };
11345
11417
 
11346
- var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$x;
11418
+ var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$E, _templateObject5$x;
11347
11419
  var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
11348
11420
  var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
11349
11421
  var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
11350
11422
  var isVisible = _ref.isVisible;
11351
11423
  return isVisible ? 'visible' : 'hidden';
11352
11424
  });
11353
- var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11425
+ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11354
11426
  var isVisible = _ref2.isVisible;
11355
11427
  return isVisible ? 'visible' : 'hidden';
11356
11428
  });
@@ -11435,11 +11507,11 @@ var ReadMore = function ReadMore(_ref) {
11435
11507
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
11436
11508
  };
11437
11509
 
11438
- var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$y;
11510
+ var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$F, _templateObject5$y;
11439
11511
  var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11440
11512
  var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$12 || (_templateObject2$12 = /*#__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 }\n"])), exports.Colors.LightGrey);
11441
11513
  var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$Q || (_templateObject3$Q = /*#__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: block;\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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
11442
- var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$G || (_templateObject4$G = /*#__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 text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
11514
+ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__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 text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
11443
11515
  var isActive = _ref.isActive;
11444
11516
  return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
11445
11517
  }, exports.Colors.MidGrey);
@@ -11599,14 +11671,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
11599
11671
  });
11600
11672
  };
11601
11673
 
11602
- var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$z, _templateObject6$s;
11674
+ var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$G, _templateObject5$z, _templateObject6$s;
11603
11675
  var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11604
11676
  var Sections = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11605
11677
  var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
11606
11678
  var color = _ref.color;
11607
11679
  return "var(--base-color-" + color + ")";
11608
11680
  });
11609
- var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
11681
+ var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
11610
11682
  var Text = /*#__PURE__*/styled__default.div(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
11611
11683
  var color = _ref2.color;
11612
11684
  return "var(--base-color-" + color + ")";
@@ -11693,28 +11765,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
11693
11765
  }, strengthLabel))));
11694
11766
  };
11695
11767
 
11696
- var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$t, _templateObject7$l, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11768
+ var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$H, _templateObject5$A, _templateObject6$t, _templateObject7$l, _templateObject8$f;
11697
11769
  var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11698
11770
  var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11699
11771
  var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11700
- var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$I || (_templateObject4$I = /*#__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: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ", ";\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
11701
- return "var(--base-color-" + props.lineColor + ")";
11702
- }, function (props) {
11772
+ var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: uppercase;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
11703
11773
  return "calc(100% / " + (props.columns - 1) + ")";
11704
11774
  }, devices.tablet, devices.mobile);
11705
- var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$A || (_templateObject5$A = /*#__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: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n border-bottom: 1px solid;\n border-color: ", ";\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
11706
- return "var(--base-color-" + props.lineColor + ")";
11707
- }, function (props) {
11775
+ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
11708
11776
  return "calc(100% / " + (props.columns - 1) + ")";
11709
11777
  }, devices.mobile);
11710
- var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__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"])));
11711
- var PageNumber = /*#__PURE__*/styled__default.button(_templateObject7$l || (_templateObject7$l = /*#__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) {
11712
- var active = _ref.active;
11713
- return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11714
- });
11715
- var Next = /*#__PURE__*/styled__default.span(_templateObject8$e || (_templateObject8$e = /*#__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"])));
11716
- var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__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"])));
11717
- var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11778
+ var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
11779
+ var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
11780
+ var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11718
11781
 
11719
11782
  /* eslint-disable react/no-danger */
11720
11783
  var Content = function Content(_ref) {
@@ -11739,23 +11802,25 @@ var scrollTable = function scrollTable(tableRef, direction) {
11739
11802
  var Cell = function Cell(_ref) {
11740
11803
  var cell = _ref.cell,
11741
11804
  cellIndex = _ref.cellIndex,
11742
- columns = _ref.columns,
11743
- lineColor = _ref.lineColor;
11805
+ columns = _ref.columns;
11806
+ var isText = typeof cell === 'string' || typeof cell === 'number';
11744
11807
  return /*#__PURE__*/React__default.createElement(TableCell, {
11745
11808
  key: cellIndex,
11746
11809
  columns: columns,
11747
- role: "gridcell",
11748
- lineColor: lineColor
11810
+ role: "gridcell"
11811
+ }, isText ? (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11812
+ size: "large"
11749
11813
  }, /*#__PURE__*/React__default.createElement(Content, {
11750
11814
  content: cell
11751
- }));
11815
+ }))) : (/*#__PURE__*/React__default.createElement(Content, {
11816
+ content: cell
11817
+ })));
11752
11818
  };
11753
11819
 
11754
11820
  var Row = function Row(_ref) {
11755
11821
  var row = _ref.row,
11756
11822
  rowIndex = _ref.rowIndex,
11757
- columns = _ref.columns,
11758
- lineColor = _ref.lineColor;
11823
+ columns = _ref.columns;
11759
11824
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
11760
11825
  key: rowIndex
11761
11826
  }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
@@ -11763,28 +11828,61 @@ var Row = function Row(_ref) {
11763
11828
  key: index,
11764
11829
  cell: cell,
11765
11830
  cellIndex: index,
11766
- columns: columns,
11767
- lineColor: lineColor
11831
+ columns: columns
11768
11832
  });
11769
11833
  })));
11770
11834
  };
11771
11835
 
11836
+ var DataCells = function DataCells(_ref) {
11837
+ var currentRows = _ref.currentRows,
11838
+ columns = _ref.columns;
11839
+ return /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11840
+ return /*#__PURE__*/React__default.createElement(Row, {
11841
+ key: rowIndex,
11842
+ row: row,
11843
+ rowIndex: rowIndex,
11844
+ columns: columns
11845
+ });
11846
+ }));
11847
+ };
11848
+
11849
+ var HeaderCells = function HeaderCells(_ref) {
11850
+ var headings = _ref.headings,
11851
+ columns = _ref.columns;
11852
+ return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
11853
+ role: "row"
11854
+ }, headings == null ? void 0 : headings.map(function (heading, index) {
11855
+ return /*#__PURE__*/React__default.createElement(TableHeader, {
11856
+ key: index,
11857
+ role: "columnheader",
11858
+ scope: "col",
11859
+ columns: columns
11860
+ }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
11861
+ size: "small"
11862
+ }, /*#__PURE__*/React__default.createElement(Content, {
11863
+ content: heading
11864
+ })));
11865
+ })));
11866
+ };
11867
+
11772
11868
  /* eslint-disable react/jsx-one-expression-per-line */
11773
11869
  var Table = function Table(_ref) {
11774
11870
  var columns = _ref.columns,
11775
11871
  headings = _ref.headings,
11776
11872
  children = _ref.children,
11777
- lineColors = _ref.lineColors,
11778
11873
  rowsPerPage = _ref.rowsPerPage,
11779
11874
  pagination = _ref.pagination,
11780
- description = _ref.description;
11875
+ description = _ref.description,
11876
+ className = _ref.className;
11781
11877
  var _useState = React.useState(0),
11782
11878
  currentPage = _useState[0],
11783
11879
  setCurrentPage = _useState[1];
11784
11880
  var _useState2 = React.useState(false),
11785
11881
  showScrollButtons = _useState2[0],
11786
11882
  setShowScrollButtons = _useState2[1];
11787
- var lineColor = lineColors != null ? lineColors : exports.Colors.Cinema;
11883
+ var handlePageChange = function handlePageChange(page) {
11884
+ setCurrentPage(page - 1);
11885
+ };
11788
11886
  var tableRef = React.useRef(null);
11789
11887
  React.useLayoutEffect(function () {
11790
11888
  var horizontalScroll = function horizontalScroll() {
@@ -11798,14 +11896,8 @@ var Table = function Table(_ref) {
11798
11896
  return window.removeEventListener('resize', horizontalScroll);
11799
11897
  };
11800
11898
  }, []);
11801
- var totalRows = Array.isArray(children) ? children.length + 1 : 1;
11899
+ var totalRows = Array.isArray(children) ? children.length : 1;
11802
11900
  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
11803
- var pageNumbers = Array.from({
11804
- length: totalPages
11805
- }, function (_, i) {
11806
- return i;
11807
- });
11808
- var reducedPageNumbers = reducePages(pageNumbers, currentPage);
11809
11901
  var currentRows;
11810
11902
  if (pagination) {
11811
11903
  if (Array.isArray(children)) {
@@ -11814,15 +11906,20 @@ var Table = function Table(_ref) {
11814
11906
  currentRows = [];
11815
11907
  }
11816
11908
  } else {
11817
- currentRows = children;
11909
+ currentRows = Array.isArray(children) ? children : [];
11818
11910
  }
11911
+ var headingsContent = Array.isArray(headings) ? headings.map(function (h) {
11912
+ return h;
11913
+ }) : [];
11819
11914
  var visibleRows;
11820
11915
  if (pagination) {
11821
11916
  visibleRows = Array.isArray(currentRows) ? currentRows.length + 1 : 0;
11822
11917
  } else {
11823
11918
  visibleRows = totalRows;
11824
11919
  }
11825
- return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11920
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, {
11921
+ className: className
11922
+ }, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11826
11923
  onClickPrev: function onClickPrev() {
11827
11924
  return scrollTable(tableRef, 'left');
11828
11925
  },
@@ -11837,67 +11934,22 @@ var Table = function Table(_ref) {
11837
11934
  "aria-colcount": columns
11838
11935
  }, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11839
11936
  id: "table-description"
11840
- }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, ' ', /*#__PURE__*/React__default.createElement("tr", {
11841
- role: "columnheader"
11842
- }, headings == null ? void 0 : headings.map(function (heading, index) {
11843
- return /*#__PURE__*/React__default.createElement(TableHeader, {
11844
- key: index,
11845
- role: "columnheader",
11846
- scope: "col",
11847
- columns: columns,
11848
- lineColor: lineColor
11849
- }, /*#__PURE__*/React__default.createElement(Content, {
11850
- content: heading
11851
- }));
11852
- }))), /*#__PURE__*/React__default.createElement("tbody", null, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11853
- return /*#__PURE__*/React__default.createElement(Row, {
11854
- key: rowIndex,
11855
- row: row,
11856
- rowIndex: rowIndex,
11857
- columns: columns,
11858
- lineColor: lineColor
11859
- });
11937
+ }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(HeaderCells, {
11938
+ headings: headingsContent,
11939
+ columns: columns
11940
+ }), /*#__PURE__*/React__default.createElement(DataCells, {
11941
+ currentRows: currentRows,
11942
+ columns: columns
11860
11943
  }))), pagination && totalPages > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11861
11944
  id: "pagination-description"
11862
- }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11863
- key: "previous-page",
11864
- onClick: function onClick() {
11865
- return setCurrentPage(currentPage - 1);
11866
- },
11867
- tabIndex: 0,
11868
- "aria-label": "Previous page"
11869
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11870
- iconName: "DropdownArrow",
11871
- direction: "down"
11872
- }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11873
- key: "more-before"
11874
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), reducedPageNumbers.map(function (number) {
11875
- return /*#__PURE__*/React__default.createElement("li", {
11876
- key: number
11877
- }, /*#__PURE__*/React__default.createElement(PageNumber, {
11878
- key: number,
11879
- onClick: function onClick() {
11880
- return setCurrentPage(number);
11881
- },
11882
- tabIndex: 0,
11883
- active: "" + (number === currentPage)
11884
- }, number + 1));
11885
- }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11886
- key: "more-after"
11887
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11888
- key: "next-page",
11889
- onClick: function onClick() {
11890
- return setCurrentPage(currentPage + 1);
11891
- },
11892
- tabIndex: 0,
11893
- "aria-label": "Next page"
11894
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11895
- iconName: "DropdownArrow",
11896
- direction: "up"
11897
- }))))))))));
11945
+ }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(PaginationWrapper, {
11946
+ currentPage: currentPage + 1,
11947
+ pageCount: totalPages,
11948
+ onPageChange: handlePageChange
11949
+ }))));
11898
11950
  };
11899
11951
 
11900
- var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$u, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11952
+ var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$I, _templateObject5$B, _templateObject6$u, _templateObject7$m, _templateObject8$g, _templateObject9$9, _templateObject0$9, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11901
11953
  var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
11902
11954
  var theme = _ref.theme;
11903
11955
  return "var(--color-" + theme + ")";
@@ -11907,13 +11959,13 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
11907
11959
  });
11908
11960
  var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
11909
11961
  var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
11910
- var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11962
+ var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11911
11963
  var Form = /*#__PURE__*/styled__default.form(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error$1);
11912
11964
  var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__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);
11913
11965
  var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11914
- var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11915
- var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__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"])), devices.mobile);
11916
- var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__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);
11966
+ var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11967
+ var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__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"])), devices.mobile);
11968
+ var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__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);
11917
11969
  var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11918
11970
  var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__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"])));
11919
11971
  var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
@@ -12321,10 +12373,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12321
12373
  }))))));
12322
12374
  };
12323
12375
 
12324
- var _templateObject$1o, _templateObject3$U, _templateObject4$K;
12376
+ var _templateObject$1o, _templateObject3$U, _templateObject4$J;
12325
12377
  var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, devices.mobile);
12326
12378
  var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject3$U || (_templateObject3$U = /*#__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\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
12327
- var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
12379
+ var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
12328
12380
 
12329
12381
  var AnchorBar = function AnchorBar(_ref) {
12330
12382
  var cta = _ref.cta,