@royaloperahouse/harmonic 1.0.8 → 1.0.9

package/dist/harmonic.esm.js

@@ -764,6 +764,40 @@ var Tick = (function (_ref) {
   }));
 });
 
+var Expand16px = (function (_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
+    ariaLabel = _ref.ariaLabel;
+  return /*#__PURE__*/createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "1.5 1.5 9.5 9.5",
+    fill: "none",
+    "aria-label": ariaLabel,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/createElement("path", {
+    d: "M6.44531 6.08203V1.83203H5.94531V6.08203H1.69531V6.58203H5.94531V10.832H6.44531V6.58203H10.6953V6.08203H6.44531Z",
+    fill: color
+  }));
+});
+
+var Remove16px = (function (_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
+    ariaLabel = _ref.ariaLabel;
+  return /*#__PURE__*/createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "1.5 1.2 10.5 10.5",
+    width: "16",
+    height: "16",
+    fill: "none",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/createElement("g", null, /*#__PURE__*/createElement("path", {
+    d: "M7.75597 6.26964L11.6954 2.33019L10.6348 1.26953L6.69531 5.20898L2.75586 1.26953L1.6952 2.33019L5.63465 6.26964L1.63477 10.2695L2.69543 11.3302L6.69531 7.33031L10.6952 11.3302L11.7559 10.2695L7.75597 6.26964Z",
+    fill: color
+  })));
+});
+
 var AddToMyList = (function (_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
@@ -2608,6 +2642,7 @@ var IconLibrary = {
   Email: Email,
   Expand: Expand,
   Expand12px: Expand12px,
+  Expand16px: Expand16px,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
   FamilyFriendly: FamilyFriendly,
@@ -2645,6 +2680,7 @@ var IconLibrary = {
   Reminder: Reminder,
   Remove: Remove,
   Remove12px: Remove12px,
+  Remove16px: Remove16px,
   Restart: Restart,
   Search: Search,
   Seat: Seat,
@@ -6083,7 +6119,7 @@ var CardContainer = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
   return isCardClickable ? 'pointer' : 'default';
 }, function (_ref2) {
   var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
-  return !onlyShowButtonsOnHover ? "height: 100%;\n       display: flex;\n       flex-direction: column;\n       justify-content: space-between;  \n    " : '';
+  return !onlyShowButtonsOnHover ? "height: 100%;\n       display: flex;\n       flex-direction: column;\n       justify-content: space-between;\n    " : '';
 });
 var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n  background-color: var(--button-bg-color);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
   var lineColor = _ref3.lineColor;
@@ -6116,7 +6152,7 @@ var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject1$1 || (_temp
   var fullWidth = _ref9.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var LabelElements = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 26px;\n  padding: 0 8px;\n  background-color: ", ";\n"])), function (_ref0) {
+var LabelElements = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 26px;\n  padding: 0 8px;\n  background-color: ", ";\n  && * {\n    text-transform: var(--text-transform-body);\n  }\n"])), function (_ref0) {
   var bgColor = _ref0.bgColor;
   return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
 });
@@ -12096,7 +12132,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, []);
   useEffect(function () {
     var scrollTriggerCheck = function scrollTriggerCheck() {
-      var elementGap = 100;
+      var elementGap = LIST_ITEM_GAP;
       var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
         var targetSectionElement = document.getElementById(item.id);
         if (!targetSectionElement) return false;
@@ -12119,7 +12155,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
           offsetWidth = tabLinkElement.offsetWidth;
         var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
         if (!isInView && tabListRef != null && tabListRef.current) {
-          tabListRef.current.scrollLeft = offsetLeft;
+          tabListRef.current.scrollLeft = offsetLeft - LIST_ITEM_GAP;
         }
         setSelectedItem(reachedItem.id);
       }
@@ -12602,7 +12638,7 @@ var TitleWrapper$5 = /*#__PURE__*/styled.div(_templateObject5$E || (_templateObj
   return isDescriptionPresent && 'margin: 20px 0';
 });
 var TitleText$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    line-height: 42px;\n  }\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  padding-top: 4px;\n  box-sizing: border-box;\n  /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n  max-height: calc(2 * 40px + 4px);\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 ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    margin-right: var(--navigation-middle-gap);\n  }\n"])), devices.mobile);
 var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 2 / span 10;\n  }\n"])), devices.tablet);
 var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__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;