@hitachivantara/uikit-react-lab 3.52.1 → 3.53.0

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

@@ -0,0 +1,21 @@
+var styles = {
+  root: {
+    borderRadius: "50%",
+    zIndex: 1
+  },
+  ghostDisabled: {},
+  active: {},
+  ghost: {
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    "&$active": {
+      cursor: "default"
+    },
+    "&$active&:hover": {
+      cursor: "default"
+    }
+  }
+};
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/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;AAoBA,eAAeR,MAAf"}

package/dist/legacy/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/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js

@@ -0,0 +1,113 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.concat.js";
+import React from "react";
+import PropTypes from "prop-types";
+import { useTheme, withStyles } from "@material-ui/core";
+import HvDot from "./Dot";
+import { defaultColor, disabledColor, dotSizes } from "./utils";
+import styles from "./styles";
+/**
+ * Simple Navigation
+ */
+
+var HvSimpleNavigation = function HvSimpleNavigation(_ref) {
+  var numSteps = _ref.numSteps,
+      stepSize = _ref.stepSize,
+      getTitles = _ref.getTitles,
+      getDynamicValues = _ref.getDynamicValues,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme(); // step values
+
+  var dotSize = dotSizes[stepSize];
+  var StepComponent = HvDot; //
+
+  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) ? disabledColor(theme) : 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.createElement("div", other, titles, /*#__PURE__*/React.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.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Number of steps to show on the component.
+   */
+  numSteps: PropTypes.number.isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
+
+  /**
+   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).
+   */
+  getDynamicValues: PropTypes.func.isRequired,
+
+  /**
+   * Returns a JSX.element of the titles container.
+   */
+  getTitles: PropTypes.func.isRequired,
+
+  /**
+   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
+   */
+  children: PropTypes.elementType.isRequired
+} : void 0;
+export default withStyles(styles, {
+  name: "HvSimpleNavigation"
+})(HvSimpleNavigation);
+//# sourceMappingURL=SimpleNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleNavigation.js","names":["React","PropTypes","useTheme","withStyles","HvDot","defaultColor","disabledColor","dotSizes","styles","HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","dotSize","StepComponent","stepsWidth","width","titleWidth","separatorWidth","getColor","state","includes","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","title","navWidth","separatorValues","height","stepValues","minSize","maxSize","propTypes","className","string","classes","shape","root","isRequired","oneOf","func","elementType","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":"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"}

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

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

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

@@ -0,0 +1,2 @@
+export { default } from "./SimpleNavigation";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,8 @@
+var styles = function styles() {
+  return {
+    root: {}
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/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;;AAIA,eAAeD,MAAf"}

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

@@ -0,0 +1,22 @@
+var dotSizes = {
+  XS: 8,
+  SM: 10,
+  MD: 12,
+  LG: 14,
+  XL: 16
+};
+
+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;
+};
+
+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;
+};
+
+export { dotSizes, defaultColor, disabledColor };
+//# sourceMappingURL=utils.js.map

package/dist/legacy/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;;AAEA,SAASd,QAAT,EAAmBM,YAAnB,EAAiCM,aAAjC"}

package/dist/legacy/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;

package/dist/legacy/StepNavigation/StepNavigation.js

@@ -0,0 +1,341 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "classes", "width", "steps", "stepSize", "showTitles", "type"],
+    _excluded2 = ["state", "title", "separatorClassName"],
+    _excluded3 = ["stepsWidth", "navWidth"];
+
+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) { _defineProperty(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; }
+
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.map.js";
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles, Typography, styled, useTheme } from "@material-ui/core";
+import { HvTooltip, HvTypography, useWidth } from "@hitachivantara/uikit-react-core";
+import HvDefaultNavigation from "./DefaultNavigation";
+import HvSimpleNavigation from "./SimpleNavigation";
+import { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from "./utils";
+import styles from "./styles";
+/**
+ * Navigation page with steps.
+ *
+ * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.
+ * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -
+ * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:
+ * * Define a <b>className</b> on each step element;
+ * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height
+ * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;
+ * * Define a <b>titleClassName</b> to specify a className for the title above each step element.
+ *
+ * For the root element, you can:
+ * * Define a <b>className</b>;
+ * * Choose a <b>type</b> of layout: 'Simple' or 'Default';
+ * * Choose the <b>stepSize</b> of the step component: "XS", "SM", "MD", "LG", "XL". The default size will be
+ * correspondent to the current media breakpoint;
+ * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;
+ * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title
+ * displayed above, the width of the separator element;
+ * will be 100px. If the step component has titles, each one will have 215px of width by default.
+ */
+
+var HvStepNavigation = function HvStepNavigation(_ref) {
+  var className = _ref.className,
+      classes = _ref.classes,
+      width = _ref.width,
+      steps = _ref.steps,
+      stepSize = _ref.stepSize,
+      showTitles = _ref.showTitles,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "Default" : _ref$type,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme(); // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+  var breakpoint = useWidth(); // step configurations
+
+  var stepSizeKey = stepSize !== null && stepSize !== void 0 ? stepSize : ["xs", "sm"].includes(breakpoint) ? "SM" : "MD";
+  var hasTitles = showTitles !== null && showTitles !== void 0 ? showTitles : !["xs", "sm"].includes(breakpoint);
+
+  var styledLi = function styledLi(containerSize) {
+    return styled("li")({
+      width: containerSize,
+      height: containerSize
+    });
+  };
+
+  var styledDiv = function styledDiv(containerSize) {
+    return styled("div")({
+      width: containerSize,
+      height: containerSize
+    });
+  };
+
+  var styledSeparatorElement = function styledSeparatorElement(title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) {
+    var Separator = withStyles({
+      separatorElement: {
+        height: separatorHeight,
+        width: separatorWidth,
+        backgroundColor: backgroundColor
+      }
+    })(function (_ref2) {
+      var separatorElement = _ref2.classes.separatorElement;
+      return /*#__PURE__*/React.createElement("div", {
+        "aria-label": "separator-".concat(title),
+        className: clsx(separatorElement, separatorClassName)
+      });
+    });
+    return /*#__PURE__*/React.createElement("li", {
+      "aria-hidden": true,
+      key: "separator-".concat(title),
+      className: classes.separator
+    }, /*#__PURE__*/React.createElement(Separator, null));
+  };
+
+  var drawItems = function drawItems(_ref3) {
+    var _ref3$separatorValues = _ref3.separatorValues,
+        minWidth = _ref3$separatorValues.minWidth,
+        maxWidth = _ref3$separatorValues.maxWidth,
+        getColor = _ref3$separatorValues.getColor,
+        height = _ref3$separatorValues.height,
+        _ref3$stepValues = _ref3.stepValues,
+        minSize = _ref3$stepValues.minSize,
+        maxSize = _ref3$stepValues.maxSize,
+        StepComponent = _ref3$stepValues.StepComponent;
+    var items = steps.reduce(function (acc, _ref4, index) {
+      var state = _ref4.state,
+          title = _ref4.title,
+          separatorClassName = _ref4.separatorClassName,
+          props = _objectWithoutProperties(_ref4, _excluded2);
+
+      var containerSize = state === "Current" ? maxSize : minSize;
+      var StepContainer = styledLi(containerSize);
+      var Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));
+
+      var stepProps = _objectSpread({}, _objectSpread({
+        size: stepSizeKey,
+        state: state,
+        title: title,
+        number: index + 1
+      }, props));
+
+      var stepElement = /*#__PURE__*/React.createElement(StepContainer, {
+        key: "step-".concat(title),
+        className: classes.li
+      }, hasTitles ? /*#__PURE__*/React.createElement(StepComponent, _extends({
+        "aria-label": "step-".concat(title)
+      }, stepProps)) : /*#__PURE__*/React.createElement(HvTooltip, {
+        placement: "bottom",
+        title: /*#__PURE__*/React.createElement(HvTypography, null, "".concat(index + 1, ". ").concat(title))
+      }, /*#__PURE__*/React.createElement("div", {
+        "aria-label": "step-container-".concat(title)
+      }, /*#__PURE__*/React.createElement(Step, {
+        className: classes.li
+      }, /*#__PURE__*/React.createElement(StepComponent, _extends({
+        "aria-label": "step-".concat(title)
+      }, stepProps))))));
+
+      if (index < steps.length - 1) {
+        var separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(state));
+        return [].concat(_toConsumableArray(acc), [stepElement, separatorElement]);
+      }
+
+      return [].concat(_toConsumableArray(acc), [stepElement]);
+    }, []);
+    return /*#__PURE__*/React.createElement("ol", {
+      className: classes.ol
+    }, items);
+  };
+
+  var getDynamicValues = function getDynamicValues(stepsWidth) {
+    var _theme$breakpoints$va, _theme$breakpoints$va2;
+
+    var maxWidth = width !== null && width !== void 0 ? width : Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
+    var next = theme.breakpoints.keys.find(function (_, index, self) {
+      return index - 1 >= 0 ? self[index - 1] === breakpoint : false;
+    });
+    var navWidth = Math.min(maxWidth, (_theme$breakpoints$va = (_theme$breakpoints$va2 = theme.breakpoints.values) === null || _theme$breakpoints$va2 === void 0 ? void 0 : _theme$breakpoints$va2[next]) !== null && _theme$breakpoints$va !== void 0 ? _theme$breakpoints$va : maxWidth);
+    var titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);
+    var separatorWidth = Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));
+    return {
+      width: navWidth,
+      titleWidth: titleWidth,
+      separatorWidth: separatorWidth
+    };
+  };
+
+  var styledTitle = function styledTitle(titleClassName, variant, title, titleWidth) {
+    return withStyles({
+      stepTitle: {
+        textAlign: "center",
+        width: titleWidth - TITLE_MARGIN,
+        marginRight: TITLE_MARGIN
+      }
+    })(function (_ref5) {
+      var stepTitle = _ref5.classes.stepTitle;
+      return title ? /*#__PURE__*/React.createElement(HvTypography, {
+        variant: variant,
+        className: clsx(stepTitle, titleClassName)
+      }, title) : null;
+    });
+  };
+
+  var getTitles = function getTitles(getTitleProps) {
+    return hasTitles ? /*#__PURE__*/React.createElement("div", {
+      className: classes.titles
+    }, steps.map(function (_ref6, index) {
+      var rawTitle = _ref6.title,
+          state = _ref6.state,
+          titleClassName = _ref6.titleClassName;
+
+      var _getTitleProps = getTitleProps({
+        state: state,
+        rawTitle: rawTitle,
+        number: index + 1
+      }),
+          _getTitleProps$varian = _getTitleProps.variant,
+          variant = _getTitleProps$varian === void 0 ? "highlightText" : _getTitleProps$varian,
+          _getTitleProps$title = _getTitleProps.title,
+          title = _getTitleProps$title === void 0 ? rawTitle : _getTitleProps$title,
+          _getTitleProps$titleW = _getTitleProps.titleWidth,
+          titleWidth = _getTitleProps$titleW === void 0 ? 0 : _getTitleProps$titleW;
+
+      var Title = styledTitle(titleClassName, variant, title, titleWidth);
+      return /*#__PURE__*/React.createElement(Title, {
+        key: "step-title-".concat(rawTitle)
+      });
+    })) : null;
+  };
+
+  var StepNavigation = {
+    Default: HvDefaultNavigation,
+    Simple: HvSimpleNavigation
+  }[type];
+  return /*#__PURE__*/React.createElement(StepNavigation, _objectSpread({
+    stepSize: stepSizeKey,
+    numSteps: steps.length,
+    getTitles: getTitles,
+    getDynamicValues: getDynamicValues,
+    className: clsx(className, classes.root)
+  }, others), function (_ref7) {
+    var stepsWidth = _ref7.stepsWidth,
+        navWidth = _ref7.navWidth,
+        itemsProps = _objectWithoutProperties(_ref7, _excluded3);
+
+    return /*#__PURE__*/React.createElement(Typography, {
+      component: "nav",
+      style: {
+        width: "".concat(navWidth, "px"),
+        margin: 0
+      }
+    }, drawItems(itemsProps));
+  });
+};
+
+process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the li element.
+     */
+    li: PropTypes.string,
+
+    /**
+     *  Styles applied to the ol element.
+     */
+    ol: PropTypes.string,
+
+    /**
+     * Styles applied to the separator element.
+     */
+    separator: PropTypes.string,
+
+    /**
+     * Styles applied to the titles container element.
+     */
+    titles: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Type of step navigation. Values = {"Simple", "Default"}.
+   */
+  type: PropTypes.oneOf(["Simple", "Default"]),
+
+  /**
+   * Steps to show on the component.
+   */
+  steps: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * Class names to override styles on the step component.
+     */
+    className: PropTypes.string,
+
+    /**
+     * Class names to override styles on the separator component after the step.
+     */
+    separatorClassName: PropTypes.string,
+
+    /**
+     * Class names to override styles on the title component above the step.
+     */
+    titleClassName: PropTypes.string,
+
+    /**
+     * Title of the step.
+     */
+    title: PropTypes.string.isRequired,
+
+    /**
+     * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}.
+     */
+    state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired
+  })).isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps. Values = {"XS", "SM", "MD", "LG", "XL"}
+   */
+  stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
+
+  /**
+   * Width of the component.
+   */
+  width: PropTypes.number,
+
+  /**
+   * Defines either show a title or only a tooltip on each step component
+   */
+  showTitles: PropTypes.bool
+} : void 0;
+export default withStyles(styles, {
+  name: "HvStepNavigation"
+})(HvStepNavigation);
+//# sourceMappingURL=StepNavigation.js.map