@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +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: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:null==theme||null===(_theme$UTSidebar=theme.UTSidebar)||void 0===_theme$UTSidebar||null===(_theme$UTSidebar=_theme$UTSidebar.logoBadgeOpen)||void 0===_theme$UTSidebar?void 0:_theme$UTSidebar.backgroundColor,borderRadius:(null==theme||null===(_theme$UTSidebar2=theme.UTSidebar)||void 0===_theme$UTSidebar2||null===(_theme$UTSidebar2=_theme$UTSidebar2.logoBadgeOpen)||void 0===_theme$UTSidebar2?void 0:_theme$UTSidebar2.borderRadius)||8,color:null==theme||null===(_theme$UTSidebar3=theme.UTSidebar)||void 0===_theme$UTSidebar3||null===(_theme$UTSidebar3=_theme$UTSidebar3.logoBadgeOpen)||void 0===_theme$UTSidebar3?void 0:_theme$UTSidebar3.color,fontSize:(null==theme||null===(_theme$UTSidebar4=theme.UTSidebar)||void 0===_theme$UTSidebar4||null===(_theme$UTSidebar4=_theme$UTSidebar4.logoBadgeOpen)||void 0===_theme$UTSidebar4?void 0:_theme$UTSidebar4.fontSize)||FontSizes.small,fontWeight:(null==theme||null===(_theme$UTSidebar5=theme.UTSidebar)||void 0===_theme$UTSidebar5||null===(_theme$UTSidebar5=_theme$UTSidebar5.logoBadgeOpen)||void 0===_theme$UTSidebar5?void 0:_theme$UTSidebar5.fontWeight)||600,margin:(null==theme||null===(_theme$UTSidebar6=theme.UTSidebar)||void 0===_theme$UTSidebar6||null===(_theme$UTSidebar6=_theme$UTSidebar6.logoBadgeOpen)||void 0===_theme$UTSidebar6?void 0:_theme$UTSidebar6.margin)||"12px auto 24px",maxWidth:(null==theme||null===(_theme$UTSidebar7=theme.UTSidebar)||void 0===_theme$UTSidebar7||null===(_theme$UTSidebar7=_theme$UTSidebar7.logoBadgeOpen)||void 0===_theme$UTSidebar7?void 0:_theme$UTSidebar7.maxWidth)||"96%",padding:(null==theme||null===(_theme$UTSidebar8=theme.UTSidebar)||void 0===_theme$UTSidebar8||null===(_theme$UTSidebar8=_theme$UTSidebar8.logoBadgeOpen)||void 0===_theme$UTSidebar8?void 0:_theme$UTSidebar8.padding)||"2px 8px"},logoBadgeClose:{backgroundColor:null==theme||null===(_theme$UTSidebar9=theme.UTSidebar)||void 0===_theme$UTSidebar9||null===(_theme$UTSidebar9=_theme$UTSidebar9.logoBadgeClose)||void 0===_theme$UTSidebar9?void 0:_theme$UTSidebar9.backgroundColor,borderRadius:(null==theme||null===(_theme$UTSidebar0=theme.UTSidebar)||void 0===_theme$UTSidebar0||null===(_theme$UTSidebar0=_theme$UTSidebar0.logoBadgeClose)||void 0===_theme$UTSidebar0?void 0:_theme$UTSidebar0.borderRadius)||8,color:null==theme||null===(_theme$UTSidebar1=theme.UTSidebar)||void 0===_theme$UTSidebar1||null===(_theme$UTSidebar1=_theme$UTSidebar1.logoBadgeClose)||void 0===_theme$UTSidebar1?void 0:_theme$UTSidebar1.color,fontSize:(null==theme||null===(_theme$UTSidebar10=theme.UTSidebar)||void 0===_theme$UTSidebar10||null===(_theme$UTSidebar10=_theme$UTSidebar10.logoBadgeClose)||void 0===_theme$UTSidebar10?void 0:_theme$UTSidebar10.fontSize)||FontSizes.small,fontWeight:(null==theme||null===(_theme$UTSidebar11=theme.UTSidebar)||void 0===_theme$UTSidebar11||null===(_theme$UTSidebar11=_theme$UTSidebar11.logoBadgeClose)||void 0===_theme$UTSidebar11?void 0:_theme$UTSidebar11.fontWeight)||600,margin:(null==theme||null===(_theme$UTSidebar12=theme.UTSidebar)||void 0===_theme$UTSidebar12||null===(_theme$UTSidebar12=_theme$UTSidebar12.logoBadgeClose)||void 0===_theme$UTSidebar12?void 0:_theme$UTSidebar12.margin)||"12px auto 24px",maxWidth:(null==theme||null===(_theme$UTSidebar13=theme.UTSidebar)||void 0===_theme$UTSidebar13||null===(_theme$UTSidebar13=_theme$UTSidebar13.logoBadgeClose)||void 0===_theme$UTSidebar13?void 0:_theme$UTSidebar13.maxWidth)||"96%",padding:(null==theme||null===(_theme$UTSidebar14=theme.UTSidebar)||void 0===_theme$UTSidebar14||null===(_theme$UTSidebar14=_theme$UTSidebar14.logoBadgeClose)||void 0===_theme$UTSidebar14?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"])}}};
+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

@@ -1 +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);
+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

@@ -1 +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:signature}=TEST_IDS,{TITLE:TITLE,CANVAS:CANVAS,HELP_TEXT:HELP_TEXT,VALIDATION_DATA:VALIDATION_DATA,CLEAR_BUTTON:CLEAR_BUTTON}=ID_CONSTANTS,UTSignature=_ref=>{var _getCanvas3;let{actions:titleActions,canvasBackgroundColor:canvasBackgroundColor=Colors.white,classes:themeClasses={},classNames:classNames={},dataTestId:dataTestId=signature,error:error,height:height=200,helpText:helpText,input:input,onChange:onChange=()=>{},penColor:penColor=Colors.black,required:required,title:title,titleVariant:titleVariant=TITLE_VARIANTS.large,value:value,width:width=500}=_ref;const sigCanvasRef=useRef(null),getCanvas=()=>sigCanvasRef.current,classes=useMemo(()=>mergeClasses(themeClasses,classNames),[themeClasses,classNames]),currentValue=input?input.value:value,handleChange=newValue=>input?input.onChange(newValue):onChange(newValue);useEffect(()=>{const canvas=getCanvas();canvas&&"string"==typeof currentValue&&currentValue.startsWith("data:image")&&canvas.fromDataURL(currentValue)},[currentValue]);const validationData=(null===(_getCanvas3=getCanvas())||void 0===_getCanvas3?void 0:_getCanvas3.isEmpty())&&error&&formatErrorToValidation(error);return React.createElement("div",{className:"".concat(styles.container," ").concat(classNames.container),"data-testid":dataTestId},title&&React.createElement(UTFieldLabel,{actions:titleActions,dataTestId:"".concat(dataTestId,".").concat(TITLE),required:required,size:titleVariant},title),React.createElement(SignatureCanvas,{backgroundColor:canvasBackgroundColor,canvasProps:{className:"".concat(styles.canvas," ").concat(classNames.canvas," ").concat(classes.canvas),"data-testid":"".concat(dataTestId,".").concat(CANVAS),height:height,tabIndex:0,width:width},onEnd:()=>{var _getCanvas2;const data=(null===(_getCanvas2=getCanvas())||void 0===_getCanvas2?void 0:_getCanvas2.toDataURL("image/png"))||"";handleChange(data?{file:base64ToFile(data,"signature.png")}:"")},penColor:penColor,ref:sigCanvasRef}),helpText&&React.createElement(UTLabel,{colorTheme:"gray",dataTestId:"".concat(dataTestId,".").concat(HELP_TEXT),variant:"small"},helpText),validationData&&React.createElement(UTValidation,{dataTestId:"".concat(dataTestId,".").concat(VALIDATION_DATA),validationData:validationData}),React.createElement(UTButton,{colorTheme:"error",dataTestId:"".concat(dataTestId,".").concat(CLEAR_BUTTON),onClick:()=>{var _getCanvas;null===(_getCanvas=getCanvas())||void 0===_getCanvas||_getCanvas.clear(),handleChange("")},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);
+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/theme.js

@@ -1 +1,22 @@
-export const retrieveStyle=_ref=>{var _theme$Palette;let{theme:theme}=_ref;const actionTheme=((null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.actions)||theme.Palette).accent,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"])}}}};
+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

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