@royaloperahouse/harmonic 0.5.1-a → 0.6.0

package/dist/harmonic.cjs.development.css

@@ -343,325 +343,6 @@
   font-display: swap;
 }
 
-/* ~~~~~ General Styling Classes ~~~~~ */
-.typography_color-primary__LOfDi {
-  color: var(--color-primary);
-}
-
-.typography_color-black__6MHRL {
-  color: var(--color-base-black);
-}
-
-.typography_color-white__PfW5s {
-  color: var(--color-base-white);
-}
-
-.typography_color-red__iPlbG {
-  color: var(--color-primary-red);
-}
-
-.typography_color-grey__GA1c2 {
-  color: var(--color-base-dark-grey);
-}
-
-.typography_color-inherit__RDd0Y {
-  color: inherit;
-}
-
-.typography_em__E6tX- {
-  font-style: italic;
-}
-/* ~~~ */
-
-/* Display Headers */
-.typography_display__-F3p4 {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  line-height: 100%;
-
-  &.typography_large__uq0zC {
-    font-size: 96px;
-    font-weight: 700;
-    letter-spacing: -5px;
-  }
-
-  &.typography_small__wfQ0K {
-    font-size: 68px;
-    font-weight: 500;
-    letter-spacing: -3px;
-  }
-
-  /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
-    font-family: var(--font-family-serif);
-    font-weight: 500;
-  }
-
-  /* Serif and Italic adjustments */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
-    letter-spacing: -3px;
-  }
-
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
-    letter-spacing: -2px;
-  }
-
-  @media (max-width: 699px) {
-    &.typography_large__uq0zC {
-      font-size: 38px;
-      letter-spacing: -1.5px;
-    }
-
-    &.typography_small__wfQ0K {
-      font-size: 32px;
-      letter-spacing: -1.5px;
-    }
-
-    &.typography_large__uq0zC.typography_serif__VSO38,
-    &.typography_large__uq0zC.typography_em__E6tX-,
-    &.typography_small__wfQ0K.typography_serif__VSO38,
-    &.typography_small__wfQ0K.typography_em__E6tX- {
-      letter-spacing: -0.5px;
-    }
-  }
-}
-
-/* Headers */
-.typography_header__BexiD {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-weight: 500;
-
-  &.typography_large__uq0zC {
-    font-size: 44px;
-    line-height: 48px;
-    letter-spacing: -1.5px;
-  }
-
-  &.typography_medium__K0uZD {
-    font-size: 34px;
-    line-height: 40px;
-    letter-spacing: -1px;
-  }
-
-  &.typography_small__wfQ0K {
-    font-size: 26px;
-    line-height: 32px;
-    letter-spacing: -0.5px;
-  }
-
-  /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
-    font-family: var(--font-family-serif);
-  }
-
-  /* Serif and Italic letter-spacing overrides */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
-    letter-spacing: -0.5px;
-  }
-
-  &.typography_medium__K0uZD.typography_serif__VSO38,
-  &.typography_medium__K0uZD.typography_em__E6tX- {
-    letter-spacing: -0.5px;
-  }
-
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
-    letter-spacing: -0.5px;
-  }
-
-  @media (max-width: 699px) {
-    &.typography_large__uq0zC {
-      font-size: 28px;
-      line-height: 34px;
-      letter-spacing: -1.5px;
-    }
-
-    &.typography_medium__K0uZD {
-      font-size: 24px;
-      line-height: 28px;
-      letter-spacing: -1px;
-    }
-
-    &.typography_small__wfQ0K {
-      font-size: 20px;
-      line-height: 26px;
-      letter-spacing: -0.75px;
-    }
-
-    /* Mobile overrides for serif/italic letter-spacing */
-    &.typography_large__uq0zC.typography_serif__VSO38,
-    &.typography_large__uq0zC.typography_em__E6tX-,
-    &.typography_medium__K0uZD.typography_serif__VSO38,
-    &.typography_medium__K0uZD.typography_em__E6tX-,
-    &.typography_small__wfQ0K.typography_serif__VSO38,
-    &.typography_small__wfQ0K.typography_em__E6tX- {
-      letter-spacing: -0.5px;
-    }
-  }
-}
-
-/* Subtitle */
-.typography_subtitle__aoFTV {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-weight: 500;
-
-  &.typography_large__uq0zC {
-    font-size: 19px;
-    line-height: 26px;
-    letter-spacing: -0.5px;
-  }
-
-  &.typography_small__wfQ0K {
-    font-size: 17px;
-    line-height: 24px;
-    letter-spacing: -0.5px;
-  }
-
-  @media (max-width: 699px) {
-    &.typography_large__uq0zC {
-      font-size: 17px;
-      line-height: 24px;
-      letter-spacing: -0.5px;
-    }
-
-    &.typography_small__wfQ0K {
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: -0.2px;
-    }
-  }
-}
-
-/* Body Copy */
-.typography_bodycopy__vYtQ8 {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-weight: 400;
-
-  &.typography_large__uq0zC {
-    font-size: 19px;
-    line-height: 26px;
-    letter-spacing: -0.5px;
-  }
-
-  &.typography_medium__K0uZD {
-    font-size: 17px;
-    line-height: 24px;
-    letter-spacing: -0.5px;
-  }
-
-  &.typography_small__wfQ0K {
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: -0.5px;
-  }
-
-  @media (max-width: 699px) {
-    &.typography_large__uq0zC {
-      font-size: 17px;
-      line-height: 24px;
-      letter-spacing: -0.5px;
-    }
-
-    &.typography_medium__K0uZD {
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: -0.2px;
-    }
-
-    &.typography_small__wfQ0K {
-      font-size: 11px;
-      line-height: 16px;
-      letter-spacing: -0.2px;
-    }
-  }
-}
-
-/* Overline */
-.typography_overline__EnUK3 {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-weight: 500;
-  text-transform: uppercase;
-
-  &.typography_large__uq0zC {
-    font-size: 14px;
-    line-height: 18px;
-    letter-spacing: 0.3px;
-  }
-
-  &.typography_small__wfQ0K {
-    font-size: 12px;
-    line-height: 14px;
-    letter-spacing: 0.2px;
-  }
-
-  @media (max-width: 699px) {
-    &.typography_large__uq0zC {
-      line-height: 17px;
-      letter-spacing: 0.3px; /* Added to ensure it stays */
-    }
-
-    &.typography_small__wfQ0K {
-      line-height: 14px;
-      letter-spacing: 0.3px;
-    }
-  }
-}
-
-/* Button Text */
-.typography_buttontext__vcxNi {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-size: 17px;
-  line-height: 20px;
-  letter-spacing: -0.5px;
-  font-weight: 400;
-
-  @media (max-width: 699px) {
-    font-weight: 500;
-    line-height: 17px;
-  }
-}
-
-/* Caption Text */
-.typography_captiontext__91UFb {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-weight: 400;
-  font-size: 17px;
-  line-height: 24px;
-  letter-spacing: -0.5px;
-
-  @media (max-width: 699px) {
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: -0.2px;
-  }
-}
-
-/* Navigation Text */
-.typography_navigationtext__YfGf7 {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-size: 19px;
-  line-height: 19px;
-  letter-spacing: 0.4px;
-  font-weight: 500;
-
-  @media (max-width: 699px) {
-    font-size: 17px;
-    line-height: 17px;
-  }
-}
-
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */

package/dist/harmonic.cjs.development.js

@@ -2939,7 +2939,7 @@ var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3 || (_te
 
 var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
 var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref) {
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   if (active) {
     return "\n      & {\n        color: var(--color-primary-red);\n      }\n      && svg path {\n        fill: var(--color-primary-red);\n      } \n      ";
@@ -2947,12 +2947,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_tem
   return '';
 });
 var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
-  as: 'button'
+  as: 'a'
 })(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var IconWrapper = /*#__PURE__*/styled__default.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n\n  span > svg path {\n    fill: var(--color-primary-black);\n  }\n"])));
 
 /* eslint-disable no-useless-return */
-var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var ControlledDropdown = function ControlledDropdown(_ref) {
   var text = _ref.text,
     options = _ref.options,
     active = _ref.active,
@@ -2960,22 +2960,32 @@ var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onOptionClick = _ref.onOptionClick,
     _onMouseEnter = _ref.onMouseEnter,
     _onMouseLeave = _ref.onMouseLeave,
-    _onFocusLeave = _ref.onFocusLeave,
     onReset = _ref.onReset,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
     className = _ref.className;
-  ControlledDropdown.displayName = 'ControlledDropdown';
-  var internalRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return internalRef.current;
-  });
-  var resetHandler = function resetHandler() {
+  var ref = React.useRef();
+  var resetHandler = React.useCallback(function () {
     return onReset == null ? void 0 : onReset();
-  };
-  var isDropdown = React.useMemo(function () {
-    return !!(options != null && options.length);
-  }, [options]);
+  }, []);
+  React.useEffect(function () {
+    if (window.innerWidth > breakpoints.sm) {
+      var mouseClickHandler = function mouseClickHandler(e) {
+        var _ref$current;
+        if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
+          return;
+        } else if (active) {
+          resetHandler();
+        }
+      };
+      document.addEventListener('click', mouseClickHandler);
+      return function () {
+        document.removeEventListener('click', mouseClickHandler);
+      };
+    }
+    // eslint-disable-next-line consistent-return
+    return;
+  }, [ref, resetHandler, active]);
   var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
     if (e.key === 'Enter') {
       onOptionClick == null || onOptionClick(link);
@@ -2995,15 +3005,13 @@ var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref,
       _onBlur == null || _onBlur();
     }
   };
+  var isDropdown = !!(options != null && options.length);
   var wrapperEvents = {
     onMouseEnter: function onMouseEnter() {
       return _onMouseEnter == null ? void 0 : _onMouseEnter();
     },
     onMouseLeave: function onMouseLeave() {
       return _onMouseLeave == null ? void 0 : _onMouseLeave();
-    },
-    onFocusLeave: function onFocusLeave() {
-      return _onFocusLeave == null ? void 0 : _onFocusLeave();
     }
   };
   var headerEvents = {
@@ -3019,51 +3027,21 @@ var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref,
     },
     onKeyDown: handleHeaderKeyDown
   };
-  React.useEffect(function () {
-    var mouseEvent = function mouseEvent(e) {
-      var _internalRef$current;
-      if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
-      if (active) resetHandler();
-    };
-    if (window.innerWidth > breakpoints.sm) {
-      document.addEventListener('click', mouseEvent);
-    }
-    return function () {
-      document.removeEventListener('click', mouseEvent);
-    };
-  }, [resetHandler, active]);
-  React.useEffect(function () {
-    var handleFocusOut = function handleFocusOut(e) {
-      if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
-        _onFocusLeave == null || _onFocusLeave();
-      }
-    };
-    var node = internalRef.current;
-    if (node) node.addEventListener('focusout', handleFocusOut);
-    return function () {
-      return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
-    };
-  }, [_onFocusLeave]);
   return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
-    ref: internalRef
+    ref: ref
   }, wrapperEvents, {
     className: className
   }), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
     active: active
   }, headerEvents, {
-    "data-testid": "span-container",
-    role: "menuitem",
-    "aria-controls": "dropdown-menu",
-    "aria-haspopup": "menu",
-    "aria-expanded": active
+    tabIndex: 0,
+    "data-testid": "span-container"
   }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
     "data-testid": "dropdown-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
   }))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
-    withOptionsInMobile: true,
-    role: "menu",
-    id: "dropdown-menu"
+    withOptionsInMobile: true
   }, options.map(function (optionItem, index) {
     return /*#__PURE__*/React__default.createElement(OptionItem, {
       key: "key-" + index + "-" + optionItem.option,
@@ -3077,17 +3055,15 @@ var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref,
       onBlur: function onBlur() {
         return handleOptionBlur(index);
       },
-      href: optionItem.optionLink,
-      role: "menuitem"
+      href: optionItem.optionLink
     }, optionItem.option);
   }))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
     active: active
   }, headerEvents, {
     "data-testid": "link-container",
-    role: "menuitem",
     tabIndex: 0
   }), text)));
-});
+};
 
 var _templateObject$8;
 var Grid = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  grid-template-rows: max-content;\n  gap: var(--grid-column-gap);\n  margin: 0;\n"])));
@@ -3771,7 +3747,6 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId,
     color = _ref.color;
   var clickHandler = function clickHandler() {
     if (onClick) {
@@ -3802,9 +3777,8 @@ var Tab = function Tab(_ref) {
     tabIndex: 0,
     className: className
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    id: tabLinkId,
-    trimText: trimText,
     color: color,
+    trimText: trimText,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -5367,7 +5341,6 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
@@ -5464,7 +5437,6 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
-      tabLinkId: tabLinkId,
       trimText: trimTabText,
       title: title,
       titleLink: titleLink,
@@ -5544,8 +5516,7 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className,
-    tabLinkId: "account-link"
+    className: className
   });
 };
 
@@ -5614,7 +5585,6 @@ var Tabs = function Tabs(_ref) {
   var _useState3 = React.useState(-1),
     hoverOverDropdown = _useState3[0],
     setHoverOverDropdown = _useState3[1];
-  var dropdownRefs = React.useRef([]);
   var onClickHandler = function onClickHandler(value) {
     setOpenMenu(value);
     if (onShowMenu) {
@@ -5654,25 +5624,23 @@ var Tabs = function Tabs(_ref) {
       setHoverOverDropdown(-1);
     }
   };
-  var onDropdownFocusLeave = function onDropdownFocusLeave() {
-    onResetActive();
+  var _onFocus = function onFocus(i) {
+    return setActiveDropdown(i);
   };
-  var handleBlur = function handleBlur(index) {
-    var currentDropdown = dropdownRefs.current[index];
-    var active = document.activeElement;
-    if (currentDropdown && (!active || !currentDropdown.contains(active))) {
+  var _onBlur = function onBlur(i) {
+    var _items$length;
+    if (i === ((_items$length = items == null ? void 0 : items.length) != null ? _items$length : 0) - 1) {
       onResetActive();
     }
   };
   return /*#__PURE__*/React__default.createElement(TabsContainer, {
-    role: "menubar",
     className: className
   }, /*#__PURE__*/React__default.createElement(ItemsContainer, {
     showMenu: showMenu
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
       key: "key-" + item.title,
-      text: item.title || '',
+      text: item.title,
       options: item.options,
       onClick: function onClick() {
         return onDropdownClick(index, item.titleLink);
@@ -5684,17 +5652,14 @@ var Tabs = function Tabs(_ref) {
       onMouseLeave: function onMouseLeave() {
         return onDropdownMouseLeave();
       },
-      onFocusLeave: function onFocusLeave() {
-        return onDropdownFocusLeave();
+      onFocus: function onFocus() {
+        return _onFocus(index);
       },
       onBlur: function onBlur() {
-        return handleBlur(index);
+        return _onBlur(index);
       },
       onReset: onResetActive,
-      active: isActiveDropdown(index),
-      ref: function ref(el) {
-        dropdownRefs.current[index] = el;
-      }
+      active: isActiveDropdown(index)
     });
   })), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
     "data-testid": "mobile-menu-close",