@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,228 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_UTCheckbox=_interopRequireDefault(require("../../../UTCheckbox")),_UTHeader=_interopRequireDefault(require("../../../UTHeader")),_UTProgressBar=_interopRequireDefault(require("../../../UTProgressBar")),_UTStepper=_interopRequireDefault(require("../../../UTStepper")),_UTWizard=_interopRequireDefault(require("../../../UTWizard")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_testIds=require("../../../../constants/testIds"),_classesUtils=require("../../../../utils/classesUtils"),_useScreenSize=require("../../../../utils/useScreenSize"),_NavActions=_interopRequireDefault(require("./components/NavActions")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_types=require("./types"),_constants=require("./constants"),_theme=require("./theme");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{workflowContainer:workflowContainer}=_testIds.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=_constants.VARIANTS.DEFAULT,withIcon:withIcon=!1,withStepperPadding:withStepperPadding=!0,wizardConfig:wizardConfig={}}=_ref;(0,_react.useEffect)(()=>()=>onExit&&onExit(),[]);const classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(themeClasses,classNames),[classNames]),{isMobileOrTablet:isMobileOrTablet,isMobileSize:isMobileSize}=(0,_useScreenSize.useScreenSize)(),isBackButtonHidden=null==backButton?void 0:backButton.isHidden,isNextButtonHidden=null==nextButton?void 0:nextButton.isHidden,isNavHidden=navHidden||!!(stepsCount&&stepsCount===currentStep)&&isBackButtonHidden&&isNextButtonHidden;return(0,_react.useEffect)(()=>{const processFormElements=callback=>{const currentFormElements=document.querySelectorAll(_constants.FORMS_QUERY_SELECTOR);(0,_isEmpty.default)(currentFormElements)||currentFormElements.forEach(callback)},removeStylesFromForms=()=>{processFormElements(form=>{var _form$classList;null==form||null===(_form$classList=form.classList)||void 0===_form$classList||_form$classList.remove(_stylesModule.default.formContainer)})},applyStylesToForms=()=>{processFormElements(form=>{const childrenIsNotEmpty=!(0,_isEmpty.default)(null==form?void 0:form.children),hasInputs=!(0,_isEmpty.default)(form.querySelectorAll("input"));var _form$classList2;childrenIsNotEmpty&&hasInputs&&(null==form||null===(_form$classList2=form.classList)||void 0===_form$classList2||_form$classList2.add(_stylesModule.default.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.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(classes.container)},_react.default.createElement("div",{className:"".concat(_stylesModule.default.content," ").concat(classes.content)},stages&&_react.default.createElement(_UTStepper.default,{stepperSize:stepperSize,currentStage:currentStage,stages:stages,stepperLabelProps:stepperLabelProps,withPadding:withStepperPadding}),(title||isMobileOrTablet&&(primaryAction||secondaryAction))&&_react.default.createElement(_UTHeader.default,{actions:[...headerActions||[],...isMobileOrTablet?[primaryAction,secondaryAction].filter(action=>action):[]],banner:title&&banner,classNames:{outerContainer:"".concat(_stylesModule.default.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.default.createElement("div",{className:"".concat(_stylesModule.default.childrenContainer," ").concat(classes.childrenContainer," ").concat(variant===_constants.VARIANTS.FULL_WIDTH&&"".concat(_stylesModule.default.childrenContainerFullWidth," ").concat(classes.childrenContainerFullWidth)),id:_constants.CHILDREN_CONTAINER_ID+variant},_react.default.createElement("div",{className:"".concat(_constants.childrenContentStyle[variant]||_stylesModule.default.childrenContent," ").concat(classes.childrenContent)},children))),_react.default.createElement("div",{className:"".concat(_stylesModule.default.footer," ").concat(classes.footer)},_react.default.createElement(_UTWizard.default,wizardConfig),!isNavHidden&&_react.default.createElement("div",{className:"".concat(classes.bottomNav," ").concat(_stylesModule.default.bottomNav)},checkbox&&isMobileOrTablet&&_react.default.createElement("div",{className:_stylesModule.default.mobileCheckboxContainer},_react.default.createElement(_UTCheckbox.default,checkbox)),!!stepsCount&&_react.default.createElement(_UTProgressBar.default,{classNames:{barColorPrimary:classes.barColorPrimary,colorPrimary:classes.colorPrimary,container:_stylesModule.default.progressBarContainer,label:_stylesModule.default.progressBarLabel,root:_stylesModule.default.progress},value:100*currentStep/stepsCount}),_react.default.createElement(_NavActions.default,{backButton:backButton,checkbox:checkbox,classes:classes,currentStep:currentStep,forceResponsive:forceResponsive,nextButton:nextButton,primaryAction:primaryAction,secondaryAction:secondaryAction,withIcon:withIcon}))))};UTWorkflowContainer.propTypes={backButton:_types.buttonTypes,banner:(0,_propTypes.shape)({Icon:_propTypes.object,text:_propTypes.string}),checkbox:(0,_propTypes.shape)({text:_propTypes.string}),children:_propTypes.element,classNames:(0,_propTypes.objectOf)(_propTypes.string),classes:(0,_propTypes.objectOf)(_propTypes.string),currentStage:_propTypes.number,currentStep:_propTypes.number,forceResponsive:_propTypes.bool,headerActions:(0,_propTypes.arrayOf)(_types.buttonTypes),helpText:_propTypes.string,helpTextDataTestId:_propTypes.string,navHidden:_propTypes.bool,nextButton:_types.buttonTypes,onExit:_propTypes.func,primaryAction:_types.buttonTypes,requiredFieldInfo:_propTypes.string,requiredFieldInfoDataTestId:_propTypes.string,secondaryAction:_types.buttonTypes,stages:_propTypes.object,stepperLabelProps:_propTypes.object,stepperSize:_propTypes.string,stepsCount:_propTypes.number,subtitle:_propTypes.string,subtitleDataTestId:_propTypes.string,tagline:_propTypes.string,taglineDataTestId:_propTypes.string,title:_propTypes.string,titleDataTestId:_propTypes.string,titleProps:(0,_propTypes.shape)({align:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),className:_propTypes.string,dataTestId:_propTypes.string,markdownRenderers:(0,_propTypes.objectOf)(_propTypes.func),title:_propTypes.string,variant:_propTypes.string,withMarkdown:_propTypes.bool}),variant:_propTypes.string,withIcon:_propTypes.bool,withStepperPadding:_propTypes.bool,wizardConfig:(0,_propTypes.shape)({description:_propTypes.string,enabled:_propTypes.bool,handleOnClick:_propTypes.func,title:_propTypes.string,variant:_propTypes.string})};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTCheckbox = _interopRequireDefault(require("../../../UTCheckbox"));
+var _UTHeader = _interopRequireDefault(require("../../../UTHeader"));
+var _UTProgressBar = _interopRequireDefault(require("../../../UTProgressBar"));
+var _UTStepper = _interopRequireDefault(require("../../../UTStepper"));
+var _UTWizard = _interopRequireDefault(require("../../../UTWizard"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _testIds = require("../../../../constants/testIds");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _useScreenSize = require("../../../../utils/useScreenSize");
+var _NavActions = _interopRequireDefault(require("./components/NavActions"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _types = require("./types");
+var _constants = require("./constants");
+var _theme = require("./theme");
+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 {
+  workflowContainer
+} = _testIds.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 = _constants.VARIANTS.DEFAULT,
+    withIcon = false,
+    withStepperPadding = true,
+    wizardConfig = {}
+  } = _ref;
+  (0, _react.useEffect)(() => () => onExit && onExit(), []);
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const {
+    isMobileOrTablet,
+    isMobileSize
+  } = (0, _useScreenSize.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;
+  (0, _react.useEffect)(() => {
+    const processFormElements = callback => {
+      const currentFormElements = document.querySelectorAll(_constants.FORMS_QUERY_SELECTOR);
+      if (!(0, _isEmpty.default)(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(_stylesModule.default.formContainer);
+      });
+    };
+    const applyStylesToForms = () => {
+      processFormElements(form => {
+        const childrenIsNotEmpty = !(0, _isEmpty.default)(form === null || form === void 0 ? void 0 : form.children);
+        const hasInputs = !(0, _isEmpty.default)(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(_stylesModule.default.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.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.content, " ").concat(classes.content)
+  }, stages && /*#__PURE__*/_react.default.createElement(_UTStepper.default, {
+    stepperSize,
+    currentStage,
+    stages,
+    stepperLabelProps,
+    withPadding: withStepperPadding
+  }), (title || isMobileOrTablet && (primaryAction || secondaryAction)) && /*#__PURE__*/_react.default.createElement(_UTHeader.default, {
+    actions: [...(headerActions || []), ...(isMobileOrTablet ? [primaryAction, secondaryAction].filter(action => action) : [])],
+    banner: title && banner,
+    classNames: {
+      outerContainer: "".concat(_stylesModule.default.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.default.createElement("div", {
+    className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth)),
+    id: _constants.CHILDREN_CONTAINER_ID + variant
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_constants.childrenContentStyle[variant] || _stylesModule.default.childrenContent, " ").concat(classes.childrenContent)
+  }, children))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.footer, " ").concat(classes.footer)
+  }, /*#__PURE__*/_react.default.createElement(_UTWizard.default, wizardConfig), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
+  }, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.mobileCheckboxContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, checkbox)), !!stepsCount && /*#__PURE__*/_react.default.createElement(_UTProgressBar.default, {
+    classNames: {
+      barColorPrimary: classes.barColorPrimary,
+      colorPrimary: classes.colorPrimary,
+      container: _stylesModule.default.progressBarContainer,
+      label: _stylesModule.default.progressBarLabel,
+      root: _stylesModule.default.progress
+    },
+    value: currentStep * 100 / stepsCount
+  }), /*#__PURE__*/_react.default.createElement(_NavActions.default, {
+    backButton: backButton,
+    checkbox: checkbox,
+    classes: classes,
+    currentStep: currentStep,
+    forceResponsive: forceResponsive,
+    nextButton: nextButton,
+    primaryAction: primaryAction,
+    secondaryAction: secondaryAction,
+    withIcon: withIcon
+  }))));
+};
+UTWorkflowContainer.propTypes = {
+  backButton: _types.buttonTypes,
+  banner: (0, _propTypes.shape)({
+    Icon: _propTypes.object,
+    text: _propTypes.string
+  }),
+  checkbox: (0, _propTypes.shape)({
+    text: _propTypes.string
+  }),
+  children: _propTypes.element,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  currentStage: _propTypes.number,
+  currentStep: _propTypes.number,
+  forceResponsive: _propTypes.bool,
+  headerActions: (0, _propTypes.arrayOf)(_types.buttonTypes),
+  helpText: _propTypes.string,
+  helpTextDataTestId: _propTypes.string,
+  navHidden: _propTypes.bool,
+  nextButton: _types.buttonTypes,
+  onExit: _propTypes.func,
+  primaryAction: _types.buttonTypes,
+  requiredFieldInfo: _propTypes.string,
+  requiredFieldInfoDataTestId: _propTypes.string,
+  secondaryAction: _types.buttonTypes,
+  stages: _propTypes.object,
+  stepperLabelProps: _propTypes.object,
+  stepperSize: _propTypes.string,
+  stepsCount: _propTypes.number,
+  subtitle: _propTypes.string,
+  subtitleDataTestId: _propTypes.string,
+  tagline: _propTypes.string,
+  taglineDataTestId: _propTypes.string,
+  title: _propTypes.string,
+  titleDataTestId: _propTypes.string,
+  titleProps: (0, _propTypes.shape)({
+    align: _propTypes.string,
+    classes: (0, _propTypes.objectOf)(_propTypes.string),
+    className: _propTypes.string,
+    dataTestId: _propTypes.string,
+    markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
+    title: _propTypes.string,
+    variant: _propTypes.string,
+    withMarkdown: _propTypes.bool
+  }),
+  variant: _propTypes.string,
+  withIcon: _propTypes.bool,
+  withStepperPadding: _propTypes.bool,
+  wizardConfig: (0, _propTypes.shape)({
+    description: _propTypes.string,
+    enabled: _propTypes.bool,
+    handleOnClick: _propTypes.func,
+    title: _propTypes.string,
+    variant: _propTypes.string
+  })
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);

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

@@ -1 +1,35 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _shadowUtils=require("../../../../utils/shadowUtils");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:(0,_shadowUtils.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"])}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../../../utils/shadowUtils");
+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: (0, _shadowUtils.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'])
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

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

@@ -1 +1,15 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.buttonTypes=void 0;var _propTypes=require("prop-types");const buttonTypes=exports.buttonTypes=(0,_propTypes.shape)({disabled:_propTypes.bool,Icon:_propTypes.elementType,isHidden:_propTypes.bool,isVisible:_propTypes.bool,label:_propTypes.string,onClick:_propTypes.func});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonTypes = void 0;
+var _propTypes = require("prop-types");
+const buttonTypes = exports.buttonTypes = (0, _propTypes.shape)({
+  disabled: _propTypes.bool,
+  Icon: _propTypes.elementType,
+  isHidden: _propTypes.bool,
+  isVisible: _propTypes.bool,
+  label: _propTypes.string,
+  onClick: _propTypes.func
+});

package/dist/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.

package/dist/components/UTWrapperObservation/UTWrapperObservation.stories.js

@@ -0,0 +1,251 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SinObservacionEnField = exports.SinConfiguracion = exports.Playground = exports.ConObservacion = exports.ConMultiplesAcciones = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable no-alert */
+const observationConfig = [{
+  buttonProps: {
+    colorTheme: 'negative',
+    Icon: 'IconMessagePlus',
+    size: 'small'
+  },
+  action: () => alert('Acción de observación ejecutada'),
+  key: 'observation',
+  textTooltip: 'Observar campo'
+}];
+const multipleActionsConfig = [{
+  buttonProps: {
+    colorTheme: 'negative',
+    Icon: 'IconMessagePlus',
+    size: 'small'
+  },
+  action: () => alert('Acción de observación ejecutada'),
+  key: 'observation',
+  textTooltip: 'Observar campo'
+}, {
+  buttonProps: {
+    colorTheme: 'blue',
+    Icon: 'IconFlag',
+    size: 'small'
+  },
+  action: () => alert('Acción de revisión ejecutada'),
+  key: 'review',
+  textTooltip: 'Revisar campo'
+}];
+const FieldContent = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  colorTheme: "gray",
+  variant: "caption"
+}, "Tel\xE9fono *"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body1"
+}, "0112 4567890"));
+var _default = exports.default = {
+  args: {
+    field: {
+      observation: true
+    },
+    observationWrapperConfiguration: observationConfig
+  },
+  argTypes: {
+    field: {
+      control: 'object',
+      description: 'Objeto del campo. Las claves con valor `true` que coincidan con algún `key` en `observationWrapperConfiguration` renderizarán su acción correspondiente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'objectOf(bool)'
+        }
+      }
+    },
+    observationWrapperConfiguration: {
+      control: false,
+      description: 'Array de acciones disponibles para el wrapper. Cada objeto debe tener `key`, `buttonProps`, `action` y `textTooltip`. Todos los botones se muestran siempre; el `key` se usa para detectar si hay observaciones activas en `field` y cambiar el layout.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf(shape({ key, buttonProps, action, textTooltip }))'
+        }
+      }
+    },
+    children: {
+      control: false,
+      description: 'Contenido del campo a envolver.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'ReactNode'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'ID para testing. El container recibe `dataTestId` y cada action icon recibe `{dataTestId}.actionIcon.{config.key}`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    backgrounds: {
+      default: 'light03',
+      values: [{
+        name: 'light03',
+        value: '#F4F5F7'
+      }]
+    },
+    docs: {
+      description: {
+        component: 'Wrapper que agrega acciones (ícono + tooltip) a un campo de formulario. ' + 'Muestra todos los botones de `observationWrapperConfiguration` siempre que haya al menos uno configurado. ' + 'Si algún `key` de la configuración coincide con una clave `true` en `field`, aplica un gap entre el children y los botones; ' + 'si no hay coincidencias, los botones se posicionan encima del children y se revelan en hover.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTWrapperObservation'
+};
+const ConObservacion = exports.ConObservacion = {
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
+    field: {
+      observation: true
+    },
+    observationWrapperConfiguration: observationConfig
+  },
+  name: 'Con observación activa',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Campo con `field.observation: true` y configuración válida. Se muestra el ícono de observación ' + 'a la derecha del campo. Al hacer hover sobre el ícono aparece el tooltip; al hacer click se ejecuta la acción.'
+      }
+    }
+  }
+};
+const SinObservacionEnField = exports.SinObservacionEnField = {
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
+    field: {
+      observation: false
+    },
+    observationWrapperConfiguration: observationConfig
+  },
+  name: 'Sin observación activa',
+  parameters: {
+    docs: {
+      description: {
+        story: '`field.observation` es `false`. El componente renderiza el wrapper con los botones posicionados encima del children (`position: absolute`). Los botones se revelan al hacer hover.'
+      }
+    }
+  }
+};
+const SinConfiguracion = exports.SinConfiguracion = {
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
+    field: {
+      observation: true
+    },
+    observationWrapperConfiguration: []
+  },
+  name: 'Sin configuración (fallback)',
+  parameters: {
+    docs: {
+      description: {
+        story: '`field.observation: true` pero sin acciones en `observationWrapperConfiguration`. ' + 'El componente devuelve los `children` sin wrapping.'
+      }
+    }
+  }
+};
+const ConMultiplesAcciones = exports.ConMultiplesAcciones = {
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
+    field: {
+      observation: true,
+      review: true
+    },
+    observationWrapperConfiguration: multipleActionsConfig
+  },
+  name: 'Múltiples acciones',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Campo con dos acciones activas (`field.observation: true` y `field.review: true`). ' + 'Se renderiza un botón por cada entrada de `observationWrapperConfiguration` cuya `key` coincida con un valor `true` en `field`.'
+      }
+    }
+  }
+};
+const Playground = exports.Playground = {
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
+    field: {
+      observation: true
+    },
+    configJSON: [{
+      key: 'observation',
+      textTooltip: '2 Campos observados',
+      buttonProps: {
+        colorTheme: 'gray',
+        Icon: 'IconMessagePlus',
+        size: 'small',
+        children: 2,
+        variant: 'semitransparent'
+      }
+    }]
+  },
+  argTypes: {
+    field: {
+      control: {
+        type: 'object'
+      }
+    },
+    configJSON: {
+      control: {
+        type: 'object'
+      },
+      description: 'Array de acciones para el wrapper. Editá el JSON para agregar o quitar botones. El `action` se inyecta automáticamente.',
+      name: 'observationWrapperConfiguration',
+      table: {
+        type: {
+          summary: 'arrayOf(shape({ key, buttonProps, textTooltip }))'
+        }
+      }
+    },
+    observationWrapperConfiguration: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  name: 'Playground',
+  render: _ref => {
+    let {
+      configJSON,
+      ...args
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+      observationWrapperConfiguration: configJSON === null || configJSON === void 0 ? void 0 : configJSON.map(config => ({
+        ...config,
+        action: () => alert("Acci\xF3n ejecutada: ".concat(config.key))
+      }))
+    }), args.children);
+  }
+};