@hitachivantara/uikit-react-lab 3.52.1 → 3.53.0

package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -0,0 +1,163 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.array.includes.js");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _core = require("@material-ui/core");
+
+var _utils = require("../utils");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Step element of "Simple" Step Navigation root component
+ */
+var HvDot = function HvDot(_ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      state = _ref.state,
+      title = _ref.title,
+      size = _ref.size,
+      onClick = _ref.onClick;
+  var dotSize = _utils.dotSizes[size] * (state === "Current" ? 1.5 : 1);
+  var getBackgroundColor = (0, _react.useCallback)(function (theme) {
+    return state === "Disabled" ? (0, _utils.disabledColor)(theme) : (0, _utils.defaultColor)(theme);
+  }, [state]);
+  var customClasses = (0, _react.useMemo)(function () {
+    return (0, _core.makeStyles)(function (theme) {
+      var backgroundColor = getBackgroundColor(theme);
+      return {
+        ghostDisabled: {},
+        active: {},
+        ghost: _objectSpread(_objectSpread({}, _styles.default.ghost), {}, {
+          width: dotSize,
+          height: dotSize,
+          backgroundColor: backgroundColor,
+          "&$ghostDisabled": _objectSpread(_objectSpread({}, _styles.default.ghost["&$ghostDisabled"]), {}, {
+            backgroundColor: backgroundColor
+          }),
+          "&$ghostDisabled&:hover": _objectSpread(_objectSpread({}, _styles.default.ghost["&$ghostDisabled&:hover"]), {}, {
+            backgroundColor: backgroundColor
+          })
+        })
+      };
+    });
+  }, [dotSize, getBackgroundColor])();
+  return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
+    className: (0, _clsx.default)(classes.root, customClasses.ghost, className, "Current Disabled".includes(state) && customClasses.ghostDisabled, state === "Current" && customClasses.active),
+    "aria-label": "step-".concat(title),
+    icon: true,
+    overrideIconColors: false,
+    disabled: ["Current", "Disabled"].includes(state),
+    onClick: onClick
+  }, []);
+};
+
+process.env.NODE_ENV !== "production" ? HvDot.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the active class.
+     */
+    active: _propTypes.default.string,
+
+    /**
+     * Styles applied to the ghost class.
+     */
+    ghost: _propTypes.default.string,
+
+    /**
+     * Styles applied to the ghostDisabled class.
+     */
+    ghostDisabled: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
+   */
+  state: _propTypes.default.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
+
+  /**
+   * Title of the step.
+   */
+  title: _propTypes.default.string.isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  size: _propTypes.default.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
+
+  /**
+   * Event onClick of the step.
+   */
+  onClick: _propTypes.default.func
+} : void 0;
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDot"
+})(HvDot);
+
+exports.default = _default;
+//# sourceMappingURL=Dot.js.map

package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.js","names":["HvDot","classes","className","state","title","size","onClick","dotSize","dotSizes","getBackgroundColor","useCallback","theme","disabledColor","defaultColor","customClasses","useMemo","makeStyles","backgroundColor","ghostDisabled","active","ghost","styles","width","height","clsx","root","includes","propTypes","PropTypes","string","shape","isRequired","oneOf","func","withStyles","name"],"sources":["../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={[\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}

package/dist/StepNavigation/SimpleNavigation/Dot/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Dot";
+export * from "./Dot";

package/dist/StepNavigation/SimpleNavigation/Dot/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Dot.default;
+  }
+});
+
+var _Dot = _interopRequireDefault(require("./Dot"));
+//# sourceMappingURL=index.js.map

package/dist/StepNavigation/SimpleNavigation/Dot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/StepNavigation/SimpleNavigation/Dot/index.js"],"sourcesContent":["export { default } from \"./Dot\";\n"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/StepNavigation/SimpleNavigation/Dot/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var styles = {
+  root: {
+    borderRadius: "50%",
+    zIndex: 1
+  },
+  ghostDisabled: {},
+  active: {},
+  ghost: {
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    "&$active": {
+      cursor: "default"
+    },
+    "&$active&:hover": {
+      cursor: "default"
+    }
+  }
+};
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root","borderRadius","zIndex","ghostDisabled","active","ghost","backgroundColor","cursor"],"sources":["../../../../src/StepNavigation/SimpleNavigation/Dot/styles.js"],"sourcesContent":["const styles = {\n  root: {\n    borderRadius: \"50%\",\n    zIndex: 1,\n  },\n  ghostDisabled: {},\n  active: {},\n  ghost: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n    \"&$active\": {\n      cursor: \"default\",\n    },\n    \"&$active&:hover\": {\n      cursor: \"default\",\n    },\n  },\n};\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,IAAMA,MAAM,GAAG;EACbC,IAAI,EAAE;IACJC,YAAY,EAAE,KADV;IAEJC,MAAM,EAAE;EAFJ,CADO;EAKbC,aAAa,EAAE,EALF;EAMbC,MAAM,EAAE,EANK;EAObC,KAAK,EAAE;IACL,WAAW;MACTC,eAAe,EAAE;IADR,CADN;IAIL,YAAY;MACVC,MAAM,EAAE;IADE,CAJP;IAOL,mBAAmB;MACjBA,MAAM,EAAE;IADS;EAPd;AAPM,CAAf;eAoBeR,M"}

package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+import { HvStepNavigationProps } from "../StepNavigation";
+import { HvDotProps } from "./Dot";
+
+export type HvSimpleNavigationClassKey = "root";
+
+export type ComponentChildProps = {
+  stepsWidth: number;
+  navWidth: number;
+  separatorValues: {
+    minWidth: number;
+    maxWidth: number;
+    getColor: (state: HvDotProps["state"]) => any;
+    height: number;
+  };
+  stepValues: {
+    minSize: number;
+    maxSize: number;
+    StepComponent: React.ComponentType<HvDotProps>;
+  };
+};
+
+export type HvSimpleNavigationProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvSimpleNavigationClassKey
+> &
+  Pick<HvStepNavigationProps, "stepSize"> & {
+    /**
+     * Number of steps to show on the component.
+     */
+    numSteps: number;
+    /**
+     * Returns a JSX.element of the titles container.
+     */
+    getTitles: (
+      getTitleProps?: (params: {
+        state: HvDotProps["state"];
+        rawTitle: string;
+        number: number;
+      }) => { variant: string; title: string }
+    ) => JSX.Element | null;
+    /**
+     * Returns dynamic width values of the component (width, titleWidth, separatorWidth).
+     */
+    getDynamicValues: (stepsWidth: number) => {
+      width: number;
+      titleWidth: number;
+      separatorWidth: number;
+    };
+    /**
+     * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
+     */
+    children: React.FunctionComponent<ComponentChildProps>;
+  };
+
+export default function HvSimpleNavigation(props: HvSimpleNavigationProps): JSX.Element | null;

package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _Dot = _interopRequireDefault(require("./Dot"));
+
+var _utils = require("./utils");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
+
+/**
+ * Simple Navigation
+ */
+var HvSimpleNavigation = function HvSimpleNavigation(_ref) {
+  var numSteps = _ref.numSteps,
+      stepSize = _ref.stepSize,
+      getTitles = _ref.getTitles,
+      getDynamicValues = _ref.getDynamicValues,
+      children = _ref.children,
+      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var theme = (0, _core.useTheme)(); // step values
+
+  var dotSize = _utils.dotSizes[stepSize];
+  var StepComponent = _Dot.default; //
+
+  var stepsWidth = (numSteps + 0.5) * dotSize;
+
+  var _getDynamicValues = getDynamicValues(stepsWidth),
+      width = _getDynamicValues.width,
+      titleWidth = _getDynamicValues.titleWidth,
+      separatorWidth = _getDynamicValues.separatorWidth; // separator values
+
+
+  var getColor = function getColor(state) {
+    return ["Current", "Disabled"].includes(state) ? (0, _utils.disabledColor)(theme) : (0, _utils.defaultColor)(theme);
+  };
+
+  var maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
+  var minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth); //
+
+  var Steps = children;
+  var titles = getTitles(function (_ref2) {
+    var rawTitle = _ref2.rawTitle,
+        number = _ref2.number;
+    return {
+      title: "".concat(number, ". ").concat(rawTitle),
+      titleWidth: titleWidth
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", other, titles, /*#__PURE__*/_react.default.createElement(Steps, {
+    stepsWidth: stepsWidth,
+    navWidth: width,
+    separatorValues: {
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      getColor: getColor,
+      height: 2
+    },
+    stepValues: {
+      minSize: dotSize,
+      maxSize: 1.5 * dotSize,
+      StepComponent: StepComponent
+    }
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvSimpleNavigation.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Number of steps to show on the component.
+   */
+  numSteps: _propTypes.default.number.isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  stepSize: _propTypes.default.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
+
+  /**
+   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).
+   */
+  getDynamicValues: _propTypes.default.func.isRequired,
+
+  /**
+   * Returns a JSX.element of the titles container.
+   */
+  getTitles: _propTypes.default.func.isRequired,
+
+  /**
+   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
+   */
+  children: _propTypes.default.elementType.isRequired
+} : void 0;
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvSimpleNavigation"
+})(HvSimpleNavigation);
+
+exports.default = _default;
+//# sourceMappingURL=SimpleNavigation.js.map

package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleNavigation.js","names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","getColor","state","includes","disabledColor","defaultColor","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","title","navWidth","separatorValues","height","stepValues","minSize","maxSize","propTypes","className","PropTypes","string","classes","shape","root","isRequired","oneOf","func","elementType","withStyles","styles","name"],"sources":["../../../src/StepNavigation/SimpleNavigation/SimpleNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useTheme, withStyles } from \"@material-ui/core\";\n\nimport HvDot from \"./Dot\";\nimport { defaultColor, disabledColor, dotSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Simple Navigation\n */\nconst HvSimpleNavigation = ({\n  numSteps,\n  stepSize,\n  getTitles,\n  getDynamicValues,\n  children,\n  ...other\n}) => {\n  const theme = useTheme();\n\n  // step values\n  const dotSize = dotSizes[stepSize];\n  const StepComponent = HvDot;\n  //\n\n  const stepsWidth = (numSteps + 0.5) * dotSize;\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const getColor = (state) =>\n    [\"Current\", \"Disabled\"].includes(state) ? disabledColor(theme) : defaultColor(theme);\n  const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n  const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ rawTitle, number }) => ({\n    title: `${number}. ${rawTitle}`,\n    titleWidth,\n  }));\n\n  return (\n    <div {...other}>\n      {titles}\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: 2,\n          },\n          stepValues: {\n            minSize: dotSize,\n            maxSize: 1.5 * dotSize,\n            StepComponent,\n          },\n        }}\n      />\n    </div>\n  );\n};\n\nHvSimpleNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Number of steps to show on the component.\n   */\n  numSteps: PropTypes.number.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n   */\n  getDynamicValues: PropTypes.func.isRequired,\n  /**\n   * Returns a JSX.element of the titles container.\n   */\n  getTitles: PropTypes.func.isRequired,\n  /**\n   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n   */\n  children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvSimpleNavigation\" })(HvSimpleNavigation);\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,OAOrB;EAAA,IANJC,QAMI,QANJA,QAMI;EAAA,IALJC,QAKI,QALJA,QAKI;EAAA,IAJJC,SAII,QAJJA,SAII;EAAA,IAHJC,gBAGI,QAHJA,gBAGI;EAAA,IAFJC,QAEI,QAFJA,QAEI;EAAA,IADDC,KACC;EACJ,IAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd,CADI,CAGJ;;EACA,IAAMC,OAAO,GAAGC,eAAA,CAASR,QAAT,CAAhB;EACA,IAAMS,aAAa,GAAGC,YAAtB,CALI,CAMJ;;EAEA,IAAMC,UAAU,GAAG,CAACZ,QAAQ,GAAG,GAAZ,IAAmBQ,OAAtC;;EACA,wBAA8CL,gBAAgB,CAACS,UAAD,CAA9D;EAAA,IAAQC,KAAR,qBAAQA,KAAR;EAAA,IAAeC,UAAf,qBAAeA,UAAf;EAAA,IAA2BC,cAA3B,qBAA2BA,cAA3B,CATI,CAWJ;;;EACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;IAAA,OACf,CAAC,SAAD,EAAY,UAAZ,EAAwBC,QAAxB,CAAiCD,KAAjC,IAA0C,IAAAE,oBAAA,EAAcb,KAAd,CAA1C,GAAiE,IAAAc,mBAAA,EAAad,KAAb,CADlD;EAAA,CAAjB;;EAEA,IAAMe,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAST,UAAU,GAAGN,OAAtB,EAA+BO,cAA/B,CAAjB;EACA,IAAMS,QAAQ,GAAGF,IAAI,CAACC,GAAL,CAAST,UAAU,GAAGN,OAAO,GAAG,IAAhC,EAAsCO,cAAtC,CAAjB,CAfI,CAgBJ;;EAEA,IAAMU,KAAK,GAAGrB,QAAd;EAEA,IAAMsB,MAAM,GAAGxB,SAAS,CAAC;IAAA,IAAGyB,QAAH,SAAGA,QAAH;IAAA,IAAaC,MAAb,SAAaA,MAAb;IAAA,OAA2B;MAClDC,KAAK,YAAKD,MAAL,eAAgBD,QAAhB,CAD6C;MAElDb,UAAU,EAAVA;IAFkD,CAA3B;EAAA,CAAD,CAAxB;EAKA,oBACE,oCAAST,KAAT,EACGqB,MADH,eAEE,6BAAC,KAAD;IAEId,UAAU,EAAVA,UAFJ;IAGIkB,QAAQ,EAAEjB,KAHd;IAIIkB,eAAe,EAAE;MACfP,QAAQ,EAARA,QADe;MAEfH,QAAQ,EAARA,QAFe;MAGfL,QAAQ,EAARA,QAHe;MAIfgB,MAAM,EAAE;IAJO,CAJrB;IAUIC,UAAU,EAAE;MACVC,OAAO,EAAE1B,OADC;MAEV2B,OAAO,EAAE,MAAM3B,OAFL;MAGVE,aAAa,EAAbA;IAHU;EAVhB,EAFF,CADF;AAsBD,CAtDD;;AAwDA,wCAAAX,kBAAkB,CAACqC,SAAnB,GAA+B;EAC7B;AACF;AACA;EACEC,SAAS,EAAEC,kBAAA,CAAUC,MAJQ;;EAK7B;AACF;AACA;EACEC,OAAO,EAAEF,kBAAA,CAAUG,KAAV,CAAgB;IACvB;AACJ;AACA;IACIC,IAAI,EAAEJ,kBAAA,CAAUC;EAJO,CAAhB,EAKNI,UAb0B;;EAc7B;AACF;AACA;EACE3C,QAAQ,EAAEsC,kBAAA,CAAUV,MAAV,CAAiBe,UAjBE;;EAkB7B;AACF;AACA;EACE1C,QAAQ,EAAEqC,kBAAA,CAAUM,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,CAAhB,EAAgDD,UArB7B;;EAsB7B;AACF;AACA;EACExC,gBAAgB,EAAEmC,kBAAA,CAAUO,IAAV,CAAeF,UAzBJ;;EA0B7B;AACF;AACA;EACEzC,SAAS,EAAEoC,kBAAA,CAAUO,IAAV,CAAeF,UA7BG;;EA8B7B;AACF;AACA;EACEvC,QAAQ,EAAEkC,kBAAA,CAAUQ,WAAV,CAAsBH;AAjCH,CAA/B;;eAoCe,IAAAI,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAmDlD,kBAAnD,C"}

package/dist/StepNavigation/SimpleNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SimpleNavigation";
+export * from "./SimpleNavigation";

package/dist/StepNavigation/SimpleNavigation/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleNavigation.default;
+  }
+});
+
+var _SimpleNavigation = _interopRequireDefault(require("./SimpleNavigation"));
+//# sourceMappingURL=index.js.map

package/dist/StepNavigation/SimpleNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/StepNavigation/SimpleNavigation/index.js"],"sourcesContent":["export { default } from \"./SimpleNavigation\";\n"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/StepNavigation/SimpleNavigation/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles() {
+  return {
+    root: {}
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/StepNavigation/SimpleNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root"],"sources":["../../../src/StepNavigation/SimpleNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {},\n});\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;EADc,CAAP;AAAA,CAAf;;eAIeD,M"}

package/dist/StepNavigation/SimpleNavigation/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dotSizes = exports.disabledColor = exports.defaultColor = void 0;
+var dotSizes = {
+  XS: 8,
+  SM: 10,
+  MD: 12,
+  LG: 14,
+  XL: 16
+};
+exports.dotSizes = dotSizes;
+
+var defaultColor = function defaultColor(theme) {
+  var _theme$hv, _theme$hv$palette, _theme$hv$palette$acc;
+
+  return theme === null || theme === void 0 ? void 0 : (_theme$hv = theme.hv) === null || _theme$hv === void 0 ? void 0 : (_theme$hv$palette = _theme$hv.palette) === null || _theme$hv$palette === void 0 ? void 0 : (_theme$hv$palette$acc = _theme$hv$palette.accent) === null || _theme$hv$palette$acc === void 0 ? void 0 : _theme$hv$palette$acc.acce1;
+};
+
+exports.defaultColor = defaultColor;
+
+var disabledColor = function disabledColor(theme) {
+  var _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$at;
+
+  return theme === null || theme === void 0 ? void 0 : (_theme$hv2 = theme.hv) === null || _theme$hv2 === void 0 ? void 0 : (_theme$hv2$palette = _theme$hv2.palette) === null || _theme$hv2$palette === void 0 ? void 0 : (_theme$hv2$palette$at = _theme$hv2$palette.atmosphere) === null || _theme$hv2$palette$at === void 0 ? void 0 : _theme$hv2$palette$at.atmo5;
+};
+
+exports.disabledColor = disabledColor;
+//# sourceMappingURL=utils.js.map

package/dist/StepNavigation/SimpleNavigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["dotSizes","XS","SM","MD","LG","XL","defaultColor","theme","hv","palette","accent","acce1","disabledColor","atmosphere","atmo5"],"sources":["../../../src/StepNavigation/SimpleNavigation/utils.js"],"sourcesContent":["const dotSizes = {\n  XS: 8,\n  SM: 10,\n  MD: 12,\n  LG: 14,\n  XL: 16,\n};\n\nconst defaultColor = (theme) => theme?.hv?.palette?.accent?.acce1;\nconst disabledColor = (theme) => theme?.hv?.palette?.atmosphere?.atmo5;\n\nexport { dotSizes, defaultColor, disabledColor };\n"],"mappings":";;;;;;AAAA,IAAMA,QAAQ,GAAG;EACfC,EAAE,EAAE,CADW;EAEfC,EAAE,EAAE,EAFW;EAGfC,EAAE,EAAE,EAHW;EAIfC,EAAE,EAAE,EAJW;EAKfC,EAAE,EAAE;AALW,CAAjB;;;AAQA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EAAA;;EAAA,OAAWA,KAAX,aAAWA,KAAX,oCAAWA,KAAK,CAAEC,EAAlB,mEAAW,UAAWC,OAAtB,+EAAW,kBAAoBC,MAA/B,0DAAW,sBAA4BC,KAAvC;AAAA,CAArB;;;;AACA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACL,KAAD;EAAA;;EAAA,OAAWA,KAAX,aAAWA,KAAX,qCAAWA,KAAK,CAAEC,EAAlB,qEAAW,WAAWC,OAAtB,gFAAW,mBAAoBI,UAA/B,0DAAW,sBAAgCC,KAA3C;AAAA,CAAtB"}

package/dist/StepNavigation/StepNavigation.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvStepProps } from "./DefaultNavigation/Step/Step";
+
+export type HvStepNavigationClassKey = "root";
+
+export type HvStepNavigationProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvStepNavigationClassKey
+> & {
+  /**
+   * Type of step navigation. Values = {"Simple", "Default"}
+   */
+  type: "Simple" | "Default";
+  /**
+   * Steps to show on the component.
+   */
+  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className">> & {
+    /**
+     * Class names to override styles on the separator component after the step.
+     */
+    separatorClassName: string;
+    /**
+     * Class names to override styles on the title component above the step.
+     */
+    titleClassName: string;
+  };
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  stepSize?: "XS" | "SM" | "MD" | "LG" | "XL";
+  /**
+   * Width of the component element.
+   */
+  width?: number;
+  /**
+   * Defines either show a title or only a tooltip on each step component
+   */
+  showTitles?: boolean;
+};
+
+export default function HvStepNavigation(props: HvStepNavigationProps): JSX.Element | null;