@royaloperahouse/harmonic 0.9.2-a → 0.9.3-a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
  2. package/dist/components/molecules/Information/Information.style.d.ts +1 -1
  3. package/dist/components/molecules/Pagination/Pagination.d.ts +10 -3
  4. package/dist/components/molecules/Pagination/Pagination.style.d.ts +3 -3
  5. package/dist/components/molecules/Pagination/components/NavButtonOrLink.d.ts +4 -0
  6. package/dist/components/molecules/Pagination/components/PageLinkOrButton.d.ts +4 -0
  7. package/dist/components/molecules/Pagination/components/index.d.ts +2 -0
  8. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +1 -1
  9. package/dist/components/molecules/Table/Table.style.d.ts +1 -8
  10. package/dist/components/molecules/Table/components/DataCells.d.ts +7 -0
  11. package/dist/components/molecules/Table/components/HeaderCells.d.ts +7 -0
  12. package/dist/harmonic.cjs.development.js +197 -145
  13. package/dist/harmonic.cjs.development.js.map +1 -1
  14. package/dist/harmonic.cjs.production.min.js +1 -1
  15. package/dist/harmonic.cjs.production.min.js.map +1 -1
  16. package/dist/harmonic.esm.js +197 -145
  17. package/dist/harmonic.esm.js.map +1 -1
  18. package/dist/types/pagination.d.ts +9 -0
  19. package/dist/types/tableTypes.d.ts +8 -25
  20. package/package.json +1 -1
package/dist/harmonic.esm.js CHANGED
@@ -9753,21 +9753,76 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9753
9753
  }), linkText))))));
9754
9754
  };
9755
9755
 
9756
- var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x, _templateObject5$r, _templateObject6$m, _templateObject7$g;
9757
- // Keep MorePages for Table component until restyle
9758
- var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9759
- var PaginationLink = /*#__PURE__*/styled.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n color: inherit;\n"])));
9760
- 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"])));
9761
- var LastPageItem = /*#__PURE__*/styled.li(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9762
- var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9763
- var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
9756
+ var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$m, _templateObject7$g, _templateObject8$c;
9757
+ 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 svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover,\n &:focus {\n outline: none;\n }\n"])));
9758
+ var PageNav = /*#__PURE__*/styled.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9759
+ var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9760
+ 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 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"])));
9761
+ var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9762
+ var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9763
+ 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) {
9764
9764
  var active = _ref.active;
9765
9765
  return active ? "var(--color-primary-red)" : 'inherit';
9766
9766
  }, function (_ref2) {
9767
9767
  var active = _ref2.active;
9768
9768
  return "1px solid " + (active ? 'var(--color-primary-red)' : 'transparent');
9769
9769
  });
9770
- var PageNav = /*#__PURE__*/styled.a(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])));
9770
+
9771
+ var NavButtonOrLink = function NavButtonOrLink(_ref) {
9772
+ var page = _ref.page,
9773
+ children = _ref.children,
9774
+ onPageChange = _ref.onPageChange,
9775
+ baseUrl = _ref.baseUrl,
9776
+ keyProp = _ref.keyProp,
9777
+ testId = _ref.testId,
9778
+ ariaLabel = _ref.ariaLabel;
9779
+ if (onPageChange) {
9780
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9781
+ "aria-label": ariaLabel,
9782
+ as: "button",
9783
+ type: "button",
9784
+ onClick: function onClick() {
9785
+ return onPageChange(page);
9786
+ },
9787
+ key: keyProp,
9788
+ "data-testid": testId
9789
+ }, children);
9790
+ }
9791
+ return /*#__PURE__*/React__default.createElement(PageNav, {
9792
+ "aria-label": ariaLabel,
9793
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9794
+ key: keyProp,
9795
+ "data-testid": testId
9796
+ }, children);
9797
+ };
9798
+
9799
+ var PageLinkOrButton = function PageLinkOrButton(_ref) {
9800
+ var page = _ref.page,
9801
+ children = _ref.children,
9802
+ onPageChange = _ref.onPageChange,
9803
+ baseUrl = _ref.baseUrl,
9804
+ keyProp = _ref.keyProp,
9805
+ testId = _ref.testId,
9806
+ ariaLabel = _ref.ariaLabel;
9807
+ if (onPageChange) {
9808
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9809
+ "aria-label": ariaLabel,
9810
+ as: "button",
9811
+ type: "button",
9812
+ onClick: function onClick() {
9813
+ return onPageChange(page);
9814
+ },
9815
+ key: keyProp,
9816
+ "data-testid": testId
9817
+ }, children);
9818
+ }
9819
+ return /*#__PURE__*/React__default.createElement(PaginationLink, {
9820
+ "aria-label": ariaLabel,
9821
+ href: "" + (baseUrl != null ? baseUrl : '') + page,
9822
+ key: keyProp,
9823
+ "data-testid": testId
9824
+ }, children);
9825
+ };
9771
9826
 
9772
9827
  var reducePages = function reducePages(pages, currentPage) {
9773
9828
  // If there are less than 6 pages, return all pages
@@ -9789,33 +9844,42 @@ var Pagination = function Pagination(_ref) {
9789
9844
  var pageCount = _ref.pageCount,
9790
9845
  currentPage = _ref.currentPage,
9791
9846
  baseUrl = _ref.baseUrl,
9792
- className = _ref.className;
9793
- // Array of page numbers starting at 1
9847
+ className = _ref.className,
9848
+ onPageChange = _ref.onPageChange;
9794
9849
  var pageNumbers = Array.from(Array(pageCount + 1).keys()).slice(1);
9795
9850
  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
9796
9851
  return /*#__PURE__*/React__default.createElement(PageNumberWrapper, {
9797
9852
  className: className
9798
- },
9799
- // {/* Left arrow only appears after page 1 */
9800
- currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNav, {
9801
- href: baseUrl + "1"
9853
+ }, currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9854
+ ariaLabel: "Backward arrow, skip to first page",
9855
+ page: 1,
9856
+ onPageChange: onPageChange,
9857
+ baseUrl: baseUrl
9802
9858
  }, /*#__PURE__*/React__default.createElement(Icon, {
9859
+ "aria-hidden": "true",
9803
9860
  iconName: "LastPageArrow",
9804
9861
  direction: "right"
9805
9862
  }))), /*#__PURE__*/React__default.createElement(PreviousPageItem, {
9806
9863
  key: "previous-page",
9807
9864
  "data-testid": "left-arrow"
9808
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9809
- href: "" + baseUrl + (currentPage - 1)
9865
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9866
+ ariaLabel: "Backward arrow, skip one page back",
9867
+ page: currentPage - 1,
9868
+ onPageChange: onPageChange,
9869
+ baseUrl: baseUrl
9810
9870
  }, /*#__PURE__*/React__default.createElement(Icon, {
9871
+ "aria-hidden": "true",
9811
9872
  iconName: "ArrowPagination",
9812
9873
  direction: "right"
9813
9874
  }))))), reducedPageNumbers.map(function (page) {
9814
9875
  return /*#__PURE__*/React__default.createElement("li", {
9815
9876
  key: page
9816
- }, /*#__PURE__*/React__default.createElement(PaginationLink, {
9817
- href: "" + baseUrl + page,
9818
- "data-testid": "page-number"
9877
+ }, /*#__PURE__*/React__default.createElement(PageLinkOrButton, {
9878
+ ariaLabel: "Page " + page + ", " + (page === currentPage ? 'it is a current page' : "skip to page " + page),
9879
+ page: page,
9880
+ onPageChange: onPageChange,
9881
+ baseUrl: baseUrl,
9882
+ testId: "page-number"
9819
9883
  }, /*#__PURE__*/React__default.createElement(TextLinkPagination, {
9820
9884
  size: "large",
9821
9885
  active: page === currentPage
@@ -9823,24 +9887,32 @@ var Pagination = function Pagination(_ref) {
9823
9887
  }), currentPage < pageCount && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
9824
9888
  key: "next-page",
9825
9889
  "data-testid": "right-arrow"
9826
- }, /*#__PURE__*/React__default.createElement(PageNav, {
9827
- href: "" + baseUrl + (currentPage + 1)
9890
+ }, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9891
+ ariaLabel: "Forward arrow, skip one page forward",
9892
+ page: currentPage + 1,
9893
+ onPageChange: onPageChange,
9894
+ baseUrl: baseUrl
9828
9895
  }, /*#__PURE__*/React__default.createElement(Icon, {
9896
+ "aria-hidden": "true",
9829
9897
  iconName: "ArrowPagination",
9830
9898
  direction: "left"
9831
- }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(PageNav, {
9832
- href: "" + baseUrl + pageCount
9899
+ }))), /*#__PURE__*/React__default.createElement(LastPageItem, null, /*#__PURE__*/React__default.createElement(NavButtonOrLink, {
9900
+ ariaLabel: "Forward arrow, skip to last page",
9901
+ page: pageCount,
9902
+ onPageChange: onPageChange,
9903
+ baseUrl: baseUrl
9833
9904
  }, /*#__PURE__*/React__default.createElement(Icon, {
9905
+ "aria-hidden": "true",
9834
9906
  iconName: "LastPageArrow",
9835
9907
  direction: "left"
9836
9908
  }))))));
9837
9909
  };
9838
9910
 
9839
- var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$n, _templateObject7$h;
9911
+ var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$n, _templateObject7$h;
9840
9912
  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);
9841
9913
  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"])));
9842
9914
  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"])));
9843
- 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"])));
9915
+ 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"])));
9844
9916
  var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9845
9917
  var PersonLink = /*#__PURE__*/styled.a(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
9846
9918
  var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
@@ -9900,14 +9972,14 @@ var PeopleListing = function PeopleListing(_ref) {
9900
9972
  }));
9901
9973
  };
9902
9974
 
9903
- var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z;
9975
+ var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$y;
9904
9976
  var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
9905
9977
  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) {
9906
9978
  var columnCount = _ref.columnCount;
9907
9979
  return "repeat(" + columnCount + ", 1fr)";
9908
9980
  }, devices.mobile, devices.tablet);
9909
9981
  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"])));
9910
- 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"])));
9982
+ 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"])));
9911
9983
 
9912
9984
  // Get the total character length of a property in an array of objects
9913
9985
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -10025,7 +10097,7 @@ var CreditListing = function CreditListing(_ref) {
10025
10097
  }, creditEntries);
10026
10098
  };
10027
10099
 
10028
- var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$t, _templateObject6$o, _templateObject7$i, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
10100
+ var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$o, _templateObject7$i, _templateObject8$d, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
10029
10101
  var LENGTH_TEXT = 28;
10030
10102
  var LENGTH_TEXT_TABLET$1 = 12;
10031
10103
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -10044,7 +10116,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templa
10044
10116
  });
10045
10117
  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"])));
10046
10118
  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"])));
10047
- 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) {
10119
+ 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) {
10048
10120
  var hasTextLinks = _ref4.hasTextLinks;
10049
10121
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
10050
10122
  }, function (_ref5) {
@@ -10074,7 +10146,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$t || (_te
10074
10146
  });
10075
10147
  var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
10076
10148
  var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10077
- 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"])));
10149
+ 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"])));
10078
10150
  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);
10079
10151
  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);
10080
10152
  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);
@@ -10277,7 +10349,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10277
10349
  }))));
10278
10350
  };
10279
10351
 
10280
- var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$p, _templateObject7$j;
10352
+ var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$p, _templateObject7$j;
10281
10353
  var LENGTH_TEXT$2 = 28;
10282
10354
  var LENGTH_TEXT_TABLET$2 = 10;
10283
10355
  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) {
@@ -10295,7 +10367,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$I ||
10295
10367
  var imageToLeft = _ref4.imageToLeft;
10296
10368
  return imageToLeft ? 'right' : 'left';
10297
10369
  }, devices.mobile);
10298
- 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);
10370
+ 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);
10299
10371
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10300
10372
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
10301
10373
  var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
@@ -10731,7 +10803,7 @@ var SectionTitle = function SectionTitle(_ref) {
10731
10803
  }, description)))));
10732
10804
  };
10733
10805
 
10734
- var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v, _templateObject6$q, _templateObject7$k, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10806
+ var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$B, _templateObject5$v, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10735
10807
  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) {
10736
10808
  var theme = _ref.theme;
10737
10809
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10747,7 +10819,7 @@ var borderStyles = /*#__PURE__*/css(_templateObject2$Y || (_templateObject2$Y =
10747
10819
  return theme.colors.darkgrey;
10748
10820
  });
10749
10821
  var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
10750
- var listItemStyles = /*#__PURE__*/css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10822
+ var listItemStyles = /*#__PURE__*/css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10751
10823
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10752
10824
  var theme = _ref5.theme;
10753
10825
  return {
@@ -10758,7 +10830,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10758
10830
  })(_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"])));
10759
10831
  var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10760
10832
  var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10761
- var Options = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10833
+ var Options = /*#__PURE__*/styled.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10762
10834
  var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10763
10835
  var theme = _ref6.theme,
10764
10836
  hover = _ref6.hover;
@@ -11112,7 +11184,7 @@ function Select(_ref3) {
11112
11184
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
11113
11185
  }
11114
11186
 
11115
- var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$D;
11187
+ var _templateObject$1f, _templateObject2$Z, _templateObject3$M, _templateObject4$C;
11116
11188
  var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
11117
11189
  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) {
11118
11190
  var width = _ref.width;
@@ -11136,7 +11208,7 @@ var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject
11136
11208
  if (darkMode) return "var(--base-color-white)";
11137
11209
  return "var(--base-color-black)";
11138
11210
  });
11139
- var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11211
+ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11140
11212
  var darkMode = _ref6.darkMode;
11141
11213
  if (darkMode) return "var(--base-color-white)";
11142
11214
  return "var(--base-color-errorstate)";
@@ -11326,11 +11398,11 @@ var Quote = function Quote(_ref) {
11326
11398
  }, attribution))));
11327
11399
  };
11328
11400
 
11329
- var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$w, _templateObject6$r;
11401
+ var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$r;
11330
11402
  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"])));
11331
11403
  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"])));
11332
11404
  var StyledImage = /*#__PURE__*/styled.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11333
- var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11405
+ var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11334
11406
  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);
11335
11407
  var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
11336
11408
 
@@ -11370,14 +11442,14 @@ var MiniCard = function MiniCard(_ref) {
11370
11442
  }, title)))));
11371
11443
  };
11372
11444
 
11373
- var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$x;
11445
+ var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$E, _templateObject5$x;
11374
11446
  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"])));
11375
11447
  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"])));
11376
11448
  var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
11377
11449
  var isVisible = _ref.isVisible;
11378
11450
  return isVisible ? 'visible' : 'hidden';
11379
11451
  });
11380
- var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11452
+ var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11381
11453
  var isVisible = _ref2.isVisible;
11382
11454
  return isVisible ? 'visible' : 'hidden';
11383
11455
  });
@@ -11462,11 +11534,11 @@ var ReadMore = function ReadMore(_ref) {
11462
11534
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
11463
11535
  };
11464
11536
 
11465
- var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$y;
11537
+ var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$F, _templateObject5$y;
11466
11538
  var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11467
11539
  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);
11468
11540
  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);
11469
- 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) {
11541
+ 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) {
11470
11542
  var isActive = _ref.isActive;
11471
11543
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
11472
11544
  }, Colors.MidGrey);
@@ -11626,14 +11698,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
11626
11698
  });
11627
11699
  };
11628
11700
 
11629
- var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$z, _templateObject6$s;
11701
+ var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$G, _templateObject5$z, _templateObject6$s;
11630
11702
  var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11631
11703
  var Sections = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11632
11704
  var Section = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
11633
11705
  var color = _ref.color;
11634
11706
  return "var(--base-color-" + color + ")";
11635
11707
  });
11636
- 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"])));
11708
+ 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"])));
11637
11709
  var Text = /*#__PURE__*/styled.div(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
11638
11710
  var color = _ref2.color;
11639
11711
  return "var(--base-color-" + color + ")";
@@ -11720,28 +11792,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
11720
11792
  }, strengthLabel))));
11721
11793
  };
11722
11794
 
11723
- var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$t, _templateObject7$l, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11795
+ var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$H, _templateObject5$A, _templateObject6$t, _templateObject7$l, _templateObject8$f;
11724
11796
  var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11725
11797
  var Container$6 = /*#__PURE__*/styled.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11726
11798
  var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11727
- 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) {
11728
- return "var(--base-color-" + props.lineColor + ")";
11729
- }, function (props) {
11799
+ 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) {
11730
11800
  return "calc(100% / " + (props.columns - 1) + ")";
11731
11801
  }, devices.tablet, devices.mobile);
11732
- 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) {
11733
- return "var(--base-color-" + props.lineColor + ")";
11734
- }, function (props) {
11802
+ 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) {
11735
11803
  return "calc(100% / " + (props.columns - 1) + ")";
11736
11804
  }, devices.mobile);
11737
- var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: none;\n }\n"])));
11738
- var PageNumber = /*#__PURE__*/styled.button(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
11739
- var active = _ref.active;
11740
- return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11741
- });
11742
- 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"])));
11743
- 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"])));
11744
- 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"])));
11805
+ var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
11806
+ var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
11807
+ 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"])));
11745
11808
 
11746
11809
  /* eslint-disable react/no-danger */
11747
11810
  var Content = function Content(_ref) {
@@ -11766,23 +11829,25 @@ var scrollTable = function scrollTable(tableRef, direction) {
11766
11829
  var Cell = function Cell(_ref) {
11767
11830
  var cell = _ref.cell,
11768
11831
  cellIndex = _ref.cellIndex,
11769
- columns = _ref.columns,
11770
- lineColor = _ref.lineColor;
11832
+ columns = _ref.columns;
11833
+ var isText = typeof cell === 'string' || typeof cell === 'number';
11771
11834
  return /*#__PURE__*/React__default.createElement(TableCell, {
11772
11835
  key: cellIndex,
11773
11836
  columns: columns,
11774
- role: "gridcell",
11775
- lineColor: lineColor
11837
+ role: "gridcell"
11838
+ }, isText ? (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11839
+ size: "large"
11776
11840
  }, /*#__PURE__*/React__default.createElement(Content, {
11777
11841
  content: cell
11778
- }));
11842
+ }))) : (/*#__PURE__*/React__default.createElement(Content, {
11843
+ content: cell
11844
+ })));
11779
11845
  };
11780
11846
 
11781
11847
  var Row = function Row(_ref) {
11782
11848
  var row = _ref.row,
11783
11849
  rowIndex = _ref.rowIndex,
11784
- columns = _ref.columns,
11785
- lineColor = _ref.lineColor;
11850
+ columns = _ref.columns;
11786
11851
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
11787
11852
  key: rowIndex
11788
11853
  }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
@@ -11790,28 +11855,61 @@ var Row = function Row(_ref) {
11790
11855
  key: index,
11791
11856
  cell: cell,
11792
11857
  cellIndex: index,
11793
- columns: columns,
11794
- lineColor: lineColor
11858
+ columns: columns
11795
11859
  });
11796
11860
  })));
11797
11861
  };
11798
11862
 
11863
+ var DataCells = function DataCells(_ref) {
11864
+ var currentRows = _ref.currentRows,
11865
+ columns = _ref.columns;
11866
+ return /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11867
+ return /*#__PURE__*/React__default.createElement(Row, {
11868
+ key: rowIndex,
11869
+ row: row,
11870
+ rowIndex: rowIndex,
11871
+ columns: columns
11872
+ });
11873
+ }));
11874
+ };
11875
+
11876
+ var HeaderCells = function HeaderCells(_ref) {
11877
+ var headings = _ref.headings,
11878
+ columns = _ref.columns;
11879
+ return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
11880
+ role: "row"
11881
+ }, headings == null ? void 0 : headings.map(function (heading, index) {
11882
+ return /*#__PURE__*/React__default.createElement(TableHeader, {
11883
+ key: index,
11884
+ role: "columnheader",
11885
+ scope: "col",
11886
+ columns: columns
11887
+ }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
11888
+ size: "small"
11889
+ }, /*#__PURE__*/React__default.createElement(Content, {
11890
+ content: heading
11891
+ })));
11892
+ })));
11893
+ };
11894
+
11799
11895
  /* eslint-disable react/jsx-one-expression-per-line */
11800
11896
  var Table = function Table(_ref) {
11801
11897
  var columns = _ref.columns,
11802
11898
  headings = _ref.headings,
11803
11899
  children = _ref.children,
11804
- lineColors = _ref.lineColors,
11805
11900
  rowsPerPage = _ref.rowsPerPage,
11806
11901
  pagination = _ref.pagination,
11807
- description = _ref.description;
11902
+ description = _ref.description,
11903
+ className = _ref.className;
11808
11904
  var _useState = useState(0),
11809
11905
  currentPage = _useState[0],
11810
11906
  setCurrentPage = _useState[1];
11811
11907
  var _useState2 = useState(false),
11812
11908
  showScrollButtons = _useState2[0],
11813
11909
  setShowScrollButtons = _useState2[1];
11814
- var lineColor = lineColors != null ? lineColors : Colors.Cinema;
11910
+ var handlePageChange = function handlePageChange(page) {
11911
+ setCurrentPage(page - 1);
11912
+ };
11815
11913
  var tableRef = useRef(null);
11816
11914
  useLayoutEffect(function () {
11817
11915
  var horizontalScroll = function horizontalScroll() {
@@ -11825,14 +11923,8 @@ var Table = function Table(_ref) {
11825
11923
  return window.removeEventListener('resize', horizontalScroll);
11826
11924
  };
11827
11925
  }, []);
11828
- var totalRows = Array.isArray(children) ? children.length + 1 : 1;
11926
+ var totalRows = Array.isArray(children) ? children.length : 1;
11829
11927
  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
11830
- var pageNumbers = Array.from({
11831
- length: totalPages
11832
- }, function (_, i) {
11833
- return i;
11834
- });
11835
- var reducedPageNumbers = reducePages(pageNumbers, currentPage);
11836
11928
  var currentRows;
11837
11929
  if (pagination) {
11838
11930
  if (Array.isArray(children)) {
@@ -11841,15 +11933,20 @@ var Table = function Table(_ref) {
11841
11933
  currentRows = [];
11842
11934
  }
11843
11935
  } else {
11844
- currentRows = children;
11936
+ currentRows = Array.isArray(children) ? children : [];
11845
11937
  }
11938
+ var headingsContent = Array.isArray(headings) ? headings.map(function (h) {
11939
+ return h;
11940
+ }) : [];
11846
11941
  var visibleRows;
11847
11942
  if (pagination) {
11848
11943
  visibleRows = Array.isArray(currentRows) ? currentRows.length + 1 : 0;
11849
11944
  } else {
11850
11945
  visibleRows = totalRows;
11851
11946
  }
11852
- return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11947
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, {
11948
+ className: className
11949
+ }, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11853
11950
  onClickPrev: function onClickPrev() {
11854
11951
  return scrollTable(tableRef, 'left');
11855
11952
  },
@@ -11864,67 +11961,22 @@ var Table = function Table(_ref) {
11864
11961
  "aria-colcount": columns
11865
11962
  }, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11866
11963
  id: "table-description"
11867
- }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, ' ', /*#__PURE__*/React__default.createElement("tr", {
11868
- role: "columnheader"
11869
- }, headings == null ? void 0 : headings.map(function (heading, index) {
11870
- return /*#__PURE__*/React__default.createElement(TableHeader, {
11871
- key: index,
11872
- role: "columnheader",
11873
- scope: "col",
11874
- columns: columns,
11875
- lineColor: lineColor
11876
- }, /*#__PURE__*/React__default.createElement(Content, {
11877
- content: heading
11878
- }));
11879
- }))), /*#__PURE__*/React__default.createElement("tbody", null, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
11880
- return /*#__PURE__*/React__default.createElement(Row, {
11881
- key: rowIndex,
11882
- row: row,
11883
- rowIndex: rowIndex,
11884
- columns: columns,
11885
- lineColor: lineColor
11886
- });
11964
+ }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(HeaderCells, {
11965
+ headings: headingsContent,
11966
+ columns: columns
11967
+ }), /*#__PURE__*/React__default.createElement(DataCells, {
11968
+ currentRows: currentRows,
11969
+ columns: columns
11887
11970
  }))), pagination && totalPages > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
11888
11971
  id: "pagination-description"
11889
- }, "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, {
11890
- key: "previous-page",
11891
- onClick: function onClick() {
11892
- return setCurrentPage(currentPage - 1);
11893
- },
11894
- tabIndex: 0,
11895
- "aria-label": "Previous page"
11896
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11897
- iconName: "DropdownArrow",
11898
- direction: "down"
11899
- }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11900
- key: "more-before"
11901
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), reducedPageNumbers.map(function (number) {
11902
- return /*#__PURE__*/React__default.createElement("li", {
11903
- key: number
11904
- }, /*#__PURE__*/React__default.createElement(PageNumber, {
11905
- key: number,
11906
- onClick: function onClick() {
11907
- return setCurrentPage(number);
11908
- },
11909
- tabIndex: 0,
11910
- active: "" + (number === currentPage)
11911
- }, number + 1));
11912
- }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11913
- key: "more-after"
11914
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
11915
- key: "next-page",
11916
- onClick: function onClick() {
11917
- return setCurrentPage(currentPage + 1);
11918
- },
11919
- tabIndex: 0,
11920
- "aria-label": "Next page"
11921
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
11922
- iconName: "DropdownArrow",
11923
- direction: "up"
11924
- }))))))))));
11972
+ }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(PaginationWrapper, {
11973
+ currentPage: currentPage + 1,
11974
+ pageCount: totalPages,
11975
+ onPageChange: handlePageChange
11976
+ }))));
11925
11977
  };
11926
11978
 
11927
- var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$u, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11979
+ var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$I, _templateObject5$B, _templateObject6$u, _templateObject7$m, _templateObject8$g, _templateObject9$9, _templateObject0$9, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11928
11980
  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) {
11929
11981
  var theme = _ref.theme;
11930
11982
  return "var(--color-" + theme + ")";
@@ -11934,13 +11986,13 @@ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObjec
11934
11986
  });
11935
11987
  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);
11936
11988
  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);
11937
- 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"])));
11989
+ 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"])));
11938
11990
  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);
11939
11991
  var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
11940
11992
  var ServerError = /*#__PURE__*/styled.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11941
- 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);
11942
- 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);
11943
- 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);
11993
+ 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);
11994
+ 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);
11995
+ 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);
11944
11996
  var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11945
11997
  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"])));
11946
11998
  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) {
@@ -12348,10 +12400,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12348
12400
  }))))));
12349
12401
  };
12350
12402
 
12351
- var _templateObject$1o, _templateObject3$U, _templateObject4$K;
12403
+ var _templateObject$1o, _templateObject3$U, _templateObject4$J;
12352
12404
  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);
12353
12405
  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);
12354
- 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"])));
12406
+ 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"])));
12355
12407
 
12356
12408
  var AnchorBar = function AnchorBar(_ref) {
12357
12409
  var cta = _ref.cta,