@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

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

@@ -1,109 +1,40 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../utils/transientOptions.js";
-import { hexToRgbA } from "../../utils/hexToRgbA.js";
-import bulkActionsClasses from "./bulkActionsClasses.js";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-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("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1nka4cc3"
-}, transientOptions) : _extends({}, {
-  target: "e1nka4cc3",
-  label: "StyledRoot"
-}, transientOptions))(({
-  $isSemantic,
-  $baseColor
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  border: theme.bulkActions.border,
-  backgroundColor: theme.bulkActions.backgroundColor,
-  padding: theme.bulkActions.padding,
-  marginBottom: theme.space.xs,
-  ...$isSemantic && {
-    backgroundColor: theme.bulkActions.anySelectedBackgroundColor,
-    [`& .${bulkActionsClasses.selectAll} div`]: {
-      color: theme.colors.base_dark,
-      "&:hover:not(:disabled)": {
-        backgroundColor: hexToRgbA($baseColor, 0.3)
-      },
-      "& *": {
-        color: theme.colors.base_dark,
-        backgroundColor: "transparent"
-      }
-    },
-    [`& .${bulkActionsClasses.selectAll}:focus-within div`]: {
-      backgroundColor: hexToRgbA($baseColor, 0.3)
-    },
-    // IE fallback code (using focus-within-polyfill)
-    [`& .${bulkActionsClasses.selectAll}.focus-within div`]: {
-      backgroundColor: hexToRgbA($baseColor, 0.3)
-    }
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvBulkActions", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    border: theme.bulkActions.border,
+    backgroundColor: theme.bulkActions.backgroundColor,
+    padding: theme.bulkActions.padding,
+    marginBottom: theme.space.xs
+  },
+  semantic: {
+    backgroundColor: theme.bulkActions.anySelectedBackgroundColor
+  },
+  actions: {
+    display: "inline-flex",
+    marginLeft: "auto"
+  },
+  selectAllContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  selectAll: {},
+  selectAllPages: {},
+  divider: {
+    display: theme.bulkActions.separatorDisplay,
+    backgroundColor: theme.colors.atmo4,
+    width: "1px",
+    height: "32px",
+    marginLeft: theme.space.sm
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnVsa0FjdGlvbnMvQnVsa0FjdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9CdWxrQWN0aW9ucy9CdWxrQWN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBoZXhUb1JnYkEgfSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQge1xuICBIdkFjdGlvbnNHZW5lcmljLFxuICBIdkFjdGlvbnNHZW5lcmljUHJvcHMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0FjdGlvbnNHZW5lcmljXCI7XG5cbmltcG9ydCBidWxrQWN0aW9uc0NsYXNzZXMgZnJvbSBcIi4vYnVsa0FjdGlvbnNDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKFxuICAoe1xuICAgICRpc1NlbWFudGljLFxuICAgICRiYXNlQ29sb3IsXG4gIH06IHtcbiAgICAkaXNTZW1hbnRpYzogYm9vbGVhbjtcbiAgICAkYmFzZUNvbG9yOiBzdHJpbmc7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBib3JkZXI6IHRoZW1lLmJ1bGtBY3Rpb25zLmJvcmRlcixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJ1bGtBY3Rpb25zLmJhY2tncm91bmRDb2xvcixcbiAgICBwYWRkaW5nOiB0aGVtZS5idWxrQWN0aW9ucy5wYWRkaW5nLFxuICAgIG1hcmdpbkJvdHRvbTogdGhlbWUuc3BhY2UueHMsXG5cbiAgICAuLi4oJGlzU2VtYW50aWMgJiYge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5idWxrQWN0aW9ucy5hbnlTZWxlY3RlZEJhY2tncm91bmRDb2xvcixcblxuICAgICAgW2AmIC4ke2J1bGtBY3Rpb25zQ2xhc3Nlcy5zZWxlY3RBbGx9IGRpdmBdOiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYmFzZV9kYXJrLFxuXG4gICAgICAgIFwiJjpob3Zlcjpub3QoOmRpc2FibGVkKVwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBoZXhUb1JnYkEoJGJhc2VDb2xvciwgMC4zKSxcbiAgICAgICAgfSxcblxuICAgICAgICBcIiYgKlwiOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlX2RhcmssXG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuXG4gICAgICBbYCYgLiR7YnVsa0FjdGlvbnNDbGFzc2VzLnNlbGVjdEFsbH06Zm9jdXMtd2l0aGluIGRpdmBdOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogaGV4VG9SZ2JBKCRiYXNlQ29sb3IsIDAuMyksXG4gICAgICB9LFxuXG4gICAgICAvLyBJRSBmYWxsYmFjayBjb2RlICh1c2luZyBmb2N1cy13aXRoaW4tcG9seWZpbGwpXG4gICAgICBbYCYgLiR7YnVsa0FjdGlvbnNDbGFzc2VzLnNlbGVjdEFsbH0uZm9jdXMtd2l0aGluIGRpdmBdOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogaGV4VG9SZ2JBKCRiYXNlQ29sb3IsIDAuMyksXG4gICAgICB9LFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdEFsbENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHZW5lcmljQWN0aW9ucyA9IHN0eWxlZCgocHJvcHM6IEh2QWN0aW9uc0dlbmVyaWNQcm9wcykgPT4gKFxuICA8SHZBY3Rpb25zR2VuZXJpYyB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZERpdmlkZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiB0aGVtZS5idWxrQWN0aW9ucy5zZXBhcmF0b3JEaXNwbGF5LFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNCxcbiAgd2lkdGg6IFwiMXB4XCIsXG4gIGhlaWdodDogXCIzMnB4XCIsXG4gIG1hcmdpbkxlZnQ6IHRoZW1lLnNwYWNlLnNtLFxufSk7XG4iXX0= */");
-const StyledSelectAllContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1nka4cc2"
-} : {
-  target: "e1nka4cc2",
-  label: "StyledSelectAllContainer"
-})(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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnVsa0FjdGlvbnMvQnVsa0FjdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRHdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnVsa0FjdGlvbnMvQnVsa0FjdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgaGV4VG9SZ2JBIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHtcbiAgSHZBY3Rpb25zR2VuZXJpYyxcbiAgSHZBY3Rpb25zR2VuZXJpY1Byb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9BY3Rpb25zR2VuZXJpY1wiO1xuXG5pbXBvcnQgYnVsa0FjdGlvbnNDbGFzc2VzIGZyb20gXCIuL2J1bGtBY3Rpb25zQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkaXNTZW1hbnRpYyxcbiAgICAkYmFzZUNvbG9yLFxuICB9OiB7XG4gICAgJGlzU2VtYW50aWM6IGJvb2xlYW47XG4gICAgJGJhc2VDb2xvcjogc3RyaW5nO1xuICB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgYm9yZGVyOiB0aGVtZS5idWxrQWN0aW9ucy5ib3JkZXIsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5idWxrQWN0aW9ucy5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgcGFkZGluZzogdGhlbWUuYnVsa0FjdGlvbnMucGFkZGluZyxcbiAgICBtYXJnaW5Cb3R0b206IHRoZW1lLnNwYWNlLnhzLFxuXG4gICAgLi4uKCRpc1NlbWFudGljICYmIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYnVsa0FjdGlvbnMuYW55U2VsZWN0ZWRCYWNrZ3JvdW5kQ29sb3IsXG5cbiAgICAgIFtgJiAuJHtidWxrQWN0aW9uc0NsYXNzZXMuc2VsZWN0QWxsfSBkaXZgXToge1xuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLmJhc2VfZGFyayxcblxuICAgICAgICBcIiY6aG92ZXI6bm90KDpkaXNhYmxlZClcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogaGV4VG9SZ2JBKCRiYXNlQ29sb3IsIDAuMyksXG4gICAgICAgIH0sXG5cbiAgICAgICAgXCImICpcIjoge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYmFzZV9kYXJrLFxuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICB9LFxuICAgICAgfSxcblxuICAgICAgW2AmIC4ke2J1bGtBY3Rpb25zQ2xhc3Nlcy5zZWxlY3RBbGx9OmZvY3VzLXdpdGhpbiBkaXZgXToge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGhleFRvUmdiQSgkYmFzZUNvbG9yLCAwLjMpLFxuICAgICAgfSxcblxuICAgICAgLy8gSUUgZmFsbGJhY2sgY29kZSAodXNpbmcgZm9jdXMtd2l0aGluLXBvbHlmaWxsKVxuICAgICAgW2AmIC4ke2J1bGtBY3Rpb25zQ2xhc3Nlcy5zZWxlY3RBbGx9LmZvY3VzLXdpdGhpbiBkaXZgXToge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGhleFRvUmdiQSgkYmFzZUNvbG9yLCAwLjMpLFxuICAgICAgfSxcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTZWxlY3RBbGxDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkR2VuZXJpY0FjdGlvbnMgPSBzdHlsZWQoKHByb3BzOiBIdkFjdGlvbnNHZW5lcmljUHJvcHMpID0+IChcbiAgPEh2QWN0aW9uc0dlbmVyaWMgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWREaXZpZGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogdGhlbWUuYnVsa0FjdGlvbnMuc2VwYXJhdG9yRGlzcGxheSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzQsXG4gIHdpZHRoOiBcIjFweFwiLFxuICBoZWlnaHQ6IFwiMzJweFwiLFxuICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS5zbSxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const StyledGenericActions = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvActionsGeneric, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1nka4cc1"
-} : {
-  target: "e1nka4cc1",
-  label: "StyledGenericActions"
-})(process.env.NODE_ENV === "production" ? {
-  name: "o2lcn2",
-  styles: "display:inline-flex;margin-left:auto"
-} : {
-  name: "o2lcn2",
-  styles: "display:inline-flex;margin-left:auto",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnVsa0FjdGlvbnMvQnVsa0FjdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRW9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnVsa0FjdGlvbnMvQnVsa0FjdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgaGV4VG9SZ2JBIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHtcbiAgSHZBY3Rpb25zR2VuZXJpYyxcbiAgSHZBY3Rpb25zR2VuZXJpY1Byb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9BY3Rpb25zR2VuZXJpY1wiO1xuXG5pbXBvcnQgYnVsa0FjdGlvbnNDbGFzc2VzIGZyb20gXCIuL2J1bGtBY3Rpb25zQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkaXNTZW1hbnRpYyxcbiAgICAkYmFzZUNvbG9yLFxuICB9OiB7XG4gICAgJGlzU2VtYW50aWM6IGJvb2xlYW47XG4gICAgJGJhc2VDb2xvcjogc3RyaW5nO1xuICB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgYm9yZGVyOiB0aGVtZS5idWxrQWN0aW9ucy5ib3JkZXIsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5idWxrQWN0aW9ucy5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgcGFkZGluZzogdGhlbWUuYnVsa0FjdGlvbnMucGFkZGluZyxcbiAgICBtYXJnaW5Cb3R0b206IHRoZW1lLnNwYWNlLnhzLFxuXG4gICAgLi4uKCRpc1NlbWFudGljICYmIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYnVsa0FjdGlvbnMuYW55U2VsZWN0ZWRCYWNrZ3JvdW5kQ29sb3IsXG5cbiAgICAgIFtgJiAuJHtidWxrQWN0aW9uc0NsYXNzZXMuc2VsZWN0QWxsfSBkaXZgXToge1xuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLmJhc2VfZGFyayxcblxuICAgICAgICBcIiY6aG92ZXI6bm90KDpkaXNhYmxlZClcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogaGV4VG9SZ2JBKCRiYXNlQ29sb3IsIDAuMyksXG4gICAgICAgIH0sXG5cbiAgICAgICAgXCImICpcIjoge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYmFzZV9kYXJrLFxuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICB9LFxuICAgICAgfSxcblxuICAgICAgW2AmIC4ke2J1bGtBY3Rpb25zQ2xhc3Nlcy5zZWxlY3RBbGx9OmZvY3VzLXdpdGhpbiBkaXZgXToge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGhleFRvUmdiQSgkYmFzZUNvbG9yLCAwLjMpLFxuICAgICAgfSxcblxuICAgICAgLy8gSUUgZmFsbGJhY2sgY29kZSAodXNpbmcgZm9jdXMtd2l0aGluLXBvbHlmaWxsKVxuICAgICAgW2AmIC4ke2J1bGtBY3Rpb25zQ2xhc3Nlcy5zZWxlY3RBbGx9LmZvY3VzLXdpdGhpbiBkaXZgXToge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGhleFRvUmdiQSgkYmFzZUNvbG9yLCAwLjMpLFxuICAgICAgfSxcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTZWxlY3RBbGxDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkR2VuZXJpY0FjdGlvbnMgPSBzdHlsZWQoKHByb3BzOiBIdkFjdGlvbnNHZW5lcmljUHJvcHMpID0+IChcbiAgPEh2QWN0aW9uc0dlbmVyaWMgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWREaXZpZGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogdGhlbWUuYnVsa0FjdGlvbnMuc2VwYXJhdG9yRGlzcGxheSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzQsXG4gIHdpZHRoOiBcIjFweFwiLFxuICBoZWlnaHQ6IFwiMzJweFwiLFxuICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS5zbSxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledDivider = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1nka4cc0"
-} : {
-  target: "e1nka4cc0",
-  label: "StyledDivider"
-})({
-  display: theme.bulkActions.separatorDisplay,
-  backgroundColor: theme.colors.atmo4,
-  width: "1px",
-  height: "32px",
-  marginLeft: theme.space.sm
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnVsa0FjdGlvbnMvQnVsa0FjdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RTZCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQnVsa0FjdGlvbnMvQnVsa0FjdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgaGV4VG9SZ2JBIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHtcbiAgSHZBY3Rpb25zR2VuZXJpYyxcbiAgSHZBY3Rpb25zR2VuZXJpY1Byb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9BY3Rpb25zR2VuZXJpY1wiO1xuXG5pbXBvcnQgYnVsa0FjdGlvbnNDbGFzc2VzIGZyb20gXCIuL2J1bGtBY3Rpb25zQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkaXNTZW1hbnRpYyxcbiAgICAkYmFzZUNvbG9yLFxuICB9OiB7XG4gICAgJGlzU2VtYW50aWM6IGJvb2xlYW47XG4gICAgJGJhc2VDb2xvcjogc3RyaW5nO1xuICB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgYm9yZGVyOiB0aGVtZS5idWxrQWN0aW9ucy5ib3JkZXIsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5idWxrQWN0aW9ucy5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgcGFkZGluZzogdGhlbWUuYnVsa0FjdGlvbnMucGFkZGluZyxcbiAgICBtYXJnaW5Cb3R0b206IHRoZW1lLnNwYWNlLnhzLFxuXG4gICAgLi4uKCRpc1NlbWFudGljICYmIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYnVsa0FjdGlvbnMuYW55U2VsZWN0ZWRCYWNrZ3JvdW5kQ29sb3IsXG5cbiAgICAgIFtgJiAuJHtidWxrQWN0aW9uc0NsYXNzZXMuc2VsZWN0QWxsfSBkaXZgXToge1xuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLmJhc2VfZGFyayxcblxuICAgICAgICBcIiY6aG92ZXI6bm90KDpkaXNhYmxlZClcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogaGV4VG9SZ2JBKCRiYXNlQ29sb3IsIDAuMyksXG4gICAgICAgIH0sXG5cbiAgICAgICAgXCImICpcIjoge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYmFzZV9kYXJrLFxuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICB9LFxuICAgICAgfSxcblxuICAgICAgW2AmIC4ke2J1bGtBY3Rpb25zQ2xhc3Nlcy5zZWxlY3RBbGx9OmZvY3VzLXdpdGhpbiBkaXZgXToge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGhleFRvUmdiQSgkYmFzZUNvbG9yLCAwLjMpLFxuICAgICAgfSxcblxuICAgICAgLy8gSUUgZmFsbGJhY2sgY29kZSAodXNpbmcgZm9jdXMtd2l0aGluLXBvbHlmaWxsKVxuICAgICAgW2AmIC4ke2J1bGtBY3Rpb25zQ2xhc3Nlcy5zZWxlY3RBbGx9LmZvY3VzLXdpdGhpbiBkaXZgXToge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGhleFRvUmdiQSgkYmFzZUNvbG9yLCAwLjMpLFxuICAgICAgfSxcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTZWxlY3RBbGxDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkR2VuZXJpY0FjdGlvbnMgPSBzdHlsZWQoKHByb3BzOiBIdkFjdGlvbnNHZW5lcmljUHJvcHMpID0+IChcbiAgPEh2QWN0aW9uc0dlbmVyaWMgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWREaXZpZGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogdGhlbWUuYnVsa0FjdGlvbnMuc2VwYXJhdG9yRGlzcGxheSxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzQsXG4gIHdpZHRoOiBcIjFweFwiLFxuICBoZWlnaHQ6IFwiMzJweFwiLFxuICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS5zbSxcbn0pO1xuIl19 */");
 export {
-  StyledDivider,
-  StyledGenericActions,
-  StyledRoot,
-  StyledSelectAllContainer
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=BulkActions.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.styles.js","sources":["../../../../src/components/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport {\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\n\nimport bulkActionsClasses from \"./bulkActionsClasses\";\n\nexport const StyledRoot = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $isSemantic,\n    $baseColor,\n  }: {\n    $isSemantic: boolean;\n    $baseColor: string;\n  }) => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    border: theme.bulkActions.border,\n    backgroundColor: theme.bulkActions.backgroundColor,\n    padding: theme.bulkActions.padding,\n    marginBottom: theme.space.xs,\n\n    ...($isSemantic && {\n      backgroundColor: theme.bulkActions.anySelectedBackgroundColor,\n\n      [`& .${bulkActionsClasses.selectAll} div`]: {\n        color: theme.colors.base_dark,\n\n        \"&:hover:not(:disabled)\": {\n          backgroundColor: hexToRgbA($baseColor, 0.3),\n        },\n\n        \"& *\": {\n          color: theme.colors.base_dark,\n          backgroundColor: \"transparent\",\n        },\n      },\n\n      [`& .${bulkActionsClasses.selectAll}:focus-within div`]: {\n        backgroundColor: hexToRgbA($baseColor, 0.3),\n      },\n\n      // IE fallback code (using focus-within-polyfill)\n      [`& .${bulkActionsClasses.selectAll}.focus-within div`]: {\n        backgroundColor: hexToRgbA($baseColor, 0.3),\n      },\n    }),\n  })\n);\n\nexport const StyledSelectAllContainer = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n});\n\nexport const StyledGenericActions = styled((props: HvActionsGenericProps) => (\n  <HvActionsGeneric {...props} />\n))({\n  display: \"inline-flex\",\n  marginLeft: \"auto\",\n});\n\nexport const StyledDivider = styled(\"div\")({\n  display: theme.bulkActions.separatorDisplay,\n  backgroundColor: theme.colors.atmo4,\n  width: \"1px\",\n  height: \"32px\",\n  marginLeft: theme.space.sm,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$isSemantic","$baseColor","display","alignItems","border","theme","bulkActions","backgroundColor","padding","marginBottom","space","xs","anySelectedBackgroundColor","bulkActionsClasses","selectAll","color","colors","base_dark","hexToRgbA","StyledSelectAllContainer","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledGenericActions","_styled","props","HvActionsGeneric","StyledDivider","separatorDisplay","atmo4","width","height","marginLeft","sm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaaA,MAAAA,qCACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAIF,OAAO;AAAA,EACLC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZC,QAAQC,MAAMC,YAAYF;AAAAA,EAC1BG,iBAAiBF,MAAMC,YAAYC;AAAAA,EACnCC,SAASH,MAAMC,YAAYE;AAAAA,EAC3BC,cAAcJ,MAAMK,MAAMC;AAAAA,EAE1B,GAAIX,eAAe;AAAA,IACjBO,iBAAiBF,MAAMC,YAAYM;AAAAA,IAEnC,CAAE,MAAKC,mBAAmBC,eAAe,GAAG;AAAA,MAC1CC,OAAOV,MAAMW,OAAOC;AAAAA,MAEpB,0BAA0B;AAAA,QACxBV,iBAAiBW,UAAUjB,YAAY,GAAG;AAAA,MAC5C;AAAA,MAEA,OAAO;AAAA,QACLc,OAAOV,MAAMW,OAAOC;AAAAA,QACpBV,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,CAAE,MAAKM,mBAAmBC,4BAA4B,GAAG;AAAA,MACvDP,iBAAiBW,UAAUjB,YAAY,GAAG;AAAA,IAC5C;AAAA;AAAA,IAGA,CAAE,MAAKY,mBAAmBC,4BAA4B,GAAG;AAAA,MACvDP,iBAAiBW,UAAUjB,YAAY,GAAG;AAAA,IAC5C;AAAA,EACF;AACF,IAAER,QAAAC,IAAAC,8tGACJ;AAEO,MAAMwB,2BAAkC,wBAAA,OAAK1B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAACN,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAyB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGpD;AAEM,MAAMC,uBAAuBC,wBAAO,CAACC,8BACzCC,kBAAgB;AAAA,EAAA,GAAKD;AAAK,CAAG,GAC/BlC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAACN,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAyB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGD;AAEM,MAAMK,gBAAuB,wBAAA,OAAKpC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCG,SAASG,MAAMC,YAAYwB;AAAAA,EAC3BvB,iBAAiBF,MAAMW,OAAOe;AAAAA,EAC9BC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,YAAY7B,MAAMK,MAAMyB;AAC1B,GAAC1C,QAAAC,IAAAC,aAAC,eAAA,KAAA,6rGAAA;"}
+{"version":3,"file":"BulkActions.styles.js","sources":["../../../../src/components/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: theme.bulkActions.border,\n    backgroundColor: theme.bulkActions.backgroundColor,\n    padding: theme.bulkActions.padding,\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.bulkActions.anySelectedBackgroundColor,\n  },\n  actions: { display: \"inline-flex\", marginLeft: \"auto\" },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: theme.bulkActions.separatorDisplay,\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","border","theme","bulkActions","backgroundColor","padding","marginBottom","space","xs","semantic","anySelectedBackgroundColor","actions","marginLeft","selectAllContainer","selectAll","selectAllPages","divider","separatorDisplay","colors","atmo4","width","height","sm"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,QAAQC,MAAMC,YAAYF;AAAAA,IAC1BG,iBAAiBF,MAAMC,YAAYC;AAAAA,IACnCC,SAASH,MAAMC,YAAYE;AAAAA,IAC3BC,cAAcJ,MAAMK,MAAMC;AAAAA,EAC5B;AAAA,EACAC,UAAU;AAAA,IACRL,iBAAiBF,MAAMC,YAAYO;AAAAA,EACrC;AAAA,EACAC,SAAS;AAAA,IAAEZ,SAAS;AAAA,IAAea,YAAY;AAAA,EAAO;AAAA,EACtDC,oBAAoB;AAAA,IAAEd,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC5Dc,WAAW,CAAC;AAAA,EACZC,gBAAgB,CAAC;AAAA,EACjBC,SAAS;AAAA,IACPjB,SAASG,MAAMC,YAAYc;AAAAA,IAC3Bb,iBAAiBF,MAAMgB,OAAOC;AAAAA,IAC9BC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRT,YAAYV,MAAMK,MAAMe;AAAAA,EAC1B;AACF,CAAC;"}

package/dist/esm/components/Button/Button.js

@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
 import { useTheme } from "../../hooks/useTheme.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses, getVariantStyles, getSizeStyles, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
@@ -21,7 +22,7 @@ const HvButton = forwardRef((props, ref) => {
     id,
     classes: classesProp,
     children,
-    variant: variantProp = "primary",
+    variant: variantProp,
     disabled = false,
     className,
     startIcon,
@@ -32,7 +33,7 @@ const HvButton = forwardRef((props, ref) => {
     overrideIconColors = true,
     component: Component = "button",
     ...others
-  } = props;
+  } = useDefaultProps("HvButton", props);
   const {
     classes,
     css,
@@ -41,7 +42,7 @@ const HvButton = forwardRef((props, ref) => {
   const {
     activeTheme
   } = useTheme();
-  const variant = mapVariant(variantProp, activeTheme == null ? void 0 : activeTheme.name);
+  const variant = mapVariant(variantProp ?? (icon ? "secondaryGhost" : "primary"), activeTheme == null ? void 0 : activeTheme.name);
   return /* @__PURE__ */ jsxs(Component, {
     ref,
     type: "button",

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  getVariantStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      variant: variantProp = \"primary\",\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = props;\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    return (\n      <Component\n        ref={ref}\n        type=\"button\"\n        className={cx(\n          classes.root,\n          css(getVariantStyles(variant)),\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","css","cx","useClasses","activeTheme","useTheme","name","type","root","getVariantStyles","getSizeStyles","getRadiusStyles","getOverrideColors","tabIndex","_jsx"],"mappings":";;;;;AAsDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAETC,YAAAA,KACL,mBAAkBN,uCAAuCK,iBAC5D;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMO,WAEoBC,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAd,SAASe,cAAc;AAAA,IACvBC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EACDjB,IAAAA;AACE,QAAA;AAAA,IAAEG;AAAAA,IAASe;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWhB,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,MAAgBC,SAAS;AAEjC,QAAM/B,UAAUD,WAAWgB,aAAae,2CAAaE,IAAI;AAEzD,8BACGP,WAAS;AAAA,IACRf;AAAAA,IACAuB,MAAK;AAAA,IACLhB,WAAWW,GACThB,QAAQsB,MACRP,IAAIQ,iBAAiBnC,OAAO,CAAC,GAC7BqB,QAAQM,IAAIS,cAAcf,IAAI,CAAC,GAC/BC,UAAUK,IAAIU,gBAAgBf,MAAM,CAAC,GACrCC,sBAAsBI,IAAIW,kBAAkB,CAAC,GAC7C;AAAA,MACE,CAAC1B,QAAQQ,IAAI,GAAGA;AAAAA,MAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,OAEtBC,SACF;AAAA,IAAE,GACGD,YAAY;AAAA,MACfA,UAAU;AAAA,MACVuB,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB;AAAA,IAAC,GACGb;AAAAA,IAAMZ,UAAA,CAETI,aAAasB,oBAAA,QAAA;AAAA,MAAMvB,WAAWL,QAAQM;AAAAA,MAAUJ,UAAEI;AAAAA,IAAgB,CAAA,GAClEJ,UACAK,+BAAW,QAAA;AAAA,MAAMF,WAAWL,QAAQO;AAAAA,MAAQL,UAAEK;AAAAA,IAAAA,CAAc,CAAC;AAAA,EAAA,CACrD;AAEf,CACF;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  getVariantStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        type=\"button\"\n        className={cx(\n          classes.root,\n          css(getVariantStyles(variant)),\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","type","root","getVariantStyles","getSizeStyles","getRadiusStyles","getOverrideColors","tabIndex","_jsx"],"mappings":";;;;;;AAuDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAETC,YAAAA,KACL,mBAAkBN,uCAAuCK,iBAC5D;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMO,WAEoBC,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAd,SAASe;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS;AACjC,QAAMhC,UAAUD,WACdgB,gBAAgBK,OAAO,mBAAmB,YAC1CW,2CAAaE,IACf;AAEA,8BACGR,WAAS;AAAA,IACRf;AAAAA,IACAwB,MAAK;AAAA,IACLjB,WAAWY,GACTjB,QAAQuB,MACRP,IAAIQ,iBAAiBpC,OAAO,CAAC,GAC7BqB,QAAQO,IAAIS,cAAchB,IAAI,CAAC,GAC/BC,UAAUM,IAAIU,gBAAgBhB,MAAM,CAAC,GACrCC,sBAAsBK,IAAIW,kBAAkB,CAAC,GAC7C;AAAA,MACE,CAAC3B,QAAQQ,IAAI,GAAGA;AAAAA,MAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,OAEtBC,SACF;AAAA,IAAE,GACGD,YAAY;AAAA,MACfA,UAAU;AAAA,MACVwB,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB;AAAA,IAAC,GACGd;AAAAA,IAAMZ,UAAA,CAETI,aAAauB,oBAAA,QAAA;AAAA,MAAMxB,WAAWL,QAAQM;AAAAA,MAAUJ,UAAEI;AAAAA,IAAgB,CAAA,GAClEJ,UACAK,+BAAW,QAAA;AAAA,MAAMF,WAAWL,QAAQO;AAAAA,MAAQL,UAAEK;AAAAA,IAAAA,CAAc,CAAC;AAAA,EAAA,CACrD;AAEf,CACF;"}

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

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useContext } from "react";
 import { setId } from "../../utils/setId.js";
 import { isRange } from "./utils.js";
@@ -8,24 +9,25 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvFormElementContext } from "../Forms/FormElement/context/FormElementContext.js";
 import { HvFormElementValueContext } from "../Forms/FormElement/context/FormElementValueContext.js";
 import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
-const HvCalendar = ({
-  classes,
-  id,
-  locale = "en-US",
-  value,
-  visibleMonth,
-  visibleYear,
-  rightVisibleMonth,
-  rightVisibleYear,
-  minimumDate,
-  maximumDate,
-  startAdornment,
-  onChange,
-  onInputChange,
-  onVisibleDateChange,
-  invalidDateLabel,
-  ...others
-}) => {
+const HvCalendar = (props) => {
+  const {
+    classes,
+    id,
+    locale = "en-US",
+    value,
+    visibleMonth,
+    visibleYear,
+    rightVisibleMonth,
+    rightVisibleYear,
+    minimumDate,
+    maximumDate,
+    startAdornment,
+    onChange,
+    onInputChange,
+    onVisibleDateChange,
+    invalidDateLabel,
+    ...others
+  } = useDefaultProps("HvCalendar", props);
   const {
     elementId
   } = useContext(HvFormElementContext);

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport React, { useContext } from \"react\";\n\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n} from \"@core/components/Forms\";\n\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport calendarClasses, { HvCalendarClasses } from \"./calendarClasses\";\nimport { StyledRangeCalendarContainer, StyledRoot } from \"./Calendar.styles\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n\nexport const HvCalendar = ({\n  classes,\n  id,\n  locale = \"en-US\",\n  value,\n  visibleMonth,\n  visibleYear,\n  rightVisibleMonth,\n  rightVisibleYear,\n  minimumDate,\n  maximumDate,\n  startAdornment,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  invalidDateLabel,\n  ...others\n}: HvCalendarProps) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) =>\n        onInputChange && onInputChange(evt, date, \"left\")\n      }\n      onVisibleDateChange={onVisibleDateChange}\n      invalidDateLabel={invalidDateLabel}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <StyledRangeCalendarContainer\n      className={clsx(\n        calendarClasses.rangeCalendarContainer,\n        classes?.rangeCalendarContainer\n      )}\n    >\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"left\")\n        }\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"right\")\n        }\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n    </StyledRangeCalendarContainer>\n  );\n\n  return (\n    <StyledRoot className={clsx(calendarClasses.root, classes?.root)}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </StyledRoot>\n  );\n};\n"],"names":["HvCalendar","classes","id","locale","value","visibleMonth","visibleYear","rightVisibleMonth","rightVisibleYear","minimumDate","maximumDate","startAdornment","onChange","onInputChange","onVisibleDateChange","invalidDateLabel","others","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","localValue","localId","setId","rangeMode","isRange","rightCalendarId","clampedMonth","singleCalendar","HvSingleCalendar","evt","date","rangeCalendar","StyledRangeCalendarContainer","className","clsx","calendarClasses","rangeCalendarContainer","children","_jsx","event","action","index","showEndDate","StyledRoot","root"],"mappings":";;;;;;;;;;AA2GO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACY,MAAM;AACf,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAcC,WAAWC,oBAAoB;AAC/CC,QAAAA,eAAeF,WAAWG,yBAAyB;AACzD,QAAMC,aAAalB,SAASgB;AAC5B,QAAMG,UAAUrB,MAAMsB,MAAMP,WAAW,iBAAiB;AAClDQ,QAAAA,YAAYC,QAAQJ,UAAU;AAC9BK,QAAAA,kBAAkBH,MAAMD,SAAS,uBAAuB;AAC9D,QAAMK,eACJvB,gBAAgBA,eAAe,KAAK,IAAIA,eAAe,KAAK;AAExDwB,QAAAA,qCACHC,kBAAgB;AAAA,IACf5B,IAAIqB;AAAAA,IACJpB;AAAAA,IACAC,OAAOkB;AAAAA,IACPjB,cAAcuB;AAAAA,IACdtB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,eAAeA,CAACkB,KAAKC,SACnBnB,iBAAiBA,cAAckB,KAAKC,MAAM,MAAM;AAAA,IAElDlB;AAAAA,IACAC;AAAAA,IAAmC,GAC/BC;AAAAA,EAAAA,CACL;AAGGiB,QAAAA,qCACHC,8BAA4B;AAAA,IAC3BC,WAAWC,KACTC,gBAAgBC,wBAChBrC,mCAASqC,sBACX;AAAA,IAAEC,UAAA,CAEFC,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB5B,mCAAS4B,cACX;AAAA,MACA3B,IAAIqB;AAAAA,MACJpB;AAAAA,MACAC,OAAOkB;AAAAA,MACPjB,cAAcuB;AAAAA,MACdtB;AAAAA,MACAG;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACkB,KAAKC,SACnBnB,iBAAiBA,cAAckB,KAAKC,MAAM,MAAM;AAAA,MAElDlB,qBAAqBA,CAAC2B,OAAOC,QAAQC,UACnC7B,2DAAsB2B,OAAOC,QAAQC,OAAO;AAAA,MAE9C5B;AAAAA,MAAmC,GAC/BC;AAAAA,IAAAA,CACL,GAEDwB,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB5B,mCAAS4B,cACX;AAAA,MACA3B,IAAIyB;AAAAA,MACJxB;AAAAA,MACAC,OAAOkB;AAAAA,MACPjB,cAAcE;AAAAA,MACdD,aAAaE;AAAAA,MACbC;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACkB,KAAKC,SACnBnB,iBAAiBA,cAAckB,KAAKC,MAAM,OAAO;AAAA,MAEnDlB,qBAAqBA,CAAC2B,OAAOC,QAAQC,UAAU;AACvBF,mEAAAA,OAAOC,QAAQC,OAAO;AAAA,MAC9C;AAAA,MACAC,aAAW;AAAA,MACX7B;AAAAA,MAAmC,GAC/BC;AAAAA,IAAAA,CACL,CAAC;AAAA,EAAA,CAC0B;AAGhC,8BACG6B,YAAU;AAAA,IAACV,WAAWC,KAAKC,gBAAgBS,MAAM7C,mCAAS6C,IAAI;AAAA,IAAEP,WAC9D5B,gBACAc,YAAYQ,gBAAgBJ,cAAc;AAAA,EAAA,CACjC;AAEhB;"}
+{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport React, { useContext } from \"react\";\n\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n} from \"@core/components/Forms\";\n\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport calendarClasses, { HvCalendarClasses } from \"./calendarClasses\";\nimport { StyledRangeCalendarContainer, StyledRoot } from \"./Calendar.styles\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\"\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\"\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n  const {\n    classes,\n    id,\n    locale = \"en-US\",\n    value,\n    visibleMonth,\n    visibleYear,\n    rightVisibleMonth,\n    rightVisibleYear,\n    minimumDate,\n    maximumDate,\n    startAdornment,\n    onChange,\n    onInputChange,\n    onVisibleDateChange,\n    invalidDateLabel,\n    ...others\n  } = useDefaultProps(\"HvCalendar\", props);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) =>\n        onInputChange && onInputChange(evt, date, \"left\")\n      }\n      onVisibleDateChange={onVisibleDateChange}\n      invalidDateLabel={invalidDateLabel}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <StyledRangeCalendarContainer\n      className={clsx(\n        calendarClasses.rangeCalendarContainer,\n        classes?.rangeCalendarContainer\n      )}\n    >\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"left\")\n        }\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={clsx(\n          calendarClasses.singleCalendar,\n          classes?.singleCalendar\n        )}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"right\")\n        }\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n    </StyledRangeCalendarContainer>\n  );\n\n  return (\n    <StyledRoot className={clsx(calendarClasses.root, classes?.root)}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </StyledRoot>\n  );\n};\n"],"names":["HvCalendar","props","classes","id","locale","value","visibleMonth","visibleYear","rightVisibleMonth","rightVisibleYear","minimumDate","maximumDate","startAdornment","onChange","onInputChange","onVisibleDateChange","invalidDateLabel","others","useDefaultProps","elementId","useContext","HvFormElementContext","elementValue","HvFormElementValueContext","localValue","localId","setId","rangeMode","isRange","rightCalendarId","clampedMonth","singleCalendar","HvSingleCalendar","evt","date","rangeCalendar","StyledRangeCalendarContainer","className","clsx","calendarClasses","rangeCalendarContainer","children","_jsx","event","action","index","showEndDate","StyledRoot","root"],"mappings":";;;;;;;;;;;AA4GaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,cAAcjB,KAAK;AAEjC,QAAA;AAAA,IAAEkB;AAAAA,EAAAA,IAAcC,WAAWC,oBAAoB;AAC/CC,QAAAA,eAAeF,WAAWG,yBAAyB;AACzD,QAAMC,aAAanB,SAASiB;AAC5B,QAAMG,UAAUtB,MAAMuB,MAAMP,WAAW,iBAAiB;AAClDQ,QAAAA,YAAYC,QAAQJ,UAAU;AAC9BK,QAAAA,kBAAkBH,MAAMD,SAAS,uBAAuB;AAC9D,QAAMK,eACJxB,gBAAgBA,eAAe,KAAK,IAAIA,eAAe,KAAK;AAExDyB,QAAAA,qCACHC,kBAAgB;AAAA,IACf7B,IAAIsB;AAAAA,IACJrB;AAAAA,IACAC,OAAOmB;AAAAA,IACPlB,cAAcwB;AAAAA,IACdvB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,eAAeA,CAACmB,KAAKC,SACnBpB,iBAAiBA,cAAcmB,KAAKC,MAAM,MAAM;AAAA,IAElDnB;AAAAA,IACAC;AAAAA,IAAmC,GAC/BC;AAAAA,EAAAA,CACL;AAGGkB,QAAAA,qCACHC,8BAA4B;AAAA,IAC3BC,WAAWC,KACTC,gBAAgBC,wBAChBtC,mCAASsC,sBACX;AAAA,IAAEC,UAAA,CAEFC,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB7B,mCAAS6B,cACX;AAAA,MACA5B,IAAIsB;AAAAA,MACJrB;AAAAA,MACAC,OAAOmB;AAAAA,MACPlB,cAAcwB;AAAAA,MACdvB;AAAAA,MACAG;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACmB,KAAKC,SACnBpB,iBAAiBA,cAAcmB,KAAKC,MAAM,MAAM;AAAA,MAElDnB,qBAAqBA,CAAC4B,OAAOC,QAAQC,UACnC9B,2DAAsB4B,OAAOC,QAAQC,OAAO;AAAA,MAE9C7B;AAAAA,MAAmC,GAC/BC;AAAAA,IAAAA,CACL,GAEDyB,oBAACV,kBAAgB;AAAA,MACfK,WAAWC,KACTC,gBAAgBR,gBAChB7B,mCAAS6B,cACX;AAAA,MACA5B,IAAI0B;AAAAA,MACJzB;AAAAA,MACAC,OAAOmB;AAAAA,MACPlB,cAAcE;AAAAA,MACdD,aAAaE;AAAAA,MACbC;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC,eAAeA,CAACmB,KAAKC,SACnBpB,iBAAiBA,cAAcmB,KAAKC,MAAM,OAAO;AAAA,MAEnDnB,qBAAqBA,CAAC4B,OAAOC,QAAQC,UAAU;AACvBF,mEAAAA,OAAOC,QAAQC,OAAO;AAAA,MAC9C;AAAA,MACAC,aAAW;AAAA,MACX9B;AAAAA,MAAmC,GAC/BC;AAAAA,IAAAA,CACL,CAAC;AAAA,EAAA,CAC0B;AAGhC,8BACG8B,YAAU;AAAA,IAACV,WAAWC,KAAKC,gBAAgBS,MAAM9C,mCAAS8C,IAAI;AAAA,IAAEP,WAC9D7B,gBACAe,YAAYQ,gBAAgBJ,cAAc;AAAA,EAAA,CACjC;AAEhB;"}

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

@@ -1,19 +1,21 @@
 import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./Card.styles.js";
 import { staticClasses } from "./Card.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvBox } from "../Box/Box.js";
-const HvCard = ({
-  classes: classesProp,
-  className,
-  children,
-  icon,
-  selectable = false,
-  selected = false,
-  statusColor = "sema0",
-  bgcolor,
-  ...others
-}) => {
+const HvCard = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    icon,
+    selectable = false,
+    selected = false,
+    statusColor = "sema0",
+    bgcolor,
+    ...others
+  } = useDefaultProps("HvCard", props);
   const {
     classes,
     css,

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\";\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 = ({\n  classes: classesProp,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\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","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;AAyCO,MAAMA,SAASA,CAAC;AAAA,EACrBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACX,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AACnD,8BACGY,OAAK;AAAA,IACJ,iBAAeR,aAAaC,WAAWQ;AAAAA,IACvCZ,WAAWS,GACT,uBACAX,QAAQe,MACRL,IAAI;AAAA,MACFM,iBACGR,WAAWS,MAAMC,OAAOV,OAAO,KAAMS,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACDd,WACA;AAAA,MACE,CAACF,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,IAAAA,CAExB;AAAA,IAAE,GACEG;AAAAA,IAAMN,WAEViB,qBAAA,OAAA;AAAA,MAAKlB,WAAWF,QAAQqB;AAAAA,MAAkBlB,WACxCmB,oBAAA,OAAA;AAAA,QACEpB,WAAWS,GACTD,IAAI;AAAA,UACFa,QAAQjB,WAAW,IAAI;AAAA,UACvBU,iBACET,gBAAgB,UACZD,WACEW,MAAMC,OAAOM,YACbP,MAAMC,OAAOO,QACfR,MAAMC,OAAOX,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ0B,WACV;AAAA,MAAA,CACD,GACDJ,oBAAA,OAAA;AAAA,QAAKpB,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        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;"}

package/dist/esm/components/Carousel/Carousel.js

@@ -1,4 +1,5 @@
 import { useRef, useState, Children, useCallback, useEffect } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import useCarousel from "embla-carousel-react";
 import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import { useTheme } from "../../hooks/useTheme.js";
@@ -32,7 +33,7 @@ const HvCarousel = (props) => {
     renderThumbnail,
     onChange,
     ...others
-  } = props;
+  } = useDefaultProps("HvCarousel", props);
   const {
     activeTheme
   } = useTheme();
@@ -108,7 +109,6 @@ const HvCarousel = (props) => {
     })),
     children: [actionsProp, showFullscreen && /* @__PURE__ */ jsx(HvButton, {
       icon: true,
-      variant: "secondaryGhost",
       onClick: () => setIsFullscreen((curr) => !curr),
       className: classes.closeButton,
       children: isFullscreen ? /* @__PURE__ */ jsx(Close, {

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  controlsPosition?: \"top\" | \"bottom\";\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = props;\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? (\n            <Close aria-label=\"Close\" />\n          ) : (\n            <Fullscreen aria-label=\"Fullscreen\" />\n          )}\n        </HvButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondary\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondary\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","HvButton","icon","variant","onClick","curr","closeButton","_jsx","Close","Fullscreen","controls","HvCarouselControls","page","pages","canPrevious","onPreviousClick","onNextClick","thumbnails","HvCarouselThumbnails","ref","width","onThumbnailClick","evt","i","HvContainer","root","fullscreen","HvTypography","_jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","disabled","Backwards","iconSize","Forwards","style","slidesViewport","slidesContainer"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  controlsPosition?: \"top\" | \"bottom\";\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvButton\n          icon\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? (\n            <Close aria-label=\"Close\" />\n          ) : (\n            <Fullscreen aria-label=\"Fullscreen\" />\n          )}\n        </HvButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondary\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondary\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","HvButton","icon","onClick","curr","closeButton","_jsx","Close","Fullscreen","controls","HvCarouselControls","page","pages","canPrevious","onPreviousClick","onNextClick","thumbnails","HvCarouselThumbnails","ref","width","onThumbnailClick","evt","i","HvContainer","root","fullscreen","HvTypography","variant","_jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","disabled","Backwards","iconSize","Forwards","style","slidesViewport","slidesContainer"],"mappings":"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"}

package/dist/esm/components/Carousel/CarouselControls.js

@@ -1,3 +1,4 @@
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./Carousel.styles.js";
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
@@ -14,7 +15,7 @@ const HvCarouselControls = (props) => {
     actions,
     onPreviousClick,
     onNextClick
-  } = props;
+  } = useDefaultProps("HvCarouselControls", props);
   const {
     classes,
     cx
@@ -34,7 +35,6 @@ const HvCarouselControls = (props) => {
       children: [/* @__PURE__ */ jsx(HvButton, {
         icon: true,
         disabled: !canPrevious,
-        variant: "secondaryGhost",
         "aria-label": "Backwards",
         onClick: onPreviousClick,
         children: /* @__PURE__ */ jsx(Backwards, {
@@ -46,7 +46,6 @@ const HvCarouselControls = (props) => {
       }), /* @__PURE__ */ jsx(HvButton, {
         icon: true,
         disabled: !canNext,
-        variant: "secondaryGhost",
         "aria-label": "Forwards",
         onClick: onNextClick,
         children: /* @__PURE__ */ jsx(Forwards, {

package/dist/esm/components/Carousel/CarouselControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselControls.js","sources":["../../../../src/components/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\n  actions?: ReactNode;\n  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;\n  onNextClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showDots,\n    page,\n    pages,\n    canPrevious,\n    canNext,\n    actions,\n    onPreviousClick,\n    onNextClick,\n  } = props;\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            variant=\"secondaryGhost\"\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            variant=\"secondaryGhost\"\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":["HvCarouselControls","props","classes","classesProp","className","showDots","page","pages","canPrevious","canNext","actions","onPreviousClick","onNextClick","cx","useClasses","selectedIndex","numSlides","controls","children","_jsx","dots","Array","from","map","el","index","dot","dotSelected","_jsxs","_Fragment","HvButton","icon","disabled","variant","onClick","Backwards","iconSize","pageCounter","Forwards"],"mappings":";;;;AAqBaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EACEX,IAAAA;AACE,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,aAAa,KAAK;AAErD,QAAMY,gBAAgBT,QAAQ;AAC9B,QAAMU,YAAYT;AAElB,8BACE,OAAA;AAAA,IAAKH,WAAWS,GAAGX,QAAQe,UAAUb,SAAS;AAAA,IAAEc,UAAA,CAC7Cb,WACCc,oBAAA,OAAA;AAAA,MAAKf,WAAWF,QAAQkB;AAAAA,MAAKF,UAC1BG,MAAMC,KAAKD,MAAML,SAAS,CAAC,EAAEO,IAAI,CAACC,IAAIC,UACrCN,oBAAA,QAAA;AAAA,QAEEf,WAAWS,GAAGX,QAAQwB,KAAK;AAAA,UACzB,CAACxB,QAAQyB,WAAW,GAAGF,UAAUV;AAAAA,QAAAA,CAClC;AAAA,MAAE,GAHG,UAASU,OAIhB,CACF;AAAA,IAAA,CACE,IAELG,qBAAAC,UAAA;AAAA,MAAAX,UAAA,CACEC,oBAACW,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACxB;AAAAA,QACXyB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAASvB;AAAAA,QAAgBO,8BAExBiB,WAAS;AAAA,UAACC,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CAClB,GACVjB,oBAAA,OAAA;AAAA,QAAKf,WAAWF,QAAQmC;AAAAA,QAAYnB,UAChC,GAAEH,gBAAgB,OAAOC;AAAAA,MAAAA,CACxB,GACLG,oBAACW,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACvB;AAAAA,QACXwB,SAAQ;AAAA,QACR,cAAW;AAAA,QACXC,SAAStB;AAAAA,QAAYM,8BAEpBoB,UAAQ;AAAA,UAACF,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CACjB,CAAC;AAAA,IACX,CAAA,GAEH1B,OAAO;AAAA,EAAA,CACL;AAET;"}
+{"version":3,"file":"CarouselControls.js","sources":["../../../../src/components/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvPaginationProps } from \"@core/components/Pagination\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\n  actions?: ReactNode;\n  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;\n  onNextClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showDots,\n    page,\n    pages,\n    canPrevious,\n    canNext,\n    actions,\n    onPreviousClick,\n    onNextClick,\n  } = useDefaultProps(\"HvCarouselControls\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":["HvCarouselControls","props","classes","classesProp","className","showDots","page","pages","canPrevious","canNext","actions","onPreviousClick","onNextClick","useDefaultProps","cx","useClasses","selectedIndex","numSlides","controls","children","_jsx","dots","Array","from","map","el","index","dot","dotSelected","_jsxs","_Fragment","HvButton","icon","disabled","onClick","Backwards","iconSize","pageCounter","Forwards"],"mappings":";;;;;AAsBaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,sBAAsBZ,KAAK;AACzC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,WAAWZ,aAAa,KAAK;AAErD,QAAMa,gBAAgBV,QAAQ;AAC9B,QAAMW,YAAYV;AAElB,8BACE,OAAA;AAAA,IAAKH,WAAWU,GAAGZ,QAAQgB,UAAUd,SAAS;AAAA,IAAEe,UAAA,CAC7Cd,WACCe,oBAAA,OAAA;AAAA,MAAKhB,WAAWF,QAAQmB;AAAAA,MAAKF,UAC1BG,MAAMC,KAAKD,MAAML,SAAS,CAAC,EAAEO,IAAI,CAACC,IAAIC,UACrCN,oBAAA,QAAA;AAAA,QAEEhB,WAAWU,GAAGZ,QAAQyB,KAAK;AAAA,UACzB,CAACzB,QAAQ0B,WAAW,GAAGF,UAAUV;AAAAA,QAAAA,CAClC;AAAA,MAAE,GAHG,UAASU,OAIhB,CACF;AAAA,IAAA,CACE,IAELG,qBAAAC,UAAA;AAAA,MAAAX,UAAA,CACEC,oBAACW,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACzB;AAAAA,QACX,cAAW;AAAA,QACX0B,SAASvB;AAAAA,QAAgBQ,8BAExBgB,WAAS;AAAA,UAACC,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CAClB,GACVhB,oBAAA,OAAA;AAAA,QAAKhB,WAAWF,QAAQmC;AAAAA,QAAYlB,UAChC,GAAEH,gBAAgB,OAAOC;AAAAA,MAAAA,CACxB,GACLG,oBAACW,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,UAAU,CAACxB;AAAAA,QACX,cAAW;AAAA,QACXyB,SAAStB;AAAAA,QAAYO,8BAEpBmB,UAAQ;AAAA,UAACF,UAAS;AAAA,QAAA,CAAM;AAAA,MAAA,CACjB,CAAC;AAAA,IACX,CAAA,GAEH1B,OAAO;AAAA,EAAA,CACL;AAET;"}

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js

@@ -1,7 +1,7 @@
 import { useClasses } from "./CarouselSlide.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCarouselSlide = ({
-  classes: classesProp = {},
+  classes: classesProp,
   className,
   children,
   size: flexBasis = "100%",