@hitachivantara/uikit-react-lab 3.52.1 → 3.53.0

package/dist/modern/StepNavigation/DefaultNavigation/styles.js

@@ -0,0 +1,6 @@
+const styles = () => ({
+  root: {}
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/StepNavigation/DefaultNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root"],"sources":["../../../../src/StepNavigation/DefaultNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {},\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;EACpBC,IAAI,EAAE;AADc,CAAP,CAAf;;AAIA,eAAeD,MAAf"}

package/dist/modern/StepNavigation/DefaultNavigation/utils.js

@@ -0,0 +1,41 @@
+const getColor = (state, theme) => {
+  var _theme$hv$palette$sem, _theme$hv, _theme$hv$palette, _theme$hv$palette$sem2, _theme$hv$palette$sem3, _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$se, _theme$hv$palette$sem4, _theme$hv3, _theme$hv3$palette, _theme$hv3$palette$se, _theme$hv$palette$acc, _theme$hv4, _theme$hv4$palette, _theme$hv4$palette$ac, _theme$hv$palette$atm, _theme$hv5, _theme$hv5$palette, _theme$hv5$palette$at;
+
+  return {
+    Pending: (_theme$hv$palette$sem = 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$sem2 = _theme$hv$palette.semantic) === null || _theme$hv$palette$sem2 === void 0 ? void 0 : _theme$hv$palette$sem2.sema3) !== null && _theme$hv$palette$sem !== void 0 ? _theme$hv$palette$sem : "sema3",
+    Failed: (_theme$hv$palette$sem3 = 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$se = _theme$hv2$palette.semantic) === null || _theme$hv2$palette$se === void 0 ? void 0 : _theme$hv2$palette$se.sema4) !== null && _theme$hv$palette$sem3 !== void 0 ? _theme$hv$palette$sem3 : "sema4",
+    Completed: (_theme$hv$palette$sem4 = theme === null || theme === void 0 ? void 0 : (_theme$hv3 = theme.hv) === null || _theme$hv3 === void 0 ? void 0 : (_theme$hv3$palette = _theme$hv3.palette) === null || _theme$hv3$palette === void 0 ? void 0 : (_theme$hv3$palette$se = _theme$hv3$palette.semantic) === null || _theme$hv3$palette$se === void 0 ? void 0 : _theme$hv3$palette$se.sema1) !== null && _theme$hv$palette$sem4 !== void 0 ? _theme$hv$palette$sem4 : "sema1",
+    Current: (_theme$hv$palette$acc = theme === null || theme === void 0 ? void 0 : (_theme$hv4 = theme.hv) === null || _theme$hv4 === void 0 ? void 0 : (_theme$hv4$palette = _theme$hv4.palette) === null || _theme$hv4$palette === void 0 ? void 0 : (_theme$hv4$palette$ac = _theme$hv4$palette.accent) === null || _theme$hv4$palette$ac === void 0 ? void 0 : _theme$hv4$palette$ac.acce1) !== null && _theme$hv$palette$acc !== void 0 ? _theme$hv$palette$acc : "acce1",
+    Disabled: (_theme$hv$palette$atm = theme === null || theme === void 0 ? void 0 : (_theme$hv5 = theme.hv) === null || _theme$hv5 === void 0 ? void 0 : (_theme$hv5$palette = _theme$hv5.palette) === null || _theme$hv5$palette === void 0 ? void 0 : (_theme$hv5$palette$at = _theme$hv5$palette.atmosphere) === null || _theme$hv5$palette$at === void 0 ? void 0 : _theme$hv5$palette$at.atmo5) !== null && _theme$hv$palette$atm !== void 0 ? _theme$hv$palette$atm : "atmo5"
+  }[state];
+};
+
+const EXTRA_SMALL = {
+  container: 32,
+  avatar: 24
+};
+const SMALL = {
+  container: 40,
+  avatar: 32
+};
+const MEDIUM = {
+  container: 48,
+  avatar: 40
+};
+const LARGE = {
+  container: 60,
+  avatar: 52
+};
+const EXTRA_LARGE = {
+  container: 96,
+  avatar: 88
+};
+const stepSizes = {
+  XS: EXTRA_SMALL,
+  SM: SMALL,
+  MD: MEDIUM,
+  LG: LARGE,
+  XL: EXTRA_LARGE
+};
+export { getColor, stepSizes };
+//# sourceMappingURL=utils.js.map

package/dist/modern/StepNavigation/DefaultNavigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getColor","state","theme","Pending","hv","palette","semantic","sema3","Failed","sema4","Completed","sema1","Current","accent","acce1","Disabled","atmosphere","atmo5","EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","stepSizes","XS","SM","MD","LG","XL"],"sources":["../../../../src/StepNavigation/DefaultNavigation/utils.js"],"sourcesContent":["const getColor = (state, theme) =>\n  ({\n    Pending: theme?.hv?.palette?.semantic?.sema3 ?? \"sema3\",\n    Failed: theme?.hv?.palette?.semantic?.sema4 ?? \"sema4\",\n    Completed: theme?.hv?.palette?.semantic?.sema1 ?? \"sema1\",\n    Current: theme?.hv?.palette?.accent?.acce1 ?? \"acce1\",\n    Disabled: theme?.hv?.palette?.atmosphere?.atmo5 ?? \"atmo5\",\n  }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nconst stepSizes = {\n  XS: EXTRA_SMALL,\n  SM: SMALL,\n  MD: MEDIUM,\n  LG: LARGE,\n  XL: EXTRA_LARGE,\n};\n\nexport { getColor, stepSizes };\n"],"mappings":"AAAA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,KAAR;EAAA;;EAAA,OACd;IACCC,OAAO,2BAAED,KAAF,aAAEA,KAAF,oCAAEA,KAAK,CAAEE,EAAT,mEAAE,UAAWC,OAAb,gFAAE,kBAAoBC,QAAtB,2DAAE,uBAA8BC,KAAhC,yEAAyC,OADjD;IAECC,MAAM,4BAAEN,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BG,KAAhC,2EAAyC,OAFhD;IAGCC,SAAS,4BAAER,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BK,KAAhC,2EAAyC,OAHnD;IAICC,OAAO,2BAAEV,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBQ,MAAtB,0DAAE,sBAA4BC,KAA9B,yEAAuC,OAJ/C;IAKCC,QAAQ,2BAAEb,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBW,UAAtB,0DAAE,sBAAgCC,KAAlC,yEAA2C;EALpD,EAMChB,KAND,CADc;AAAA,CAAjB;;AASA,MAAMiB,WAAW,GAAG;EAAEC,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AACA,MAAMC,KAAK,GAAG;EAAEF,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,MAAME,MAAM,GAAG;EAAEH,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAf;AACA,MAAMG,KAAK,GAAG;EAAEJ,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,MAAMI,WAAW,GAAG;EAAEL,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AAEA,MAAMK,SAAS,GAAG;EAChBC,EAAE,EAAER,WADY;EAEhBS,EAAE,EAAEN,KAFY;EAGhBO,EAAE,EAAEN,MAHY;EAIhBO,EAAE,EAAEN,KAJY;EAKhBO,EAAE,EAAEN;AALY,CAAlB;AAQA,SAASxB,QAAT,EAAmByB,SAAnB"}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvStepProps } from "../../DefaultNavigation/Step";
+
+export type HvDotClassKey = "root";
+
+export type HvDotProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvDotClassKey> &
+  Pick<HvStepProps, "size" | "title" | "state" | "onClick">;
+
+export default function HvDot(props: HvDotProps): JSX.Element | null;

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

@@ -0,0 +1,111 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.array.includes.js";
+
+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 React, { useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { HvButton } from "@hitachivantara/uikit-react-core";
+import { makeStyles, withStyles } from "@material-ui/core";
+import { defaultColor, disabledColor, dotSizes } from "../utils";
+import styles from "./styles";
+/**
+ * Step element of "Simple" Step Navigation root component
+ */
+
+const HvDot = ({
+  classes,
+  className,
+  state,
+  title,
+  size,
+  onClick
+}) => {
+  const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
+  const getBackgroundColor = useCallback(theme => state === "Disabled" ? disabledColor(theme) : defaultColor(theme), [state]);
+  const customClasses = useMemo(() => makeStyles(theme => {
+    const backgroundColor = getBackgroundColor(theme);
+    return {
+      ghostDisabled: {},
+      active: {},
+      ghost: _objectSpread(_objectSpread({}, styles.ghost), {}, {
+        width: dotSize,
+        height: dotSize,
+        backgroundColor,
+        "&$ghostDisabled": _objectSpread(_objectSpread({}, styles.ghost["&$ghostDisabled"]), {}, {
+          backgroundColor
+        }),
+        "&$ghostDisabled&:hover": _objectSpread(_objectSpread({}, styles.ghost["&$ghostDisabled&:hover"]), {}, {
+          backgroundColor
+        })
+      })
+    };
+  }), [dotSize, getBackgroundColor])();
+  return /*#__PURE__*/React.createElement(HvButton, {
+    className: clsx(classes.root, customClasses.ghost, className, "Current Disabled".includes(state) && customClasses.ghostDisabled, state === "Current" && customClasses.active),
+    "aria-label": `step-${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.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 active class.
+     */
+    active: PropTypes.string,
+
+    /**
+     * Styles applied to the ghost class.
+     */
+    ghost: PropTypes.string,
+
+    /**
+     * Styles applied to the ghostDisabled class.
+     */
+    ghostDisabled: PropTypes.string
+  }).isRequired,
+
+  /**
+   * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
+   */
+  state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
+
+  /**
+   * Title of the step.
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
+
+  /**
+   * Event onClick of the step.
+   */
+  onClick: PropTypes.func
+} : void 0;
+export default withStyles(styles, {
+  name: "HvDot"
+})(HvDot);
+//# sourceMappingURL=Dot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","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/modern/StepNavigation/SimpleNavigation/Dot/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+const 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/modern/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,MAAMA,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/modern/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/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js

@@ -0,0 +1,110 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
+import "core-js/modules/es.array.includes.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
+ */
+
+const HvSimpleNavigation = _ref => {
+  let {
+    numSteps,
+    stepSize,
+    getTitles,
+    getDynamicValues,
+    children
+  } = _ref,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = useTheme(); // step values
+
+  const dotSize = dotSizes[stepSize];
+  const StepComponent = HvDot; //
+
+  const stepsWidth = (numSteps + 0.5) * dotSize;
+  const {
+    width,
+    titleWidth,
+    separatorWidth
+  } = getDynamicValues(stepsWidth); // separator values
+
+  const getColor = state => ["Current", "Disabled"].includes(state) ? disabledColor(theme) : defaultColor(theme);
+
+  const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
+  const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth); //
+
+  const Steps = children;
+  const titles = getTitles(({
+    rawTitle,
+    number
+  }) => ({
+    title: `${number}. ${rawTitle}`,
+    titleWidth
+  }));
+  return /*#__PURE__*/React.createElement("div", other, titles, /*#__PURE__*/React.createElement(Steps, {
+    stepsWidth,
+    navWidth: width,
+    separatorValues: {
+      minWidth,
+      maxWidth,
+      getColor,
+      height: 2
+    },
+    stepValues: {
+      minSize: dotSize,
+      maxSize: 1.5 * dotSize,
+      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/modern/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/modern/StepNavigation/SimpleNavigation/index.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+const styles = () => ({
+  root: {}
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/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,MAAMA,MAAM,GAAG,OAAO;EACpBC,IAAI,EAAE;AADc,CAAP,CAAf;;AAIA,eAAeD,MAAf"}

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

@@ -0,0 +1,22 @@
+const dotSizes = {
+  XS: 8,
+  SM: 10,
+  MD: 12,
+  LG: 14,
+  XL: 16
+};
+
+const 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;
+};
+
+const 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/modern/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,MAAMA,QAAQ,GAAG;EACfC,EAAE,EAAE,CADW;EAEfC,EAAE,EAAE,EAFW;EAGfC,EAAE,EAAE,EAHW;EAIfC,EAAE,EAAE,EAJW;EAKfC,EAAE,EAAE;AALW,CAAjB;;AAQA,MAAMC,YAAY,GAAIC,KAAD;EAAA;;EAAA,OAAWA,KAAX,aAAWA,KAAX,oCAAWA,KAAK,CAAEC,EAAlB,mEAAW,UAAWC,OAAtB,+EAAW,kBAAoBC,MAA/B,0DAAW,sBAA4BC,KAAvC;AAAA,CAArB;;AACA,MAAMC,aAAa,GAAIL,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/modern/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;