@royaloperahouse/harmonic 0.1.8-k → 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({
@@ -7316,6 +7326,8 @@ var GRID_VALUES = {
   desktop: {
     gapsNumber: 13,
     columnsNumber: 13,
+    gapsNumberOffset: 15,
+    columnsNumberOffset: 14,
     largeCard: {
       gapsPerSlide: 4,
       columnsPerSlide: 5
@@ -7343,16 +7355,20 @@ var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
   return "calc(" + GRID_COLUMN_GAP + " * " + gapsPerSlide + ")";
 };
 // Slide styles
-var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type) {
+var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
   var _GRID_VALUES$desktop = GRID_VALUES.desktop,
     gapsNumber = _GRID_VALUES$desktop.gapsNumber,
-    columnsNumber = _GRID_VALUES$desktop.columnsNumber;
+    columnsNumber = _GRID_VALUES$desktop.columnsNumber,
+    columnsNumberOffset = _GRID_VALUES$desktop.columnsNumberOffset,
+    gapsNumberOffset = _GRID_VALUES$desktop.gapsNumberOffset;
   var _ref = type === exports.CarouselType.LargeCard ? GRID_VALUES.desktop.largeCard : GRID_VALUES.desktop.smallCard,
     gapsPerSlide = _ref.gapsPerSlide,
     columnsPerSlide = _ref.columnsPerSlide;
-  var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gapsNumber);
+  var columns = isActive ? columnsNumberOffset : columnsNumber;
+  var gaps = isActive ? gapsNumberOffset : gapsNumber;
+  var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gaps);
   var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
-  return "\n      width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columnsNumber + ") + " + slideGapsSpace + " );\n      margin-right: " + GRID_COLUMN_GAP + ";\n    ";
+  return "\n      width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n      margin-right: " + GRID_COLUMN_GAP + ";\n    ";
 };
 var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
   var _GRID_VALUES$mobile = GRID_VALUES.mobile,
@@ -7376,8 +7392,9 @@ var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$N ||
   return "&&& {\n        .swipe-slide > figure {\n          " + getImageSlideStyles(imagesHeightDevice) + "\n        }\n      }";
 });
 var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n}}"])), function (_ref3) {
-  var type = _ref3.type;
-  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type) + "\n        }\n      }\n    ";
+  var type = _ref3.type,
+    isActive = _ref3.isActive;
+  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n    ";
 }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
 var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile, devices.mobile);
 var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
@@ -7395,10 +7412,12 @@ var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject8$5
 var _templateObject$O, _templateObject2$B;
 var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
 var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
-var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", "px);\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (props) {
-  return props.transitioning ? 'transform 0.3s ease-in-out' : 'none';
-}, function (props) {
-  return props.translateX;
+var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", ");\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
+  var transitioning = _ref.transitioning;
+  return transitioning ? 'transform 0.3s ease' : 'none';
+}, function (_ref2) {
+  var translateX = _ref2.translateX;
+  return translateX + "px";
 }, SWIPE_SLIDE_CLASS_NAME);
 
 /**
@@ -7426,9 +7445,26 @@ var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, co
   }
   return visible;
 };
+var getMovedSlides = function getMovedSlides(delta, slideWidths) {
+  var absDelta = Math.abs(delta);
+  var movedSlides = 0;
+  var accumulated = 0;
+  for (var i = 0; i < slideWidths.length; i++) {
+    accumulated += slideWidths[i];
+    // Allow partial slide (e.g. 50% of next slide) to count
+    var partialThreshold = slideWidths[i] * 0.5;
+    if (absDelta > accumulated - partialThreshold) {
+      movedSlides++;
+    } else {
+      break;
+    }
+  }
+  return movedSlides;
+};
 
-var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore"];
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "onActiveChange"];
 var MAX_CLONES_NUMBER = 6;
+var CLICK_DRAG_THRESHOLD = 20;
 var getClonesCount = function getClonesCount(infinite, childrenLength) {
   if (!infinite) return 0;
   if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
@@ -7448,13 +7484,29 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onIndexChange = _ref.onIndexChange,
     _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
     slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
+    onActiveChange = _ref.onActiveChange,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var containerRef = React.useRef(null);
   var childRefs = React.useRef([]);
   var startX = React.useRef(0);
   var currentTranslate = React.useRef(0);
   var isDragging = React.useRef(false);
+  var isMouseDown = React.useRef(false);
+  var isActive = React.useRef(false);
+  var isClickPrevented = React.useRef(false);
   var uniqueIdRef = React.useRef(generateDomElementId());
+  var _useState = React.useState(null),
+    dragTranslateX = _useState[0],
+    setDragTranslateX = _useState[1];
+  var _useState2 = React.useState(false),
+    transitioning = _useState2[0],
+    setTransitioning = _useState2[1];
+  var _useState3 = React.useState([]),
+    slideWidths = _useState3[0],
+    setSlideWidths = _useState3[1];
+  var _useState4 = React.useState(0),
+    containerWidth = _useState4[0],
+    setContainerWidth = _useState4[1];
   var _useMemo = React.useMemo(function () {
       var count = getClonesCount(infinite, children.length);
       var leftClones = infinite ? children.slice(-count) : [];
@@ -7467,65 +7519,74 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, [children, infinite]),
     slides = _useMemo.slides,
     clonesCount = _useMemo.clonesCount;
-  // Set the initial index to clonesCount (so the first real slide is shown)
-  var _useState = React.useState(infinite ? clonesCount : 0),
-    currentIndex = _useState[0],
-    setCurrentIndex = _useState[1];
-  var _useState2 = React.useState(false),
-    transitioning = _useState2[0],
-    setTransitioning = _useState2[1];
-  var _useState3 = React.useState([]),
-    slideWidths = _useState3[0],
-    setSlideWidths = _useState3[1];
-  var _useState4 = React.useState(0),
-    containerWidth = _useState4[0],
-    setContainerWidth = _useState4[1];
+  var _useState5 = React.useState(infinite ? clonesCount : 0),
+    currentIndex = _useState5[0],
+    setCurrentIndex = _useState5[1];
   React.useEffect(function () {
     if (!onIndexChange) return;
     if (!infinite) {
       onIndexChange(currentIndex);
-      return;
+    } else {
+      var offset = currentIndex - clonesCount + children.length;
+      var realIndex = offset % children.length;
+      onIndexChange(realIndex);
     }
-    var offset = currentIndex - clonesCount + children.length;
-    var realIndex = offset % children.length;
-    onIndexChange(realIndex);
-  }, [currentIndex, onIndexChange, infinite, children.length]);
-  // Update dimensions
+  }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
   var updateDimensions = React.useCallback(function () {
     if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
     if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
   }, []);
   React.useEffect(function () {
-    var animationFrameRequestId = requestAnimationFrame(function () {
-      updateDimensions();
-    });
+    var animationFrameRequestId = requestAnimationFrame(updateDimensions);
     return function () {
-      cancelAnimationFrame(animationFrameRequestId);
+      return cancelAnimationFrame(animationFrameRequestId);
     };
   }, [children]);
   React.useEffect(function () {
     var observer = new ResizeObserver(updateDimensions);
     if (containerRef.current) observer.observe(containerRef.current);
     return function () {
-      observer.disconnect();
+      return observer.disconnect();
     };
   }, [children]);
-  // Compute current translate X value by summing widths of all slides before currentIndex.
+  var setIsActive = function setIsActive() {
+    if (!isActive.current) {
+      isActive.current = true;
+      onActiveChange == null || onActiveChange(true);
+    }
+  };
   var getTranslateX = function getTranslateX() {
-    var slideOffset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
+    var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
       return acc + width;
     }, 0);
-    return slideOffset + (slidesOffsetBefore || 0); // Apply offsetBefore
+    return offset + (slidesOffsetBefore || 0);
+  };
+  var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
+    var delta = currentTranslate.current - getTranslateX();
+    var direction = delta > 0 ? -1 : 1;
+    var movedSlides = getMovedSlides(delta, slideWidths);
+    if (Math.abs(delta) > 20) {
+      movedSlides = Math.max(1, movedSlides);
+      var targetIndex = currentIndex + direction * movedSlides;
+      var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
+      setTransitioning(true);
+      setCurrentIndex(finalIndex);
+    } else {
+      setTransitioning(true);
+      setCurrentIndex(function (prev) {
+        return prev;
+      });
+    }
+    setDragTranslateX(null);
   };
   var canMoveNext = function canMoveNext() {
     var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
       return acc + width;
     }, 0);
-    // In non-infinite mode, only move if there is more to show
     return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
   };
   var handleTransitionEnd = function handleTransitionEnd() {
-    setTransitioning(false); // Reset transitioning after animation ends
+    setTransitioning(false);
     if (!infinite) return;
     if (currentIndex >= children.length + clonesCount) {
       setCurrentIndex(clonesCount);
@@ -7534,22 +7595,16 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var goToPrev = function goToPrev() {
-    if (transitioning) return; // Prevent clicks during transition
-    if (currentIndex === 0 && !infinite) {
-      setTransitioning(false); // Reset immediately if no more slides
-      return;
-    }
+    if (transitioning) return;
+    setIsActive();
     setTransitioning(true);
     setCurrentIndex(function (prev) {
       return infinite ? prev - 1 : Math.max(0, prev - 1);
     });
   };
   var goToNext = function goToNext() {
-    if (transitioning || !canMoveNext()) return; // Prevent clicks during transition
-    if (currentIndex === children.length - 1 && !infinite) {
-      setTransitioning(false); // Reset immediately if no more slides
-      return;
-    }
+    if (transitioning || !canMoveNext()) return;
+    setIsActive();
     setTransitioning(true);
     setCurrentIndex(function (prev) {
       return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
@@ -7562,26 +7617,70 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   });
   var handleTouchStart = function handleTouchStart(e) {
+    setIsActive();
     startX.current = e.touches[0].clientX;
     isDragging.current = true;
+    isClickPrevented.current = false;
     setTransitioning(false);
   };
   var handleTouchMove = function handleTouchMove(e) {
     if (!isDragging.current) return;
     var deltaX = e.touches[0].clientX - startX.current;
-    currentTranslate.current = getTranslateX() + deltaX;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
+    }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
   };
   var handleTouchEnd = function handleTouchEnd() {
     isDragging.current = false;
-    setTransitioning(true);
-    if (currentTranslate.current > getTranslateX()) {
-      goToPrev();
-    } else if (currentTranslate.current < getTranslateX()) {
-      goToNext();
+    navigateOnSwipeEnd();
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!isDragging.current || !isMouseDown.current || transitioning) return;
+    var deltaX = e.clientX - startX.current;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
+    }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
+  };
+  var _handleMouseUp = function handleMouseUp() {
+    if (!isDragging.current || !isMouseDown.current) return;
+    isDragging.current = false;
+    isMouseDown.current = false;
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', _handleMouseUp);
+    if (!isClickPrevented.current) {
+      setDragTranslateX(null);
+      return;
     }
+    navigateOnSwipeEnd();
+  };
+  var handleMouseDown = function handleMouseDown(e) {
+    if (transitioning || e.button !== 0) return;
+    e.preventDefault();
+    setIsActive();
+    startX.current = e.clientX;
+    isDragging.current = true;
+    isMouseDown.current = true;
+    isClickPrevented.current = false;
+    setTransitioning(false);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', _handleMouseUp);
   };
   var onSlideFocus = function onSlideFocus(isVisible, index) {
-    if (!isVisible) setCurrentIndex(index);
+    if (!isVisible) {
+      setCurrentIndex(index);
+    }
+  };
+  var onClickCapture = function onClickCapture(e) {
+    if (isClickPrevented.current) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
   };
   var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
   return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
@@ -7589,11 +7688,12 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd,
+    onMouseDown: handleMouseDown,
     className: "swipe"
   }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
     className: "swipe-track-wrapper",
-    translateX: getTranslateX(),
-    transitioning: transitioning,
+    translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
+    transitioning: transitioning && dragTranslateX === null,
     onTransitionEnd: handleTransitionEnd
   }, slides.map(function (child, index) {
     var isVisible = visibleIndexes.includes(index);
@@ -7606,7 +7706,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       onFocus: function onFocus() {
         return onSlideFocus(isVisible, index);
-      }
+      },
+      onClickCapture: onClickCapture
     });
   })));
 });
@@ -7660,19 +7761,23 @@ var Carousel = function Carousel(_ref) {
   }, [useOffset, active]);
   var onNext = function onNext() {
     var _swipeRef$current;
-    if (useOffset && !active) setActive(true);
     (_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
   };
   var onPrev = function onPrev() {
     var _swipeRef$current2;
-    if (useOffset && !active) setActive(true);
     (_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
   };
+  var onActiveChangeHandler = function onActiveChangeHandler(value) {
+    if (useOffset && !active) {
+      setActive(value);
+    }
+  };
   var carouselTitleId = "carousel-title-" + title;
   var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
   return /*#__PURE__*/React__default.createElement(Wrapper, {
     className: className,
     type: type,
+    isActive: active,
     imagesHeightDevice: imagesHeightDevice,
     imagesHeightDesktop: imagesHeightDesktop,
     role: "region",
@@ -7711,6 +7816,9 @@ var Carousel = function Carousel(_ref) {
     columnStartDevice: 2,
     columnSpanDevice: 13
   }, /*#__PURE__*/React__default.createElement(Swipe, {
+    onActiveChange: function onActiveChange(value) {
+      return onActiveChangeHandler(value);
+    },
     "data-testid": "carousel-swipe",
     ref: swipeRef,
     infinite: infinite,
@@ -8047,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;