@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/cjs/components/BaseSwitch/BaseSwitch.styles.cjs

@@ -1,70 +1,64 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const material = require("@mui/material");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvBaseSwitch", {
+  root: {
+    padding: uikitStyles.theme.baseSwitch.padding,
+    cursor: "pointer",
+    width: uikitStyles.theme.baseSwitch.width,
+    height: uikitStyles.theme.baseSwitch.height,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: uikitStyles.theme.baseSwitch.borderRadius,
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.baseSwitch.hoverBackgroundColor
+    },
+    // Higher CSS specificity here
+    "& $switchBase": {
+      "&:hover": {
+        backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
+      },
+      "&$checked": {
+        transform: "translateX(16px)",
+        "& + $track": {
+          opacity: uikitStyles.theme.baseSwitch.checkedOpacity,
+          backgroundColor: uikitStyles.theme.baseSwitch.checkedTrackBackgroundColor
+        },
+        "&:hover": {
+          backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
+        }
+      }
+    },
+    // Higher CSS specificity here
+    "&$disabled": {
+      "& $switchBase": {
+        "& + $track": {
+          opacity: uikitStyles.theme.baseSwitch.disabled.trackOpacity,
+          backgroundColor: uikitStyles.theme.baseSwitch.disabled.trackBackgroundColor,
+          border: uikitStyles.theme.baseSwitch.disabled.trackBorder
         }
       }
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledSwitch = /* @__PURE__ */ _styled__default.default(material.Switch, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1hgtekf0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1hgtekf0",
-  label: "StyledSwitch"
-}, transientOptions.transientOptions))(({
-  $focusVisible,
-  $readOnly,
-  $disabled
-}) => ({
-  padding: uikitStyles.theme.baseSwitch.padding,
-  cursor: "pointer",
-  width: uikitStyles.theme.baseSwitch.width,
-  height: uikitStyles.theme.baseSwitch.height,
-  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": {
-    backgroundColor: uikitStyles.theme.baseSwitch.hoverBackgroundColor
   },
-  borderRadius: uikitStyles.theme.baseSwitch.borderRadius,
-  [`&.${material.switchClasses.root}`]: {
+  switch: {
     width: uikitStyles.theme.baseSwitch.width,
     height: uikitStyles.theme.baseSwitch.height,
-    padding: uikitStyles.theme.baseSwitch.padding
+    padding: uikitStyles.theme.baseSwitch.padding,
+    "&$readOnly $switchBase": {
+      cursor: "default"
+    }
   },
-  [`& .${material.switchClasses.switchBase}`]: {
+  switchBase: {
     width: uikitStyles.theme.baseSwitch.width,
     height: uikitStyles.theme.baseSwitch.height,
-    padding: uikitStyles.theme.baseSwitch.padding,
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
-    },
-    [`&.${material.switchClasses.checked}`]: {
-      transform: "translateX(16px)",
-      [`& + .${material.switchClasses.track}`]: {
-        opacity: uikitStyles.theme.baseSwitch.checkedOpacity,
-        backgroundColor: uikitStyles.theme.baseSwitch.checkedTrackBackgroundColor
-      },
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
-      }
-    }
+    padding: uikitStyles.theme.baseSwitch.padding
   },
-  [`.${material.switchClasses.track}`]: {
+  track: {
     opacity: uikitStyles.theme.baseSwitch.track.opacity,
     borderRadius: uikitStyles.theme.baseSwitch.track.borderRadius,
     height: uikitStyles.theme.baseSwitch.track.height,
@@ -72,7 +66,7 @@ const StyledSwitch = /* @__PURE__ */ _styled__default.default(material.Switch, p
     border: uikitStyles.theme.baseSwitch.track.border,
     backgroundColor: uikitStyles.theme.baseSwitch.track.backgroundColor
   },
-  [`.${material.switchClasses.thumb}`]: {
+  thumb: {
     position: "relative",
     left: uikitStyles.theme.baseSwitch.thumb.left,
     width: uikitStyles.theme.baseSwitch.thumb.width,
@@ -83,31 +77,23 @@ const StyledSwitch = /* @__PURE__ */ _styled__default.default(material.Switch, p
     marginTop: uikitStyles.theme.baseSwitch.thumb.marginTop,
     boxShadow: uikitStyles.theme.baseSwitch.thumb.boxShadow
   },
-  [`.${material.switchClasses.disabled}`]: {
-    [`& .${material.switchClasses.thumb}`]: {
+  checked: {},
+  disabled: {
+    cursor: "not-allowed",
+    "& $switch": {
+      cursor: "not-allowed"
+    },
+    "& $thumb": {
       backgroundColor: uikitStyles.theme.baseSwitch.disabled.thumbBackgroundColor,
       border: uikitStyles.theme.baseSwitch.disabled.thumbBorder
-    },
-    [`&.${material.switchClasses.switchBase} + .${material.switchClasses.track}`]: {
-      opacity: uikitStyles.theme.baseSwitch.disabled.trackOpacity,
-      backgroundColor: uikitStyles.theme.baseSwitch.disabled.trackBackgroundColor,
-      border: uikitStyles.theme.baseSwitch.disabled.trackBorder
-    }
-  },
-  ...$readOnly && {
-    [`.${material.switchClasses.switchBase}`]: {
-      cursor: "default"
     }
   },
-  ...$focusVisible && {
+  readOnly: {},
+  focusVisible: {
     borderRadius: uikitStyles.theme.baseSwitch.focusBorderRadius,
     ...focusUtils.outlineStyles
-  },
-  ...$disabled && {
-    [`&.${material.switchClasses.root}`]: {
-      cursor: "not-allowed"
-    }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVN3aXRjaC9CYXNlU3dpdGNoLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVN3aXRjaC9CYXNlU3dpdGNoLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQge1xuICBTd2l0Y2ggYXMgTXVpU3dpdGNoLFxuICBzd2l0Y2hDbGFzc2VzIGFzIE11aVN3aXRjaENsYXNzZXMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTd2l0Y2ggPSBzdHlsZWQoXG4gIE11aVN3aXRjaCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkZm9jdXNWaXNpYmxlLFxuICAgICRyZWFkT25seSxcbiAgICAkZGlzYWJsZWQsXG4gIH06IHtcbiAgICAkZm9jdXNWaXNpYmxlOiBib29sZWFuO1xuICAgICRyZWFkT25seTogYm9vbGVhbjtcbiAgICAkZGlzYWJsZWQ6IGJvb2xlYW47XG4gIH0pID0+ICh7XG4gICAgcGFkZGluZzogdGhlbWUuYmFzZVN3aXRjaC5wYWRkaW5nLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgd2lkdGg6IHRoZW1lLmJhc2VTd2l0Y2gud2lkdGgsXG4gICAgaGVpZ2h0OiB0aGVtZS5iYXNlU3dpdGNoLmhlaWdodCxcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2guaG92ZXJCYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VTd2l0Y2guYm9yZGVyUmFkaXVzLFxuXG4gICAgW2AmLiR7TXVpU3dpdGNoQ2xhc3Nlcy5yb290fWBdOiB7XG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC53aWR0aCxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC5oZWlnaHQsXG4gICAgICBwYWRkaW5nOiB0aGVtZS5iYXNlU3dpdGNoLnBhZGRpbmcsXG4gICAgfSxcblxuICAgIFtgJiAuJHtNdWlTd2l0Y2hDbGFzc2VzLnN3aXRjaEJhc2V9YF06IHtcbiAgICAgIHdpZHRoOiB0aGVtZS5iYXNlU3dpdGNoLndpZHRoLFxuICAgICAgaGVpZ2h0OiB0aGVtZS5iYXNlU3dpdGNoLmhlaWdodCxcbiAgICAgIHBhZGRpbmc6IHRoZW1lLmJhc2VTd2l0Y2gucGFkZGluZyxcbiAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5ob3ZlckJhc2VCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICB9LFxuICAgICAgW2AmLiR7TXVpU3dpdGNoQ2xhc3Nlcy5jaGVja2VkfWBdOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDE2cHgpXCIsXG4gICAgICAgIFtgJiArIC4ke011aVN3aXRjaENsYXNzZXMudHJhY2t9YF06IHtcbiAgICAgICAgICBvcGFjaXR5OiB0aGVtZS5iYXNlU3dpdGNoLmNoZWNrZWRPcGFjaXR5LFxuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5jaGVja2VkVHJhY2tCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlU3dpdGNoLmhvdmVyQmFzZUJhY2tncm91bmRDb2xvcixcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFtgLiR7TXVpU3dpdGNoQ2xhc3Nlcy50cmFja31gXToge1xuICAgICAgb3BhY2l0eTogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5vcGFjaXR5LFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5iYXNlU3dpdGNoLnRyYWNrLmJvcmRlclJhZGl1cyxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5oZWlnaHQsXG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC50cmFjay53aWR0aCxcbiAgICAgIGJvcmRlcjogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5ib3JkZXIsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2gudHJhY2suYmFja2dyb3VuZENvbG9yLFxuICAgIH0sXG5cbiAgICBbYC4ke011aVN3aXRjaENsYXNzZXMudGh1bWJ9YF06IHtcbiAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICBsZWZ0OiB0aGVtZS5iYXNlU3dpdGNoLnRodW1iLmxlZnQsXG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi53aWR0aCxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi5oZWlnaHQsXG4gICAgICBib3JkZXI6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIuYm9yZGVyLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlU3dpdGNoLnRodW1iLmJhY2tncm91bmRDb2xvcixcbiAgICAgIG1hcmdpbkxlZnQ6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIubWFyZ2luTGVmdCxcbiAgICAgIG1hcmdpblRvcDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi5tYXJnaW5Ub3AsXG4gICAgICBib3hTaGFkb3c6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIuYm94U2hhZG93LFxuICAgIH0sXG5cbiAgICBbYC4ke011aVN3aXRjaENsYXNzZXMuZGlzYWJsZWR9YF06IHtcbiAgICAgIFtgJiAuJHtNdWlTd2l0Y2hDbGFzc2VzLnRodW1ifWBdOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5kaXNhYmxlZC50aHVtYkJhY2tncm91bmRDb2xvcixcbiAgICAgICAgYm9yZGVyOiB0aGVtZS5iYXNlU3dpdGNoLmRpc2FibGVkLnRodW1iQm9yZGVyLFxuICAgICAgfSxcbiAgICAgIFtgJi4ke011aVN3aXRjaENsYXNzZXMuc3dpdGNoQmFzZX0gKyAuJHtNdWlTd2l0Y2hDbGFzc2VzLnRyYWNrfWBdOiB7XG4gICAgICAgIG9wYWNpdHk6IHRoZW1lLmJhc2VTd2l0Y2guZGlzYWJsZWQudHJhY2tPcGFjaXR5LFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2guZGlzYWJsZWQudHJhY2tCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgIGJvcmRlcjogdGhlbWUuYmFzZVN3aXRjaC5kaXNhYmxlZC50cmFja0JvcmRlcixcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIC4uLigkcmVhZE9ubHkgJiYge1xuICAgICAgW2AuJHtNdWlTd2l0Y2hDbGFzc2VzLnN3aXRjaEJhc2V9YF06IHtcbiAgICAgICAgY3Vyc29yOiBcImRlZmF1bHRcIixcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJGZvY3VzVmlzaWJsZSAmJiB7XG4gICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VTd2l0Y2guZm9jdXNCb3JkZXJSYWRpdXMsXG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0pLFxuXG4gICAgLi4uKCRkaXNhYmxlZCAmJiB7XG4gICAgICBbYCYuJHtNdWlTd2l0Y2hDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgICB9LFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */");
-exports.StyledSwitch = StyledSwitch;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=BaseSwitch.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.styles.cjs","sources":["../../../../src/components/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  Switch as MuiSwitch,\n  switchClasses as MuiSwitchClasses,\n} from \"@mui/material\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledSwitch = styled(\n  MuiSwitch,\n  transientOptions\n)(\n  ({\n    $focusVisible,\n    $readOnly,\n    $disabled,\n  }: {\n    $focusVisible: boolean;\n    $readOnly: boolean;\n    $disabled: boolean;\n  }) => ({\n    padding: theme.baseSwitch.padding,\n    cursor: \"pointer\",\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    \"&:hover\": {\n      backgroundColor: theme.baseSwitch.hoverBackgroundColor,\n    },\n    borderRadius: theme.baseSwitch.borderRadius,\n\n    [`&.${MuiSwitchClasses.root}`]: {\n      width: theme.baseSwitch.width,\n      height: theme.baseSwitch.height,\n      padding: theme.baseSwitch.padding,\n    },\n\n    [`& .${MuiSwitchClasses.switchBase}`]: {\n      width: theme.baseSwitch.width,\n      height: theme.baseSwitch.height,\n      padding: theme.baseSwitch.padding,\n      \"&:hover\": {\n        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n      },\n      [`&.${MuiSwitchClasses.checked}`]: {\n        transform: \"translateX(16px)\",\n        [`& + .${MuiSwitchClasses.track}`]: {\n          opacity: theme.baseSwitch.checkedOpacity,\n          backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n        },\n      },\n    },\n\n    [`.${MuiSwitchClasses.track}`]: {\n      opacity: theme.baseSwitch.track.opacity,\n      borderRadius: theme.baseSwitch.track.borderRadius,\n      height: theme.baseSwitch.track.height,\n      width: theme.baseSwitch.track.width,\n      border: theme.baseSwitch.track.border,\n      backgroundColor: theme.baseSwitch.track.backgroundColor,\n    },\n\n    [`.${MuiSwitchClasses.thumb}`]: {\n      position: \"relative\",\n      left: theme.baseSwitch.thumb.left,\n      width: theme.baseSwitch.thumb.width,\n      height: theme.baseSwitch.thumb.height,\n      border: theme.baseSwitch.thumb.border,\n      backgroundColor: theme.baseSwitch.thumb.backgroundColor,\n      marginLeft: theme.baseSwitch.thumb.marginLeft,\n      marginTop: theme.baseSwitch.thumb.marginTop,\n      boxShadow: theme.baseSwitch.thumb.boxShadow,\n    },\n\n    [`.${MuiSwitchClasses.disabled}`]: {\n      [`& .${MuiSwitchClasses.thumb}`]: {\n        backgroundColor: theme.baseSwitch.disabled.thumbBackgroundColor,\n        border: theme.baseSwitch.disabled.thumbBorder,\n      },\n      [`&.${MuiSwitchClasses.switchBase} + .${MuiSwitchClasses.track}`]: {\n        opacity: theme.baseSwitch.disabled.trackOpacity,\n        backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,\n        border: theme.baseSwitch.disabled.trackBorder,\n      },\n    },\n\n    ...($readOnly && {\n      [`.${MuiSwitchClasses.switchBase}`]: {\n        cursor: \"default\",\n      },\n    }),\n\n    ...($focusVisible && {\n      borderRadius: theme.baseSwitch.focusBorderRadius,\n      ...outlineStyles,\n    }),\n\n    ...($disabled && {\n      [`&.${MuiSwitchClasses.root}`]: {\n        cursor: \"not-allowed\",\n      },\n    }),\n  })\n);\n"],"names":["StyledSwitch","MuiSwitch","process","env","NODE_ENV","_extends","target","transientOptions","label","$focusVisible","$readOnly","$disabled","padding","theme","baseSwitch","cursor","width","height","alignItems","justifyContent","backgroundColor","hoverBackgroundColor","borderRadius","MuiSwitchClasses","root","switchBase","hoverBaseBackgroundColor","checked","transform","track","opacity","checkedOpacity","checkedTrackBackgroundColor","border","thumb","position","left","marginLeft","marginTop","boxShadow","disabled","thumbBackgroundColor","thumbBorder","trackOpacity","trackBackgroundColor","trackBorder","focusBorderRadius","outlineStyles"],"mappings":"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"}
+{"version":3,"file":"BaseSwitch.styles.cjs","sources":["../../../../src/components/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseSwitch\", {\n  root: {\n    padding: theme.baseSwitch.padding,\n    cursor: \"pointer\",\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.baseSwitch.borderRadius,\n\n    \"&:hover\": {\n      backgroundColor: theme.baseSwitch.hoverBackgroundColor,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: theme.baseSwitch.checkedOpacity,\n          backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: theme.baseSwitch.disabled.trackOpacity,\n          backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,\n          border: theme.baseSwitch.disabled.trackBorder,\n        },\n      },\n    },\n  },\n  switch: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n  },\n  track: {\n    opacity: theme.baseSwitch.track.opacity,\n    borderRadius: theme.baseSwitch.track.borderRadius,\n    height: theme.baseSwitch.track.height,\n    width: theme.baseSwitch.track.width,\n    border: theme.baseSwitch.track.border,\n    backgroundColor: theme.baseSwitch.track.backgroundColor,\n  },\n  thumb: {\n    position: \"relative\",\n    left: theme.baseSwitch.thumb.left,\n    width: theme.baseSwitch.thumb.width,\n    height: theme.baseSwitch.thumb.height,\n    border: theme.baseSwitch.thumb.border,\n    backgroundColor: theme.baseSwitch.thumb.backgroundColor,\n    marginLeft: theme.baseSwitch.thumb.marginLeft,\n    marginTop: theme.baseSwitch.thumb.marginTop,\n    boxShadow: theme.baseSwitch.thumb.boxShadow,\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.baseSwitch.disabled.thumbBackgroundColor,\n      border: theme.baseSwitch.disabled.thumbBorder,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: theme.baseSwitch.focusBorderRadius,\n    ...outlineStyles,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","baseSwitch","cursor","width","height","alignItems","justifyContent","borderRadius","backgroundColor","hoverBackgroundColor","hoverBaseBackgroundColor","transform","opacity","checkedOpacity","checkedTrackBackgroundColor","disabled","trackOpacity","trackBackgroundColor","border","trackBorder","switch","switchBase","track","thumb","position","left","marginLeft","marginTop","boxShadow","checked","thumbBackgroundColor","thumbBorder","readOnly","focusVisible","focusBorderRadius","outlineStyles"],"mappings":"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"}

package/dist/cjs/components/Box/Box.cjs

@@ -2,18 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const React = require("react");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const sxFn = (sx) => {
   return typeof sx === "function" ? sx(uikitStyles.theme) : sx;
 };
-const HvBox = React.forwardRef(({
-  style,
-  component,
-  sx,
-  children,
-  ...restProps
-}, ref) => {
-  const Component = component || "div";
+const HvBox = React.forwardRef((props, ref) => {
+  const {
+    style,
+    component: Component = "div",
+    sx,
+    children,
+    ...restProps
+  } = useDefaultProps.useDefaultProps("HvBox", props);
   return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     style: sx ? sxFn(sx) : style,
     ref,

package/dist/cjs/components/Box/Box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { HvTheme, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\n\ntype SxProps = React.CSSProperties | ((theme: HvTheme) => React.CSSProperties);\n\ntype HvBoxBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n  C,\n  { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n  props: HvBoxBaseProps<C>\n) => React.ReactElement | null;\n\nconst sxFn = (sx: SxProps) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\n/**\n * Customizable layout component that can be used to wrap other components.\n * It can be used to add styles to the wrapped components.\n * It can also be used to create a layout using the flexbox properties.\n */\nexport const HvBox: HvBoxProps = forwardRef(\n  <C extends React.ElementType = \"div\">(\n    { style, component, sx, children, ...restProps }: HvBoxBaseProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = component || \"div\";\n\n    return (\n      <Component style={sx ? sxFn(sx) : style} ref={ref} {...restProps}>\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["sxFn","sx","theme","HvBox","forwardRef","style","component","children","restProps","ref","Component"],"mappings":";;;;;AAiBA,MAAMA,OAAOA,CAACC,OAAgB;AAC5B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,YAAK,KAAA,IAAID;AAChD;AAOaE,MAAAA,QAAoBC,iBAC/B,CACE;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,EAAWL;AAAAA,EAAIM;AAAAA,EAAU,GAAGC;AAA6B,GAClEC,QACG;AACH,QAAMC,YAAYJ,aAAa;AAE/B,wCACGI,WAAS;AAAA,IAACL,OAAOJ,KAAKD,KAAKC,EAAE,IAAII;AAAAA,IAAOI;AAAAA,IAAS,GAAKD;AAAAA,IAASD;AAAAA,EAAAA,CAErD;AAEf,CACF;;"}
+{"version":3,"file":"Box.cjs","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { HvTheme, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\ntype SxProps = React.CSSProperties | ((theme: HvTheme) => React.CSSProperties);\n\ntype HvBoxBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n  C,\n  { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n  props: HvBoxBaseProps<C>\n) => React.ReactElement | null;\n\nconst sxFn = (sx: SxProps) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\n/**\n * Customizable layout component that can be used to wrap other components.\n * It can be used to add styles to the wrapped components.\n * It can also be used to create a layout using the flexbox properties.\n */\nexport const HvBox: HvBoxProps = forwardRef(\n  <C extends React.ElementType = \"div\">(\n    props: HvBoxBaseProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const {\n      style,\n      component: Component = \"div\",\n      sx,\n      children,\n      ...restProps\n    } = useDefaultProps(\"HvBox\", props);\n\n    return (\n      <Component style={sx ? sxFn(sx) : style} ref={ref} {...restProps}>\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["sxFn","sx","theme","HvBox","forwardRef","props","ref","style","component","Component","children","restProps","useDefaultProps"],"mappings":";;;;;;AAkBA,MAAMA,OAAOA,CAACC,OAAgB;AAC5B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,YAAK,KAAA,IAAID;AAChD;AAOO,MAAME,QAAoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC,YAAY;AAAA,IACvBR;AAAAA,IACAS;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASP,KAAK;AAElC,wCACGI,WAAS;AAAA,IAACF,OAAON,KAAKD,KAAKC,EAAE,IAAIM;AAAAA,IAAOD;AAAAA,IAAS,GAAKK;AAAAA,IAASD;AAAAA,EAAAA,CAErD;AAEf,CACF;;"}

package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs

@@ -1,28 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
-const isNil = require("lodash/isNil");
 const React = require("react");
-const breadCrumbClasses = require("./breadCrumbClasses.cjs");
+const isNil = require("lodash/isNil");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const BreadCrumb_styles = require("./BreadCrumb.styles.cjs");
 const utils = require("./utils.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const PathElement = require("./PathElement/PathElement.cjs");
 const Page = require("./Page/Page.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
-const HvBreadCrumb = ({
-  classes,
-  className,
-  id,
-  listRoute = [],
-  maxVisible,
-  url,
-  onClick,
-  component,
-  dropDownMenuProps,
-  ...others
-}) => {
+const HvBreadCrumb = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    listRoute = [],
+    maxVisible,
+    url,
+    onClick,
+    component,
+    dropDownMenuProps,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvBreadCrumb", props);
+  const {
+    classes,
+    cx
+  } = BreadCrumb_styles.useClasses(classesProp);
   const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
   let listPath = listRoute.slice();
   if (!isNil__default.default(url)) {
@@ -36,30 +41,30 @@ const HvBreadCrumb = ({
     }));
   }
   const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? utils.pathWithSubMenu(id, listPath, maxVisibleElem, onClick, dropDownMenuProps) : listPath;
-  return /* @__PURE__ */ jsxRuntime.jsx(BreadCrumb_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", {
     id,
-    className: clsx.clsx(breadCrumbClasses.default.root, classes == null ? void 0 : classes.root, className),
+    className: cx(classes.root, className),
     ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsx(BreadCrumb_styles.StyledOrderedList, {
-      className: clsx.clsx(breadCrumbClasses.default.orderedList, classes == null ? void 0 : classes.orderedList),
+    children: /* @__PURE__ */ jsxRuntime.jsx("ol", {
+      className: classes.orderedList,
       children: listPath.map((elem, index) => {
         const key = `key_${index}`;
         const isLast = index === breadcrumbPath.length - 1;
         return /* @__PURE__ */ jsxRuntime.jsx(PathElement.HvPathElement, {
           classes: {
-            centerContainer: clsx.clsx(breadCrumbClasses.default.centerContainer, classes == null ? void 0 : classes.centerContainer),
-            separatorContainer: clsx.clsx(breadCrumbClasses.default.separatorContainer, classes == null ? void 0 : classes.separatorContainer)
+            centerContainer: classes.centerContainer,
+            separatorContainer: classes.separatorContainer
           },
           last: isLast,
-          children: React.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(BreadCrumb_styles.StyledTypography, {
-            className: clsx.clsx(breadCrumbClasses.default.currentPage, classes == null ? void 0 : classes.currentPage),
+          children: React.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+            className: classes.currentPage,
             variant: "body",
             children: utils.removeExtension(elem.label)
           }) || /* @__PURE__ */ jsxRuntime.jsx(Page.HvPage, {
             elem,
             classes: {
-              a: clsx.clsx(breadCrumbClasses.default.a, classes == null ? void 0 : classes.a),
-              link: clsx.clsx(breadCrumbClasses.default.link, classes == null ? void 0 : classes.link)
+              a: classes.a,
+              link: classes.link
             },
             component,
             onClick
@@ -69,5 +74,6 @@ const HvBreadCrumb = ({
     })
   });
 };
+exports.breadCrumbClasses = BreadCrumb_styles.staticClasses;
 exports.HvBreadCrumb = HvBreadCrumb;
 //# sourceMappingURL=BreadCrumb.cjs.map

package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { isValidElement, MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components/DropDownMenu\";\n\nimport breadCrumbClasses, { HvBreadCrumbClasses } from \"./breadCrumbClasses\";\nimport { HvPathElement } from \"./PathElement\";\nimport { HvPage } from \"./Page\";\nimport {\n  StyledOrderedList,\n  StyledRoot,\n  StyledTypography,\n} from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = ({\n  classes,\n  className,\n  id,\n  listRoute = [],\n  maxVisible,\n  url,\n  onClick,\n  component,\n  dropDownMenuProps,\n  ...others\n}: HvBreadCrumbProps) => {\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (!isNil(url)) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      })\n    );\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps\n        )\n      : listPath;\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(breadCrumbClasses.root, classes?.root, className)}\n      {...others}\n    >\n      <StyledOrderedList\n        className={clsx(breadCrumbClasses.orderedList, classes?.orderedList)}\n      >\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: clsx(\n                  breadCrumbClasses.centerContainer,\n                  classes?.centerContainer\n                ),\n                separatorContainer: clsx(\n                  breadCrumbClasses.separatorContainer,\n                  classes?.separatorContainer\n                ),\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <StyledTypography\n                    className={clsx(\n                      breadCrumbClasses.currentPage,\n                      classes?.currentPage\n                    )}\n                    variant=\"body\"\n                  >\n                    {removeExtension(elem.label)}\n                  </StyledTypography>\n                )) || (\n                  <HvPage\n                    elem={elem}\n                    classes={{\n                      a: clsx(breadCrumbClasses.a, classes?.a),\n                      link: clsx(breadCrumbClasses.link, classes?.link),\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </StyledOrderedList>\n    </StyledRoot>\n  );\n};\n"],"names":["HvBreadCrumb","classes","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","StyledRoot","clsx","breadCrumbClasses","root","children","StyledOrderedList","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","last","isValidElement","StyledTypography","currentPage","variant","removeExtension","_jsx","HvPage","a","link"],"mappings":";;;;;;;;;;;;;AAyCO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY,CAAE;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACvB,QAAMC,iBAAiBN,cAAcA,aAAa,IAAI,IAAIA;AACtDO,MAAAA,WAAWR,UAAUS;AAGrB,MAAA,CAACC,eAAAA,QAAMR,GAAG,GAAG;AACfM,eAAW,CAAA;AAGLG,UAAAA,UAAUT,IAAIU,MAAM,cAAc;AAGxC,UAAMC,mBAAmBX,IAAIY,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,WAAWI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG;AAAA,IAC3D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,MAAAA,gBACE9B,IACAS,UACAD,gBACAJ,SACAE,iBACF,IACAG;AAEN,wCACGsB,kBAAAA,YAAU;AAAA,IACT/B;AAAAA,IACAD,WAAWiC,KAAKC,KAAAA,kBAAAA,QAAkBC,MAAMpC,mCAASoC,MAAMnC,SAAS;AAAA,IAAE,GAC9DQ;AAAAA,IAAM4B,yCAETC,qCAAiB;AAAA,MAChBrC,WAAWiC,KAAAA,KAAKC,kBAAAA,QAAkBI,aAAavC,mCAASuC,WAAW;AAAA,MAAEF,UAEpE1B,SAASW,IAAI,CAACC,MAAMC,UAAU;AAC7B,cAAMgB,MAAO,OAAMhB;AACbiB,cAAAA,SAASjB,UAAUM,eAAeC,SAAS;AAEjD,8CACGW,YAAAA,eAAa;AAAA,UACZ1C,SAAS;AAAA,YACP2C,iBAAiBT,KAAAA,KACfC,kBAAAA,QAAkBQ,iBAClB3C,mCAAS2C,eACX;AAAA,YACAC,oBAAoBV,KAAAA,KAClBC,kBAAAA,QAAkBS,oBAClB5C,mCAAS4C,kBACX;AAAA,UACF;AAAA,UAEAC,MAAMJ;AAAAA,UAAOJ,UAEXS,MAAevB,eAAAA,IAAI,KAAKA,QACvBkB,yCACEM,oCAAgB;AAAA,YACf9C,WAAWiC,KAAAA,KACTC,kBAAAA,QAAkBa,aAClBhD,mCAASgD,WACX;AAAA,YACAC,SAAQ;AAAA,YAAMZ,UAEba,MAAAA,gBAAgB3B,KAAKG,KAAK;AAAA,UAAA,CACX,KAElByB,2BAAAA,IAACC,aAAM;AAAA,YACL7B;AAAAA,YACAvB,SAAS;AAAA,cACPqD,GAAGnB,KAAAA,KAAKC,kBAAAA,QAAkBkB,GAAGrD,mCAASqD,CAAC;AAAA,cACvCC,MAAMpB,KAAAA,KAAKC,kBAAAA,QAAkBmB,MAAMtD,mCAASsD,IAAI;AAAA,YAClD;AAAA,YACA/C;AAAAA,YACAD;AAAAA,UAAAA,CACD;AAAA,WAvBAkC,GAyBQ;AAAA,MAAA,CAElB;AAAA,IAAA,CACgB;AAAA,EAAA,CACT;AAEhB;;"}
+{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement, MouseEvent } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components/DropDownMenu\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvPathElement } from \"./PathElement\";\nimport { HvPage } from \"./Page\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component,\n    dropDownMenuProps,\n    ...others\n  } = useDefaultProps(\"HvBreadCrumb\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (!isNil(url)) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      })\n    );\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps\n        )\n      : listPath;\n\n  return (\n    <nav id={id} className={cx(classes.root, className)} {...others}>\n      <ol className={classes.orderedList}>\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: classes.centerContainer,\n                separatorContainer: classes.separatorContainer,\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <HvTypography className={classes.currentPage} variant=\"body\">\n                    {removeExtension(elem.label)}\n                  </HvTypography>\n                )) || (\n                  <HvPage\n                    elem={elem}\n                    classes={{\n                      a: classes.a,\n                      link: classes.link,\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["HvBreadCrumb","props","classes","classesProp","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","useDefaultProps","cx","useClasses","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","root","children","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","last","isValidElement","HvTypography","currentPage","variant","removeExtension","_jsx","HvPage","a","link"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAY,CAAE;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBZ,KAAK;AAEnC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWZ,WAAW;AAE9C,QAAMa,iBAAiBT,cAAcA,aAAa,IAAI,IAAIA;AACtDU,MAAAA,WAAWX,UAAUY;AAGrB,MAAA,CAACC,eAAAA,QAAMX,GAAG,GAAG;AACfS,eAAW,CAAA;AAGLG,UAAAA,UAAUZ,IAAIa,MAAM,cAAc;AAGxC,UAAMC,mBAAmBd,IAAIe,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,WAAWI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG;AAAA,IAC3D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,MAAAA,gBACEjC,IACAY,UACAD,gBACAP,SACAE,iBACF,IACAM;AAEN,wCACE,OAAA;AAAA,IAAKZ;AAAAA,IAAQD,WAAWU,GAAGZ,QAAQqC,MAAMnC,SAAS;AAAA,IAAE,GAAKQ;AAAAA,IAAM4B,yCAC7D,MAAA;AAAA,MAAIpC,WAAWF,QAAQuC;AAAAA,MAAYD,UAChCvB,SAASW,IAAI,CAACC,MAAMC,UAAU;AAC7B,cAAMY,MAAO,OAAMZ;AACba,cAAAA,SAASb,UAAUM,eAAeC,SAAS;AAEjD,8CACGO,YAAAA,eAAa;AAAA,UACZ1C,SAAS;AAAA,YACP2C,iBAAiB3C,QAAQ2C;AAAAA,YACzBC,oBAAoB5C,QAAQ4C;AAAAA,UAC9B;AAAA,UAEAC,MAAMJ;AAAAA,UAAOH,UAEXQ,MAAenB,eAAAA,IAAI,KAAKA,QACvBc,yCACEM,yBAAY;AAAA,YAAC7C,WAAWF,QAAQgD;AAAAA,YAAaC,SAAQ;AAAA,YAAMX,UACzDY,MAAAA,gBAAgBvB,KAAKG,KAAK;AAAA,UAAA,CACf,KAEdqB,2BAAAA,IAACC,aAAM;AAAA,YACLzB;AAAAA,YACA3B,SAAS;AAAA,cACPqD,GAAGrD,QAAQqD;AAAAA,cACXC,MAAMtD,QAAQsD;AAAAA,YAChB;AAAA,YACA9C;AAAAA,YACAD;AAAAA,UAAAA,CACD;AAAA,WAjBAiC,GAmBQ;AAAA,MAAA,CAElB;AAAA,IAAA,CACC;AAAA,EAAA,CACD;AAET;;;"}

package/dist/cjs/components/BreadCrumb/BreadCrumb.styles.cjs

@@ -1,53 +1,29 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const React = require("react");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Typography = require("../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("nav", process.env.NODE_ENV === "production" ? {
-  target: "e17idydo2"
-} : {
-  target: "e17idydo2",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "okudj8",
-  styles: "display:flex;align-items:center;z-index:0"
-} : {
-  name: "okudj8",
-  styles: "display:flex;align-items:center;z-index:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnJlYWRDcnVtYi9CcmVhZENydW1iLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnJlYWRDcnVtYi9CcmVhZENydW1iLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBSZWYsIGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5LCBIdlR5cG9ncmFwaHlQcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJuYXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgekluZGV4OiAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRPcmRlcmVkTGlzdCA9IHN0eWxlZChcIm9sXCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIHBhZGRpbmdMZWZ0OiAwLFxuICBtYXJnaW5MZWZ0OiBgLSR7dGhlbWUuc3BhY2UueHN9YCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHlwb2dyYXBoeSA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2VHlwb2dyYXBoeVByb3BzLCByZWY/OiBSZWY8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdlR5cG9ncmFwaHkgey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogYDhweCAke3RoZW1lLnNwYWNlLnhzfWAsXG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvBreadCrumb", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    zIndex: 0
+  },
+  link: {},
+  orderedList: {
+    display: "flex",
+    paddingLeft: 0,
+    marginLeft: `-${uikitStyles.theme.space.xs}`
+  },
+  currentPage: {
+    padding: `8px ${uikitStyles.theme.space.xs}`
+  },
+  centerContainer: {},
+  separatorContainer: {},
+  a: {}
 });
-const StyledOrderedList = /* @__PURE__ */ _styled__default.default("ol", process.env.NODE_ENV === "production" ? {
-  target: "e17idydo1"
-} : {
-  target: "e17idydo1",
-  label: "StyledOrderedList"
-})({
-  display: "flex",
-  paddingLeft: 0,
-  marginLeft: `-${uikitStyles.theme.space.xs}`
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnJlYWRDcnVtYi9CcmVhZENydW1iLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY2lDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnJlYWRDcnVtYi9CcmVhZENydW1iLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBSZWYsIGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5LCBIdlR5cG9ncmFwaHlQcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJuYXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgekluZGV4OiAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRPcmRlcmVkTGlzdCA9IHN0eWxlZChcIm9sXCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIHBhZGRpbmdMZWZ0OiAwLFxuICBtYXJnaW5MZWZ0OiBgLSR7dGhlbWUuc3BhY2UueHN9YCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHlwb2dyYXBoeSA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2VHlwb2dyYXBoeVByb3BzLCByZWY/OiBSZWY8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdlR5cG9ncmFwaHkgey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogYDhweCAke3RoZW1lLnNwYWNlLnhzfWAsXG59KTtcbiJdfQ== */");
-const StyledTypography = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-    ...props,
-    ref
-  });
-}), process.env.NODE_ENV === "production" ? {
-  target: "e17idydo0"
-} : {
-  target: "e17idydo0",
-  label: "StyledTypography"
-})({
-  padding: `8px ${uikitStyles.theme.space.xs}`
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnJlYWRDcnVtYi9CcmVhZENydW1iLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JnQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0JyZWFkQ3J1bWIvQnJlYWRDcnVtYi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgUmVmLCBmb3J3YXJkUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSwgSHZUeXBvZ3JhcGh5UHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwibmF2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIHpJbmRleDogMCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkT3JkZXJlZExpc3QgPSBzdHlsZWQoXCJvbFwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBwYWRkaW5nTGVmdDogMCxcbiAgbWFyZ2luTGVmdDogYC0ke3RoZW1lLnNwYWNlLnhzfWAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFR5cG9ncmFwaHkgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdlR5cG9ncmFwaHlQcm9wcywgcmVmPzogUmVmPEhUTUxFbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZUeXBvZ3JhcGh5IHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIHBhZGRpbmc6IGA4cHggJHt0aGVtZS5zcGFjZS54c31gLFxufSk7XG4iXX0= */");
-exports.StyledOrderedList = StyledOrderedList;
-exports.StyledRoot = StyledRoot;
-exports.StyledTypography = StyledTypography;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=BreadCrumb.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BreadCrumb.styles.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { Ref, forwardRef } from \"react\";\n\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\n\nexport const StyledRoot = styled(\"nav\")({\n  display: \"flex\",\n  alignItems: \"center\",\n  zIndex: 0,\n});\n\nexport const StyledOrderedList = styled(\"ol\")({\n  display: \"flex\",\n  paddingLeft: 0,\n  marginLeft: `-${theme.space.xs}`,\n});\n\nexport const StyledTypography = styled(\n  forwardRef((props: HvTypographyProps, ref?: Ref<HTMLElement>) => {\n    return <HvTypography {...props} ref={ref} />;\n  })\n)({\n  padding: `8px ${theme.space.xs}`,\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledOrderedList","display","paddingLeft","marginLeft","theme","space","xs","StyledTypography","forwardRef","props","ref","HvTypography","padding"],"mappings":";;;;;;;;;;;;AAQO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAItC;AAEM,MAAMC,oBAA2BX,iCAAA,QAAA,MAAIC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC5CO,SAAS;AAAA,EACTC,aAAa;AAAA,EACbC,YAAa,IAAGC,YAAAA,MAAMC,MAAMC;AAC9B,GAAChB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q4CAAA;AAEK,MAAMe,mBAAmBlB,iCAAAA,QAC9BmB,MAAAA,WAAW,CAACC,OAA0BC,QAA2B;AAC/D,wCAAQC,WAAAA,cAAY;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAW;AAC7C,CAAC,GAACpB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CACJ,EAAE;AAAA,EACAkB,SAAU,OAAMR,YAAAA,MAAMC,MAAMC;AAC9B,GAAChB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q4CAAA;;;;"}
+{"version":3,"file":"BreadCrumb.styles.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBreadCrumb\", {\n  root: { display: \"flex\", alignItems: \"center\", zIndex: 0 },\n  link: {},\n  orderedList: {\n    display: \"flex\",\n    paddingLeft: 0,\n    marginLeft: `-${theme.space.xs}`,\n  },\n  currentPage: { padding: `8px ${theme.space.xs}` },\n  centerContainer: {},\n  separatorContainer: {},\n  a: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","zIndex","link","orderedList","paddingLeft","marginLeft","theme","space","xs","currentPage","padding","centerContainer","separatorContainer","a"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,IAAUC,QAAQ;AAAA,EAAE;AAAA,EACzDC,MAAM,CAAC;AAAA,EACPC,aAAa;AAAA,IACXJ,SAAS;AAAA,IACTK,aAAa;AAAA,IACbC,YAAa,IAAGC,YAAAA,MAAMC,MAAMC;AAAAA,EAC9B;AAAA,EACAC,aAAa;AAAA,IAAEC,SAAU,OAAMJ,YAAAA,MAAMC,MAAMC;AAAAA,EAAK;AAAA,EAChDG,iBAAiB,CAAC;AAAA,EAClBC,oBAAoB,CAAC;AAAA,EACrBC,GAAG,CAAC;AACN,CAAC;;;"}

package/dist/cjs/components/BreadCrumb/PathElement/PathElement.cjs

@@ -1,22 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const clsx = require("clsx");
 const PathElement_styles = require("./PathElement.styles.cjs");
-const pathElementClasses = require("./pathElementClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvPathElement = ({
-  classes,
+  classes: classesProp,
   last = false,
   children
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(PathElement_styles.StyledLi, {
-    className: clsx.clsx(pathElementClasses.default.centerContainer, classes == null ? void 0 : classes.centerContainer),
+  const {
+    classes
+  } = PathElement_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", {
+    className: classes.centerContainer,
     children: [children, !last && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {
-      className: clsx.clsx(pathElementClasses.default.separatorContainer, classes == null ? void 0 : classes.separatorContainer),
+      className: classes.separatorContainer,
       color: "secondary_60"
     })]
   });
 };
+exports.pathElementClasses = PathElement_styles.staticClasses;
 exports.HvPathElement = HvPathElement;
 //# sourceMappingURL=PathElement.cjs.map

package/dist/cjs/components/BreadCrumb/PathElement/PathElement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PathElement.cjs","sources":["../../../../../src/components/BreadCrumb/PathElement/PathElement.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport { StyledLi } from \"./PathElement.styles\";\nimport pathElementClasses, { HvPathElementClasses } from \"./pathElementClasses\";\n\nexport interface HvPathElementProps {\n  last?: boolean;\n  classes?: HvPathElementClasses;\n  children: React.ReactElement;\n}\n\nexport const HvPathElement = ({\n  classes,\n  last = false,\n  children,\n}: HvPathElementProps) => {\n  return (\n    <StyledLi\n      className={clsx(\n        pathElementClasses.centerContainer,\n        classes?.centerContainer\n      )}\n    >\n      {children}\n      {!last && (\n        <DropRightXS\n          className={clsx(\n            pathElementClasses.separatorContainer,\n            classes?.separatorContainer\n          )}\n          color=\"secondary_60\"\n        />\n      )}\n    </StyledLi>\n  );\n};\n"],"names":["HvPathElement","classes","last","children","StyledLi","className","clsx","pathElementClasses","centerContainer","DropRightXS","separatorContainer","color"],"mappings":";;;;;;;AAWO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACkB,MAAM;AACxB,yCACGC,mBAAAA,UAAQ;AAAA,IACPC,WAAWC,KAAAA,KACTC,mBAAAA,QAAmBC,iBACnBP,mCAASO,eACX;AAAA,IAAEL,UAAA,CAEDA,UACA,CAACD,uCACCO,gBAAAA,aAAW;AAAA,MACVJ,WAAWC,KAAAA,KACTC,mBAAAA,QAAmBG,oBACnBT,mCAASS,kBACX;AAAA,MACAC,OAAM;AAAA,IAAA,CACP,CACF;AAAA,EAAA,CACO;AAEd;;"}
+{"version":3,"file":"PathElement.cjs","sources":["../../../../../src/components/BreadCrumb/PathElement/PathElement.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./PathElement.styles\";\n\nexport { staticClasses as pathElementClasses };\n\nexport type HvPathElementClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPathElementProps {\n  last?: boolean;\n  classes?: HvPathElementClasses;\n  children: React.ReactElement;\n}\n\nexport const HvPathElement = ({\n  classes: classesProp,\n  last = false,\n  children,\n}: HvPathElementProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <li className={classes.centerContainer}>\n      {children}\n      {!last && (\n        <DropRightXS\n          className={classes.separatorContainer}\n          color=\"secondary_60\"\n        />\n      )}\n    </li>\n  );\n};\n"],"names":["HvPathElement","classes","classesProp","last","children","useClasses","className","centerContainer","DropRightXS","separatorContainer","color"],"mappings":";;;;;AAgBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,SAASC;AAAAA,EACTC,OAAO;AAAA,EACPC;AACkB,MAAM;AAClB,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,mBAAAA,WAAWH,WAAW;AAE1C,yCACE,MAAA;AAAA,IAAII,WAAWL,QAAQM;AAAAA,IAAgBH,UAAA,CACpCA,UACA,CAACD,uCACCK,gBAAAA,aAAW;AAAA,MACVF,WAAWL,QAAQQ;AAAAA,MACnBC,OAAM;AAAA,IAAA,CACP,CACF;AAAA,EAAA,CACC;AAER;;;"}

package/dist/cjs/components/BreadCrumb/PathElement/PathElement.styles.cjs

@@ -1,24 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledLi = /* @__PURE__ */ _styled__default.default("li", process.env.NODE_ENV === "production" ? {
-  target: "e14mbcex0"
-} : {
-  target: "e14mbcex0",
-  label: "StyledLi"
-})(process.env.NODE_ENV === "production" ? {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center"
-} : {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnJlYWRDcnVtYi9QYXRoRWxlbWVudC9QYXRoRWxlbWVudC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV3QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0JyZWFkQ3J1bWIvUGF0aEVsZW1lbnQvUGF0aEVsZW1lbnQuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGkgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvPathElement", {
+  centerContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  separatorContainer: {}
 });
-exports.StyledLi = StyledLi;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=PathElement.styles.cjs.map

package/dist/cjs/components/BreadCrumb/PathElement/PathElement.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PathElement.styles.cjs","sources":["../../../../../src/components/BreadCrumb/PathElement/PathElement.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const StyledLi = styled(\"li\")({\n  display: \"flex\",\n  alignItems: \"center\",\n});\n"],"names":["StyledLi","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;;;;AAEO,MAAMA,WAAkBC,iCAAA,QAAA,MAAIC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGnC;;"}
+{"version":3,"file":"PathElement.styles.cjs","sources":["../../../../../src/components/BreadCrumb/PathElement/PathElement.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPathElement\", {\n  centerContainer: { display: \"flex\", alignItems: \"center\" },\n  separatorContainer: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","centerContainer","display","alignItems","separatorContainer"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,iBAAiB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EACzDC,oBAAoB,CAAC;AACvB,CAAC;;;"}