@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +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
+} = 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/styles.module.scss

@@ -0,0 +1,101 @@
+@use '../../../../scss/variables/mediaQueries.module.scss' as *;
+@use '../../../../scss/variables/colors.module.scss' as *;
+
+$default-variant-max-width: 966px;
+
+.container {
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.content {
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+
+  @media #{$tablet-mobile} {
+    align-self: center;
+  }
+}
+
+.headerContainer,
+.childrenContainer {
+  @media #{$tablet-mobile} {
+    align-self: center;
+    width: 100%;
+  }
+}
+
+.headerContainer {
+  width: 100%;
+}
+
+.childrenContainer {
+  flex: 1;
+  margin: 0 auto;
+  max-width: $default-variant-max-width;
+  padding: 0 32px 32px;
+  width: calc(100% - 64px);
+
+  @media #{$tablet-mobile} {
+    padding: 0 16px 16px !important;
+    width: calc(100% - 32px) !important;
+  }
+}
+
+.childrenContent {
+  margin: 0 auto;
+  max-width: 100%;
+}
+
+.childrenContainerFullWidth {
+  max-width: none;
+  padding: 24px 32px 32px;
+  width: calc(100% - 64px);
+
+  @media #{$tablet-mobile} {
+    padding: 24px 16px 16px !important;
+  }
+}
+
+.childrenContentFullWidth {
+  max-width: none;
+}
+
+.progress {
+  height: 8px;
+}
+
+.bottomNav {
+  bottom: 0;
+  position: sticky;
+  width: 100%;
+  z-index: 100;
+}
+
+.mobileCheckboxContainer {
+  padding-left: 16px;
+}
+
+.footer {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.formContainer {
+  background-color: var(--light03, $default-background-form);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 32px;
+}

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

@@ -0,0 +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
+  } = _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

@@ -0,0 +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
+});

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.

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

@@ -0,0 +1,245 @@
+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 */
+import React from 'react';
+import UTLabel from '../UTLabel';
+import UTWrapperObservation from '.';
+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.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px'
+  }
+}, /*#__PURE__*/React.createElement(UTLabel, {
+  colorTheme: "gray",
+  variant: "caption"
+}, "Tel\xE9fono *"), /*#__PURE__*/React.createElement(UTLabel, {
+  variant: "body1"
+}, "0112 4567890"));
+export 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: UTWrapperObservation,
+  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'
+};
+export const ConObservacion = {
+  args: {
+    children: /*#__PURE__*/React.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.'
+      }
+    }
+  }
+};
+export const SinObservacionEnField = {
+  args: {
+    children: /*#__PURE__*/React.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.'
+      }
+    }
+  }
+};
+export const SinConfiguracion = {
+  args: {
+    children: /*#__PURE__*/React.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.'
+      }
+    }
+  }
+};
+export const ConMultiplesAcciones = {
+  args: {
+    children: /*#__PURE__*/React.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`.'
+      }
+    }
+  }
+};
+export const Playground = {
+  args: {
+    children: /*#__PURE__*/React.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.createElement(UTWrapperObservation, _extends({}, args, {
+      observationWrapperConfiguration: configJSON === null || configJSON === void 0 ? void 0 : configJSON.map(config => ({
+        ...config,
+        action: () => alert("Acci\xF3n ejecutada: ".concat(config.key))
+      }))
+    }), args.children);
+  }
+};