@royaloperahouse/harmonic 0.17.0-c → 0.17.0-e

package/dist/harmonic.esm.js

@@ -7675,7 +7675,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
 
 var _templateObject$U, _templateObject2$I;
 var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
-var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n  padding-inline-start: 2px;\n  padding-block-start: 2px;\n"])));
+var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
 var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__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';
@@ -8021,7 +8021,7 @@ var HighlightsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_
   var hasMultipleImages = _ref3.hasMultipleImages;
   return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
 }, devices.mobile);
-var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin-bottom: 8px;\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white);\n    }\n\n    & {\n      display: flex;\n      margin-left: 100px;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.mobile);
+var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin-top: 8px;\n  margin-bottom: 8px;\n\n  @media ", " {\n    div {\n      background-color: var(--color-base-black);\n    }\n    svg path {\n      fill: var(--color-base-white) !important;\n    }\n\n    & {\n      display: flex;\n      margin-left: 100px;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.mobile);
 var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
@@ -10947,7 +10947,7 @@ var FocusableTab = /*#__PURE__*/styled(Tab)(_templateObject$1g || (_templateObje
   var hide = _ref.hide;
   return hide && "display: none;";
 }, devices.mobileAndTablet);
-var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px var(--base-color-light-grey);\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    position: absolute;\n    border-bottom: 0;\n    padding: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n    position: absolute;\n    padding: 0;\n  }\n"])), devices.mobileAndTablet);
+var HiddenBlock = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 29px 50px;\n  display: inline-block;\n  width: 100%;\n  height: fit-content;\n  border-bottom: solid 2px var(--color-base-light-grey);\n  overflow: hidden;\n  &:not(:has(div:focus)) {\n    position: absolute;\n    border-bottom: 0;\n    padding: 0;\n  }\n  @media ", " {\n    border-bottom: 0;\n    position: absolute;\n    padding: 0;\n  }\n"])), devices.mobileAndTablet);
 
 /**
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11994,7 +11994,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
 };
 
 var _templateObject$1q, _templateObject2$16, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$g, _templateObject9$a;
-var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }}\n  \n  &:fullscreen {\n    background: var(--color-base-white);\n    padding-top: 44px;\n    padding-bottom: 84px;\n\n    .swipe-slide > figure {\n        height: var(--fullscreen-figure-height);\n\n        > div {\n          height: var(--fullscreen-figure-height);\n        }\n    }\n  }\n"])), function (_ref) {
+var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    ", "\n  }}\n\n  &:fullscreen {\n    background: var(--color-base-white);\n    padding-top: 44px;\n    padding-bottom: 84px;\n\n    .swipe-slide > figure {\n        height: var(--fullscreen-figure-height);\n\n        > div {\n          height: var(--fullscreen-figure-height);\n        }\n    }\n  }\n"])), function (_ref) {
   var imagesHeightDesktop = _ref.imagesHeightDesktop;
   return "& {\n      .swipe-slide {\n        height: fit-content;\n        width: auto;\n        margin-right: var(--grid-column-gap);\n\n        > figure {\n          margin: 0px;\n          " + getImageSlideStyles(imagesHeightDesktop) + "\n\n          > div {\n            " + getImageSlideStyles(imagesHeightDesktop) + "\n          }\n        }\n      }\n    }";
 }, devices.mobile, function (_ref2) {
@@ -12015,7 +12015,7 @@ var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObj
 var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n"])));
 var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n"])));
 var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
-var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  @media ", " {\n    grid-column: ", ";\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
+var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .swipe {\n    padding-inline-start: 2px;\n    padding-block-start: 2px;\n  }\n\n  ", ";\n\n  @media ", " {\n    grid-column: ", ";\n  }\n\n  @media ", " {\n    grid-column: 2 / span 13;\n  }\n"])), function (_ref5) {
   var active = _ref5.active;
   return active ? 'grid-column: 1 / span 16' : '';
 }, devices.tablet, function (_ref6) {