@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

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

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { useClasses } from "./Brand.styles.js";
 import { staticClasses } from "./Brand.styles.js";
@@ -14,15 +13,12 @@ const HvHeaderBrand = (props) => {
   } = useDefaultProps("HvHeaderBrand", props);
   const {
     classes,
-    cx,
-    css
+    cx
   } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
     logo,
     logo && name && /* @__PURE__ */ jsx("div", { className: classes.separator }),
-    name && /* @__PURE__ */ jsx(HvTypography, { className: css({
-      color: theme.header.brandColor
-    }), variant: "label", children: name })
+    name && /* @__PURE__ */ jsx(HvTypography, { className: classes.brandName, variant: "label", children: name })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography\n          className={css({ color: theme.header.brandColor })}\n          variant=\"label\"\n        >\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","classesProp","logo","name","className","others","useDefaultProps","cx","css","useClasses","root","separator","color","theme","header","brandColor"],"mappings":";;;;;;AAsBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBP,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAGjD,SAAA,qBAAC,SAAI,WAAWM,GAAGP,QAAQU,MAAMN,SAAS,GAAG,GAAIC,QAC9CH,UAAAA;AAAAA,IAAAA;AAAAA,IACAA,QAAQC,QAAQ,oBAAC,OAAI,EAAA,WAAWH,QAAQW,WAAa;AAAA,IACrDR,QACC,oBAAC,cACC,EAAA,WAAWK,IAAI;AAAA,MAAEI,OAAOC,MAAMC,OAAOC;AAAAA,IAAY,CAAA,GACjD,SAAQ,SAEPZ,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography className={classes.brandName} variant=\"label\">\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","classesProp","logo","name","className","others","useDefaultProps","cx","useClasses","root","separator","brandName"],"mappings":";;;;;AAoBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBP,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAG5C,SAAA,qBAAC,SAAI,WAAWM,GAAGP,QAAQS,MAAML,SAAS,GAAG,GAAIC,QAC9CH,UAAAA;AAAAA,IAAAA;AAAAA,IACAA,QAAQC,QAAQ,oBAAC,OAAI,EAAA,WAAWH,QAAQU,WAAa;AAAA,IACrDP,4BACE,cAAa,EAAA,WAAWH,QAAQW,WAAW,SAAQ,SACjDR,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

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

@@ -13,7 +13,8 @@ const {
     height: theme.space.sm,
     margin: theme.space.xs,
     backgroundColor: theme.colors.secondary
-  }
+  },
+  brandName: {}
 });
 export {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"Brand.styles.js","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,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC9CC,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQC,MAAMC,MAAMC;AAAAA,IACpBC,QAAQH,MAAMC,MAAMG;AAAAA,IACpBC,iBAAiBL,MAAMM,OAAOC;AAAAA,EAChC;AACF,CAAC;"}
+{"version":3,"file":"Brand.styles.js","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  brandName: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","separator","width","height","theme","space","sm","margin","xs","backgroundColor","colors","secondary","brandName"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC9CC,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQC,MAAMC,MAAMC;AAAAA,IACpBC,QAAQH,MAAMC,MAAMG;AAAAA,IACpBC,iBAAiBL,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,WAAW,CAAC;AACd,CAAC;"}

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

@@ -6,7 +6,7 @@ const {
 } = createClasses("HvHeader", {
   root: {
     height: theme.header.height,
-    backgroundColor: theme.header.backgroundColor,
+    backgroundColor: theme.colors.atmo1,
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -14,8 +14,8 @@ const {
     flexShrink: 0,
     zIndex: theme.zIndices.banner,
     color: theme.colors.atmo1,
-    boxShadow: theme.header.shadow,
-    borderTop: `${theme.header.borderTopThickness} solid ${theme.header.borderTopColor}`
+    boxShadow: theme.colors.shadow,
+    borderTop: "none"
   },
   header: {
     display: "flex",
@@ -23,7 +23,7 @@ const {
     width: "100%",
     height: "100%",
     padding: `0 ${theme.space.sm}`,
-    boxShadow: theme.header.shadow,
+    boxShadow: theme.colors.shadow,
     "& > *:not(nav)": {
       zIndex: 2
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.js","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,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,QAAQC,MAAMC,OAAOF;AAAAA,IACrBG,iBAAiBF,MAAMC,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,YAAY;AAAA,IACZC,QAAQR,MAAMS,SAASC;AAAAA,IACvBC,OAAOX,MAAMY,OAAOC;AAAAA,IACpBC,WAAWd,MAAMC,OAAOc;AAAAA,IACxBC,WAAY,GAAEhB,MAAMC,OAAOgB,kBAAmB,UAASjB,MAAMC,OAAOiB,cAAe;AAAA,EACrF;AAAA,EACAjB,QAAQ;AAAA,IACNE,SAAS;AAAA,IACTgB,YAAY;AAAA,IACZd,OAAO;AAAA,IACPN,QAAQ;AAAA,IACRqB,SAAU,KAAIpB,MAAMqB,MAAMC,EAAG;AAAA,IAC7BR,WAAWd,MAAMC,OAAOc;AAAAA,IACxB,kBAAkB;AAAA,MAChBP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAN,iBAAiB,CAAC;AACpB,CAAC;"}
+{"version":3,"file":"Header.styles.js","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.colors.atmo1,\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.colors.shadow,\n    borderTop: \"none\",\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: `0 ${theme.space.sm}`,\n    boxShadow: theme.colors.shadow,\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  backgroundColor: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","theme","header","backgroundColor","colors","atmo1","display","flexDirection","width","boxSizing","flexShrink","zIndex","zIndices","banner","color","boxShadow","shadow","borderTop","alignItems","padding","space","sm"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,QAAQC,MAAMC,OAAOF;AAAAA,IACrBG,iBAAiBF,MAAMG,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,YAAY;AAAA,IACZC,QAAQV,MAAMW,SAASC;AAAAA,IACvBC,OAAOb,MAAMG,OAAOC;AAAAA,IACpBU,WAAWd,MAAMG,OAAOY;AAAAA,IACxBC,WAAW;AAAA,EACb;AAAA,EACAf,QAAQ;AAAA,IACNI,SAAS;AAAA,IACTY,YAAY;AAAA,IACZV,OAAO;AAAA,IACPR,QAAQ;AAAA,IACRmB,SAAU,KAAIlB,MAAMmB,MAAMC,EAAG;AAAA,IAC7BN,WAAWd,MAAMG,OAAOY;AAAAA,IACxB,kBAAkB;AAAA,MAChBL,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAR,iBAAiB,CAAC;AACpB,CAAC;"}

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

@@ -3,14 +3,16 @@ import { useContext } from "react";
 import { SelectionContext } from "../utils/SelectionContext.js";
 import { useClasses } from "./Bar.styles.js";
 import { staticClasses } from "./Bar.styles.js";
-const Bar = ({
-  id,
-  data = [],
-  type = "menubar",
-  className,
-  children,
-  classes: classesProp
-}) => {
+import { useDefaultProps } from "../../../../hooks/useDefaultProps.js";
+const Bar = (props) => {
+  const {
+    id,
+    data = [],
+    type = "menubar",
+    className,
+    children,
+    classes: classesProp
+  } = useDefaultProps("HvHeaderMenuBarBar", props);
   const {
     classes,
     cx

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

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","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"],"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,WAAWF,WAAW;AAExCG,QAAAA,gBAAgBC,WAAWC,gBAAgB;AAEjD,QAAMC,SAASV,SAAS;AAElBW,QAAAA,WACJD,UAAUX,KAAKa,OAAQC,CAAAA,SAASA,KAAKf,QAAOS,+CAAgB,GAAE,EAAEO,SAAS;AAGzE,SAAA,oBAAC,SACC,WAAWT,GACTF,QAAQY,MACRZ,QAAQH,IAAI,GACZ;AAAA,IACE,CAACG,QAAQa,MAAM,GAAGN;AAAAA,IAClB,CAACP,QAAQc,MAAM,GAAGN;AAAAA,EACpB,GACAV,SACF,GAEA,UAAC,oBAAA,MAAA,EAAG,WAAWE,QAAQe,MAAM,IAAQ,SAAS,MAAM;AAAA,EAAA,GACjDhB,UACH,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Bar.js","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 { useDefaultProps } from \"@core/hooks\";\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 = (props: BarProps) => {\n  const {\n    id,\n    data = [],\n    type = \"menubar\",\n    className,\n    children,\n    classes: classesProp,\n  } = useDefaultProps(\"HvHeaderMenuBarBar\", props);\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","props","id","data","type","className","children","classes","classesProp","useDefaultProps","cx","useClasses","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","root","hidden","active","list"],"mappings":";;;;;;AAoBaA,MAAAA,MAAMA,CAACC,UAAoB;AAChC,QAAA;AAAA,IACJC;AAAAA,IACAC,OAAO,CAAE;AAAA,IACTC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBR,KAAK;AACzC,QAAA;AAAA,IAAEM;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,gBAAgBC,WAAWC,gBAAgB;AAEjD,QAAMC,SAASX,SAAS;AAElBY,QAAAA,WACJD,UAAUZ,KAAKc,OAAQC,CAAAA,SAASA,KAAKhB,QAAOU,+CAAgB,GAAE,EAAEO,SAAS;AAGzE,SAAA,oBAAC,SACC,WAAWT,GACTH,QAAQa,MACRb,QAAQH,IAAI,GACZ;AAAA,IACE,CAACG,QAAQc,MAAM,GAAGN;AAAAA,IAClB,CAACR,QAAQe,MAAM,GAAGN;AAAAA,EACpB,GACAX,SACF,GAEA,UAAC,oBAAA,MAAA,EAAG,WAAWE,QAAQgB,MAAM,IAAQ,SAAS,MAAM;AAAA,EAAA,GACjDjB,UACH,EACF,CAAA;AAEJ;"}

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

@@ -1,11 +1,11 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../../../utils/classes.js";
 const show = {
-  top: `calc(${theme.header.height} - ${theme.header.borderTopThickness})`,
+  top: theme.header.height,
   transition: ["top"],
-  boxShadow: theme.header.shadow,
+  boxShadow: theme.colors.shadow,
   transitionDuration: "500ms",
-  backgroundColor: theme.header.secondLevelBackgroundColor
+  backgroundColor: theme.colors.atmo2
 };
 const hide = {
   top: 0,
@@ -29,14 +29,14 @@ const {
     position: "absolute",
     zIndex: -2,
     height: theme.header.secondLevelHeight,
-    backgroundColor: theme.header.secondLevelBackgroundColor,
+    backgroundColor: theme.colors.atmo2,
     "& li > div": {
       marginTop: 0
     }
   },
   menubar: {
     position: "relative",
-    backgroundColor: theme.header.backgroundColor
+    backgroundColor: theme.colors.atmo1
   },
   hidden: {
     ...hide

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

@@ -1 +1 @@
-{"version":3,"file":"Bar.styles.js","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,MAAMC,OAAOC,MAAO,MAAKF,MAAMC,OAAOE,kBAAmB;AAAA,EACtEC,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAWL,MAAMC,OAAOK;AAAAA,EACxBC,oBAAoB;AAAA,EACpBC,iBAAiBR,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,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,MAAMC,OAAOsB;AAAAA,IACrBf,iBAAiBR,MAAMC,OAAOQ;AAAAA,IAC9B,cAAc;AAAA,MACZe,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPJ,UAAU;AAAA,IACVb,iBAAiBR,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;"}
+{"version":3,"file":"Bar.styles.js","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: theme.header.height,\n  transition: [\"top\"],\n  boxShadow: theme.colors.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.colors.atmo2,\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.colors.atmo2,\n    \"& li > div\": {\n      marginTop: 0,\n    },\n  },\n  menubar: {\n    position: \"relative\",\n    backgroundColor: theme.colors.atmo1,\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","transition","boxShadow","colors","shadow","transitionDuration","backgroundColor","atmo2","hide","staticClasses","useClasses","createClasses","root","left","width","display","justifyContent","alignItems","menu","position","zIndex","secondLevelHeight","marginTop","menubar","atmo1","hidden","active","list","margin","padding"],"mappings":";;AAIA,MAAMA,OAAO;AAAA,EACXC,KAAKC,MAAMC,OAAOC;AAAAA,EAClBC,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAWJ,MAAMK,OAAOC;AAAAA,EACxBC,oBAAoB;AAAA,EACpBC,iBAAiBR,MAAMK,OAAOI;AAChC;AAEA,MAAMC,OAAO;AAAA,EACXX,KAAK;AAAA,EACLI,YAAY,CAAC,KAAK;AAAA,EAClBC,WAAW;AAAA,EACXG,oBAAoB;AACtB;AAEa,MAAA;AAAA,EAAEI;AAAAA,EAAeC;AAAW,IAAIC,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,MAAMC,OAAOsB;AAAAA,IACrBf,iBAAiBR,MAAMK,OAAOI;AAAAA,IAC9B,cAAc;AAAA,MACZe,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACPJ,UAAU;AAAA,IACVb,iBAAiBR,MAAMK,OAAOqB;AAAAA,EAChC;AAAA,EACAC,QAAQ;AAAA,IAAE,GAAGjB;AAAAA,EAAK;AAAA,EAClBkB,QAAQ;AAAA,IAAE,GAAG9B;AAAAA,EAAK;AAAA,EAClB+B,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTd,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/esm/components/Header/Navigation/MenuBar/MenuBar.js

@@ -1,15 +1,18 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { Bar } from "./Bar.js";
 import { HvHeaderMenuItem } from "../MenuItem/MenuItem.js";
-const HvHeaderMenuBar = ({
-  data = [],
-  onClick,
-  type = "menubar",
-  levels,
-  currentLevel,
-  ...others
-}) => {
-  return /* @__PURE__ */ jsx(Bar, { data, type, ...others, children: data.map((item) => /* @__PURE__ */ jsx(HvHeaderMenuItem, { item, type, onClick, levels, currentLevel }, item.id)) });
+import { useDefaultProps } from "../../../../hooks/useDefaultProps.js";
+const HvHeaderMenuBar = (props) => {
+  const {
+    data = [],
+    onClick,
+    type = "menubar",
+    levels,
+    currentLevel,
+    classes,
+    ...others
+  } = useDefaultProps("HvHeaderMenuBar", props);
+  return /* @__PURE__ */ jsx(Bar, { data, type, classes, ...others, children: data.map((item) => /* @__PURE__ */ jsx(HvHeaderMenuItem, { item, type, onClick, levels, currentLevel }, item.id)) });
 };
 export {
   HvHeaderMenuBar

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

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n}\n\nexport const HvHeaderMenuBar = ({\n  data = [],\n  onClick,\n  type = \"menubar\",\n  levels,\n  currentLevel,\n  ...others\n}: HvHeaderMenuBarProps) => {\n  return (\n    <Bar data={data} type={type} {...others}>\n      {data.map((item: HvHeaderNavigationItemProp) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":["HvHeaderMenuBar","data","onClick","type","levels","currentLevel","others","map","item","id"],"mappings":";;;AAiBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AAExB,SAAA,oBAAC,OAAI,MAAY,MAAY,GAAIA,QAC9BL,UAAAA,KAAKM,IAAI,CAACC,6BACR,kBAEC,EAAA,MACA,MACA,SACA,QACA,gBALKA,KAAKC,EAKiB,CAE9B,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar, HvHeaderMenuBarClasses } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const HvHeaderMenuBar = (props: HvHeaderMenuBarProps) => {\n  const {\n    data = [],\n    onClick,\n    type = \"menubar\",\n    levels,\n    currentLevel,\n    classes,\n    ...others\n  } = useDefaultProps(\"HvHeaderMenuBar\", props);\n  return (\n    <Bar data={data} type={type} classes={classes} {...others}>\n      {data.map((item: HvHeaderNavigationItemProp) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":["HvHeaderMenuBar","props","data","onClick","type","levels","currentLevel","classes","others","useDefaultProps","map","item","id"],"mappings":";;;;AAmBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,OAAO,CAAE;AAAA,IACTC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBR,KAAK;AAE1C,SAAA,oBAAC,OAAI,MAAY,MAAY,SAAsBO,GAAAA,QAChDN,eAAKQ,IAAI,CAACC,SACR,oBAAA,kBAAA,EAEC,MACA,MACA,SACA,QACA,aALKA,GAAAA,KAAKC,EAKiB,CAE9B,EACH,CAAA;AAEJ;"}

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

@@ -6,6 +6,7 @@ import { SelectionContext } from "../utils/SelectionContext.js";
 import { useClasses } from "./MenuItem.styles.js";
 import { staticClasses } from "./MenuItem.styles.js";
 import { Bar } from "../MenuBar/Bar.js";
+import { useDefaultProps } from "../../../../hooks/useDefaultProps.js";
 import { HvTypography } from "../../../Typography/Typography.js";
 const traverseItem = (node) => {
   var _a;
@@ -31,16 +32,17 @@ const traverseItem = (node) => {
     target
   };
 };
-const HvHeaderMenuItem = ({
-  id,
-  item,
-  type,
-  onClick,
-  levels,
-  currentLevel,
-  classes: classesProp,
-  className
-}) => {
+const HvHeaderMenuItem = (props) => {
+  const {
+    id,
+    item,
+    type,
+    onClick,
+    levels,
+    currentLevel,
+    classes: classesProp,
+    className
+  } = useDefaultProps("HvHeaderMenuItem", props);
   const {
     classes,
     cx

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = ({\n  id,\n  item,\n  type,\n  onClick,\n  levels,\n  currentLevel,\n  classes: classesProp,\n  className,\n}: HvHeaderMenuItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","itemHref","itemTarget","root","menu","menubar","selected","link","button","map","itm"],"mappings":";;;;;;;;;AA4BA,MAAMA,eAAeA,CAACC,SAAqC;;AACrDC,MAAAA;AACAC,MAAAA;AAEJ,MAAIF,6BAAMC,MAAM;AACdA,WAAOD,6BAAMC;AACbC,aAASF,6BAAME;AAAAA,EAAAA,YACNF,6BAAMG,SAAQ,UAAQH,kCAAMG,SAANH,mBAAYI,UAAS,GAAG;AACvD,QAAIC,IAAI;AACR,WAAOJ,QAAQ,QAAQI,IAAIL,KAAKG,KAAKC,QAAQ;AAC3C,YAAME,eAAeP,aAAaC,6BAAMG,KAAKE,EAAE;AAC3CC,WAAAA,6CAAcL,SAAQ,MAAM;AAC9BA,eAAOK,6CAAcL;AACrBC,iBAASI,6CAAcJ;AACvB;AAAA,MACF;AAEK,WAAA;AAAA,IACP;AAAA,EACF;AAEO,SAAA;AAAA,IAAED;AAAAA,IAAMC;AAAAA,EAAAA;AACjB;AAEO,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACqB,MAAM;AACrB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,gBAAgBC,WAAWC,gBAAgB;AAE3C,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAaF,WAAWG,YAAY;AAEtC,QAAA;AAAA,IAAEpB;AAAAA,EAASM,IAAAA;AAEXe,QAAAA,cAAcrB,QAAQA,KAAKC;AAEjC,QAAMqB,SAASf,SAAS;AAExB,QAAMgB,cAAaP,+CAAgBM,SAAS,IAAI,QAAOhB,KAAKD;AAI5D,QAAMmB,YAAYD,aAAcF,cAAc,OAAO,SAAUI;AAEzDC,QAAAA,gBAAgBA,CAACC,UAAe;AAElCA,QAAAA,MAAMpB,SAAS,WACfqB,MAAMD,OAAO,OAAO,KACpBC,MAAMD,OAAO,OAAO,GACpB;AACIA,UAAAA,MAAMpB,SAAS,SAAS;AAC1BoB,cAAME,cAAcC;MACtB;AAEAtB,yCAAUmB,OAAOrB;AAAAA,IACnB;AAAA,EAAA;AAGIyB,QAAAA,cAAcA,CAACJ,UAA4B;AACpC,yCAAA;AAAA,MAAEpB,MAAM;AAAA,MAAkByB,aAAaL,MAAME;AAAAA,IAAAA;AAAAA,EAAe;AAGzE,QAAMI,YAAY;AAAA,IAChBzB,SAASkB;AAAAA,IACTQ,WAAWR;AAAAA,IACXS,SAASJ;AAAAA,EAAAA;AAGX,QAAMK,QACJ,oBAAC,cACC,EAAA,WAAU,QACV,SAASb,aAAa,UAAU,QAChC,aAAWjB,KAAK8B,OAEf9B,eAAK8B,MACR,CAAA;AAGF,MAAIC,WAAW/B,6BAAMR;AACrB,MAAIwC,aAAahC,6BAAMP;AAInBO,OAAAA,6BAAMR,SAAQ,MAAM;AAChB,UAAA;AAAA,MAAEA;AAAAA,MAAMC;AAAAA,IAAAA,IAAWH,aAAaU,IAAI;AAC/BR,eAAAA;AACEC,iBAAAA;AAAAA,EACf;AAEA,8BACG,MACC,EAAA,IAEA,WAAWe,GACTH,QAAQ4B,MACR;AAAA,IACE,CAAC5B,QAAQ6B,IAAI,GAAGlB;AAAAA,IAChB,CAACX,QAAQ8B,OAAO,GAAG,CAACnB;AAAAA,IACpB,CAACX,QAAQ+B,QAAQ,GAAG,CAAC,CAACnB;AAAAA,EAAAA,GAExBV,SACF,GAECwB,UAAAA;AAAAA,IAAAA,WACE,oBAAA,KAAA,EACC,WAAW1B,QAAQgC,MACnB,MAAMN,UACN,QAAQC,YACJL,GAAAA,WACJ,gBAAcT,WAEbY,UACH,OAAA;AAAA;AAAA;AAAA,MAIC,oBAAA,OAAA,EACC,WAAWzB,QAAQiC,QACnB,MAAK,UACDX,GAAAA,WACJ,UAAU,GACV,gBAAcT,WAEbY,UACH,OAAA;AAAA;AAAA,IAGDf,eAAeX,eAAeD,UAAUC,eAAe,KACtD,oBAAC,KAAI,EAAA,MAAY,MAAK,QACnBV,UAAK6C,KAAAA,IAAI,CAACC,QACR,oBAAA,kBAAA,EAEC,MAAMA,KACN,MAAK,QACL,SACA,QACA,cAAcpC,eAAe,EALxBoC,GAAAA,IAAIzC,EAKsB,CAElC,EACH,CAAA;AAAA,EAAA,KA/CGC,KAAK8B,KAiDZ;AAEJ;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n  const {\n    id,\n    item,\n    type,\n    onClick,\n    levels,\n    currentLevel,\n    classes: classesProp,\n    className,\n  } = useDefaultProps(\"HvHeaderMenuItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","props","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","useDefaultProps","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","itemHref","itemTarget","root","menu","menubar","selected","link","button","map","itm"],"mappings":"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"}

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

@@ -42,65 +42,48 @@ const {
 } = createClasses("HvHeader-MenuItem", {
   root: {
     display: "inline",
-    "& span": {
-      color: theme.header.color
-    },
     "&:hover": {
-      backgroundColor: theme.header.hoverColor
+      backgroundColor: theme.colors.containerBackgroundHover
     },
     "&:focus-within": {
-      backgroundColor: theme.header.hoverColor
+      backgroundColor: theme.colors.containerBackgroundHover
     }
   },
   menu: {
-    marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,
-    paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,
-    paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
+    marginTop: 0,
+    paddingBottom: "4px",
+    paddingTop: "4px",
     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
-    }
+    borderTop: "none",
+    borderBottom: `4px solid ${theme.colors.atmo2}`
   },
   menubar: {
-    marginTop: theme.header.selectedItemBorderTopThickness,
-    paddingBottom: theme.header.selectedItemBorderBottomThickness,
-    paddingTop: theme.header.selectedItemBorderBottomThickness,
+    marginTop: "0px",
+    paddingBottom: "4px",
+    paddingTop: "4px",
     height: "100%",
-    borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,
-    borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`,
-    "& > * > span": {
-      padding: theme.header.itemPadding
-    }
+    borderTop: `0px solid ${theme.colors.atmo1}`,
+    borderBottom: `${"4px"} solid ${theme.colors.atmo1}`
   },
   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,
+      borderTop: "none",
+      borderBottom: `4px solid ${theme.colors.secondary}`,
+      paddingTop: "4px",
       height: "100%",
       "& > * > span": {
-        color: theme.header.secondLevelSelectedItemColor,
-        backgroundColor: theme.header.secondLevelSelectedItemBackgroundColor,
-        borderRadius: theme.header.secondLevelSelectedItemBorderRadius
+        color: theme.colors.secondary
       }
     },
     "&$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
-      }
+      borderTop: "none",
+      borderBottom: `4px solid ${theme.colors.secondary}`,
+      paddingTop: "4px",
+      height: "100%"
     }
   },
   link: {

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 { 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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"}
+{"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      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    menu: {\n      marginTop: 0,\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: \"none\",\n      borderBottom: `4px solid ${theme.colors.atmo2}`,\n    },\n    menubar: {\n      marginTop: \"0px\",\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: `0px solid ${theme.colors.atmo1}`,\n      borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n    },\n    selected: {\n      \"&$menu\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.colors.secondary,\n        },\n      },\n      \"&$menubar\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\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","backgroundColor","colors","containerBackgroundHover","menu","marginTop","paddingBottom","paddingTop","borderTop","borderBottom","atmo2","menubar","atmo1","selected","secondary","color","link","textDecoration","button"],"mappings":";;;AAOA,MAAMA,OAAyB;AAAA,EAC7BC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,SAAU,GAAEC,MAAMC,MAAMC,EAAG,IAAGF,MAAMC,MAAME,EAAG;AAAA,EAC7CC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZ,YAAY;AAAA,IACVC,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACTA,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC;AAAAA,EACL;AAAA,EACA,UAAU;AAAA,IACRH,SAAS;AAAA,IACTI,eAAe;AAAA,IACfH,YAAY;AAAA,IACZI,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACfC,SAAS;AAAA,IACTP,QAAQ;AAAA,IACRQ,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,YAAYhB,MAAMiB,YAAYC;AAAAA,IAE9B,iBAAiB;AAAA,MACfb,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEa,MAAA;AAAA,EAAEc;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,qBACA;AAAA,EACEC,MAAM;AAAA,IACJjB,SAAS;AAAA,IACT,WAAW;AAAA,MACTkB,iBAAiBvB,MAAMwB,OAAOC;AAAAA,IAChC;AAAA,IACA,kBAAkB;AAAA,MAChBF,iBAAiBvB,MAAMwB,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZzB,QAAQ;AAAA,IACR0B,WAAW;AAAA,IACXC,cAAe,aAAY/B,MAAMwB,OAAOQ,KAAM;AAAA,EAChD;AAAA,EACAC,SAAS;AAAA,IACPN,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZzB,QAAQ;AAAA,IACR0B,WAAY,aAAY9B,MAAMwB,OAAOU,KAAM;AAAA,IAC3CH,cAAe,GAAE,KAAM,UAAS/B,MAAMwB,OAAOU,KAAM;AAAA,EACrD;AAAA,EACAC,UAAU;AAAA,IACR,UAAU;AAAA,MACRR,WAAW;AAAA,MACXC,eAAe;AAAA,MACfE,WAAW;AAAA,MACXC,cAAe,aAAY/B,MAAMwB,OAAOY,SAAU;AAAA,MAClDP,YAAY;AAAA,MACZzB,QAAQ;AAAA,MACR,gBAAgB;AAAA,QACdiC,OAAOrC,MAAMwB,OAAOY;AAAAA,MACtB;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACXT,WAAW;AAAA,MACXC,eAAe;AAAA,MACfE,WAAW;AAAA,MACXC,cAAe,aAAY/B,MAAMwB,OAAOY,SAAU;AAAA,MAClDP,YAAY;AAAA,MACZzB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAkC,MAAM;AAAA,IACJC,gBAAgB;AAAA,IAChB,GAAG3C;AAAAA,EACL;AAAA,EACA4C,QAAQ;AAAA,IACNH,OAAO;AAAA,IACP,GAAGzC;AAAAA,EACL;AACF,CACF;"}

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

@@ -39,16 +39,16 @@ const {
     justifyContent: "flex-start",
     alignItems: "center",
     backgroundColor: "transparent",
-    border: `${theme.inlineEditor.borderWidth} solid transparent`,
+    border: `1px solid transparent`,
     "&:hover, &:focus": {
-      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,
+      border: `1px solid ${theme.colors.primary}`,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"
       }
     },
     "&:active": {
-      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,
+      border: `1px solid ${theme.colors.secondary}`,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"

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

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.js","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { inputClasses } from \"@core/components/Input\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: \"transparent\",\n    border: `${theme.inlineEditor.borderWidth} solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing(0, \"xs\"),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","input","text","overflow","textOverflow","whiteSpace","alignSelf","largeText","textEmpty","color","theme","colors","secondary_60","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","inlineEditor","borderWidth","hoverBorderColor","visibility","activeBorderColor","icon","minWidth","margin","iconVisible"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJ,CAAE,MAAKC,gBAAiBC,SAAU,IAAGC,gBAAaD,SAAU,EAAC,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO,CAAC;AAAA,EACRP,WAAW,CAAC;AAAA,EACZQ,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,WAAW;AAAA,IACTC,OAAOC,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EACAC,QAAQ;AAAA,IACNC,SAASJ,MAAMK,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjDlB,WAAW;AAAA,IAEXmB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRrB,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS,GAAEb,MAAMc,aAAaC,WAAY;AAAA,IAE1C,oBAAoB;AAAA,MAClBF,QAAS,GAAEb,MAAMc,aAAaC,WAAY,UAASf,MAAMc,aAAaE,gBAAiB;AAAA,MACvFJ,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTK,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVJ,QAAS,GAAEb,MAAMc,aAAaC,WAAY,UAASf,MAAMc,aAAaI,iBAAkB;AAAA,MACxFN,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTK,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAW,MAAM;AAAA,IACJZ,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZrB,WAAW;AAAA,IACXV,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPY,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQrB,MAAMK,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACAiB,aAAa;AAAA,IACXL,YAAY;AAAA,EACd;AACF,CAAC;"}
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { inputClasses } from \"@core/components/Input\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: \"transparent\",\n    border: `1px solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `1px solid ${theme.colors.primary}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing(0, \"xs\"),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","input","text","overflow","textOverflow","whiteSpace","alignSelf","largeText","textEmpty","color","theme","colors","secondary_60","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","primary","visibility","secondary","icon","minWidth","margin","iconVisible"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJ,CAAE,MAAKC,gBAAiBC,SAAU,IAAGC,gBAAaD,SAAU,EAAC,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO,CAAC;AAAA,EACRP,WAAW,CAAC;AAAA,EACZQ,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,WAAW;AAAA,IACTC,OAAOC,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EACAC,QAAQ;AAAA,IACNC,SAASJ,MAAMK,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjDlB,WAAW;AAAA,IAEXmB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRrB,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS;AAAA,IAET,oBAAoB;AAAA,MAClBA,QAAS,aAAYb,MAAMC,OAAOa,OAAQ;AAAA,MAC1CF,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTG,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVF,QAAS,aAAYb,MAAMC,OAAOe,SAAU;AAAA,MAC5CJ,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTG,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTP,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAS,MAAM;AAAA,IACJV,QAAQ;AAAA,IACRQ,YAAY;AAAA,IACZnB,WAAW;AAAA,IACXV,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPU,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQnB,MAAMK,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACAe,aAAa;AAAA,IACXL,YAAY;AAAA,EACd;AACF,CAAC;"}

package/dist/esm/components/List/List.styles.js

@@ -36,7 +36,7 @@ const {
   item: {},
   itemSelector: {
     "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: theme.list.selectedBackgroundColor
+      backgroundColor: theme.colors.primary_20
     }
   },
   link: {

package/dist/esm/components/List/List.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../../src/components/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.list.selectedBackgroundColor,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","virtualizedRoot","marginBottom","selectorRoot","width","zIndex","selectorContainer","backgroundColor","outline","boxShadow","box","height","marginLeft","truncate","display","overflow","textOverflow","whiteSpace","item","itemSelector","theme","list","selectedBackgroundColor","link","typography","body","textDecoration","selectAllSelector","margin","position"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,iBAAiB;AAAA,IAAEC,cAAc;AAAA,EAAE;AAAA,EACnCC,cAAc;AAAA,IAAEC,OAAO;AAAA,IAAQC,QAAQ;AAAA,EAAE;AAAA,EACzCC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTC,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChBA,iBAAiB;AAAA,MACjBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,KAAK;AAAA,IAAEN,OAAO;AAAA,IAAQO,QAAQ;AAAA,IAAQC,YAAY;AAAA,EAAO;AAAA,EACzDC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpDZ,iBAAiBa,MAAMC,KAAKC;AAAAA,IAC9B;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJ,GAAGH,MAAMI,WAAWC;AAAAA,IACpBC,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACTjB,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAkB,mBAAmB;AAAA,IACjBvB,OAAO;AAAA,IACPwB,QAAQ;AAAA,IAERC,UAAU;AAAA,IACVxB,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"List.styles.js","sources":["../../../../src/components/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","virtualizedRoot","marginBottom","selectorRoot","width","zIndex","selectorContainer","backgroundColor","outline","boxShadow","box","height","marginLeft","truncate","display","overflow","textOverflow","whiteSpace","item","itemSelector","theme","colors","primary_20","link","typography","body","textDecoration","selectAllSelector","margin","position"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,iBAAiB;AAAA,IAAEC,cAAc;AAAA,EAAE;AAAA,EACnCC,cAAc;AAAA,IAAEC,OAAO;AAAA,IAAQC,QAAQ;AAAA,EAAE;AAAA,EACzCC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTC,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChBA,iBAAiB;AAAA,MACjBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,KAAK;AAAA,IAAEN,OAAO;AAAA,IAAQO,QAAQ;AAAA,IAAQC,YAAY;AAAA,EAAO;AAAA,EACzDC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpDZ,iBAAiBa,MAAMC,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJ,GAAGH,MAAMI,WAAWC;AAAAA,IACpBC,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACTjB,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAkB,mBAAmB;AAAA,IACjBvB,OAAO;AAAA,IACPwB,QAAQ;AAAA,IAERC,UAAU;AAAA,IACVxB,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js

@@ -47,18 +47,18 @@ const {
   interactive: {
     cursor: "pointer",
     "&:not($disabled):not($selected):hover": {
-      backgroundColor: theme.list.hoverColor
+      backgroundColor: theme.colors.containerBackgroundHover
     },
     "&$disabled": {
       cursor: "not-allowed"
     }
   },
   selected: {
-    backgroundColor: theme.list.hoverColor
+    backgroundColor: theme.colors.containerBackgroundHover
   },
   disabled: {
     color: theme.colors.secondary_60,
-    backgroundColor: theme.list.disabledBackgroundColor
+    backgroundColor: theme.colors.atmo3
   },
   withStartAdornment: {
     "& > div": {

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.list.hoverColor,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.list.hoverColor },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.list.disabledBackgroundColor,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","outlineStyles","backgroundColor","colors","atmo3","zIndex","focus","startAdornment","endAdornment","gutters","space","xs","paddingLeft","paddingRight","condensed","interactive","cursor","list","hoverColor","selected","disabled","color","secondary_60","disabledBackgroundColor","withStartAdornment","float","boxShadow","outline","fill","withEndAdornment"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,MAAMC,WAAWC;AAAAA,IACpBC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACbA,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAGC;AAAAA,MACHC,iBAAiBd,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,MAAMsB,MAAMC,EAAG;AAAA,IAE7B,wBAAwB;AAAA,MACtBC,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,aAAa;AAAA,IACXC,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvCd,iBAAiBd,MAAM6B,KAAKC;AAAAA,IAC9B;AAAA,IACA,cAAc;AAAA,MACZF,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAG,UAAU;AAAA,IAAEjB,iBAAiBd,MAAM6B,KAAKC;AAAAA,EAAW;AAAA,EACnDE,UAAU;AAAA,IACRC,OAAOjC,MAAMe,OAAOmB;AAAAA,IACpBpB,iBAAiBd,MAAM6B,KAAKM;AAAAA,EAC9B;AAAA,EACAC,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AAAA,EACAO,kBAAkB;AAAA,IAChB,WAAW;AAAA,MAAEJ,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","outlineStyles","backgroundColor","colors","atmo3","zIndex","focus","startAdornment","endAdornment","gutters","space","xs","paddingLeft","paddingRight","condensed","interactive","cursor","containerBackgroundHover","selected","disabled","color","secondary_60","withStartAdornment","float","boxShadow","outline","fill","withEndAdornment"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,MAAMC,WAAWC;AAAAA,IACpBC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACbA,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAGC;AAAAA,MACHC,iBAAiBd,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,MAAMsB,MAAMC,EAAG;AAAA,IAE7B,wBAAwB;AAAA,MACtBC,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,aAAa;AAAA,IACXC,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvCd,iBAAiBd,MAAMe,OAAOc;AAAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZD,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAE,UAAU;AAAA,IAAEhB,iBAAiBd,MAAMe,OAAOc;AAAAA,EAAyB;AAAA,EACnEE,UAAU;AAAA,IACRC,OAAOhC,MAAMe,OAAOkB;AAAAA,IACpBnB,iBAAiBd,MAAMe,OAAOC;AAAAA,EAChC;AAAA,EACAkB,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMtC,MAAMe,OAAOkB;AAAAA,IACrB;AAAA,EACF;AAAA,EACAM,kBAAkB;AAAA,IAChB,WAAW;AAAA,MAAEJ,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMtC,MAAMe,OAAOkB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;"}