@hitachivantara/uikit-react-core 5.24.2 → 5.24.4

package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js

@@ -1,71 +1,74 @@
-import _styled from "@emotion/styled/base";
+import { createClasses } from "../../../utils/classes.js";
 import { theme } from "@hitachivantara/uikit-styles";
-import singleCalendarClasses from "./singleCalendarClasses.js";
-const StyledCalendarContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e10ihr3e2"
-} : {
-  target: "e10ihr3e2",
-  label: "StyledCalendarContainer"
-})({
-  backgroundColor: theme.colors.atmo1,
-  width: "318px",
-  minHeight: "440px",
-  position: "relative"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9TaW5nbGVDYWxlbmRhci9TaW5nbGVDYWxlbmRhci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgc2luZ2xlQ2FsZW5kYXJDbGFzc2VzIGZyb20gXCIuL3NpbmdsZUNhbGVuZGFyQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2FsZW5kYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgd2lkdGg6IFwiMzE4cHhcIixcbiAgbWluSGVpZ2h0OiBcIjQ0MHB4XCIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENhbGVuZGFyV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhcInNtXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhckdyaWQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleEZsb3c6IFwid3JhcFwiLFxuICB3aWR0aDogXCIyODBweFwiLFxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJSaWdodDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcblxuICBbYCY6aG92ZXIgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYm9yZGVyUmlnaHQ6IFwiaW5oZXJpdFwiLFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9OmhvdmVyYF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNhbGVuZGFyRGF0ZX1gXToge1xuICAgICAgYm9yZGVyUmlnaHQ6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgfSxcbiAgfSxcblxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX06aG92ZXIgfiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNJblJhbmdlfWBdOlxuICAgIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLCAvLyBjb250cm9scyB0aGUgcmlnaHQgc2lkZSBvZiB0aGUgaG92ZXJlZCByYW5nZVxuICAgIH0sXG4gIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNPdXRzaWRlUmFuZ2V9OmhvdmVyIH4gLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXTpcbiAgICB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSwgLy8gY29udHJvbCB0aGUgcmlnaHQgc2lkZSB3aGVuIGhvdmVyaW5nIG91dHNpZGUgb2YgdGhlIHJhbmdlXG4gICAgfSxcbn0pO1xuIl19 */");
-const StyledCalendarWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e10ihr3e1"
-} : {
-  target: "e10ihr3e1",
-  label: "StyledCalendarWrapper"
-})({
-  overflow: "hidden",
-  backgroundColor: theme.colors.atmo1,
-  padding: theme.spacing("sm")
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXcUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYWxlbmRhci9TaW5nbGVDYWxlbmRhci9TaW5nbGVDYWxlbmRhci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgc2luZ2xlQ2FsZW5kYXJDbGFzc2VzIGZyb20gXCIuL3NpbmdsZUNhbGVuZGFyQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2FsZW5kYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgd2lkdGg6IFwiMzE4cHhcIixcbiAgbWluSGVpZ2h0OiBcIjQ0MHB4XCIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENhbGVuZGFyV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhcInNtXCIpLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhckdyaWQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleEZsb3c6IFwid3JhcFwiLFxuICB3aWR0aDogXCIyODBweFwiLFxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBib3JkZXJSaWdodDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcblxuICBbYCY6aG92ZXIgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXToge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuc3RhcnRCb29rZW5kfWBdOiB7XG4gICAgICBib3JkZXJMZWZ0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgICAgYm9yZGVyUmlnaHQ6IFwiaW5oZXJpdFwiLFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9OmhvdmVyYF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNhbGVuZGFyRGF0ZX1gXToge1xuICAgICAgYm9yZGVyUmlnaHQ6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgfSxcbiAgfSxcblxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX06aG92ZXIgfiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNJblJhbmdlfWBdOlxuICAgIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLCAvLyBjb250cm9scyB0aGUgcmlnaHQgc2lkZSBvZiB0aGUgaG92ZXJlZCByYW5nZVxuICAgIH0sXG4gIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNPdXRzaWRlUmFuZ2V9OmhvdmVyIH4gLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXTpcbiAgICB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSwgLy8gY29udHJvbCB0aGUgcmlnaHQgc2lkZSB3aGVuIGhvdmVyaW5nIG91dHNpZGUgb2YgdGhlIHJhbmdlXG4gICAgfSxcbn0pO1xuIl19 */");
-const StyledCalendarGrid = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e10ihr3e0"
-} : {
-  target: "e10ihr3e0",
-  label: "StyledCalendarGrid"
-})({
-  display: "flex",
-  flexFlow: "wrap",
-  width: "280px",
-  [`& .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo3,
-    [`& .${singleCalendarClasses.startBookend}`]: {
-      borderLeft: `1px solid ${theme.colors.secondary}`,
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvSingleCalendar", {
+  calendarContainer: {
+    backgroundColor: theme.colors.atmo1,
+    width: "318px",
+    minHeight: "440px",
+    position: "relative"
+  },
+  calendarWrapper: {
+    overflow: "hidden",
+    backgroundColor: theme.colors.atmo1,
+    padding: theme.spacing("sm")
+  },
+  calendarGrid: {
+    display: "flex",
+    flexFlow: "wrap",
+    width: "280px",
+    "& $cellsInRange": {
+      backgroundColor: theme.colors.atmo3,
+      "& $startBookend": {
+        borderLeft: `1px solid ${theme.colors.secondary}`,
+        backgroundColor: theme.colors.atmo3,
+        "&:hover": {
+          borderRight: `1px solid ${theme.colors.secondary}`
+        }
+      }
+    },
+    "&:hover $cellsInRange": {
+      backgroundColor: theme.colors.atmo3,
+      "& $startBookend": {
+        borderLeft: `1px solid ${theme.colors.secondary}`,
+        borderRight: "inherit"
+      }
+    },
+    "& $cellsInRange:hover": {
       backgroundColor: theme.colors.atmo3,
-      "&:hover": {
+      "& $calendarDate": {
         borderRight: `1px solid ${theme.colors.secondary}`
       }
+    },
+    "& $cellsInRange:hover ~ $cellsInRange": {
+      backgroundColor: theme.colors.atmo1
+      // controls the right side of the hovered range
+    },
+    "& $cellsOutsideRange:hover ~ $cellsInRange": {
+      backgroundColor: theme.colors.atmo1
+      // control the right side when hovering outside of the range
     }
   },
-  [`&:hover .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo3,
-    [`& .${singleCalendarClasses.startBookend}`]: {
-      borderLeft: `1px solid ${theme.colors.secondary}`,
-      borderRight: "inherit"
-    }
-  },
-  [`& .${singleCalendarClasses.cellsInRange}:hover`]: {
-    backgroundColor: theme.colors.atmo3,
-    [`& .${singleCalendarClasses.calendarDate}`]: {
-      borderRight: `1px solid ${theme.colors.secondary}`
-    }
-  },
-  [`& .${singleCalendarClasses.cellsInRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo1
-    // controls the right side of the hovered range
+  navigationContainer: {},
+  focusSelection: {},
+  navigationMonth: {},
+  calendarDate: {},
+  calendarDateNotInMonth: {},
+  calendarDateSelected: {},
+  calendarDateInvalid: {},
+  calendarDateInSelectionRange: {},
+  startBookend: {},
+  endBookend: {},
+  cellsInRange: {
+    backgroundColor: theme.colors.atmo3
   },
-  [`& .${singleCalendarClasses.cellsOutsideRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]: {
-    backgroundColor: theme.colors.atmo1
-    // control the right side when hovering outside of the range
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmtDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIvU2luZ2xlQ2FsZW5kYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHNpbmdsZUNhbGVuZGFyQ2xhc3NlcyBmcm9tIFwiLi9zaW5nbGVDYWxlbmRhckNsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENhbGVuZGFyQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIHdpZHRoOiBcIjMxOHB4XCIsXG4gIG1pbkhlaWdodDogXCI0NDBweFwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDYWxlbmRhcldyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoXCJzbVwiKSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2FsZW5kYXJHcmlkID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhGbG93OiBcIndyYXBcIixcbiAgd2lkdGg6IFwiMjgwcHhcIixcbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9YF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLnN0YXJ0Qm9va2VuZH1gXToge1xuICAgICAgYm9yZGVyTGVmdDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyUmlnaHQ6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5fWAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmOmhvdmVyIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9YF06IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLnN0YXJ0Qm9va2VuZH1gXToge1xuICAgICAgYm9yZGVyTGVmdDogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnl9YCxcbiAgICAgIGJvcmRlclJpZ2h0OiBcImluaGVyaXRcIixcbiAgICB9LFxuICB9LFxuXG4gIFtgJiAuJHtzaW5nbGVDYWxlbmRhckNsYXNzZXMuY2VsbHNJblJhbmdlfTpob3ZlcmBdOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jYWxlbmRhckRhdGV9YF06IHtcbiAgICAgIGJvcmRlclJpZ2h0OiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeX1gLFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmIC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9OmhvdmVyIH4gLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzSW5SYW5nZX1gXTpcbiAgICB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSwgLy8gY29udHJvbHMgdGhlIHJpZ2h0IHNpZGUgb2YgdGhlIGhvdmVyZWQgcmFuZ2VcbiAgICB9LFxuICBbYCYgLiR7c2luZ2xlQ2FsZW5kYXJDbGFzc2VzLmNlbGxzT3V0c2lkZVJhbmdlfTpob3ZlciB+IC4ke3NpbmdsZUNhbGVuZGFyQ2xhc3Nlcy5jZWxsc0luUmFuZ2V9YF06XG4gICAge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsIC8vIGNvbnRyb2wgdGhlIHJpZ2h0IHNpZGUgd2hlbiBob3ZlcmluZyBvdXRzaWRlIG9mIHRoZSByYW5nZVxuICAgIH0sXG59KTtcbiJdfQ== */");
+  cellsOutsideRange: {},
+  cellContainer: {}
+});
 export {
-  StyledCalendarContainer,
-  StyledCalendarGrid,
-  StyledCalendarWrapper
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=SingleCalendar.styles.js.map

package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport singleCalendarClasses from \"./singleCalendarClasses\";\n\nexport const StyledCalendarContainer = styled(\"div\")({\n  backgroundColor: theme.colors.atmo1,\n  width: \"318px\",\n  minHeight: \"440px\",\n  position: \"relative\",\n});\n\nexport const StyledCalendarWrapper = styled(\"div\")({\n  overflow: \"hidden\",\n  backgroundColor: theme.colors.atmo1,\n  padding: theme.spacing(\"sm\"),\n});\n\nexport const StyledCalendarGrid = styled(\"div\")({\n  display: \"flex\",\n  flexFlow: \"wrap\",\n  width: \"280px\",\n  [`& .${singleCalendarClasses.cellsInRange}`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.startBookend}`]: {\n      borderLeft: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.atmo3,\n      \"&:hover\": {\n        borderRight: `1px solid ${theme.colors.secondary}`,\n      },\n    },\n  },\n\n  [`&:hover .${singleCalendarClasses.cellsInRange}`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.startBookend}`]: {\n      borderLeft: `1px solid ${theme.colors.secondary}`,\n      borderRight: \"inherit\",\n    },\n  },\n\n  [`& .${singleCalendarClasses.cellsInRange}:hover`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.calendarDate}`]: {\n      borderRight: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n\n  [`& .${singleCalendarClasses.cellsInRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]:\n    {\n      backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n    },\n  [`& .${singleCalendarClasses.cellsOutsideRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]:\n    {\n      backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n    },\n});\n"],"names":["StyledCalendarContainer","process","env","NODE_ENV","target","label","backgroundColor","theme","colors","atmo1","width","minHeight","position","StyledCalendarWrapper","overflow","padding","spacing","StyledCalendarGrid","display","flexFlow","singleCalendarClasses","cellsInRange","atmo3","startBookend","borderLeft","secondary","borderRight","calendarDate","cellsOutsideRange"],"mappings":";;;AAIO,MAAMA,0BAAiC,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnDC,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,OAAO;AAAA,EACPC,WAAW;AAAA,EACXC,UAAU;AACZ,GAACX,QAAAC,IAAAC,aAAC,eAAA,KAAA,6+FAAA;AAEK,MAAMU,wBAA+B,wBAAA,OAAKZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjDS,UAAU;AAAA,EACVR,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BM,SAASR,MAAMS,QAAQ,IAAI;AAC7B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,6+FAAA;AAEK,MAAMc,qBAA4B,wBAAA,OAAKhB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC9Ca,SAAS;AAAA,EACTC,UAAU;AAAA,EACVT,OAAO;AAAA,EACP,CAAE,MAAKU,sBAAsBC,cAAc,GAAG;AAAA,IAC5Cf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBG,cAAc,GAAG;AAAA,MAC5CC,YAAa,aAAYjB,MAAMC,OAAOiB;AAAAA,MACtCnB,iBAAiBC,MAAMC,OAAOc;AAAAA,MAC9B,WAAW;AAAA,QACTI,aAAc,aAAYnB,MAAMC,OAAOiB;AAAAA,MACzC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,CAAE,YAAWL,sBAAsBC,cAAc,GAAG;AAAA,IAClDf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBG,cAAc,GAAG;AAAA,MAC5CC,YAAa,aAAYjB,MAAMC,OAAOiB;AAAAA,MACtCC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,CAAE,MAAKN,sBAAsBC,oBAAoB,GAAG;AAAA,IAClDf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBO,cAAc,GAAG;AAAA,MAC5CD,aAAc,aAAYnB,MAAMC,OAAOiB;AAAAA,IACzC;AAAA,EACF;AAAA,EAEA,CAAE,MAAKL,sBAAsBC,yBAAyBD,sBAAsBC,cAAc,GACxF;AAAA,IACEf,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,EAChC;AAAA,EACF,CAAE,MAAKW,sBAAsBQ,8BAA8BR,sBAAsBC,cAAc,GAC7F;AAAA,IACEf,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,EAChC;AACJ,GAACR,QAAAC,IAAAC,aAAC,eAAA,KAAA,i/FAAA;"}
+{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSingleCalendar\", {\n  calendarContainer: {\n    backgroundColor: theme.colors.atmo1,\n    width: \"318px\",\n    minHeight: \"440px\",\n    position: \"relative\",\n  },\n  calendarWrapper: {\n    overflow: \"hidden\",\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.spacing(\"sm\"),\n  },\n  calendarGrid: {\n    display: \"flex\",\n    flexFlow: \"wrap\",\n    width: \"280px\",\n    \"& $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        backgroundColor: theme.colors.atmo3,\n        \"&:hover\": {\n          borderRight: `1px solid ${theme.colors.secondary}`,\n        },\n      },\n    },\n    \"&:hover $cellsInRange\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $startBookend\": {\n        borderLeft: `1px solid ${theme.colors.secondary}`,\n        borderRight: \"inherit\",\n      },\n    },\n    \"& $cellsInRange:hover\": {\n      backgroundColor: theme.colors.atmo3,\n      \"& $calendarDate\": {\n        borderRight: `1px solid ${theme.colors.secondary}`,\n      },\n    },\n    \"& $cellsInRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n    },\n    \"& $cellsOutsideRange:hover ~ $cellsInRange\": {\n      backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n    },\n  },\n  navigationContainer: {},\n  focusSelection: {},\n  navigationMonth: {},\n  calendarDate: {},\n  calendarDateNotInMonth: {},\n  calendarDateSelected: {},\n  calendarDateInvalid: {},\n  calendarDateInSelectionRange: {},\n  startBookend: {},\n  endBookend: {},\n  cellsInRange: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  cellsOutsideRange: {},\n  cellContainer: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","calendarContainer","backgroundColor","theme","colors","atmo1","width","minHeight","position","calendarWrapper","overflow","padding","spacing","calendarGrid","display","flexFlow","atmo3","borderLeft","secondary","borderRight","navigationContainer","focusSelection","navigationMonth","calendarDate","calendarDateNotInMonth","calendarDateSelected","calendarDateInvalid","calendarDateInSelectionRange","startBookend","endBookend","cellsInRange","cellsOutsideRange","cellContainer"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,mBAAmB;AAAA,IACjBC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,IACVR,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BM,SAASR,MAAMS,QAAQ,IAAI;AAAA,EAC7B;AAAA,EACAC,cAAc;AAAA,IACZC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVT,OAAO;AAAA,IACP,mBAAmB;AAAA,MACjBJ,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBC,YAAa,aAAYd,MAAMC,OAAOc;AAAAA,QACtChB,iBAAiBC,MAAMC,OAAOY;AAAAA,QAC9B,WAAW;AAAA,UACTG,aAAc,aAAYhB,MAAMC,OAAOc;AAAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvBhB,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBC,YAAa,aAAYd,MAAMC,OAAOc;AAAAA,QACtCC,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvBjB,iBAAiBC,MAAMC,OAAOY;AAAAA,MAC9B,mBAAmB;AAAA,QACjBG,aAAc,aAAYhB,MAAMC,OAAOc;AAAAA,MACzC;AAAA,IACF;AAAA,IACA,yCAAyC;AAAA,MACvChB,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,IAChC;AAAA,IACA,8CAA8C;AAAA,MAC5CH,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,IAChC;AAAA,EACF;AAAA,EACAe,qBAAqB,CAAC;AAAA,EACtBC,gBAAgB,CAAC;AAAA,EACjBC,iBAAiB,CAAC;AAAA,EAClBC,cAAc,CAAC;AAAA,EACfC,wBAAwB,CAAC;AAAA,EACzBC,sBAAsB,CAAC;AAAA,EACvBC,qBAAqB,CAAC;AAAA,EACtBC,8BAA8B,CAAC;AAAA,EAC/BC,cAAc,CAAC;AAAA,EACfC,YAAY,CAAC;AAAA,EACbC,cAAc;AAAA,IACZ5B,iBAAiBC,MAAMC,OAAOY;AAAAA,EAChC;AAAA,EACAe,mBAAmB,CAAC;AAAA,EACpBC,eAAe,CAAC;AAClB,CAAC;"}

package/dist/esm/components/Card/Card.js

@@ -25,10 +25,10 @@ const HvCard = (props) => {
     "aria-selected": selectable ? selected : void 0,
     className: cx("HvIsCardGridElement", classes.root, css({
       backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
-    }), className, {
+    }), {
       [classes.selectable]: selectable,
       [classes.selected]: selected
-    }),
+    }, className),
     ...others,
     children: [/* @__PURE__ */ jsxs("div", {
       className: classes.semanticContainer,

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        className,\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        }\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWZ,WAAW;AACnD,8BACGa,OAAK;AAAA,IACJ,iBAAeT,aAAaC,WAAWS;AAAAA,IACvCb,WAAWU,GACT,uBACAZ,QAAQgB,MACRL,IAAI;AAAA,MACFM,iBACGT,WAAWU,MAAMC,OAAOX,OAAO,KAAMU,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACDf,WACA;AAAA,MACE,CAACF,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,IAAAA,CAExB;AAAA,IAAE,GACEG;AAAAA,IAAMN,WAEVkB,qBAAA,OAAA;AAAA,MAAKnB,WAAWF,QAAQsB;AAAAA,MAAkBnB,WACxCoB,oBAAA,OAAA;AAAA,QACErB,WAAWU,GACTD,IAAI;AAAA,UACFa,QAAQlB,WAAW,IAAI;AAAA,UACvBW,iBACEV,gBAAgB,UACZD,WACEY,MAAMC,OAAOM,YACbP,MAAMC,OAAOO,QACfR,MAAMC,OAAOZ,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ2B,WACV;AAAA,MAAA,CACD,GACDJ,oBAAA,OAAA;AAAA,QAAKrB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWZ,WAAW;AACnD,8BACGa,OAAK;AAAA,IACJ,iBAAeT,aAAaC,WAAWS;AAAAA,IACvCb,WAAWU,GACT,uBACAZ,QAAQgB,MACRL,IAAI;AAAA,MACFM,iBACGT,WAAWU,MAAMC,OAAOX,OAAO,KAAMU,MAAME,KAAKH;AAAAA,IAAAA,CACpD,GACD;AAAA,MACE,CAACjB,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,OAEtBJ,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMN,WAEVkB,qBAAA,OAAA;AAAA,MAAKnB,WAAWF,QAAQsB;AAAAA,MAAkBnB,WACxCoB,oBAAA,OAAA;AAAA,QACErB,WAAWU,GACTD,IAAI;AAAA,UACFa,QAAQlB,WAAW,IAAI;AAAA,UACvBW,iBACEV,gBAAgB,UACZD,WACEY,MAAMC,OAAOM,YACbP,MAAMC,OAAOO,QACfR,MAAMC,OAAOZ,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ2B,WACV;AAAA,MAAA,CACD,GACDJ,oBAAA,OAAA;AAAA,QAAKrB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;"}

package/dist/esm/components/Footer/Footer.js

@@ -21,9 +21,9 @@ const HvFooter = (props) => {
   } = useClasses(classesProp);
   const isSmDown = useMediaQuery(muiTheme.breakpoints.down("sm"));
   return /* @__PURE__ */ jsxs("footer", {
-    className: cx(classes.root, className, {
+    className: cx(classes.root, {
       [classes.small]: isSmDown
-    }),
+    }, className),
     ...others,
     children: [/* @__PURE__ */ jsx(HvTypography, {
       variant: "highlightText",

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  name?: React.ReactNode;\n  copyright?: React.ReactNode;\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara Corporation ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, className, { [classes.small]: isSmDown })}\n      {...others}\n    >\n      <HvTypography variant=\"highlightText\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":["HvFooter","props","name","copyright","Date","getFullYear","links","classes","classesProp","className","others","useDefaultProps","muiTheme","useTheme","cx","useClasses","isSmDown","useMediaQuery","breakpoints","down","root","small","children","_jsx","HvTypography","variant","_jsxs","rightContainer","separator"],"mappings":";;;;;;;AAuBaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC,OAAO;AAAA,IACPC,YAAa,kCAAoCC,oBAAAA,QAAOC,YAAY;AAAA,IACpEC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYV,KAAK;AACrC,QAAMW,WAAWC;AACX,QAAA;AAAA,IAAEN;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAE9C,QAAMQ,WAAWC,cAAcL,SAASM,YAAYC,KAAK,IAAI,CAAC;AAE9D,8BACE,UAAA;AAAA,IACEV,WAAWK,GAAGP,QAAQa,MAAMX,WAAW;AAAA,MAAE,CAACF,QAAQc,KAAK,GAAGL;AAAAA,IAAAA,CAAU;AAAA,IAAE,GAClEN;AAAAA,IAAMY,UAAA,CAEVC,oBAACC,cAAY;AAAA,MAACC,SAAQ;AAAA,MAAgBhB,WAAWF,QAAQL;AAAAA,MAAKoB,UAC3DpB;AAAAA,IAAAA,CACW,GACdwB,qBAAA,OAAA;AAAA,MAAKjB,WAAWF,QAAQoB;AAAAA,MAAeL,UAAA,CACrCC,oBAACC,cAAY;AAAA,QAACf,WAAWF,QAAQJ;AAAAA,QAAUmB,UAAEnB;AAAAA,MAAAA,CAAwB,GACpEG,SAASiB,oBAAA,OAAA;AAAA,QAAKd,WAAWF,QAAQqB;AAAAA,MAAY,CAAA,GAC7CtB,KAAK;AAAA,IAAA,CACH,CAAC;AAAA,EAAA,CACA;AAEZ;"}
+{"version":3,"file":"Footer.js","sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  name?: React.ReactNode;\n  copyright?: React.ReactNode;\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara Corporation ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, { [classes.small]: isSmDown }, className)}\n      {...others}\n    >\n      <HvTypography variant=\"highlightText\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":["HvFooter","props","name","copyright","Date","getFullYear","links","classes","classesProp","className","others","useDefaultProps","muiTheme","useTheme","cx","useClasses","isSmDown","useMediaQuery","breakpoints","down","root","small","children","_jsx","HvTypography","variant","_jsxs","rightContainer","separator"],"mappings":";;;;;;;AAuBaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC,OAAO;AAAA,IACPC,YAAa,kCAAoCC,oBAAAA,QAAOC,YAAY;AAAA,IACpEC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYV,KAAK;AACrC,QAAMW,WAAWC;AACX,QAAA;AAAA,IAAEN;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAE9C,QAAMQ,WAAWC,cAAcL,SAASM,YAAYC,KAAK,IAAI,CAAC;AAE9D,8BACE,UAAA;AAAA,IACEV,WAAWK,GAAGP,QAAQa,MAAM;AAAA,MAAE,CAACb,QAAQc,KAAK,GAAGL;AAAAA,OAAYP,SAAS;AAAA,IAAE,GAClEC;AAAAA,IAAMY,UAAA,CAEVC,oBAACC,cAAY;AAAA,MAACC,SAAQ;AAAA,MAAgBhB,WAAWF,QAAQL;AAAAA,MAAKoB,UAC3DpB;AAAAA,IAAAA,CACW,GACdwB,qBAAA,OAAA;AAAA,MAAKjB,WAAWF,QAAQoB;AAAAA,MAAeL,UAAA,CACrCC,oBAACC,cAAY;AAAA,QAACf,WAAWF,QAAQJ;AAAAA,QAAUmB,UAAEnB;AAAAA,MAAAA,CAAwB,GACpEG,SAASiB,oBAAA,OAAA;AAAA,QAAKd,WAAWF,QAAQqB;AAAAA,MAAY,CAAA,GAC7CtB,KAAK;AAAA,IAAA,CACH,CAAC;AAAA,EAAA,CACA;AAEZ;"}

package/dist/esm/components/Grid/Grid.js

@@ -2,6 +2,8 @@ import { Grid } from "@mui/material";
 import isString from "lodash/isString";
 import { forwardRef } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./Grid.styles.js";
+import { staticClasses } from "./Grid.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const BREAKPOINT_GUTTERS = {
   xs: 2,
@@ -55,8 +57,12 @@ const HvGrid = forwardRef((props, ref) => {
     rowSpacing,
     columnSpacing,
     columns,
+    classes: classesProp,
     ...others
   } = useDefaultProps("HvGrid", props);
+  const {
+    classes
+  } = useClasses(classesProp);
   const containerProps = {};
   if (container) {
     containerProps.container = true;
@@ -75,11 +81,13 @@ const HvGrid = forwardRef((props, ref) => {
   }
   return /* @__PURE__ */ jsx(Grid, {
     ref,
+    classes,
     ...containerProps,
     ...others
   });
 });
 export {
-  HvGrid
+  HvGrid,
+  staticClasses as gridClasses
 };
 //# sourceMappingURL=Grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvGridClasses } from \"./gridClasses\";\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based in a 12-column grid layout.\n *\n * It is is based in the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-575[       | 16              | 4                 |\n * | sm         | [576-767[     | 16              | 8                 |\n * | md         | [768-991[     | 32              | 12                |\n * | lg         | [992-1199[    | 32              | 12                |\n * | xl         | [1200-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = {};\n\n  if (container) {\n    containerProps.container = true;\n\n    if (spacing != null) {\n      containerProps.spacing = getGridSpacing(spacing);\n    }\n    if (rowSpacing != null) {\n      containerProps.rowSpacing = getGridSpacing(rowSpacing);\n    }\n    if (columnSpacing != null) {\n      containerProps.columnSpacing = getGridSpacing(columnSpacing);\n    }\n    if (columns != null) {\n      containerProps.columns = getNumberOfColumns(columns);\n    }\n  }\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","others","useDefaultProps","containerProps","MuiGrid"],"mappings":";;;;;AAUA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,SAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACA,GAAGS;AAAAA,EAAAA,IACDC,gBAAgB,UAAUN,KAAK;AACnC,QAAMO,iBAGF,CAAA;AAEJ,MAAIL,WAAW;AACbK,mBAAeL,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,6BAAQY,MAAO;AAAA,IAACP;AAAAA,IAAS,GAAKM;AAAAA,IAAc,GAAMF;AAAAA,EAAAA,CAAS;AAC7D,CAAC;"}
+{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based in a 12-column grid layout.\n *\n * It is is based in the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-575[       | 16              | 4                 |\n * | sm         | [576-767[     | 16              | 8                 |\n * | md         | [768-991[     | 32              | 12                |\n * | lg         | [992-1199[    | 32              | 12                |\n * | xl         | [1200-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = {};\n\n  if (container) {\n    containerProps.container = true;\n\n    if (spacing != null) {\n      containerProps.spacing = getGridSpacing(spacing);\n    }\n    if (rowSpacing != null) {\n      containerProps.rowSpacing = getGridSpacing(rowSpacing);\n    }\n    if (columnSpacing != null) {\n      containerProps.columnSpacing = getGridSpacing(columnSpacing);\n    }\n    if (columns != null) {\n      containerProps.columns = getNumberOfColumns(columns);\n    }\n  }\n\n  return (\n    <MuiGrid ref={ref} classes={classes} {...containerProps} {...others} />\n  );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","classes","classesProp","others","useDefaultProps","useClasses","containerProps","MuiGrid"],"mappings":";;;;;;;AAgBA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,SAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACAS,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,UAAUR,KAAK;AAE7B,QAAA;AAAA,IAAEK;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,QAAMI,iBAGF,CAAA;AAEJ,MAAIR,WAAW;AACbQ,mBAAeR,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,6BACGe,MAAO;AAAA,IAACV;AAAAA,IAAUI;AAAAA,IAAiB,GAAKK;AAAAA,IAAc,GAAMH;AAAAA,EAAAA,CAAS;AAE1E,CAAC;"}

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

@@ -0,0 +1,44 @@
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvGrid", {
+  root: {},
+  container: {},
+  item: {},
+  zeroMinWidth: {},
+  "direction-xs-column": {},
+  "direction-xs-reverse": {},
+  "direction-xs-row-reverse": {},
+  "wrap-xs-nowrap": {},
+  "wrap-xs-wrap-reverse": {},
+  "spacing-xs-1": {},
+  "spacing-xs-2": {},
+  "spacing-xs-3": {},
+  "spacing-xs-4": {},
+  "spacing-xs-5": {},
+  "spacing-xs-6": {},
+  "spacing-xs-7": {},
+  "spacing-xs-8": {},
+  "spacing-xs-9": {},
+  "spacing-xs-10": {},
+  "grid-xs-auto": {},
+  "grid-xs-true": {},
+  "grid-xs-1": {},
+  "grid-xs-2": {},
+  "grid-xs-3": {},
+  "grid-xs-4": {},
+  "grid-xs-5": {},
+  "grid-xs-6": {},
+  "grid-xs-7": {},
+  "grid-xs-8": {},
+  "grid-xs-9": {},
+  "grid-xs-10": {},
+  "grid-xs-11": {},
+  "grid-xs-12": {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Grid.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.styles.js","sources":["../../../../src/components/Grid/Grid.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGrid\", {\n  root: {},\n  container: {},\n  item: {},\n  zeroMinWidth: {},\n  \"direction-xs-column\": {},\n  \"direction-xs-reverse\": {},\n  \"direction-xs-row-reverse\": {},\n  \"wrap-xs-nowrap\": {},\n  \"wrap-xs-wrap-reverse\": {},\n  \"spacing-xs-1\": {},\n  \"spacing-xs-2\": {},\n  \"spacing-xs-3\": {},\n  \"spacing-xs-4\": {},\n  \"spacing-xs-5\": {},\n  \"spacing-xs-6\": {},\n  \"spacing-xs-7\": {},\n  \"spacing-xs-8\": {},\n  \"spacing-xs-9\": {},\n  \"spacing-xs-10\": {},\n  \"grid-xs-auto\": {},\n  \"grid-xs-true\": {},\n  \"grid-xs-1\": {},\n  \"grid-xs-2\": {},\n  \"grid-xs-3\": {},\n  \"grid-xs-4\": {},\n  \"grid-xs-5\": {},\n  \"grid-xs-6\": {},\n  \"grid-xs-7\": {},\n  \"grid-xs-8\": {},\n  \"grid-xs-9\": {},\n  \"grid-xs-10\": {},\n  \"grid-xs-11\": {},\n  \"grid-xs-12\": {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","container","item","zeroMinWidth"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,WAAW,CAAC;AAAA,EACZC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACf,uBAAuB,CAAC;AAAA,EACxB,wBAAwB,CAAC;AAAA,EACzB,4BAA4B,CAAC;AAAA,EAC7B,kBAAkB,CAAC;AAAA,EACnB,wBAAwB,CAAC;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AACjB,CAAC;"}

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

@@ -55,7 +55,7 @@ const HvHeaderMenuItem = ({
   const hasSubLevel = data && data.length;
   const isMenu = type === "menu";
   const isSelected = (selectionPath == null ? void 0 : selectionPath[isMenu ? 1 : 0]) === item.id;
-  const isCurrent = isSelected ? (selectionPath == null ? void 0 : selectionPath.length) > (isMenu ? 2 : 1) ? true : "page" : void 0;
+  const isCurrent = isSelected ? hasSubLevel ? true : "page" : void 0;
   const actionHandler = (event) => {
     if (event.type === "click" || isKey(event, "Enter") || isKey(event, "Space")) {
       if (event.type === "click") {
@@ -116,7 +116,7 @@ const HvHeaderMenuItem = ({
         "aria-current": isCurrent,
         children: label
       })
-    ), hasSubLevel && currentLevel < levels && /* @__PURE__ */ jsx(Bar, {
+    ), hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsx(Bar, {
       data,
       type: "menu",
       children: data.map((itm) => /* @__PURE__ */ jsx(HvHeaderMenuItem, {

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  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n  const hasSubLevel = data && data.length;\n  const isMenu = type === \"menu\";\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n  const isCurrent = isSelected\n    ? selectionPath?.length > (isMenu ? 2 : 1)\n      ? true\n      : \"page\"\n    : 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      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      {hasSubLevel && currentLevel < levels && (\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","HvTypography","component","variant","children","itemHref","itemTarget","root","menu","menubar","selected","_jsx","link","button","role","tabIndex","Bar","map","itm"],"mappings":"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"}
+{"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","HvTypography","component","variant","children","itemHref","itemTarget","root","menu","menubar","selected","_jsx","link","button","role","tabIndex","Bar","map","itm"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useSelectionPath.js","sources":["../../../../../src/components/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n  id: string;\n  label: string;\n  path?: string;\n  href?: string;\n  target?: string;\n  data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n  data: HvHeaderNavigationItemProp[] | undefined,\n  selectedId: string,\n  selection: string[] = [],\n  idx: number = -1,\n  parent: HvHeaderNavigationItemProp[] = []\n): string[] => {\n  data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n    const hasData = item.data && item.data.length;\n    const isSelected = item.id === selectedId;\n\n    if (isSelected)\n      selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nexport const useSelectionPath = (data, selectedId): string[] => {\n  const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n"],"names":["getSelectionPath","data","selectedId","selection","idx","parent","forEach","item","i","hasData","length","isSelected","id","push","useSelectionPath","selectionPath","setSelectionPath","useState","useEffect","path"],"mappings":";AAWA,MAAMA,mBAAmBA,CACvBC,MACAC,YACAC,YAAsB,IACtBC,MAAc,IACdC,SAAuC,OAC1B;AACPC,+BAAAA,QAAQ,CAACC,MAAkCC,MAAM;AACrD,UAAMC,UAAUF,KAAKN,QAAQM,KAAKN,KAAKS;AACjCC,UAAAA,aAAaJ,KAAKK,OAAOV;AAE3BS,QAAAA;AACFR,gBAAUU,KAAK,GAAIT,MAAM,KAAK,CAACC,OAAOD,GAAG,EAAEQ,EAAE,IAAI,CAAE,GAAGL,KAAKK,EAAE;AAC3DH,QAAAA;AAAST,uBAAiBO,KAAKN,MAAMC,YAAYC,WAAWK,GAAGP,IAAI;AAAA,EAAA;AAGlEE,SAAAA;AACT;AAEaW,MAAAA,mBAAmBA,CAACb,MAAMC,eAAyB;AAC9D,QAAM,CAACa,eAAeC,gBAAgB,IAAIC,SAAmB,CAAE,CAAA;AAE/DC,YAAU,MAAM;AACRC,UAAAA,OAAOnB,iBAAiBC,MAAMC,UAAU;AAC9Cc,qBAAiBG,IAAI;AAAA,EAAA,GACpB,CAAClB,MAAMC,UAAU,CAAC;AAEda,SAAAA;AACT;"}
+{"version":3,"file":"useSelectionPath.js","sources":["../../../../../src/components/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n  id: string;\n  label: string;\n  path?: string;\n  href?: string;\n  target?: string;\n  data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n  data: HvHeaderNavigationItemProp[] | undefined,\n  selectedId: string | undefined,\n  selection: string[] = [],\n  idx: number = -1,\n  parent: HvHeaderNavigationItemProp[] = []\n): string[] => {\n  data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n    const hasData = item.data && item.data.length;\n\n    const isSelected = item.id === selectedId;\n\n    if (isSelected)\n      selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nexport const useSelectionPath = (\n  data: HvHeaderNavigationItemProp[],\n  selectedId?: string\n): string[] => {\n  const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n"],"names":["getSelectionPath","data","selectedId","selection","idx","parent","forEach","item","i","hasData","length","isSelected","id","push","useSelectionPath","selectionPath","setSelectionPath","useState","useEffect","path"],"mappings":";AAWA,MAAMA,mBAAmBA,CACvBC,MACAC,YACAC,YAAsB,IACtBC,MAAc,IACdC,SAAuC,OAC1B;AACPC,+BAAAA,QAAQ,CAACC,MAAkCC,MAAM;AACrD,UAAMC,UAAUF,KAAKN,QAAQM,KAAKN,KAAKS;AAEjCC,UAAAA,aAAaJ,KAAKK,OAAOV;AAE3BS,QAAAA;AACFR,gBAAUU,KAAK,GAAIT,MAAM,KAAK,CAACC,OAAOD,GAAG,EAAEQ,EAAE,IAAI,CAAE,GAAGL,KAAKK,EAAE;AAE3DH,QAAAA;AAAST,uBAAiBO,KAAKN,MAAMC,YAAYC,WAAWK,GAAGP,IAAI;AAAA,EAAA;AAGlEE,SAAAA;AACT;AAEaW,MAAAA,mBAAmBA,CAC9Bb,MACAC,eACa;AACb,QAAM,CAACa,eAAeC,gBAAgB,IAAIC,SAAmB,CAAE,CAAA;AAE/DC,YAAU,MAAM;AACRC,UAAAA,OAAOnB,iBAAiBC,MAAMC,UAAU;AAE9Cc,qBAAiBG,IAAI;AAAA,EAAA,GACpB,CAAClB,MAAMC,UAAU,CAAC;AAEda,SAAAA;AACT;"}

package/dist/esm/components/Kpi/Kpi.js

@@ -1,8 +1,7 @@
-import { clsx } from "clsx";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useLabels } from "../../hooks/useLabels.js";
-import { StyledRoot, StyledIndicatorsContainer, StyledVisualIndicator, StyledIndicatorText, StyledIndicatorUnit, StyledComparisonComposition, StyledTrendIndicator, StyledComparisonContainer, StyledInternalVisualComparisonTypography, StyledInternalVisualComparisonDiv } from "./Kpi.styles.js";
-import kpiClasses from "./kpiClasses.js";
+import { useClasses } from "./Kpi.styles.js";
+import { staticClasses } from "./Kpi.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
@@ -19,51 +18,55 @@ const HvKpi = (props) => {
     indicatorUnitTextVariant = "title2",
     indicatorTextVariant = "title1",
     labels,
-    classes,
+    classes: classesProp,
     className,
     ...others
   } = useDefaultProps("HvKpi", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const mergedLabels = useLabels(DEFAULT_LABELS, labels);
-  const InternalVisualComparison = typeof visualComparison === "string" ? StyledInternalVisualComparisonTypography : StyledInternalVisualComparisonDiv;
-  return /* @__PURE__ */ jsxs(StyledRoot, {
-    className: clsx(classes == null ? void 0 : classes.root, className, kpiClasses.root),
+  const InternalVisualComparison = typeof visualComparison === "string" ? HvTypography : "div";
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(classes.root, className),
     ...others,
     children: [/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(HvTypography, {
         variant: "label",
         children: mergedLabels == null ? void 0 : mergedLabels.title
       })
-    }), /* @__PURE__ */ jsxs(StyledIndicatorsContainer, {
-      className: clsx(kpiClasses.indicatorsContainer, classes == null ? void 0 : classes.indicatorsContainer),
-      children: [visualIndicator && /* @__PURE__ */ jsx(StyledVisualIndicator, {
-        className: clsx(kpiClasses.visualIndicatorContainer, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.visualIndicatorContainer, classes == null ? void 0 : classes.spacingToTheRight),
+    }), /* @__PURE__ */ jsxs("div", {
+      className: classes.indicatorsContainer,
+      children: [visualIndicator && /* @__PURE__ */ jsx("div", {
+        className: cx(classes.visualIndicatorContainer, classes.spacingToTheRight),
         children: visualIndicator
-      }), (mergedLabels == null ? void 0 : mergedLabels.indicator) && /* @__PURE__ */ jsx(StyledIndicatorText, {
-        className: clsx(kpiClasses.spacingToTheRight, kpiClasses.indicatorText, classes == null ? void 0 : classes.spacingToTheRight, classes == null ? void 0 : classes.indicatorText),
+      }), (mergedLabels == null ? void 0 : mergedLabels.indicator) && /* @__PURE__ */ jsx(HvTypography, {
+        className: cx(classes.spacingToTheRight, classes.indicatorText),
         variant: indicatorTextVariant,
         children: mergedLabels.indicator
-      }), (mergedLabels == null ? void 0 : mergedLabels.unit) && /* @__PURE__ */ jsx(StyledIndicatorUnit, {
-        className: clsx(kpiClasses.indicatorUnit, classes == null ? void 0 : classes.indicatorUnit),
+      }), (mergedLabels == null ? void 0 : mergedLabels.unit) && /* @__PURE__ */ jsx(HvTypography, {
+        className: classes.indicatorUnit,
         variant: indicatorUnitTextVariant,
         children: mergedLabels.unit
       })]
-    }), visualComparison && /* @__PURE__ */ jsxs(StyledComparisonComposition, {
-      className: clsx(kpiClasses.comparisonComposition, classes == null ? void 0 : classes.comparisonComposition),
-      children: [trendIndicator && /* @__PURE__ */ jsx(StyledTrendIndicator, {
-        className: clsx(kpiClasses.trendLine, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.trendLine, classes == null ? void 0 : classes.spacingToTheRight),
+    }), visualComparison && /* @__PURE__ */ jsxs("div", {
+      className: classes.comparisonComposition,
+      children: [trendIndicator && /* @__PURE__ */ jsx("div", {
+        className: cx(classes.trendLine, classes.spacingToTheRight),
         children: trendIndicator
       }), /* @__PURE__ */ jsxs("div", {
-        children: [/* @__PURE__ */ jsx(StyledComparisonContainer, {
-          className: clsx(kpiClasses.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer),
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes.comparisonContainer,
           children: /* @__PURE__ */ jsx(InternalVisualComparison, {
-            className: clsx(kpiClasses.comparisons, kpiClasses.spacingToTheRight, classes == null ? void 0 : classes.comparisons, classes == null ? void 0 : classes.spacingToTheRight),
+            className: cx(classes.comparisons, classes.spacingToTheRight),
             variant: "label",
             children: visualComparison
           })
-        }), /* @__PURE__ */ jsx(StyledComparisonContainer, {
-          className: clsx(kpiClasses.comparisonContainer, classes == null ? void 0 : classes.comparisonContainer),
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes.comparisonContainer,
           children: /* @__PURE__ */ jsx(HvTypography, {
-            className: clsx(kpiClasses.comparisons, classes == null ? void 0 : classes.comparisons),
+            className: classes.comparisons,
             variant: "caption2",
             children: mergedLabels == null ? void 0 : mergedLabels.comparisonIndicatorInfo
           })
@@ -73,6 +76,7 @@ const HvKpi = (props) => {
   });
 };
 export {
-  HvKpi
+  HvKpi,
+  staticClasses as kpiClasses
 };
 //# sourceMappingURL=Kpi.js.map