@hitachivantara/uikit-react-lab 4.0.1-next.1 → 4.0.1-next.2

package/dist/StepNavigation/StepNavigation.js

@@ -0,0 +1,400 @@
+"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.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");
+
+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.object.to-string.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.number.constructor.js");
+
+require("core-js/modules/es.array.find.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/styles");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _DefaultNavigation = _interopRequireDefault(require("./DefaultNavigation"));
+
+var _SimpleNavigation = _interopRequireDefault(require("./SimpleNavigation"));
+
+var _utils = require("./utils");
+
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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) { (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; }
+
+/**
+ * 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var theme = (0, _material.useTheme)(); // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+  var breakpoint = (0, _uikitReactCore.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 (0, _material.styled)("li")({
+      width: containerSize,
+      height: containerSize
+    });
+  };
+
+  var styledDiv = function styledDiv(containerSize) {
+    return (0, _material.styled)("div")({
+      width: containerSize,
+      height: containerSize
+    });
+  };
+
+  var styledSeparatorElement = function styledSeparatorElement(title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) {
+    var Separator = (0, _styles.withStyles)({
+      separatorElement: {
+        height: separatorHeight,
+        width: separatorWidth,
+        backgroundColor: backgroundColor
+      }
+    })(function (_ref2) {
+      var separatorElement = _ref2.classes.separatorElement;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "aria-label": "separator-".concat(title),
+        className: (0, _clsx.default)(separatorElement, separatorClassName)
+      });
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      "aria-hidden": true,
+      className: classes.separator,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, {})
+    }, "separator-".concat(title));
+  };
+
+  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 = (0, _objectWithoutProperties2.default)(_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__*/(0, _jsxRuntime.jsx)(StepContainer, {
+        className: classes.li,
+        children: hasTitles ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepComponent, _objectSpread({
+          "aria-label": "step-".concat(title)
+        }, stepProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvTooltip, {
+          placement: "bottom",
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvTypography, {
+            children: "".concat(index + 1, ". ").concat(title)
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            "aria-label": "step-container-".concat(title),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+              className: classes.li,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepComponent, _objectSpread({
+                "aria-label": "step-".concat(title)
+              }, stepProps))
+            })
+          })
+        })
+      }, "step-".concat(title));
+
+      if (index < steps.length - 1) {
+        var separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(state));
+        return [].concat((0, _toConsumableArray2.default)(acc), [stepElement, separatorElement]);
+      }
+
+      return [].concat((0, _toConsumableArray2.default)(acc), [stepElement]);
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
+      className: classes.ol,
+      children: items
+    });
+  };
+
+  var getDynamicValues = function getDynamicValues(stepsWidth) {
+    var _width$breakpoint, _theme$breakpoints$va, _theme$breakpoints$va2;
+
+    var maxWidth = (_width$breakpoint = width === null || width === void 0 ? void 0 : width[breakpoint]) !== null && _width$breakpoint !== void 0 ? _width$breakpoint : Math.max(Number(hasTitles) * (_utils.TITLE_WIDTH + _utils.TITLE_MARGIN) * steps.length - _utils.TITLE_MARGIN, _utils.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 + _utils.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 (0, _styles.withStyles)({
+      stepTitle: {
+        textAlign: "center",
+        width: titleWidth - _utils.TITLE_MARGIN,
+        marginRight: _utils.TITLE_MARGIN
+      }
+    })(function (_ref5) {
+      var stepTitle = _ref5.classes.stepTitle;
+      return title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvTypography, {
+        variant: variant,
+        className: (0, _clsx.default)(stepTitle, titleClassName),
+        children: title
+      }) : null;
+    });
+  };
+
+  var getTitles = function getTitles(getTitleProps) {
+    return hasTitles ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.titles,
+      children: 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__*/(0, _jsxRuntime.jsx)(Title, {}, "step-title-".concat(rawTitle));
+      })
+    }) : null;
+  };
+
+  var StepNavigation = {
+    Default: _DefaultNavigation.default,
+    Simple: _SimpleNavigation.default
+  }[type];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StepNavigation, _objectSpread(_objectSpread({}, _objectSpread({
+    stepSize: stepSizeKey,
+    numSteps: steps.length,
+    getTitles: getTitles,
+    getDynamicValues: getDynamicValues,
+    className: (0, _clsx.default)(className, classes.root)
+  }, others)), {}, {
+    children: function children(_ref7) {
+      var stepsWidth = _ref7.stepsWidth,
+          navWidth = _ref7.navWidth,
+          itemsProps = (0, _objectWithoutProperties2.default)(_ref7, _excluded3);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "nav",
+        style: {
+          width: "".concat(navWidth, "px"),
+          margin: 0
+        },
+        children: drawItems(itemsProps)
+      });
+    }
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvStepNavigation.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 li element.
+     */
+    li: _propTypes.default.string,
+
+    /**
+     *  Styles applied to the ol element.
+     */
+    ol: _propTypes.default.string,
+
+    /**
+     * Styles applied to the separator element.
+     */
+    separator: _propTypes.default.string,
+
+    /**
+     * Styles applied to the titles container element.
+     */
+    titles: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Type of step navigation. Values = {"Simple", "Default"}.
+   */
+  type: _propTypes.default.oneOf(["Simple", "Default"]),
+
+  /**
+   * Steps to show on the component.
+   */
+  steps: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * Class names to override styles on the step component.
+     */
+    className: _propTypes.default.string,
+
+    /**
+     * Class names to override styles on the separator component after the step.
+     */
+    separatorClassName: _propTypes.default.string,
+
+    /**
+     * Class names to override styles on the title component above the step.
+     */
+    titleClassName: _propTypes.default.string,
+
+    /**
+     * Title of the step.
+     */
+    title: _propTypes.default.string.isRequired,
+
+    /**
+     * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}.
+     */
+    state: _propTypes.default.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
+
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled: _propTypes.default.bool
+  })).isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps. Values = {"XS", "SM", "MD", "LG", "XL"}
+   */
+  stepSize: _propTypes.default.oneOf(["XS", "SM", "MD", "LG", "XL"]),
+
+  /**
+   * Width of the component element on each breakpoint screen resolution.
+   */
+  width: _propTypes.default.shape({
+    xs: _propTypes.default.number,
+    sm: _propTypes.default.number,
+    md: _propTypes.default.number,
+    lg: _propTypes.default.number,
+    xl: _propTypes.default.number
+  }),
+
+  /**
+   * Defines either show a title or only a tooltip on each step component
+   */
+  showTitles: _propTypes.default.bool
+} : void 0;
+
+var _default = (0, _styles.withStyles)(_styles2.default, {
+  name: "HvStepNavigation"
+})(HvStepNavigation);
+
+exports.default = _default;
+//# sourceMappingURL=StepNavigation.js.map

package/dist/StepNavigation/StepNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepNavigation.js","names":["HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","styled","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","withStyles","separatorElement","clsx","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","margin","propTypes","PropTypes","string","shape","isRequired","oneOf","arrayOf","disabled","bool","xs","sm","md","lg","xl","styles","name"],"sources":["../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { Typography, styled, useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(state)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.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 li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.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       * Define if a step is disabled/enabled.\n       * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n       */\n      disabled: PropTypes.bool,\n    })\n  ).isRequired,\n  /**\n   * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n   */\n  stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * Width of the component element on each breakpoint screen resolution.\n   */\n  width: PropTypes.shape({\n    xs: PropTypes.number,\n    sm: PropTypes.number,\n    md: PropTypes.number,\n    lg: PropTypes.number,\n    xl: PropTypes.number,\n  }),\n  /**\n   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}

package/dist/StepNavigation/index.d.ts

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

package/dist/StepNavigation/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 _StepNavigation.default;
+  }
+});
+
+var _StepNavigation = _interopRequireDefault(require("./StepNavigation"));
+//# sourceMappingURL=index.js.map

package/dist/StepNavigation/index.js.map

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

package/dist/StepNavigation/styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles() {
+  return {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    titles: {
+      display: "flex"
+    },
+    ol: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexWrap: "wrap",
+      padding: 0,
+      listStyle: "none"
+    },
+    li: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    separator: {
+      userSelect: "none",
+      "& > div": {
+        display: "flex"
+      }
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/StepNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root","display","flexDirection","titles","ol","alignItems","justifyContent","flexWrap","padding","listStyle","li","separator","userSelect"],"sources":["../../src/StepNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  titles: {\n    display: \"flex\",\n  },\n  ol: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexWrap: \"wrap\",\n    padding: 0,\n    listStyle: \"none\",\n  },\n  li: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  separator: {\n    userSelect: \"none\",\n    \"& > div\": {\n      display: \"flex\",\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;MACJC,OAAO,EAAE,MADL;MAEJC,aAAa,EAAE;IAFX,CADc;IAKpBC,MAAM,EAAE;MACNF,OAAO,EAAE;IADH,CALY;IAQpBG,EAAE,EAAE;MACFH,OAAO,EAAE,MADP;MAEFI,UAAU,EAAE,QAFV;MAGFC,cAAc,EAAE,QAHd;MAIFC,QAAQ,EAAE,MAJR;MAKFC,OAAO,EAAE,CALP;MAMFC,SAAS,EAAE;IANT,CARgB;IAgBpBC,EAAE,EAAE;MACFT,OAAO,EAAE,MADP;MAEFI,UAAU,EAAE,QAFV;MAGFC,cAAc,EAAE;IAHd,CAhBgB;IAqBpBK,SAAS,EAAE;MACTC,UAAU,EAAE,MADH;MAET,WAAW;QACTX,OAAO,EAAE;MADA;IAFF;EArBS,CAAP;AAAA,CAAf;;eA6BeF,M"}

package/dist/StepNavigation/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TITLE_WIDTH = exports.TITLE_MARGIN = exports.STEP_MARGIN = exports.SEPARATOR_WIDTH = void 0;
+var TITLE_MARGIN = 20;
+exports.TITLE_MARGIN = TITLE_MARGIN;
+var TITLE_WIDTH = 215;
+exports.TITLE_WIDTH = TITLE_WIDTH;
+var STEP_MARGIN = 20;
+exports.STEP_MARGIN = STEP_MARGIN;
+var SEPARATOR_WIDTH = 100;
+exports.SEPARATOR_WIDTH = SEPARATOR_WIDTH;
+//# sourceMappingURL=utils.js.map

package/dist/StepNavigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["TITLE_MARGIN","TITLE_WIDTH","STEP_MARGIN","SEPARATOR_WIDTH"],"sources":["../../src/StepNavigation/utils.js"],"sourcesContent":["const TITLE_MARGIN = 20;\nconst TITLE_WIDTH = 215;\nconst STEP_MARGIN = 20;\nconst SEPARATOR_WIDTH = 100;\n\nexport { STEP_MARGIN, TITLE_MARGIN, TITLE_WIDTH, SEPARATOR_WIDTH };\n"],"mappings":";;;;;;AAAA,IAAMA,YAAY,GAAG,EAArB;;AACA,IAAMC,WAAW,GAAG,GAApB;;AACA,IAAMC,WAAW,GAAG,EAApB;;AACA,IAAMC,eAAe,GAAG,GAAxB"}

package/dist/index.d.ts

@@ -15,3 +15,9 @@ export * from "./NotificationPanel";
 
 export { default as HvTimeAgo } from "./TimeAgo";
 export * from "./TimeAgo";
+
+export { default as HvImageCarousel } from "./ImageCarousel";
+export * from "./ImageCarousel";
+
+export { default as HvStepNavigation } from "./StepNavigation";
+export * from "./StepNavigation";

package/dist/index.js

@@ -29,7 +29,9 @@ var _exportNames = {
   HvInlineEditor: true,
   HvNavigationAnchors: true,
   HvNotificationPanel: true,
-  HvTimeAgo: true
+  HvTimeAgo: true,
+  HvImageCarousel: true,
+  HvStepNavigation: true
 };
 Object.defineProperty(exports, "HvColorPicker", {
   enumerable: true,
@@ -43,6 +45,12 @@ Object.defineProperty(exports, "HvDrawer", {
     return _Drawer.default;
   }
 });
+Object.defineProperty(exports, "HvImageCarousel", {
+  enumerable: true,
+  get: function get() {
+    return _ImageCarousel.default;
+  }
+});
 Object.defineProperty(exports, "HvInlineEditor", {
   enumerable: true,
   get: function get() {
@@ -61,6 +69,12 @@ Object.defineProperty(exports, "HvNotificationPanel", {
     return _NotificationPanel.default;
   }
 });
+Object.defineProperty(exports, "HvStepNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _StepNavigation.default;
+  }
+});
 Object.defineProperty(exports, "HvTimeAgo", {
   enumerable: true,
   get: function get() {
@@ -92,6 +106,10 @@ Object.keys(_TimeAgo).forEach(function (key) {
   });
 });
 
+var _ImageCarousel = _interopRequireDefault(require("./ImageCarousel"));
+
+var _StepNavigation = _interopRequireDefault(require("./StepNavigation"));
+
 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; }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\n\nexport { default as HvDrawer } from \"./Drawer\";\n\nexport { default as HvInlineEditor } from \"./InlineEditor\";\n\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\n\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\n\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\n\nexport { default as HvDrawer } from \"./Drawer\";\n\nexport { default as HvInlineEditor } from \"./InlineEditor\";\n\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\n\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\n\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\n\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\n\nexport { default as HvStepNavigation } from \"./StepNavigation\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAEA"}

package/dist/legacy/ImageCarousel/ImageCarousel.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { StandardProps } from "@mui/material";
+
+export type HvImageCarouselClassKey = "root";
+
+export type HvImageCarouselProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvImageCarouselClassKey
+>;
+
+export default function HvImageCarousel(props: HvImageCarouselProps): JSX.Element | null;