@widergy/energy-ui 3.3.0 → 3.4.0

package/dist/components/UTStepper/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _classesUtils = require("../../utils/classesUtils");
+var _Step = _interopRequireDefault(require("./components/Step"));
+var _Connectors = _interopRequireDefault(require("./components/Connectors"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const UTStepper = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    currentStage,
+    stages,
+    stepperSize,
+    withPadding
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const orderedStages = Object.values(stages).sort((a, b) => (a === null || a === void 0 ? void 0 : a.id) - (b === null || b === void 0 ? void 0 : b.id));
+  const numberOfSteps = orderedStages.length;
+  const size = stepperSize === _constants.SIZES.LARGE && orderedStages.every(stage => stage.Icon) ? _constants.SIZES.LARGE : _constants.SIZES.SMALL;
+  const isCompleted = stageNumber => stageNumber < currentStage;
+  const isActive = stageNumber => stageNumber === currentStage;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.stepper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: withPadding ? _stylesModule.default.paddingContainer : _stylesModule.default.container
+  }, orderedStages.map(stage => /*#__PURE__*/_react.default.createElement(_Step.default, {
+    classes,
+    withPadding,
+    size,
+    isCompleted,
+    isActive,
+    stage
+  })), /*#__PURE__*/_react.default.createElement(_Connectors.default, {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  })));
+};
+UTStepper.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  currentStage: _propTypes.number,
+  stages: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: _propTypes.number,
+    label: _propTypes.string,
+    Icon: _propTypes.elementType
+  })),
+  stepperSize: (0, _propTypes.oneOf)([_constants.SIZES.LARGE, _constants.SIZES.SMALL]),
+  withPadding: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTStepper);

package/dist/components/UTStepper/styles.module.scss

@@ -0,0 +1,27 @@
+.stepper {
+  padding: 24px 0 48px;
+}
+
+.paddingContainer {
+  display: flex;
+  justify-content: space-around;
+  position: relative;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+
+  > :first-child {
+    > div {
+      left: -4px;
+    }
+  }
+
+  > :nth-last-child(2) {
+    > div {
+      right: -4px;
+    }
+  }
+}

package/dist/components/UTStepper/theme.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11;
+  let {
+    theme
+  } = _ref;
+  return {
+    connector: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['05']
+    },
+    coloredProgress: {
+      backgroundColor: "".concat((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.actions) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.accent['04'], " !important")
+    },
+    stepContainerS: {
+      backgroundColor: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['05'],
+      borderColor: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['03']
+    },
+    stepContainerL: {
+      backgroundColor: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03']
+    },
+    activeS: {
+      backgroundColor: _colorsModule.default.white,
+      borderColor: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.actions) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6.accent['04']
+    },
+    activeL: {
+      backgroundColor: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.actions) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7.accent['04']
+    },
+    completed: {
+      backgroundColor: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.actions) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8.accent['04'],
+      borderColor: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.actions) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9.accent['04']
+    },
+    activeIcon: {
+      fill: _colorsModule.default.white
+    },
+    nextIcon: {
+      fill: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.gray['04']
+    },
+    coloredLabel: {
+      color: "".concat((_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 || (_theme$Palette11 = _theme$Palette11.actions) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.accent['04'], " !important")
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTextInput/theme.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
-var _lodash = _interopRequireDefault(require("lodash"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const retrieveStyle = _ref => {
@@ -129,6 +129,6 @@ const retrieveMuiTheme = (theme, muiTheme) => {
       }
     }
   };
-  return (0, _styles.createTheme)(_lodash.default.merge(muiTheme, mui));
+  return (0, _styles.createTheme)((0, _merge.default)(muiTheme, mui));
 };
 exports.retrieveMuiTheme = retrieveMuiTheme;

package/dist/components/UTWorkflowContainer/index.js

@@ -4,125 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));
-var _ArrowForward = _interopRequireDefault(require("@material-ui/icons/ArrowForward"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _UTProgressBar = _interopRequireDefault(require("../UTProgressBar"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _classesUtils = require("../../utils/classesUtils");
-var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
-var _constants = require("./constants");
-var _types = require("./types");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-var _theme = require("./theme");
-var _usePrevious = require("./hooks/use-previous");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const UTWorkflowContainer = _ref => {
   let {
-    backButton,
-    children,
-    classNames,
-    classes: themeClasses = {},
-    currentStep,
-    extraActions,
-    forceStepNumber = false,
-    hideStepCounter,
-    nextButton,
-    onExit,
-    smallButtons = false,
-    stepCounter: StepCounter,
-    stepsCount,
-    subtitle,
-    title,
-    TitleIcon,
-    withIcon = false
+    version = 'V0',
+    ...props
   } = _ref;
-  (0, _react.useEffect)(() => () => onExit && onExit(), []);
-  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
-  const BackIcon = backButton.Icon || _ArrowBack.default;
-  const NextIcon = nextButton.Icon || _ArrowForward.default;
-  const previousStepNumber = (0, _usePrevious.usePrevious)(currentStep);
-  const [visibleStepNumber, setVisibleStepNumber] = (0, _react.useState)(currentStep);
-  const skippedStepsQuantity = currentStep - visibleStepNumber;
-  (0, _react.useEffect)(() => {
-    if (previousStepNumber) setVisibleStepNumber(visibleStepNumber + Math.sign(currentStep - previousStepNumber));
-  }, [currentStep]);
-  const hideActions = (currentStep === 1 && !backButton.isVisible || backButton.isHidden) && hideStepCounter && nextButton.isHidden;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.container
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.progress
-  }, stepsCount && /*#__PURE__*/_react.default.createElement(_UTProgressBar.default, {
-    value: visibleStepNumber / (stepsCount - skippedStepsQuantity) * 100,
-    classNames: {
-      colorPrimary: classes.colorPrimary,
-      barColorPrimary: classes.barColorPrimary
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.workflowContainer, " ").concat(_stylesModule.default.workflowContainer)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n            ".concat(_stylesModule.default.actionsContainer, "\n            ").concat(classes.actionsContainer, "\n            ").concat(hideActions ? _stylesModule.default.hidden : '')
-  }, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
-    button: backButton,
-    isHidden: currentStep === 1 && !backButton.isVisible || backButton.isHidden,
-    className: "".concat(classes.backButton, " ").concat(_stylesModule.default.backButton),
-    buttonProps: {
-      colorTheme: 'primary',
-      Icon: (withIcon || smallButtons) && BackIcon,
-      iconPlacement: 'left',
-      variant: 'semitransparent'
-    }
-  }, !smallButtons && (backButton.label || _constants.BACK)), !hideStepCounter && visibleStepNumber && (StepCounter ? /*#__PURE__*/_react.default.createElement(StepCounter, null) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(_stylesModule.default.stepInfo, " ").concat(classes.stepCounter),
-    weight: "medium"
-  }, "".concat(_constants.STEP, " ").concat(forceStepNumber ? currentStep : visibleStepNumber))), extraActions, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
-    isHidden: nextButton.isHidden,
-    button: nextButton,
-    className: "".concat(classes.nextButton, " ").concat(_stylesModule.default.nextButton),
-    buttonProps: {
-      colorTheme: 'primary',
-      Icon: (withIcon || smallButtons) && NextIcon,
-      iconPlacement: 'right'
-    }
-  }, !smallButtons && (nextButton.label || _constants.NEXT))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.workflowContent, " ").concat(classes.content)
-  }, (title || subtitle) && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.titles
-  }, title && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.titleAndTitleIconContainer
-  }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
-    className: classes.titleIcon
-  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    variant: "title2",
-    weight: "medium",
-    withMarkdown: true
-  }, title)), subtitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.subtitle,
-    colorTheme: "gray",
-    withMarkdown: true
-  }, subtitle)), children)));
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTWorkflowContainer.propTypes = {
-  backButton: _types.buttonTypes,
-  children: _propTypes.element,
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  currentStep: _propTypes.number.isRequired,
-  extraActions: _propTypes.element,
-  forceStepNumber: _propTypes.bool,
-  hideStepCounter: _propTypes.bool,
-  nextButton: _types.buttonTypes,
-  onExit: _propTypes.func,
-  smallButtons: _propTypes.bool,
-  stepCounter: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element]),
-  stepsCount: _propTypes.number,
-  subtitle: _propTypes.string,
-  title: _propTypes.string,
-  TitleIcon: _propTypes.element,
-  withIcon: _propTypes.bool
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);
+var _default = exports.default = UTWorkflowContainer;

package/dist/components/UTWorkflowContainer/{components → versions/V0/components}/ActionButton/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
 var _types = require("../../types");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/UTWorkflowContainer/versions/V0/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));
+var _ArrowForward = _interopRequireDefault(require("@material-ui/icons/ArrowForward"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTProgressBar = _interopRequireDefault(require("../../../UTProgressBar"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _classesUtils = require("../../../../utils/classesUtils");
+var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
+var _constants = require("./constants");
+var _types = require("./types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
+var _usePrevious = require("./hooks/use-previous");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const UTWorkflowContainer = _ref => {
+  let {
+    backButton,
+    children,
+    classNames,
+    classes: themeClasses = {},
+    currentStep,
+    extraActions,
+    forceStepNumber = false,
+    hideStepCounter,
+    nextButton,
+    onExit,
+    smallButtons = false,
+    stepCounter: StepCounter,
+    stepsCount,
+    subtitle,
+    title,
+    TitleIcon,
+    withIcon = false
+  } = _ref;
+  (0, _react.useEffect)(() => () => onExit && onExit(), []);
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const BackIcon = backButton.Icon || _ArrowBack.default;
+  const NextIcon = nextButton.Icon || _ArrowForward.default;
+  const previousStepNumber = (0, _usePrevious.usePrevious)(currentStep);
+  const [visibleStepNumber, setVisibleStepNumber] = (0, _react.useState)(currentStep);
+  const skippedStepsQuantity = currentStep - visibleStepNumber;
+  (0, _react.useEffect)(() => {
+    if (previousStepNumber) setVisibleStepNumber(visibleStepNumber + Math.sign(currentStep - previousStepNumber));
+  }, [currentStep]);
+  const hideActions = (currentStep === 1 && !backButton.isVisible || backButton.isHidden) && hideStepCounter && nextButton.isHidden;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.progress
+  }, stepsCount && /*#__PURE__*/_react.default.createElement(_UTProgressBar.default, {
+    value: visibleStepNumber / (stepsCount - skippedStepsQuantity) * 100,
+    classNames: {
+      colorPrimary: classes.colorPrimary,
+      barColorPrimary: classes.barColorPrimary
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.workflowContainer, " ").concat(_stylesModule.default.workflowContainer)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n            ".concat(_stylesModule.default.actionsContainer, "\n            ").concat(classes.actionsContainer, "\n            ").concat(hideActions ? _stylesModule.default.hidden : '')
+  }, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    button: backButton,
+    isHidden: currentStep === 1 && !backButton.isVisible || backButton.isHidden,
+    className: "".concat(classes.backButton, " ").concat(_stylesModule.default.backButton),
+    buttonProps: {
+      colorTheme: 'primary',
+      Icon: (withIcon || smallButtons) && BackIcon,
+      iconPlacement: 'left',
+      variant: 'semitransparent'
+    }
+  }, !smallButtons && (backButton.label || _constants.BACK)), !hideStepCounter && visibleStepNumber && (StepCounter ? /*#__PURE__*/_react.default.createElement(StepCounter, null) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.stepInfo, " ").concat(classes.stepCounter),
+    weight: "medium"
+  }, "".concat(_constants.STEP, " ").concat(forceStepNumber ? currentStep : visibleStepNumber))), extraActions, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    isHidden: nextButton.isHidden,
+    button: nextButton,
+    className: "".concat(classes.nextButton, " ").concat(_stylesModule.default.nextButton),
+    buttonProps: {
+      colorTheme: 'primary',
+      Icon: (withIcon || smallButtons) && NextIcon,
+      iconPlacement: 'right'
+    }
+  }, !smallButtons && (nextButton.label || _constants.NEXT))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.workflowContent, " ").concat(classes.content)
+  }, (title || subtitle) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.titles
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titleAndTitleIconContainer
+  }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
+    className: classes.titleIcon
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "title2",
+    weight: "medium",
+    withMarkdown: true
+  }, title)), subtitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.subtitle,
+    colorTheme: "gray",
+    withMarkdown: true
+  }, subtitle)), children)));
+};
+UTWorkflowContainer.propTypes = {
+  backButton: _types.buttonTypes,
+  children: _propTypes.element,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  currentStep: _propTypes.number.isRequired,
+  extraActions: _propTypes.element,
+  forceStepNumber: _propTypes.bool,
+  hideStepCounter: _propTypes.bool,
+  nextButton: _types.buttonTypes,
+  onExit: _propTypes.func,
+  smallButtons: _propTypes.bool,
+  stepCounter: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element]),
+  stepsCount: _propTypes.number,
+  subtitle: _propTypes.string,
+  title: _propTypes.string,
+  TitleIcon: _propTypes.element,
+  withIcon: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);

package/dist/components/UTWorkflowContainer/{theme.js → versions/V0/theme.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
-var _classesUtils = require("../../utils/classesUtils");
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
+var _classesUtils = require("../../../../utils/classesUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const retrieveStyle = _ref => {
   var _theme$UTWorkflowCont, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3;

package/dist/components/UTWorkflowContainer/versions/V1/README.md

@@ -0,0 +1,37 @@
+# UTWorkflowContainer
+
+### Description
+
+This component serves as a wrapper for each step of a workflow
+
+## Props
+
+| Name               | Type             | Default | Description |
+| ------------------ | ---------------- | ------- | ----------- |
+| backButton         | buttonType       |         | Defines behaviour and/or rendering of the button on the left corner.            
+| children           | element          |         | The contents that will be rendered inside the component.
+| classNames         | object of string |         | Additional classes.     
+| classes            | object of string |         | Classes returned by UTWorkflowContainer's own [theme](./theme.js#L40) `retrieveStyle`.     
+| currentStep        | number           | 1       | Receives a number that will fill up the progress bar proportionally to the number of steps given. It will also hide the backButton if its equal to 1. It is up to the parent component to update this number accordingly
+| extraActions       | element          |         | If needed, the parent component can pass as extraActions elements that will be rendered between the nextButton and the backButton.     
+| nextButton         | buttonTypes      |         | Defines behaviour and/or rendering of the button on the right corner.     
+| onExit             | function         |         | Cleanup function.     
+| stepsCount         | number           |         | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar      
+| subtitle           | string           |         | Text that will be rendered below the title.     
+| title              | string           |         | Text that will be rendered between the stages and the content. It is required in order to show any other text header elements      
+| TitleIcon          | element          |         | Icon that will be rendered on top of the title
+| withIcon           | bool             | false   | Defines whether the nextButton and backButton will aditionally have their own icons inside.     
+| helpText           | string           |         | Text that will be rendered at the bottom of the header.     
+| stages             | stageType        |         | Defines the structure of the stepper indicator at the top of the component. It is required for each key inside the object given to have a property `id`, the indicator will be ordered by id. Aditionally each stage is able to add a property `label` which will display at the bottom of the corresponding indicator.    
+| currentStage       | number           |         | Receives a number that represents which stage id will be active. It is up to the parent component to update this number accordingly.     
+| tagline            | string           |         | Text that will be rendered in uppercase on top of the title.     
+| requiredFieldInfo  | string           |         | Text to display as a helper for required fields, it will be rendered below the description.     
+| stepperSize        | 'S' \| 'L'       | 'S'     | Variant that defines whether to use small icons for the stepper indicator or large ones. It is required for the 'L' variant that every stage has a custom icon defined. If size is set to 'L' but there's at least one stage without a defined custom icon the size will be defaulted to 'S'   
+| withStepperPadding | bool             | true    | If false, the stepper indicator will occupy the full width of the container, rendering the first and last stage's label aligned towards the center.     
+
+### Custom types
+
+| Type       | Shape |
+| ---------- | ----- |
+| buttonType | element \| `{ onClick: func, disabled: bool, label: string, buttonProps: object, Icon: bool \| element \| func }` |
+| stageType  | `[ { id: number, label: string, Icon: element }, ... ]` |

package/dist/components/UTWorkflowContainer/versions/V1/components/NavActions/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NEXT = exports.BACK = void 0;
+const NEXT = exports.NEXT = 'Siguiente';
+const BACK = exports.BACK = 'Atrás';

package/dist/components/UTWorkflowContainer/versions/V1/components/NavActions/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTCheckbox = _interopRequireDefault(require("../../../../../UTCheckbox"));
+var _useScreenSize = require("../../../../../../utils/useScreenSize");
+var _types = require("../../types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const NavActions = _ref => {
+  let {
+    backButton = {},
+    checkbox,
+    currentStep,
+    nextButton = {},
+    primaryAction,
+    secondaryAction
+  } = _ref;
+  const {
+    isMobileOrTablet
+  } = (0, _useScreenSize.useScreenSize)();
+  const isBackButtonHidden = currentStep === 1 && !backButton.isVisible || backButton.isHidden;
+  const hideActions = isBackButtonHidden && nextButton.isHidden;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n      ".concat(_stylesModule.default.actionsContainer, "\n      ").concat(hideActions ? _stylesModule.default.hidden : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionsGroup
+  }, !isBackButtonHidden && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: "secondary",
+    disabled: backButton.disabled,
+    Icon: backButton === null || backButton === void 0 ? void 0 : backButton.Icon,
+    iconPlacement: "left",
+    onClick: backButton.onClick,
+    size: "large",
+    variant: "text"
+  }, backButton.label || _constants.BACK), secondaryAction && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: secondaryAction.colorTheme || 'primary',
+    disabled: secondaryAction.disabled,
+    iconPlacement: "left",
+    onClick: secondaryAction.onClick,
+    size: "large",
+    variant: secondaryAction.variant || 'text'
+  }, secondaryAction.label), checkbox && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.checkboxContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, checkbox))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionsGroup
+  }, primaryAction && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: primaryAction.colorTheme || 'primary',
+    disabled: primaryAction.disabled,
+    iconPlacement: "right",
+    onClick: primaryAction.onClick,
+    size: "large",
+    variant: primaryAction.variant || 'semitransparent'
+  }, primaryAction.label), !nextButton.isHidden && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: "primary",
+    disabled: nextButton.disabled,
+    Icon: nextButton === null || nextButton === void 0 ? void 0 : nextButton.Icon,
+    iconPlacement: "right",
+    onClick: nextButton.onClick,
+    size: "large"
+  }, nextButton.label || _constants.NEXT)));
+};
+NavActions.propTypes = {
+  backButton: _types.buttonTypes,
+  checkbox: (0, _propTypes.shape)({
+    text: _propTypes.string
+  }),
+  currentStep: _propTypes.number,
+  nextButton: _types.buttonTypes,
+  primaryAction: _types.buttonTypes,
+  secondaryAction: _types.buttonTypes,
+  withIcon: _propTypes.bool
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(NavActions);

package/dist/components/UTWorkflowContainer/versions/V1/components/NavActions/styles.module.scss

@@ -0,0 +1,34 @@
+@import '../../../../../../scss/variables/mediaQueries.module.scss';
+
+.hidden {
+  display: none;
+}
+
+.actionsContainer {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 16px 32px;
+
+  @media #{$mobile} {
+    padding: 16px;
+  }
+}
+
+.actionsGroup {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.checkboxContainer {
+  width: 100%;
+}
+
+.navAction {
+  flex-shrink: 0;
+  @media #{$mobile} {
+    width: 100%;
+  }
+}