@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.esm.js CHANGED
@@ -9758,21 +9758,76 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9758
9758
  }), linkText))))));
9759
9759
  };
9760
9760
 
9761
- var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
9762
- // Keep MorePages for Table component until restyle
9763
- var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9764
- var PaginationLink = /*#__PURE__*/styled.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n color: inherit;\n"])));
9765
- var PageNumberWrapper = /*#__PURE__*/styled.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"])));
9766
- var LastPageItem = /*#__PURE__*/styled.li(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9767
- var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9768
- var TextLinkPagination = /*#__PURE__*/styled(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) {
9761
+ var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$l, _templateObject7$f, _templateObject8$c;
9762
+ var linkButtonStyles = /*#__PURE__*/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"])));
9763
+ var PageNav = /*#__PURE__*/styled.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9764
+ var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9765
+ var PageNumberWrapper = /*#__PURE__*/styled.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"])));
9766
+ var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9767
+ var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9768
+ var TextLinkPagination = /*#__PURE__*/styled(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) {
9769
9769
  var active = _ref.active;
9770
9770
  return active ? "var(--color-primary-red)" : 'inherit';
9771
9771
  }, function (_ref2) {
9772
9772
  var active = _ref2.active;
9773
9773
  return "1px solid " + (active ? 'var(--color-primary-red)' : 'transparent');
9774
9774
  });
9775
- var PageNav = /*#__PURE__*/styled.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"])));
9775
+
9776
+ var NavButtonOrLink = function NavButtonOrLink(_ref) {
9777
+ var page = _ref.page,
9778
+ children = _ref.children,
9779
+ onPageChange = _ref.onPageChange,
9780
+ baseUrl = _ref.baseUrl,
9781
+ keyProp = _ref.keyProp,
9782
+ testId = _ref.testId,
9783
+ ariaLabel = _ref.ariaLabel;
9784
+ if (onPageChange) {
9785
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9786
+ "aria-label": ariaLabel,
9787
+ as: "button",
9788
+ type: "button",
9789
+ onClick: function onClick() {
9790
+ return onPageChange(page);
9791
+ },
9792
+ key: keyProp,
9793
+ "data-testid": testId
9794
+ }, children);
9795
+ }
9796
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9797
+ "aria-label": ariaLabel,
9798
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9799
+ key: keyProp,
9800
+ "data-testid": testId
9801
+ }, children);
9802
+ };
9803
+
9804
+ var PageLinkOrButton = function PageLinkOrButton(_ref) {
9805
+ var page = _ref.page,
9806
+ children = _ref.children,
9807
+ onPageChange = _ref.onPageChange,
9808
+ baseUrl = _ref.baseUrl,
9809
+ keyProp = _ref.keyProp,
9810
+ testId = _ref.testId,
9811
+ ariaLabel = _ref.ariaLabel;
9812
+ if (onPageChange) {
9813
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9814
+ "aria-label": ariaLabel,
9815
+ as: "button",
9816
+ type: "button",
9817
+ onClick: function onClick() {
9818
+ return onPageChange(page);
9819
+ },
9820
+ key: keyProp,
9821
+ "data-testid": testId
9822
+ }, children);
9823
+ }
9824
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9825
+ "aria-label": ariaLabel,
9826
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9827
+ key: keyProp,
9828
+ "data-testid": testId
9829
+ }, children);
9830
+ };
9776
9831
 
9777
9832
  var reducePages = function reducePages(pages, currentPage) {
9778
9833
  // If there are less than 6 pages, return all pages
@@ -9794,33 +9849,42 @@ var Pagination = function Pagination(_ref) {
9794
9849
  var pageCount = _ref.pageCount,
9795
9850
  currentPage = _ref.currentPage,
9796
9851
  baseUrl = _ref.baseUrl,
9797
- className = _ref.className;
9798
- // Array of page numbers starting at 1
9852
+ className = _ref.className,
9853
+ onPageChange = _ref.onPageChange;
9799
9854
  var pageNumbers = Array.from(Array(pageCount + 1).keys()).slice(1);
9800
9855
  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
9801
9856
  return /*#__PURE__*/React__default.createElement(PageNumberWrapper, {
9802
9857
  className: className
9803
- },
9804
- // {/* Left arrow only appears after page 1 */
9805
- currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNav, {
9806
- href: baseUrl + "1"
9858
+ }, currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9859
+ ariaLabel: "Backward arrow, skip to first page",
9860
+ page: 1,
9861
+ onPageChange: onPageChange,
9862
+ baseUrl: baseUrl
9807
9863
  }, /*#__PURE__*/React__default.createElement(Icon, {
9864
+ "aria-hidden": "true",
9808
9865
  iconName: "LastPageArrow",
9809
9866
  direction: "right"
9810
9867
  }))), /*#__PURE__*/React__default.createElement(PreviousPageItem, {
9811
9868
  key: "previous-page",
9812
9869
  "data-testid": "left-arrow"
9813
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9814
- href: "" + baseUrl + (currentPage - 1)
9870
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9871
+ ariaLabel: "Backward arrow, skip one page back",
9872
+ page: currentPage - 1,
9873
+ onPageChange: onPageChange,
9874
+ baseUrl: baseUrl
9815
9875
  }, /*#__PURE__*/React__default.createElement(Icon, {
9876
+ "aria-hidden": "true",
9816
9877
  iconName: "ArrowPagination",
9817
9878
  direction: "right"
9818
9879
  }))))), reducedPageNumbers.map(function (page) {
9819
9880
  return /*#__PURE__*/React__default.createElement("li", {
9820
9881
  key: page
9821
- }, /*#__PURE__*/React__default.createElement(PaginationLink, {
9822
- href: "" + baseUrl + page,
9823
- "data-testid": "page-number"
9882
+ }, /*#__PURE__*/React__default.createElement(PageLinkOrButton, {
9883
+ ariaLabel: "Page " + page + ", " + (page === currentPage ? 'it is a current page' : "skip to page " + page),
9884
+ page: page,
9885
+ onPageChange: onPageChange,
9886
+ baseUrl: baseUrl,
9887
+ testId: "page-number"
9824
9888
  }, /*#__PURE__*/React__default.createElement(TextLinkPagination, {
9825
9889
  size: "large",
9826
9890
  active: page === currentPage
@@ -9828,24 +9892,32 @@ var Pagination = function Pagination(_ref) {
9828
9892
  }), currentPage < pageCount && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
9829
9893
  key: "next-page",
9830
9894
  "data-testid": "right-arrow"
9831
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9832
- href: "" + baseUrl + (currentPage + 1)
9895
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9896
+ ariaLabel: "Forward arrow, skip one page forward",
9897
+ page: currentPage + 1,
9898
+ onPageChange: onPageChange,
9899
+ baseUrl: baseUrl
9833
9900
  }, /*#__PURE__*/React__default.createElement(Icon, {
9901
+ "aria-hidden": "true",
9834
9902
  iconName: "ArrowPagination",
9835
9903
  direction: "left"
9836
- }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(PageNav, {
9837
- href: "" + baseUrl + pageCount
9904
+ }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9905
+ ariaLabel: "Forward arrow, skip to last page",
9906
+ page: pageCount,
9907
+ onPageChange: onPageChange,
9908
+ baseUrl: baseUrl
9838
9909
  }, /*#__PURE__*/React__default.createElement(Icon, {
9910
+ "aria-hidden": "true",
9839
9911
  iconName: "LastPageArrow",
9840
9912
  direction: "left"
9841
9913
  }))))));
9842
9914
  };
9843
9915
 
9844
- var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$m, _templateObject7$g;
9916
+ var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$m, _templateObject7$g;
9845
9917
  var PeopleListingGrid = /*#__PURE__*/styled(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);
9846
9918
  var PersonWrapper = /*#__PURE__*/styled.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"])));
9847
9919
  var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
9848
- var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9920
+ var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9849
9921
  var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9850
9922
  var PersonLink = /*#__PURE__*/styled.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"])));
9851
9923
  var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
@@ -9905,14 +9977,14 @@ var PeopleListing = function PeopleListing(_ref) {
9905
9977
  }));
9906
9978
  };
9907
9979
 
9908
- var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z;
9980
+ var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$y;
9909
9981
  var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
9910
9982
  var CreditListingWrapper = /*#__PURE__*/styled(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) {
9911
9983
  var columnCount = _ref.columnCount;
9912
9984
  return "repeat(" + columnCount + ", 1fr)";
9913
9985
  }, devices.mobile, devices.tablet);
9914
9986
  var DescriptionWrapper = /*#__PURE__*/styled.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"])));
9915
- var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
9987
+ var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
9916
9988
 
9917
9989
  // Get the total character length of a property in an array of objects
9918
9990
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -10030,7 +10102,7 @@ var CreditListing = function CreditListing(_ref) {
10030
10102
  }, creditEntries);
10031
10103
  };
10032
10104
 
10033
- 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;
10105
+ 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;
10034
10106
  var LENGTH_TEXT = 28;
10035
10107
  var LENGTH_TEXT_TABLET$1 = 12;
10036
10108
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -10049,7 +10121,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templa
10049
10121
  });
10050
10122
  var PromoWithTagsSubtitle = /*#__PURE__*/styled.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"])));
10051
10123
  var PromoWithTagsText = /*#__PURE__*/styled.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"])));
10052
- var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
10124
+ var ButtonsContainer$2 = /*#__PURE__*/styled.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) {
10053
10125
  var hasTextLinks = _ref4.hasTextLinks;
10054
10126
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
10055
10127
  }, function (_ref5) {
@@ -10079,7 +10151,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$t || (_te
10079
10151
  });
10080
10152
  var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
10081
10153
  var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10082
- var TextLinkWrapper$3 = /*#__PURE__*/styled.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"])));
10154
+ var TextLinkWrapper$3 = /*#__PURE__*/styled.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"])));
10083
10155
  var ExtraContentWrapper = /*#__PURE__*/styled.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);
10084
10156
  var IconWrapper$2 = /*#__PURE__*/styled.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);
10085
10157
  var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
@@ -10282,7 +10354,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10282
10354
  }))));
10283
10355
  };
10284
10356
 
10285
- var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i;
10357
+ var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$o, _templateObject7$i;
10286
10358
  var LENGTH_TEXT$2 = 28;
10287
10359
  var LENGTH_TEXT_TABLET$2 = 10;
10288
10360
  var PromoWithTitleGrid = /*#__PURE__*/styled(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) {
@@ -10300,7 +10372,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$I ||
10300
10372
  var imageToLeft = _ref4.imageToLeft;
10301
10373
  return imageToLeft ? 'right' : 'left';
10302
10374
  }, devices.mobile);
10303
- var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10375
+ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10304
10376
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10305
10377
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(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);
10306
10378
  var ButtonsContainer$3 = /*#__PURE__*/styled.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) {
@@ -10736,7 +10808,7 @@ var SectionTitle = function SectionTitle(_ref) {
10736
10808
  }, description)))));
10737
10809
  };
10738
10810
 
10739
- var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10811
+ var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$p, _templateObject7$j, _templateObject8$e, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10740
10812
  var stateStyles = /*#__PURE__*/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) {
10741
10813
  var theme = _ref.theme;
10742
10814
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10752,7 +10824,7 @@ var borderStyles = /*#__PURE__*/css(_templateObject2$Y || (_templateObject2$Y =
10752
10824
  return theme.colors.darkgrey;
10753
10825
  });
10754
10826
  var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
10755
- var listItemStyles = /*#__PURE__*/css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10827
+ var listItemStyles = /*#__PURE__*/css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10756
10828
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10757
10829
  var theme = _ref5.theme;
10758
10830
  return {
@@ -10763,7 +10835,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10763
10835
  })(_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"])));
10764
10836
  var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10765
10837
  var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10766
- var Options = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10838
+ var Options = /*#__PURE__*/styled.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10767
10839
  var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10768
10840
  var theme = _ref6.theme,
10769
10841
  hover = _ref6.hover;
@@ -11117,7 +11189,7 @@ function Select(_ref3) {
11117
11189
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
11118
11190
  }
11119
11191
 
11120
- var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$D;
11192
+ var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$C;
11121
11193
  var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
11122
11194
  var SelectWrapper$1 = /*#__PURE__*/styled.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) {
11123
11195
  var width = _ref.width;
@@ -11141,7 +11213,7 @@ var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject
11141
11213
  if (darkMode) return "var(--base-color-white)";
11142
11214
  return "var(--base-color-black)";
11143
11215
  });
11144
- var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11216
+ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11145
11217
  var darkMode = _ref6.darkMode;
11146
11218
  if (darkMode) return "var(--base-color-white)";
11147
11219
  return "var(--base-color-errorstate)";
@@ -11331,11 +11403,11 @@ var Quote = function Quote(_ref) {
11331
11403
  }, attribution))));
11332
11404
  };
11333
11405
 
11334
- var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$w, _templateObject6$q;
11406
+ var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$q;
11335
11407
  var CardContainer$1 = /*#__PURE__*/styled.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"])));
11336
11408
  var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11337
11409
  var StyledImage = /*#__PURE__*/styled.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11338
- var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11410
+ var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11339
11411
  var IconWrapper$3 = /*#__PURE__*/styled.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);
11340
11412
  var TitleWrapper$4 = /*#__PURE__*/styled.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);
11341
11413
 
@@ -11375,14 +11447,14 @@ var MiniCard = function MiniCard(_ref) {
11375
11447
  }, title)))));
11376
11448
  };
11377
11449
 
11378
- var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$x;
11450
+ var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$E, _templateObject5$x;
11379
11451
  var ReadMoreContainer = /*#__PURE__*/styled.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"])));
11380
11452
  var LinkContainer = /*#__PURE__*/styled.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"])));
11381
11453
  var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
11382
11454
  var isVisible = _ref.isVisible;
11383
11455
  return isVisible ? 'visible' : 'hidden';
11384
11456
  });
11385
- var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11457
+ var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11386
11458
  var isVisible = _ref2.isVisible;
11387
11459
  return isVisible ? 'visible' : 'hidden';
11388
11460
  });
@@ -11467,11 +11539,11 @@ var ReadMore = function ReadMore(_ref) {
11467
11539
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
11468
11540
  };
11469
11541
 
11470
- var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$y;
11542
+ var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$F, _templateObject5$y;
11471
11543
  var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11472
11544
  var MenuList = /*#__PURE__*/styled.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"])), Colors.LightGrey);
11473
11545
  var MobileButton = /*#__PURE__*/styled.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"])), Colors.Black, Colors.White, Colors.DarkGrey);
11474
- var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref) {
11546
+ var MenuItem$1 = /*#__PURE__*/styled.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"])), Colors.Black, function (_ref) {
11475
11547
  var isActive = _ref.isActive;
11476
11548
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
11477
11549
  }, Colors.MidGrey);
@@ -11631,14 +11703,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
11631
11703
  });
11632
11704
  };
11633
11705
 
11634
- var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$z, _templateObject6$r;
11706
+ var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$G, _templateObject5$z, _templateObject6$r;
11635
11707
  var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11636
11708
  var Sections = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11637
11709
  var Section = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
11638
11710
  var color = _ref.color;
11639
11711
  return "var(--base-color-" + color + ")";
11640
11712
  });
11641
- var BottomLine = /*#__PURE__*/styled.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"])));
11713
+ var BottomLine = /*#__PURE__*/styled.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"])));
11642
11714
  var Text = /*#__PURE__*/styled.div(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
11643
11715
  var color = _ref2.color;
11644
11716
  return "var(--base-color-" + color + ")";
@@ -11725,28 +11797,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
11725
11797
  }, strengthLabel))));
11726
11798
  };
11727
11799
 
11728
- var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11800
+ var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$H, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$f;
11729
11801
  var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11730
11802
  var Container$6 = /*#__PURE__*/styled.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11731
11803
  var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11732
- var TableHeader = /*#__PURE__*/styled.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) {
11733
- return "var(--base-color-" + props.lineColor + ")";
11734
- }, function (props) {
11804
+ var TableHeader = /*#__PURE__*/styled.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) {
11735
11805
  return "calc(100% / " + (props.columns - 1) + ")";
11736
11806
  }, devices.tablet, devices.mobile);
11737
- var TableCell = /*#__PURE__*/styled.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) {
11738
- return "var(--base-color-" + props.lineColor + ")";
11739
- }, function (props) {
11807
+ var TableCell = /*#__PURE__*/styled.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) {
11740
11808
  return "calc(100% / " + (props.columns - 1) + ")";
11741
11809
  }, devices.mobile);
11742
- var Pagination$1 = /*#__PURE__*/styled.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"])));
11743
- var PageNumber = /*#__PURE__*/styled.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) {
11744
- var active = _ref.active;
11745
- return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11746
- });
11747
- var Next = /*#__PURE__*/styled.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"])));
11748
- var ScrollButtons = /*#__PURE__*/styled.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"])));
11749
- var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11810
+ var PaginationWrapper = /*#__PURE__*/styled(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);
11811
+ var ScrollButtons = /*#__PURE__*/styled.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"])));
11812
+ var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11750
11813
 
11751
11814
  /* eslint-disable react/no-danger */
11752
11815
  var Content = function Content(_ref) {
@@ -11771,23 +11834,25 @@ var scrollTable = function scrollTable(tableRef, direction) {
11771
11834
  var Cell = function Cell(_ref) {
11772
11835
  var cell = _ref.cell,
11773
11836
  cellIndex = _ref.cellIndex,
11774
- columns = _ref.columns,
11775
- lineColor = _ref.lineColor;
11837
+ columns = _ref.columns;
11838
+ var isText = typeof cell === 'string' || typeof cell === 'number';
11776
11839
  return /*#__PURE__*/React__default.createElement(TableCell, {
11777
11840
  key: cellIndex,
11778
11841
  columns: columns,
11779
- role: "gridcell",
11780
- lineColor: lineColor
11842
+ role: "gridcell"
11843
+ }, isText ? (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11844
+ size: "large"
11781
11845
  }, /*#__PURE__*/React__default.createElement(Content, {
11782
11846
  content: cell
11783
- }));
11847
+ }))) : (/*#__PURE__*/React__default.createElement(Content, {
11848
+ content: cell
11849
+ })));
11784
11850
  };
11785
11851
 
11786
11852
  var Row = function Row(_ref) {
11787
11853
  var row = _ref.row,
11788
11854
  rowIndex = _ref.rowIndex,
11789
- columns = _ref.columns,
11790
- lineColor = _ref.lineColor;
11855
+ columns = _ref.columns;
11791
11856
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
11792
11857
  key: rowIndex
11793
11858
  }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
@@ -11795,28 +11860,61 @@ var Row = function Row(_ref) {
11795
11860
  key: index,
11796
11861
  cell: cell,
11797
11862
  cellIndex: index,
11798
- columns: columns,
11799
- lineColor: lineColor
11863
+ columns: columns
11800
11864
  });
11801
11865
  })));
11802
11866
  };
11803
11867
 
11868
+ var DataCells = function DataCells(_ref) {
11869
+ var currentRows = _ref.currentRows,
11870
+ columns = _ref.columns;
11871
+ return /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11872
+ return /*#__PURE__*/React__default.createElement(Row, {
11873
+ key: rowIndex,
11874
+ row: row,
11875
+ rowIndex: rowIndex,
11876
+ columns: columns
11877
+ });
11878
+ }));
11879
+ };
11880
+
11881
+ var HeaderCells = function HeaderCells(_ref) {
11882
+ var headings = _ref.headings,
11883
+ columns = _ref.columns;
11884
+ return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
11885
+ role: "row"
11886
+ }, headings == null ? void 0 : headings.map(function (heading, index) {
11887
+ return /*#__PURE__*/React__default.createElement(TableHeader, {
11888
+ key: index,
11889
+ role: "columnheader",
11890
+ scope: "col",
11891
+ columns: columns
11892
+ }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
11893
+ size: "small"
11894
+ }, /*#__PURE__*/React__default.createElement(Content, {
11895
+ content: heading
11896
+ })));
11897
+ })));
11898
+ };
11899
+
11804
11900
  /* eslint-disable react/jsx-one-expression-per-line */
11805
11901
  var Table = function Table(_ref) {
11806
11902
  var columns = _ref.columns,
11807
11903
  headings = _ref.headings,
11808
11904
  children = _ref.children,
11809
- lineColors = _ref.lineColors,
11810
11905
  rowsPerPage = _ref.rowsPerPage,
11811
11906
  pagination = _ref.pagination,
11812
- description = _ref.description;
11907
+ description = _ref.description,
11908
+ className = _ref.className;
11813
11909
  var _useState = useState(0),
11814
11910
  currentPage = _useState[0],
11815
11911
  setCurrentPage = _useState[1];
11816
11912
  var _useState2 = useState(false),
11817
11913
  showScrollButtons = _useState2[0],
11818
11914
  setShowScrollButtons = _useState2[1];
11819
- var lineColor = lineColors != null ? lineColors : Colors.Cinema;
11915
+ var handlePageChange = function handlePageChange(page) {
11916
+ setCurrentPage(page - 1);
11917
+ };
11820
11918
  var tableRef = useRef(null);
11821
11919
  useLayoutEffect(function () {
11822
11920
  var horizontalScroll = function horizontalScroll() {
@@ -11830,14 +11928,8 @@ var Table = function Table(_ref) {
11830
11928
  return window.removeEventListener('resize', horizontalScroll);
11831
11929
  };
11832
11930
  }, []);
11833
- var totalRows = Array.isArray(children) ? children.length + 1 : 1;
11931
+ var totalRows = Array.isArray(children) ? children.length : 1;
11834
11932
  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
11835
- var pageNumbers = Array.from({
11836
- length: totalPages
11837
- }, function (_, i) {
11838
- return i;
11839
- });
11840
- var reducedPageNumbers = reducePages(pageNumbers, currentPage);
11841
11933
  var currentRows;
11842
11934
  if (pagination) {
11843
11935
  if (Array.isArray(children)) {
@@ -11846,15 +11938,20 @@ var Table = function Table(_ref) {
11846
11938
  currentRows = [];
11847
11939
  }
11848
11940
  } else {
11849
- currentRows = children;
11941
+ currentRows = Array.isArray(children) ? children : [];
11850
11942
  }
11943
+ var headingsContent = Array.isArray(headings) ? headings.map(function (h) {
11944
+ return h;
11945
+ }) : [];
11851
11946
  var visibleRows;
11852
11947
  if (pagination) {
11853
11948
  visibleRows = Array.isArray(currentRows) ? currentRows.length + 1 : 0;
11854
11949
  } else {
11855
11950
  visibleRows = totalRows;
11856
11951
  }
11857
- return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11952
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, {
11953
+ className: className
11954
+ }, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11858
11955
  onClickPrev: function onClickPrev() {
11859
11956
  return scrollTable(tableRef, 'left');
11860
11957
  },
@@ -11869,67 +11966,22 @@ var Table = function Table(_ref) {
11869
11966
  "aria-colcount": columns
11870
11967
  }, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11871
11968
  id: "table-description"
11872
- }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, ' ', /*#__PURE__*/React__default.createElement("tr", {
11873
- role: "columnheader"
11874
- }, headings == null ? void 0 : headings.map(function (heading, index) {
11875
- return /*#__PURE__*/React__default.createElement(TableHeader, {
11876
- key: index,
11877
- role: "columnheader",
11878
- scope: "col",
11879
- columns: columns,
11880
- lineColor: lineColor
11881
- }, /*#__PURE__*/React__default.createElement(Content, {
11882
- content: heading
11883
- }));
11884
- }))), /*#__PURE__*/React__default.createElement("tbody", null, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11885
- return /*#__PURE__*/React__default.createElement(Row, {
11886
- key: rowIndex,
11887
- row: row,
11888
- rowIndex: rowIndex,
11889
- columns: columns,
11890
- lineColor: lineColor
11891
- });
11969
+ }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(HeaderCells, {
11970
+ headings: headingsContent,
11971
+ columns: columns
11972
+ }), /*#__PURE__*/React__default.createElement(DataCells, {
11973
+ currentRows: currentRows,
11974
+ columns: columns
11892
11975
  }))), pagination && totalPages > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11893
11976
  id: "pagination-description"
11894
- }, "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, {
11895
- key: "previous-page",
11896
- onClick: function onClick() {
11897
- return setCurrentPage(currentPage - 1);
11898
- },
11899
- tabIndex: 0,
11900
- "aria-label": "Previous page"
11901
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11902
- iconName: "DropdownArrow",
11903
- direction: "down"
11904
- }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11905
- key: "more-before"
11906
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), reducedPageNumbers.map(function (number) {
11907
- return /*#__PURE__*/React__default.createElement("li", {
11908
- key: number
11909
- }, /*#__PURE__*/React__default.createElement(PageNumber, {
11910
- key: number,
11911
- onClick: function onClick() {
11912
- return setCurrentPage(number);
11913
- },
11914
- tabIndex: 0,
11915
- active: "" + (number === currentPage)
11916
- }, number + 1));
11917
- }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11918
- key: "more-after"
11919
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11920
- key: "next-page",
11921
- onClick: function onClick() {
11922
- return setCurrentPage(currentPage + 1);
11923
- },
11924
- tabIndex: 0,
11925
- "aria-label": "Next page"
11926
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11927
- iconName: "DropdownArrow",
11928
- direction: "up"
11929
- }))))))))));
11977
+ }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(PaginationWrapper, {
11978
+ currentPage: currentPage + 1,
11979
+ pageCount: totalPages,
11980
+ onPageChange: handlePageChange
11981
+ }))));
11930
11982
  };
11931
11983
 
11932
- 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;
11984
+ 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;
11933
11985
  var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
11934
11986
  var theme = _ref.theme;
11935
11987
  return "var(--color-" + theme + ")";
@@ -11939,13 +11991,13 @@ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObjec
11939
11991
  });
11940
11992
  var SignUpFormWrapper = /*#__PURE__*/styled(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);
11941
11993
  var SignUpTitleWrapper = /*#__PURE__*/styled('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);
11942
- var Error$1 = /*#__PURE__*/styled.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"])));
11994
+ var Error$1 = /*#__PURE__*/styled.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"])));
11943
11995
  var Form = /*#__PURE__*/styled.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);
11944
11996
  var FormFooterWrapper = /*#__PURE__*/styled.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);
11945
11997
  var ServerError = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11946
- var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11947
- var ButtonWrapper$3 = /*#__PURE__*/styled.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);
11948
- var FieldsWrapper = /*#__PURE__*/styled.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);
11998
+ var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11999
+ var ButtonWrapper$3 = /*#__PURE__*/styled.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);
12000
+ var FieldsWrapper = /*#__PURE__*/styled.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);
11949
12001
  var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11950
12002
  var DropdownAreaWrapper = /*#__PURE__*/styled.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"])));
11951
12003
  var DropdownWrapper = /*#__PURE__*/styled.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) {
@@ -12353,10 +12405,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12353
12405
  }))))));
12354
12406
  };
12355
12407
 
12356
- var _templateObject$1o, _templateObject3$U, _templateObject4$K;
12408
+ var _templateObject$1o, _templateObject3$U, _templateObject4$J;
12357
12409
  var AnchorBarContainer = /*#__PURE__*/styled(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);
12358
12410
  var CloseButtonWrapper = /*#__PURE__*/styled.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);
12359
- var ContentWrapper$3 = /*#__PURE__*/styled.a(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
12411
+ var ContentWrapper$3 = /*#__PURE__*/styled.a(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
12360
12412
 
12361
12413
  var AnchorBar = function AnchorBar(_ref) {
12362
12414
  var cta = _ref.cta,