@hitachivantara/uikit-react-core 5.24.0 → 5.24.2

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.styles.js

@@ -1,97 +1,13 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../../../utils/focusUtils.js";
-import { transientOptions } from "../../../../utils/transientOptions.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const {
-  hoverColor
-} = theme.header;
-const MenuItemLi = /* @__PURE__ */ _styled("li", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1elbhu2"
-}, transientOptions) : _extends({}, {
-  target: "e1elbhu2",
-  label: "MenuItemLi"
-}, transientOptions))(({
-  $selected,
-  $isMenu
-}) => ({
-  display: "inline",
-  "& span": {
-    color: theme.header.color
-  },
-  "&:hover": {
-    backgroundColor: hoverColor
-  },
-  "&:focus-within": {
-    backgroundColor: hoverColor
-  },
-  ...$selected && $isMenu && {
-    borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelSelectedItemBorderTopColor}`,
-    borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelSelectedItemBorderBottomColor}`,
-    paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
-    height: "100%",
-    "&& > * > span": {
-      color: theme.header.secondLevelSelectedItemColor
-    }
-  },
-  ...$selected && !$isMenu && {
-    borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.selectedItemBorderTopColor}`,
-    borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.selectedItemBorderBottomColor}`,
-    paddingTop: theme.header.selectedItemBorderBottomThickness,
-    height: "100%",
-    "&& > * > span": {
-      color: theme.header.selectedItemColor
-    }
-  },
-  ...!$selected && !$isMenu && {
-    marginTop: theme.header.selectedItemBorderTopThickness,
-    paddingBottom: theme.header.selectedItemBorderBottomThickness,
-    paddingTop: theme.header.selectedItemBorderBottomThickness,
-    height: "100%",
-    borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,
-    borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`
-  },
-  ...!$selected && $isMenu && {
-    marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,
-    paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,
-    paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
-    height: "100%",
-    borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelBackgroundColor}`,
-    borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelBackgroundColor}`,
-    "&& > * > span": {
-      color: theme.header.secondLevelItemColor
-    }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUl0ZW0vTWVudUl0ZW0uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9IZWFkZXIvTmF2aWdhdGlvbi9NZW51SXRlbS9NZW51SXRlbS5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuY29uc3QgeyBob3ZlckNvbG9yIH0gPSB0aGVtZS5oZWFkZXI7XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbUxpID0gc3R5bGVkKFxuICBcImxpXCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGVkLCAkaXNNZW51IH06IHsgJHNlbGVjdGVkOiBib29sZWFuOyAkaXNNZW51OiBib29sZWFuIH0pID0+ICh7XG4gIGRpc3BsYXk6IFwiaW5saW5lXCIsXG4gIFwiJiBzcGFuXCI6IHtcbiAgICBjb2xvcjogdGhlbWUuaGVhZGVyLmNvbG9yLFxuICB9LFxuICBcIiY6aG92ZXJcIjoge1xuICAgIGJhY2tncm91bmRDb2xvcjogaG92ZXJDb2xvcixcbiAgfSxcbiAgXCImOmZvY3VzLXdpdGhpblwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiBob3ZlckNvbG9yLFxuICB9LFxuICAuLi4oJHNlbGVjdGVkICYmXG4gICAgJGlzTWVudSAmJiB7XG4gICAgICBib3JkZXJUb3A6IGAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlclRvcFRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Cb3JkZXJUb3BDb2xvcn1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3N9IHNvbGlkICR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tQ29sb3J9YCxcbiAgICAgIHBhZGRpbmdUb3A6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICBcIiYmID4gKiA+IHNwYW5cIjoge1xuICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQ29sb3IsXG4gICAgICB9LFxuICAgIH0pLFxuICAuLi4oJHNlbGVjdGVkICYmXG4gICAgISRpc01lbnUgJiYge1xuICAgICAgYm9yZGVyVG9wOiBgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyVG9wVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJUb3BDb2xvcn1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21Db2xvcn1gLFxuICAgICAgcGFkZGluZ1RvcDogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICBcIiYmID4gKiA+IHNwYW5cIjoge1xuICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgfSxcbiAgICB9KSxcbiAgLi4uKCEkc2VsZWN0ZWQgJiZcbiAgICAhJGlzTWVudSAmJiB7XG4gICAgICBtYXJnaW5Ub3A6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJUb3BUaGlja25lc3MsXG4gICAgICBwYWRkaW5nQm90dG9tOiB0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzLFxuICAgICAgcGFkZGluZ1RvcDogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICBib3JkZXJUb3A6IGAke3RoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJUb3BUaGlja25lc3N9IHNvbGlkICR7dGhlbWUuaGVhZGVyLmJhY2tncm91bmRDb2xvcn1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5iYWNrZ3JvdW5kQ29sb3J9YCxcbiAgICB9KSxcbiAgLi4uKCEkc2VsZWN0ZWQgJiZcbiAgICAkaXNNZW51ICYmIHtcbiAgICAgIG1hcmdpblRvcDogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyVG9wVGhpY2tuZXNzLFxuICAgICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzLFxuICAgICAgcGFkZGluZ1RvcDogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzLFxuICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgIGJvcmRlclRvcDogYCR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyVG9wVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbEJhY2tncm91bmRDb2xvcn1gLFxuICAgICAgYm9yZGVyQm90dG9tOiBgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3N9IHNvbGlkICR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsQmFja2dyb3VuZENvbG9yfWAsXG4gICAgICBcIiYmID4gKiA+IHNwYW5cIjoge1xuICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsSXRlbUNvbG9yLFxuICAgICAgfSxcbiAgICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVJdGVtTGFiZWwgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGlzU2VsZWN0ZWQsICRpc01lbnUgfTogeyAkaXNTZWxlY3RlZD86IGJvb2xlYW47ICRpc01lbnU/OiBib29sZWFuIH0pID0+ICh7XG4gIGJvcmRlcjogXCJub25lXCIsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNlLnhzfSAke3RoZW1lLnNwYWNlLnNtfWAsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBjb2xvcjogXCJpbmhlcml0XCIsXG4gIFwiJjphY3RpdmVcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuICBcIiY6Zm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcblxuICBcIiYmIHNwYW5cIjoge1xuICAgIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYmV0d2VlblwiLFxuICAgIC4uLigkaXNTZWxlY3RlZCAmJiB7XG4gICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLnJhZGlpLmZ1bGwsXG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIC4uLighJGlzTWVudSAmJiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQ29sb3IsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJhY2tncm91bmRDb2xvcixcbiAgICAgIH0pLFxuICAgICAgLi4uKCRpc01lbnUgJiYge1xuICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQ29sb3IsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQmFja2dyb3VuZENvbG9yLFxuICAgICAgfSksXG4gICAgfSksXG4gIH0sXG4gIFwiJiBzcGFuOjphZnRlclwiOiB7XG4gICAgY29udGVudDogXCJhdHRyKGRhdGEtdGV4dClcIixcbiAgICBoZWlnaHQ6IDAsXG4gICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIixcbiAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICB1c2VyU2VsZWN0OiBcIm5vbmVcIixcbiAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIixcbiAgICBmb250V2VpZ2h0OiB0aGVtZS5mb250V2VpZ2h0cy5zZW1pYm9sZCxcblxuICAgIFwiQG1lZGlhIHNwZWVjaFwiOiB7XG4gICAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICB9LFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgTWVudUl0ZW1MaW5rID0gc3R5bGVkKFwiYVwiKShcbiAgKHsgJGlzU2VsZWN0ZWQsICRpc01lbnUgfTogeyAkaXNTZWxlY3RlZD86IGJvb2xlYW47ICRpc01lbnU/OiBib29sZWFuIH0pID0+ICh7XG4gICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgIHBhZGRpbmc6IGAke3RoZW1lLnNwYWNlLnhzfSAke3RoZW1lLnNwYWNlLnNtfWAsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgICBcIiY6YWN0aXZlXCI6IHtcbiAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgIH0sXG4gICAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIC4uLigkaXNTZWxlY3RlZCAmJiB7XG4gICAgICBcIiYgPiBkaXYgPiBzcGFuXCI6IHtcbiAgICAgICAgLi4uKCEkaXNNZW51ICYmIHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgICB9KSxcbiAgICAgICAgLi4uKCRpc01lbnUgJiYge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Db2xvcixcbiAgICAgICAgfSksXG4gICAgICB9LFxuICAgIH0pLFxuICAgIFwiJiBzcGFuXCI6IHtcbiAgICAgIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYmV0d2VlblwiLFxuICAgIH0sXG4gICAgXCImIHNwYW46OmFmdGVyXCI6IHtcbiAgICAgIGNvbnRlbnQ6IFwiYXR0cihkYXRhLXRleHQpXCIsXG4gICAgICBoZWlnaHQ6IDAsXG4gICAgICB2aXNpYmlsaXR5OiBcImhpZGRlblwiLFxuICAgICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgICB1c2VyU2VsZWN0OiBcIm5vbmVcIixcbiAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiLFxuICAgICAgZm9udFdlaWdodDogdGhlbWUuZm9udFdlaWdodHMuc2VtaWJvbGQsXG5cbiAgICAgIFwiQG1lZGlhIHNwZWVjaFwiOiB7XG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");
-const MenuItemLabel = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1elbhu1"
-}, transientOptions) : _extends({}, {
-  target: "e1elbhu1",
-  label: "MenuItemLabel"
-}, transientOptions))(({
-  $isSelected,
-  $isMenu
-}) => ({
+import { createClasses } from "../../../../utils/classes.js";
+const item = {
   border: "none",
   cursor: "pointer",
   padding: `${theme.space.xs} ${theme.space.sm}`,
   height: "100%",
   display: "flex",
   alignItems: "center",
-  color: "inherit",
   "&:active": {
     outline: "none"
   },
@@ -101,23 +17,11 @@ const MenuItemLabel = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "p
   "&:focus-visible": {
     ...outlineStyles
   },
-  "&& span": {
+  "& span": {
     display: "inline-flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "space-between",
-    ...$isSelected && {
-      borderRadius: theme.radii.full,
-      padding: theme.space.xs,
-      ...!$isMenu && {
-        color: theme.header.selectedItemColor,
-        backgroundColor: theme.header.selectedItemBackgroundColor
-      },
-      ...$isMenu && {
-        color: theme.header.secondLevelSelectedItemColor,
-        backgroundColor: theme.header.secondLevelSelectedItemBackgroundColor
-      }
-    }
+    justifyContent: "space-between"
   },
   "& span::after": {
     content: "attr(data-text)",
@@ -131,64 +35,85 @@ const MenuItemLabel = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "p
       display: "none"
     }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUl0ZW0vTWVudUl0ZW0uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRTZCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUl0ZW0vTWVudUl0ZW0uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmNvbnN0IHsgaG92ZXJDb2xvciB9ID0gdGhlbWUuaGVhZGVyO1xuXG5leHBvcnQgY29uc3QgTWVudUl0ZW1MaSA9IHN0eWxlZChcbiAgXCJsaVwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRzZWxlY3RlZCwgJGlzTWVudSB9OiB7ICRzZWxlY3RlZDogYm9vbGVhbjsgJGlzTWVudTogYm9vbGVhbiB9KSA9PiAoe1xuICBkaXNwbGF5OiBcImlubGluZVwiLFxuICBcIiYgc3BhblwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmhlYWRlci5jb2xvcixcbiAgfSxcbiAgXCImOmhvdmVyXCI6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGhvdmVyQ29sb3IsXG4gIH0sXG4gIFwiJjpmb2N1cy13aXRoaW5cIjoge1xuICAgIGJhY2tncm91bmRDb2xvcjogaG92ZXJDb2xvcixcbiAgfSxcbiAgLi4uKCRzZWxlY3RlZCAmJlxuICAgICRpc01lbnUgJiYge1xuICAgICAgYm9yZGVyVG9wOiBgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Cb3JkZXJUb3BUaGlja25lc3N9IHNvbGlkICR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyVG9wQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbUNvbG9yfWAsXG4gICAgICBwYWRkaW5nVG9wOiB0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3MsXG4gICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgXCImJiA+ICogPiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgfSxcbiAgICB9KSxcbiAgLi4uKCRzZWxlY3RlZCAmJlxuICAgICEkaXNNZW51ICYmIHtcbiAgICAgIGJvcmRlclRvcDogYCR7dGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlclRvcFRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyVG9wQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tQ29sb3J9YCxcbiAgICAgIHBhZGRpbmdUb3A6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3MsXG4gICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgXCImJiA+ICogPiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Db2xvcixcbiAgICAgIH0sXG4gICAgfSksXG4gIC4uLighJHNlbGVjdGVkICYmXG4gICAgISRpc01lbnUgJiYge1xuICAgICAgbWFyZ2luVG9wOiB0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyVG9wVGhpY2tuZXNzLFxuICAgICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIHBhZGRpbmdUb3A6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3MsXG4gICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgYm9yZGVyVG9wOiBgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyVG9wVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5iYWNrZ3JvdW5kQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuYmFja2dyb3VuZENvbG9yfWAsXG4gICAgfSksXG4gIC4uLighJHNlbGVjdGVkICYmXG4gICAgJGlzTWVudSAmJiB7XG4gICAgICBtYXJnaW5Ub3A6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlclRvcFRoaWNrbmVzcyxcbiAgICAgIHBhZGRpbmdCb3R0b206IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIHBhZGRpbmdUb3A6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICBib3JkZXJUb3A6IGAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlclRvcFRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxCYWNrZ3JvdW5kQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbEJhY2tncm91bmRDb2xvcn1gLFxuICAgICAgXCImJiA+ICogPiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbEl0ZW1Db2xvcixcbiAgICAgIH0sXG4gICAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbUxhYmVsID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRpc1NlbGVjdGVkLCAkaXNNZW51IH06IHsgJGlzU2VsZWN0ZWQ/OiBib29sZWFuOyAkaXNNZW51PzogYm9vbGVhbiB9KSA9PiAoe1xuICBib3JkZXI6IFwibm9uZVwiLFxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBwYWRkaW5nOiBgJHt0aGVtZS5zcGFjZS54c30gJHt0aGVtZS5zcGFjZS5zbX1gLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgY29sb3I6IFwiaW5oZXJpdFwiLFxuICBcIiY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgXCImJiBzcGFuXCI6IHtcbiAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgICAuLi4oJGlzU2VsZWN0ZWQgJiYge1xuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5yYWRpaS5mdWxsLFxuICAgICAgcGFkZGluZzogdGhlbWUuc3BhY2UueHMsXG4gICAgICAuLi4oISRpc01lbnUgJiYge1xuICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1CYWNrZ3JvdW5kQ29sb3IsXG4gICAgICB9KSxcbiAgICAgIC4uLigkaXNNZW51ICYmIHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJhY2tncm91bmRDb2xvcixcbiAgICAgIH0pLFxuICAgIH0pLFxuICB9LFxuICBcIiYgc3Bhbjo6YWZ0ZXJcIjoge1xuICAgIGNvbnRlbnQ6IFwiYXR0cihkYXRhLXRleHQpXCIsXG4gICAgaGVpZ2h0OiAwLFxuICAgIHZpc2liaWxpdHk6IFwiaGlkZGVuXCIsXG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gICAgcG9pbnRlckV2ZW50czogXCJub25lXCIsXG4gICAgZm9udFdlaWdodDogdGhlbWUuZm9udFdlaWdodHMuc2VtaWJvbGQsXG5cbiAgICBcIkBtZWRpYSBzcGVlY2hcIjoge1xuICAgICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVJdGVtTGluayA9IHN0eWxlZChcImFcIikoXG4gICh7ICRpc1NlbGVjdGVkLCAkaXNNZW51IH06IHsgJGlzU2VsZWN0ZWQ/OiBib29sZWFuOyAkaXNNZW51PzogYm9vbGVhbiB9KSA9PiAoe1xuICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICBwYWRkaW5nOiBgJHt0aGVtZS5zcGFjZS54c30gJHt0aGVtZS5zcGFjZS5zbX1gLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICB0ZXh0RGVjb3JhdGlvbjogXCJub25lXCIsXG4gICAgXCImOmFjdGl2ZVwiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICAgIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgfSxcbiAgICAuLi4oJGlzU2VsZWN0ZWQgJiYge1xuICAgICAgXCImID4gZGl2ID4gc3BhblwiOiB7XG4gICAgICAgIC4uLighJGlzTWVudSAmJiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Db2xvcixcbiAgICAgICAgfSksXG4gICAgICAgIC4uLigkaXNNZW51ICYmIHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQ29sb3IsXG4gICAgICAgIH0pLFxuICAgICAgfSxcbiAgICB9KSxcbiAgICBcIiYgc3BhblwiOiB7XG4gICAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgICB9LFxuICAgIFwiJiBzcGFuOjphZnRlclwiOiB7XG4gICAgICBjb250ZW50OiBcImF0dHIoZGF0YS10ZXh0KVwiLFxuICAgICAgaGVpZ2h0OiAwLFxuICAgICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIixcbiAgICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgICAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIixcbiAgICAgIGZvbnRXZWlnaHQ6IHRoZW1lLmZvbnRXZWlnaHRzLnNlbWlib2xkLFxuXG4gICAgICBcIkBtZWRpYSBzcGVlY2hcIjoge1xuICAgICAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG4iXX0= */");
-const MenuItemLink = /* @__PURE__ */ _styled("a", process.env.NODE_ENV === "production" ? {
-  target: "e1elbhu0"
-} : {
-  target: "e1elbhu0",
-  label: "MenuItemLink"
-})(({
-  $isSelected,
-  $isMenu
-}) => ({
-  border: "none",
-  cursor: "pointer",
-  padding: `${theme.space.xs} ${theme.space.sm}`,
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  textDecoration: "none",
-  "&:active": {
-    outline: "none"
+};
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvHeader-MenuItem", {
+  root: {
+    display: "inline",
+    "& span": {
+      color: theme.header.color
+    },
+    "&:hover": {
+      backgroundColor: theme.header.hoverColor
+    },
+    "&:focus-within": {
+      backgroundColor: theme.header.hoverColor
+    }
   },
-  "&:focus": {
-    outline: "none"
+  menu: {
+    marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,
+    paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,
+    paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
+    height: "100%",
+    borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelBackgroundColor}`,
+    borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelBackgroundColor}`,
+    "&& > * > span": {
+      color: theme.header.secondLevelItemColor,
+      padding: theme.header.secondLevelItemPadding
+    }
   },
-  "&:focus-visible": {
-    ...outlineStyles
+  menubar: {
+    marginTop: theme.header.selectedItemBorderTopThickness,
+    paddingBottom: theme.header.selectedItemBorderBottomThickness,
+    paddingTop: theme.header.selectedItemBorderBottomThickness,
+    height: "100%",
+    borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,
+    borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`,
+    "& > * > span": {
+      padding: theme.header.itemPadding
+    }
   },
-  ...$isSelected && {
-    "& > div > span": {
-      ...!$isMenu && {
-        color: theme.header.selectedItemColor
-      },
-      ...$isMenu && {
-        color: theme.header.secondLevelSelectedItemColor
+  selected: {
+    "&$menu": {
+      marginTop: 0,
+      paddingBottom: 0,
+      borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelSelectedItemBorderTopColor}`,
+      borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelSelectedItemBorderBottomColor}`,
+      paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
+      height: "100%",
+      "& > * > span": {
+        color: theme.header.secondLevelSelectedItemColor,
+        backgroundColor: theme.header.secondLevelSelectedItemBackgroundColor,
+        borderRadius: theme.header.secondLevelSelectedItemBorderRadius
+      }
+    },
+    "&$menubar": {
+      marginTop: 0,
+      paddingBottom: 0,
+      borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.selectedItemBorderTopColor}`,
+      borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.selectedItemBorderBottomColor}`,
+      paddingTop: theme.header.selectedItemBorderBottomThickness,
+      height: "100%",
+      "& > * > span": {
+        color: theme.header.selectedItemColor,
+        backgroundColor: theme.header.selectedItemBackgroundColor,
+        borderRadius: theme.header.selectedItemBorderRadius
       }
     }
   },
-  "& span": {
-    display: "inline-flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "space-between"
+  link: {
+    textDecoration: "none",
+    ...item
   },
-  "& span::after": {
-    content: "attr(data-text)",
-    height: 0,
-    visibility: "hidden",
-    overflow: "hidden",
-    userSelect: "none",
-    pointerEvents: "none",
-    fontWeight: theme.fontWeights.semibold,
-    "@media speech": {
-      display: "none"
-    }
+  button: {
+    color: "inherit",
+    ...item
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUl0ZW0vTWVudUl0ZW0uc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3SDRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUl0ZW0vTWVudUl0ZW0uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmNvbnN0IHsgaG92ZXJDb2xvciB9ID0gdGhlbWUuaGVhZGVyO1xuXG5leHBvcnQgY29uc3QgTWVudUl0ZW1MaSA9IHN0eWxlZChcbiAgXCJsaVwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRzZWxlY3RlZCwgJGlzTWVudSB9OiB7ICRzZWxlY3RlZDogYm9vbGVhbjsgJGlzTWVudTogYm9vbGVhbiB9KSA9PiAoe1xuICBkaXNwbGF5OiBcImlubGluZVwiLFxuICBcIiYgc3BhblwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmhlYWRlci5jb2xvcixcbiAgfSxcbiAgXCImOmhvdmVyXCI6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGhvdmVyQ29sb3IsXG4gIH0sXG4gIFwiJjpmb2N1cy13aXRoaW5cIjoge1xuICAgIGJhY2tncm91bmRDb2xvcjogaG92ZXJDb2xvcixcbiAgfSxcbiAgLi4uKCRzZWxlY3RlZCAmJlxuICAgICRpc01lbnUgJiYge1xuICAgICAgYm9yZGVyVG9wOiBgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Cb3JkZXJUb3BUaGlja25lc3N9IHNvbGlkICR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyVG9wQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbUNvbG9yfWAsXG4gICAgICBwYWRkaW5nVG9wOiB0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxTZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3MsXG4gICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgXCImJiA+ICogPiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgfSxcbiAgICB9KSxcbiAgLi4uKCRzZWxlY3RlZCAmJlxuICAgICEkaXNNZW51ICYmIHtcbiAgICAgIGJvcmRlclRvcDogYCR7dGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlclRvcFRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyVG9wQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tQ29sb3J9YCxcbiAgICAgIHBhZGRpbmdUb3A6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3MsXG4gICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgXCImJiA+ICogPiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Db2xvcixcbiAgICAgIH0sXG4gICAgfSksXG4gIC4uLighJHNlbGVjdGVkICYmXG4gICAgISRpc01lbnUgJiYge1xuICAgICAgbWFyZ2luVG9wOiB0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyVG9wVGhpY2tuZXNzLFxuICAgICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIHBhZGRpbmdUb3A6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Cb3JkZXJCb3R0b21UaGlja25lc3MsXG4gICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgYm9yZGVyVG9wOiBgJHt0aGVtZS5oZWFkZXIuc2VsZWN0ZWRJdGVtQm9yZGVyVG9wVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5iYWNrZ3JvdW5kQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuYmFja2dyb3VuZENvbG9yfWAsXG4gICAgfSksXG4gIC4uLighJHNlbGVjdGVkICYmXG4gICAgJGlzTWVudSAmJiB7XG4gICAgICBtYXJnaW5Ub3A6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlclRvcFRoaWNrbmVzcyxcbiAgICAgIHBhZGRpbmdCb3R0b206IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIHBhZGRpbmdUb3A6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlckJvdHRvbVRoaWNrbmVzcyxcbiAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICBib3JkZXJUb3A6IGAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJvcmRlclRvcFRoaWNrbmVzc30gc29saWQgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxCYWNrZ3JvdW5kQ29sb3J9YCxcbiAgICAgIGJvcmRlckJvdHRvbTogYCR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQm9yZGVyQm90dG9tVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbEJhY2tncm91bmRDb2xvcn1gLFxuICAgICAgXCImJiA+ICogPiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbEl0ZW1Db2xvcixcbiAgICAgIH0sXG4gICAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBNZW51SXRlbUxhYmVsID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRpc1NlbGVjdGVkLCAkaXNNZW51IH06IHsgJGlzU2VsZWN0ZWQ/OiBib29sZWFuOyAkaXNNZW51PzogYm9vbGVhbiB9KSA9PiAoe1xuICBib3JkZXI6IFwibm9uZVwiLFxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBwYWRkaW5nOiBgJHt0aGVtZS5zcGFjZS54c30gJHt0aGVtZS5zcGFjZS5zbX1gLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgY29sb3I6IFwiaW5oZXJpdFwiLFxuICBcIiY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgXCImJiBzcGFuXCI6IHtcbiAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgICAuLi4oJGlzU2VsZWN0ZWQgJiYge1xuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5yYWRpaS5mdWxsLFxuICAgICAgcGFkZGluZzogdGhlbWUuc3BhY2UueHMsXG4gICAgICAuLi4oISRpc01lbnUgJiYge1xuICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1CYWNrZ3JvdW5kQ29sb3IsXG4gICAgICB9KSxcbiAgICAgIC4uLigkaXNNZW51ICYmIHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUNvbG9yLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmhlYWRlci5zZWNvbmRMZXZlbFNlbGVjdGVkSXRlbUJhY2tncm91bmRDb2xvcixcbiAgICAgIH0pLFxuICAgIH0pLFxuICB9LFxuICBcIiYgc3Bhbjo6YWZ0ZXJcIjoge1xuICAgIGNvbnRlbnQ6IFwiYXR0cihkYXRhLXRleHQpXCIsXG4gICAgaGVpZ2h0OiAwLFxuICAgIHZpc2liaWxpdHk6IFwiaGlkZGVuXCIsXG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gICAgcG9pbnRlckV2ZW50czogXCJub25lXCIsXG4gICAgZm9udFdlaWdodDogdGhlbWUuZm9udFdlaWdodHMuc2VtaWJvbGQsXG5cbiAgICBcIkBtZWRpYSBzcGVlY2hcIjoge1xuICAgICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IE1lbnVJdGVtTGluayA9IHN0eWxlZChcImFcIikoXG4gICh7ICRpc1NlbGVjdGVkLCAkaXNNZW51IH06IHsgJGlzU2VsZWN0ZWQ/OiBib29sZWFuOyAkaXNNZW51PzogYm9vbGVhbiB9KSA9PiAoe1xuICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICBwYWRkaW5nOiBgJHt0aGVtZS5zcGFjZS54c30gJHt0aGVtZS5zcGFjZS5zbX1gLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICB0ZXh0RGVjb3JhdGlvbjogXCJub25lXCIsXG4gICAgXCImOmFjdGl2ZVwiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICAgIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgfSxcbiAgICAuLi4oJGlzU2VsZWN0ZWQgJiYge1xuICAgICAgXCImID4gZGl2ID4gc3BhblwiOiB7XG4gICAgICAgIC4uLighJGlzTWVudSAmJiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmhlYWRlci5zZWxlY3RlZEl0ZW1Db2xvcixcbiAgICAgICAgfSksXG4gICAgICAgIC4uLigkaXNNZW51ICYmIHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsU2VsZWN0ZWRJdGVtQ29sb3IsXG4gICAgICAgIH0pLFxuICAgICAgfSxcbiAgICB9KSxcbiAgICBcIiYgc3BhblwiOiB7XG4gICAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbiAgICB9LFxuICAgIFwiJiBzcGFuOjphZnRlclwiOiB7XG4gICAgICBjb250ZW50OiBcImF0dHIoZGF0YS10ZXh0KVwiLFxuICAgICAgaGVpZ2h0OiAwLFxuICAgICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIixcbiAgICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgICAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIixcbiAgICAgIGZvbnRXZWlnaHQ6IHRoZW1lLmZvbnRXZWlnaHRzLnNlbWlib2xkLFxuXG4gICAgICBcIkBtZWRpYSBzcGVlY2hcIjoge1xuICAgICAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG4iXX0= */");
+});
 export {
-  MenuItemLabel,
-  MenuItemLi,
-  MenuItemLink
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=MenuItem.styles.js.map

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nconst { hoverColor } = theme.header;\n\nexport const MenuItemLi = styled(\n  \"li\",\n  transientOptions\n)(({ $selected, $isMenu }: { $selected: boolean; $isMenu: boolean }) => ({\n  display: \"inline\",\n  \"& span\": {\n    color: theme.header.color,\n  },\n  \"&:hover\": {\n    backgroundColor: hoverColor,\n  },\n  \"&:focus-within\": {\n    backgroundColor: hoverColor,\n  },\n  ...($selected &&\n    $isMenu && {\n      borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelSelectedItemBorderTopColor}`,\n      borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelSelectedItemBorderBottomColor}`,\n      paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,\n      height: \"100%\",\n      \"&& > * > span\": {\n        color: theme.header.secondLevelSelectedItemColor,\n      },\n    }),\n  ...($selected &&\n    !$isMenu && {\n      borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.selectedItemBorderTopColor}`,\n      borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.selectedItemBorderBottomColor}`,\n      paddingTop: theme.header.selectedItemBorderBottomThickness,\n      height: \"100%\",\n      \"&& > * > span\": {\n        color: theme.header.selectedItemColor,\n      },\n    }),\n  ...(!$selected &&\n    !$isMenu && {\n      marginTop: theme.header.selectedItemBorderTopThickness,\n      paddingBottom: theme.header.selectedItemBorderBottomThickness,\n      paddingTop: theme.header.selectedItemBorderBottomThickness,\n      height: \"100%\",\n      borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,\n      borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`,\n    }),\n  ...(!$selected &&\n    $isMenu && {\n      marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,\n      paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,\n      paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,\n      height: \"100%\",\n      borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelBackgroundColor}`,\n      borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelBackgroundColor}`,\n      \"&& > * > span\": {\n        color: theme.header.secondLevelItemColor,\n      },\n    }),\n}));\n\nexport const MenuItemLabel = styled(\n  \"div\",\n  transientOptions\n)(({ $isSelected, $isMenu }: { $isSelected?: boolean; $isMenu?: boolean }) => ({\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  color: \"inherit\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n\n  \"&& span\": {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    ...($isSelected && {\n      borderRadius: theme.radii.full,\n      padding: theme.space.xs,\n      ...(!$isMenu && {\n        color: theme.header.selectedItemColor,\n        backgroundColor: theme.header.selectedItemBackgroundColor,\n      }),\n      ...($isMenu && {\n        color: theme.header.secondLevelSelectedItemColor,\n        backgroundColor: theme.header.secondLevelSelectedItemBackgroundColor,\n      }),\n    }),\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n}));\n\nexport const MenuItemLink = styled(\"a\")(\n  ({ $isSelected, $isMenu }: { $isSelected?: boolean; $isMenu?: boolean }) => ({\n    border: \"none\",\n    cursor: \"pointer\",\n    padding: `${theme.space.xs} ${theme.space.sm}`,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    textDecoration: \"none\",\n    \"&:active\": {\n      outline: \"none\",\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n    ...($isSelected && {\n      \"& > div > span\": {\n        ...(!$isMenu && {\n          color: theme.header.selectedItemColor,\n        }),\n        ...($isMenu && {\n          color: theme.header.secondLevelSelectedItemColor,\n        }),\n      },\n    }),\n    \"& span\": {\n      display: \"inline-flex\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n    },\n    \"& span::after\": {\n      content: \"attr(data-text)\",\n      height: 0,\n      visibility: \"hidden\",\n      overflow: \"hidden\",\n      userSelect: \"none\",\n      pointerEvents: \"none\",\n      fontWeight: theme.fontWeights.semibold,\n\n      \"@media speech\": {\n        display: \"none\",\n      },\n    },\n  })\n);\n"],"names":["hoverColor","theme","header","MenuItemLi","process","env","NODE_ENV","_extends","target","transientOptions","label","$selected","$isMenu","display","color","backgroundColor","borderTop","secondLevelSelectedItemBorderTopThickness","secondLevelSelectedItemBorderTopColor","borderBottom","secondLevelSelectedItemBorderBottomThickness","secondLevelSelectedItemBorderBottomColor","paddingTop","height","secondLevelSelectedItemColor","selectedItemBorderTopThickness","selectedItemBorderTopColor","selectedItemBorderBottomThickness","selectedItemBorderBottomColor","selectedItemColor","marginTop","paddingBottom","secondLevelBackgroundColor","secondLevelItemColor","MenuItemLabel","$isSelected","border","cursor","padding","space","xs","sm","alignItems","outline","outlineStyles","flexDirection","justifyContent","borderRadius","radii","full","selectedItemBackgroundColor","secondLevelSelectedItemBackgroundColor","content","visibility","overflow","userSelect","pointerEvents","fontWeight","fontWeights","semibold","MenuItemLink","textDecoration"],"mappings":"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"}
+{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSInterpolation } from \"@emotion/css\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      \"& span\": {\n        color: theme.header.color,\n      },\n      \"&:hover\": {\n        backgroundColor: theme.header.hoverColor,\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.header.hoverColor,\n      },\n    },\n    menu: {\n      marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,\n      paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,\n      paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,\n      height: \"100%\",\n      borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelBackgroundColor}`,\n      borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelBackgroundColor}`,\n      \"&& > * > span\": {\n        color: theme.header.secondLevelItemColor,\n        padding: theme.header.secondLevelItemPadding,\n      },\n    },\n    menubar: {\n      marginTop: theme.header.selectedItemBorderTopThickness,\n      paddingBottom: theme.header.selectedItemBorderBottomThickness,\n      paddingTop: theme.header.selectedItemBorderBottomThickness,\n      height: \"100%\",\n      borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,\n      borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`,\n      \"& > * > span\": {\n        padding: theme.header.itemPadding,\n      },\n    },\n    selected: {\n      \"&$menu\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelSelectedItemBorderTopColor}`,\n        borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelSelectedItemBorderBottomColor}`,\n        paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.header.secondLevelSelectedItemColor,\n          backgroundColor: theme.header.secondLevelSelectedItemBackgroundColor,\n          borderRadius: theme.header.secondLevelSelectedItemBorderRadius,\n        },\n      },\n      \"&$menubar\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.selectedItemBorderTopColor}`,\n        borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.selectedItemBorderBottomColor}`,\n        paddingTop: theme.header.selectedItemBorderBottomThickness,\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.header.selectedItemColor,\n          backgroundColor: theme.header.selectedItemBackgroundColor,\n          borderRadius: theme.header.selectedItemBorderRadius,\n        },\n      },\n    },\n    link: {\n      textDecoration: \"none\",\n      ...item,\n    },\n    button: {\n      color: \"inherit\",\n      ...item,\n    },\n  }\n);\n"],"names":["item","border","cursor","padding","theme","space","xs","sm","height","display","alignItems","outline","outlineStyles","flexDirection","justifyContent","content","visibility","overflow","userSelect","pointerEvents","fontWeight","fontWeights","semibold","staticClasses","useClasses","createClasses","root","color","header","backgroundColor","hoverColor","menu","marginTop","secondLevelSelectedItemBorderTopThickness","paddingBottom","secondLevelSelectedItemBorderBottomThickness","paddingTop","borderTop","secondLevelBackgroundColor","borderBottom","secondLevelItemColor","secondLevelItemPadding","menubar","selectedItemBorderTopThickness","selectedItemBorderBottomThickness","itemPadding","selected","secondLevelSelectedItemBorderTopColor","secondLevelSelectedItemBorderBottomColor","secondLevelSelectedItemColor","secondLevelSelectedItemBackgroundColor","borderRadius","secondLevelSelectedItemBorderRadius","selectedItemBorderTopColor","selectedItemBorderBottomColor","selectedItemColor","selectedItemBackgroundColor","selectedItemBorderRadius","link","textDecoration","button"],"mappings":"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"}

package/dist/esm/components/Header/Navigation/Navigation.js

@@ -1,9 +1,8 @@
-import { clsx } from "clsx";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
-import { StyledNav } from "./Navigation.styles.js";
+import { useClasses } from "./Navigation.styles.js";
+import { staticClasses } from "./Navigation.styles.js";
 import { FocusProvider } from "./utils/FocusContext.js";
 import { SelectionContext } from "./utils/SelectionContext.js";
-import headerNavigationClasses from "./navigationClasses.js";
 import { useSelectionPath } from "./useSelectionPath.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { HvHeaderMenuBar } from "./MenuBar/MenuBar.js";
@@ -13,10 +12,14 @@ const HvHeaderNavigation = (props) => {
     selected,
     onClick,
     className,
-    classes,
+    classes: classesProp,
     levels = 2,
     ...others
   } = useDefaultProps("HvHeaderNavigation", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const selectionPath = useSelectionPath(data, selected);
   const handleClick = (event, selection) => {
     event.preventDefault();
@@ -25,8 +28,8 @@ const HvHeaderNavigation = (props) => {
   return /* @__PURE__ */ jsx(SelectionContext.Provider, {
     value: selectionPath,
     children: /* @__PURE__ */ jsx(FocusProvider, {
-      children: /* @__PURE__ */ jsx(StyledNav, {
-        className: clsx(className, headerNavigationClasses.root, classes == null ? void 0 : classes.root),
+      children: /* @__PURE__ */ jsx("nav", {
+        className: cx(classes.root, className),
         ...others,
         children: /* @__PURE__ */ jsx(HvHeaderMenuBar, {
           data,
@@ -40,6 +43,7 @@ const HvHeaderNavigation = (props) => {
   });
 };
 export {
-  HvHeaderNavigation
+  HvHeaderNavigation,
+  staticClasses as headerNavigationClasses
 };
 //# sourceMappingURL=Navigation.js.map

package/dist/esm/components/Header/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport headerNavigationClasses, {\n  HvHeaderNavigationClasses,\n} from \"./navigationClasses\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <StyledNav\n          className={clsx(\n            className,\n            headerNavigationClasses.root,\n            classes?.root\n          )}\n          {...others}\n        >\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </StyledNav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","props","data","selected","onClick","className","classes","levels","others","useDefaultProps","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","StyledNav","clsx","headerNavigationClasses","root","HvHeaderMenuBar","type","currentLevel"],"mappings":";;;;;;;;;AA4BaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBR,KAAK;AAEzCS,QAAAA,gBAAgBC,iBAAiBT,MAAMC,QAAQ;AAE/CS,QAAAA,cAA+CA,CAACC,OAAOC,cAAc;AACzED,UAAME,eAAe;AAErBX,uCAAUS,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,oBAACC,iBAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,8BAC7CC,eAAa;AAAA,MAAAD,8BACXE,WAAS;AAAA,QACRjB,WAAWkB,KACTlB,WACAmB,wBAAwBC,MACxBnB,mCAASmB,IACX;AAAA,QAAE,GACEjB;AAAAA,QAAMY,8BAETM,iBAAe;AAAA,UACdxB;AAAAA,UACAyB,MAAK;AAAA,UACLvB,SAASQ;AAAAA,UACTL;AAAAA,UACAqB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACQ;AAAA,IAAA,CACE;AAAA,EAAA,CACU;AAE/B;"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","props","data","selected","onClick","className","classes","classesProp","levels","others","useDefaultProps","cx","useClasses","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","root","HvHeaderMenuBar","type","currentLevel"],"mappings":";;;;;;;;AA4BaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBT,KAAK;AAEzC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAWL,WAAW;AAExCM,QAAAA,gBAAgBC,iBAAiBZ,MAAMC,QAAQ;AAE/CY,QAAAA,cAA+CA,CAACC,OAAOC,cAAc;AACzED,UAAME,eAAe;AAErBd,uCAAUY,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,oBAACC,iBAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,8BAC7CC,eAAa;AAAA,MAAAD,8BACZ,OAAA;AAAA,QAAKlB,WAAWM,GAAGL,QAAQmB,MAAMpB,SAAS;AAAA,QAAE,GAAKI;AAAAA,QAAMc,8BACpDG,iBAAe;AAAA,UACdxB;AAAAA,UACAyB,MAAK;AAAA,UACLvB,SAASW;AAAAA,UACTP;AAAAA,UACAoB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACE;AAAA,IAAA,CACQ;AAAA,EAAA,CACU;AAE/B;"}

package/dist/esm/components/Header/Navigation/Navigation.styles.js

@@ -1,22 +1,19 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledNav = /* @__PURE__ */ _styled("nav", process.env.NODE_ENV === "production" ? {
-  target: "e1sfutch0"
-} : {
-  target: "e1sfutch0",
-  label: "StyledNav"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1xby8wz",
-  styles: "position:absolute;width:100%;height:100%;z-index:1;top:0px;left:0px"
-} : {
-  name: "1xby8wz",
-  styles: "position:absolute;width:100%;height:100%;z-index:1;top:0px;left:0px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0hlYWRlci9OYXZpZ2F0aW9uL05hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTmF2ID0gc3R5bGVkKFwibmF2XCIpKHtcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICB6SW5kZXg6IDEsXG4gIHRvcDogXCIwcHhcIixcbiAgbGVmdDogXCIwcHhcIixcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvHeader-Navigation", {
+  root: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    zIndex: 1,
+    top: "0px",
+    left: "0px"
+  }
 });
 export {
-  StyledNav
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Navigation.styles.js.map

package/dist/esm/components/Header/Navigation/Navigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/components/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const StyledNav = styled(\"nav\")({\n  position: \"absolute\",\n  width: \"100%\",\n  height: \"100%\",\n  zIndex: 1,\n  top: \"0px\",\n  left: \"0px\",\n});\n"],"names":["StyledNav","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;AAEO,MAAMA,YAAmB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAOrC;"}
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/components/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-Navigation\",\n  {\n    root: {\n      position: \"absolute\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: 1,\n      top: \"0px\",\n      left: \"0px\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","position","width","height","zIndex","top","left"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AACF,CACF;"}

package/dist/esm/components/InlineEditor/InlineEditor.js

@@ -71,7 +71,7 @@ const HvInlineEditor = (props) => {
     onChange == null ? void 0 : onChange(event, val);
   };
   return /* @__PURE__ */ jsx("div", {
-    className: cx(className, classes.root),
+    className: cx(classes.root, className),
     children: editMode ? /* @__PURE__ */ jsx(InputComponent, {
       inputRef,
       classes: {

package/dist/esm/components/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"@core/components/Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(className, classes.root)}>\n      {editMode ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"presentation\"\n              className={cx(classes.icon, { [classes.iconVisible]: showIcon })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInlineEditor","props","className","classes","classesProp","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","useDefaultProps","cx","useClasses","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","activeTheme","useTheme","typographyStyles","typography","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKey","handleChange","val","root","children","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","HvButton","overrideIconColors","endIcon","Edit","color","role","icon","iconVisible","button","largeText","parseInt","onClick","HvTypography","noWrap","text","textEmpty"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"@core/components/Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"presentation\"\n              className={cx(classes.icon, { [classes.iconVisible]: showIcon })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInlineEditor","props","className","classes","classesProp","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","useDefaultProps","cx","useClasses","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","activeTheme","useTheme","typographyStyles","typography","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKey","handleChange","val","root","children","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","HvButton","overrideIconColors","endIcon","Edit","color","role","icon","iconVisible","button","largeText","parseInt","onClick","HvTypography","noWrap","text","textEmpty"],"mappings":"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"}

package/dist/esm/components/Input/Input.js

@@ -313,9 +313,9 @@ const HvInput = forwardRef((props, ref) => {
     disabled,
     required,
     readOnly,
-    className: cx(className, classes.root, {
+    className: cx(classes.root, {
       [classes.hasSuggestions]: hasSuggestions
-    }),
+    }, className),
     onBlur: onContainerBlurHandler,
     children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
       className: classes.labelContainer,