@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTModal/theme.js

@@ -0,0 +1,48 @@
+import { resolveCssValue } from '../../utils/classesUtils';
+import { getShadow } from '../../utils/shadowUtils';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette.light['01'],
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      '&::backdrop': {
+        backgroundColor: resolveCssValue(theme.Palette.dark['05']),
+        opacity: '0.25'
+      }
+    },
+    statusInfo: {
+      backgroundColor: theme.Palette.information['04']
+    },
+    statusWarning: {
+      backgroundColor: theme.Palette.warning['04']
+    },
+    statusSuccess: {
+      backgroundColor: theme.Palette.success['04']
+    },
+    statusError: {
+      backgroundColor: theme.Palette.error['04']
+    },
+    iconInfo: {
+      backgroundColor: theme.Palette.information['02']
+    },
+    iconWarning: {
+      backgroundColor: theme.Palette.warning['02']
+    },
+    iconSuccess: {
+      backgroundColor: theme.Palette.success['02']
+    },
+    iconError: {
+      backgroundColor: theme.Palette.error['02']
+    },
+    actions: {
+      borderTopColor: theme.Palette.light['04']
+    }
+  };
+};

package/dist/esm/components/UTOnboarding/README.md

@@ -0,0 +1,49 @@
+# 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
+  -  closeButtonDataTestId: string | data-testid para el botón de cerrar
+  -  descriptionDataTestId: string | data-testid para la descripción
+  -  nextButtonDataTestId: string | data-testid para el botón de siguiente
+  -  prevButtonDataTestId: string | data-testid para el botón de atrás
+  -  titleDataTestId: string | data-testid para el título

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import 'intro.js/introjs.css';
+import { bool, number, object, string } from 'prop-types';
+import styles from './styles.module.scss';
+const OnboardingStep = _ref => {
+  let {
+    currentStep,
+    descriptionDataTestId,
+    hideFooter = false,
+    step,
+    totalSteps,
+    variant
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "".concat(styles.description, " ").concat(styles["".concat(variant, "Description")]),
+    "data-testid": descriptionDataTestId
+  }, step.description), step.vectorImage ? /*#__PURE__*/React.createElement(step.vectorImage, {
+    alt: "",
+    className: styles.wizardImage
+  }) : step.image && /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: styles.wizardImage,
+    src: step.image
+  }), !hideFooter && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "".concat(styles.counterSteps, " ").concat(styles["".concat(variant, "CounterSteps")])
+  }, currentStep + 1, " de ", totalSteps)));
+};
+OnboardingStep.propTypes = {
+  currentStep: number,
+  descriptionDataTestId: string,
+  hideFooter: bool,
+  step: object,
+  totalSteps: number,
+  variant: string
+};
+export default OnboardingStep;

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

@@ -0,0 +1,68 @@
+.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: var(--light01);
+  color: var(--dark05);
+  &:hover {
+    color: var(--light01);
+    background-color: var(--dark05);
+  }
+}
+
+.wizardImage {
+  max-height: 180px;
+  max-width: 264px;
+  object-fit: cover;
+}
+
+.lightDescription {
+  color: var(--gray04);
+}
+
+.lightCounterSteps {
+  color: var(--dark05);
+}
+
+.darkDescription,
+.informationDescription,
+.darkCounterSteps,
+.informationCounterSteps {
+  color: var(--light01);
+}

package/dist/esm/components/UTOnboarding/constants.js

@@ -0,0 +1,12 @@
+export const VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+export const DEFAULT_PROPS = {
+  variant: 'dark'
+};
+export const DONE_LABEL = 'Finalizar';
+export const NEXT_LABEL = 'Siguiente';
+export const PREV_LABEL = 'Atrás';
+export const START_LABEL = 'Comenzar';

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

@@ -0,0 +1,144 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Steps } from 'intro.js-react';
+import 'intro.js/introjs.css';
+import { array, bool, func, object, objectOf, string } from 'prop-types';
+import { mergeClasses } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import { TEST_IDS } from '../../constants/testIds';
+import OnboardingStep from './components/OnboardingStep';
+import { retrieveStyle } from './theme';
+import { DONE_LABEL, NEXT_LABEL, PREV_LABEL, START_LABEL } from './constants';
+import styles from './styles.module.scss';
+const {
+  onboarding
+} = 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 = useMemo(() => mergeClasses(themeClasses, classNames), [themeClasses, classNames]) || {};
+  const [currentStep, setCurrentStep] = useState(0);
+  const [loading, setLoading] = 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);
+  useEffect(() => {
+    setLoading(false);
+  }, [steps]);
+  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(styles.suggestionReference);
+    } else {
+      var _referenceLayer$class2;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class2 = referenceLayer.classList) === null || _referenceLayer$class2 === void 0 || _referenceLayer$class2.remove(styles.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(styles.displayNone);
+    } else {
+      var _footer$classList2;
+      footer === null || footer === void 0 || (_footer$classList2 = footer.classList) === null || _footer$classList2 === void 0 || _footer$classList2.remove(styles.displayNone);
+    }
+  });
+  return loading ? null : /*#__PURE__*/React.createElement(Steps, {
+    enabled: enabled,
+    steps: steps.map((step, index) => ({
+      ...step,
+      intro: step.description ? /*#__PURE__*/React.createElement(OnboardingStep, {
+        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(styles.suggestionOverlay);
+      } else {
+        var _overlay$classList2;
+        overlay === null || overlay === void 0 || (_overlay$classList2 = overlay.classList) === null || _overlay$classList2 === void 0 || _overlay$classList2.remove(styles.suggestionOverlay);
+      }
+    },
+    onComplete: handleComplete || {},
+    options: {
+      buttonClass: "".concat(styles.button, " ").concat(styles["".concat(variant, "Button")] || '', " ").concat(classes.buttons),
+      doneLabel: DONE_LABEL,
+      exitOnEsc: false,
+      exitOnOverlayClick: false,
+      helperElementPadding: 0,
+      hidePrev: true,
+      nextLabel: currentStep === 0 ? START_LABEL : NEXT_LABEL,
+      prevLabel: PREV_LABEL,
+      showBullets: false,
+      showProgress: false,
+      tooltipClass: "".concat(styles.tooltipContainer, " ").concat(classes.onboardingContainer),
+      highlightClass: (_steps$currentStep3 = steps[currentStep]) !== null && _steps$currentStep3 !== void 0 && _steps$currentStep3.isSuggestion ? styles.suggestionHighlight : styles.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: objectOf(string),
+  classes: objectOf(string),
+  closeButtonDataTestId: string,
+  descriptionDataTestId: string,
+  enabled: bool,
+  handleComplete: func,
+  handleOnClose: func,
+  nextButtonDataTestId: string,
+  options: object,
+  prevButtonDataTestId: string,
+  steps: array,
+  titleDataTestId: string,
+  variant: string
+};
+export default WithTheme(retrieveStyle)(UTOnboarding);

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

@@ -0,0 +1,176 @@
+$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 !important;
+  color: var(--light01) !important;
+  margin: 0 !important;
+  padding: 16px !important;
+  width: 296px !important;
+  z-index: 1290 !important;
+  [class*='#{$introjs-skipbutton}'] {
+    font-size: 30px !important;
+    font-weight: 400 !important;
+    height: fit-content !important;
+    line-height: 32px !important;
+    position: relative !important;
+    top: -3px !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(--dark05) !important;
+  border-radius: 4px !important;
+  box-shadow: none !important;
+  color: var(--actionNegative04) !important;
+  cursor: pointer !important;
+  font-family: 'Inter', sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  line-height: 1.375rem !important;
+  padding: 4px 8px !important;
+  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;
+}
+
+.darkButton {
+  background-color: var(--dark05) !important;
+  color: var(--actionNegative04) !important;
+}
+
+.informationButton {
+  background-color: transparent !important;
+  color: var(--actionNegative05) !important;
+}
+
+.lightButton {
+  background-color: transparent !important;
+  color: var(--actionNeutral05) !important;
+}
+
+.button:hover {
+  opacity: 0.5 !important;
+}
+
+[class*='#{$intro-js-disabled-button-class}'] {
+  border-color: none;
+  cursor: auto;
+}
+[class*='#{$introjs-tooltip-header}'] {
+  display: flex !important;
+  padding: 0 !important;
+}
+
+[class*='#{$introjs-tooltiptext}'] {
+  padding: 0 !important;
+}
+
+[class*='#{$introjs-tooltip-title}'] {
+  font-family: 'Inter', sans-serif !important;
+  font-size: 16px !important;
+  font-weight: 500 !important;
+  place-self: center !important;
+}
+
+[class*='#{$introjs-overlay}'] {
+  z-index: 1280 !important;
+}
+
+[class*='#{$introjs-nextbutton}'] {
+  &:focus {
+    outline: none !important;
+  }
+}
+
+[class*='#{$introjs-tooltip-reference-layer}'] {
+  margin: 16px !important;
+  z-index: 1290 !important;
+}
+
+[class*='#{$introjs-helper-layer}'] {
+  z-index: 1275 !important;
+}
+
+[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) !important;
+  color: var(--light01) !important;
+
+  [class*='#{$introjs-skipbutton}'] {
+    border-radius: 4px !important;
+    color: var(--light01) !important;
+    &:hover {
+      background-color: var(--actionAccent03) !important;
+    }
+  }
+}
+[class*='#{$introjs-arrow}'] {
+  border: none !important;
+}
+.suggestionReference {
+  height: unset !important;
+}
+
+.tooltipContainer {
+  @extend %tooltipContainer;
+}
+
+.displayNone {
+  display: none !important;
+}
+
+[class*='#{$introjs-tooltipbuttons}'] {
+  border-top: none !important;
+  display: flex !important;
+  grid-gap: 8px !important;
+  justify-content: flex-end !important;
+  padding: 0 !important;
+  padding-top: 16px !important;
+}
+
+.highlight {
+  border-radius: 0 !important;
+  box-shadow:
+    inset 0px 0px 0px 4px #17f455,
+    rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
+  box-sizing: border-box !important;
+  z-index: 1290 !important;
+}

package/dist/esm/components/UTOnboarding/theme.js

@@ -0,0 +1,111 @@
+import { DEFAULT_PROPS, VARIANTS } from './constants';
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant !== VARIANTS.light ? theme.Palette[variant]['05'] : theme.Palette.light['01'];
+};
+const getLabelTheme = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return {
+    [VARIANTS.dark]: theme.Palette.light['01'],
+    [VARIANTS.information]: theme.Palette.light['01'],
+    [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 {
+    [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'],
+    [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'],
+    [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 {
+    [VARIANTS.dark]: theme.Palette.dark['05'],
+    [VARIANTS.information]: theme.Palette.dark['05'],
+    [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];
+};
+export const validateProps = _ref5 => {
+  let {
+    variant
+  } = _ref5;
+  return {
+    variant: VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant]
+  };
+};
+export 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")
+      }
+    }
+  };
+};