@widergy/energy-ui 3.172.1 → 3.172.3

package/dist/components/UTTracker/UTTracker.stories.js

@@ -1,332 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutTitle = exports.WithoutDetailsTab = exports.FlatMode = exports.ErrorVariant = exports.Default = exports.CardMode = exports.AllVariants = exports.AllModes = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _utils = require("stories/utils");
-var _constants = require("./constants");
-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); }
-const subSteps = [{
-  id: 1,
-  subtitle: '02 noviembre 2023, 4:38 PM',
-  title: 'Description Step'
-}, {
-  id: 2,
-  subtitle: '02 noviembre 2023, 4:38 PM',
-  title: 'Description Step'
-}, {
-  id: 3,
-  subtitle: '02 noviembre 2023, 4:38 PM',
-  title: 'Description Step'
-}];
-const defaultSteps = [{
-  id: 1,
-  subSteps,
-  title: 'Solicitud confirmada'
-}, {
-  id: 2,
-  subSteps,
-  title: 'En preparación'
-}, {
-  id: 3,
-  title: 'En camino'
-}, {
-  description: 'Fecha estimada 07 de agosto',
-  id: 4,
-  title: 'Entregado'
-}];
-var _default = exports.default = {
-  args: {
-    currentStep: 2,
-    description: 'Hora estimada de entrega 7:00 PM',
-    detailsTab: {
-      enabled: true,
-      title: 'Ver Detalle'
-    },
-    mode: _constants.CARD,
-    steps: defaultSteps,
-    subtitle: '',
-    title: 'Pedido en curso',
-    variant: _constants.STANDARD
-  },
-  argTypes: {
-    classes: {
-      control: false,
-      description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'objectOf(string)'
-        }
-      }
-    },
-    classNames: {
-      control: false,
-      description: 'Objeto de clases CSS para override de estilos internos.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'objectOf(string)'
-        }
-      }
-    },
-    currentStep: {
-      control: 'number',
-      description: 'Número del paso activo actualmente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'number'
-        }
-      }
-    },
-    description: {
-      control: 'text',
-      description: 'Texto descriptivo que aparece debajo del subtítulo.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    detailsTab: {
-      control: 'object',
-      description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: '{ enabled: boolean, title: string }'
-        }
-      }
-    },
-    mode: {
-      control: 'inline-radio',
-      description: 'Determina el modo visual del componente.',
-      options: [_constants.CARD, _constants.FLAT],
-      table: {
-        defaultValue: {
-          summary: _constants.CARD
-        },
-        type: {
-          summary: (0, _utils.joinArgTypes)([_constants.CARD, _constants.FLAT])
-        }
-      }
-    },
-    steps: {
-      control: 'object',
-      description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
-        }
-      }
-    },
-    subtitle: {
-      control: 'text',
-      description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    title: {
-      control: 'text',
-      description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    variant: {
-      control: 'inline-radio',
-      description: 'Determina la variante visual del componente.',
-      options: [_constants.STANDARD, _constants.ERROR],
-      table: {
-        defaultValue: {
-          summary: _constants.STANDARD
-        },
-        type: {
-          summary: (0, _utils.joinArgTypes)([_constants.STANDARD, _constants.ERROR])
-        }
-      }
-    }
-  },
-  component: _.default,
-  parameters: {
-    controls: {
-      exclude: ['classes']
-    },
-    docs: {
-      description: {
-        component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTTracker'
-};
-const Default = exports.Default = {
-  name: 'Playground'
-};
-const CardMode = exports.CardMode = {
-  args: {
-    mode: _constants.CARD,
-    variant: _constants.STANDARD
-  },
-  name: 'Modo Card',
-  parameters: {
-    docs: {
-      description: {
-        story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
-      }
-    }
-  }
-};
-const FlatMode = exports.FlatMode = {
-  args: {
-    mode: _constants.FLAT,
-    variant: _constants.STANDARD
-  },
-  name: 'Modo Flat',
-  parameters: {
-    docs: {
-      description: {
-        story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
-      }
-    }
-  }
-};
-const ErrorVariant = exports.ErrorVariant = {
-  args: {
-    description: 'Quería recargas catalíticas y pedí normales',
-    mode: _constants.CARD,
-    subtitle: 'Me equivoqué en el pedido',
-    variant: _constants.ERROR
-  },
-  name: 'Variante Error',
-  parameters: {
-    docs: {
-      description: {
-        story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
-      }
-    }
-  }
-};
-const WithoutDetailsTab = exports.WithoutDetailsTab = {
-  args: {
-    detailsTab: undefined,
-    mode: _constants.CARD,
-    variant: _constants.STANDARD
-  },
-  name: 'Sin Pestaña de Detalle',
-  parameters: {
-    docs: {
-      description: {
-        story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
-      }
-    }
-  }
-};
-const WithoutTitle = exports.WithoutTitle = {
-  args: {
-    mode: _constants.CARD,
-    title: undefined,
-    variant: _constants.STANDARD
-  },
-  name: 'Sin Título',
-  parameters: {
-    docs: {
-      description: {
-        story: 'UTTracker sin título.'
-      }
-    }
-  }
-};
-const AllModes = exports.AllModes = {
-  render: args => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '24px',
-      flexWrap: 'wrap'
-    }
-  }, [_constants.CARD, _constants.FLAT].map(mode => /*#__PURE__*/_react.default.createElement("div", {
-    key: mode,
-    style: {
-      flex: 1,
-      minWidth: '300px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
-    mode: mode,
-    title: "Modo: ".concat(mode)
-  }))))),
-  name: 'Todos los Modos',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
-      }
-    }
-  }
-};
-const AllVariants = exports.AllVariants = {
-  render: args => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '24px',
-      flexWrap: 'wrap'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      flex: 1,
-      minWidth: '300px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
-    description: "Hora estimada de entrega 7:00 PM",
-    subtitle: "",
-    title: "Variante: standard",
-    variant: _constants.STANDARD
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      flex: 1,
-      minWidth: '300px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
-    description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
-    subtitle: "Me equivoqu\xE9 en el pedido",
-    title: "Variante: error",
-    variant: _constants.ERROR
-  })))),
-  name: 'Todas las Variantes',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
-      }
-    }
-  }
-};

package/dist/components/UTValidation/README.md

@@ -1,69 +0,0 @@
-# UTValidation
-
-## Description
-
-`UTValidation` is a component designed to display input validation messages in a structured and customizable way. It supports various statuses such as `success`, `error`, and `default`, and can include optional icons for each validation message.
-
-## Props
-
-| Name           | Type   | Default | Description                                                                                  |
-| -------------- | ------ | ------- | -------------------------------------------------------------------------------------------- |
-| className      | string |         | Custom CSS class to apply to the root of the component.                                      |
-| dataTestId     | string |         | Component `data-testid`                                                                      |
-| validationData | array  | []      | Array of validation data objects to display messages, each with a status and optional icons. |
-
-### validationData
-
-The `validationData` prop is an array of objects, each representing a group of validation messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text`, `status`, and an optional `withIcon` property.
-
-#### Structure of validationData
-
-- **title** (optional): A string representing the title of the validation group.
-- **status** (optional): A string indicating the status of the validation group. Defaults to `default`. Possible values are `success`, `error`, and `default`.
-- **items** (required): An array of objects, each representing an individual validation item.
-  - **text** (required): A string containing the validation message.
-  - **status** (optional): A string indicating the status of the validation item. Defaults to `default`. Possible values are `success`, `error`, and `default`.
-  - **withIcon** (optional): A boolean indicating whether to display an icon next to the validation message. Defaults to `true`.
-
-### Example
-
-```javascript
-const validationData = [
-  {
-    items: [
-      {
-        status: 'success',
-        text: 'Must be at least 8 characters long.',
-        withIcon: true // Optional, defaults to true
-      }
-    ]
-  },
-  {
-    title: 'Must meet at least 2 of the following conditions:',
-    status: 'error',
-    items: [
-      {
-        text: 'At least 1 lowercase letter.' // Defaults to "default" and "withIcon" to true
-      },
-      {
-        text: 'At least 1 uppercase letter.' // Defaults to "default" and "withIcon" to true
-      },
-      {
-        status: 'success',
-        text: 'At least 1 number.',
-        withIcon: false // Will not display an icon
-      }
-    ]
-  }
-];
-```
-
-## Statuses
-
-The `status` prop can be one of these values:
-
-- `success`
-- `error`
-- `default`
-
-If `status` is not provided, it defaults to `default`.

package/dist/components/UTVirtualKeyboard/README.md

@@ -1,197 +0,0 @@
-# UTVirtualKeyboard
-
-## Description
-
-Configurable virtual keyboard intended for use within products running on devices without access to a physical keyboard or whose keyboard, either physical or virtual, can't be trusted.
-
-## Props
-
-| Name                | Type               | Default | Description                                              |
-| ------------------- | ------------------ | ------- | -------------------------------------------------------- |
-| `currentFieldValue` | `string \| number` | -       | Current value of the field the keyboard is modifying.    |
-| `handleChangeValue` | `function`         | -       | Method used by the keyboard to update the field's value. |
-| `handleOnEnter`     | `function`         | -       | Method invoked when the `{enter}` key is pressed.        |
-| `show`              | `boolean`          | -       | Whether the keyboard is rendered or not.                 |
-
-## Auxiliary Methods
-
-This methods can be found in `utils/keyboardUtils.js` and are intended for general use of the keyboard, allowing it's use within forms, particularly `redux-form` components.
-For any other case, custom methods can be used, as long as the keyboard gets the `current value` of the focused field, and the methods to execute `onEnter` and `onValueChange`.
-
-### clickForKeyboard
-
-This method is intended to be used within a `click` `eventListener`. The objective of it's execution is to define whether or not to open the keyboard in response to a `click event`.
-It requires to be instanced before being passed to the `event listener`.
-
-```jsx
-const openKeyboard = clickForKeyboard(formList, setFieldIdentifiers, setShowKeyboard, showKeyboard);
-```
-
-This instance expects:
-
-| Argument              | Type       | Default | Description                                                                                                    |
-| --------------------- | ---------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `formList`            | `object`   | -       | The `form` key (or it's equivalent) from the redux store that contains a list of every active form on the app. |
-| `setFieldIdentifiers` | `function` | -       | The `setState` `function` that modifies the `fieldIdentifiers` `object` in the parent component.               |
-| `setShowKeyboard`     | `function` | -       | The `setState` `function` that modifies the value of `showKeyboard` in the parent component.                   |
-| `showKeyboard`        | `boolean`  | -       | The value that defines whether the keyboard is rendered or not.                                                |
-
-After being instanced it can be passed to the `event listener` and it's able to handle the event as it's sent by the browser
-
-```jsx
-window.addEventListener('click', openKeyboard);
-```
-
-Always remember to `remove` `event listeners`, specially if you add them in a `useEffect`
-
-```jsx
-seEffect(() => {
-  window.addEventListener('click', openKeyboard);
-  return () => {
-    window.removeEventListener('click', openKeyboard);
-  };
-}, [{ dependencies }]);
-```
-
-### getIsInputForKeyboard
-
-This method is used within `clickForKeyboard`, but it could be useful on it's own.
-
-The idea behind this method is to check if the `clicked` element is an `input` o a `textarea` to define if it's posible to type within said element. If it's an `input` it alse checks that it's `type` is within those `inputs` that can be typed within.
-
-| Argument   | Type     | Default | Description                                 |
-| ---------- | -------- | ------- | ------------------------------------------- |
-| `nodeName` | `string` | -       | The `nodeName` property of a `event.target` |
-| `type`     | `string` | -       | The `type` property of a `event.target`     |
-
-### getIsKeyboard
-
-This method is used within `clickForKeyboard`, but it could be useful on it's own.
-
-The idea behind this method is to check if the `clicked` element is part of the `UTVirtualKeyboard`
-
-| Argument      | Type     | Default | Description                             |
-| ------------- | -------- | ------- | --------------------------------------- |
-| `eventTarget` | `object` | -       | The `event.target` object               |
-| `type`        | `string` | -       | The `type` property of a `event.target` |
-
-### getFieldValue
-
-This method is used to get the `current value` of the focused `field`. The search is made within the `form` `key` of the `redux store`.
-
-| Argument             | Type       | Default | Description                                               |
-| -------------------- | ---------- | ------- | --------------------------------------------------------- |
-| `currentIdentifiers` | `object`   | -       | The `fieldIdentifiers` `object` from the parent component |
-| `fieldSelector`      | `function` | -       | A `selector` function to search within the state          |
-| `state`              | `object`   | -       | The `form` key of the `redux state`                       |
-
-```jsx
-const state = reduxStore.getState();
-const { form: formList } = state;
-
-const [fieldIdentifiers, setFieldIdentifiers] = useState(null);
-
-const selector = formName => formValueSelector(formName);
-
-const currentFieldValue = getFieldValue(fieldIdentifiers, selector, state);
-```
-
-### indentifyField
-
-This method is used within `clickForKeyboard`, but it could be useful on it's own.
-
-The idea behind this method is to get `identifying values` that allow to define which field to work upon when using the `UTVirtualKeyboard`
-
-| Argument      | Type     | Default | Description                                                                                                    |
-| ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `eventTarget` | `object` | -       | The `event.target` object                                                                                      |
-| `forms`       | `object` | -       | The `form` key (or it's equivalent) from the redux store that contains a list of every active form on the app. |
-
-### preventPointerDown
-
-This method is used within `clickForKeyboard`, but it could be useful on it's own.
-
-The idea behind this method is to be used within a `pointerdown` `event listener`. It's sole function is to do a `preventDefault` of the
-aforementioned event.
-
-## Keyboard Simplified Usage
-
-```jsx
-import React, {useState} from 'react';
-
-import { UTVirtualKeyboard } from '@widergy/energy-ui';
-
-const Example = () => {
-  const [showKeyboard, setShowKeyboard] = useState(true);
-
-  let currentFieldValue = 'foo';
-
-  const handleChangeValue = () => currentFieldValue = 'bar';
-
-  const handleOnEnter () => {
-    console.log(currentFieldValue);
-    setShowKeyboard(false)
-  };
-
-  return (
-    <UTVirtualKeyboard
-      show={showKeyboard}
-      currentFieldValue={currentFieldValue}
-      handleChangeValue={handleKeyboardChangeValue}
-      handleOnEnter={handleKeyboardEnter}
-    />
-  );
-};
-
-export default Exampe;
-```
-
-## Keyboard Extended Usage (as implemented in UGTotem)
-
-```jsx
-import React, { useEffect, useState } from 'react';
-import { UTVirtualKeyboard, keyboardUtils } from '@widergy/energy-ui';
-
-import reduxStore from 'redux/store';
-
-const App = ({ location }) => {
-  const state = reduxStore.getState();
-  const { form: formList } = state;
-
-  const [showKeyboard, setShowKeyboard] = useState(false);
-  const [fieldIdentifiers, setFieldIdentifiers] = useState(null);
-
-  const openKeyboard = clickForKeyboard(formList, setFieldIdentifiers, setShowKeyboard, showKeyboard);
-
-  const selector = formName => formValueSelector(formName);
-
-  const currentFieldValue = getFieldValue(fieldIdentifiers, selector, state);
-
-  const handleKeyboardChangeValue = value => {
-    const { onChange } = fieldIdentifiers || {};
-    if (onChange)
-      onChange({
-        target: { value }
-      });
-  };
-  const handleKeyboardEnter = () => dispatch(submit(fieldIdentifiers?.formName));
-
-  useEffect(() => {
-    window.addEventListener('click', openKeyboard);
-    return () => {
-      window.removeEventListener('click', openKeyboard);
-    };
-  }, [showKeyboard, fieldIdentifiers, formList]);
-
-  useEffect(() => setShowKeyboard(false), [location]);
-
-  return (
-    <UTVirtualKeyboard
-      show={showKeyboard}
-      currentFieldValue={currentFieldValue}
-      handleChangeValue={handleKeyboardChangeValue}
-      handleOnEnter={handleKeyboardEnter}
-    />
-  );
-};
-```

package/dist/components/UTVirtualizedList/README.md

@@ -1,19 +0,0 @@
-# UTVirtualizedList
-
-### Description
-Component that aims to virtualize content in a easy and dynamic fashion. It supports different and varying size elements, adjusts dynamically to available space.
-
-### Props
-
-- `data`: expects an `array` of `objects` representing the complete set of information required to build one list element. Take into consideration that a change in this array will result in a scroll respositioning on the scroll origin.
-- `className`: expects a `string`, represents the style to be applied to the list container.
-- `elementsPerRow`: expects a `number`, defines the number of elements per row.
-- `overscan`: expects a `number`, represents the extra number of elements to render so that scroll is smoother.
-  e.g: if `overscan = 10` then 10 elements will be added before the first visible element in the list's viewport, and 10 will be added after the last visible element in the list's viewport. Given that it aims to always have the same elements mounted in the DOM, if `overscan` number of elements cant be added before or after, because the scroll position is near one of both ends, the list will add the difference on the other end. For example, when positioned at `scroll = 0` there are `2 * overscan` elements after the last visible node given that none can be rendered before.
-- `itemPadding`: expects a `number`, defines the padding between rows and row elements.
-- `NoDataComponent`: expects a `func` which renders the corresponding component when `data` is empty.
-- `effect`: expects a `string` which indicates the effect with which the list will render the elements on mount. Available: `fadeIn`, `slideIn`
-- `loading`: expects a `bool`, indicates whether to render a loading spinner indicator instead of the list.
-- `reRenderOnChange`: expects an `array` of dependencies that upon change force the list to re-render.
-- `headerRenderer`: expects a `func` that can render a header component. It will stick to the top of the list.
-- `footerRenderer`: expects a `func` that can render a footer component.

package/dist/components/UTWorkflowContainer/versions/V1/README.md

@@ -1,46 +0,0 @@
-# UTWorkflowContainer
-
-### Description
-
-This component serves as a wrapper for each step of a workflow
-
-## Props
-
-| Name               | Type             | Default   | Description                                                                                                                                                                                                                                                                                                                |
-| ------------------ | ---------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| backButton         | buttonType       |           | Defines behaviour and/or rendering of the button on the left corner.                                                                                                                                                                                                                                                       |
-| banner             | bannerType       |           | If present, it will render a banner at the bottom of the header.                                                                                                                                                                                                                                                           |
-| checkbox           | checkboxType     |           | If present, it will render a checkbox above the bottom navigation.                                                                                                                                                                                                                                                         |
-| children           | element          |           | The contents that will be rendered inside the component.                                                                                                                                                                                                                                                                   |
-| classes            | object of string |           | Classes returned by UTWorkflowContainer's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                                                                                                     |
-| classNames         | object of string |           | Additional classes.                                                                                                                                                                                                                                                                                                        |
-| currentStage       | number           |           | Receives a number that represents which stage id will be active. It is up to the parent component to update this number accordingly.                                                                                                                                                                                       |
-| currentStep        | number           | 1         | Receives a number that will fill up the progress bar proportionally to the number of steps given. It will also hide the backButton if its equal to 1. It is up to the parent component to update this number accordingly.                                                                                                  |
-| helpText           | string           |           | Text that will be rendered at the bottom of the header.                                                                                                                                                                                                                                                                    |
-| headerActions      | headerActionType |           | Actions to be displayed in a dropdown menu at the corner of the header, the first one that has the prop `main` as true will be displayed next to the menu with its own icon.                                                                                                                                               |
-| navHidden          | bool             | false     | If true, the navigation bar will be hidden, overriding the default `backButton`, `nextButton` and last step condition.                                                                                                                                                                                                     |
-| nextButton         | buttonTypes      |           | Defines behaviour and/or rendering of the button on the right corner.                                                                                                                                                                                                                                                      |
-| onExit             | function         |           | Cleanup function.                                                                                                                                                                                                                                                                                                          |
-| primaryAction      | buttonType       |           | Defines behaviour and/or rendering for the button next to the `nextButton`.                                                                                                                                                                                                                                                |
-| requiredFieldInfo  | string           |           | Text to display as a helper for required fields, it will be rendered below the description.                                                                                                                                                                                                                                |
-| secondaryAction    | buttonType       |           | Defines behaviour and/or rendering for the button next to the `backButton`.                                                                                                                                                                                                                                                |
-| stages             | stageType        |           | Defines the structure of the stepper indicator at the top of the component. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. Aditionally each stage is able to add a property `label` which will display at the bottom of the corresponding indicator. |
-| stepperSize        | 'S' \| 'L'       | 'S'       | Variant that defines whether to use small icons for the stepper indicator or large ones. It is required for the 'L' variant that every stage has a custom icon defined. If size is set to 'L' but there's at least one stage without a defined custom icon the size will be defaulted to 'S'.                              |
-| stepsCount         | number           |           | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar.                                                                                                                                                                                                    |
-| subtitle           | string           |           | Text that will be rendered below the title.                                                                                                                                                                                                                                                                                |
-| tagline            | string           |           | Text that will be rendered in uppercase on top of the title.                                                                                                                                                                                                                                                               |
-| title              | string           |           | Text that will be rendered between the stages and the content. It is required in order to show any other text header elements.                                                                                                                                                                                             |
-| TitleIcon          | element          |           | Icon that will be rendered on top of the title.                                                                                                                                                                                                                                                                            |
-| variant            | string           | 'default' | Defines which variant to show. There are two options:`default` or `fullWidth`.                                                                                                                                                                                                                                             |
-| withIcon           | bool             | false     | Defines whether the nextButton and backButton will aditionally have their own icons inside.                                                                                                                                                                                                                                |
-| withStepperPadding | bool             | true      | If false, the stepper indicator will occupy the full width of the container, rendering the first and last stage's label aligned towards the center.                                                                                                                                                                        |
-
-### Custom types
-
-| Type             | Shape                                                                                                             |
-| ---------------- | ----------------------------------------------------------------------------------------------------------------- |
-| buttonType       | element \| `{ onClick: func, disabled: bool, label: string, buttonProps: object, Icon: bool \| element \| func }` |
-| bannerType       | `{ Icon: element, text: string }`                                                                                 |
-| checkboxType     | objectOf( UTCheckbox props )                                                                                      |
-| headerActionType | `{ label: string, onClick: func, main: bool, Icon: element }`                                                     |
-| stageType        | arrayOf( `{ id: number, label: string, Icon: element }` )                                                         |