@hitachivantara/uikit-react-core 5.24.0 → 5.24.2

package/dist/cjs/components/Header/Brand/Brand.styles.cjs

@@ -1,54 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const React = require("react");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Typography = require("../../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-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 BrandRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1mg4lzk2"
-} : {
-  target: "e1mg4lzk2",
-  label: "BrandRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center"
-} : {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXlCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5LCBIdlR5cG9ncmFwaHlQcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IEJyYW5kUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBCcmFuZFNlcGFyYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IHRoZW1lLnNwYWNlLnNtLFxuICBtYXJnaW46IHRoZW1lLnNwYWNlLnhzLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG59KTtcblxuZXhwb3J0IGNvbnN0IEJyYW5kTmFtZSA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2VHlwb2dyYXBoeVByb3BzLCByZWY/OiBSZWY8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdlR5cG9ncmFwaHkgey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgY29sb3I6IHRoZW1lLmhlYWRlci5icmFuZENvbG9yLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvHeader-Brand", {
+  root: {
+    display: "flex",
+    alignItems: "center"
+  },
+  separator: {
+    width: 1,
+    height: uikitStyles.theme.space.sm,
+    margin: uikitStyles.theme.space.xs,
+    backgroundColor: uikitStyles.theme.colors.secondary
+  }
 });
-const BrandSeparator = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1mg4lzk1"
-} : {
-  target: "e1mg4lzk1",
-  label: "BrandSeparator"
-})({
-  width: 1,
-  height: uikitStyles.theme.space.sm,
-  margin: uikitStyles.theme.space.xs,
-  backgroundColor: uikitStyles.theme.colors.secondary
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYThCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5LCBIdlR5cG9ncmFwaHlQcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IEJyYW5kUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBCcmFuZFNlcGFyYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IHRoZW1lLnNwYWNlLnNtLFxuICBtYXJnaW46IHRoZW1lLnNwYWNlLnhzLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG59KTtcblxuZXhwb3J0IGNvbnN0IEJyYW5kTmFtZSA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2VHlwb2dyYXBoeVByb3BzLCByZWY/OiBSZWY8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdlR5cG9ncmFwaHkgey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgY29sb3I6IHRoZW1lLmhlYWRlci5icmFuZENvbG9yLFxufSk7XG4iXX0= */");
-const BrandName = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-    ...props,
-    ref
-  });
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1mg4lzk0"
-} : {
-  target: "e1mg4lzk0",
-  label: "BrandName"
-})({
-  color: uikitStyles.theme.header.brandColor
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0hlYWRlci9CcmFuZC9CcmFuZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgZm9yd2FyZFJlZiwgUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSwgSHZUeXBvZ3JhcGh5UHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBCcmFuZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgQnJhbmRTZXBhcmF0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogMSxcbiAgaGVpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgbWFyZ2luOiB0aGVtZS5zcGFjZS54cyxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5LFxufSk7XG5cbmV4cG9ydCBjb25zdCBCcmFuZE5hbWUgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdlR5cG9ncmFwaHlQcm9wcywgcmVmPzogUmVmPEhUTUxFbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZUeXBvZ3JhcGh5IHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIGNvbG9yOiB0aGVtZS5oZWFkZXIuYnJhbmRDb2xvcixcbn0pO1xuIl19 */");
-exports.BrandName = BrandName;
-exports.BrandRoot = BrandRoot;
-exports.BrandSeparator = BrandSeparator;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Brand.styles.cjs.map

package/dist/cjs/components/Header/Brand/Brand.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Brand.styles.cjs","sources":["../../../../../src/components/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { forwardRef, Ref } from \"react\";\n\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\n\nexport const BrandRoot = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n});\n\nexport const BrandSeparator = styled(\"div\")({\n  width: 1,\n  height: theme.space.sm,\n  margin: theme.space.xs,\n  backgroundColor: theme.colors.secondary,\n});\n\nexport const BrandName = styled(\n  forwardRef((props: HvTypographyProps, ref?: Ref<HTMLElement>) => {\n    return <HvTypography {...props} ref={ref} />;\n  })\n)({\n  color: theme.header.brandColor,\n});\n"],"names":["BrandRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","BrandSeparator","width","height","theme","space","sm","margin","xs","backgroundColor","colors","secondary","BrandName","forwardRef","props","ref","HvTypography","color","header","brandColor"],"mappings":";;;;;;;;;;;;AAQO,MAAMA,YAAmBC,iCAAA,QAAA,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,CAGrC;AAEM,MAAMC,iBAAwBX,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC1CO,OAAO;AAAA,EACPC,QAAQC,YAAAA,MAAMC,MAAMC;AAAAA,EACpBC,QAAQH,YAAAA,MAAMC,MAAMG;AAAAA,EACpBC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAChC,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q4CAAA;AAEK,MAAMmB,YAAYtB,iCAAAA,QACvBuB,MAAAA,WAAW,CAACC,OAA0BC,QAA2B;AAC/D,wCAAQC,WAAAA,cAAY;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAW;AAC7C,CAAC,GAACxB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CACJ,EAAE;AAAA,EACAsB,OAAOb,YAAAA,MAAMc,OAAOC;AACtB,GAAC5B,QAAAC,IAAAC,aAAC,eAAA,KAAA,q4CAAA;;;;"}
+{"version":3,"file":"Brand.styles.cjs","sources":["../../../../../src/components/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n  root: { display: \"flex\", alignItems: \"center\" },\n  separator: {\n    width: 1,\n    height: theme.space.sm,\n    margin: theme.space.xs,\n    backgroundColor: theme.colors.secondary,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","separator","width","height","theme","space","sm","margin","xs","backgroundColor","colors","secondary"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC9CC,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQC,YAAAA,MAAMC,MAAMC;AAAAA,IACpBC,QAAQH,YAAAA,MAAMC,MAAMG;AAAAA,IACpBC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,EAChC;AACF,CAAC;;;"}

package/dist/cjs/components/Header/Header.cjs

@@ -1,27 +1,37 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Header_styles = require("./Header.styles.cjs");
-const headerClasses = require("./headerClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvHeader = (props) => {
   const {
     className,
-    classes,
+    classes: classesProp,
     children,
     position = "fixed",
     ...others
   } = useDefaultProps.useDefaultProps("HvHeader", props);
-  return /* @__PURE__ */ jsxRuntime.jsx(Header_styles.StyledAppBar, {
-    className: clsx.clsx(className, classes == null ? void 0 : classes.root, headerClasses.default.root, classes == null ? void 0 : classes.backgroundColor, headerClasses.default.backgroundColor),
-    $position: position,
+  const {
+    classes,
+    cx,
+    css
+  } = Header_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx("header", {
+    className: cx(classes.root, classes.backgroundColor, css({
+      position,
+      ...position === "fixed" && {
+        top: 0,
+        left: "auto",
+        right: 0
+      }
+    }), className),
     ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Header_styles.StyledHeaderRoot, {
-      className: clsx.clsx(classes == null ? void 0 : classes.header, headerClasses.default.header),
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.header,
       children
     })
   });
 };
+exports.headerClasses = Header_styles.staticClasses;
 exports.HvHeader = HvHeader;
 //# sourceMappingURL=Header.cjs.map

package/dist/cjs/components/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledHeaderRoot, StyledAppBar } from \"./Header.styles\";\nimport headerClasses, { HvHeaderClasses } from \"./headerClasses\";\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const {\n    className,\n    classes,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  return (\n    <StyledAppBar\n      className={clsx(\n        className,\n        classes?.root,\n        headerClasses.root,\n        classes?.backgroundColor,\n        headerClasses.backgroundColor\n      )}\n      $position={position}\n      {...others}\n    >\n      <StyledHeaderRoot className={clsx(classes?.header, headerClasses.header)}>\n        {children}\n      </StyledHeaderRoot>\n    </StyledAppBar>\n  );\n};\n"],"names":["HvHeader","props","className","classes","children","position","others","useDefaultProps","StyledAppBar","clsx","root","headerClasses","backgroundColor","$position","StyledHeaderRoot","header"],"mappings":";;;;;;;AAyBaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYN,KAAK;AAErC,wCACGO,cAAAA,cAAY;AAAA,IACXN,WAAWO,KACTP,KAAAA,WACAC,mCAASO,MACTC,sBAAcD,MACdP,mCAASS,iBACTD,cAAAA,QAAcC,eAChB;AAAA,IACAC,WAAWR;AAAAA,IAAS,GAChBC;AAAAA,IAAMF,yCAETU,gCAAgB;AAAA,MAACZ,WAAWO,KAAAA,KAAKN,mCAASY,QAAQJ,cAAAA,QAAcI,MAAM;AAAA,MAAEX;AAAAA,IAAAA,CAEvD;AAAA,EAAA,CACN;AAElB;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  return (\n    <header\n      className={cx(\n        classes.root,\n        classes.backgroundColor,\n        css({\n          position,\n          ...(position === \"fixed\" && {\n            top: 0,\n            left: \"auto\",\n            right: 0,\n          }),\n        }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.header}>{children}</div>\n    </header>\n  );\n};\n"],"names":["HvHeader","props","className","classes","classesProp","children","position","others","useDefaultProps","cx","css","useClasses","root","backgroundColor","top","left","right","header"],"mappings":";;;;;AA2BaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYP,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASM;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,cAAAA,WAAWP,WAAW;AAEnD,wCACE,UAAA;AAAA,IACEF,WAAWO,GACTN,QAAQS,MACRT,QAAQU,iBACRH,IAAI;AAAA,MACFJ;AAAAA,MACA,GAAIA,aAAa,WAAW;AAAA,QAC1BQ,KAAK;AAAA,QACLC,MAAM;AAAA,QACNC,OAAO;AAAA,MACT;AAAA,IACD,CAAA,GACDd,SACF;AAAA,IAAE,GACEK;AAAAA,IAAMF,yCAEV,OAAA;AAAA,MAAKH,WAAWC,QAAQc;AAAAA,MAAOZ;AAAAA,IAAAA,CAAgB;AAAA,EAAA,CACzC;AAEZ;;;"}

package/dist/cjs/components/Header/Header.styles.cjs

@@ -1,78 +1,37 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-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 StyledAppBar = /* @__PURE__ */ _styled__default.default("header", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "euwt7yw1"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "euwt7yw1",
-  label: "StyledAppBar"
-}, transientOptions.transientOptions))(({
-  $position
-}) => ({
-  height: uikitStyles.theme.header.height,
-  backgroundColor: uikitStyles.theme.header.backgroundColor,
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  boxSizing: "border-box",
-  flexShrink: 0,
-  zIndex: uikitStyles.theme.zIndices.banner,
-  color: uikitStyles.theme.colors.atmo1,
-  boxShadow: uikitStyles.theme.header.shadow,
-  borderTop: `${uikitStyles.theme.header.borderTopThickness} solid ${uikitStyles.theme.header.borderTopColor}`,
-  ...$position === "fixed" && {
-    position: "fixed",
-    top: 0,
-    left: "auto",
-    right: 0
-  },
-  ...$position === "relative" && {
-    position: "relative"
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvHeader", {
+  root: {
+    height: uikitStyles.theme.header.height,
+    backgroundColor: uikitStyles.theme.header.backgroundColor,
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    boxSizing: "border-box",
+    flexShrink: 0,
+    zIndex: uikitStyles.theme.zIndices.banner,
+    color: uikitStyles.theme.colors.atmo1,
+    boxShadow: uikitStyles.theme.header.shadow,
+    borderTop: `${uikitStyles.theme.header.borderTopThickness} solid ${uikitStyles.theme.header.borderTopColor}`
   },
-  ...$position === "absolute" && {
-    position: "absolute"
-  },
-  ...$position === "static" && {
-    position: "static"
+  header: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    padding: `0 ${uikitStyles.theme.space.sm}`,
+    boxShadow: uikitStyles.theme.header.shadow,
+    "& > *:not(nav)": {
+      zIndex: 2
+    }
   },
-  ...$position === "sticky" && {
-    position: "sticky"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0hlYWRlci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUk0QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBcHBCYXIgPSBzdHlsZWQoXG4gIFwiaGVhZGVyXCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHBvc2l0aW9uIH06IHsgJHBvc2l0aW9uPzogc3RyaW5nIH0pID0+ICh7XG4gIGhlaWdodDogdGhlbWUuaGVhZGVyLmhlaWdodCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5oZWFkZXIuYmFja2dyb3VuZENvbG9yLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICBmbGV4U2hyaW5rOiAwLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLmJhbm5lcixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm94U2hhZG93OiB0aGVtZS5oZWFkZXIuc2hhZG93LFxuICBib3JkZXJUb3A6IGAke3RoZW1lLmhlYWRlci5ib3JkZXJUb3BUaGlja25lc3N9IHNvbGlkICR7dGhlbWUuaGVhZGVyLmJvcmRlclRvcENvbG9yfWAsXG5cbiAgLi4uKCRwb3NpdGlvbiA9PT0gXCJmaXhlZFwiICYmIHtcbiAgICBwb3NpdGlvbjogXCJmaXhlZFwiLFxuICAgIHRvcDogMCxcbiAgICBsZWZ0OiBcImF1dG9cIixcbiAgICByaWdodDogMCxcbiAgfSksXG4gIC4uLigkcG9zaXRpb24gPT09IFwicmVsYXRpdmVcIiAmJiB7IHBvc2l0aW9uOiBcInJlbGF0aXZlXCIgfSksXG4gIC4uLigkcG9zaXRpb24gPT09IFwiYWJzb2x1dGVcIiAmJiB7IHBvc2l0aW9uOiBcImFic29sdXRlXCIgfSksXG4gIC4uLigkcG9zaXRpb24gPT09IFwic3RhdGljXCIgJiYgeyBwb3NpdGlvbjogXCJzdGF0aWNcIiB9KSxcbiAgLi4uKCRwb3NpdGlvbiA9PT0gXCJzdGlja3lcIiAmJiB7IHBvc2l0aW9uOiBcInN0aWNreVwiIH0pLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVhZGVyUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHBhZGRpbmc6IGAwICR7dGhlbWUuc3BhY2Uuc219YCxcbiAgYm94U2hhZG93OiB0aGVtZS5oZWFkZXIuc2hhZG93LFxuICBcIiYgPiAqOm5vdChuYXYpXCI6IHtcbiAgICB6SW5kZXg6IDIsXG4gIH0sXG59KTtcbiJdfQ== */");
-const StyledHeaderRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "euwt7yw0"
-} : {
-  target: "euwt7yw0",
-  label: "StyledHeaderRoot"
-})({
-  display: "flex",
-  alignItems: "center",
-  width: "100%",
-  height: "100%",
-  padding: `0 ${uikitStyles.theme.space.sm}`,
-  boxShadow: uikitStyles.theme.header.shadow,
-  "& > *:not(nav)": {
-    zIndex: 2
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0hlYWRlci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDZ0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9IZWFkZXIvSGVhZGVyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQXBwQmFyID0gc3R5bGVkKFxuICBcImhlYWRlclwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRwb3NpdGlvbiB9OiB7ICRwb3NpdGlvbj86IHN0cmluZyB9KSA9PiAoe1xuICBoZWlnaHQ6IHRoZW1lLmhlYWRlci5oZWlnaHQsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuaGVhZGVyLmJhY2tncm91bmRDb2xvcixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgZmxleFNocmluazogMCxcbiAgekluZGV4OiB0aGVtZS56SW5kaWNlcy5iYW5uZXIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuaGVhZGVyLnNoYWRvdyxcbiAgYm9yZGVyVG9wOiBgJHt0aGVtZS5oZWFkZXIuYm9yZGVyVG9wVGhpY2tuZXNzfSBzb2xpZCAke3RoZW1lLmhlYWRlci5ib3JkZXJUb3BDb2xvcn1gLFxuXG4gIC4uLigkcG9zaXRpb24gPT09IFwiZml4ZWRcIiAmJiB7XG4gICAgcG9zaXRpb246IFwiZml4ZWRcIixcbiAgICB0b3A6IDAsXG4gICAgbGVmdDogXCJhdXRvXCIsXG4gICAgcmlnaHQ6IDAsXG4gIH0pLFxuICAuLi4oJHBvc2l0aW9uID09PSBcInJlbGF0aXZlXCIgJiYgeyBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiIH0pLFxuICAuLi4oJHBvc2l0aW9uID09PSBcImFic29sdXRlXCIgJiYgeyBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiIH0pLFxuICAuLi4oJHBvc2l0aW9uID09PSBcInN0YXRpY1wiICYmIHsgcG9zaXRpb246IFwic3RhdGljXCIgfSksXG4gIC4uLigkcG9zaXRpb24gPT09IFwic3RpY2t5XCIgJiYgeyBwb3NpdGlvbjogXCJzdGlja3lcIiB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlYWRlclJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBwYWRkaW5nOiBgMCAke3RoZW1lLnNwYWNlLnNtfWAsXG4gIGJveFNoYWRvdzogdGhlbWUuaGVhZGVyLnNoYWRvdyxcbiAgXCImID4gKjpub3QobmF2KVwiOiB7XG4gICAgekluZGV4OiAyLFxuICB9LFxufSk7XG4iXX0= */");
-exports.StyledAppBar = StyledAppBar;
-exports.StyledHeaderRoot = StyledHeaderRoot;
+  backgroundColor: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Header.styles.cjs.map

package/dist/cjs/components/Header/Header.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.cjs","sources":["../../../../src/components/Header/Header.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledAppBar = styled(\n  \"header\",\n  transientOptions\n)(({ $position }: { $position?: string }) => ({\n  height: theme.header.height,\n  backgroundColor: theme.header.backgroundColor,\n  display: \"flex\",\n  flexDirection: \"column\",\n  width: \"100%\",\n  boxSizing: \"border-box\",\n  flexShrink: 0,\n  zIndex: theme.zIndices.banner,\n  color: theme.colors.atmo1,\n  boxShadow: theme.header.shadow,\n  borderTop: `${theme.header.borderTopThickness} solid ${theme.header.borderTopColor}`,\n\n  ...($position === \"fixed\" && {\n    position: \"fixed\",\n    top: 0,\n    left: \"auto\",\n    right: 0,\n  }),\n  ...($position === \"relative\" && { position: \"relative\" }),\n  ...($position === \"absolute\" && { position: \"absolute\" }),\n  ...($position === \"static\" && { position: \"static\" }),\n  ...($position === \"sticky\" && { position: \"sticky\" }),\n}));\n\nexport const StyledHeaderRoot = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n  width: \"100%\",\n  height: \"100%\",\n  padding: `0 ${theme.space.sm}`,\n  boxShadow: theme.header.shadow,\n  \"& > *:not(nav)\": {\n    zIndex: 2,\n  },\n});\n"],"names":["StyledAppBar","process","env","NODE_ENV","_extends","target","transientOptions","label","$position","height","theme","header","backgroundColor","display","flexDirection","width","boxSizing","flexShrink","zIndex","zIndices","banner","color","colors","atmo1","boxShadow","shadow","borderTop","borderTopThickness","borderTopColor","position","top","left","right","StyledHeaderRoot","_styled","alignItems","padding","space","sm"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIaA,MAAAA,wDACX,UAAQC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACRC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAkC,OAAO;AAAA,EAC5CC,QAAQC,YAAAA,MAAMC,OAAOF;AAAAA,EACrBG,iBAAiBF,YAAAA,MAAMC,OAAOC;AAAAA,EAC9BC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,OAAO;AAAA,EACPC,WAAW;AAAA,EACXC,YAAY;AAAA,EACZC,QAAQR,YAAAA,MAAMS,SAASC;AAAAA,EACvBC,OAAOX,YAAAA,MAAMY,OAAOC;AAAAA,EACpBC,WAAWd,YAAAA,MAAMC,OAAOc;AAAAA,EACxBC,WAAY,GAAEhB,YAAAA,MAAMC,OAAOgB,4BAA4BjB,kBAAMC,OAAOiB;AAAAA,EAEpE,GAAIpB,cAAc,WAAW;AAAA,IAC3BqB,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,MAAM;AAAA,IACNC,OAAO;AAAA,EACT;AAAA,EACA,GAAIxB,cAAc,cAAc;AAAA,IAAEqB,UAAU;AAAA,EAAW;AAAA,EACvD,GAAIrB,cAAc,cAAc;AAAA,IAAEqB,UAAU;AAAA,EAAW;AAAA,EACvD,GAAIrB,cAAc,YAAY;AAAA,IAAEqB,UAAU;AAAA,EAAS;AAAA,EACnD,GAAIrB,cAAc,YAAY;AAAA,IAAEqB,UAAU;AAAA,EAAS;AACrD,IAAE5B,QAAAC,IAAAC,aAAC,eAAA,KAAA,qrEAAA;AAEI,MAAM8B,mBAA0BC,iCAAA,QAAA,OAAKjC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAAE;AAAA,EAC5CM,SAAS;AAAA,EACTsB,YAAY;AAAA,EACZpB,OAAO;AAAA,EACPN,QAAQ;AAAA,EACR2B,SAAU,KAAI1B,YAAAA,MAAM2B,MAAMC;AAAAA,EAC1Bd,WAAWd,YAAAA,MAAMC,OAAOc;AAAAA,EACxB,kBAAkB;AAAA,IAChBP,QAAQ;AAAA,EACV;AACF,GAACjB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qrEAAA;;;"}
+{"version":3,"file":"Header.styles.cjs","sources":["../../../../src/components/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.header.backgroundColor,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    color: theme.colors.atmo1,\n    boxShadow: theme.header.shadow,\n    borderTop: `${theme.header.borderTopThickness} solid ${theme.header.borderTopColor}`,\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: `0 ${theme.space.sm}`,\n    boxShadow: theme.header.shadow,\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  backgroundColor: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","theme","header","backgroundColor","display","flexDirection","width","boxSizing","flexShrink","zIndex","zIndices","banner","color","colors","atmo1","boxShadow","shadow","borderTop","borderTopThickness","borderTopColor","alignItems","padding","space","sm"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,QAAQC,YAAAA,MAAMC,OAAOF;AAAAA,IACrBG,iBAAiBF,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,YAAY;AAAA,IACZC,QAAQR,YAAAA,MAAMS,SAASC;AAAAA,IACvBC,OAAOX,YAAAA,MAAMY,OAAOC;AAAAA,IACpBC,WAAWd,YAAAA,MAAMC,OAAOc;AAAAA,IACxBC,WAAY,GAAEhB,YAAAA,MAAMC,OAAOgB,4BAA4BjB,kBAAMC,OAAOiB;AAAAA,EACtE;AAAA,EACAjB,QAAQ;AAAA,IACNE,SAAS;AAAA,IACTgB,YAAY;AAAA,IACZd,OAAO;AAAA,IACPN,QAAQ;AAAA,IACRqB,SAAU,KAAIpB,YAAAA,MAAMqB,MAAMC;AAAAA,IAC1BR,WAAWd,YAAAA,MAAMC,OAAOc;AAAAA,IACxB,kBAAkB;AAAA,MAChBP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAN,iBAAiB,CAAC;AACpB,CAAC;;;"}

package/dist/cjs/components/Header/Navigation/MenuBar/Bar.cjs

@@ -1,27 +1,31 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const React = require("react");
 const SelectionContext = require("../utils/SelectionContext.cjs");
 const Bar_styles = require("./Bar.styles.cjs");
-const menuBarClasses = require("./menuBarClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Bar = ({
   id,
   data = [],
   type = "menubar",
   className,
-  children
+  children,
+  classes: classesProp
 }) => {
+  const {
+    classes,
+    cx
+  } = Bar_styles.useClasses(classesProp);
   const selectionPath = React.useContext(SelectionContext.SelectionContext);
   const isMenu = type === "menu";
   const isActive = isMenu && data.filter((item) => item.id === (selectionPath == null ? void 0 : selectionPath[1])).length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Bar_styles.MenuBarRoot, {
-    className: clsx.clsx(className, isMenu && menuBarClasses.default.hidden, isActive && menuBarClasses.default.active),
-    $type: type,
-    $hidden: isMenu,
-    $active: isActive,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Bar_styles.MenuBarUl, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: cx(classes.root, classes[type], {
+      [classes.hidden]: isMenu,
+      [classes.active]: isActive
+    }, className),
+    children: /* @__PURE__ */ jsxRuntime.jsx("ul", {
+      className: classes.list,
       id,
       onFocus: () => {
       },
@@ -29,5 +33,6 @@ const Bar = ({
     })
   });
 };
+exports.headerMenuBarClasses = Bar_styles.staticClasses;
 exports.Bar = Bar;
 //# sourceMappingURL=Bar.cjs.map

package/dist/cjs/components/Header/Navigation/MenuBar/Bar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { MenuBarRoot, MenuBarUl } from \"./Bar.styles\";\nimport headerMenuBarClasses from \"./menuBarClasses\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\n\nexport interface BarProps extends HvBaseProps {\n  data: HvHeaderNavigationItemProp[];\n  type?: string;\n}\n\nexport const Bar = ({\n  id,\n  data = [],\n  type = \"menubar\",\n  className,\n  children,\n}: BarProps) => {\n  const selectionPath = useContext(SelectionContext);\n\n  const isMenu = type === \"menu\";\n\n  const isActive =\n    isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;\n\n  return (\n    <MenuBarRoot\n      className={clsx(\n        className,\n        isMenu && headerMenuBarClasses.hidden,\n        isActive && headerMenuBarClasses.active\n      )}\n      $type={type}\n      $hidden={isMenu}\n      $active={isActive}\n    >\n      <MenuBarUl id={id} onFocus={() => {}}>\n        {children}\n      </MenuBarUl>\n    </MenuBarRoot>\n  );\n};\n"],"names":["Bar","id","data","type","className","children","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","MenuBarRoot","clsx","headerMenuBarClasses","hidden","active","$type","$hidden","$active","MenuBarUl","onFocus"],"mappings":";;;;;;;;AAgBO,MAAMA,MAAMA,CAAC;AAAA,EAClBC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACQ,MAAM;AACRC,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAEjD,QAAMC,SAASN,SAAS;AAElBO,QAAAA,WACJD,UAAUP,KAAKS,OAAQC,CAAAA,SAASA,KAAKX,QAAOK,+CAAgB,GAAE,EAAEO,SAAS;AAE3E,wCACGC,WAAAA,aAAW;AAAA,IACVV,WAAWW,KAAAA,KACTX,WACAK,UAAUO,uBAAqBC,QAC/BP,YAAYM,uBAAqBE,MACnC;AAAA,IACAC,OAAOhB;AAAAA,IACPiB,SAASX;AAAAA,IACTY,SAASX;AAAAA,IAASL,yCAEjBiB,sBAAS;AAAA,MAACrB;AAAAA,MAAQsB,SAASA,MAAM;AAAA,MAAC;AAAA,MAAElB;AAAAA,IAAAA,CAE1B;AAAA,EAAA,CACA;AAEjB;;"}
+{"version":3,"file":"Bar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { staticClasses, useClasses } from \"./Bar.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\n\nexport { staticClasses as headerMenuBarClasses };\n\nexport type HvHeaderMenuBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface BarProps extends HvBaseProps {\n  data: HvHeaderNavigationItemProp[];\n  type?: string;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const Bar = ({\n  id,\n  data = [],\n  type = \"menubar\",\n  className,\n  children,\n  classes: classesProp,\n}: BarProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const isMenu = type === \"menu\";\n\n  const isActive =\n    isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[type],\n        {\n          [classes.hidden]: isMenu,\n          [classes.active]: isActive,\n        },\n        className\n      )}\n    >\n      <ul className={classes.list} id={id} onFocus={() => {}}>\n        {children}\n      </ul>\n    </div>\n  );\n};\n"],"names":["Bar","id","data","type","className","children","classes","classesProp","cx","useClasses","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","root","hidden","active","list","onFocus"],"mappings":";;;;;;AAmBO,MAAMA,MAAMA,CAAC;AAAA,EAClBC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACD,MAAM;AACR,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAAA,WAAWF,WAAW;AAExCG,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAEjD,QAAMC,SAASV,SAAS;AAElBW,QAAAA,WACJD,UAAUX,KAAKa,OAAQC,CAAAA,SAASA,KAAKf,QAAOS,+CAAgB,GAAE,EAAEO,SAAS;AAE3E,wCACE,OAAA;AAAA,IACEb,WAAWI,GACTF,QAAQY,MACRZ,QAAQH,IAAI,GACZ;AAAA,MACE,CAACG,QAAQa,MAAM,GAAGN;AAAAA,MAClB,CAACP,QAAQc,MAAM,GAAGN;AAAAA,OAEpBV,SACF;AAAA,IAAEC,yCAEF,MAAA;AAAA,MAAID,WAAWE,QAAQe;AAAAA,MAAMpB;AAAAA,MAAQqB,SAASA,MAAM;AAAA,MAAC;AAAA,MAAEjB;AAAAA,IAAAA,CAEnD;AAAA,EAAA,CACD;AAET;;;"}

package/dist/cjs/components/Header/Navigation/MenuBar/Bar.styles.cjs

@@ -1,25 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../../../utils/transientOptions.cjs");
-const menuBarClasses = require("./menuBarClasses.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-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 classes = require("../../../../utils/classes.cjs");
 const show = {
   top: `calc(${uikitStyles.theme.header.height} - ${uikitStyles.theme.header.borderTopThickness})`,
   transition: ["top"],
@@ -33,27 +15,19 @@ const hide = {
   boxShadow: "none",
   transitionDuration: "300ms"
 };
-const MenuBarRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1e3i9c01"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1e3i9c01",
-  label: "MenuBarRoot"
-}, transientOptions.transientOptions))(({
-  $type,
-  $hidden,
-  $active
-}) => ({
-  left: 0,
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  ...$type === "menubar" && {
-    position: "relative",
-    backgroundColor: uikitStyles.theme.header.backgroundColor
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvHeader-MenuBar", {
+  root: {
+    left: 0,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
   },
-  ...$type === "menu" && {
+  menu: {
     position: "absolute",
     zIndex: -2,
     height: uikitStyles.theme.header.secondLevelHeight,
@@ -62,40 +36,38 @@ const MenuBarRoot = /* @__PURE__ */ _styled__default.default("div", process.env.
       marginTop: 0
     }
   },
-  ...$hidden && {
-    ...hide
+  menubar: {
+    position: "relative",
+    backgroundColor: uikitStyles.theme.header.backgroundColor
   },
-  ...$active && {
-    ...show
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUJhci9CYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QjJCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUJhci9CYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgaGVhZGVyTWVudUJhckNsYXNzZXMgZnJvbSBcIi4vbWVudUJhckNsYXNzZXNcIjtcblxuY29uc3Qgc2hvdyA9IHtcbiAgdG9wOiBgY2FsYygke3RoZW1lLmhlYWRlci5oZWlnaHR9IC0gJHt0aGVtZS5oZWFkZXIuYm9yZGVyVG9wVGhpY2tuZXNzfSlgLFxuICB0cmFuc2l0aW9uOiBbXCJ0b3BcIl0sXG4gIGJveFNoYWRvdzogdGhlbWUuaGVhZGVyLnNoYWRvdyxcbiAgdHJhbnNpdGlvbkR1cmF0aW9uOiBcIjUwMG1zXCIsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsQmFja2dyb3VuZENvbG9yLFxufTtcblxuZXhwb3J0IGNvbnN0IGhpZGUgPSB7XG4gIHRvcDogMCxcbiAgdHJhbnNpdGlvbjogW1widG9wXCJdLFxuICBib3hTaGFkb3c6IFwibm9uZVwiLFxuICB0cmFuc2l0aW9uRHVyYXRpb246IFwiMzAwbXNcIixcbn07XG5cbmV4cG9ydCBjb25zdCBNZW51QmFyUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkdHlwZSxcbiAgICAkaGlkZGVuLFxuICAgICRhY3RpdmUsXG4gIH06IHtcbiAgICAkdHlwZTogc3RyaW5nO1xuICAgICRoaWRkZW4/OiBib29sZWFuO1xuICAgICRhY3RpdmU/OiBib29sZWFuO1xuICB9KSA9PiAoe1xuICAgIGxlZnQ6IDAsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAuLi4oJHR5cGUgPT09IFwibWVudWJhclwiICYmIHtcbiAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmhlYWRlci5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSksXG4gICAgLi4uKCR0eXBlID09PSBcIm1lbnVcIiAmJiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAtMixcbiAgICAgIGhlaWdodDogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsSGVpZ2h0LFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBcIiYgbGkgPiBkaXZcIjoge1xuICAgICAgICBtYXJnaW5Ub3A6IDAsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkaGlkZGVuICYmIHsgLi4uaGlkZSB9KSxcbiAgICAuLi4oJGFjdGl2ZSAmJiB7IC4uLnNob3cgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgTWVudUJhclVsID0gc3R5bGVkKFwidWxcIikoe1xuICBtYXJnaW46IDAsXG4gIHBhZGRpbmc6IDAsXG4gIGRpc3BsYXk6IFwiaW5oZXJpdFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBbYCY6aG92ZXIgLiR7aGVhZGVyTWVudUJhckNsYXNzZXMuYWN0aXZlfWBdOiB7XG4gICAgLi4uaGlkZSxcbiAgfSxcbiAgW2AmIGxpOmhvdmVyID4gLiR7aGVhZGVyTWVudUJhckNsYXNzZXMuaGlkZGVufWBdOiB7XG4gICAgLi4uc2hvdyxcbiAgfSxcblxuICBbYCY6Zm9jdXMtd2l0aGluIC4ke2hlYWRlck1lbnVCYXJDbGFzc2VzLmFjdGl2ZX1gXToge1xuICAgIC4uLmhpZGUsXG4gICAgekluZGV4OiAtMixcbiAgfSxcbiAgW2AmIGxpOmZvY3VzLXdpdGhpbiA+IC4ke2hlYWRlck1lbnVCYXJDbGFzc2VzLmhpZGRlbn1gXToge1xuICAgIC4uLnNob3csXG4gICAgekluZGV4OiAtMSxcbiAgfSxcbn0pO1xuIl19 */");
-const MenuBarUl = /* @__PURE__ */ _styled__default.default("ul", process.env.NODE_ENV === "production" ? {
-  target: "e1e3i9c00"
-} : {
-  target: "e1e3i9c00",
-  label: "MenuBarUl"
-})({
-  margin: 0,
-  padding: 0,
-  display: "inherit",
-  alignItems: "center",
-  height: "100%",
-  [`&:hover .${menuBarClasses.default.active}`]: {
+  hidden: {
     ...hide
   },
-  [`& li:hover > .${menuBarClasses.default.hidden}`]: {
+  active: {
     ...show
   },
-  [`&:focus-within .${menuBarClasses.default.active}`]: {
-    ...hide,
-    zIndex: -2
-  },
-  [`& li:focus-within > .${menuBarClasses.default.hidden}`]: {
-    ...show,
-    zIndex: -1
+  list: {
+    margin: 0,
+    padding: 0,
+    display: "inherit",
+    alignItems: "center",
+    height: "100%",
+    "&:hover $active": {
+      ...hide
+    },
+    "& li:hover > $hidden": {
+      ...show
+    },
+    "&:focus-within $active": {
+      ...hide,
+      zIndex: -2
+    },
+    "& li:focus-within > $hidden": {
+      ...show,
+      zIndex: -1
+    }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUJhci9CYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0RHlCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL05hdmlnYXRpb24vTWVudUJhci9CYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgaGVhZGVyTWVudUJhckNsYXNzZXMgZnJvbSBcIi4vbWVudUJhckNsYXNzZXNcIjtcblxuY29uc3Qgc2hvdyA9IHtcbiAgdG9wOiBgY2FsYygke3RoZW1lLmhlYWRlci5oZWlnaHR9IC0gJHt0aGVtZS5oZWFkZXIuYm9yZGVyVG9wVGhpY2tuZXNzfSlgLFxuICB0cmFuc2l0aW9uOiBbXCJ0b3BcIl0sXG4gIGJveFNoYWRvdzogdGhlbWUuaGVhZGVyLnNoYWRvdyxcbiAgdHJhbnNpdGlvbkR1cmF0aW9uOiBcIjUwMG1zXCIsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsQmFja2dyb3VuZENvbG9yLFxufTtcblxuZXhwb3J0IGNvbnN0IGhpZGUgPSB7XG4gIHRvcDogMCxcbiAgdHJhbnNpdGlvbjogW1widG9wXCJdLFxuICBib3hTaGFkb3c6IFwibm9uZVwiLFxuICB0cmFuc2l0aW9uRHVyYXRpb246IFwiMzAwbXNcIixcbn07XG5cbmV4cG9ydCBjb25zdCBNZW51QmFyUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkdHlwZSxcbiAgICAkaGlkZGVuLFxuICAgICRhY3RpdmUsXG4gIH06IHtcbiAgICAkdHlwZTogc3RyaW5nO1xuICAgICRoaWRkZW4/OiBib29sZWFuO1xuICAgICRhY3RpdmU/OiBib29sZWFuO1xuICB9KSA9PiAoe1xuICAgIGxlZnQ6IDAsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICAuLi4oJHR5cGUgPT09IFwibWVudWJhclwiICYmIHtcbiAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmhlYWRlci5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSksXG4gICAgLi4uKCR0eXBlID09PSBcIm1lbnVcIiAmJiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAtMixcbiAgICAgIGhlaWdodDogdGhlbWUuaGVhZGVyLnNlY29uZExldmVsSGVpZ2h0LFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBcIiYgbGkgPiBkaXZcIjoge1xuICAgICAgICBtYXJnaW5Ub3A6IDAsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkaGlkZGVuICYmIHsgLi4uaGlkZSB9KSxcbiAgICAuLi4oJGFjdGl2ZSAmJiB7IC4uLnNob3cgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgTWVudUJhclVsID0gc3R5bGVkKFwidWxcIikoe1xuICBtYXJnaW46IDAsXG4gIHBhZGRpbmc6IDAsXG4gIGRpc3BsYXk6IFwiaW5oZXJpdFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBbYCY6aG92ZXIgLiR7aGVhZGVyTWVudUJhckNsYXNzZXMuYWN0aXZlfWBdOiB7XG4gICAgLi4uaGlkZSxcbiAgfSxcbiAgW2AmIGxpOmhvdmVyID4gLiR7aGVhZGVyTWVudUJhckNsYXNzZXMuaGlkZGVufWBdOiB7XG4gICAgLi4uc2hvdyxcbiAgfSxcblxuICBbYCY6Zm9jdXMtd2l0aGluIC4ke2hlYWRlck1lbnVCYXJDbGFzc2VzLmFjdGl2ZX1gXToge1xuICAgIC4uLmhpZGUsXG4gICAgekluZGV4OiAtMixcbiAgfSxcbiAgW2AmIGxpOmZvY3VzLXdpdGhpbiA+IC4ke2hlYWRlck1lbnVCYXJDbGFzc2VzLmhpZGRlbn1gXToge1xuICAgIC4uLnNob3csXG4gICAgekluZGV4OiAtMSxcbiAgfSxcbn0pO1xuIl19 */");
-exports.MenuBarRoot = MenuBarRoot;
-exports.MenuBarUl = MenuBarUl;
-exports.hide = hide;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Bar.styles.cjs.map

package/dist/cjs/components/Header/Navigation/MenuBar/Bar.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.styles.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nimport headerMenuBarClasses from \"./menuBarClasses\";\n\nconst show = {\n  top: `calc(${theme.header.height} - ${theme.header.borderTopThickness})`,\n  transition: [\"top\"],\n  boxShadow: theme.header.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.header.secondLevelBackgroundColor,\n};\n\nexport const hide = {\n  top: 0,\n  transition: [\"top\"],\n  boxShadow: \"none\",\n  transitionDuration: \"300ms\",\n};\n\nexport const MenuBarRoot = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $type,\n    $hidden,\n    $active,\n  }: {\n    $type: string;\n    $hidden?: boolean;\n    $active?: boolean;\n  }) => ({\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    ...($type === \"menubar\" && {\n      position: \"relative\",\n      backgroundColor: theme.header.backgroundColor,\n    }),\n    ...($type === \"menu\" && {\n      position: \"absolute\",\n      zIndex: -2,\n      height: theme.header.secondLevelHeight,\n      backgroundColor: theme.header.secondLevelBackgroundColor,\n      \"& li > div\": {\n        marginTop: 0,\n      },\n    }),\n    ...($hidden && { ...hide }),\n    ...($active && { ...show }),\n  })\n);\n\nexport const MenuBarUl = styled(\"ul\")({\n  margin: 0,\n  padding: 0,\n  display: \"inherit\",\n  alignItems: \"center\",\n  height: \"100%\",\n  [`&:hover .${headerMenuBarClasses.active}`]: {\n    ...hide,\n  },\n  [`& li:hover > .${headerMenuBarClasses.hidden}`]: {\n    ...show,\n  },\n\n  [`&:focus-within .${headerMenuBarClasses.active}`]: {\n    ...hide,\n    zIndex: -2,\n  },\n  [`& li:focus-within > .${headerMenuBarClasses.hidden}`]: {\n    ...show,\n    zIndex: -1,\n  },\n});\n"],"names":["show","top","theme","header","height","borderTopThickness","transition","boxShadow","shadow","transitionDuration","backgroundColor","secondLevelBackgroundColor","hide","MenuBarRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$type","$hidden","$active","left","width","display","justifyContent","alignItems","position","zIndex","secondLevelHeight","marginTop","MenuBarUl","_styled","margin","padding","headerMenuBarClasses","active","hidden"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,OAAO;AAAA,EACXC,KAAM,QAAOC,YAAAA,MAAMC,OAAOC,YAAYF,kBAAMC,OAAOE;AAAAA,EACnDC,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAWL,YAAAA,MAAMC,OAAOK;AAAAA,EACxBC,oBAAoB;AAAA,EACpBC,iBAAiBR,YAAAA,MAAMC,OAAOQ;AAChC;AAEO,MAAMC,OAAO;AAAA,EAClBX,KAAK;AAAA,EACLK,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAW;AAAA,EACXE,oBAAoB;AACtB;AAEaI,MAAAA,uDACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPrB,QAAQ;AAAA,EACRsB,SAAS;AAAA,EACTC,gBAAgB;AAAA,EAChBC,YAAY;AAAA,EACZ,GAAIP,UAAU,aAAa;AAAA,IACzBQ,UAAU;AAAA,IACVnB,iBAAiBR,YAAAA,MAAMC,OAAOO;AAAAA,EAChC;AAAA,EACA,GAAIW,UAAU,UAAU;AAAA,IACtBQ,UAAU;AAAA,IACVC,QAAQ;AAAA,IACR1B,QAAQF,YAAAA,MAAMC,OAAO4B;AAAAA,IACrBrB,iBAAiBR,YAAAA,MAAMC,OAAOQ;AAAAA,IAC9B,cAAc;AAAA,MACZqB,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,GAAIV,WAAW;AAAA,IAAE,GAAGV;AAAAA,EAAK;AAAA,EACzB,GAAIW,WAAW;AAAA,IAAE,GAAGvB;AAAAA,EAAK;AAC3B,IAAEc,QAAAC,IAAAC,0hGACJ;AAEO,MAAMiB,YAAmBC,iCAAA,QAAA,MAAIpB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAAE;AAAA,EACpCe,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTV,SAAS;AAAA,EACTE,YAAY;AAAA,EACZxB,QAAQ;AAAA,EACR,CAAE,YAAWiC,uBAAqBC,QAAQ,GAAG;AAAA,IAC3C,GAAG1B;AAAAA,EACL;AAAA,EACA,CAAE,iBAAgByB,uBAAqBE,QAAQ,GAAG;AAAA,IAChD,GAAGvC;AAAAA,EACL;AAAA,EAEA,CAAE,mBAAkBqC,uBAAqBC,QAAQ,GAAG;AAAA,IAClD,GAAG1B;AAAAA,IACHkB,QAAQ;AAAA,EACV;AAAA,EACA,CAAE,wBAAuBO,uBAAqBE,QAAQ,GAAG;AAAA,IACvD,GAAGvC;AAAAA,IACH8B,QAAQ;AAAA,EACV;AACF,GAAChB,QAAAC,IAAAC,aAAC,eAAA,KAAA,y/FAAA;;;;"}
+{"version":3,"file":"Bar.styles.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst show = {\n  top: `calc(${theme.header.height} - ${theme.header.borderTopThickness})`,\n  transition: [\"top\"],\n  boxShadow: theme.header.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.header.secondLevelBackgroundColor,\n};\n\nconst hide = {\n  top: 0,\n  transition: [\"top\"],\n  boxShadow: \"none\",\n  transitionDuration: \"300ms\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n  root: {\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  menu: {\n    position: \"absolute\",\n    zIndex: -2,\n    height: theme.header.secondLevelHeight,\n    backgroundColor: theme.header.secondLevelBackgroundColor,\n    \"& li > div\": {\n      marginTop: 0,\n    },\n  },\n  menubar: {\n    position: \"relative\",\n    backgroundColor: theme.header.backgroundColor,\n  },\n  hidden: { ...hide },\n  active: { ...show },\n  list: {\n    margin: 0,\n    padding: 0,\n    display: \"inherit\",\n    alignItems: \"center\",\n    height: \"100%\",\n    \"&:hover $active\": {\n      ...hide,\n    },\n    \"& li:hover > $hidden\": {\n      ...show,\n    },\n\n    \"&:focus-within $active\": {\n      ...hide,\n      zIndex: -2,\n    },\n    \"& li:focus-within > $hidden\": {\n      ...show,\n      zIndex: -1,\n    },\n  },\n});\n"],"names":["show","top","theme","header","height","borderTopThickness","transition","boxShadow","shadow","transitionDuration","backgroundColor","secondLevelBackgroundColor","hide","staticClasses","useClasses","createClasses","root","left","width","display","justifyContent","alignItems","menu","position","zIndex","secondLevelHeight","marginTop","menubar","hidden","active","list","margin","padding"],"mappings":";;;;AAIA,MAAMA,OAAO;AAAA,EACXC,KAAM,QAAOC,YAAAA,MAAMC,OAAOC,YAAYF,kBAAMC,OAAOE;AAAAA,EACnDC,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAWL,YAAAA,MAAMC,OAAOK;AAAAA,EACxBC,oBAAoB;AAAA,EACpBC,iBAAiBR,YAAAA,MAAMC,OAAOQ;AAChC;AAEA,MAAMC,OAAO;AAAA,EACXX,KAAK;AAAA,EACLK,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAW;AAAA,EACXE,oBAAoB;AACtB;AAEa,MAAA;AAAA,EAAEI;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,MAAM;AAAA,IACNC,OAAO;AAAA,IACPd,QAAQ;AAAA,IACRe,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,QAAQ;AAAA,IACRpB,QAAQF,YAAAA,MAAMC,OAAOsB;AAAAA,IACrBf,iBAAiBR,YAAAA,MAAMC,OAAOQ;AAAAA,IAC9B,cAAc;AAAA,MACZe,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPJ,UAAU;AAAA,IACVb,iBAAiBR,YAAAA,MAAMC,OAAOO;AAAAA,EAChC;AAAA,EACAkB,QAAQ;AAAA,IAAE,GAAGhB;AAAAA,EAAK;AAAA,EAClBiB,QAAQ;AAAA,IAAE,GAAG7B;AAAAA,EAAK;AAAA,EAClB8B,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTb,SAAS;AAAA,IACTE,YAAY;AAAA,IACZjB,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGQ;AAAAA,IACL;AAAA,IACA,wBAAwB;AAAA,MACtB,GAAGZ;AAAAA,IACL;AAAA,IAEA,0BAA0B;AAAA,MACxB,GAAGY;AAAAA,MACHY,QAAQ;AAAA,IACV;AAAA,IACA,+BAA+B;AAAA,MAC7B,GAAGxB;AAAAA,MACHwB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs

@@ -38,8 +38,14 @@ const HvHeaderMenuItem = ({
   type,
   onClick,
   levels,
-  currentLevel
+  currentLevel,
+  classes: classesProp,
+  className
 }) => {
+  const {
+    classes,
+    cx
+  } = MenuItem_styles.useClasses(classesProp);
   const selectionPath = React.useContext(SelectionContext.SelectionContext);
   const {
     dispatch
@@ -86,27 +92,28 @@ const HvHeaderMenuItem = ({
     itemHref = href;
     itemTarget = target;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(MenuItem_styles.MenuItemLi, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", {
     id,
-    $selected: !!isSelected,
-    $isMenu: isMenu,
-    children: [itemHref ? /* @__PURE__ */ jsxRuntime.jsx(MenuItem_styles.MenuItemLink, {
+    className: cx(classes.root, {
+      [classes.menu]: isMenu,
+      [classes.menubar]: !isMenu,
+      [classes.selected]: !!isSelected
+    }, className),
+    children: [itemHref ? /* @__PURE__ */ jsxRuntime.jsx("a", {
+      className: classes.link,
       href: itemHref,
       target: itemTarget,
       ...itemProps,
-      $isSelected: isSelected,
-      $isMenu: isMenu,
       "aria-current": isCurrent,
       children: label
     }) : (
       // keeping this code path for backwards compatibility, but
       // shouldn't really be used as it's not accessible
-      /* @__PURE__ */ jsxRuntime.jsx(MenuItem_styles.MenuItemLabel, {
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.button,
         role: "button",
         ...itemProps,
         tabIndex: 0,
-        $isSelected: isSelected,
-        $isMenu: isMenu,
         "aria-current": isCurrent,
         children: label
       })
@@ -123,5 +130,6 @@ const HvHeaderMenuItem = ({
     })]
   }, item.label);
 };
+exports.headerMenuItemClasses = MenuItem_styles.staticClasses;
 exports.HvHeaderMenuItem = HvHeaderMenuItem;
 //# sourceMappingURL=MenuItem.cjs.map