@royaloperahouse/harmonic 0.1.8-l → 0.1.8-m

package/dist/harmonic.cjs.development.js

@@ -5097,8 +5097,82 @@ var _templateObject$w, _templateObject2$n;
 var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n"])));
 var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n\n  &:focus {\n    outline: 2px solid var(--color-base-white);\n  }\n"])));
 
+// WARNING: Do not use this on server side rendering, it may throw an error.
+var isIOS = function isIOS() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === undefined) return false;
+    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
+    // iPad on iOS 13 detection
+    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+  } catch (e) {
+    console.warn('Error checking if device is iOS.', e);
+    return false;
+  }
+};
+// React hook version of isIOS (for server side rendering)
+var useIOS = function useIOS() {
+  var _useState = React.useState(false),
+    IOS = _useState[0],
+    setIOS = _useState[1];
+  React.useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
+};
+// Checks device size based on window width
+var isMobile = function isMobile() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.', e);
+    return false;
+  }
+};
+// React hook version of isMobile (for server side rendering)
+var useMobile = function useMobile() {
+  var _useState2 = React.useState(false),
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
+  React.useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+var useViewport = function useViewport() {
+  var _useState3 = React.useState({
+      width: window.innerWidth,
+      isMobile: window.innerWidth < breakpoints.sm,
+      isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+      isDesktop: window.innerWidth >= breakpoints.md
+    }),
+    viewport = _useState3[0],
+    setViewport = _useState3[1];
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      setViewport({
+        width: window.innerWidth,
+        isMobile: window.innerWidth < breakpoints.sm,
+        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+        isDesktop: window.innerWidth >= breakpoints.md
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return viewport;
+};
+
 var SocialLinks = function SocialLinks(_ref) {
   var items = _ref.items;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
     return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
       key: mediaLink.name + "-" + idx,
@@ -5107,7 +5181,8 @@ var SocialLinks = function SocialLinks(_ref) {
       "aria-label": mediaLink.name,
       rel: "noopener noreferrer" // Ensures security for external links
       ,
-      target: "_blank"
+      target: "_blank",
+      tabIndex: isMobile ? 1 : undefined
     }, /*#__PURE__*/React__default.createElement(Icon, {
       iconName: mediaLink.name,
       color: "white",
@@ -5121,8 +5196,8 @@ var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen && "\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: " + zIndexes.overlay + ";\n      background-color: var(--color-base-white);\n      overflow-y: auto;\n      scrollbar-width: none;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    ";
 });
-var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
-var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-white);\n  height: 140px;\n  width: 100%;\n  z-index: ", ";\n\n  @media ", " {\n    height: 60px;\n  }\n"])), zIndexes.navigation, devices.mobileAndTablet);
+var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
+var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-white);\n  height: 140px;\n  justify-content: space-evenly;\n  width: 100%;\n  z-index: ", ";\n\n  @media ", " {\n    height: 60px;\n  }\n"])), zIndexes.navigation, devices.mobileAndTablet);
 var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  height: 100px;\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref2) {
   var visible = _ref2.visible;
   return visible ? 'visible' : 'hidden';
@@ -5148,13 +5223,13 @@ var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$2
   var showSearch = _ref8.showSearch;
   return showSearch ? '110px' : '12px';
 });
-var LogoContainer = /*#__PURE__*/styled__default.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 80px;\n  }\n\n  span > svg path,\n  span > svg g path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
-var LogoContainerMobile = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 235px;\n    padding: 16px;\n\n    &&& .logoImg {\n      width: 235px;\n    }\n\n    span > svg path {\n      fill: var(--color-primary-black);\n    }\n  }\n"])), devices.mobileAndTablet);
-var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n  width: 100%;\n\n  @media ", " {\n  flex-direction: row;\n  justify-content: space-between;\n  height: 60px;\n  width 100%;\n  }\n"])), devices.mobileAndTablet);
-var NavWrapper = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 50%;\n  width: 100%;\n  gap: 32px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 60px;\n    width: 30%;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
-var NavContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 50%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  flex-gap: 32px;\n  width: fit-content;\n\n  @media ", " {\n    flex-gap: 0;\n    height: auto;\n    width: fit-content;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobileAndTablet);
+var LogoContainer = /*#__PURE__*/styled__default.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 80px;\n  }\n\n  span > svg path,\n  span > svg g path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var LogoContainerMobile = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n\n    span > svg path {\n      fill: var(--color-primary-black);\n    }\n  }\n"])), devices.mobileAndTablet);
+var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n  justify-content: space-evenly;\n  width: 100%;\n\n  @media ", " {\n  flex-direction: row;\n  justify-content: space-between;\n  height: 60px;\n  width 100%;\n  }\n"])), devices.mobileAndTablet);
+var NavWrapper = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 32px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 60px;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
+var NavContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  flex-gap: 32px;\n  width: fit-content;\n\n  @media ", " {\n    flex-gap: 0;\n    height: auto;\n    width: fit-content;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobileAndTablet);
 var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 50%;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 var NavTopContainerMobile = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    width: fit-content;\n    align-items: center;\n    height: 10%;\n    margin-left: 20px;\n    padding-bottom: 36px;\n  }\n"])), devices.mobileAndTablet);
 
 var _templateObject$y;
@@ -5176,7 +5251,7 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$z || (_te
 });
 var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n"])));
-var BasketInfo = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: max-content;\n  }\n"])), devices.mobileAndTablet);
+var BasketInfo = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  @media ", " {\n    width: max-content;\n  }\n"])), devices.mobileAndTablet);
 var BasketNum = /*#__PURE__*/styled__default.span(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-white);\n  font-size: 10px;\n  font-family: var(--font-family-sans);\n"])));
 var BasketText = /*#__PURE__*/styled__default.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  color: var(--color-primary-black);\n  margin-left: 6px;\n  text-decoration: none;\n"])));
 
@@ -5721,78 +5796,6 @@ var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$a || (_te
 var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-right: 8px;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
-// WARNING: Do not use this on server side rendering, it may throw an error.
-var isIOS = function isIOS() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
-    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
-    // iPad on iOS 13 detection
-    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-  } catch (e) {
-    console.warn('Error checking if device is iOS.', e);
-    return false;
-  }
-};
-// React hook version of isIOS (for server side rendering)
-var useIOS = function useIOS() {
-  var _useState = React.useState(false),
-    IOS = _useState[0],
-    setIOS = _useState[1];
-  React.useEffect(function () {
-    if (typeof navigator === undefined) return;
-    setIOS(isIOS());
-  }, []);
-  return IOS;
-};
-// Checks device size based on window width
-var isMobile = function isMobile() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof window === undefined) return false;
-    return window.innerWidth < breakpoints.sm;
-  } catch (e) {
-    console.warn('Error checking if device is mobile.', e);
-    return false;
-  }
-};
-// React hook version of isMobile (for server side rendering)
-var useMobile = function useMobile() {
-  var _useState2 = React.useState(false),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
-  React.useEffect(function () {
-    if (typeof window === undefined) return;
-    setMobile(isMobile());
-  }, []);
-  return mobile;
-};
-var useViewport = function useViewport() {
-  var _useState3 = React.useState({
-      width: window.innerWidth,
-      isMobile: window.innerWidth < breakpoints.sm,
-      isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
-      isDesktop: window.innerWidth >= breakpoints.md
-    }),
-    viewport = _useState3[0],
-    setViewport = _useState3[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      setViewport({
-        width: window.innerWidth,
-        isMobile: window.innerWidth < breakpoints.sm,
-        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
-        isDesktop: window.innerWidth >= breakpoints.md
-      });
-    };
-    window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  return viewport;
-};
-
 var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
     onClose = _ref.onClose,
@@ -6047,13 +6050,16 @@ var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templat
 
 var PolicyLinks = function PolicyLinks(_ref) {
   var items = _ref.items;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
     return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
       key: link.href + "-" + idx,
       target: link.href,
       href: link.href,
       "data-roh": link.dataRoh,
-      "aria-label": link.title
+      "aria-label": link.title,
+      tabIndex: isMobile ? 4 : undefined
     }, link.title);
   }));
 };
@@ -6073,7 +6079,9 @@ var Footer = function Footer(_ref) {
   var _useViewport = useViewport(),
     isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(FooterSection, {
-    className: className
+    className: className,
+    "aria-label": "Footer",
+    role: "contentinfo"
   }, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
     "data-testid": "policy-links"
   }, /*#__PURE__*/React__default.createElement(PolicyLinks, {
@@ -6084,14 +6092,16 @@ var Footer = function Footer(_ref) {
     items: rawSocialMediaLinks
   }), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
     href: contact.href,
-    "aria-label": contact.title
+    "aria-label": contact.title,
+    tabIndex: isMobile ? 2 : undefined
   }, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "large",
     color: "white"
   }, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
     href: newsletter.link.href,
     "data-roh": newsletter.link.dataRoh,
-    "aria-label": newsletter.link.title
+    "aria-label": newsletter.link.title,
+    tabIndex: isMobile ? 3 : undefined
   }, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "arts-logo"
   }, /*#__PURE__*/React__default.createElement("a", Object.assign({
@@ -8145,7 +8155,7 @@ var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$E || (_te
   var isClickable = _ref2.isClickable;
   return isClickable && "\n    :hover:not(:active) {\n      && svg path {\n        fill: var(--announcement-banner-hover-color);\n      }\n    }\n    :active {\n      && svg path {\n        fill: var(--announcement-banner-pressed-color);\n      }\n    }\n  ";
 });
-var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-sans);\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  color: var(--announcement-banner-color);\n  a {\n    color: var(--announcement-banner-color);\n    text-decoration: underline;\n  }\n"])));
+var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-sans);\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  color: var(--announcement-banner-color);\n  a {\n    color: var(--announcement-banner-color);\n    text-decoration: underline;\n  }\n\n  * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n"])));
 var OverlineWrapper = /*#__PURE__*/styled__default(HarmonicOverline)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 4px;\n  && {\n    color: var(--announcement-banner-color);\n  }\n"])));
 var BannerContentWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    grid-column: 3 / span 10;\n  }\n\n  @media ", ", ", " {\n    && {\n      grid-column: 3 / span 12;\n    }\n  }\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
   var variant = _ref3.variant;