@hitachivantara/uikit-react-core 5.0.0-next.20 → 5.0.0-next.21

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

@@ -12,7 +12,7 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
   justifyContent: theme.verticalNavigation.justifyContent,
   width: "100%",
   background: theme.colors.atmo1,
-  boxShadow: theme.shadows[1],
+  boxShadow: theme.colors.shadow,
   clipPath: "inset(0px -12px 0px 0px)",
   [`&.${verticalNavigationClasses.collapsed}`]: {
     width: "56px",
@@ -33,8 +33,13 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
   "& > :first-of-type:not(:last-child)": {
     borderTop: "none",
     padding: theme.spacing(["sm", "sm", "xs", "sm"])
+  },
+  [`&.${verticalNavigationClasses.slider}`]: {
+    "& > div:first-of-type": {
+      borderBottom: `3px solid ${theme.colors.atmo2}`
+    }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBqdXN0aWZ5Q29udGVudDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmp1c3RpZnlDb250ZW50LFxuXG4gIHdpZHRoOiBcIjEwMCVcIixcblxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuc2hhZG93c1sxXSxcbiAgY2xpcFBhdGg6IFwiaW5zZXQoMHB4IC0xMnB4IDBweCAwcHgpXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICB3aWR0aDogXCI1NnB4XCIsXG5cbiAgICBcIiYgPiA6Zmlyc3Qtb2YtdHlwZTpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgIH0sXG5cbiAgICBcIiYgPiA6bm90KG5hdjpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICB9LFxuICB9LFxuXG4gIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSxcbiAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wieHNcIiwgXCJzbVwiLCBcInNtXCIsIFwic21cIl0pLFxuICB9LFxuXG4gIFwiJiA+IDpmaXJzdC1vZi10eXBlOm5vdCg6bGFzdC1jaGlsZClcIjoge1xuICAgIGJvcmRlclRvcDogXCJub25lXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gIH0sXG59KTtcbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBqdXN0aWZ5Q29udGVudDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmp1c3RpZnlDb250ZW50LFxuXG4gIHdpZHRoOiBcIjEwMCVcIixcblxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgY2xpcFBhdGg6IFwiaW5zZXQoMHB4IC0xMnB4IDBweCAwcHgpXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICB3aWR0aDogXCI1NnB4XCIsXG5cbiAgICBcIiYgPiA6Zmlyc3Qtb2YtdHlwZTpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgIH0sXG5cbiAgICBcIiYgPiA6bm90KG5hdjpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICB9LFxuICB9LFxuXG4gIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSxcbiAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wieHNcIiwgXCJzbVwiLCBcInNtXCIsIFwic21cIl0pLFxuICB9LFxuXG4gIFwiJiA+IDpmaXJzdC1vZi10eXBlOm5vdCg6bGFzdC1jaGlsZClcIjoge1xuICAgIGJvcmRlclRvcDogXCJub25lXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gIH0sXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5zbGlkZXJ9YF06IHtcbiAgICBcIiYgPiBkaXY6Zmlyc3Qtb2YtdHlwZVwiOiB7XG4gICAgICBib3JkZXJCb3R0b206IGAzcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYXRtbzJ9YCxcbiAgICB9LFxuICB9LFxufSk7XG4iXX0= */");
 export {
   StyledRoot
 };

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalNavigationClasses from \"./verticalNavigationClasses\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"flex\",\n  flexDirection: \"column\",\n  justifyContent: theme.verticalNavigation.justifyContent,\n\n  width: \"100%\",\n\n  background: theme.colors.atmo1,\n  boxShadow: theme.shadows[1],\n  clipPath: \"inset(0px -12px 0px 0px)\",\n\n  [`&.${verticalNavigationClasses.collapsed}`]: {\n    width: \"56px\",\n\n    \"& > :first-of-type:not(:last-child)\": {\n      padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n    },\n\n    \"& > :not(nav:first-of-type)\": {\n      padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n    },\n  },\n\n  \"& > :only-child\": {\n    padding: theme.space.sm,\n  },\n  \"& > :not(nav:first-of-type)\": {\n    borderTop: `3px solid ${theme.colors.atmo2}`,\n    padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n  },\n\n  \"& > :first-of-type:not(:last-child)\": {\n    borderTop: \"none\",\n    padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n  },\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadows","clipPath","verticalNavigationClasses","collapsed","padding","spacing","space","sm","borderTop","atmo2"],"mappings":";;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,gBAAgBC,MAAMC,mBAAmBF;AAAAA,EAEzCG,OAAO;AAAA,EAEPC,YAAYH,MAAMI,OAAOC;AAAAA,EACzBC,WAAWN,MAAMO,QAAQ,CAAC;AAAA,EAC1BC,UAAU;AAAA,EAEV,CAAE,KAAIC,0BAA0BC,WAAW,GAAG;AAAA,IAC5CR,OAAO;AAAA,IAEP,uCAAuC;AAAA,MACrCS,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BD,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEA,mBAAmB;AAAA,IACjBD,SAASX,MAAMa,MAAMC;AAAAA,EACvB;AAAA,EACA,+BAA+B;AAAA,IAC7BC,WAAY,aAAYf,MAAMI,OAAOY;AAAAA,IACrCL,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,uCAAuC;AAAA,IACrCG,WAAW;AAAA,IACXJ,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AACF,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6gEAAA;"}
+{"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalNavigationClasses from \"./verticalNavigationClasses\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"flex\",\n  flexDirection: \"column\",\n  justifyContent: theme.verticalNavigation.justifyContent,\n\n  width: \"100%\",\n\n  background: theme.colors.atmo1,\n  boxShadow: theme.colors.shadow,\n  clipPath: \"inset(0px -12px 0px 0px)\",\n\n  [`&.${verticalNavigationClasses.collapsed}`]: {\n    width: \"56px\",\n\n    \"& > :first-of-type:not(:last-child)\": {\n      padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n    },\n\n    \"& > :not(nav:first-of-type)\": {\n      padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n    },\n  },\n\n  \"& > :only-child\": {\n    padding: theme.space.sm,\n  },\n  \"& > :not(nav:first-of-type)\": {\n    borderTop: `3px solid ${theme.colors.atmo2}`,\n    padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n  },\n\n  \"& > :first-of-type:not(:last-child)\": {\n    borderTop: \"none\",\n    padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n  },\n\n  [`&.${verticalNavigationClasses.slider}`]: {\n    \"& > div:first-of-type\": {\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n  },\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadow","clipPath","verticalNavigationClasses","collapsed","padding","spacing","space","sm","borderTop","atmo2","slider","borderBottom"],"mappings":";;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,gBAAgBC,MAAMC,mBAAmBF;AAAAA,EAEzCG,OAAO;AAAA,EAEPC,YAAYH,MAAMI,OAAOC;AAAAA,EACzBC,WAAWN,MAAMI,OAAOG;AAAAA,EACxBC,UAAU;AAAA,EAEV,CAAE,KAAIC,0BAA0BC,WAAW,GAAG;AAAA,IAC5CR,OAAO;AAAA,IAEP,uCAAuC;AAAA,MACrCS,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BD,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEA,mBAAmB;AAAA,IACjBD,SAASX,MAAMa,MAAMC;AAAAA,EACvB;AAAA,EACA,+BAA+B;AAAA,IAC7BC,WAAY,aAAYf,MAAMI,OAAOY;AAAAA,IACrCL,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,uCAAuC;AAAA,IACrCG,WAAW;AAAA,IACXJ,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,CAAE,KAAIH,0BAA0BQ,QAAQ,GAAG;AAAA,IACzC,yBAAyB;AAAA,MACvBC,cAAe,aAAYlB,MAAMI,OAAOY;AAAAA,IAC1C;AAAA,EACF;AACF,GAACxB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6tEAAA;"}

package/dist/esm/components/VerticalNavigation/VerticalNavigationContext.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+const VerticalNavigationContext = createContext({
+  isOpen: true,
+  collapsedMode: "simple",
+  slider: false
+});
+export {
+  VerticalNavigationContext
+};
+//# sourceMappingURL=VerticalNavigationContext.js.map

package/dist/esm/components/VerticalNavigation/VerticalNavigationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { NavigationData, HvVerticalNavigationMode } from \"./\";\n\ninterface VerticalNavigationContextValue {\n  isOpen: boolean;\n  collapsedMode: HvVerticalNavigationMode;\n  slider?: boolean;\n  headerTitle?: string;\n  setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;\n\n  parentItem?;\n  withParentData?;\n  navigateToChildHandler?: (event, item) => void;\n  navigateToParentHandler?: () => void;\n\n  parentData?: NavigationData[];\n  setParentData?: React.Dispatch<React.SetStateAction<any>>;\n  parentSelected?;\n  setParentSelected?: React.Dispatch<React.SetStateAction<any>>;\n}\n\nconst VerticalNavigationContext = createContext<VerticalNavigationContextValue>(\n  {\n    isOpen: true,\n    collapsedMode: \"simple\",\n    slider: false,\n  }\n);\n\nexport { VerticalNavigationContext };\n"],"names":["VerticalNavigationContext","createContext","isOpen","collapsedMode","slider"],"mappings":";AAqBA,MAAMA,4BAA4BC,cAChC;AAAA,EACEC,QAAQ;AAAA,EACRC,eAAe;AAAA,EACfC,QAAQ;AACV,CAAC;"}

package/dist/esm/components/VerticalNavigation/verticalNavigationClasses.js

@@ -1,5 +1,5 @@
 import { getClasses } from "../../utils/classes.js";
-const classKeys = ["root", "collapsed"];
+const classKeys = ["root", "collapsed", "slider"];
 const verticalNavigationClasses = getClasses(classKeys, "HvVerticalNavigation");
 const verticalNavigationClasses$1 = verticalNavigationClasses;
 export {

package/dist/esm/components/VerticalNavigation/verticalNavigationClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"verticalNavigationClasses.js","sources":["../../../../src/components/VerticalNavigation/verticalNavigationClasses.tsx"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationClasses = {\n  /** Style applied to the root of the component. */\n  root?: string;\n  /** Style applied to the root of the component when its collapsed. */\n  collapsed?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"collapsed\"];\n\nconst verticalNavigationClasses = getClasses<HvVerticalNavigationClasses>(\n  classKeys,\n  \"HvVerticalNavigation\"\n);\n\nexport default verticalNavigationClasses;\n"],"names":["classKeys","verticalNavigationClasses","getClasses"],"mappings":";AASA,MAAMA,YAAsB,CAAC,QAAQ,WAAW;AAEhD,MAAMC,4BAA4BC,WAChCF,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;"}
+{"version":3,"file":"verticalNavigationClasses.js","sources":["../../../../src/components/VerticalNavigation/verticalNavigationClasses.tsx"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationClasses = {\n  /** Style applied to the root of the component. */\n  root?: string;\n  /** Style applied to the root of the component when its collapsed. */\n  collapsed?: string;\n  /** Style applied to the root of the component when its in slider mode. */\n  slider?;\n};\n\nconst classKeys: string[] = [\"root\", \"collapsed\", \"slider\"];\n\nconst verticalNavigationClasses = getClasses<HvVerticalNavigationClasses>(\n  classKeys,\n  \"HvVerticalNavigation\"\n);\n\nexport default verticalNavigationClasses;\n"],"names":["classKeys","verticalNavigationClasses","getClasses"],"mappings":";AAWA,MAAMA,YAAsB,CAAC,QAAQ,aAAa,QAAQ;AAE1D,MAAMC,4BAA4BC,WAChCF,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;"}

package/dist/esm/hooks/useCreateEmotion.js

@@ -0,0 +1,20 @@
+import createEmotion from "@emotion/css/create-instance";
+import { useContext, useMemo } from "react";
+import "@hitachivantara/uikit-styles";
+import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
+import "@mui/material/styles";
+import "@emotion/react/jsx-runtime";
+const useCreateEmotion = () => {
+  const {
+    classNameKey
+  } = useContext(HvThemeContext);
+  const emotionCss = useMemo(() => createEmotion({
+    key: classNameKey || "hv-uikit-css",
+    prepend: true
+  }), [classNameKey]);
+  return emotionCss;
+};
+export {
+  useCreateEmotion
+};
+//# sourceMappingURL=useCreateEmotion.js.map

package/dist/esm/hooks/useCreateEmotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateEmotion.js","sources":["../../../src/hooks/useCreateEmotion.ts"],"sourcesContent":["import createEmotion from \"@emotion/css/create-instance\";\nimport { useContext, useMemo } from \"react\";\nimport { HvThemeContext } from \"../providers/ThemeProvider\";\n\n/**\n * Emotion CSS utilities\n */\nexport const useCreateEmotion = () => {\n  const { classNameKey } = useContext(HvThemeContext);\n\n  // Emotion cache\n  // Moves UI Kit styles to the top of the <head> so they're loaded first.\n  // This enables users to override the UI Kit styles if necessary.\n  const emotionCss = useMemo(\n    () =>\n      createEmotion({\n        key: classNameKey || \"hv-uikit-css\",\n        prepend: true,\n      }),\n    [classNameKey]\n  );\n\n  return emotionCss;\n};\n"],"names":["useCreateEmotion","classNameKey","useContext","HvThemeContext","emotionCss","useMemo","createEmotion","key","prepend"],"mappings":";;;;;;AAOO,MAAMA,mBAAmBA,MAAM;AAC9B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAiBC,WAAWC,cAAc;AAK5CC,QAAAA,aAAaC,QACjB,MACEC,cAAc;AAAA,IACZC,KAAKN,gBAAgB;AAAA,IACrBO,SAAS;AAAA,EAAA,CACV,GACH,CAACP,YAAY,CAAC;AAGTG,SAAAA;AACT;"}

package/dist/esm/index.js

@@ -210,7 +210,7 @@ import { HvCalendar } from "./components/Calendar/Calendar.js";
 import { default as default110 } from "./components/Calendar/CalendarHeader/calendarHeaderClasses.js";
 import { HvCalendarHeader } from "./components/Calendar/CalendarHeader/CalendarHeader.js";
 import { default as default111 } from "./components/VerticalNavigation/verticalNavigationClasses.js";
-import { HvVerticalNavigation, VerticalNavigationContext } from "./components/VerticalNavigation/VerticalNavigation.js";
+import { HvVerticalNavigation } from "./components/VerticalNavigation/VerticalNavigation.js";
 import { default as default112 } from "./components/VerticalNavigation/Header/headerClasses.js";
 import { HvVerticalNavigationHeader } from "./components/VerticalNavigation/Header/Header.js";
 import { default as default113 } from "./components/VerticalNavigation/Actions/actionClasses.js";
@@ -219,12 +219,15 @@ import { HvVerticalNavigationActions } from "./components/VerticalNavigation/Act
 import { HvVerticalNavigationAction } from "./components/VerticalNavigation/Actions/Action.js";
 import { default as default115 } from "./components/VerticalNavigation/Navigation/navigationClasses.js";
 import { HvVerticalNavigationTree } from "./components/VerticalNavigation/Navigation/Navigation.js";
-import { default as default116 } from "./components/VerticalNavigation/TreeView/treeViewClasses.js";
-import { default as default117 } from "./components/VerticalNavigation/TreeView/treeViewItemClasses.js";
+import { default as default116 } from "./components/VerticalNavigation/NavigationSlider/navigationSliderClasses.js";
+import { HvVerticalNavigationSlider } from "./components/VerticalNavigation/NavigationSlider/NavigationSlider.js";
+import { default as default117 } from "./components/VerticalNavigation/TreeView/treeViewClasses.js";
+import { default as default118 } from "./components/VerticalNavigation/TreeView/treeViewItemClasses.js";
 import { HvVerticalNavigationTreeView } from "./components/VerticalNavigation/TreeView/TreeView.js";
 import { HvVerticalNavigationTreeViewItem } from "./components/VerticalNavigation/TreeView/TreeViewItem.js";
-import { default as default118 } from "./hooks/useUniqueId.js";
-import { default as default119 } from "./hooks/useIsMounted.js";
+import { VerticalNavigationContext } from "./components/VerticalNavigation/VerticalNavigationContext.js";
+import { default as default119 } from "./hooks/useUniqueId.js";
+import { default as default120 } from "./hooks/useIsMounted.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useControlled } from "./hooks/useControlled.js";
 import { useImageLoaded } from "./hooks/useImageLoaded.js";
@@ -236,11 +239,11 @@ import { useEnhancedEffect } from "./hooks/useEnhancedEffect.js";
 import { HvProvider } from "./providers/Provider.js";
 import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
 import { HvThemeProvider } from "./providers/ThemeProvider.js";
-import { default as default120 } from "./utils/iconVariant.js";
-import { default as default121 } from "./utils/hexToRgbA.js";
-import { default as default122 } from "./utils/browser.js";
-import { default as default123 } from "./utils/multiSelectionEventHandler.js";
-import { default as default124 } from "./utils/getComponentName.js";
+import { default as default121 } from "./utils/iconVariant.js";
+import { default as default122 } from "./utils/hexToRgbA.js";
+import { default as default123 } from "./utils/browser.js";
+import { default as default124 } from "./utils/multiSelectionEventHandler.js";
+import { default as default125 } from "./utils/getComponentName.js";
 import { outlineStyles } from "./utils/focusUtils.js";
 import { keyboardCodes } from "./utils/keyboardUtils/keyboardCodes.js";
 import { getKeyCodeFromEvent, isKeycode, isKeypress } from "./utils/keyboardUtils/keyCheck.js";
@@ -250,8 +253,8 @@ import { setId, setUid } from "./utils/setId.js";
 import { getClasses } from "./utils/classes.js";
 import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
 import { wrapperTooltip } from "./utils/wrapperTooltip.js";
-import { default as default125 } from "./hocs/withTooltip.js";
-import { default as default126 } from "./hocs/withId.js";
+import { default as default126 } from "./hocs/withTooltip.js";
+import { default as default127 } from "./hocs/withId.js";
 export {
   CellWithCheckBox,
   CellWithExpandButton,
@@ -370,6 +373,7 @@ export {
   HvVerticalNavigationAction,
   HvVerticalNavigationActions,
   HvVerticalNavigationHeader,
+  HvVerticalNavigationSlider,
   HvVerticalNavigationTree,
   HvVerticalNavigationTreeView,
   HvVerticalNavigationTreeViewItem,
@@ -433,7 +437,7 @@ export {
   default36 as footerClasses,
   default13 as formElementClasses,
   getClasses,
-  default124 as getComponentName,
+  default125 as getComponentName,
   getFirstAndLastFocus,
   getFocusableList,
   getHeaderFooterPropsHook,
@@ -450,7 +454,7 @@ export {
   default40 as headerBrandClasses,
   default38 as headerClasses,
   default41 as headerNavigationClasses,
-  default121 as hexToRgbA,
+  default122 as hexToRgbA,
   hvDateColumn,
   hvDropdownColumn,
   hvExpandColumn,
@@ -462,11 +466,11 @@ export {
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn,
-  default120 as iconVariant,
+  default121 as iconVariant,
   increaseSize,
   default15 as infoMessageClasses,
   default60 as inputClasses,
-  default122 as isBrowser,
+  default123 as isBrowser,
   isInvalid,
   isKeycode,
   isKeypress,
@@ -482,7 +486,7 @@ export {
   default44 as loadingClasses,
   default105 as loginClasses,
   default45 as multiButtonClasses,
-  default123 as multiSelectionEventHandler,
+  default124 as multiSelectionEventHandler,
   normalizeProgressBar,
   outlineStyles,
   default53 as overflowTooltipClasses,
@@ -519,8 +523,8 @@ export {
   theme,
   themes,
   default52 as tooltipClasses,
-  default116 as treeViewClasses,
-  default117 as treeViewItemClasses,
+  default117 as treeViewClasses,
+  default118 as treeViewItemClasses,
   default7 as typographyClasses,
   useClickOutside,
   default5 as useComputation,
@@ -543,18 +547,19 @@ export {
   default92 as useHvTableStyles,
   useImageLoaded,
   useInstance,
-  default119 as useIsMounted,
+  default120 as useIsMounted,
   useLabels,
   useSelectionPath,
   useTheme,
-  default118 as useUniqueId,
+  default119 as useUniqueId,
   useWidth,
   default111 as verticalNavigationClasses,
   default112 as verticalNavigationHeaderClasses,
+  default116 as verticalNavigationSliderClasses,
   default115 as verticalNavigationTreeClasses,
   default16 as warningTextClasses,
-  default126 as withId,
-  default125 as withTooltip,
+  default127 as withId,
+  default126 as withTooltip,
   wrapperTooltip
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/providers/Provider.js

@@ -1,7 +1,8 @@
 import { CacheProvider, Global, css } from "@emotion/react";
 import { CssBaseline, getThemesVars } from "@hitachivantara/uikit-styles";
 import { HvThemeProvider } from "./ThemeProvider.js";
-import { emotionCache } from "../utils/emotion.js";
+import { useMemo } from "react";
+import createCache from "@emotion/cache";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { processThemes } from "../utils/theme.js";
 const HvProvider = ({
@@ -10,18 +11,24 @@ const HvProvider = ({
   enableCssBaseline = true,
   themes,
   theme,
-  colorMode
+  colorMode,
+  classNameKey = "hv-uikit-css"
 }) => {
   const themesList = processThemes(themes);
+  const emotionCache = useMemo(() => createCache({
+    key: classNameKey,
+    prepend: true
+  }), [classNameKey]);
   return /* @__PURE__ */ jsxs(CacheProvider, {
     value: emotionCache,
     children: [/* @__PURE__ */ jsx(Global, {
-      styles: /* @__PURE__ */ css(enableCssBaseline && CssBaseline, " ", getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL3Byb3ZpZGVycy9Qcm92aWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUVtQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9wcm92aWRlcnMvUHJvdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwsIENhY2hlUHJvdmlkZXIgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7XG4gIENzc0Jhc2VsaW5lLFxuICBnZXRUaGVtZXNWYXJzLFxuICBIdlRoZW1lU3RydWN0dXJlLFxufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgcHJvY2Vzc1RoZW1lcyB9IGZyb20gXCJ1dGlsc1wiO1xuaW1wb3J0IHsgSHZUaGVtZSB9IGZyb20gXCIuLi90eXBlcy90aGVtZVwiO1xuaW1wb3J0IHsgSHZUaGVtZVByb3ZpZGVyIH0gZnJvbSBcIi4vVGhlbWVQcm92aWRlclwiO1xuaW1wb3J0IHsgZW1vdGlvbkNhY2hlIH0gZnJvbSBcInV0aWxzL2Vtb3Rpb25cIjtcblxuLy8gUHJvdmlkZXIgcHJvcHNcbmV4cG9ydCB0eXBlIEh2UHJvdmlkZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFlvdXIgY29tcG9uZW50IHRyZWUuXG4gICAqL1xuICBjaGlsZHJlbj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIEJ5IGRlZmF1bHQgdGhlIGJhc2VsaW5lIHN0eWxlcyBhcmUgYXBwbGllZCBnbG9iYWxseSB0byB0aGUgYXBwbGljYXRpb24gdG8gYXZvaWQgc3R5bGluZyBjb25mbGljdHMgYW5kIGZvciB0aGUgVUkgS2l0IGNvbXBvbmVudHMgdG8gd29yayBwcm9wZXJseS5cbiAgICogSWYgeW91IGFyZSBwcm92aWRpbmcgeW91ciBvd24gYmFzZWxpbmUgc3R5bGVzLCB5b3UgY2FuIHNldCB0aGlzIHByb3BlcnR5IHRvIGZhbHNlLlxuICAgKi9cbiAgZW5hYmxlQ3NzQmFzZWxpbmU/OiBib29sZWFuO1xuICAvKipcbiAgICogSWQgb2YgeW91ciByb290IGVsZW1lbnQuIFRoZSB0aGVtZSdzIGF0dHJpYnV0ZXMgYW5kIENTUyB2YXJpYWJsZXMgd2lsbCBiZSBzZXQgaW4gdGhpcyBlbGVtZW50LlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGRvY3VtZW50J3MgYm9keSB3aWxsIGJlIHVzZWQuXG4gICAqL1xuICByb290RWxlbWVudElkPzogc3RyaW5nO1xuICAvKipcbiAgICogTGlzdCBvZiB0aGVtZXMgdG8gYmUgdXNlZCBieSBVSSBLaXQuXG4gICAqIFlvdSBjYW4gcHJvdmlkZSB5b3VyIG93biB0aGVtZXMgY3JlYXRlZCB3aXRoIHRoZSBgY3JlYXRlVGhlbWVgIHV0aWxpdHkgYW5kL29yIHRoZSBkZWZhdWx0IHRoZW1lcyBgZHMzYCBhbmQgYGRzNWAgcHJvdmlkZWQgYnkgVUkgS2l0LlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lcz86IChIdlRoZW1lIHwgSHZUaGVtZVN0cnVjdHVyZSlbXTtcbiAgLyoqXG4gICAqIFRoZSBhY3RpdmUgdGhlbWUuIEl0IG11c3QgYmUgb25lIG9mIHRoZSB0aGVtZXMgcGFzc2VkIHRvIGB0aGVtZXNgLlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGZpcnN0IHRoZW1lIGZyb20gdGhlIGB0aGVtZXNgIGxpc3QgaXMgdXNlZC4gSWYgbm8gYHRoZW1lc2AgbGlzdCBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGFjdGl2ZSBjb2xvciBtb2RlLiBJdCBtdXN0IGJlIG9uZSBvZiB0aGUgY29sb3IgbW9kZXMgb2YgdGhlIGFjdGl2ZSB0aGVtZS5cbiAgICpcbiAgICogSWYgbm8gdmFsdWUgaXMgcHJvdmlkZWQsIHRoZSBmaXJzdCBjb2xvciBtb2RlIGRlZmluZWQgaW4gdGhlIGFjdGl2ZSB0aGVtZSBpcyB1c2VkLlxuICAgKiBGb3IgdGhlIGRlZmF1bHQgdGhlbWVzIGBkczNgIGFuZCBgZHM1YCwgdGhlIGBkYXduYCBjb2xvciBtb2RlIGlzIHRoZSBvbmUgdXNlZC5cbiAgICovXG4gIGNvbG9yTW9kZT86IHN0cmluZztcbn07XG5cbi8qKlxuICogRW5hYmxlcyB0aGVtaW5nIGNhcGFiaWxpdGllcyBhbmQgbWFrZXMgY3Jvc3MtY29tcG9uZW50IHRoZW1lIHByb3BlcnRpZXMgYXZhaWxhYmxlIGRvd24gdGhlIHRyZWUuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlByb3ZpZGVyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvb3RFbGVtZW50SWQsXG4gIGVuYWJsZUNzc0Jhc2VsaW5lID0gdHJ1ZSxcbiAgdGhlbWVzLFxuICB0aGVtZSxcbiAgY29sb3JNb2RlLFxufTogSHZQcm92aWRlclByb3BzKSA9PiB7XG4gIC8vIFRoZW1lc1xuICBjb25zdCB0aGVtZXNMaXN0OiAoSHZUaGVtZSB8IEh2VGhlbWVTdHJ1Y3R1cmUpW10gPSBwcm9jZXNzVGhlbWVzKHRoZW1lcyk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q2FjaGVQcm92aWRlciB2YWx1ZT17ZW1vdGlvbkNhY2hlfT5cbiAgICAgIDxHbG9iYWxcbiAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgJHtlbmFibGVDc3NCYXNlbGluZSAmJiBDc3NCYXNlbGluZX1cbiAgICAgICAgICAke2dldFRoZW1lc1ZhcnModGhlbWVzTGlzdCl9XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgICAgPEh2VGhlbWVQcm92aWRlclxuICAgICAgICB0aGVtZXM9e3RoZW1lc0xpc3R9XG4gICAgICAgIHRoZW1lPXt0aGVtZSB8fCB0aGVtZXNMaXN0WzBdLm5hbWV9XG4gICAgICAgIGNvbG9yTW9kZT17Y29sb3JNb2RlIHx8IE9iamVjdC5rZXlzKHRoZW1lc0xpc3RbMF0uY29sb3JzLm1vZGVzKVswXX1cbiAgICAgICAgcm9vdEVsZW1lbnRJZD17cm9vdEVsZW1lbnRJZH1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9IdlRoZW1lUHJvdmlkZXI+XG4gICAgPC9DYWNoZVByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */")
+      styles: /* @__PURE__ */ css(enableCssBaseline && CssBaseline, " ", getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL3Byb3ZpZGVycy9Qcm92aWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0ZtQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9wcm92aWRlcnMvUHJvdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwsIENhY2hlUHJvdmlkZXIgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7XG4gIENzc0Jhc2VsaW5lLFxuICBnZXRUaGVtZXNWYXJzLFxuICBIdlRoZW1lU3RydWN0dXJlLFxufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgcHJvY2Vzc1RoZW1lcyB9IGZyb20gXCJ1dGlsc1wiO1xuaW1wb3J0IHsgSHZUaGVtZSB9IGZyb20gXCIuLi90eXBlcy90aGVtZVwiO1xuaW1wb3J0IHsgSHZUaGVtZVByb3ZpZGVyIH0gZnJvbSBcIi4vVGhlbWVQcm92aWRlclwiO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IGNyZWF0ZUNhY2hlIGZyb20gXCJAZW1vdGlvbi9jYWNoZVwiO1xuXG4vLyBQcm92aWRlciBwcm9wc1xuZXhwb3J0IHR5cGUgSHZQcm92aWRlclByb3BzID0ge1xuICAvKipcbiAgICogWW91ciBjb21wb25lbnQgdHJlZS5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKipcbiAgICogQnkgZGVmYXVsdCB0aGUgYmFzZWxpbmUgc3R5bGVzIGFyZSBhcHBsaWVkIGdsb2JhbGx5IHRvIHRoZSBhcHBsaWNhdGlvbiB0byBhdm9pZCBzdHlsaW5nIGNvbmZsaWN0cyBhbmQgZm9yIHRoZSBVSSBLaXQgY29tcG9uZW50cyB0byB3b3JrIHByb3Blcmx5LlxuICAgKiBJZiB5b3UgYXJlIHByb3ZpZGluZyB5b3VyIG93biBiYXNlbGluZSBzdHlsZXMsIHlvdSBjYW4gc2V0IHRoaXMgcHJvcGVydHkgdG8gZmFsc2UuXG4gICAqL1xuICBlbmFibGVDc3NCYXNlbGluZT86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJZCBvZiB5b3VyIHJvb3QgZWxlbWVudC4gVGhlIHRoZW1lJ3MgYXR0cmlidXRlcyBhbmQgQ1NTIHZhcmlhYmxlcyB3aWxsIGJlIHNldCBpbiB0aGlzIGVsZW1lbnQuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZG9jdW1lbnQncyBib2R5IHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHJvb3RFbGVtZW50SWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBMaXN0IG9mIHRoZW1lcyB0byBiZSB1c2VkIGJ5IFVJIEtpdC5cbiAgICogWW91IGNhbiBwcm92aWRlIHlvdXIgb3duIHRoZW1lcyBjcmVhdGVkIHdpdGggdGhlIGBjcmVhdGVUaGVtZWAgdXRpbGl0eSBhbmQvb3IgdGhlIGRlZmF1bHQgdGhlbWVzIGBkczNgIGFuZCBgZHM1YCBwcm92aWRlZCBieSBVSSBLaXQuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgYGRzNWAgdGhlbWUgd2lsbCBiZSB1c2VkLlxuICAgKi9cbiAgdGhlbWVzPzogKEh2VGhlbWUgfCBIdlRoZW1lU3RydWN0dXJlKVtdO1xuICAvKipcbiAgICogVGhlIGFjdGl2ZSB0aGVtZS4gSXQgbXVzdCBiZSBvbmUgb2YgdGhlIHRoZW1lcyBwYXNzZWQgdG8gYHRoZW1lc2AuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZmlyc3QgdGhlbWUgZnJvbSB0aGUgYHRoZW1lc2AgbGlzdCBpcyB1c2VkLiBJZiBubyBgdGhlbWVzYCBsaXN0IGlzIHByb3ZpZGVkLCB0aGUgYGRzNWAgdGhlbWUgd2lsbCBiZSB1c2VkLlxuICAgKi9cbiAgdGhlbWU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgYWN0aXZlIGNvbG9yIG1vZGUuIEl0IG11c3QgYmUgb25lIG9mIHRoZSBjb2xvciBtb2RlcyBvZiB0aGUgYWN0aXZlIHRoZW1lLlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGZpcnN0IGNvbG9yIG1vZGUgZGVmaW5lZCBpbiB0aGUgYWN0aXZlIHRoZW1lIGlzIHVzZWQuXG4gICAqIEZvciB0aGUgZGVmYXVsdCB0aGVtZXMgYGRzM2AgYW5kIGBkczVgLCB0aGUgYGRhd25gIGNvbG9yIG1vZGUgaXMgdGhlIG9uZSB1c2VkLlxuICAgKi9cbiAgY29sb3JNb2RlPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIHN0cmluZyB1c2VkIHRvIHByZWZpeCB0aGUgY2xhc3MgbmFtZXMgYW5kIHVuaXF1ZWx5IGlkZW50aWZ5IHRoZW0uIFRoZSBrZXkgY2FuIG9ubHkgY29udGFpbiBsb3dlciBjYXNlIGFscGhhYmV0aWNhbCBjaGFyYWN0ZXJzLlxuICAgKiBUaGlzIGlzIHVzZWZ1bCB0byBhdm9pZCBjbGFzcyBuYW1lIGNvbGxpc2lvbnMuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZGVmYXVsdCBpcyBgaHYtdWlraXQtY3NzYC5cbiAgICovXG4gIGNsYXNzTmFtZUtleT86IHN0cmluZztcbn07XG5cbi8qKlxuICogRW5hYmxlcyB0aGVtaW5nIGNhcGFiaWxpdGllcyBhbmQgbWFrZXMgY3Jvc3MtY29tcG9uZW50IHRoZW1lIHByb3BlcnRpZXMgYXZhaWxhYmxlIGRvd24gdGhlIHRyZWUuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlByb3ZpZGVyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvb3RFbGVtZW50SWQsXG4gIGVuYWJsZUNzc0Jhc2VsaW5lID0gdHJ1ZSxcbiAgdGhlbWVzLFxuICB0aGVtZSxcbiAgY29sb3JNb2RlLFxuICBjbGFzc05hbWVLZXkgPSBcImh2LXVpa2l0LWNzc1wiLFxufTogSHZQcm92aWRlclByb3BzKSA9PiB7XG4gIC8vIFRoZW1lc1xuICBjb25zdCB0aGVtZXNMaXN0OiAoSHZUaGVtZSB8IEh2VGhlbWVTdHJ1Y3R1cmUpW10gPSBwcm9jZXNzVGhlbWVzKHRoZW1lcyk7XG5cbiAgLy8gRW1vdGlvbiBjYWNoZVxuICAvLyBNb3ZlcyBVSSBLaXQgc3R5bGVzIHRvIHRoZSB0b3Agb2YgdGhlIDxoZWFkPiBzbyB0aGV5J3JlIGxvYWRlZCBmaXJzdC5cbiAgLy8gVGhpcyBlbmFibGVzIHVzZXJzIHRvIG92ZXJyaWRlIHRoZSBVSSBLaXQgc3R5bGVzIGlmIG5lY2Vzc2FyeS5cbiAgY29uc3QgZW1vdGlvbkNhY2hlID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgY3JlYXRlQ2FjaGUoe1xuICAgICAgICBrZXk6IGNsYXNzTmFtZUtleSxcbiAgICAgICAgcHJlcGVuZDogdHJ1ZSxcbiAgICAgIH0pLFxuICAgIFtjbGFzc05hbWVLZXldXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q2FjaGVQcm92aWRlciB2YWx1ZT17ZW1vdGlvbkNhY2hlfT5cbiAgICAgIDxHbG9iYWxcbiAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgJHtlbmFibGVDc3NCYXNlbGluZSAmJiBDc3NCYXNlbGluZX1cbiAgICAgICAgICAke2dldFRoZW1lc1ZhcnModGhlbWVzTGlzdCl9XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgICAgPEh2VGhlbWVQcm92aWRlclxuICAgICAgICB0aGVtZXM9e3RoZW1lc0xpc3R9XG4gICAgICAgIHRoZW1lPXt0aGVtZSB8fCB0aGVtZXNMaXN0WzBdLm5hbWV9XG4gICAgICAgIGNvbG9yTW9kZT17Y29sb3JNb2RlIHx8IE9iamVjdC5rZXlzKHRoZW1lc0xpc3RbMF0uY29sb3JzLm1vZGVzKVswXX1cbiAgICAgICAgcm9vdEVsZW1lbnRJZD17cm9vdEVsZW1lbnRJZH1cbiAgICAgICAgY2xhc3NOYW1lS2V5PXtjbGFzc05hbWVLZXl9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvSHZUaGVtZVByb3ZpZGVyPlxuICAgIDwvQ2FjaGVQcm92aWRlcj5cbiAgKTtcbn07XG4iXX0= */")
     }), /* @__PURE__ */ jsx(HvThemeProvider, {
       themes: themesList,
       theme: theme || themesList[0].name,
       colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0],
       rootElementId,
+      classNameKey,
       children
     })]
   });

package/dist/esm/providers/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { css, Global, CacheProvider } from \"@emotion/react\";\nimport {\n  CssBaseline,\n  getThemesVars,\n  HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\nimport { processThemes } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\nimport { HvThemeProvider } from \"./ThemeProvider\";\nimport { emotionCache } from \"utils/emotion\";\n\n// Provider props\nexport type HvProviderProps = {\n  /**\n   * Your component tree.\n   */\n  children?: React.ReactNode;\n  /**\n   * By default the baseline styles are applied globally to the application to avoid styling conflicts and for the UI Kit components to work properly.\n   * If you are providing your own baseline styles, you can set this property to false.\n   */\n  enableCssBaseline?: boolean;\n  /**\n   * Id of your root element. The theme's attributes and CSS variables will be set in this element.\n   *\n   * If no value is provided, the document's body will be used.\n   */\n  rootElementId?: string;\n  /**\n   * List of themes to be used by UI Kit.\n   * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n   *\n   * If no value is provided, the `ds5` theme will be used.\n   */\n  themes?: (HvTheme | HvThemeStructure)[];\n  /**\n   * The active theme. It must be one of the themes passed to `themes`.\n   *\n   * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n   */\n  theme?: string;\n  /**\n   * The active color mode. It must be one of the color modes of the active theme.\n   *\n   * If no value is provided, the first color mode defined in the active theme is used.\n   * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n   */\n  colorMode?: string;\n};\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n  children,\n  rootElementId,\n  enableCssBaseline = true,\n  themes,\n  theme,\n  colorMode,\n}: HvProviderProps) => {\n  // Themes\n  const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <Global\n        styles={css`\n          ${enableCssBaseline && CssBaseline}\n          ${getThemesVars(themesList)}\n        `}\n      />\n      <HvThemeProvider\n        themes={themesList}\n        theme={theme || themesList[0].name}\n        colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n        rootElementId={rootElementId}\n      >\n        {children}\n      </HvThemeProvider>\n    </CacheProvider>\n  );\n};\n"],"names":["HvProvider","children","rootElementId","enableCssBaseline","themes","theme","colorMode","themesList","processThemes","CacheProvider","value","emotionCache","_jsx","Global","styles","CssBaseline","getThemesVars","process","env","NODE_ENV","HvThemeProvider","name","Object","keys","colors","modes"],"mappings":";;;;;;AAqDO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,oBAAoB;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AAEfC,QAAAA,aAA6CC,cAAcJ,MAAM;AAEvE,8BACGK,eAAa;AAAA,IAACC,OAAOC;AAAAA,IAAaV,UAAA,CACjCW,oBAACC,QAAM;AAAA,MACLC,4BACIX,qBAAqBY,aAAW,KAChCC,cAAcT,UAAU,UAACU,QAAAC,IAAAC,wDAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,y8HAAA;AAAA,IAAA,CAE7B,GACFP,oBAACQ,iBAAe;AAAA,MACdhB,QAAQG;AAAAA,MACRF,OAAOA,SAASE,WAAW,CAAC,EAAEc;AAAAA,MAC9Bf,WAAWA,aAAagB,OAAOC,KAAKhB,WAAW,CAAC,EAAEiB,OAAOC,KAAK,EAAE,CAAC;AAAA,MACjEvB;AAAAA,MAA6BD;AAAAA,IAAAA,CAGb,CAAA;AAAA,EAAA,CACJ;AAEpB;"}
+{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { css, Global, CacheProvider } from \"@emotion/react\";\nimport {\n  CssBaseline,\n  getThemesVars,\n  HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\nimport { processThemes } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\nimport { HvThemeProvider } from \"./ThemeProvider\";\nimport { useMemo } from \"react\";\nimport createCache from \"@emotion/cache\";\n\n// Provider props\nexport type HvProviderProps = {\n  /**\n   * Your component tree.\n   */\n  children?: React.ReactNode;\n  /**\n   * By default the baseline styles are applied globally to the application to avoid styling conflicts and for the UI Kit components to work properly.\n   * If you are providing your own baseline styles, you can set this property to false.\n   */\n  enableCssBaseline?: boolean;\n  /**\n   * Id of your root element. The theme's attributes and CSS variables will be set in this element.\n   *\n   * If no value is provided, the document's body will be used.\n   */\n  rootElementId?: string;\n  /**\n   * List of themes to be used by UI Kit.\n   * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n   *\n   * If no value is provided, the `ds5` theme will be used.\n   */\n  themes?: (HvTheme | HvThemeStructure)[];\n  /**\n   * The active theme. It must be one of the themes passed to `themes`.\n   *\n   * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n   */\n  theme?: string;\n  /**\n   * The active color mode. It must be one of the color modes of the active theme.\n   *\n   * If no value is provided, the first color mode defined in the active theme is used.\n   * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n   */\n  colorMode?: string;\n  /**\n   * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n   * This is useful to avoid class name collisions.\n   *\n   * If no value is provided, the default is `hv-uikit-css`.\n   */\n  classNameKey?: string;\n};\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n  children,\n  rootElementId,\n  enableCssBaseline = true,\n  themes,\n  theme,\n  colorMode,\n  classNameKey = \"hv-uikit-css\",\n}: HvProviderProps) => {\n  // Themes\n  const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n  // Emotion cache\n  // Moves UI Kit styles to the top of the <head> so they're loaded first.\n  // This enables users to override the UI Kit styles if necessary.\n  const emotionCache = useMemo(\n    () =>\n      createCache({\n        key: classNameKey,\n        prepend: true,\n      }),\n    [classNameKey]\n  );\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <Global\n        styles={css`\n          ${enableCssBaseline && CssBaseline}\n          ${getThemesVars(themesList)}\n        `}\n      />\n      <HvThemeProvider\n        themes={themesList}\n        theme={theme || themesList[0].name}\n        colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n        rootElementId={rootElementId}\n        classNameKey={classNameKey}\n      >\n        {children}\n      </HvThemeProvider>\n    </CacheProvider>\n  );\n};\n"],"names":["HvProvider","children","rootElementId","enableCssBaseline","themes","theme","colorMode","classNameKey","themesList","processThemes","emotionCache","useMemo","createCache","key","prepend","CacheProvider","value","_jsx","Global","styles","CssBaseline","getThemesVars","process","env","NODE_ENV","HvThemeProvider","name","Object","keys","colors","modes"],"mappings":";;;;;;;AA6DO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,oBAAoB;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,eAAe;AACA,MAAM;AAEfC,QAAAA,aAA6CC,cAAcL,MAAM;AAKjEM,QAAAA,eAAeC,QACnB,MACEC,YAAY;AAAA,IACVC,KAAKN;AAAAA,IACLO,SAAS;AAAA,EAAA,CACV,GACH,CAACP,YAAY,CAAC;AAGhB,8BACGQ,eAAa;AAAA,IAACC,OAAON;AAAAA,IAAaT,UAAA,CACjCgB,oBAACC,QAAM;AAAA,MACLC,4BACIhB,qBAAqBiB,aAAW,KAChCC,cAAcb,UAAU,UAACc,QAAAC,IAAAC,wDAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,64JAAA;AAAA,IAAA,CAE7B,GACFP,oBAACQ,iBAAe;AAAA,MACdrB,QAAQI;AAAAA,MACRH,OAAOA,SAASG,WAAW,CAAC,EAAEkB;AAAAA,MAC9BpB,WAAWA,aAAaqB,OAAOC,KAAKpB,WAAW,CAAC,EAAEqB,OAAOC,KAAK,EAAE,CAAC;AAAA,MACjE5B;AAAAA,MACAK;AAAAA,MAA2BN;AAAAA,IAAAA,CAGX,CAAA;AAAA,EAAA,CACJ;AAEpB;"}

package/dist/esm/providers/ThemeProvider.js

@@ -10,7 +10,8 @@ const HvThemeProvider = ({
   themes: themesList,
   theme,
   colorMode,
-  rootElementId
+  rootElementId,
+  classNameKey
 }) => {
   let pTheme = parseTheme(themesList, theme, colorMode);
   const [rootId] = useState(rootElementId);
@@ -40,8 +41,9 @@ const HvThemeProvider = ({
     selectedTheme,
     selectedMode,
     changeTheme,
+    classNameKey,
     rootId
-  }), [themes, colorModes, activeTheme, selectedTheme, selectedMode, changeTheme, rootId]);
+  }), [themes, colorModes, activeTheme, selectedTheme, selectedMode, changeTheme, classNameKey, rootId]);
   const MuiTheme = createTheme({
     breakpoints: {
       values: {

package/dist/esm/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { setElementAttrs } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  colorMode: string;\n  rootElementId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  colorMode,\n  rootElementId,\n}: HvThemeProviderProps) => {\n  let pTheme = parseTheme(themesList, theme, colorMode);\n\n  const [rootId] = useState<string | undefined>(rootElementId);\n  const [activeTheme, setActiveTheme] = useState<HvTheme | HvThemeStructure>(\n    pTheme.theme\n  );\n  const [selectedTheme, setSelectedTheme] = useState<string>(\n    pTheme.selectedTheme\n  );\n  const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n  const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n  const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    setThemes(themesList.map((t) => t.name));\n  }, [themesList]);\n\n  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n    pTheme = parseTheme(themesList, newTheme, newMode);\n\n    setActiveTheme(pTheme.theme);\n    setSelectedTheme(pTheme.selectedTheme);\n    setThemeMode(pTheme.selectedMode);\n    setColorModes(pTheme.colorModes);\n\n    setElementAttrs(\n      pTheme.selectedTheme,\n      pTheme.selectedMode,\n      pTheme.styles,\n      rootId\n    );\n  };\n\n  useEffect(() => {\n    changeTheme(theme, colorMode);\n  }, [theme, colorMode]);\n\n  const value = useMemo(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        {children}\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["HvThemeProvider","children","themes","themesList","theme","colorMode","rootElementId","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","styles","value","useMemo","MuiTheme","createTheme","breakpoints","values","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,WAAWL,YAAYC,OAAOC,SAAS;AAEpD,QAAM,CAACI,MAAM,IAAIC,SAA6BJ,aAAa;AAC3D,QAAM,CAACK,aAAaC,cAAc,IAAIF,SACpCH,OAAOH,KAAK;AAEd,QAAM,CAACS,eAAeC,gBAAgB,IAAIJ,SACxCH,OAAOM,aAAa;AAEtB,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAACf,QAAQiB,SAAS,IAAIT,SAAmBP,WAAWiB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,YAAU,MAAM;AACdJ,cAAUhB,WAAWiB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACnB,UAAU,CAAC;AAEf,QAAMqB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,WAAWL,YAAYsB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOH,KAAK;AAC3BU,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,oBACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,QACPnB,MAAM;AAAA,EAAA;AAIVc,YAAU,MAAM;AACdC,gBAAYpB,OAAOC,SAAS;AAAA,EAAA,GAC3B,CAACD,OAAOC,SAAS,CAAC;AAEfwB,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACL5B;AAAAA,IACAe;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAf;AAAAA,EAAAA,IAEF,CACEP,QACAe,YACAN,aACAE,eACAE,cACAS,aACAf,MAAM,CACP;AAGH,QAAMsB,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,6BACGC,eAAgB;AAAA,IAAC/B,OAAO2B;AAAAA,IAAS9B,UAC/BmC,oBAAAA,eAAeC,UAAQ;AAAA,MAACR;AAAAA,MAAa5B;AAAAA,IAAAA,CAC3B;AAAA,EAAA,CAEM;AAEvB;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { setElementAttrs } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  colorMode: string;\n  classNameKey: string;\n  rootElementId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  colorMode,\n  rootElementId,\n  classNameKey,\n}: HvThemeProviderProps) => {\n  let pTheme = parseTheme(themesList, theme, colorMode);\n\n  const [rootId] = useState<string | undefined>(rootElementId);\n  const [activeTheme, setActiveTheme] = useState<HvTheme | HvThemeStructure>(\n    pTheme.theme\n  );\n  const [selectedTheme, setSelectedTheme] = useState<string>(\n    pTheme.selectedTheme\n  );\n  const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n  const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n  const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    setThemes(themesList.map((t) => t.name));\n  }, [themesList]);\n\n  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n    pTheme = parseTheme(themesList, newTheme, newMode);\n\n    setActiveTheme(pTheme.theme);\n    setSelectedTheme(pTheme.selectedTheme);\n    setThemeMode(pTheme.selectedMode);\n    setColorModes(pTheme.colorModes);\n\n    setElementAttrs(\n      pTheme.selectedTheme,\n      pTheme.selectedMode,\n      pTheme.styles,\n      rootId\n    );\n  };\n\n  useEffect(() => {\n    changeTheme(theme, colorMode);\n  }, [theme, colorMode]);\n\n  const value = useMemo(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      classNameKey,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      classNameKey,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        {children}\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["HvThemeProvider","children","themes","themesList","theme","colorMode","rootElementId","classNameKey","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","styles","value","useMemo","MuiTheme","createTheme","breakpoints","values","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;AAuBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,WAAWN,YAAYC,OAAOC,SAAS;AAEpD,QAAM,CAACK,MAAM,IAAIC,SAA6BL,aAAa;AAC3D,QAAM,CAACM,aAAaC,cAAc,IAAIF,SACpCH,OAAOJ,KAAK;AAEd,QAAM,CAACU,eAAeC,gBAAgB,IAAIJ,SACxCH,OAAOM,aAAa;AAEtB,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAAChB,QAAQkB,SAAS,IAAIT,SAAmBR,WAAWkB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,YAAU,MAAM;AACdJ,cAAUjB,WAAWkB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACpB,UAAU,CAAC;AAEf,QAAMsB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,WAAWN,YAAYuB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOJ,KAAK;AAC3BW,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,oBACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,QACPnB,MAAM;AAAA,EAAA;AAIVc,YAAU,MAAM;AACdC,gBAAYrB,OAAOC,SAAS;AAAA,EAAA,GAC3B,CAACD,OAAOC,SAAS,CAAC;AAEfyB,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACL7B;AAAAA,IACAgB;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAlB;AAAAA,IACAG;AAAAA,EACF,IACA,CACER,QACAgB,YACAN,aACAE,eACAE,cACAS,aACAlB,cACAG,MAAM,CACP;AAGH,QAAMsB,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,6BACGC,eAAgB;AAAA,IAAChC,OAAO4B;AAAAA,IAAS/B,UAC/BoC,oBAAAA,eAAeC,UAAQ;AAAA,MAACR;AAAAA,MAAa7B;AAAAA,IAAAA,CAC3B;AAAA,EAAA,CAEM;AAEvB;"}