@royaloperahouse/chord 2.4.8 → 2.4.9

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.4.9]
+- Information component: fix UI issues
+
 ## [2.4.8]
 - Accessibility: all SVG icons can now take alt text
 

package/dist/chord.cjs.development.js

@@ -39,6 +39,20 @@ var ScrollLock = _interopDefault(require('react-scrolllock'));
   ThemeType["Schools"] = "schools";
 })(exports.ThemeType || (exports.ThemeType = {}));
 
+var LinkTarget;
+
+(function (LinkTarget) {
+  /**
+   * Opens the link in the same frame or tab as the current page.
+   */
+  LinkTarget["Self"] = "_self";
+  /**
+   * Opens the link in a new browser tab or window, depending on the browser settings.
+   */
+
+  LinkTarget["Blank"] = "_blank";
+})(LinkTarget || (LinkTarget = {}));
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -2695,10 +2709,41 @@ var AspectRatioWidth;
   ButtonType["Tertiary"] = "Tertiary";
 })(exports.ButtonType || (exports.ButtonType = {}));
 
+var IInformationCtaVariant;
+
+(function (IInformationCtaVariant) {
+  IInformationCtaVariant["Primary"] = "Primary";
+  IInformationCtaVariant["Secondary"] = "Secondary";
+  IInformationCtaVariant["Tertiary"] = "Tertiary";
+  IInformationCtaVariant["TextLink"] = "TextLink";
+})(IInformationCtaVariant || (IInformationCtaVariant = {}));
+
+var IInformationCtaTheme;
+
+(function (IInformationCtaTheme) {
+  IInformationCtaTheme["Cinema"] = "Cinema";
+  IInformationCtaTheme["Core"] = "Core";
+  IInformationCtaTheme["Stream"] = "Stream";
+})(IInformationCtaTheme || (IInformationCtaTheme = {}));
+
+var IInformationTitleVariant;
+
+(function (IInformationTitleVariant) {
+  IInformationTitleVariant["Header"] = "Header";
+  IInformationTitleVariant["AltHeader"] = "AltHeader";
+})(IInformationTitleVariant || (IInformationTitleVariant = {}));
+
+(function (IInformationBackgroundColour) {
+  IInformationBackgroundColour["Cinema"] = "cinema";
+  IInformationBackgroundColour["Core"] = "core";
+  IInformationBackgroundColour["Stream"] = "stream";
+  IInformationBackgroundColour["White"] = "white";
+})(exports.IInformationBackgroundColour || (exports.IInformationBackgroundColour = {}));
+
 var PrimaryButton = function PrimaryButton(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "disabled", "color", "bgColor"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "disabled"]);
 
   var description = 'This button is currently disabled';
   return disabled ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
@@ -7969,47 +8014,14 @@ var Editorial = function Editorial(_ref) {
   })))));
 };
 
-var CtaVariant;
-
-(function (CtaVariant) {
-  CtaVariant["Primary"] = "Primary";
-  CtaVariant["Secondary"] = "Secondary";
-  CtaVariant["Tertiary"] = "Tertiary";
-  CtaVariant["TextLink"] = "TextLink";
-})(CtaVariant || (CtaVariant = {}));
-
-var CtaTheme;
-
-(function (CtaTheme) {
-  CtaTheme["Cinema"] = "Cinema";
-  CtaTheme["Core"] = "Core";
-  CtaTheme["Stream"] = "Stream";
-})(CtaTheme || (CtaTheme = {}));
-
-var TitleVariant;
-
-(function (TitleVariant) {
-  TitleVariant["Header"] = "Header";
-  TitleVariant["AltHeader"] = "AltHeader";
-})(TitleVariant || (TitleVariant = {}));
-
-var BackgroundColour;
-
-(function (BackgroundColour) {
-  BackgroundColour["Cinema"] = "cinema";
-  BackgroundColour["Core"] = "core";
-  BackgroundColour["Stream"] = "stream";
-  BackgroundColour["White"] = "white";
-})(BackgroundColour || (BackgroundColour = {}));
-
-var _templateObject$V, _templateObject2$E, _templateObject3$v, _templateObject4$o;
+var _templateObject$V, _templateObject2$E, _templateObject3$v, _templateObject4$o, _templateObject5$j;
 var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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  -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n  -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n  -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  word-break: var(--word-break-altHeader);\n"])));
 var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
 var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
   if (!props.infoThemed) {
     return;
   } else {
-    if (props.variant === CtaVariant.Primary || props.variant === CtaVariant.Secondary) {
+    if (props.variant === IInformationCtaVariant.Primary || props.variant === IInformationCtaVariant.Secondary) {
       return "a {\n              color: var(--base-color-black);\n              background: var(--base-color-white);\n              border-color: var(--base-color-transparent);\n            }";
     } else {
       return "a {\n              color: var(--base-color-white);\n              background: var(--base-color-transparent});\n            }\n              svg > path {\n                fill: var(--base-color-white);\n                stroke: var(--base-color-white);\n                stroke-width: 1;\n              }\n            ";
@@ -8017,45 +8029,54 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (
   }
 });
 var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
-  return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
+  return props.background !== exports.IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
 }, function (props) {
   return "var(--base-color-" + props.background + ")";
 });
+var InfoBodyWrapper = /*#__PURE__*/styled__default('div')(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), function (props) {
+  return props.background === exports.IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
+});
 
 var InfoCta = function InfoCta(_ref) {
   var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? CtaVariant.Primary : _ref$variant,
+      variant = _ref$variant === void 0 ? IInformationCtaVariant.Primary : _ref$variant,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? CtaTheme.Core : _ref$theme,
+      theme = _ref$theme === void 0 ? IInformationCtaTheme.Core : _ref$theme,
       link = _ref.link,
       text = _ref.text,
       iconName = _ref.iconName,
       iconDirection = _ref.iconDirection,
-      infoThemed = _ref.infoThemed;
+      infoThemed = _ref.infoThemed,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? LinkTarget.Self : _ref$target;
   return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
     variant: variant,
     infoThemed: infoThemed,
     theme: theme
-  }, variant === CtaVariant.Secondary ? /*#__PURE__*/React__default.createElement(SecondaryButton, {
+  }, variant === IInformationCtaVariant.Secondary ? /*#__PURE__*/React__default.createElement(SecondaryButton, {
     color: exports.Colors[theme],
     href: link,
     iconName: iconName,
-    iconDirection: iconDirection
-  }, text) : variant === CtaVariant.Tertiary ? /*#__PURE__*/React__default.createElement(Button$1, {
+    iconDirection: iconDirection,
+    target: target
+  }, text) : variant === IInformationCtaVariant.Tertiary ? /*#__PURE__*/React__default.createElement(Button$1, {
     color: exports.Colors.Black,
     href: link,
     iconName: iconName,
-    iconDirection: iconDirection
-  }, text) : variant === CtaVariant.TextLink ? /*#__PURE__*/React__default.createElement(TextLink, {
+    iconDirection: iconDirection,
+    target: target
+  }, text) : variant === IInformationCtaVariant.TextLink ? /*#__PURE__*/React__default.createElement(TextLink, {
     color: exports.Colors.Black,
     href: link,
     iconName: iconName,
-    iconDirection: iconDirection
+    iconDirection: iconDirection,
+    target: target
   }, text) : /*#__PURE__*/React__default.createElement(PrimaryButton, {
     bgColor: exports.Colors[theme],
     href: link,
     iconName: iconName,
-    iconDirection: iconDirection
+    iconDirection: iconDirection,
+    target: target
   }, text));
 };
 
@@ -8066,7 +8087,7 @@ var mediumWordBreakpoint = 8;
 var longWordBreakpoint = 13;
 
 var getColumnSpan = function getColumnSpan(variant, textSize, longestWordLength) {
-  if (!(variant === TitleVariant.Header && textSize === 4)) return defaultColumnSpan;
+  if (!(variant === IInformationTitleVariant.Header && textSize === 4)) return defaultColumnSpan;
 
   switch (true) {
     case longestWordLength > longWordBreakpoint:
@@ -8081,8 +8102,8 @@ var getColumnSpan = function getColumnSpan(variant, textSize, longestWordLength)
 };
 
 var renderTitle = function renderTitle(props) {
-  var headerLevel = props.variant === TitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
-  return props.variant === TitleVariant.Header ? /*#__PURE__*/React__default.createElement(Header, {
+  var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
+  return props.variant === IInformationTitleVariant.Header ? /*#__PURE__*/React__default.createElement(Header, {
     level: headerLevel
   }, props.text) : /*#__PURE__*/React__default.createElement(AltHeader, {
     level: headerLevel
@@ -8100,7 +8121,7 @@ var Information = function Information(_ref) {
   });
   var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
   var titleColumnSpan = getColumnSpan(title.variant, title.textSize, maxTitleWordLength);
-  var bgColour = background != null ? background : BackgroundColour.White;
+  var bgColour = background != null ? background : exports.IInformationBackgroundColour.White;
   return /*#__PURE__*/React__default.createElement(InfoWrapper, {
     background: bgColour,
     "data-testid": "infoWrapper"
@@ -8108,13 +8129,14 @@ var Information = function Information(_ref) {
     columnStartDesktop: 2,
     columnStartDevice: 2,
     columnSpanDesktop: titleColumnSpan,
-    columnSpanDevice: 14
+    columnSpanDevice: 12
   }, /*#__PURE__*/React__default.createElement(InfoTitle, null, renderTitle(title))), /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: titleColumnSpan + 2,
     columnStartDevice: 2,
     columnSpanDesktop: 14 - titleColumnSpan,
-    columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(InfoContent, null, /*#__PURE__*/React__default.createElement("div", {
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(InfoContent, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
+    background: bgColour,
     dangerouslySetInnerHTML: {
       __html: body
     }
@@ -8122,14 +8144,15 @@ var Information = function Information(_ref) {
     link: cta.link,
     variant: cta.variant,
     theme: cta.theme,
-    infoThemed: bgColour !== BackgroundColour.White,
+    infoThemed: bgColour !== exports.IInformationBackgroundColour.White,
     text: cta.text,
     iconName: cta.iconName,
-    iconDirection: cta.iconDirection
+    iconDirection: cta.iconDirection,
+    target: cta.target
   }))));
 };
 
-var _templateObject$W, _templateObject2$F, _templateObject3$w, _templateObject4$p, _templateObject5$j, _templateObject6$f, _templateObject7$9, _templateObject8$7;
+var _templateObject$W, _templateObject2$F, _templateObject3$w, _templateObject4$p, _templateObject5$k, _templateObject6$f, _templateObject7$9, _templateObject8$7;
 var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
@@ -8146,7 +8169,7 @@ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_t
   var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
-var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
 var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
 var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
@@ -8230,12 +8253,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   })));
 };
 
-var _templateObject$X, _templateObject2$G, _templateObject3$x, _templateObject4$q, _templateObject5$k, _templateObject6$g, _templateObject7$a, _templateObject8$8;
+var _templateObject$X, _templateObject2$G, _templateObject3$x, _templateObject4$q, _templateObject5$l, _templateObject6$g, _templateObject7$a, _templateObject8$8;
 var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
 var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
 var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-self: center;\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . logo logo logo logo logo logo . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .';\n    }\n  }\n\n  @media ", " {\n    align-content: center;\n\n    & {\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. . text text text text text text text text text text . .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
-var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
 var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
@@ -8304,7 +8327,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down")) : null);
 };
 
-var _templateObject$Y, _templateObject2$H, _templateObject3$y, _templateObject4$r, _templateObject5$l;
+var _templateObject$Y, _templateObject2$H, _templateObject3$y, _templateObject4$r, _templateObject5$m;
 var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
@@ -8318,7 +8341,7 @@ var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templat
 });
 var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
 var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
-var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingPanel = function PageHeadingPanel(_ref) {
   var _image$src, _image$alt;
@@ -8370,11 +8393,11 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }))));
 };
 
-var _templateObject$_, _templateObject2$I, _templateObject3$z, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
+var _templateObject$_, _templateObject2$I, _templateObject3$z, _templateObject5$n, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
 var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
 var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
 var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
-var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
 var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
       theme = _ref.theme;
@@ -8780,12 +8803,12 @@ var Pagination = function Pagination(_ref) {
   }))));
 };
 
-var _templateObject$10, _templateObject2$K, _templateObject3$B, _templateObject4$t, _templateObject5$n, _templateObject6$i;
+var _templateObject$10, _templateObject2$K, _templateObject3$B, _templateObject4$t, _templateObject5$o, _templateObject6$i;
 var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$10 || (_templateObject$10 = /*#__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$K || (_templateObject2$K = /*#__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$B || (_templateObject3$B = /*#__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$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
-var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
 var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$i || (_templateObject6$i = /*#__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 Person = function Person(_ref) {
@@ -8909,7 +8932,7 @@ var CreditListing = function CreditListing(_ref) {
   }));
 };
 
-var _templateObject$12, _templateObject2$M, _templateObject3$D, _templateObject4$v, _templateObject5$o, _templateObject6$j, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$12, _templateObject2$M, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 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 . .'";
@@ -8965,7 +8988,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$v ||
 
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
   var marginBottom = _ref10.marginBottom;
   return marginBottom + "px";
 });
@@ -9187,7 +9210,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$13, _templateObject2$N, _templateObject3$E, _templateObject4$w, _templateObject5$p, _templateObject6$k, _templateObject7$d;
+var _templateObject$13, _templateObject2$N, _templateObject3$E, _templateObject4$w, _templateObject5$q, _templateObject6$k, _templateObject7$d;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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) {
@@ -9206,7 +9229,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
 var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 32px;\n\n    @media ", " {\n      & {\n        margin: 0 0 24px;\n      }\n    }\n  }\n"])), devices.mobile);
-var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$p || (_templateObject5$p = /*#__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"])));
+var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$q || (_templateObject5$q = /*#__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"])));
 var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__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: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
@@ -9691,7 +9714,7 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-var _templateObject$19, _templateObject2$Q, _templateObject3$H, _templateObject4$x, _templateObject5$q, _templateObject6$l, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
+var _templateObject$19, _templateObject2$Q, _templateObject3$H, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
 var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject$19 = /*#__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;
@@ -9715,7 +9738,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
     color: theme.colors.black,
     title: 'Select Arrow'
   };
-})(_templateObject5$q || (_templateObject5$q = /*#__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$r || (_templateObject5$r = /*#__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$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__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$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
 var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
@@ -10362,12 +10385,12 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$1e, _templateObject2$U, _templateObject3$K, _templateObject4$z, _templateObject5$r, _templateObject6$m;
+var _templateObject$1e, _templateObject2$U, _templateObject3$K, _templateObject4$z, _templateObject5$s, _templateObject6$m;
 var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__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$s || (_templateObject5$s = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__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) {
@@ -10406,7 +10429,7 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1f, _templateObject2$V, _templateObject3$L, _templateObject4$A, _templateObject5$s;
+var _templateObject$1f, _templateObject2$V, _templateObject3$L, _templateObject4$A, _templateObject5$t;
 var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__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$V || (_templateObject2$V = /*#__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$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
@@ -10417,7 +10440,7 @@ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A ||
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__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$t || (_templateObject5$t = /*#__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') {
@@ -10504,7 +10527,7 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
 };
 
-var _templateObject$1g, _templateObject2$W, _templateObject3$M, _templateObject4$B, _templateObject5$t;
+var _templateObject$1g, _templateObject2$W, _templateObject3$M, _templateObject4$B, _templateObject5$u;
 var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
 var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$W || (_templateObject2$W = /*#__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$M || (_templateObject3$M = /*#__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);
@@ -10512,7 +10535,7 @@ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_template
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
-var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$t || (_templateObject5$t = /*#__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$u || (_templateObject5$u = /*#__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);
@@ -10682,7 +10705,7 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1h, _templateObject2$X, _templateObject3$N, _templateObject4$C, _templateObject5$u, _templateObject6$n;
+var _templateObject$1h, _templateObject2$X, _templateObject3$N, _templateObject4$C, _templateObject5$v, _templateObject6$n;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var Sections = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
@@ -10690,7 +10713,7 @@ var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateO
   return "var(--base-color-" + color + ")";
 });
 var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__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$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var Text = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
@@ -10780,7 +10803,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1i, _templateObject2$Y, _templateObject3$O, _templateObject4$D, _templateObject5$v, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
+var _templateObject$1i, _templateObject2$Y, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
@@ -10789,7 +10812,7 @@ var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templa
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$v || (_templateObject5$v = /*#__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$w || (_templateObject5$w = /*#__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) + ")";