@widergy/energy-ui 3.7.4 → 3.8.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [3.8.0](https://github.com/widergy/energy-ui/compare/v3.7.5...v3.8.0) (2024-06-06)
+
+
+### Bug Fixes
+
+* remove onboarding in example ([8b531c0](https://github.com/widergy/energy-ui/commit/8b531c097c00ff4c54f87cfeed20c532d91e48c4))
+* remove prev button for first step ([e7f59b4](https://github.com/widergy/energy-ui/commit/e7f59b4fca9f63425f509df0b1f8e5fcb5b9f014))
+* some fixes ([2b642de](https://github.com/widergy/energy-ui/commit/2b642de2b9c4eb79cbc906182ba837d80b6e4077))
+* some fixes ([3c86c20](https://github.com/widergy/energy-ui/commit/3c86c203b5515b6151b13cf5defef499f94256b4))
+
+
+### Features
+
+* add utonboarding ([8eff9a7](https://github.com/widergy/energy-ui/commit/8eff9a70ad6286954bae20bdc4913f06efed7591))
+
+## [3.7.5](https://github.com/widergy/energy-ui/compare/v3.7.4...v3.7.5) (2024-06-05)
+
+
+### Bug Fixes
+
+* progress bar count ([#454](https://github.com/widergy/energy-ui/issues/454)) ([831bdcc](https://github.com/widergy/energy-ui/commit/831bdccb95e242aa65743e538f730abccb07a0e8))
+
 ## [3.7.4](https://github.com/widergy/energy-ui/compare/v3.7.3...v3.7.4) (2024-06-03)
 
 

package/dist/components/UTBreadcrumbs/index.js

@@ -149,6 +149,7 @@ const UTBreadcrumbs = _ref => {
       key: "".concat(route, "-").concat(label)
     }, !route && !menuItems || disableMenu ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: _stylesModule.default.label,
+      variant: "small",
       weight: "medium"
     }, colorThemesDefinition.label), label) : /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
       classNames: {
@@ -161,6 +162,7 @@ const UTBreadcrumbs = _ref => {
       variant: "text"
     }, colorThemesDefinition.button), "".concat(label)), !isLast && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: classes.separator,
+      variant: "small",
       weight: "medium"
     }, colorThemesDefinition.label), separator));
   }), !disableMenu && /*#__PURE__*/_react.default.createElement(_UTMenu.default, _extends({

package/dist/components/UTOnboarding/README.md

@@ -0,0 +1,44 @@
+# UTOnboarding
+
+### Description
+
+Onboarding component.
+
+### Variants
+
+- Default: variant = 'dark'
+- Information: variant = 'information'
+- Light: variant = 'light'
+
+### Props
+
+- handleOnClose: function --> optional, se ejecutara cuando se cierra el onboarding
+- handleComplete: function --> optional, se ejecutara cuando se completa el onboarding
+- options: object | Espera recibir un objeto propio de la libreria de intro react js. Ejemplo de valores posibles
+  - nextLabel: string --> Next button label
+  - prevLabel: string --> Previous button label
+  - options: objeto --> Ejemplo de lo que se puede pasar:
+    {{ positionPrecedence: ['right'] }} (posicion del onboarding)
+- steps: array of object --> requerido
+
+  - Cada objeto espera recibir:
+
+    ` {
+    title: '¡Bienvenido a tu oficina virtual!',
+    element: '.step_1',
+    image: '',
+    description:
+      'Inicia el tutorial de introducción y descubrí todas las gestiones que podés realizar en tus cuentas.'
+}`
+
+  - title: Titulo del onboarding
+  - element: string | CSS selector to use for the step
+  - position: string | Position of the tooltip
+  - intro : string | The tooltip content
+  - description: string | si quiero agregar una imagen voy a tener que pasarle una description en lugar del intro
+  - image: imagen de tipo png
+  - vectorImage: imagen de tipo svg
+  - hideFooter: bool | oculta los botones y los steps
+  - highlightClass: CSS class of the helperLayer.
+  - tooltipClass: CSS class of the tooltip
+  - isSuggestion: bool | si es el primer paso y no quiero que tenga tooltip puedo dejarlo en true

package/dist/components/UTOnboarding/components/OnboardingStep/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("intro.js/introjs.css");
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const OnboardingStep = _ref => {
+  let {
+    hideFooter = false,
+    currentStep,
+    step,
+    totalSteps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
+    className: _stylesModule.default.description
+  }, step.description), step.vectorImage ? /*#__PURE__*/_react.default.createElement(step.vectorImage, {
+    alt: "",
+    className: _stylesModule.default.wizardImage
+  }) : step.image && /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    className: _stylesModule.default.wizardImage,
+    src: step.image
+  }), !hideFooter && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: _stylesModule.default.counterSteps
+  }, currentStep + 1, " de ", totalSteps)));
+};
+OnboardingStep.propTypes = {
+  currentStep: _propTypes.number,
+  hideFooter: _propTypes.bool,
+  step: _propTypes.object,
+  totalSteps: _propTypes.number
+};
+var _default = exports.default = OnboardingStep;

package/dist/components/UTOnboarding/components/OnboardingStep/styles.module.scss

@@ -0,0 +1,55 @@
+@import '../../../../scss/variables/colors.module.scss';
+
+.description {
+  padding: 0;
+  margin-top: 4px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.counterSteps {
+  font-size: 12px;
+  padding: 0;
+  margin-top: 4px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  align-self: center;
+}
+
+.footer {
+  display: flex;
+  margin-top: 16px;
+  justify-content: space-between;
+  align-items: center;
+  height: fit-content;
+  position: absolute;
+}
+
+.buttons {
+  padding: 4px 8px;
+  font-size: 14px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  border-radius: 4px;
+  border: 0;
+  color: inherit;
+}
+
+.nextButton {
+  background-color: $white;
+  color: #091e42;
+  &:hover {
+    color: $white;
+    background-color: #091e42;
+  }
+}
+
+.wizardImage {
+  max-height: 180px;
+  max-width: 264px;
+  object-fit: cover;
+}

package/dist/components/UTOnboarding/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANTS = exports.START_LABEL = exports.PREV_LABEL = exports.NEXT_LABEL = exports.DONE_LABEL = exports.DEFAULT_PROPS = void 0;
+const VARIANTS = exports.VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'dark'
+};
+const DONE_LABEL = exports.DONE_LABEL = 'Finalizar';
+const NEXT_LABEL = exports.NEXT_LABEL = 'Siguiente';
+const PREV_LABEL = exports.PREV_LABEL = 'Atrás';
+const START_LABEL = exports.START_LABEL = 'Comenzar';

package/dist/components/UTOnboarding/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _intro = require("intro.js-react");
+require("intro.js/introjs.css");
+var _propTypes = require("prop-types");
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _OnboardingStep = _interopRequireDefault(require("./components/OnboardingStep"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 && {}.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 UTOnboarding = _ref => {
+  var _steps$currentStep$is, _steps$currentStep, _steps$currentStep$hi, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
+  let {
+    classes: themeClasses,
+    classNames,
+    handleComplete,
+    handleOnClose,
+    options,
+    steps,
+    variant
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [themeClasses, classNames]) || {};
+  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [enabled, setEnabled] = (0, _react.useState)(true);
+  const currentStepIsSuggestion = (_steps$currentStep$is = (_steps$currentStep = steps[currentStep]) === null || _steps$currentStep === void 0 ? void 0 : _steps$currentStep.isSuggestion) !== null && _steps$currentStep$is !== void 0 ? _steps$currentStep$is : false;
+  const hideFooter = (_steps$currentStep$hi = (_steps$currentStep2 = steps[currentStep]) === null || _steps$currentStep2 === void 0 ? void 0 : _steps$currentStep2.hideFooter) !== null && _steps$currentStep$hi !== void 0 ? _steps$currentStep$hi : false;
+  const totalSteps = steps.length;
+  (0, _react.useEffect)(() => {
+    setLoading(false);
+  }, [steps]);
+  (0, _react.useEffect)(() => {
+    const referenceLayer = document.querySelector('.introjs-tooltipReferenceLayer');
+    if (currentStepIsSuggestion) {
+      var _referenceLayer$class;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class = referenceLayer.classList) === null || _referenceLayer$class === void 0 || _referenceLayer$class.add(_stylesModule.default.suggestionReference);
+    } else {
+      var _referenceLayer$class2;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class2 = referenceLayer.classList) === null || _referenceLayer$class2 === void 0 || _referenceLayer$class2.remove(_stylesModule.default.suggestionReference);
+    }
+    const footer = document.querySelector('.introjs-tooltipbuttons');
+    if (hideFooter) {
+      var _footer$classList;
+      footer === null || footer === void 0 || (_footer$classList = footer.classList) === null || _footer$classList === void 0 || _footer$classList.add(_stylesModule.default.displayNone);
+    } else {
+      var _footer$classList2;
+      footer === null || footer === void 0 || (_footer$classList2 = footer.classList) === null || _footer$classList2 === void 0 || _footer$classList2.remove(_stylesModule.default.displayNone);
+    }
+  });
+  return loading ? null : /*#__PURE__*/_react.default.createElement(_intro.Steps, {
+    enabled: enabled,
+    steps: steps.map((step, index) => ({
+      ...step,
+      intro: step.description ? /*#__PURE__*/_react.default.createElement(_OnboardingStep.default, {
+        key: step,
+        step: step,
+        currentStep: index,
+        totalSteps: totalSteps,
+        classes: classes,
+        hideFooter: step === null || step === void 0 ? void 0 : step.hideFooter,
+        buttonPreviousTitle: step === null || step === void 0 ? void 0 : step.buttonPreviousTitle,
+        nextStep: step === null || step === void 0 ? void 0 : step.nextStep,
+        variant: variant
+      }) : step.intro
+    })),
+    initialStep: 0,
+    onExit: handleOnClose || (() => setEnabled(false)),
+    onBeforeChange: nextStep => {
+      var _steps$nextStep;
+      const overlay = document.querySelector('.introjs-overlay');
+      setCurrentStep(nextStep);
+      if ((_steps$nextStep = steps[nextStep]) !== null && _steps$nextStep !== void 0 && _steps$nextStep.isSuggestion) {
+        var _overlay$classList;
+        overlay === null || overlay === void 0 || (_overlay$classList = overlay.classList) === null || _overlay$classList === void 0 || _overlay$classList.add(_stylesModule.default.suggestionOverlay);
+      } else {
+        var _overlay$classList2;
+        overlay === null || overlay === void 0 || (_overlay$classList2 = overlay.classList) === null || _overlay$classList2 === void 0 || _overlay$classList2.remove(_stylesModule.default.suggestionOverlay);
+      }
+    },
+    onComplete: handleComplete || {},
+    options: {
+      buttonClass: "".concat(_stylesModule.default.button, " ").concat(classes.buttons),
+      doneLabel: _constants.DONE_LABEL,
+      exitOnEsc: false,
+      exitOnOverlayClick: false,
+      helperElementPadding: 20,
+      hidePrev: true,
+      nextLabel: currentStep === 0 ? _constants.START_LABEL : _constants.NEXT_LABEL,
+      prevLabel: _constants.PREV_LABEL,
+      showBullets: false,
+      showProgress: false,
+      tooltipClass: "".concat(_stylesModule.default.tooltipContainer, " ").concat(classes.onboardingContainer),
+      highlightClass: (_steps$currentStep3 = steps[currentStep]) !== null && _steps$currentStep3 !== void 0 && _steps$currentStep3.isSuggestion ? _stylesModule.default.suggestionHighlight : _stylesModule.default.highlight,
+      ...((_steps$currentStep4 = steps[currentStep]) !== null && _steps$currentStep4 !== void 0 && _steps$currentStep4.hideFooter ? {
+        hidePrev: true,
+        hideNext: true,
+        showProgress: false,
+        showButtons: false
+      } : null),
+      ...options
+    }
+  });
+};
+UTOnboarding.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  handleComplete: _propTypes.func,
+  handleOnClose: _propTypes.func,
+  options: _propTypes.object,
+  steps: _propTypes.array,
+  variant: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTOnboarding);

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

@@ -0,0 +1,162 @@
+@import '../../scss/variables/colors.module.scss';
+$intro-js-disabled-button-class: 'introjs-disabled';
+$introjs-progress: 'introjs-progress';
+$introjs-progressbar: 'introjs-progressbar';
+$introjs-skipbutton: 'introjs-skipbutton';
+$introjs-arrow: 'introjs-arrow';
+$introjs-tooltip-header: 'introjs-tooltip-header';
+$introjs-tooltiptext: 'introjs-tooltiptext';
+$introjs-tooltip-title: 'introjs-tooltip-title';
+$introjs-nextbutton: 'introjs-nextbutton';
+$introjs-prevbutton: 'introjs-prevbutton';
+$introjs-overlay: 'introjs-overlay';
+$introjs-tooltip-reference-layer: 'introjs-tooltipReferenceLayer';
+$introjs-helper-layer: 'introjs-helperLayer';
+$introjs-show-element: 'introjs-showElement';
+$introjs-tooltipbuttons: 'introjs-tooltipbuttons';
+
+%tooltipContainer {
+  box-sizing: border-box;
+  color: $white;
+  margin: 0;
+  padding: 16px !important;
+  width: 296px;
+  z-index: 1290;
+  [class*='#{$introjs-skipbutton}'] {
+    color: $white;
+    font-size: 30px;
+    font-weight: 400;
+    position: relative;
+    top: -10px;
+    &:hover {
+      background-color: var(--actionAccent03) !important;
+    }
+  }
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url('https://fonts.gstatic.com/s/inter/v8/UcCO3FwrqlXbO-JbATNBXYFF.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+1F1E6-1F1FF;
+}
+
+.button {
+  background-color: var(--actionAccent04) !important;
+  border-radius: 4px;
+  box-shadow: none;
+  color: var(--actionNegative04) !important;
+  cursor: pointer;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.375rem;
+  padding: 4px 8px;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.button:hover {
+  opacity: 0.5;
+}
+
+[class*='#{$intro-js-disabled-button-class}'] {
+  border-color: none;
+  cursor: auto;
+}
+[class*='#{$introjs-tooltip-header}'] {
+  display: flex;
+  padding: 0;
+}
+
+[class*='#{$introjs-tooltiptext}'] {
+  padding: 0;
+}
+
+[class*='#{$introjs-tooltip-title}'] {
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+[class*='#{$introjs-overlay}'] {
+  z-index: 1280;
+}
+
+[class*='#{$introjs-nextbutton}'] {
+  &:focus {
+    outline: none;
+  }
+}
+
+[class*='#{$introjs-tooltip-reference-layer}'] {
+  margin: 16px;
+  z-index: 1290;
+}
+
+[class*='#{$introjs-helper-layer}'] {
+  z-index: 1275;
+}
+
+[class*='#{$introjs-show-element}'] {
+  z-index: 1285 !important;
+}
+
+.suggestionHighlight {
+  box-shadow: none !important;
+  height: unset !important;
+}
+
+.suggestionOverlay {
+  display: none;
+}
+
+.tooltipSuggestionContainer {
+  @extend %tooltipContainer;
+  background-color: var(--actionNeutral05);
+  color: var(--light01);
+
+  [class*='#{$introjs-skipbutton}'] {
+    border-radius: 4px;
+    color: var(--light01);
+    &:hover {
+      background-color: var(--actionAccent03) !important;
+    }
+  }
+}
+[class*='#{$introjs-arrow}'] {
+  border: none;
+}
+.suggestionReference {
+  height: unset !important;
+}
+
+.tooltipContainer {
+  @extend %tooltipContainer;
+}
+
+.displayNone {
+  display: none !important;
+}
+
+[class*='#{$introjs-tooltipbuttons}'] {
+  border-top: none;
+  display: flex;
+  grid-gap: 8px;
+  justify-content: flex-end;
+  padding-top: 16px !important;
+  padding: 0;
+}
+
+.highlight {
+  border-radius: 0;
+  border: 4px #17f455 solid;
+  box-shadow:
+    #17f455 0px 0px 1px 2px,
+    rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
+}

package/dist/components/UTOnboarding/theme.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateProps = exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant !== _constants.VARIANTS.light ? theme.Palette[variant]['05'] : theme.Palette.light['01'];
+};
+const getLabelTheme = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return {
+    [_constants.VARIANTS.dark]: theme.Palette.light['01'],
+    [_constants.VARIANTS.information]: theme.Palette.light['01'],
+    [_constants.VARIANTS.light]: theme.Palette.dark['05']
+  }[variant];
+};
+const getButtonTheme = _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  return {
+    [_constants.VARIANTS.dark]: theme.Palette.actions.negative['04'],
+    [_constants.VARIANTS.information]: theme.Palette.actions.negative['04'],
+    [_constants.VARIANTS.light]: theme.Palette.actions.accent['04']
+  }[variant];
+};
+const getButtonNextTextTheme = _ref4 => {
+  let {
+    theme,
+    variant
+  } = _ref4;
+  return {
+    [_constants.VARIANTS.dark]: theme.Palette.actions.neutral['05'],
+    [_constants.VARIANTS.information]: theme.Palette.actions.neutral['05'],
+    [_constants.VARIANTS.light]: theme.Palette.actions.negative['05']
+  }[variant];
+};
+const validateProps = _ref5 => {
+  let {
+    variant
+  } = _ref5;
+  return {
+    variant: _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant]
+  };
+};
+exports.validateProps = validateProps;
+const retrieveStyle = _ref6 => {
+  let {
+    theme,
+    variant
+  } = _ref6;
+  return {
+    onboardingContainer: {
+      backgroundColor: getBackgroundColor({
+        theme,
+        ...validateProps({
+          variant
+        })
+      }),
+      color: getLabelTheme({
+        theme,
+        ...validateProps({
+          variant
+        })
+      }),
+      '& .introjs-skipbutton': {
+        color: getLabelTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        })
+      },
+      '& .introjs-nextbutton': {
+        backgroundColor: "".concat(getButtonTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        }), " !important"),
+        color: "".concat(getButtonNextTextTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        }), " !important")
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

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

@@ -94,7 +94,7 @@ const UTWorkflowContainer = _ref => {
       label: _stylesModule.default.progressBarLabel,
       root: _stylesModule.default.progress
     },
-    value: currentStep * 100 / (stepsCount + 1)
+    value: currentStep * 100 / stepsCount
   }), /*#__PURE__*/_react.default.createElement(_NavActions.default, {
     backButton: backButton,
     checkbox: checkbox,

package/dist/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "UTModal", {
     return _UTModal.default;
   }
 });
+Object.defineProperty(exports, "UTOnboarding", {
+  enumerable: true,
+  get: function () {
+    return _UTOnboarding.default;
+  }
+});
 Object.defineProperty(exports, "UTPagination", {
   enumerable: true,
   get: function () {
@@ -444,4 +450,5 @@ var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtuali
 var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
 var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
 var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
+var _UTOnboarding = _interopRequireDefault(require("./components/UTOnboarding"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.7.4",
+  "version": "3.8.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -39,6 +39,8 @@
     "d3": "^7.0.1",
     "dayjs": "^1.10.7",
     "emojilib": "^3.0.10",
+    "intro.js": "^7.2.0",
+    "intro.js-react": "0.7.1",
     "node-sass": "^8.0.0",
     "numeral": "^2.0.6",
     "object-hash": "^3.0.0",