@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTSidebar/theme.js

@@ -1 +1,253 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _seamlessImmutable=require("seamless-immutable"),_colorsModule=_interopRequireDefault(require("../../scss/variables/colors.module.scss")),_fontSizesModule=_interopRequireDefault(require("../../scss/variables/fontSizes.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawer","width"],60)},drawer:{backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawer","backgroundColor"],_colorsModule.default.white),borderRight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawer","borderRight"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawer","width"],60)},openedDrawer:{backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","openedDrawer","backgroundColor"],_colorsModule.default.white),borderRight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","openedDrawer","borderRight"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","openedDrawer","width"],180)},drawerTitle:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerTitle","color"],_colorsModule.default.black),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerTitle","fontSize"],"16px"),fontWeight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerTitle","fontWeight"],600),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerTitle","margin"])},drawerSubtitle:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerSubtitle","color"],_colorsModule.default.black),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerSubtitle","fontSize"],"14px"),fontWeight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerSubtitle","fontWeight"],400),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","drawerSubtitle","margin"])},closeDrawerContainer:{padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","closeDrawerContainer","padding"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","closeDrawerContainer","width"],"100%")},closeIcon:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","closeIcon","color"]),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","closeIcon","fontSize"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","closeIcon","margin"])},togglerContainer:{alignItems:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","togglerContainer","alignItems"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","togglerContainer","height"],50)},logoContainer:{alignItems:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","logoContainer","justify"]),justifyContent:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","logoContainer","align"],"center"),backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","logoContainer","backgroundColor"],_colorsModule.default.white),borderBottom:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","logoContainer","borderBottom"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","logoContainer","height"]),padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","logoContainer","padding"])},smallLogo:{alignSelf:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","smallLogo","align"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","smallLogo","margin"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","smallLogo","height"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","smallLogo","width"])},bigLogo:{alignSelf:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","bigLogo","align"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","bigLogo","height"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","bigLogo","margin"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","bigLogo","width"])},footerLogoContainer:{padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerLogoContainer","padding"])},footerBigLogo:{alignSelf:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerBigLogo","align"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerBigLogo","margin"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerBigLogo","height"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerBigLogo","width"])},footerSmallLogo:{alignSelf:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerSmallLogo","align"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerSmallLogo","height"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerSmallLogo","margin"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","footerSmallLogo","width"])},menuIcon:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","menuIcon","color"],_colorsModule.default.black),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","menuIcon","fontSize"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","menuIcon","margin"],"20px 0"),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","menuIcon","width"],"100%")},list:{alignSelf:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","list","align"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","list","width"],"100%")},listScrollbar:{maxWidth:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","list","maxWidth"],"100%"),padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","list","padding"],0)},listOpened:{alignSelf:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","listOpened","align"]),maxWidth:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","listOpened","maxWidth"]),padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","listOpened","padding"]),width:(0,_seamlessImmutable.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)||_fontSizesModule.default.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)||_fontSizesModule.default.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:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","backgroundColor"]),border:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","border"]),borderRadius:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","borderRadius"]),color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","color"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","height"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","margin"]),maxWidth:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","maxWidth"]),"&:hover":{background:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","hover","background"]),color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","hover","color"]),transition:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","hover","transition"]),"& $optionIconContainer":{background:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","hover","optionIconContainer","background"]),color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","hover","optionIconContainer","color"])},"& $optionIcon":{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","hover","optionIcon","color"]),opacity:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","hover","optionIcon","opacity"])}},padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","padding"],0),transition:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","transition"],"background-color 0.3s")},optionSelected:{background:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","background"]),border:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","border"]),borderRadius:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","borderRadius"]),color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","color"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","height"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","margin"]),"&::after":{backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarker","backgroundColor"]),borderRadius:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarker","borderRadius"],5),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarker","height"],"100%"),right:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarker","right"],0),top:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarker","top"],0),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarker","width"],1)},padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","padding"])},optionSelectedOpened:{"&::after":{backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarkerOpened","backgroundColor"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarkerOpened","height"]),right:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarkerOpened","right"]),top:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarkerOpened","top"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","selectedMarkerOpened","width"])}},optionIconContainer:{backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainer","backgroundColor"]),border:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainer","border"]),borderRadius:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainer","borderRadius"]),minHeight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainer","minHeight"]),minWidth:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainer","minWidth"]),transition:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainer","transition"]),padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainer","padding"])},optionIconContainerSelected:{backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainerSelected","backgroundColor"]),border:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainerSelected","border"]),borderRadius:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainerSelected","borderRadius"]),minWidth:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconContainerSelected","minWidth"])},optionIcon:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIcon","color"],(0,_seamlessImmutable.getIn)(theme,["UTSidebar","option","color"],_colorsModule.default.black)),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIcon","fontSize"]),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIcon","height"]),transition:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIcon","transition"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIcon","width"])},optionIconSelected:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconSelected","color"],(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionSelected","color"])),height:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconSelected","height"]),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconSelected","fontSize"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionIconSelected","width"])},optionLabel:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabel","color"]),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabel","fontSize"],"14px"),fontWeight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabel","fontWeight"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabel","margin"]),padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabel","padding"]),whiteSpace:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabel","whiteSpace"])},optionLabelSelected:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelSelected","color"]),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelSelected","fontSize"]),fontWeight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelSelected","fontWeight"]),padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelSelected","padding"])},optionLabelBottom:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottom","color"]),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottom","fontSize"],"12px"),fontWeight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottom","fontWeight"]),left:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottom","left"]),textAlign:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottom","textAlign"],"center"),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottom","width"],"100%")},optionLabelBottomSelected:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottomSelected","color"]),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottomSelected","fontSize"]),fontWeight:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottomSelected","fontWeight"]),left:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottomSelected","left"]),textAlign:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottomSelected","textAlign"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","optionLabelBottomSelected","width"])},toggleArrow:{color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","toggleArrow","color"]),fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","toggleArrow","fontSize"]),width:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","toggleArrow","width"],40)},tooltip:{backgroundColor:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","tooltip","backgroundColor"]),padding:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","tooltip","padding"],"2px 4px")},tooltipLabel:{fontSize:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","tooltipLabel","fontSize"],"18px"),color:(0,_seamlessImmutable.getIn)(theme,["UTSidebar","tooltipLabel","color"])}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _seamlessImmutable = require("seamless-immutable");
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _fontSizesModule = _interopRequireDefault(require("../../scss/variables/fontSizes.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawer', 'width'], 60)
+    },
+    drawer: {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawer', 'backgroundColor'], _colorsModule.default.white),
+      borderRight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawer', 'borderRight']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawer', 'width'], 60)
+    },
+    openedDrawer: {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'openedDrawer', 'backgroundColor'], _colorsModule.default.white),
+      borderRight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'openedDrawer', 'borderRight']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'openedDrawer', 'width'], 180)
+    },
+    drawerTitle: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerTitle', 'color'], _colorsModule.default.black),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerTitle', 'fontSize'], '16px'),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerTitle', 'fontWeight'], 600),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerTitle', 'margin'])
+    },
+    drawerSubtitle: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerSubtitle', 'color'], _colorsModule.default.black),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerSubtitle', 'fontSize'], '14px'),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerSubtitle', 'fontWeight'], 400),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawerSubtitle', 'margin'])
+    },
+    closeDrawerContainer: {
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'closeDrawerContainer', 'padding']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'closeDrawerContainer', 'width'], '100%')
+    },
+    closeIcon: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'closeIcon', 'color']),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'closeIcon', 'fontSize']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'closeIcon', 'margin'])
+    },
+    togglerContainer: {
+      alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'togglerContainer', 'alignItems']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'togglerContainer', 'height'], 50)
+    },
+    logoContainer: {
+      alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'logoContainer', 'justify']),
+      justifyContent: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'logoContainer', 'align'], 'center'),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'logoContainer', 'backgroundColor'], _colorsModule.default.white),
+      borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'logoContainer', 'borderBottom']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'logoContainer', 'height']),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'logoContainer', 'padding'])
+    },
+    smallLogo: {
+      alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'smallLogo', 'align']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'smallLogo', 'margin']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'smallLogo', 'height']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'smallLogo', 'width'])
+    },
+    bigLogo: {
+      alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'bigLogo', 'align']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'bigLogo', 'height']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'bigLogo', 'margin']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'bigLogo', 'width'])
+    },
+    footerLogoContainer: {
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerLogoContainer', 'padding'])
+    },
+    footerBigLogo: {
+      alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerBigLogo', 'align']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerBigLogo', 'margin']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerBigLogo', 'height']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerBigLogo', 'width'])
+    },
+    footerSmallLogo: {
+      alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerSmallLogo', 'align']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerSmallLogo', 'height']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerSmallLogo', 'margin']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'footerSmallLogo', 'width'])
+    },
+    menuIcon: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'menuIcon', 'color'], _colorsModule.default.black),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'menuIcon', 'fontSize']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'menuIcon', 'margin'], '20px 0'),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'menuIcon', 'width'], '100%')
+    },
+    list: {
+      alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'list', 'align']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'list', 'width'], '100%')
+    },
+    listScrollbar: {
+      maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'list', 'maxWidth'], '100%'),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'list', 'padding'], 0)
+    },
+    listOpened: {
+      alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'listOpened', 'align']),
+      maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'listOpened', 'maxWidth']),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'listOpened', 'padding']),
+      width: (0, _seamlessImmutable.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) || _fontSizesModule.default.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) || _fontSizesModule.default.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: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'backgroundColor']),
+      border: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'border']),
+      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'borderRadius']),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'color']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'height']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'margin']),
+      maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'maxWidth']),
+      '&:hover': {
+        background: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'hover', 'background']),
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'hover', 'color']),
+        transition: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'hover', 'transition']),
+        '& $optionIconContainer': {
+          background: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'hover', 'optionIconContainer', 'background']),
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'hover', 'optionIconContainer', 'color'])
+        },
+        '& $optionIcon': {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'hover', 'optionIcon', 'color']),
+          opacity: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'hover', 'optionIcon', 'opacity'])
+        }
+      },
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'padding'], 0),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'transition'], 'background-color 0.3s')
+    },
+    optionSelected: {
+      background: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'background']),
+      border: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'border']),
+      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'borderRadius']),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'color']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'height']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'margin']),
+      '&::after': {
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarker', 'backgroundColor']),
+        borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarker', 'borderRadius'], 5),
+        height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarker', 'height'], '100%'),
+        right: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarker', 'right'], 0),
+        top: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarker', 'top'], 0),
+        width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarker', 'width'], 1)
+      },
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'padding'])
+    },
+    optionSelectedOpened: {
+      '&::after': {
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarkerOpened', 'backgroundColor']),
+        height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarkerOpened', 'height']),
+        right: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarkerOpened', 'right']),
+        top: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarkerOpened', 'top']),
+        width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'selectedMarkerOpened', 'width'])
+      }
+    },
+    optionIconContainer: {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainer', 'backgroundColor']),
+      border: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainer', 'border']),
+      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainer', 'borderRadius']),
+      minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainer', 'minHeight']),
+      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainer', 'minWidth']),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainer', 'transition']),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainer', 'padding'])
+    },
+    optionIconContainerSelected: {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainerSelected', 'backgroundColor']),
+      border: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainerSelected', 'border']),
+      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainerSelected', 'borderRadius']),
+      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconContainerSelected', 'minWidth'])
+    },
+    optionIcon: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIcon', 'color'], (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'color'], _colorsModule.default.black)),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIcon', 'fontSize']),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIcon', 'height']),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIcon', 'transition']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIcon', 'width'])
+    },
+    optionIconSelected: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconSelected', 'color'], (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionSelected', 'color'])),
+      height: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconSelected', 'height']),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconSelected', 'fontSize']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionIconSelected', 'width'])
+    },
+    optionLabel: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabel', 'color']),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabel', 'fontSize'], '14px'),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabel', 'fontWeight']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabel', 'margin']),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabel', 'padding']),
+      whiteSpace: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabel', 'whiteSpace'])
+    },
+    optionLabelSelected: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelSelected', 'color']),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelSelected', 'fontSize']),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelSelected', 'fontWeight']),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelSelected', 'padding'])
+    },
+    optionLabelBottom: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottom', 'color']),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottom', 'fontSize'], '12px'),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottom', 'fontWeight']),
+      left: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottom', 'left']),
+      textAlign: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottom', 'textAlign'], 'center'),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottom', 'width'], '100%')
+    },
+    optionLabelBottomSelected: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottomSelected', 'color']),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottomSelected', 'fontSize']),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottomSelected', 'fontWeight']),
+      left: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottomSelected', 'left']),
+      textAlign: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottomSelected', 'textAlign']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'optionLabelBottomSelected', 'width'])
+    },
+    toggleArrow: {
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'toggleArrow', 'color']),
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'toggleArrow', 'fontSize']),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'toggleArrow', 'width'], 40)
+    },
+    tooltip: {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'tooltip', 'backgroundColor']),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'tooltip', 'padding'], '2px 4px')
+    },
+    tooltipLabel: {
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'tooltipLabel', 'fontSize'], '18px'),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'tooltipLabel', 'color'])
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTSidebar/types.js

@@ -1 +1,53 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.subOptionType=exports.optionsType=exports.optionType=exports.iconType=exports.classType=void 0;var _propTypes=require("prop-types");const classType=exports.classType=(0,_propTypes.shape)({bigLogo:_propTypes.string,closeDrawerContainer:_propTypes.string,closeIcon:_propTypes.string,drawer:_propTypes.string,drawerSubtitle:_propTypes.string,drawerTitle:_propTypes.string,list:_propTypes.string,listOpened:_propTypes.string,logoContainer:_propTypes.string,menuIcon:_propTypes.string,smallLogo:_propTypes.string,selectedMarker:_propTypes.string,selectedMarkerOpened:_propTypes.string,openedDrawer:_propTypes.string,option:_propTypes.string,optionIcon:_propTypes.string,optionIconSelected:_propTypes.string,optionIconContainer:_propTypes.string,optionIconContainerSelected:_propTypes.string,optionLabel:_propTypes.string,optionLabelBottom:_propTypes.string,optionLabelBottomSelected:_propTypes.string,optionLabelSelected:_propTypes.string,optionSelected:_propTypes.string,togglerContainer:_propTypes.string}),iconType=exports.iconType=(0,_propTypes.oneOfType)([_propTypes.func,_propTypes.elementType]),subOptionType=exports.subOptionType=(0,_propTypes.shape)({id:_propTypes.string,key:_propTypes.string,label:_propTypes.string,link:_propTypes.string,show:_propTypes.bool}),optionType=exports.optionType=(0,_propTypes.shape)({id:_propTypes.string,key:_propTypes.string,IconActive:_propTypes.elementType,IconInactive:_propTypes.elementType,link:_propTypes.string,label:_propTypes.string,show:_propTypes.bool,options:(0,_propTypes.arrayOf)(subOptionType)}),optionsType=exports.optionsType=(0,_propTypes.arrayOf)(optionType);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subOptionType = exports.optionsType = exports.optionType = exports.iconType = exports.classType = void 0;
+var _propTypes = require("prop-types");
+const classType = exports.classType = (0, _propTypes.shape)({
+  bigLogo: _propTypes.string,
+  closeDrawerContainer: _propTypes.string,
+  closeIcon: _propTypes.string,
+  drawer: _propTypes.string,
+  drawerSubtitle: _propTypes.string,
+  drawerTitle: _propTypes.string,
+  list: _propTypes.string,
+  listOpened: _propTypes.string,
+  logoContainer: _propTypes.string,
+  menuIcon: _propTypes.string,
+  smallLogo: _propTypes.string,
+  selectedMarker: _propTypes.string,
+  selectedMarkerOpened: _propTypes.string,
+  openedDrawer: _propTypes.string,
+  option: _propTypes.string,
+  optionIcon: _propTypes.string,
+  optionIconSelected: _propTypes.string,
+  optionIconContainer: _propTypes.string,
+  optionIconContainerSelected: _propTypes.string,
+  optionLabel: _propTypes.string,
+  optionLabelBottom: _propTypes.string,
+  optionLabelBottomSelected: _propTypes.string,
+  optionLabelSelected: _propTypes.string,
+  optionSelected: _propTypes.string,
+  togglerContainer: _propTypes.string
+});
+const iconType = exports.iconType = (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.elementType]);
+const subOptionType = exports.subOptionType = (0, _propTypes.shape)({
+  id: _propTypes.string,
+  key: _propTypes.string,
+  label: _propTypes.string,
+  link: _propTypes.string,
+  show: _propTypes.bool
+});
+const optionType = exports.optionType = (0, _propTypes.shape)({
+  id: _propTypes.string,
+  key: _propTypes.string,
+  IconActive: _propTypes.elementType,
+  IconInactive: _propTypes.elementType,
+  link: _propTypes.string,
+  label: _propTypes.string,
+  show: _propTypes.bool,
+  options: (0, _propTypes.arrayOf)(subOptionType)
+});
+const optionsType = exports.optionsType = (0, _propTypes.arrayOf)(optionType);

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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _utils = require("stories/utils");
+var _inputs = require("../../constants/inputs");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.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(_inputs.TITLE_VARIANTS),
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_inputs.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: _.default,
+  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'
+};
+const Default = exports.Default = {
+  args: {
+    penColor: 'black',
+    title: 'Firma'
+  },
+  name: 'Playground'
+};

package/dist/components/UTSignature/index.js

@@ -1 +1,143 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactSignatureCanvas=_interopRequireDefault(require("react-signature-canvas")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../UTButton")),_UTFieldLabel=_interopRequireDefault(require("../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTValidation=_interopRequireDefault(require("../UTValidation")),_buttonTypes=require("../../types/buttonTypes"),_inputs=require("../../constants/inputs"),_utils=require("../UTValidation/utils"),_formTypes=require("../../types/formTypes"),_colorsModule=_interopRequireDefault(require("../../scss/variables/colors.module.scss")),_helperFunctions=require("../../utils/helperFunctions"),_testIds=require("../../constants/testIds"),_classesUtils=require("../../utils/classesUtils"),_WithTheme=_interopRequireDefault(require("../WithTheme")),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const{signature:signature}=_testIds.TEST_IDS,{TITLE:TITLE,CANVAS:CANVAS,HELP_TEXT:HELP_TEXT,VALIDATION_DATA:VALIDATION_DATA,CLEAR_BUTTON:CLEAR_BUTTON}=_testIds.ID_CONSTANTS,UTSignature=_ref=>{var _getCanvas3;let{actions:titleActions,canvasBackgroundColor:canvasBackgroundColor=_colorsModule.default.white,classes:themeClasses={},classNames:classNames={},dataTestId:dataTestId=signature,error:error,height:height=200,helpText:helpText,input:input,onChange:onChange=()=>{},penColor:penColor=_colorsModule.default.black,required:required,title:title,titleVariant:titleVariant=_inputs.TITLE_VARIANTS.large,value:value,width:width=500}=_ref;const sigCanvasRef=(0,_react.useRef)(null),getCanvas=()=>sigCanvasRef.current,classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(themeClasses,classNames),[themeClasses,classNames]),currentValue=input?input.value:value,handleChange=newValue=>input?input.onChange(newValue):onChange(newValue);(0,_react.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&&(0,_utils.formatErrorToValidation)(error);return _react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(classNames.container),"data-testid":dataTestId},title&&_react.default.createElement(_UTFieldLabel.default,{actions:titleActions,dataTestId:"".concat(dataTestId,".").concat(TITLE),required:required,size:titleVariant},title),_react.default.createElement(_reactSignatureCanvas.default,{backgroundColor:canvasBackgroundColor,canvasProps:{className:"".concat(_stylesModule.default.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:(0,_helperFunctions.base64ToFile)(data,"signature.png")}:"")},penColor:penColor,ref:sigCanvasRef}),helpText&&_react.default.createElement(_UTLabel.default,{colorTheme:"gray",dataTestId:"".concat(dataTestId,".").concat(HELP_TEXT),variant:"small"},helpText),validationData&&_react.default.createElement(_UTValidation.default,{dataTestId:"".concat(dataTestId,".").concat(VALIDATION_DATA),validationData:validationData}),_react.default.createElement(_UTButton.default,{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:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),canvasBackgroundColor:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:_propTypes.object,dataTestId:_propTypes.string,error:_propTypes.string,height:_propTypes.number,helpText:_propTypes.string,input:_formTypes.inputPropTypes,onChange:_propTypes.func,penColor:_propTypes.string,required:_propTypes.bool,title:_propTypes.string,titleVariant:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.shape)({name:_propTypes.string,type:_propTypes.string}),(0,_propTypes.shape)({file:_propTypes.object})]),width:_propTypes.number};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTSignature);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTValidation = _interopRequireDefault(require("../UTValidation"));
+var _buttonTypes = require("../../types/buttonTypes");
+var _inputs = require("../../constants/inputs");
+var _utils = require("../UTValidation/utils");
+var _formTypes = require("../../types/formTypes");
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _helperFunctions = require("../../utils/helperFunctions");
+var _testIds = require("../../constants/testIds");
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  signature
+} = _testIds.TEST_IDS;
+const {
+  TITLE,
+  CANVAS,
+  HELP_TEXT,
+  VALIDATION_DATA,
+  CLEAR_BUTTON
+} = _testIds.ID_CONSTANTS;
+const UTSignature = _ref => {
+  var _getCanvas3;
+  let {
+    actions: titleActions,
+    canvasBackgroundColor = _colorsModule.default.white,
+    classes: themeClasses = {},
+    classNames = {},
+    dataTestId = signature,
+    error,
+    height = 200,
+    helpText,
+    input,
+    onChange = () => {},
+    penColor = _colorsModule.default.black,
+    required,
+    title,
+    titleVariant = _inputs.TITLE_VARIANTS.large,
+    value,
+    width = 500
+  } = _ref;
+  const sigCanvasRef = (0, _react.useRef)(null);
+  const getCanvas = () => sigCanvasRef.current;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.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: (0, _helperFunctions.base64ToFile)(data, 'signature.png')
+    });
+  };
+  (0, _react.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 && (0, _utils.formatErrorToValidation)(error);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classNames.container),
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: titleActions,
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/_react.default.createElement(_reactSignatureCanvas.default, {
+    backgroundColor: canvasBackgroundColor,
+    canvasProps: {
+      className: "".concat(_stylesModule.default.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.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(HELP_TEXT),
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    dataTestId: "".concat(dataTestId, ".").concat(VALIDATION_DATA),
+    validationData: validationData
+  }), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "error",
+    dataTestId: "".concat(dataTestId, ".").concat(CLEAR_BUTTON),
+    onClick: clear,
+    variant: "text"
+  }, "Limpiar"));
+};
+UTSignature.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  canvasBackgroundColor: _propTypes.string,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: _propTypes.object,
+  dataTestId: _propTypes.string,
+  error: _propTypes.string,
+  height: _propTypes.number,
+  helpText: _propTypes.string,
+  input: _formTypes.inputPropTypes,
+  onChange: _propTypes.func,
+  penColor: _propTypes.string,
+  required: _propTypes.bool,
+  title: _propTypes.string,
+  titleVariant: _propTypes.string,
+  value: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.shape)({
+    name: _propTypes.string,
+    type: _propTypes.string
+  }), (0, _propTypes.shape)({
+    file: _propTypes.object
+  })]),
+  width: _propTypes.number
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSignature);