@royaloperahouse/harmonic 0.7.0 → 0.7.1-a

package/dist/harmonic.cjs.development.js

@@ -2545,10 +2545,45 @@ var Volume = (function (_ref) {
   }));
 });
 
+var LastPageArrow = (function (_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
+    ariaLabel = _ref.ariaLabel;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9.14746 11.9961L9.1377 12.0039L17.165 20.8428L18.4121 19.71L11.415 12.0059L18.4219 4.29004L17.1748 3.15723L9.14746 11.9961ZM5.57031 20.8428H7.14062V3.15723H5.57031V20.8428Z",
+    fill: color
+  }));
+});
+
+var ArrowPagination = (function (_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
+    ariaLabel = _ref.ariaLabel;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.3955 3.1582L7.36816 11.9971L7.3584 12.0049L15.3857 20.8438L16.6328 19.7109L9.63574 12.0068L16.6426 4.29102L15.3955 3.1582Z",
+    fill: color
+  }));
+});
+
 /* 12px */
 var IconLibrary = {
   AddToMyList: AddToMyList,
   Arrow: Arrow,
+  ArrowPagination: ArrowPagination,
   AudioDescription: AudioDescription,
   Back10: Back10,
   BalletAndDance: BalletAndDance,
@@ -2584,6 +2619,7 @@ var IconLibrary = {
   Home: Home,
   Info: Info,
   Instagram: Instagram,
+  LastPageArrow: LastPageArrow,
   List: List,
   ListView: ListView,
   LiveStream: LiveStream,
@@ -3772,6 +3808,7 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     color = _ref.color;
   var clickHandler = function clickHandler() {
     if (onClick) {
@@ -3802,8 +3839,9 @@ var Tab = function Tab(_ref) {
     tabIndex: 0,
     className: className
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    color: color,
+    id: tabLinkId,
     trimText: trimText,
+    color: color,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -5361,6 +5399,7 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
@@ -5457,6 +5496,7 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
+      tabLinkId: tabLinkId,
       trimText: trimTabText,
       title: title,
       titleLink: titleLink,
@@ -5536,7 +5576,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
 
@@ -9643,15 +9684,16 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))))));
 };
 
-var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x;
+var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$x, _templateObject5$r;
+// Keep MorePages for Table component until restyle
 var MorePages = /*#__PURE__*/styled__default.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
-var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\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    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: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
-// PageNumber extends bodyText but uses subtitle-1 font size
-var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n  :hover {\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  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
+var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  color: inherit;\n"])));
+var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    margin-left: 16px;\n    color: var(--color-base-black);\n    display: flex;\n    align-items: center;\n  }\n"])));
+var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\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  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
-  return active === 'true' && " \n      color: var(--base-color-core);\n    ";
+  return active === 'true' && " \n    border-bottom: 1px solid var(--color-primary-red);\n      color: var(--color-primary-red);\n    ";
 });
-var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$x || (_templateObject4$x = /*#__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"])));
+var PageNav = /*#__PURE__*/styled__default.a(_templateObject5$r || (_templateObject5$r = /*#__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"])));
 
 var reducePages = function reducePages(pages, currentPage) {
   // If there are less than 6 pages, return all pages
@@ -9672,57 +9714,60 @@ var reducePages = function reducePages(pages, currentPage) {
 var Pagination = function Pagination(_ref) {
   var pageCount = _ref.pageCount,
     currentPage = _ref.currentPage,
-    baseUrl = _ref.baseUrl;
+    baseUrl = _ref.baseUrl,
+    className = _ref.className;
   // Array of page numbers starting at 1
   var pageNumbers = Array.from(Array(pageCount + 1).keys()).slice(1);
   var reducedPageNumbers = reducePages(pageNumbers, currentPage);
-  return /*#__PURE__*/React__default.createElement(PageNumberWrapper, null,
+  return /*#__PURE__*/React__default.createElement(PageNumberWrapper, {
+    className: className
+  },
   // {/* Left arrow only appears after page 1 */
-  currentPage > 1 && (/*#__PURE__*/React__default.createElement("li", {
+  currentPage > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNav, {
+    href: "" + baseUrl + 1
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "LastPageArrow",
+    direction: "right"
+  }))), /*#__PURE__*/React__default.createElement("li", {
     key: "previous-page",
     "data-testid": "left-arrow"
-  }, /*#__PURE__*/React__default.createElement(NextPage, {
+  }, /*#__PURE__*/React__default.createElement(PageNav, {
     href: "" + baseUrl + (currentPage - 1)
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow",
-    direction: "down"
-  })))), currentPage > 3 && (/*#__PURE__*/React__default.createElement("li", {
-    key: "more-before",
-    "data-testid": "elipsis"
-  }, /*#__PURE__*/React__default.createElement(MorePages, {
-    theme: "core"
-  }, "..."))), reducedPageNumbers.map(function (page) {
+    iconName: "ArrowPagination",
+    direction: "right"
+  }))))), reducedPageNumbers.map(function (page) {
     return /*#__PURE__*/React__default.createElement("li", {
       key: page
-    }, /*#__PURE__*/React__default.createElement(PageNumber, {
-      theme: "core",
-      key: page,
-      active: "" + (page === currentPage),
+    }, /*#__PURE__*/React__default.createElement(PaginationLink, {
       href: "" + baseUrl + page,
       "data-testid": "page-number"
-    }, page));
-  }), currentPage + 4 < pageCount && (/*#__PURE__*/React__default.createElement("li", {
-    key: "more-after",
-    "data-testid": "elipsis"
-  }, /*#__PURE__*/React__default.createElement(MorePages, {
-    theme: "core"
-  }, "..."))), currentPage < pageCount && (/*#__PURE__*/React__default.createElement("li", {
+    }, /*#__PURE__*/React__default.createElement(TextLinkPagination, {
+      size: "large",
+      active: "" + (page === currentPage)
+    }, page.toString())));
+  }), currentPage < pageCount && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
     key: "next-page",
     "data-testid": "right-arrow"
-  }, /*#__PURE__*/React__default.createElement(NextPage, {
+  }, /*#__PURE__*/React__default.createElement(PageNav, {
     href: "" + baseUrl + (currentPage + 1)
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow",
-    direction: "up"
-  })))));
+    iconName: "ArrowPagination",
+    direction: "left"
+  }))), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNav, {
+    href: "" + baseUrl + pageCount
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "LastPageArrow",
+    direction: "left"
+  }))))));
 };
 
-var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
+var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$g;
 var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
 var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
 var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
 var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
-var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
 var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$l || (_templateObject6$l = /*#__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"])));
 var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
 
@@ -9906,7 +9951,7 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
 
-var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$s, _templateObject6$m, _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;
+var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$A, _templateObject5$t, _templateObject6$m, _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;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -9949,7 +9994,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$A ||
   }
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref7) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref7) {
   var marginBottom = _ref7.marginBottom;
   return marginBottom + "px";
 });
@@ -10158,7 +10203,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
+var _templateObject$18, _templateObject2$V, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$n, _templateObject7$i;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
@@ -10177,7 +10222,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
 var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 24px;\n  }\n"])), devices.mobile);
-var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
+var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
 var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__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);
 var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
   var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
@@ -10612,7 +10657,7 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
+var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$v, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
 var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return "3px solid " + theme.colors.lapisLazuli;
@@ -10636,7 +10681,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
     color: theme.colors.black,
     title: 'Select Arrow'
   };
-})(_templateObject5$u || (_templateObject5$u = /*#__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"])));
+})(_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"])));
 var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
 var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
 var Options = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
@@ -11207,12 +11252,12 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$v, _templateObject6$p;
+var _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$E, _templateObject5$w, _templateObject6$p;
 var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
 var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__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);
+var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__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);
 
 var MiniCard = function MiniCard(_ref) {
@@ -11251,7 +11296,7 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$w;
+var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$F, _templateObject5$x;
 var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
 var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
 var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
@@ -11262,7 +11307,7 @@ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$F ||
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\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  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
+var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\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  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
 
 var keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {
@@ -11343,7 +11388,7 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$x;
+var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$G, _templateObject5$y;
 var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
 var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
 var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
@@ -11351,7 +11396,7 @@ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$G || (_template
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
-var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
+var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
   var isOpen = _ref2.isOpen;
   return isOpen ? 'block' : 'none';
 }, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
@@ -11507,7 +11552,7 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$y, _templateObject6$q;
+var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$H, _templateObject5$z, _templateObject6$q;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var Sections = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
@@ -11515,7 +11560,7 @@ var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateO
   return "var(--base-color-" + color + ")";
 });
 var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
-var Text = /*#__PURE__*/styled__default.div(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var Text = /*#__PURE__*/styled__default.div(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
@@ -11601,7 +11646,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
+var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
@@ -11610,13 +11655,13 @@ var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$I || (_templa
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$z || (_templateObject5$z = /*#__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) {
+var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n  border-bottom: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
   return "var(--base-color-" + props.lineColor + ")";
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
 var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__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"])));
-var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
+var PageNumber = /*#__PURE__*/styled__default.button(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
@@ -11767,7 +11812,7 @@ var Table = function Table(_ref) {
     });
   }))), pagination && totalPages > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription$2, {
     id: "pagination-description"
-  }, "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$1, {
+  }, "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, {
     key: "previous-page",
     onClick: function onClick() {
       return setCurrentPage(currentPage - 1);
@@ -11777,12 +11822,12 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow",
     direction: "down"
-  }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+  }))))), currentPage > 2 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
     key: "more-before"
   }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), reducedPageNumbers.map(function (number) {
     return /*#__PURE__*/React__default.createElement("li", {
       key: number
-    }, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    }, /*#__PURE__*/React__default.createElement(PageNumber, {
       key: number,
       onClick: function onClick() {
         return setCurrentPage(number);
@@ -11790,9 +11835,9 @@ var Table = function Table(_ref) {
       tabIndex: 0,
       active: "" + (number === currentPage)
     }, number + 1));
-  }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+  }), currentPage + 4 < totalPages && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
     key: "more-after"
-  }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+  }, /*#__PURE__*/React__default.createElement(MorePages, null, "...")))), currentPage < totalPages - 1 && (/*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber, {
     key: "next-page",
     onClick: function onClick() {
       return setCurrentPage(currentPage + 1);
@@ -11805,7 +11850,7 @@ var Table = function Table(_ref) {
   }))))))))));
 };
 
-var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
+var _templateObject$1n, _templateObject2$15, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
 var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--color-" + theme + ")";
@@ -11816,7 +11861,7 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
 var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
 var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--color-base-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
 var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--color-base-errorstate);\n\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
-var Form = /*#__PURE__*/styled__default.form(_templateObject5$A || (_templateObject5$A = /*#__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);
+var Form = /*#__PURE__*/styled__default.form(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
 var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__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);
 var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--color-base-errorstate);\n"])));
 var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  @media ", " {\n    text-decoration: underline;\n  }\n"])), devices.mobile);