@widergy/energy-ui 3.158.0 → 3.159.0

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

@@ -0,0 +1,245 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../scss/variables/colors.module.scss';
+import FontSizes from '../../scss/variables/fontSizes.module.scss';
+export const retrieveStyle = _ref => {
+  var _theme$UTSidebar, _theme$UTSidebar2, _theme$UTSidebar3, _theme$UTSidebar4, _theme$UTSidebar5, _theme$UTSidebar6, _theme$UTSidebar7, _theme$UTSidebar8, _theme$UTSidebar9, _theme$UTSidebar0, _theme$UTSidebar1, _theme$UTSidebar10, _theme$UTSidebar11, _theme$UTSidebar12, _theme$UTSidebar13, _theme$UTSidebar14;
+  let {
+    theme
+  } = _ref;
+  return {
+    drawerRoot: {
+      width: getIn(theme, ['UTSidebar', 'drawer', 'width'], 60)
+    },
+    drawer: {
+      backgroundColor: getIn(theme, ['UTSidebar', 'drawer', 'backgroundColor'], Colors.white),
+      borderRight: getIn(theme, ['UTSidebar', 'drawer', 'borderRight']),
+      width: getIn(theme, ['UTSidebar', 'drawer', 'width'], 60)
+    },
+    openedDrawer: {
+      backgroundColor: getIn(theme, ['UTSidebar', 'openedDrawer', 'backgroundColor'], Colors.white),
+      borderRight: getIn(theme, ['UTSidebar', 'openedDrawer', 'borderRight']),
+      width: getIn(theme, ['UTSidebar', 'openedDrawer', 'width'], 180)
+    },
+    drawerTitle: {
+      color: getIn(theme, ['UTSidebar', 'drawerTitle', 'color'], Colors.black),
+      fontSize: getIn(theme, ['UTSidebar', 'drawerTitle', 'fontSize'], '16px'),
+      fontWeight: getIn(theme, ['UTSidebar', 'drawerTitle', 'fontWeight'], 600),
+      margin: getIn(theme, ['UTSidebar', 'drawerTitle', 'margin'])
+    },
+    drawerSubtitle: {
+      color: getIn(theme, ['UTSidebar', 'drawerSubtitle', 'color'], Colors.black),
+      fontSize: getIn(theme, ['UTSidebar', 'drawerSubtitle', 'fontSize'], '14px'),
+      fontWeight: getIn(theme, ['UTSidebar', 'drawerSubtitle', 'fontWeight'], 400),
+      margin: getIn(theme, ['UTSidebar', 'drawerSubtitle', 'margin'])
+    },
+    closeDrawerContainer: {
+      padding: getIn(theme, ['UTSidebar', 'closeDrawerContainer', 'padding']),
+      width: getIn(theme, ['UTSidebar', 'closeDrawerContainer', 'width'], '100%')
+    },
+    closeIcon: {
+      color: getIn(theme, ['UTSidebar', 'closeIcon', 'color']),
+      fontSize: getIn(theme, ['UTSidebar', 'closeIcon', 'fontSize']),
+      margin: getIn(theme, ['UTSidebar', 'closeIcon', 'margin'])
+    },
+    togglerContainer: {
+      alignItems: getIn(theme, ['UTSidebar', 'togglerContainer', 'alignItems']),
+      height: getIn(theme, ['UTSidebar', 'togglerContainer', 'height'], 50)
+    },
+    logoContainer: {
+      alignItems: getIn(theme, ['UTSidebar', 'logoContainer', 'justify']),
+      justifyContent: getIn(theme, ['UTSidebar', 'logoContainer', 'align'], 'center'),
+      backgroundColor: getIn(theme, ['UTSidebar', 'logoContainer', 'backgroundColor'], Colors.white),
+      borderBottom: getIn(theme, ['UTSidebar', 'logoContainer', 'borderBottom']),
+      height: getIn(theme, ['UTSidebar', 'logoContainer', 'height']),
+      padding: getIn(theme, ['UTSidebar', 'logoContainer', 'padding'])
+    },
+    smallLogo: {
+      alignSelf: getIn(theme, ['UTSidebar', 'smallLogo', 'align']),
+      margin: getIn(theme, ['UTSidebar', 'smallLogo', 'margin']),
+      height: getIn(theme, ['UTSidebar', 'smallLogo', 'height']),
+      width: getIn(theme, ['UTSidebar', 'smallLogo', 'width'])
+    },
+    bigLogo: {
+      alignSelf: getIn(theme, ['UTSidebar', 'bigLogo', 'align']),
+      height: getIn(theme, ['UTSidebar', 'bigLogo', 'height']),
+      margin: getIn(theme, ['UTSidebar', 'bigLogo', 'margin']),
+      width: getIn(theme, ['UTSidebar', 'bigLogo', 'width'])
+    },
+    footerLogoContainer: {
+      padding: getIn(theme, ['UTSidebar', 'footerLogoContainer', 'padding'])
+    },
+    footerBigLogo: {
+      alignSelf: getIn(theme, ['UTSidebar', 'footerBigLogo', 'align']),
+      margin: getIn(theme, ['UTSidebar', 'footerBigLogo', 'margin']),
+      height: getIn(theme, ['UTSidebar', 'footerBigLogo', 'height']),
+      width: getIn(theme, ['UTSidebar', 'footerBigLogo', 'width'])
+    },
+    footerSmallLogo: {
+      alignSelf: getIn(theme, ['UTSidebar', 'footerSmallLogo', 'align']),
+      height: getIn(theme, ['UTSidebar', 'footerSmallLogo', 'height']),
+      margin: getIn(theme, ['UTSidebar', 'footerSmallLogo', 'margin']),
+      width: getIn(theme, ['UTSidebar', 'footerSmallLogo', 'width'])
+    },
+    menuIcon: {
+      color: getIn(theme, ['UTSidebar', 'menuIcon', 'color'], Colors.black),
+      fontSize: getIn(theme, ['UTSidebar', 'menuIcon', 'fontSize']),
+      margin: getIn(theme, ['UTSidebar', 'menuIcon', 'margin'], '20px 0'),
+      width: getIn(theme, ['UTSidebar', 'menuIcon', 'width'], '100%')
+    },
+    list: {
+      alignSelf: getIn(theme, ['UTSidebar', 'list', 'align']),
+      width: getIn(theme, ['UTSidebar', 'list', 'width'], '100%')
+    },
+    listScrollbar: {
+      maxWidth: getIn(theme, ['UTSidebar', 'list', 'maxWidth'], '100%'),
+      padding: getIn(theme, ['UTSidebar', 'list', 'padding'], 0)
+    },
+    listOpened: {
+      alignSelf: getIn(theme, ['UTSidebar', 'listOpened', 'align']),
+      maxWidth: getIn(theme, ['UTSidebar', 'listOpened', 'maxWidth']),
+      padding: getIn(theme, ['UTSidebar', 'listOpened', 'padding']),
+      width: getIn(theme, ['UTSidebar', 'listOpened', 'width'])
+    },
+    logoBadgeOpen: {
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTSidebar = theme.UTSidebar) === null || _theme$UTSidebar === void 0 || (_theme$UTSidebar = _theme$UTSidebar.logoBadgeOpen) === null || _theme$UTSidebar === void 0 ? void 0 : _theme$UTSidebar.backgroundColor,
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTSidebar2 = theme.UTSidebar) === null || _theme$UTSidebar2 === void 0 || (_theme$UTSidebar2 = _theme$UTSidebar2.logoBadgeOpen) === null || _theme$UTSidebar2 === void 0 ? void 0 : _theme$UTSidebar2.borderRadius) || 8,
+      color: theme === null || theme === void 0 || (_theme$UTSidebar3 = theme.UTSidebar) === null || _theme$UTSidebar3 === void 0 || (_theme$UTSidebar3 = _theme$UTSidebar3.logoBadgeOpen) === null || _theme$UTSidebar3 === void 0 ? void 0 : _theme$UTSidebar3.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTSidebar4 = theme.UTSidebar) === null || _theme$UTSidebar4 === void 0 || (_theme$UTSidebar4 = _theme$UTSidebar4.logoBadgeOpen) === null || _theme$UTSidebar4 === void 0 ? void 0 : _theme$UTSidebar4.fontSize) || FontSizes.small,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTSidebar5 = theme.UTSidebar) === null || _theme$UTSidebar5 === void 0 || (_theme$UTSidebar5 = _theme$UTSidebar5.logoBadgeOpen) === null || _theme$UTSidebar5 === void 0 ? void 0 : _theme$UTSidebar5.fontWeight) || 600,
+      margin: (theme === null || theme === void 0 || (_theme$UTSidebar6 = theme.UTSidebar) === null || _theme$UTSidebar6 === void 0 || (_theme$UTSidebar6 = _theme$UTSidebar6.logoBadgeOpen) === null || _theme$UTSidebar6 === void 0 ? void 0 : _theme$UTSidebar6.margin) || '12px auto 24px',
+      maxWidth: (theme === null || theme === void 0 || (_theme$UTSidebar7 = theme.UTSidebar) === null || _theme$UTSidebar7 === void 0 || (_theme$UTSidebar7 = _theme$UTSidebar7.logoBadgeOpen) === null || _theme$UTSidebar7 === void 0 ? void 0 : _theme$UTSidebar7.maxWidth) || '96%',
+      padding: (theme === null || theme === void 0 || (_theme$UTSidebar8 = theme.UTSidebar) === null || _theme$UTSidebar8 === void 0 || (_theme$UTSidebar8 = _theme$UTSidebar8.logoBadgeOpen) === null || _theme$UTSidebar8 === void 0 ? void 0 : _theme$UTSidebar8.padding) || '2px 8px'
+    },
+    logoBadgeClose: {
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTSidebar9 = theme.UTSidebar) === null || _theme$UTSidebar9 === void 0 || (_theme$UTSidebar9 = _theme$UTSidebar9.logoBadgeClose) === null || _theme$UTSidebar9 === void 0 ? void 0 : _theme$UTSidebar9.backgroundColor,
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTSidebar0 = theme.UTSidebar) === null || _theme$UTSidebar0 === void 0 || (_theme$UTSidebar0 = _theme$UTSidebar0.logoBadgeClose) === null || _theme$UTSidebar0 === void 0 ? void 0 : _theme$UTSidebar0.borderRadius) || 8,
+      color: theme === null || theme === void 0 || (_theme$UTSidebar1 = theme.UTSidebar) === null || _theme$UTSidebar1 === void 0 || (_theme$UTSidebar1 = _theme$UTSidebar1.logoBadgeClose) === null || _theme$UTSidebar1 === void 0 ? void 0 : _theme$UTSidebar1.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTSidebar10 = theme.UTSidebar) === null || _theme$UTSidebar10 === void 0 || (_theme$UTSidebar10 = _theme$UTSidebar10.logoBadgeClose) === null || _theme$UTSidebar10 === void 0 ? void 0 : _theme$UTSidebar10.fontSize) || FontSizes.small,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTSidebar11 = theme.UTSidebar) === null || _theme$UTSidebar11 === void 0 || (_theme$UTSidebar11 = _theme$UTSidebar11.logoBadgeClose) === null || _theme$UTSidebar11 === void 0 ? void 0 : _theme$UTSidebar11.fontWeight) || 600,
+      margin: (theme === null || theme === void 0 || (_theme$UTSidebar12 = theme.UTSidebar) === null || _theme$UTSidebar12 === void 0 || (_theme$UTSidebar12 = _theme$UTSidebar12.logoBadgeClose) === null || _theme$UTSidebar12 === void 0 ? void 0 : _theme$UTSidebar12.margin) || '12px auto 24px',
+      maxWidth: (theme === null || theme === void 0 || (_theme$UTSidebar13 = theme.UTSidebar) === null || _theme$UTSidebar13 === void 0 || (_theme$UTSidebar13 = _theme$UTSidebar13.logoBadgeClose) === null || _theme$UTSidebar13 === void 0 ? void 0 : _theme$UTSidebar13.maxWidth) || '96%',
+      padding: (theme === null || theme === void 0 || (_theme$UTSidebar14 = theme.UTSidebar) === null || _theme$UTSidebar14 === void 0 || (_theme$UTSidebar14 = _theme$UTSidebar14.logoBadgeClose) === null || _theme$UTSidebar14 === void 0 ? void 0 : _theme$UTSidebar14.padding) || '2px 8px'
+    },
+    option: {
+      backgroundColor: getIn(theme, ['UTSidebar', 'option', 'backgroundColor']),
+      border: getIn(theme, ['UTSidebar', 'option', 'border']),
+      borderRadius: getIn(theme, ['UTSidebar', 'option', 'borderRadius']),
+      color: getIn(theme, ['UTSidebar', 'option', 'color']),
+      height: getIn(theme, ['UTSidebar', 'option', 'height']),
+      margin: getIn(theme, ['UTSidebar', 'option', 'margin']),
+      maxWidth: getIn(theme, ['UTSidebar', 'option', 'maxWidth']),
+      '&:hover': {
+        background: getIn(theme, ['UTSidebar', 'option', 'hover', 'background']),
+        color: getIn(theme, ['UTSidebar', 'option', 'hover', 'color']),
+        transition: getIn(theme, ['UTSidebar', 'option', 'hover', 'transition']),
+        '& $optionIconContainer': {
+          background: getIn(theme, ['UTSidebar', 'option', 'hover', 'optionIconContainer', 'background']),
+          color: getIn(theme, ['UTSidebar', 'option', 'hover', 'optionIconContainer', 'color'])
+        },
+        '& $optionIcon': {
+          color: getIn(theme, ['UTSidebar', 'option', 'hover', 'optionIcon', 'color']),
+          opacity: getIn(theme, ['UTSidebar', 'option', 'hover', 'optionIcon', 'opacity'])
+        }
+      },
+      padding: getIn(theme, ['UTSidebar', 'option', 'padding'], 0),
+      transition: getIn(theme, ['UTSidebar', 'option', 'transition'], 'background-color 0.3s')
+    },
+    optionSelected: {
+      background: getIn(theme, ['UTSidebar', 'optionSelected', 'background']),
+      border: getIn(theme, ['UTSidebar', 'optionSelected', 'border']),
+      borderRadius: getIn(theme, ['UTSidebar', 'optionSelected', 'borderRadius']),
+      color: getIn(theme, ['UTSidebar', 'optionSelected', 'color']),
+      height: getIn(theme, ['UTSidebar', 'optionSelected', 'height']),
+      margin: getIn(theme, ['UTSidebar', 'optionSelected', 'margin']),
+      '&::after': {
+        backgroundColor: getIn(theme, ['UTSidebar', 'selectedMarker', 'backgroundColor']),
+        borderRadius: getIn(theme, ['UTSidebar', 'selectedMarker', 'borderRadius'], 5),
+        height: getIn(theme, ['UTSidebar', 'selectedMarker', 'height'], '100%'),
+        right: getIn(theme, ['UTSidebar', 'selectedMarker', 'right'], 0),
+        top: getIn(theme, ['UTSidebar', 'selectedMarker', 'top'], 0),
+        width: getIn(theme, ['UTSidebar', 'selectedMarker', 'width'], 1)
+      },
+      padding: getIn(theme, ['UTSidebar', 'optionSelected', 'padding'])
+    },
+    optionSelectedOpened: {
+      '&::after': {
+        backgroundColor: getIn(theme, ['UTSidebar', 'selectedMarkerOpened', 'backgroundColor']),
+        height: getIn(theme, ['UTSidebar', 'selectedMarkerOpened', 'height']),
+        right: getIn(theme, ['UTSidebar', 'selectedMarkerOpened', 'right']),
+        top: getIn(theme, ['UTSidebar', 'selectedMarkerOpened', 'top']),
+        width: getIn(theme, ['UTSidebar', 'selectedMarkerOpened', 'width'])
+      }
+    },
+    optionIconContainer: {
+      backgroundColor: getIn(theme, ['UTSidebar', 'optionIconContainer', 'backgroundColor']),
+      border: getIn(theme, ['UTSidebar', 'optionIconContainer', 'border']),
+      borderRadius: getIn(theme, ['UTSidebar', 'optionIconContainer', 'borderRadius']),
+      minHeight: getIn(theme, ['UTSidebar', 'optionIconContainer', 'minHeight']),
+      minWidth: getIn(theme, ['UTSidebar', 'optionIconContainer', 'minWidth']),
+      transition: getIn(theme, ['UTSidebar', 'optionIconContainer', 'transition']),
+      padding: getIn(theme, ['UTSidebar', 'optionIconContainer', 'padding'])
+    },
+    optionIconContainerSelected: {
+      backgroundColor: getIn(theme, ['UTSidebar', 'optionIconContainerSelected', 'backgroundColor']),
+      border: getIn(theme, ['UTSidebar', 'optionIconContainerSelected', 'border']),
+      borderRadius: getIn(theme, ['UTSidebar', 'optionIconContainerSelected', 'borderRadius']),
+      minWidth: getIn(theme, ['UTSidebar', 'optionIconContainerSelected', 'minWidth'])
+    },
+    optionIcon: {
+      color: getIn(theme, ['UTSidebar', 'optionIcon', 'color'], getIn(theme, ['UTSidebar', 'option', 'color'], Colors.black)),
+      fontSize: getIn(theme, ['UTSidebar', 'optionIcon', 'fontSize']),
+      height: getIn(theme, ['UTSidebar', 'optionIcon', 'height']),
+      transition: getIn(theme, ['UTSidebar', 'optionIcon', 'transition']),
+      width: getIn(theme, ['UTSidebar', 'optionIcon', 'width'])
+    },
+    optionIconSelected: {
+      color: getIn(theme, ['UTSidebar', 'optionIconSelected', 'color'], getIn(theme, ['UTSidebar', 'optionSelected', 'color'])),
+      height: getIn(theme, ['UTSidebar', 'optionIconSelected', 'height']),
+      fontSize: getIn(theme, ['UTSidebar', 'optionIconSelected', 'fontSize']),
+      width: getIn(theme, ['UTSidebar', 'optionIconSelected', 'width'])
+    },
+    optionLabel: {
+      color: getIn(theme, ['UTSidebar', 'optionLabel', 'color']),
+      fontSize: getIn(theme, ['UTSidebar', 'optionLabel', 'fontSize'], '14px'),
+      fontWeight: getIn(theme, ['UTSidebar', 'optionLabel', 'fontWeight']),
+      margin: getIn(theme, ['UTSidebar', 'optionLabel', 'margin']),
+      padding: getIn(theme, ['UTSidebar', 'optionLabel', 'padding']),
+      whiteSpace: getIn(theme, ['UTSidebar', 'optionLabel', 'whiteSpace'])
+    },
+    optionLabelSelected: {
+      color: getIn(theme, ['UTSidebar', 'optionLabelSelected', 'color']),
+      fontSize: getIn(theme, ['UTSidebar', 'optionLabelSelected', 'fontSize']),
+      fontWeight: getIn(theme, ['UTSidebar', 'optionLabelSelected', 'fontWeight']),
+      padding: getIn(theme, ['UTSidebar', 'optionLabelSelected', 'padding'])
+    },
+    optionLabelBottom: {
+      color: getIn(theme, ['UTSidebar', 'optionLabelBottom', 'color']),
+      fontSize: getIn(theme, ['UTSidebar', 'optionLabelBottom', 'fontSize'], '12px'),
+      fontWeight: getIn(theme, ['UTSidebar', 'optionLabelBottom', 'fontWeight']),
+      left: getIn(theme, ['UTSidebar', 'optionLabelBottom', 'left']),
+      textAlign: getIn(theme, ['UTSidebar', 'optionLabelBottom', 'textAlign'], 'center'),
+      width: getIn(theme, ['UTSidebar', 'optionLabelBottom', 'width'], '100%')
+    },
+    optionLabelBottomSelected: {
+      color: getIn(theme, ['UTSidebar', 'optionLabelBottomSelected', 'color']),
+      fontSize: getIn(theme, ['UTSidebar', 'optionLabelBottomSelected', 'fontSize']),
+      fontWeight: getIn(theme, ['UTSidebar', 'optionLabelBottomSelected', 'fontWeight']),
+      left: getIn(theme, ['UTSidebar', 'optionLabelBottomSelected', 'left']),
+      textAlign: getIn(theme, ['UTSidebar', 'optionLabelBottomSelected', 'textAlign']),
+      width: getIn(theme, ['UTSidebar', 'optionLabelBottomSelected', 'width'])
+    },
+    toggleArrow: {
+      color: getIn(theme, ['UTSidebar', 'toggleArrow', 'color']),
+      fontSize: getIn(theme, ['UTSidebar', 'toggleArrow', 'fontSize']),
+      width: getIn(theme, ['UTSidebar', 'toggleArrow', 'width'], 40)
+    },
+    tooltip: {
+      backgroundColor: getIn(theme, ['UTSidebar', 'tooltip', 'backgroundColor']),
+      padding: getIn(theme, ['UTSidebar', 'tooltip', 'padding'], '2px 4px')
+    },
+    tooltipLabel: {
+      fontSize: getIn(theme, ['UTSidebar', 'tooltipLabel', 'fontSize'], '18px'),
+      color: getIn(theme, ['UTSidebar', 'tooltipLabel', 'color'])
+    }
+  };
+};

package/dist/esm/components/UTSidebar/types.js

@@ -0,0 +1,47 @@
+import { arrayOf, elementType, shape, string, oneOfType, func, bool } from 'prop-types';
+export const classType = shape({
+  bigLogo: string,
+  closeDrawerContainer: string,
+  closeIcon: string,
+  drawer: string,
+  drawerSubtitle: string,
+  drawerTitle: string,
+  list: string,
+  listOpened: string,
+  logoContainer: string,
+  menuIcon: string,
+  smallLogo: string,
+  selectedMarker: string,
+  selectedMarkerOpened: string,
+  openedDrawer: string,
+  option: string,
+  optionIcon: string,
+  optionIconSelected: string,
+  optionIconContainer: string,
+  optionIconContainerSelected: string,
+  optionLabel: string,
+  optionLabelBottom: string,
+  optionLabelBottomSelected: string,
+  optionLabelSelected: string,
+  optionSelected: string,
+  togglerContainer: string
+});
+export const iconType = oneOfType([func, elementType]);
+export const subOptionType = shape({
+  id: string,
+  key: string,
+  label: string,
+  link: string,
+  show: bool
+});
+export const optionType = shape({
+  id: string,
+  key: string,
+  IconActive: elementType,
+  IconInactive: elementType,
+  link: string,
+  label: string,
+  show: bool,
+  options: arrayOf(subOptionType)
+});
+export const optionsType = arrayOf(optionType);

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

@@ -0,0 +1,99 @@
+import { joinArgTypes } from 'stories/utils';
+import { TITLE_VARIANTS } from '../../constants/inputs';
+import UTSignature from '.';
+export default {
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título que se muestra en el header del componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    penColor: {
+      control: 'color',
+      description: 'Color del lápiz.',
+      table: {
+        defaultValue: {
+          summary: 'black'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    titleVariant: {
+      control: 'select',
+      description: 'Tamaño del título.',
+      options: Object.keys(TITLE_VARIANTS),
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(TITLE_VARIANTS))
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Determina si el componente es requerido.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    width: {
+      control: 'number',
+      description: 'Ancho del componente.',
+      table: {
+        defaultValue: {
+          summary: '500'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    height: {
+      control: 'number',
+      description: 'Altura del componente.',
+      table: {
+        defaultValue: {
+          summary: '200'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    }
+  },
+  component: UTSignature,
+  parameters: {
+    controls: {
+      exclude: ['actions', 'onChange', 'error', 'helpText', 'validationDataTestId', 'value', 'input']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para renderizar un canvas de firma.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTSignature'
+};
+export const Default = {
+  args: {
+    penColor: 'black',
+    title: 'Firma'
+  },
+  name: 'Playground'
+};

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

@@ -0,0 +1,135 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+import { string, number, object, arrayOf, bool, func, oneOfType, shape, objectOf } from 'prop-types';
+import UTButton from '../UTButton';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+import UTValidation from '../UTValidation';
+import { buttonTypes } from '../../types/buttonTypes';
+import { TITLE_VARIANTS } from '../../constants/inputs';
+import { formatErrorToValidation } from '../UTValidation/utils';
+import { inputPropTypes } from '../../types/formTypes';
+import Colors from '../../scss/variables/colors.module.scss';
+import { base64ToFile } from '../../utils/helperFunctions';
+import { TEST_IDS, ID_CONSTANTS } from '../../constants/testIds';
+import { mergeClasses } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const {
+  signature
+} = TEST_IDS;
+const {
+  TITLE,
+  CANVAS,
+  HELP_TEXT,
+  VALIDATION_DATA,
+  CLEAR_BUTTON
+} = ID_CONSTANTS;
+const UTSignature = _ref => {
+  var _getCanvas3;
+  let {
+    actions: titleActions,
+    canvasBackgroundColor = Colors.white,
+    classes: themeClasses = {},
+    classNames = {},
+    dataTestId = signature,
+    error,
+    height = 200,
+    helpText,
+    input,
+    onChange = () => {},
+    penColor = Colors.black,
+    required,
+    title,
+    titleVariant = TITLE_VARIANTS.large,
+    value,
+    width = 500
+  } = _ref;
+  const sigCanvasRef = useRef(null);
+  const getCanvas = () => sigCanvasRef.current;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [themeClasses, classNames]);
+  const currentValue = input ? input.value : value;
+  const handleChange = newValue => input ? input.onChange(newValue) : onChange(newValue);
+  const clear = () => {
+    var _getCanvas;
+    (_getCanvas = getCanvas()) === null || _getCanvas === void 0 || _getCanvas.clear();
+    handleChange('');
+  };
+  const handleEnd = () => {
+    var _getCanvas2;
+    const data = ((_getCanvas2 = getCanvas()) === null || _getCanvas2 === void 0 ? void 0 : _getCanvas2.toDataURL('image/png')) || '';
+    if (!data) {
+      handleChange('');
+      return;
+    }
+    handleChange({
+      file: base64ToFile(data, 'signature.png')
+    });
+  };
+  useEffect(() => {
+    const canvas = getCanvas();
+    if (!canvas) return;
+    if (typeof currentValue === 'string' && currentValue.startsWith('data:image')) {
+      canvas.fromDataURL(currentValue);
+    }
+  }, [currentValue]);
+  const validationData = ((_getCanvas3 = getCanvas()) === null || _getCanvas3 === void 0 ? void 0 : _getCanvas3.isEmpty()) && error && formatErrorToValidation(error);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classNames.container),
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: titleActions,
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/React.createElement(SignatureCanvas, {
+    backgroundColor: canvasBackgroundColor,
+    canvasProps: {
+      className: "".concat(styles.canvas, " ").concat(classNames.canvas, " ").concat(classes.canvas),
+      'data-testid': "".concat(dataTestId, ".").concat(CANVAS),
+      height,
+      tabIndex: 0,
+      width
+    },
+    onEnd: handleEnd,
+    penColor: penColor,
+    ref: sigCanvasRef
+  }), helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(HELP_TEXT),
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: "".concat(dataTestId, ".").concat(VALIDATION_DATA),
+    validationData: validationData
+  }), /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "error",
+    dataTestId: "".concat(dataTestId, ".").concat(CLEAR_BUTTON),
+    onClick: clear,
+    variant: "text"
+  }, "Limpiar"));
+};
+UTSignature.propTypes = {
+  actions: arrayOf(buttonTypes),
+  canvasBackgroundColor: string,
+  classes: objectOf(string),
+  classNames: object,
+  dataTestId: string,
+  error: string,
+  height: number,
+  helpText: string,
+  input: inputPropTypes,
+  onChange: func,
+  penColor: string,
+  required: bool,
+  title: string,
+  titleVariant: string,
+  value: oneOfType([string, shape({
+    name: string,
+    type: string
+  }), shape({
+    file: object
+  })]),
+  width: number
+};
+export default WithTheme(retrieveStyle)(UTSignature);

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

@@ -0,0 +1,6 @@
+.container {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

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

@@ -0,0 +1,22 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette;
+  let {
+    theme
+  } = _ref;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const actionTheme = actionPaletteColors.accent;
+  const grayTheme = theme.Palette.gray;
+  return {
+    canvas: {
+      borderRadius: '4px',
+      border: "1px solid ".concat(grayTheme['01']),
+      cursor: 'pointer',
+      '&:focus': {
+        border: "2px solid ".concat(actionTheme['04'])
+      },
+      '&:active': {
+        border: "2px solid ".concat(actionTheme['04'])
+      }
+    }
+  };
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createSkeletonElement } from '@trainline/react-skeletor';
+import styles from './styles.module.scss';
+const SkeletonWrapper = createSkeletonElement('div', styles.skeleton);
+const hasMock = string => {
+  var _string$props$childre;
+  if (string && string.props.source) return string.props.source.toString().includes('MOCK');
+  if (string && string.props.children) return string.props.children.toString().includes('MOCK') || ((_string$props$childre = string.props.children) === null || _string$props$childre === void 0 || (_string$props$childre = _string$props$childre.props) === null || _string$props$childre === void 0 || (_string$props$childre = _string$props$childre.children) === null || _string$props$childre === void 0 ? void 0 : _string$props$childre.toString().includes('MOCK'));
+};
+const hiddenChildren = child => /*#__PURE__*/React.cloneElement(child, {
+  className: "".concat(child.className, " ").concat(styles.skeletonHiddenChild)
+});
+class Skeleton extends React.PureComponent {
+  render() {
+    return hasMock(this.props.children) ? /*#__PURE__*/React.createElement(SkeletonWrapper, null, hiddenChildren(this.props.children)) : this.props.children;
+  }
+}
+export default Skeleton;

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

@@ -0,0 +1,33 @@
+
+@use '../../scss/variables/colors.module.scss' as *;
+
+@keyframes skeletonAnimation {
+  0% {
+    background-position: -150px;
+  }
+
+  40% {
+    background-position: 350px;
+  }
+
+  100% {
+    background-position: 350px;
+  }
+  }
+
+.skeleton {
+  animation: skeletonAnimation 2s infinite linear;
+  background-color: $skeleton-base;
+  background-image: linear-gradient(90deg, $skeleton-first 0, $skeleton-second 50px, $skeleton-first 100px);
+  background-size: 600px;
+  border-radius: 2px;
+  margin-bottom: 10px;
+  max-height: 8px;
+  max-width: 300px;
+  };
+
+.skeletonHiddenChild {
+  color: transparent;
+  margin-bottom: -1px;
+  visibility: hidden;
+}