@royaloperahouse/harmonic 0.9.3 → 0.10.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 (21) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
  3. package/dist/components/molecules/Information/Information.style.d.ts +1 -1
  4. package/dist/components/molecules/Pagination/Pagination.d.ts +10 -3
  5. package/dist/components/molecules/Pagination/Pagination.style.d.ts +3 -3
  6. package/dist/components/molecules/Pagination/components/NavButtonOrLink.d.ts +4 -0
  7. package/dist/components/molecules/Pagination/components/PageLinkOrButton.d.ts +4 -0
  8. package/dist/components/molecules/Pagination/components/index.d.ts +2 -0
  9. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +1 -1
  10. package/dist/components/molecules/Table/Table.style.d.ts +1 -8
  11. package/dist/components/molecules/Table/components/DataCells.d.ts +7 -0
  12. package/dist/components/molecules/Table/components/HeaderCells.d.ts +7 -0
  13. package/dist/harmonic.cjs.development.js +197 -145
  14. package/dist/harmonic.cjs.development.js.map +1 -1
  15. package/dist/harmonic.cjs.production.min.js +1 -1
  16. package/dist/harmonic.cjs.production.min.js.map +1 -1
  17. package/dist/harmonic.esm.js +197 -145
  18. package/dist/harmonic.esm.js.map +1 -1
  19. package/dist/types/pagination.d.ts +9 -0
  20. package/dist/types/tableTypes.d.ts +8 -25
  21. package/package.json +1 -1
package/dist/harmonic.cjs.development.js CHANGED
@@ -9731,21 +9731,76 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9731
9731
  }), linkText))))));
9732
9732
  };
9733
9733
 
9734
- var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
9735
- // Keep MorePages for Table component until restyle
9736
- var MorePages = /*#__PURE__*/styled__default.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9737
- var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n color: inherit;\n"])));
9738
- 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"])));
9739
- var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9740
- var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9741
- var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__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) {
9734
+ var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$l, _templateObject7$f, _templateObject8$c;
9735
+ 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 width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
9736
+ var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9737
+ var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9738
+ 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 flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
9739
+ var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9740
+ var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9741
+ 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) {
9742
9742
  var active = _ref.active;
9743
9743
  return active ? "var(--color-primary-red)" : 'inherit';
9744
9744
  }, function (_ref2) {
9745
9745
  var active = _ref2.active;
9746
9746
  return "1px solid " + (active ? 'var(--color-primary-red)' : 'transparent');
9747
9747
  });
9748
- var PageNav = /*#__PURE__*/styled__default.a(_templateObject7$f || (_templateObject7$f = /*#__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"])));
9748
+
9749
+ var NavButtonOrLink = function NavButtonOrLink(_ref) {
9750
+ var page = _ref.page,
9751
+ children = _ref.children,
9752
+ onPageChange = _ref.onPageChange,
9753
+ baseUrl = _ref.baseUrl,
9754
+ keyProp = _ref.keyProp,
9755
+ testId = _ref.testId,
9756
+ ariaLabel = _ref.ariaLabel;
9757
+ if (onPageChange) {
9758
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9759
+ "aria-label": ariaLabel,
9760
+ as: "button",
9761
+ type: "button",
9762
+ onClick: function onClick() {
9763
+ return onPageChange(page);
9764
+ },
9765
+ key: keyProp,
9766
+ "data-testid": testId
9767
+ }, children);
9768
+ }
9769
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9770
+ "aria-label": ariaLabel,
9771
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9772
+ key: keyProp,
9773
+ "data-testid": testId
9774
+ }, children);
9775
+ };
9776
+
9777
+ var PageLinkOrButton = function PageLinkOrButton(_ref) {
9778
+ var page = _ref.page,
9779
+ children = _ref.children,
9780
+ onPageChange = _ref.onPageChange,
9781
+ baseUrl = _ref.baseUrl,
9782
+ keyProp = _ref.keyProp,
9783
+ testId = _ref.testId,
9784
+ ariaLabel = _ref.ariaLabel;
9785
+ if (onPageChange) {
9786
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9787
+ "aria-label": ariaLabel,
9788
+ as: "button",
9789
+ type: "button",
9790
+ onClick: function onClick() {
9791
+ return onPageChange(page);
9792
+ },
9793
+ key: keyProp,
9794
+ "data-testid": testId
9795
+ }, children);
9796
+ }
9797
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9798
+ "aria-label": ariaLabel,
9799
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9800
+ key: keyProp,
9801
+ "data-testid": testId
9802
+ }, children);
9803
+ };
9749
9804
 
9750
9805
  var reducePages = function reducePages(pages, currentPage) {
9751
9806
  // If there are less than 6 pages, return all pages
@@ -9767,33 +9822,42 @@ var Pagination = function Pagination(_ref) {
9767
9822
  var pageCount = _ref.pageCount,
9768
9823
  currentPage = _ref.currentPage,
9769
9824
  baseUrl = _ref.baseUrl,
9770
- className = _ref.className;
9771
- // Array of page numbers starting at 1
9825
+ className = _ref.className,
9826
+ onPageChange = _ref.onPageChange;
9772
9827
  var pageNumbers = Array.from(Array(pageCount + 1).keys()).slice(1);
9773
9828
  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
9774
9829
  return /*#__PURE__*/React__default.createElement(PageNumberWrapper, {
9775
9830
  className: className
9776
- },
9777
- // {/* Left arrow only appears after page 1 */
9778
- currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNav, {
9779
- href: baseUrl + "1"
9831
+ }, currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9832
+ ariaLabel: "Backward arrow, skip to first page",
9833
+ page: 1,
9834
+ onPageChange: onPageChange,
9835
+ baseUrl: baseUrl
9780
9836
  }, /*#__PURE__*/React__default.createElement(Icon, {
9837
+ "aria-hidden": "true",
9781
9838
  iconName: "LastPageArrow",
9782
9839
  direction: "right"
9783
9840
  }))), /*#__PURE__*/React__default.createElement(PreviousPageItem, {
9784
9841
  key: "previous-page",
9785
9842
  "data-testid": "left-arrow"
9786
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9787
- href: "" + baseUrl + (currentPage - 1)
9843
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9844
+ ariaLabel: "Backward arrow, skip one page back",
9845
+ page: currentPage - 1,
9846
+ onPageChange: onPageChange,
9847
+ baseUrl: baseUrl
9788
9848
  }, /*#__PURE__*/React__default.createElement(Icon, {
9849
+ "aria-hidden": "true",
9789
9850
  iconName: "ArrowPagination",
9790
9851
  direction: "right"
9791
9852
  }))))), reducedPageNumbers.map(function (page) {
9792
9853
  return /*#__PURE__*/React__default.createElement("li", {
9793
9854
  key: page
9794
- }, /*#__PURE__*/React__default.createElement(PaginationLink, {
9795
- href: "" + baseUrl + page,
9796
- "data-testid": "page-number"
9855
+ }, /*#__PURE__*/React__default.createElement(PageLinkOrButton, {
9856
+ ariaLabel: "Page " + page + ", " + (page === currentPage ? 'it is a current page' : "skip to page " + page),
9857
+ page: page,
9858
+ onPageChange: onPageChange,
9859
+ baseUrl: baseUrl,
9860
+ testId: "page-number"
9797
9861
  }, /*#__PURE__*/React__default.createElement(TextLinkPagination, {
9798
9862
  size: "large",
9799
9863
  active: page === currentPage
@@ -9801,24 +9865,32 @@ var Pagination = function Pagination(_ref) {
9801
9865
  }), currentPage < pageCount && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
9802
9866
  key: "next-page",
9803
9867
  "data-testid": "right-arrow"
9804
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9805
- href: "" + baseUrl + (currentPage + 1)
9868
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9869
+ ariaLabel: "Forward arrow, skip one page forward",
9870
+ page: currentPage + 1,
9871
+ onPageChange: onPageChange,
9872
+ baseUrl: baseUrl
9806
9873
  }, /*#__PURE__*/React__default.createElement(Icon, {
9874
+ "aria-hidden": "true",
9807
9875
  iconName: "ArrowPagination",
9808
9876
  direction: "left"
9809
- }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(PageNav, {
9810
- href: "" + baseUrl + pageCount
9877
+ }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9878
+ ariaLabel: "Forward arrow, skip to last page",
9879
+ page: pageCount,
9880
+ onPageChange: onPageChange,
9881
+ baseUrl: baseUrl
9811
9882
  }, /*#__PURE__*/React__default.createElement(Icon, {
9883
+ "aria-hidden": "true",
9812
9884
  iconName: "LastPageArrow",
9813
9885
  direction: "left"
9814
9886
  }))))));
9815
9887
  };
9816
9888
 
9817
- var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$m, _templateObject7$g;
9889
+ var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$m, _templateObject7$g;
9818
9890
  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);
9819
9891
  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"])));
9820
9892
  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"])));
9821
- 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"])));
9893
+ 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"])));
9822
9894
  var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9823
9895
  var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$m || (_templateObject6$m = /*#__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"])));
9824
9896
  var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
@@ -9878,14 +9950,14 @@ var PeopleListing = function PeopleListing(_ref) {
9878
9950
  }));
9879
9951
  };
9880
9952
 
9881
- var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z;
9953
+ var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$y;
9882
9954
  var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
9883
9955
  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) {
9884
9956
  var columnCount = _ref.columnCount;
9885
9957
  return "repeat(" + columnCount + ", 1fr)";
9886
9958
  }, devices.mobile, devices.tablet);
9887
9959
  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"])));
9888
- 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"])));
9960
+ 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"])));
9889
9961
 
9890
9962
  // Get the total character length of a property in an array of objects
9891
9963
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -10003,7 +10075,7 @@ var CreditListing = function CreditListing(_ref) {
10003
10075
  }, creditEntries);
10004
10076
  };
10005
10077
 
10006
- var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$t, _templateObject6$n, _templateObject7$h, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
10078
+ var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$n, _templateObject7$h, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
10007
10079
  var LENGTH_TEXT = 28;
10008
10080
  var LENGTH_TEXT_TABLET$1 = 12;
10009
10081
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -10022,7 +10094,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$17 ||
10022
10094
  });
10023
10095
  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"])));
10024
10096
  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"])));
10025
- 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) {
10097
+ 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) {
10026
10098
  var hasTextLinks = _ref4.hasTextLinks;
10027
10099
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
10028
10100
  }, function (_ref5) {
@@ -10052,7 +10124,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
10052
10124
  });
10053
10125
  var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
10054
10126
  var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10055
- 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"])));
10127
+ 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"])));
10056
10128
  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);
10057
10129
  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);
10058
10130
  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);
@@ -10255,7 +10327,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10255
10327
  }))));
10256
10328
  };
10257
10329
 
10258
- var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i;
10330
+ var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$o, _templateObject7$i;
10259
10331
  var LENGTH_TEXT$2 = 28;
10260
10332
  var LENGTH_TEXT_TABLET$2 = 10;
10261
10333
  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) {
@@ -10273,7 +10345,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
10273
10345
  var imageToLeft = _ref4.imageToLeft;
10274
10346
  return imageToLeft ? 'right' : 'left';
10275
10347
  }, devices.mobile);
10276
- 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);
10348
+ 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);
10277
10349
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10278
10350
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$o || (_templateObject6$o = /*#__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);
10279
10351
  var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__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) {
@@ -10709,7 +10781,7 @@ var SectionTitle = function SectionTitle(_ref) {
10709
10781
  }, description)))));
10710
10782
  };
10711
10783
 
10712
- var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10784
+ var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$p, _templateObject7$j, _templateObject8$e, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10713
10785
  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) {
10714
10786
  var theme = _ref.theme;
10715
10787
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10725,7 +10797,7 @@ var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Y || (_templateObjec
10725
10797
  return theme.colors.darkgrey;
10726
10798
  });
10727
10799
  var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
10728
- var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10800
+ var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10729
10801
  var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
10730
10802
  var theme = _ref5.theme;
10731
10803
  return {
@@ -10736,7 +10808,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
10736
10808
  })(_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"])));
10737
10809
  var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10738
10810
  var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10739
- var Options = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10811
+ var Options = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10740
10812
  var Option = /*#__PURE__*/styled__default.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10741
10813
  var theme = _ref6.theme,
10742
10814
  hover = _ref6.hover;
@@ -11090,7 +11162,7 @@ function Select(_ref3) {
11090
11162
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
11091
11163
  }
11092
11164
 
11093
- var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$D;
11165
+ var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$C;
11094
11166
  var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
11095
11167
  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) {
11096
11168
  var width = _ref.width;
@@ -11114,7 +11186,7 @@ var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templ
11114
11186
  if (darkMode) return "var(--base-color-white)";
11115
11187
  return "var(--base-color-black)";
11116
11188
  });
11117
- var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11189
+ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11118
11190
  var darkMode = _ref6.darkMode;
11119
11191
  if (darkMode) return "var(--base-color-white)";
11120
11192
  return "var(--base-color-errorstate)";
@@ -11304,11 +11376,11 @@ var Quote = function Quote(_ref) {
11304
11376
  }, attribution))));
11305
11377
  };
11306
11378
 
11307
- var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$w, _templateObject6$q;
11379
+ var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$q;
11308
11380
  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"])));
11309
11381
  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"])));
11310
11382
  var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11311
- var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11383
+ var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11312
11384
  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);
11313
11385
  var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__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);
11314
11386
 
@@ -11348,14 +11420,14 @@ var MiniCard = function MiniCard(_ref) {
11348
11420
  }, title)))));
11349
11421
  };
11350
11422
 
11351
- var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$x;
11423
+ var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$E, _templateObject5$x;
11352
11424
  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"])));
11353
11425
  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"])));
11354
11426
  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) {
11355
11427
  var isVisible = _ref.isVisible;
11356
11428
  return isVisible ? 'visible' : 'hidden';
11357
11429
  });
11358
- 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) {
11430
+ 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) {
11359
11431
  var isVisible = _ref2.isVisible;
11360
11432
  return isVisible ? 'visible' : 'hidden';
11361
11433
  });
@@ -11440,11 +11512,11 @@ var ReadMore = function ReadMore(_ref) {
11440
11512
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
11441
11513
  };
11442
11514
 
11443
- var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$y;
11515
+ var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$F, _templateObject5$y;
11444
11516
  var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11445
11517
  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);
11446
11518
  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);
11447
- 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) {
11519
+ 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) {
11448
11520
  var isActive = _ref.isActive;
11449
11521
  return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
11450
11522
  }, exports.Colors.MidGrey);
@@ -11604,14 +11676,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
11604
11676
  });
11605
11677
  };
11606
11678
 
11607
- var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$z, _templateObject6$r;
11679
+ var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$G, _templateObject5$z, _templateObject6$r;
11608
11680
  var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11609
11681
  var Sections = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11610
11682
  var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
11611
11683
  var color = _ref.color;
11612
11684
  return "var(--base-color-" + color + ")";
11613
11685
  });
11614
- 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"])));
11686
+ 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"])));
11615
11687
  var Text = /*#__PURE__*/styled__default.div(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
11616
11688
  var color = _ref2.color;
11617
11689
  return "var(--base-color-" + color + ")";
@@ -11698,28 +11770,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
11698
11770
  }, strengthLabel))));
11699
11771
  };
11700
11772
 
11701
- var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11773
+ var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$H, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$f;
11702
11774
  var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11703
11775
  var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11704
11776
  var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11705
- 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) {
11706
- return "var(--base-color-" + props.lineColor + ")";
11707
- }, function (props) {
11777
+ 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) {
11708
11778
  return "calc(100% / " + (props.columns - 1) + ")";
11709
11779
  }, devices.tablet, devices.mobile);
11710
- 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) {
11711
- return "var(--base-color-" + props.lineColor + ")";
11712
- }, function (props) {
11780
+ 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) {
11713
11781
  return "calc(100% / " + (props.columns - 1) + ")";
11714
11782
  }, devices.mobile);
11715
- var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__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"])));
11716
- var PageNumber = /*#__PURE__*/styled__default.button(_templateObject7$k || (_templateObject7$k = /*#__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) {
11717
- var active = _ref.active;
11718
- return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11719
- });
11720
- 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"])));
11721
- 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"])));
11722
- 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"])));
11783
+ var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$s || (_templateObject6$s = /*#__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);
11784
+ var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__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"])));
11785
+ 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"])));
11723
11786
 
11724
11787
  /* eslint-disable react/no-danger */
11725
11788
  var Content = function Content(_ref) {
@@ -11744,23 +11807,25 @@ var scrollTable = function scrollTable(tableRef, direction) {
11744
11807
  var Cell = function Cell(_ref) {
11745
11808
  var cell = _ref.cell,
11746
11809
  cellIndex = _ref.cellIndex,
11747
- columns = _ref.columns,
11748
- lineColor = _ref.lineColor;
11810
+ columns = _ref.columns;
11811
+ var isText = typeof cell === 'string' || typeof cell === 'number';
11749
11812
  return /*#__PURE__*/React__default.createElement(TableCell, {
11750
11813
  key: cellIndex,
11751
11814
  columns: columns,
11752
- role: "gridcell",
11753
- lineColor: lineColor
11815
+ role: "gridcell"
11816
+ }, isText ? (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11817
+ size: "large"
11754
11818
  }, /*#__PURE__*/React__default.createElement(Content, {
11755
11819
  content: cell
11756
- }));
11820
+ }))) : (/*#__PURE__*/React__default.createElement(Content, {
11821
+ content: cell
11822
+ })));
11757
11823
  };
11758
11824
 
11759
11825
  var Row = function Row(_ref) {
11760
11826
  var row = _ref.row,
11761
11827
  rowIndex = _ref.rowIndex,
11762
- columns = _ref.columns,
11763
- lineColor = _ref.lineColor;
11828
+ columns = _ref.columns;
11764
11829
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
11765
11830
  key: rowIndex
11766
11831
  }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
@@ -11768,28 +11833,61 @@ var Row = function Row(_ref) {
11768
11833
  key: index,
11769
11834
  cell: cell,
11770
11835
  cellIndex: index,
11771
- columns: columns,
11772
- lineColor: lineColor
11836
+ columns: columns
11773
11837
  });
11774
11838
  })));
11775
11839
  };
11776
11840
 
11841
+ var DataCells = function DataCells(_ref) {
11842
+ var currentRows = _ref.currentRows,
11843
+ columns = _ref.columns;
11844
+ return /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11845
+ return /*#__PURE__*/React__default.createElement(Row, {
11846
+ key: rowIndex,
11847
+ row: row,
11848
+ rowIndex: rowIndex,
11849
+ columns: columns
11850
+ });
11851
+ }));
11852
+ };
11853
+
11854
+ var HeaderCells = function HeaderCells(_ref) {
11855
+ var headings = _ref.headings,
11856
+ columns = _ref.columns;
11857
+ return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
11858
+ role: "row"
11859
+ }, headings == null ? void 0 : headings.map(function (heading, index) {
11860
+ return /*#__PURE__*/React__default.createElement(TableHeader, {
11861
+ key: index,
11862
+ role: "columnheader",
11863
+ scope: "col",
11864
+ columns: columns
11865
+ }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
11866
+ size: "small"
11867
+ }, /*#__PURE__*/React__default.createElement(Content, {
11868
+ content: heading
11869
+ })));
11870
+ })));
11871
+ };
11872
+
11777
11873
  /* eslint-disable react/jsx-one-expression-per-line */
11778
11874
  var Table = function Table(_ref) {
11779
11875
  var columns = _ref.columns,
11780
11876
  headings = _ref.headings,
11781
11877
  children = _ref.children,
11782
- lineColors = _ref.lineColors,
11783
11878
  rowsPerPage = _ref.rowsPerPage,
11784
11879
  pagination = _ref.pagination,
11785
- description = _ref.description;
11880
+ description = _ref.description,
11881
+ className = _ref.className;
11786
11882
  var _useState = React.useState(0),
11787
11883
  currentPage = _useState[0],
11788
11884
  setCurrentPage = _useState[1];
11789
11885
  var _useState2 = React.useState(false),
11790
11886
  showScrollButtons = _useState2[0],
11791
11887
  setShowScrollButtons = _useState2[1];
11792
- var lineColor = lineColors != null ? lineColors : exports.Colors.Cinema;
11888
+ var handlePageChange = function handlePageChange(page) {
11889
+ setCurrentPage(page - 1);
11890
+ };
11793
11891
  var tableRef = React.useRef(null);
11794
11892
  React.useLayoutEffect(function () {
11795
11893
  var horizontalScroll = function horizontalScroll() {
@@ -11803,14 +11901,8 @@ var Table = function Table(_ref) {
11803
11901
  return window.removeEventListener('resize', horizontalScroll);
11804
11902
  };
11805
11903
  }, []);
11806
- var totalRows = Array.isArray(children) ? children.length + 1 : 1;
11904
+ var totalRows = Array.isArray(children) ? children.length : 1;
11807
11905
  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
11808
- var pageNumbers = Array.from({
11809
- length: totalPages
11810
- }, function (_, i) {
11811
- return i;
11812
- });
11813
- var reducedPageNumbers = reducePages(pageNumbers, currentPage);
11814
11906
  var currentRows;
11815
11907
  if (pagination) {
11816
11908
  if (Array.isArray(children)) {
@@ -11819,15 +11911,20 @@ var Table = function Table(_ref) {
11819
11911
  currentRows = [];
11820
11912
  }
11821
11913
  } else {
11822
- currentRows = children;
11914
+ currentRows = Array.isArray(children) ? children : [];
11823
11915
  }
11916
+ var headingsContent = Array.isArray(headings) ? headings.map(function (h) {
11917
+ return h;
11918
+ }) : [];
11824
11919
  var visibleRows;
11825
11920
  if (pagination) {
11826
11921
  visibleRows = Array.isArray(currentRows) ? currentRows.length + 1 : 0;
11827
11922
  } else {
11828
11923
  visibleRows = totalRows;
11829
11924
  }
11830
- return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11925
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, {
11926
+ className: className
11927
+ }, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11831
11928
  onClickPrev: function onClickPrev() {
11832
11929
  return scrollTable(tableRef, 'left');
11833
11930
  },
@@ -11842,67 +11939,22 @@ var Table = function Table(_ref) {
11842
11939
  "aria-colcount": columns
11843
11940
  }, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11844
11941
  id: "table-description"
11845
- }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, ' ', /*#__PURE__*/React__default.createElement("tr", {
11846
- role: "columnheader"
11847
- }, headings == null ? void 0 : headings.map(function (heading, index) {
11848
- return /*#__PURE__*/React__default.createElement(TableHeader, {
11849
- key: index,
11850
- role: "columnheader",
11851
- scope: "col",
11852
- columns: columns,
11853
- lineColor: lineColor
11854
- }, /*#__PURE__*/React__default.createElement(Content, {
11855
- content: heading
11856
- }));
11857
- }))), /*#__PURE__*/React__default.createElement("tbody", null, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11858
- return /*#__PURE__*/React__default.createElement(Row, {
11859
- key: rowIndex,
11860
- row: row,
11861
- rowIndex: rowIndex,
11862
- columns: columns,
11863
- lineColor: lineColor
11864
- });
11942
+ }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(HeaderCells, {
11943
+ headings: headingsContent,
11944
+ columns: columns
11945
+ }), /*#__PURE__*/React__default.createElement(DataCells, {
11946
+ currentRows: currentRows,
11947
+ columns: columns
11865
11948
  }))), pagination && totalPages > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11866
11949
  id: "pagination-description"
11867
- }, "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, {
11868
- key: "previous-page",
11869
- onClick: function onClick() {
11870
- return setCurrentPage(currentPage - 1);
11871
- },
11872
- tabIndex: 0,
11873
- "aria-label": "Previous page"
11874
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11875
- iconName: "DropdownArrow",
11876
- direction: "down"
11877
- }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11878
- key: "more-before"
11879
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), reducedPageNumbers.map(function (number) {
11880
- return /*#__PURE__*/React__default.createElement("li", {
11881
- key: number
11882
- }, /*#__PURE__*/React__default.createElement(PageNumber, {
11883
- key: number,
11884
- onClick: function onClick() {
11885
- return setCurrentPage(number);
11886
- },
11887
- tabIndex: 0,
11888
- active: "" + (number === currentPage)
11889
- }, number + 1));
11890
- }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11891
- key: "more-after"
11892
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11893
- key: "next-page",
11894
- onClick: function onClick() {
11895
- return setCurrentPage(currentPage + 1);
11896
- },
11897
- tabIndex: 0,
11898
- "aria-label": "Next page"
11899
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11900
- iconName: "DropdownArrow",
11901
- direction: "up"
11902
- }))))))))));
11950
+ }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(PaginationWrapper, {
11951
+ currentPage: currentPage + 1,
11952
+ pageCount: totalPages,
11953
+ onPageChange: handlePageChange
11954
+ }))));
11903
11955
  };
11904
11956
 
11905
- var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$t, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11957
+ var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$I, _templateObject5$B, _templateObject6$t, _templateObject7$l, _templateObject8$g, _templateObject9$9, _templateObject0$9, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11906
11958
  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) {
11907
11959
  var theme = _ref.theme;
11908
11960
  return "var(--color-" + theme + ")";
@@ -11912,13 +11964,13 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
11912
11964
  });
11913
11965
  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);
11914
11966
  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);
11915
- 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"])));
11967
+ 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"])));
11916
11968
  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);
11917
11969
  var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__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);
11918
11970
  var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11919
- 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);
11920
- 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);
11921
- 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);
11971
+ 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);
11972
+ 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);
11973
+ 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);
11922
11974
  var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11923
11975
  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"])));
11924
11976
  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) {
@@ -12326,10 +12378,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12326
12378
  }))))));
12327
12379
  };
12328
12380
 
12329
- var _templateObject$1o, _templateObject3$U, _templateObject4$K;
12381
+ var _templateObject$1o, _templateObject3$U, _templateObject4$J;
12330
12382
  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);
12331
12383
  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);
12332
- 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"])));
12384
+ 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"])));
12333
12385
 
12334
12386
  var AnchorBar = function AnchorBar(_ref) {
12335
12387
  var cta = _ref.cta,