@royaloperahouse/harmonic 0.5.1-a → 0.6.0-a

package/dist/components/organisms/Navigation/Navigation.style.d.ts

@@ -15,7 +15,7 @@ export declare const MobileMenuContainer: import("styled-components").StyledComp
     showSearch?: boolean | undefined;
 }, never>;
 export declare const LogoContainer: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const LogoContainerMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoContainerMobile: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NavWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NavContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/harmonic.cjs.development.js

@@ -374,7 +374,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
     size = _ref2.size,
     em = _ref2.em,
     _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'primary' : _ref2$color,
+    color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
     serif = _ref2.serif,
     Tag = _ref2.hierarchy,
     className = _ref2.className;
@@ -394,7 +394,7 @@ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
   var children = _ref3.children,
     size = _ref3.size,
     _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
+    color = _ref3$color === void 0 ? 'inherit' : _ref3$color,
     className = _ref3.className;
   var classNames = createClassNames('subtitle', {
     size: size,
@@ -411,7 +411,7 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? 'medium' : _ref4$size,
     _ref4$color = _ref4.color,
-    color = _ref4$color === void 0 ? 'primary' : _ref4$color,
+    color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
     className = _ref4.className,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   var classNames = createClassNames('bodycopy', {
@@ -428,7 +428,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
   var children = _ref5.children,
     size = _ref5.size,
     _ref5$color = _ref5.color,
-    color = _ref5$color === void 0 ? 'primary' : _ref5$color,
+    color = _ref5$color === void 0 ? 'inherit' : _ref5$color,
     className = _ref5.className,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
   var classNames = createClassNames('overline', {
@@ -444,7 +444,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
 var ButtonText = function ButtonText(_ref6) {
   var children = _ref6.children,
     _ref6$color = _ref6.color,
-    color = _ref6$color === void 0 ? 'primary' : _ref6$color,
+    color = _ref6$color === void 0 ? 'inherit' : _ref6$color,
     className = _ref6.className;
   var classNames = createClassNames('buttontext', {
     color: color,
@@ -457,7 +457,7 @@ var ButtonText = function ButtonText(_ref6) {
 var Caption = function Caption(_ref7) {
   var children = _ref7.children,
     _ref7$color = _ref7.color,
-    color = _ref7$color === void 0 ? 'primary' : _ref7$color,
+    color = _ref7$color === void 0 ? 'inherit' : _ref7$color,
     className = _ref7.className;
   var classNames = createClassNames('captiontext', {
     color: color,
@@ -470,7 +470,7 @@ var Caption = function Caption(_ref7) {
 var NavigationText = function NavigationText(_ref8) {
   var children = _ref8.children,
     _ref8$color = _ref8.color,
-    color = _ref8$color === void 0 ? 'primary' : _ref8$color,
+    color = _ref8$color === void 0 ? 'inherit' : _ref8$color,
     className = _ref8.className;
   var classNames = createClassNames('navigationtext', {
     color: color,
@@ -5138,7 +5138,7 @@ var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$3
   return showSearch ? '110px' : '12px';
 });
 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 LogoContainerMobile = /*#__PURE__*/styled__default.a(_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(_templateObject0$1 || (_templateObject0$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(_templateObject1 || (_templateObject1 = /*#__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(_templateObject10 || (_templateObject10 = /*#__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);
@@ -5844,6 +5844,12 @@ var Navigation = function Navigation(_ref) {
     fullScreenHeight = _useState4[0],
     setFullScreenHeight = _useState4[1];
   var items = menuData.items;
+  var logoLinkProps = {
+    title: title,
+    href: logoLink,
+    rel: 'noopener noreferrer',
+    'data-roh': dataRoh
+  };
   React.useEffect(function () {
     var _document, _document2;
     var body = (_document = document) == null ? void 0 : _document.body;
@@ -5896,16 +5902,11 @@ var Navigation = function Navigation(_ref) {
     columnSpanDesktop: 18,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, {
-    "data-roh": dataRoh,
-    rel: "noopener noreferrer",
-    href: logoLink,
-    title: title
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
     "data-testid": crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
     "aria-hidden": "true"
-  })), /*#__PURE__*/React__default.createElement(LogoContainerMobile, null, /*#__PURE__*/React__default.createElement(Icon, {
+  })), /*#__PURE__*/React__default.createElement(LogoContainerMobile, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "NavLogoMobile"
   })), /*#__PURE__*/React__default.createElement(NavWrapper, null, /*#__PURE__*/React__default.createElement(NavContainer, null, /*#__PURE__*/React__default.createElement(Tabs, {
     items: items,