@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,97 @@
-import React,{memo}from"react";import{bool,number,objectOf,shape,string}from"prop-types";import UTButton from"../../../../../UTButton";import UTCheckbox from"../../../../../UTCheckbox";import{buttonTypes}from"../../types";import{TEST_IDS}from"../../../../../../constants/testIds";import{useScreenSize}from"../../../../../../utils/useScreenSize";import styles from"./styles.module.scss";import{BACK,NEXT}from"./constants";const{workflowContainer:workflowContainer}=TEST_IDS,NavActions=_ref=>{var _backButton$dataTestI,_secondaryAction$data,_primaryAction$dataTe,_nextButton$dataTestI;let{backButton:backButton={},checkbox:checkbox,classes:classes,currentStep:currentStep,forceResponsive:forceResponsive,nextButton:nextButton={},primaryAction:primaryAction,secondaryAction:secondaryAction}=_ref;const{isMobileOrTablet:isMobileOrTablet}=useScreenSize(),isBackButtonHidden=1===currentStep&&!backButton.isVisible||backButton.isHidden;return React.createElement("div",{className:"".concat(styles.actionsContainer," ").concat(classes.actionsContainer)},(!isMobileOrTablet||!isBackButtonHidden)&&React.createElement("div",{className:"".concat(styles.actionsGroup," ").concat(!isBackButtonHidden&&styles.actionsGroupResponsive)},!isBackButtonHidden&&React.createElement(UTButton,{classNames:{root:"".concat(styles.navAction," ").concat(backButton.classes,"  ").concat(forceResponsive&&styles.navActionResponsive)},colorTheme:"secondary",dataTestId:null!==(_backButton$dataTestI=backButton.dataTestId)&&void 0!==_backButton$dataTestI?_backButton$dataTestI:workflowContainer.bottomNav.backButton,disabled:backButton.disabled,Icon:null==backButton?void 0:backButton.Icon,iconPlacement:"left",onClick:backButton.onClick,size:"large",variant:"text"},backButton.label||BACK),secondaryAction&&!isMobileOrTablet&&React.createElement(UTButton,{classNames:{root:"".concat(styles.navAction," ").concat(forceResponsive&&styles.navActionResponsive)},colorTheme:secondaryAction.colorTheme||"primary",dataTestId:null!==(_secondaryAction$data=secondaryAction.dataTestId)&&void 0!==_secondaryAction$data?_secondaryAction$data:workflowContainer.bottomNav.secondaryAction,disabled:secondaryAction.disabled,iconPlacement:"left",onClick:secondaryAction.onClick,size:"large",variant:secondaryAction.variant||"text"},secondaryAction.label),checkbox&&!isMobileOrTablet&&React.createElement("div",{className:styles.checkboxContainer},React.createElement(UTCheckbox,checkbox))),React.createElement("div",{className:"".concat(styles.actionsGroup," ").concat((isMobileOrTablet||forceResponsive)&&styles.actionsGroupResponsive)},primaryAction&&!isMobileOrTablet&&React.createElement(UTButton,{classNames:{root:"".concat(styles.navAction," ").concat(forceResponsive&&styles.navActionResponsive)},colorTheme:primaryAction.colorTheme||"primary",dataTestId:null!==(_primaryAction$dataTe=primaryAction.dataTestId)&&void 0!==_primaryAction$dataTe?_primaryAction$dataTe:workflowContainer.bottomNav.primaryAction,disabled:primaryAction.disabled,iconPlacement:"right",onClick:primaryAction.onClick,size:"large",variant:primaryAction.variant||"semitransparent"},primaryAction.label),!nextButton.isHidden&&React.createElement(UTButton,{classNames:{root:"".concat(styles.navAction," ").concat(nextButton.classes,"  ").concat(forceResponsive&&styles.navActionResponsive)},colorTheme:"primary",dataTestId:null!==(_nextButton$dataTestI=nextButton.dataTestId)&&void 0!==_nextButton$dataTestI?_nextButton$dataTestI:workflowContainer.bottomNav.nextButton,disabled:nextButton.disabled,Icon:null==nextButton?void 0:nextButton.Icon,iconPlacement:"right",onClick:nextButton.onClick,size:"large"},nextButton.label||NEXT)))};NavActions.propTypes={backButton:buttonTypes,checkbox:shape({text:string}),classes:objectOf(string),currentStep:number,forceResponsive:bool,nextButton:buttonTypes,primaryAction:buttonTypes,secondaryAction:buttonTypes,withIcon:bool};export default memo(NavActions);
+import React, { memo } from 'react';
+import { bool, number, objectOf, shape, string } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import UTCheckbox from '../../../../../UTCheckbox';
+import { buttonTypes } from '../../types';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import { useScreenSize } from '../../../../../../utils/useScreenSize';
+import styles from './styles.module.scss';
+import { BACK, NEXT } from './constants';
+const {
+  workflowContainer
+} = TEST_IDS;
+const NavActions = _ref => {
+  var _backButton$dataTestI, _secondaryAction$data, _primaryAction$dataTe, _nextButton$dataTestI;
+  let {
+    backButton = {},
+    checkbox,
+    classes,
+    currentStep,
+    forceResponsive,
+    nextButton = {},
+    primaryAction,
+    secondaryAction
+  } = _ref;
+  const {
+    isMobileOrTablet
+  } = useScreenSize();
+  const isBackButtonHidden = currentStep === 1 && !backButton.isVisible || backButton.isHidden;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.actionsContainer, " ").concat(classes.actionsContainer)
+  }, (!isMobileOrTablet || !isBackButtonHidden) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.actionsGroup, " ").concat(!isBackButtonHidden && styles.actionsGroupResponsive)
+  }, !isBackButtonHidden && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(backButton.classes, "  ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: "secondary",
+    dataTestId: (_backButton$dataTestI = backButton.dataTestId) !== null && _backButton$dataTestI !== void 0 ? _backButton$dataTestI : workflowContainer.bottomNav.backButton,
+    disabled: backButton.disabled,
+    Icon: backButton === null || backButton === void 0 ? void 0 : backButton.Icon,
+    iconPlacement: "left",
+    onClick: backButton.onClick,
+    size: "large",
+    variant: "text"
+  }, backButton.label || BACK), secondaryAction && !isMobileOrTablet && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: secondaryAction.colorTheme || 'primary',
+    dataTestId: (_secondaryAction$data = secondaryAction.dataTestId) !== null && _secondaryAction$data !== void 0 ? _secondaryAction$data : workflowContainer.bottomNav.secondaryAction,
+    disabled: secondaryAction.disabled,
+    iconPlacement: "left",
+    onClick: secondaryAction.onClick,
+    size: "large",
+    variant: secondaryAction.variant || 'text'
+  }, secondaryAction.label), checkbox && !isMobileOrTablet && /*#__PURE__*/React.createElement("div", {
+    className: styles.checkboxContainer
+  }, /*#__PURE__*/React.createElement(UTCheckbox, checkbox))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.actionsGroup, " ").concat((isMobileOrTablet || forceResponsive) && styles.actionsGroupResponsive)
+  }, primaryAction && !isMobileOrTablet && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: primaryAction.colorTheme || 'primary',
+    dataTestId: (_primaryAction$dataTe = primaryAction.dataTestId) !== null && _primaryAction$dataTe !== void 0 ? _primaryAction$dataTe : workflowContainer.bottomNav.primaryAction,
+    disabled: primaryAction.disabled,
+    iconPlacement: "right",
+    onClick: primaryAction.onClick,
+    size: "large",
+    variant: primaryAction.variant || 'semitransparent'
+  }, primaryAction.label), !nextButton.isHidden && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(nextButton.classes, "  ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: "primary",
+    dataTestId: (_nextButton$dataTestI = nextButton.dataTestId) !== null && _nextButton$dataTestI !== void 0 ? _nextButton$dataTestI : workflowContainer.bottomNav.nextButton,
+    disabled: nextButton.disabled,
+    Icon: nextButton === null || nextButton === void 0 ? void 0 : nextButton.Icon,
+    iconPlacement: "right",
+    onClick: nextButton.onClick,
+    size: "large"
+  }, nextButton.label || NEXT)));
+};
+NavActions.propTypes = {
+  backButton: buttonTypes,
+  checkbox: shape({
+    text: string
+  }),
+  classes: objectOf(string),
+  currentStep: number,
+  forceResponsive: bool,
+  nextButton: buttonTypes,
+  primaryAction: buttonTypes,
+  secondaryAction: buttonTypes,
+  withIcon: bool
+};
+export default /*#__PURE__*/memo(NavActions);

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

@@ -1 +1,13 @@
-import styles from"./styles.module.scss";const DEFAULT="default",FULL_WIDTH="fullWidth";export const VARIANTS={DEFAULT:DEFAULT,FULL_WIDTH:FULL_WIDTH};export const childrenContentStyle={[VARIANTS.DEFAULT]:styles.childrenContent,[VARIANTS.FULL_WIDTH]:styles.childrenContentFullWidth};export const CHILDREN_CONTAINER_ID="workflow-children-container-";export const FORMS_QUERY_SELECTOR="#".concat(CHILDREN_CONTAINER_ID).concat(VARIANTS.DEFAULT," form");
+import styles from './styles.module.scss';
+const DEFAULT = 'default';
+const FULL_WIDTH = 'fullWidth';
+export const VARIANTS = {
+  DEFAULT,
+  FULL_WIDTH
+};
+export const childrenContentStyle = {
+  [VARIANTS.DEFAULT]: styles.childrenContent,
+  [VARIANTS.FULL_WIDTH]: styles.childrenContentFullWidth
+};
+export const CHILDREN_CONTAINER_ID = 'workflow-children-container-';
+export const FORMS_QUERY_SELECTOR = "#".concat(CHILDREN_CONTAINER_ID).concat(VARIANTS.DEFAULT, " form");

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

@@ -1 +1,220 @@
-import React,{useEffect,useMemo}from"react";import{arrayOf,bool,element,func,number,object,objectOf,shape,string}from"prop-types";import isEmpty from"lodash/isEmpty";import UTCheckbox from"../../../UTCheckbox";import UTHeader from"../../../UTHeader";import UTProgressBar from"../../../UTProgressBar";import UTStepper from"../../../UTStepper";import UTWizard from"../../../UTWizard";import WithTheme from"../../../WithTheme";import{TEST_IDS}from"../../../../constants/testIds";import{mergeClasses}from"../../../../utils/classesUtils";import{useScreenSize}from"../../../../utils/useScreenSize";import NavActions from"./components/NavActions";import styles from"./styles.module.scss";import{buttonTypes}from"./types";import{CHILDREN_CONTAINER_ID,FORMS_QUERY_SELECTOR,VARIANTS,childrenContentStyle}from"./constants";import{retrieveStyle}from"./theme";const{workflowContainer:workflowContainer}=TEST_IDS,UTWorkflowContainer=_ref=>{let{backButton:backButton,banner:banner,checkbox:checkbox,children:children,classes:themeClasses={},classNames:classNames,currentStage:currentStage,currentStep:currentStep=1,forceResponsive:forceResponsive=!1,headerActions:headerActions,helpText:helpText,helpTextDataTestId:helpTextDataTestId=workflowContainer.header.helpText,navHidden:navHidden=!1,nextButton:nextButton,onExit:onExit,primaryAction:primaryAction,requiredFieldInfo:requiredFieldInfo,requiredFieldInfoDataTestId:requiredFieldInfoDataTestId=workflowContainer.header.requiredFieldInfo,secondaryAction:secondaryAction,stages:stages,stepperLabelProps:stepperLabelProps={},stepperSize:stepperSize="S",stepsCount:stepsCount,subtitle:subtitle,subtitleDataTestId:subtitleDataTestId=workflowContainer.header.subtitle,tagline:tagline,taglineDataTestId:taglineDataTestId=workflowContainer.header.tagline,title:title,titleDataTestId:titleDataTestId=workflowContainer.header.title,titleProps:titleProps={},variant:variant=VARIANTS.DEFAULT,withIcon:withIcon=!1,withStepperPadding:withStepperPadding=!0,wizardConfig:wizardConfig={}}=_ref;useEffect(()=>()=>onExit&&onExit(),[]);const classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),{isMobileOrTablet:isMobileOrTablet,isMobileSize:isMobileSize}=useScreenSize(),isBackButtonHidden=null==backButton?void 0:backButton.isHidden,isNextButtonHidden=null==nextButton?void 0:nextButton.isHidden,isNavHidden=navHidden||!!(stepsCount&&stepsCount===currentStep)&&isBackButtonHidden&&isNextButtonHidden;return useEffect(()=>{const processFormElements=callback=>{const currentFormElements=document.querySelectorAll(FORMS_QUERY_SELECTOR);isEmpty(currentFormElements)||currentFormElements.forEach(callback)},removeStylesFromForms=()=>{processFormElements(form=>{var _form$classList;null==form||null===(_form$classList=form.classList)||void 0===_form$classList||_form$classList.remove(styles.formContainer)})},applyStylesToForms=()=>{processFormElements(form=>{const childrenIsNotEmpty=!isEmpty(null==form?void 0:form.children),hasInputs=!isEmpty(form.querySelectorAll("input"));var _form$classList2;childrenIsNotEmpty&&hasInputs&&(null==form||null===(_form$classList2=form.classList)||void 0===_form$classList2||_form$classList2.add(styles.formContainer))})};if(isMobileSize)return removeStylesFromForms();const observer=new MutationObserver(()=>applyStylesToForms());return observer.observe(document.body,{childList:!0,subtree:!0}),applyStylesToForms(),()=>{removeStylesFromForms(),observer.disconnect()}},[currentStep,currentStage,isMobileSize]),React.createElement("div",{className:"".concat(styles.container," ").concat(classes.container)},React.createElement("div",{className:"".concat(styles.content," ").concat(classes.content)},stages&&React.createElement(UTStepper,{stepperSize:stepperSize,currentStage:currentStage,stages:stages,stepperLabelProps:stepperLabelProps,withPadding:withStepperPadding}),(title||isMobileOrTablet&&(primaryAction||secondaryAction))&&React.createElement(UTHeader,{actions:[...headerActions||[],...isMobileOrTablet?[primaryAction,secondaryAction].filter(action=>action):[]],banner:title&&banner,classNames:{outerContainer:"".concat(styles.headerContainer," ").concat(classes.headerContainer),titles:classes.titles},helpText:title&&helpText,helpTextDataTestId:helpTextDataTestId,isLastStep:isNavHidden,requiredFieldInfo:title&&requiredFieldInfo,requiredFieldInfoDataTestId:requiredFieldInfoDataTestId,subtitle:title&&subtitle,subtitleDataTestId:subtitleDataTestId,tagline:title&&tagline,taglineDataTestId:taglineDataTestId,title:title,titleDataTestId:titleDataTestId,titleProps:titleProps}),React.createElement("div",{className:"".concat(styles.childrenContainer," ").concat(classes.childrenContainer," ").concat(variant===VARIANTS.FULL_WIDTH&&"".concat(styles.childrenContainerFullWidth," ").concat(classes.childrenContainerFullWidth)),id:CHILDREN_CONTAINER_ID+variant},React.createElement("div",{className:"".concat(childrenContentStyle[variant]||styles.childrenContent," ").concat(classes.childrenContent)},children))),React.createElement("div",{className:"".concat(styles.footer," ").concat(classes.footer)},React.createElement(UTWizard,wizardConfig),!isNavHidden&&React.createElement("div",{className:"".concat(classes.bottomNav," ").concat(styles.bottomNav)},checkbox&&isMobileOrTablet&&React.createElement("div",{className:styles.mobileCheckboxContainer},React.createElement(UTCheckbox,checkbox)),!!stepsCount&&React.createElement(UTProgressBar,{classNames:{barColorPrimary:classes.barColorPrimary,colorPrimary:classes.colorPrimary,container:styles.progressBarContainer,label:styles.progressBarLabel,root:styles.progress},value:100*currentStep/stepsCount}),React.createElement(NavActions,{backButton:backButton,checkbox:checkbox,classes:classes,currentStep:currentStep,forceResponsive:forceResponsive,nextButton:nextButton,primaryAction:primaryAction,secondaryAction:secondaryAction,withIcon:withIcon}))))};UTWorkflowContainer.propTypes={backButton:buttonTypes,banner:shape({Icon:object,text:string}),checkbox:shape({text:string}),children:element,classNames:objectOf(string),classes:objectOf(string),currentStage:number,currentStep:number,forceResponsive:bool,headerActions:arrayOf(buttonTypes),helpText:string,helpTextDataTestId:string,navHidden:bool,nextButton:buttonTypes,onExit:func,primaryAction:buttonTypes,requiredFieldInfo:string,requiredFieldInfoDataTestId:string,secondaryAction:buttonTypes,stages:object,stepperLabelProps:object,stepperSize:string,stepsCount:number,subtitle:string,subtitleDataTestId:string,tagline:string,taglineDataTestId:string,title:string,titleDataTestId:string,titleProps:shape({align:string,classes:objectOf(string),className:string,dataTestId:string,markdownRenderers:objectOf(func),title:string,variant:string,withMarkdown:bool}),variant:string,withIcon:bool,withStepperPadding:bool,wizardConfig:shape({description:string,enabled:bool,handleOnClick:func,title:string,variant:string})};export default WithTheme(retrieveStyle)(UTWorkflowContainer);
+import React, { useEffect, useMemo } from 'react';
+import { arrayOf, bool, element, func, number, object, objectOf, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import UTCheckbox from '../../../UTCheckbox';
+import UTHeader from '../../../UTHeader';
+import UTProgressBar from '../../../UTProgressBar';
+import UTStepper from '../../../UTStepper';
+import UTWizard from '../../../UTWizard';
+import WithTheme from '../../../WithTheme';
+import { TEST_IDS } from '../../../../constants/testIds';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import { useScreenSize } from '../../../../utils/useScreenSize';
+import NavActions from './components/NavActions';
+import styles from './styles.module.scss';
+import { buttonTypes } from './types';
+import { CHILDREN_CONTAINER_ID, FORMS_QUERY_SELECTOR, VARIANTS, childrenContentStyle } from './constants';
+import { retrieveStyle } from './theme';
+const {
+  workflowContainer
+} = TEST_IDS;
+const UTWorkflowContainer = _ref => {
+  let {
+    backButton,
+    banner,
+    checkbox,
+    children,
+    classes: themeClasses = {},
+    classNames,
+    currentStage,
+    currentStep = 1,
+    forceResponsive = false,
+    headerActions,
+    helpText,
+    helpTextDataTestId = workflowContainer.header.helpText,
+    navHidden = false,
+    nextButton,
+    onExit,
+    primaryAction,
+    requiredFieldInfo,
+    requiredFieldInfoDataTestId = workflowContainer.header.requiredFieldInfo,
+    secondaryAction,
+    stages,
+    stepperLabelProps = {},
+    stepperSize = 'S',
+    stepsCount,
+    subtitle,
+    subtitleDataTestId = workflowContainer.header.subtitle,
+    tagline,
+    taglineDataTestId = workflowContainer.header.tagline,
+    title,
+    titleDataTestId = workflowContainer.header.title,
+    titleProps = {},
+    variant = VARIANTS.DEFAULT,
+    withIcon = false,
+    withStepperPadding = true,
+    wizardConfig = {}
+  } = _ref;
+  useEffect(() => () => onExit && onExit(), []);
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const {
+    isMobileOrTablet,
+    isMobileSize
+  } = useScreenSize();
+  const isBackButtonHidden = backButton === null || backButton === void 0 ? void 0 : backButton.isHidden;
+  const isNextButtonHidden = nextButton === null || nextButton === void 0 ? void 0 : nextButton.isHidden;
+  const isLastStep = stepsCount && stepsCount === currentStep;
+  const isNavHidden = navHidden || !!isLastStep && isBackButtonHidden && isNextButtonHidden;
+  useEffect(() => {
+    const processFormElements = callback => {
+      const currentFormElements = document.querySelectorAll(FORMS_QUERY_SELECTOR);
+      if (!isEmpty(currentFormElements)) {
+        currentFormElements.forEach(callback);
+      }
+    };
+    const removeStylesFromForms = () => {
+      processFormElements(form => {
+        var _form$classList;
+        form === null || form === void 0 || (_form$classList = form.classList) === null || _form$classList === void 0 || _form$classList.remove(styles.formContainer);
+      });
+    };
+    const applyStylesToForms = () => {
+      processFormElements(form => {
+        const childrenIsNotEmpty = !isEmpty(form === null || form === void 0 ? void 0 : form.children);
+        const hasInputs = !isEmpty(form.querySelectorAll('input'));
+        if (childrenIsNotEmpty && hasInputs) {
+          var _form$classList2;
+          form === null || form === void 0 || (_form$classList2 = form.classList) === null || _form$classList2 === void 0 || _form$classList2.add(styles.formContainer);
+        }
+      });
+    };
+    if (isMobileSize) return removeStylesFromForms();
+    const observer = new MutationObserver(() => applyStylesToForms());
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    applyStylesToForms();
+    return () => {
+      removeStylesFromForms();
+      observer.disconnect();
+    };
+  }, [currentStep, currentStage, isMobileSize]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classes.container)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.content, " ").concat(classes.content)
+  }, stages && /*#__PURE__*/React.createElement(UTStepper, {
+    stepperSize,
+    currentStage,
+    stages,
+    stepperLabelProps,
+    withPadding: withStepperPadding
+  }), (title || isMobileOrTablet && (primaryAction || secondaryAction)) && /*#__PURE__*/React.createElement(UTHeader, {
+    actions: [...(headerActions || []), ...(isMobileOrTablet ? [primaryAction, secondaryAction].filter(action => action) : [])],
+    banner: title && banner,
+    classNames: {
+      outerContainer: "".concat(styles.headerContainer, " ").concat(classes.headerContainer),
+      titles: classes.titles
+    },
+    helpText: title && helpText,
+    helpTextDataTestId,
+    isLastStep: isNavHidden,
+    requiredFieldInfo: title && requiredFieldInfo,
+    requiredFieldInfoDataTestId,
+    subtitle: title && subtitle,
+    subtitleDataTestId,
+    tagline: title && tagline,
+    taglineDataTestId,
+    title,
+    titleDataTestId,
+    titleProps
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === VARIANTS.FULL_WIDTH && "".concat(styles.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth)),
+    id: CHILDREN_CONTAINER_ID + variant
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(childrenContentStyle[variant] || styles.childrenContent, " ").concat(classes.childrenContent)
+  }, children))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.footer, " ").concat(classes.footer)
+  }, /*#__PURE__*/React.createElement(UTWizard, wizardConfig), !isNavHidden && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.bottomNav, " ").concat(styles.bottomNav)
+  }, checkbox && isMobileOrTablet && /*#__PURE__*/React.createElement("div", {
+    className: styles.mobileCheckboxContainer
+  }, /*#__PURE__*/React.createElement(UTCheckbox, checkbox)), !!stepsCount && /*#__PURE__*/React.createElement(UTProgressBar, {
+    classNames: {
+      barColorPrimary: classes.barColorPrimary,
+      colorPrimary: classes.colorPrimary,
+      container: styles.progressBarContainer,
+      label: styles.progressBarLabel,
+      root: styles.progress
+    },
+    value: currentStep * 100 / stepsCount
+  }), /*#__PURE__*/React.createElement(NavActions, {
+    backButton: backButton,
+    checkbox: checkbox,
+    classes: classes,
+    currentStep: currentStep,
+    forceResponsive: forceResponsive,
+    nextButton: nextButton,
+    primaryAction: primaryAction,
+    secondaryAction: secondaryAction,
+    withIcon: withIcon
+  }))));
+};
+UTWorkflowContainer.propTypes = {
+  backButton: buttonTypes,
+  banner: shape({
+    Icon: object,
+    text: string
+  }),
+  checkbox: shape({
+    text: string
+  }),
+  children: element,
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  currentStage: number,
+  currentStep: number,
+  forceResponsive: bool,
+  headerActions: arrayOf(buttonTypes),
+  helpText: string,
+  helpTextDataTestId: string,
+  navHidden: bool,
+  nextButton: buttonTypes,
+  onExit: func,
+  primaryAction: buttonTypes,
+  requiredFieldInfo: string,
+  requiredFieldInfoDataTestId: string,
+  secondaryAction: buttonTypes,
+  stages: object,
+  stepperLabelProps: object,
+  stepperSize: string,
+  stepsCount: number,
+  subtitle: string,
+  subtitleDataTestId: string,
+  tagline: string,
+  taglineDataTestId: string,
+  title: string,
+  titleDataTestId: string,
+  titleProps: shape({
+    align: string,
+    classes: objectOf(string),
+    className: string,
+    dataTestId: string,
+    markdownRenderers: objectOf(func),
+    title: string,
+    variant: string,
+    withMarkdown: bool
+  }),
+  variant: string,
+  withIcon: bool,
+  withStepperPadding: bool,
+  wizardConfig: shape({
+    description: string,
+    enabled: bool,
+    handleOnClick: func,
+    title: string,
+    variant: string
+  })
+};
+export default WithTheme(retrieveStyle)(UTWorkflowContainer);

package/dist/esm/components/UTWorkflowContainer/versions/V1/theme.js

@@ -1 +1,28 @@
-import{getShadow}from"../../../../utils/shadowUtils";export const retrieveStyle=_ref=>{var _theme$UTWorkflowCont,_theme$Palette$shadow,_theme$Palette,_theme$UTWorkflowCont2,_theme$UTWorkflowCont3,_theme$Palette2,_theme$Palette3;let{theme:theme}=_ref;return{container:{backgroundColor:null===(_theme$UTWorkflowCont=theme.UTWorkflowContainer)||void 0===_theme$UTWorkflowCont||null===(_theme$UTWorkflowCont=_theme$UTWorkflowCont.container)||void 0===_theme$UTWorkflowCont?void 0:_theme$UTWorkflowCont.backgroundColor,boxShadow:getShadow({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:2})},bottomNav:{backgroundColor:null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.light["01"]},barColorPrimary:{backgroundColor:null===(_theme$UTWorkflowCont2=theme.UTWorkflowContainer)||void 0===_theme$UTWorkflowCont2||null===(_theme$UTWorkflowCont2=_theme$UTWorkflowCont2.progress)||void 0===_theme$UTWorkflowCont2?void 0:_theme$UTWorkflowCont2.backgroundColor},colorPrimary:{backgroundColor:"".concat((null===(_theme$UTWorkflowCont3=theme.UTWorkflowContainer)||void 0===_theme$UTWorkflowCont3||null===(_theme$UTWorkflowCont3=_theme$UTWorkflowCont3.progress)||void 0===_theme$UTWorkflowCont3?void 0:_theme$UTWorkflowCont3.color)||(null===(_theme$Palette2=theme.Palette)||void 0===_theme$Palette2?void 0:_theme$Palette2.light["04"])," !important")},childrenContainerFullWidth:{borderTop:"1px solid ".concat(null===(_theme$Palette3=theme.Palette)||void 0===_theme$Palette3?void 0:_theme$Palette3.light["04"])}}};
+import { getShadow } from '../../../../utils/shadowUtils';
+export const retrieveStyle = _ref => {
+  var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2, _theme$Palette3;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: (_theme$UTWorkflowCont = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.container) === null || _theme$UTWorkflowCont === void 0 ? void 0 : _theme$UTWorkflowCont.backgroundColor,
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      })
+    },
+    bottomNav: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['01']
+    },
+    barColorPrimary: {
+      backgroundColor: (_theme$UTWorkflowCont2 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont2 === void 0 || (_theme$UTWorkflowCont2 = _theme$UTWorkflowCont2.progress) === null || _theme$UTWorkflowCont2 === void 0 ? void 0 : _theme$UTWorkflowCont2.backgroundColor
+    },
+    colorPrimary: {
+      backgroundColor: "".concat(((_theme$UTWorkflowCont3 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont3 === void 0 || (_theme$UTWorkflowCont3 = _theme$UTWorkflowCont3.progress) === null || _theme$UTWorkflowCont3 === void 0 ? void 0 : _theme$UTWorkflowCont3.color) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.light['04']), " !important")
+    },
+    childrenContainerFullWidth: {
+      borderTop: "1px solid ".concat((_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['04'])
+    }
+  };
+};

package/dist/esm/components/UTWorkflowContainer/versions/V1/types.js

@@ -1 +1,9 @@
-import{func,bool,string,shape,elementType}from"prop-types";export const buttonTypes=shape({disabled:bool,Icon:elementType,isHidden:bool,isVisible:bool,label:string,onClick:func});
+import { func, bool, string, shape, elementType } from 'prop-types';
+export const buttonTypes = shape({
+  disabled: bool,
+  Icon: elementType,
+  isHidden: bool,
+  isVisible: bool,
+  label: string,
+  onClick: func
+});

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

@@ -0,0 +1,91 @@
+# UTWrapperObservation
+
+Wrapper que agrega acciones (ícono + tooltip) a un campo de formulario. Muestra todos los botones configurados en `observationWrapperConfiguration`, cambiando el layout según si hay observaciones activas en `field`. Soporta N acciones simultáneas.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `node` | Required | Contenido del campo a envolver. |
+| `dataTestId` | `string` | `undefined` | ID para testing. El container recibe `dataTestId` y cada action icon recibe `${dataTestId}.actionIcon.${config.key}`. |
+| `field` | `objectOf(bool)` | `undefined` | Objeto del campo. Las claves con valor `true` que coincidan con algún `key` en `observationWrapperConfiguration` renderizarán su acción correspondiente. |
+| `observationWrapperConfiguration` | `arrayOf(shape)` | `undefined` | Array de configuraciones para el wrapper. Ver estructura abajo. |
+
+### Estructura de `observationWrapperConfiguration`
+
+Cada objeto del array puede contener:
+
+| Campo | Type | Description |
+|-------|------|-------------|
+| `key` | `string` | Identificador de la acción. Si coincide con una clave `true` en `field`, determina que hay observaciones activas y cambia el layout a gap inline. |
+| `buttonProps` | `object` | Props pasados directamente al componente `UTButton` que se renderiza como ícono de acción. |
+| `action` | `func` | Callback ejecutado al hacer click sobre el botón de acción. |
+| `textTooltip` | `string` | Texto que se muestra en el tooltip al hacer hover sobre el botón. |
+
+## Lógica de renderizado
+
+```
+observationWrapperConfiguration vacío o undefined → retorna children sin wrapping
+sin coincidencias en field → renderiza wrapper con todos los botones en position:absolute (se revelan en hover)
+con al menos una coincidencia en field → renderiza wrapper con gap + todos los botones (se revelan en hover)
+```
+
+## Ejemplos
+
+### Uso básico (con observación activa)
+
+```jsx
+const observationConfig = [
+  {
+    key: 'observation',
+    buttonProps: {
+      children: '2',
+      colorTheme: 'negative',
+      Icon: 'IconMessagePlus',
+      size: 'small'
+    },
+    action: () => console.log('Observación ejecutada'),
+    textTooltip: 'Observar campo'
+  }
+];
+
+<UTWrapperObservation
+  field={{ observation: true }}
+  observationWrapperConfiguration={observationConfig}
+>
+  <UTLabel variant="body1">0112 4567890</UTLabel>
+</UTWrapperObservation>
+```
+
+### Sin observación activa (field.observation false)
+
+```jsx
+<UTWrapperObservation
+  field={{ observation: false }}
+  observationWrapperConfiguration={observationConfig}
+>
+  <UTLabel variant="body1">0112 4567890</UTLabel>
+</UTWrapperObservation>
+// → renderiza el wrapper con los botones en position:absolute encima del children
+// los botones se revelan al hacer hover
+```
+
+### Múltiples acciones
+
+```jsx
+<UTWrapperObservation
+  field={{ observation: true, review: true }}
+  observationWrapperConfiguration={[
+    { key: 'observation', ... },
+    { key: 'review', ... }
+  ]}
+>
+  <UTLabel variant="body1">0112 4567890</UTLabel>
+</UTWrapperObservation>
+// → renderiza children + 2 botones con tooltip
+```
+
+## Componentes relacionados
+
+- **UTButton**: Usado internamente para el botón de acción.
+- **UTTooltip**: Usado para mostrar el `textTooltip` al hacer hover sobre el botón.