@widergy/energy-ui 3.172.3 → 3.173.0

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

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

package/dist/components/UTOnboarding/constants.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),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"},DEFAULT_PROPS=exports.DEFAULT_PROPS={variant:"dark"},DONE_LABEL=exports.DONE_LABEL="Finalizar",NEXT_LABEL=exports.NEXT_LABEL="Siguiente",PREV_LABEL=exports.PREV_LABEL="Atrás",START_LABEL=exports.START_LABEL="Comenzar";
+"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

@@ -1 +1,152 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_intro=require("intro.js-react");require("intro.js/introjs.css");var _propTypes=require("prop-types"),_classesUtils=require("../../utils/classesUtils"),_WithTheme=_interopRequireDefault(require("../WithTheme")),_testIds=require("../../constants/testIds"),_OnboardingStep=_interopRequireDefault(require("./components/OnboardingStep")),_theme=require("./theme"),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const{onboarding:onboarding}=_testIds.TEST_IDS,UTOnboarding=_ref=>{var _steps$currentStep$is,_steps$currentStep,_steps$currentStep$hi,_steps$currentStep2,_steps$currentStep3,_steps$currentStep4;let{classNames:classNames,classes:themeClasses,closeButtonDataTestId:closeButtonDataTestId=onboarding.close,descriptionDataTestId:descriptionDataTestId=onboarding.description,enabled:enabled,handleComplete:handleComplete,handleOnClose:handleOnClose,nextButtonDataTestId:nextButtonDataTestId=onboarding.nextButton,options:options,prevButtonDataTestId:prevButtonDataTestId=onboarding.prevButton,steps:steps,titleDataTestId:titleDataTestId=onboarding.title,variant:variant}=_ref;const classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(themeClasses,classNames),[themeClasses,classNames])||{},[currentStep,setCurrentStep]=(0,_react.useState)(0),[loading,setLoading]=(0,_react.useState)(!0),currentStepIsSuggestion=null!==(_steps$currentStep$is=null===(_steps$currentStep=steps[currentStep])||void 0===_steps$currentStep?void 0:_steps$currentStep.isSuggestion)&&void 0!==_steps$currentStep$is&&_steps$currentStep$is,hideFooter=null!==(_steps$currentStep$hi=null===(_steps$currentStep2=steps[currentStep])||void 0===_steps$currentStep2?void 0:_steps$currentStep2.hideFooter)&&void 0!==_steps$currentStep$hi&&_steps$currentStep$hi,totalSteps=steps.length;return setTimeout(()=>{var _nextButton$attribute,_prevButton$atrtibute,_skipButton$attribute,_stepTitle$attributes,_nextButton$setAttrib,_prevButton$setAttrib,_skipButton$setAttrib,_stepTitle$setAttribu;const nextButton=document.querySelector(".introjs-nextbutton"),prevButton=document.querySelector(".introjs-prevbutton"),skipButton=document.querySelector(".introjs-skipbutton"),stepTitle=document.querySelector(".introjs-tooltip-title");null!=nextButton&&null!==(_nextButton$attribute=nextButton.attributes)&&void 0!==_nextButton$attribute&&_nextButton$attribute["data-testid"]&&null!=prevButton&&null!==(_prevButton$atrtibute=prevButton.atrtibutes)&&void 0!==_prevButton$atrtibute&&_prevButton$atrtibute["data-testid"]&&null!=skipButton&&null!==(_skipButton$attribute=skipButton.attributes)&&void 0!==_skipButton$attribute&&_skipButton$attribute["data-testid"]&&null!=stepTitle&&null!==(_stepTitle$attributes=stepTitle.attributes)&&void 0!==_stepTitle$attributes&&_stepTitle$attributes["data-testid"]||(null==nextButton||null===(_nextButton$setAttrib=nextButton.setAttribute)||void 0===_nextButton$setAttrib||_nextButton$setAttrib.call(nextButton,"data-testid",nextButtonDataTestId),null==prevButton||null===(_prevButton$setAttrib=prevButton.setAttribute)||void 0===_prevButton$setAttrib||_prevButton$setAttrib.call(prevButton,"data-testid",prevButtonDataTestId),null==skipButton||null===(_skipButton$setAttrib=skipButton.setAttribute)||void 0===_skipButton$setAttrib||_skipButton$setAttrib.call(skipButton,"data-testid",closeButtonDataTestId),null==stepTitle||null===(_stepTitle$setAttribu=stepTitle.setAttribute)||void 0===_stepTitle$setAttribu||_stepTitle$setAttribu.call(stepTitle,"data-testid",titleDataTestId))},1),(0,_react.useEffect)(()=>{setLoading(!1)},[steps]),(0,_react.useEffect)(()=>{const referenceLayer=document.querySelector(".introjs-tooltipReferenceLayer");var _referenceLayer$class,_referenceLayer$class2;currentStepIsSuggestion?null==referenceLayer||null===(_referenceLayer$class=referenceLayer.classList)||void 0===_referenceLayer$class||_referenceLayer$class.add(_stylesModule.default.suggestionReference):null==referenceLayer||null===(_referenceLayer$class2=referenceLayer.classList)||void 0===_referenceLayer$class2||_referenceLayer$class2.remove(_stylesModule.default.suggestionReference);const footer=document.querySelector(".introjs-tooltipbuttons");var _footer$classList,_footer$classList2;hideFooter?null==footer||null===(_footer$classList=footer.classList)||void 0===_footer$classList||_footer$classList.add(_stylesModule.default.displayNone):null==footer||null===(_footer$classList2=footer.classList)||void 0===_footer$classList2||_footer$classList2.remove(_stylesModule.default.displayNone)}),loading?null:_react.default.createElement(_intro.Steps,{enabled:enabled,steps:steps.map((step,index)=>({...step,intro:step.description?_react.default.createElement(_OnboardingStep.default,{buttonPreviousTitle:null==step?void 0:step.buttonPreviousTitle,classes:classes,currentStep:index,descriptionDataTestId:descriptionDataTestId,hideFooter:null==step?void 0:step.hideFooter,key:step,nextStep:null==step?void 0:step.nextStep,step:step,totalSteps:totalSteps,variant:variant}):step.intro})),initialStep:0,onExit:handleOnClose,onBeforeChange:nextStep=>{var _steps$nextStep;const overlay=document.querySelector(".introjs-overlay");var _overlay$classList,_overlay$classList2;(setCurrentStep(nextStep),null!==(_steps$nextStep=steps[nextStep])&&void 0!==_steps$nextStep&&_steps$nextStep.isSuggestion)?null==overlay||null===(_overlay$classList=overlay.classList)||void 0===_overlay$classList||_overlay$classList.add(_stylesModule.default.suggestionOverlay):null==overlay||null===(_overlay$classList2=overlay.classList)||void 0===_overlay$classList2||_overlay$classList2.remove(_stylesModule.default.suggestionOverlay)},onComplete:handleComplete||{},options:{buttonClass:"".concat(_stylesModule.default.button," ").concat(_stylesModule.default["".concat(variant,"Button")]||""," ").concat(classes.buttons),doneLabel:_constants.DONE_LABEL,exitOnEsc:!1,exitOnOverlayClick:!1,helperElementPadding:0,hidePrev:!0,nextLabel:0===currentStep?_constants.START_LABEL:_constants.NEXT_LABEL,prevLabel:_constants.PREV_LABEL,showBullets:!1,showProgress:!1,tooltipClass:"".concat(_stylesModule.default.tooltipContainer," ").concat(classes.onboardingContainer),highlightClass:null!==(_steps$currentStep3=steps[currentStep])&&void 0!==_steps$currentStep3&&_steps$currentStep3.isSuggestion?_stylesModule.default.suggestionHighlight:_stylesModule.default.highlight,...null!==(_steps$currentStep4=steps[currentStep])&&void 0!==_steps$currentStep4&&_steps$currentStep4.hideFooter?{hidePrev:!0,hideNext:!0,showProgress:!1,showButtons:!1}:null,...options}})};UTOnboarding.propTypes={classNames:(0,_propTypes.objectOf)(_propTypes.string),classes:(0,_propTypes.objectOf)(_propTypes.string),closeButtonDataTestId:_propTypes.string,descriptionDataTestId:_propTypes.string,enabled:_propTypes.bool,handleComplete:_propTypes.func,handleOnClose:_propTypes.func,nextButtonDataTestId:_propTypes.string,options:_propTypes.object,prevButtonDataTestId:_propTypes.string,steps:_propTypes.array,titleDataTestId:_propTypes.string,variant:_propTypes.string};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTOnboarding);
+"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 _testIds = require("../../constants/testIds");
+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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  onboarding
+} = _testIds.TEST_IDS;
+const UTOnboarding = _ref => {
+  var _steps$currentStep$is, _steps$currentStep, _steps$currentStep$hi, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
+  let {
+    classNames,
+    classes: themeClasses,
+    closeButtonDataTestId = onboarding.close,
+    descriptionDataTestId = onboarding.description,
+    enabled,
+    handleComplete,
+    handleOnClose,
+    nextButtonDataTestId = onboarding.nextButton,
+    options,
+    prevButtonDataTestId = onboarding.prevButton,
+    steps,
+    titleDataTestId = onboarding.title,
+    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 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;
+
+  // This timeout is here only to get the querySelectors out of the call-stack order, giving the Step component time to render every child inside. This
+  // is necessary to find the html element searched by the selectors.
+  setTimeout(() => {
+    var _nextButton$attribute, _prevButton$atrtibute, _skipButton$attribute, _stepTitle$attributes, _nextButton$setAttrib, _prevButton$setAttrib, _skipButton$setAttrib, _stepTitle$setAttribu;
+    const nextButton = document.querySelector('.introjs-nextbutton');
+    const prevButton = document.querySelector('.introjs-prevbutton');
+    const skipButton = document.querySelector('.introjs-skipbutton');
+    const stepTitle = document.querySelector('.introjs-tooltip-title');
+    if (nextButton !== null && nextButton !== void 0 && (_nextButton$attribute = nextButton.attributes) !== null && _nextButton$attribute !== void 0 && _nextButton$attribute['data-testid'] && prevButton !== null && prevButton !== void 0 && (_prevButton$atrtibute = prevButton.atrtibutes) !== null && _prevButton$atrtibute !== void 0 && _prevButton$atrtibute['data-testid'] && skipButton !== null && skipButton !== void 0 && (_skipButton$attribute = skipButton.attributes) !== null && _skipButton$attribute !== void 0 && _skipButton$attribute['data-testid'] && stepTitle !== null && stepTitle !== void 0 && (_stepTitle$attributes = stepTitle.attributes) !== null && _stepTitle$attributes !== void 0 && _stepTitle$attributes['data-testid']) return;
+    nextButton === null || nextButton === void 0 || (_nextButton$setAttrib = nextButton.setAttribute) === null || _nextButton$setAttrib === void 0 || _nextButton$setAttrib.call(nextButton, 'data-testid', nextButtonDataTestId);
+    prevButton === null || prevButton === void 0 || (_prevButton$setAttrib = prevButton.setAttribute) === null || _prevButton$setAttrib === void 0 || _prevButton$setAttrib.call(prevButton, 'data-testid', prevButtonDataTestId);
+    skipButton === null || skipButton === void 0 || (_skipButton$setAttrib = skipButton.setAttribute) === null || _skipButton$setAttrib === void 0 || _skipButton$setAttrib.call(skipButton, 'data-testid', closeButtonDataTestId);
+    stepTitle === null || stepTitle === void 0 || (_stepTitle$setAttribu = stepTitle.setAttribute) === null || _stepTitle$setAttribu === void 0 || _stepTitle$setAttribu.call(stepTitle, 'data-testid', titleDataTestId);
+  }, 1);
+  (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, {
+        buttonPreviousTitle: step === null || step === void 0 ? void 0 : step.buttonPreviousTitle,
+        classes: classes,
+        currentStep: index,
+        descriptionDataTestId: descriptionDataTestId,
+        hideFooter: step === null || step === void 0 ? void 0 : step.hideFooter,
+        key: step,
+        nextStep: step === null || step === void 0 ? void 0 : step.nextStep,
+        step: step,
+        totalSteps: totalSteps,
+        variant: variant
+      }) : step.intro
+    })),
+    initialStep: 0,
+    onExit: handleOnClose,
+    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(_stylesModule.default["".concat(variant, "Button")] || '', " ").concat(classes.buttons),
+      doneLabel: _constants.DONE_LABEL,
+      exitOnEsc: false,
+      exitOnOverlayClick: false,
+      helperElementPadding: 0,
+      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 = {
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  closeButtonDataTestId: _propTypes.string,
+  descriptionDataTestId: _propTypes.string,
+  enabled: _propTypes.bool,
+  handleComplete: _propTypes.func,
+  handleOnClose: _propTypes.func,
+  nextButtonDataTestId: _propTypes.string,
+  options: _propTypes.object,
+  prevButtonDataTestId: _propTypes.string,
+  steps: _propTypes.array,
+  titleDataTestId: _propTypes.string,
+  variant: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTOnboarding);

package/dist/components/UTOnboarding/theme.js

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

package/dist/components/UTPagination/README.md

@@ -0,0 +1,242 @@
+# UTPagination
+
+A comprehensive pagination component that provides both page navigation and page size selection functionality. The component consists of two main parts: a page size selector and pagination controls.
+
+## Features
+
+- **Page Size Selection**: Dropdown to select number of items per page
+- **Page Navigation**: Previous/next buttons with page numbers
+- **Responsive Design**: Adapts to different screen sizes
+- **Customizable Themes**: Support for different color themes
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+- **Double Arrow Navigation**: Quick navigation to first/last page for large datasets
+- **Size Variants**: Support for different button sizes
+
+## Props
+
+| Prop                 | Type                             | Default   | Description                         |
+| -------------------- | -------------------------------- | --------- | ----------------------------------- |
+| `page`               | `number`                         | -         | Current page number (0-based)       |
+| `rowsPerPage`        | `number`                         | -         | Number of rows per page             |
+| `totalRows`          | `number`                         | -         | Total number of rows                |
+| `rowsPerPageOptions` | `number[]`                       | -         | Available options for rows per page |
+| `totalRowsLabel`     | `string`                         | -         | Label for total rows display        |
+| `onChangePage`       | `function`                       | -         | Callback when page changes          |
+| `onChangeRowPerPage` | `function`                       | -         | Callback when rows per page changes |
+| `isResponsive`       | `boolean`                        | -         | Enable responsive behavior          |
+| `colorThemes`        | `object`                         | `{}`      | Color themes for different elements |
+| `classes`            | `object`                         | -         | Custom CSS classes                  |
+| `size`               | `'small' \| 'medium' \| 'large'` | `'large'` | Size variant for navigation buttons |
+
+### Color Themes
+
+| Theme              | Type     | Description                         |
+| ------------------ | -------- | ----------------------------------- |
+| `pageButton`       | `string` | Color theme for page number buttons |
+| `navigationButton` | `string` | Color theme for navigation buttons  |
+| `totalRows`        | `string` | Color theme for total rows label    |
+
+### Classes
+
+| Class                     | Description                   |
+| ------------------------- | ----------------------------- |
+| `paginationContainer`     | Main container wrapper        |
+| `pagination`              | Pagination controls container |
+| `pageSizeSelectContainer` | Page size selector container  |
+| `pageSizeSelect`          | Page size select dropdown     |
+| `totalRowsLabel`          | Total rows label              |
+
+## Usage
+
+### Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { UTPagination } from '@energy/ui';
+
+function MyComponent() {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const totalRows = 150;
+  const rowsPerPageOptions = [10, 25, 50, 100];
+
+  const handlePageChange = newPage => {
+    setPage(newPage);
+  };
+
+  const handleRowsPerPageChange = newRowsPerPage => {
+    setRowsPerPage(newRowsPerPage);
+    setPage(0); // Reset to first page when changing page size
+  };
+
+  return (
+    <UTPagination
+      page={page}
+      rowsPerPage={rowsPerPage}
+      totalRows={totalRows}
+      rowsPerPageOptions={rowsPerPageOptions}
+      totalRowsLabel="items"
+      onChangePage={handlePageChange}
+      onChangeRowPerPage={handleRowsPerPageChange}
+    />
+  );
+}
+```
+
+### With Custom Themes
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="records"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  colorThemes={{
+    pageButton: 'primary',
+    navigationButton: 'secondary',
+    totalRows: 'gray'
+  }}
+/>
+```
+
+### With Custom Size
+
+The `size` prop controls the size of navigation buttons (previous/next arrows and double arrows). Available values:
+
+- `'small'`: Compact button size
+- `'medium'`: Standard button size
+- `'large'`: Large button size (default)
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  size="medium"
+/>
+```
+
+### Responsive Pagination
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  isResponsive={true}
+/>
+```
+
+### With Custom Classes
+
+```jsx
+<UTPagination
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalRows={totalRows}
+  rowsPerPageOptions={[10, 25, 50]}
+  totalRowsLabel="items"
+  onChangePage={handlePageChange}
+  onChangeRowPerPage={handleRowsPerPageChange}
+  classes={{
+    paginationContainer: 'custom-pagination-wrapper',
+    pagination: 'custom-pagination-controls',
+    pageSizeSelectContainer: 'custom-select-container',
+    pageSizeSelect: 'custom-select',
+    totalRowsLabel: 'custom-total-label'
+  }}
+/>
+```
+
+## Component Structure
+
+The UTPagination component is composed of two main sub-components:
+
+### PageSizeSelector
+
+- Displays a dropdown to select the number of items per page
+- Shows total count with customizable label
+- Supports custom styling and themes
+- Uses UTSelect component with outlined variant
+
+### Pagination
+
+- Navigation buttons (previous/next)
+- Page number buttons with active state styling
+- Double arrow navigation for large datasets (first/last page)
+- Responsive behavior that hides double arrows on smaller screens
+- Support for different button sizes
+
+## Constants
+
+| Constant                         | Value  | Description                                   |
+| -------------------------------- | ------ | --------------------------------------------- |
+| `PREPOSITION`                    | `'de'` | Preposition used in total rows label          |
+| `PAGINATION_LIMIT_DOUBLE_ARROWS` | `10`   | Minimum pages to show double arrow navigation |
+| `MAX_PAGINATION_ITEMS`           | `5`    | Maximum page numbers to display               |
+
+## Theme Integration
+
+The component integrates with the Energy UI theme system and supports the following theme properties:
+
+```javascript
+{
+  UTPagination: {
+    paginationContainer: {
+      marginTop: 32
+    },
+    pageSizeSelect: {
+      background: 'transparent',
+      fontSize: '14px',
+      padding: 6,
+      textAlign: 'center',
+      border: '1px solid #ccc',
+      hover: {
+        border: '1px solid #999'
+      }
+    },
+    pagination: {
+      gridGap: '16px'
+    }
+  },
+  Fonts: {
+    fontFamily: 'your-font-family'
+  }
+}
+```
+
+## Accessibility
+
+- Proper ARIA labels for navigation buttons
+- Keyboard navigation support
+- Screen reader friendly page announcements
+- Focus management for interactive elements
+- Semantic HTML structure
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Dependencies
+
+- React 16.8+
+- PropTypes
+- Energy UI theme system
+- UTButton component
+- UTSelect component
+- UTLabel component
+- @tabler/icons-react (for navigation icons)

package/dist/components/UTPagination/components/PageSizeSelector/index.js

@@ -1 +1,63 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTSelect=_interopRequireDefault(require("../../../UTSelect")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_commonTypes=require("../../../../types/commonTypes"),_utils=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const PageSizeSelector=_ref=>{let{classes:classes,colorThemes:colorThemes,options:options,rowsPerPage:rowsPerPage,onChangeRowPerPage:onChangeRowPerPage,label:label,totalRows:totalRows}=_ref;return _react.default.createElement("div",{className:_stylesModule.default.pageSizeSelector},_react.default.createElement("div",{className:_stylesModule.default.selectorContainer},_react.default.createElement(_UTSelect.default,{options:(0,_utils.getPageSizeOptions)(options,totalRows),labelKey:"label",valueKey:"value",input:{onChange:onChangeRowPerPage,value:rowsPerPage},disableFirstOption:!0,variant:"outlined",selectProps:{className:"".concat(_stylesModule.default.pageSizeSelectContainer," ").concat(classes.pageSizeSelectContainer),classes:{select:classes.pageSizeSelect}}})),_react.default.createElement(_UTLabel.default,{className:"".concat(_stylesModule.default.label," ").concat(classes.totalRowsLabel),colorTheme:colorThemes.totalRows||"gray"},label))};PageSizeSelector.propTypes={classes:_commonTypes.classesType,colorThemes:(0,_propTypes.shape)({pageButton:_propTypes.string,navigationButton:_propTypes.string,totalRows:_propTypes.string}),options:(0,_propTypes.arrayOf)(_propTypes.number),rowsPerPage:_propTypes.number,onChangeRowPerPage:_propTypes.func,label:_propTypes.string,totalRows:_propTypes.number};var _default=exports.default=PageSizeSelector;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTSelect = _interopRequireDefault(require("../../../UTSelect"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _commonTypes = require("../../../../types/commonTypes");
+var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PageSizeSelector = _ref => {
+  let {
+    classes,
+    colorThemes,
+    options,
+    rowsPerPage,
+    onChangeRowPerPage,
+    label,
+    totalRows
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.pageSizeSelector
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.selectorContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTSelect.default, {
+    options: (0, _utils.getPageSizeOptions)(options, totalRows),
+    labelKey: "label",
+    valueKey: "value",
+    input: {
+      onChange: onChangeRowPerPage,
+      value: rowsPerPage
+    },
+    disableFirstOption: true,
+    variant: "outlined",
+    selectProps: {
+      className: "".concat(_stylesModule.default.pageSizeSelectContainer, " ").concat(classes.pageSizeSelectContainer),
+      classes: {
+        select: classes.pageSizeSelect
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.label, " ").concat(classes.totalRowsLabel),
+    colorTheme: colorThemes.totalRows || 'gray'
+  }, label));
+};
+PageSizeSelector.propTypes = {
+  classes: _commonTypes.classesType,
+  colorThemes: (0, _propTypes.shape)({
+    pageButton: _propTypes.string,
+    navigationButton: _propTypes.string,
+    totalRows: _propTypes.string
+  }),
+  options: (0, _propTypes.arrayOf)(_propTypes.number),
+  rowsPerPage: _propTypes.number,
+  onChangeRowPerPage: _propTypes.func,
+  label: _propTypes.string,
+  totalRows: _propTypes.number
+};
+var _default = exports.default = PageSizeSelector;