@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTTopbar/theme.js

@@ -1 +1,77 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _colorsModule=_interopRequireDefault(require("../../scss/variables/colors.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const retrieveStyle=_ref=>{var _theme$UTTopbar,_theme$UTTopbar2,_theme$UTTopbar3,_theme$UTTopbar4,_theme$UTTopbar5,_theme$UTTopbar6,_theme$UTTopbar7,_theme$UTTopbar8,_theme$UTTopbar9,_theme$UTTopbar0,_theme$UTTopbar1,_theme$UTTopbar10,_theme$UTTopbar11,_theme$UTTopbar12,_theme$UTTopbar13,_theme$UTTopbar14,_theme$UTTopbar15,_theme$UTTopbar16,_theme$UTTopbar17,_theme$UTTopbar18,_theme$UTTopbar19,_theme$UTTopbar20,_theme$UTTopbar21,_theme$UTTopbar22,_theme$UTTopbar23,_theme$UTTopbar24,_theme$UTTopbar25,_theme$UTTopbar26,_theme$UTTopbar27,_theme$UTTopbar28,_theme$UTTopbar29,_theme$UTTopbar30,_theme$UTTopbar31,_theme$UTTopbar32,_theme$UTTopbar33,_theme$UTTopbar34,_theme$UTTopbar35,_theme$UTTopbar36,_theme$UTTopbar37,_theme$UTTopbar38;let{theme:theme}=_ref;return{container:{background:(null==theme||null===(_theme$UTTopbar=theme.UTTopbar)||void 0===_theme$UTTopbar||null===(_theme$UTTopbar=_theme$UTTopbar.container)||void 0===_theme$UTTopbar?void 0:_theme$UTTopbar.background)||_colorsModule.default.white,borderBottom:null==theme||null===(_theme$UTTopbar2=theme.UTTopbar)||void 0===_theme$UTTopbar2||null===(_theme$UTTopbar2=_theme$UTTopbar2.container)||void 0===_theme$UTTopbar2?void 0:_theme$UTTopbar2.borderBottom,height:null==theme||null===(_theme$UTTopbar3=theme.UTTopbar)||void 0===_theme$UTTopbar3||null===(_theme$UTTopbar3=_theme$UTTopbar3.container)||void 0===_theme$UTTopbar3?void 0:_theme$UTTopbar3.height,padding:(null==theme||null===(_theme$UTTopbar4=theme.UTTopbar)||void 0===_theme$UTTopbar4||null===(_theme$UTTopbar4=_theme$UTTopbar4.container)||void 0===_theme$UTTopbar4?void 0:_theme$UTTopbar4.padding)||"10px 20px",position:null==theme||null===(_theme$UTTopbar5=theme.UTTopbar)||void 0===_theme$UTTopbar5||null===(_theme$UTTopbar5=_theme$UTTopbar5.container)||void 0===_theme$UTTopbar5?void 0:_theme$UTTopbar5.position,top:null==theme||null===(_theme$UTTopbar6=theme.UTTopbar)||void 0===_theme$UTTopbar6||null===(_theme$UTTopbar6=_theme$UTTopbar6.container)||void 0===_theme$UTTopbar6?void 0:_theme$UTTopbar6.top,zIndex:null==theme||null===(_theme$UTTopbar7=theme.UTTopbar)||void 0===_theme$UTTopbar7||null===(_theme$UTTopbar7=_theme$UTTopbar7.container)||void 0===_theme$UTTopbar7?void 0:_theme$UTTopbar7.zIndex},breadCrumb:{"&:hover":{backgroundColor:null==theme||null===(_theme$UTTopbar8=theme.UTTopbar)||void 0===_theme$UTTopbar8||null===(_theme$UTTopbar8=_theme$UTTopbar8.breadCrumb)||void 0===_theme$UTTopbar8||null===(_theme$UTTopbar8=_theme$UTTopbar8.hover)||void 0===_theme$UTTopbar8?void 0:_theme$UTTopbar8.backgroundColor,textDecoration:null==theme||null===(_theme$UTTopbar9=theme.UTTopbar)||void 0===_theme$UTTopbar9||null===(_theme$UTTopbar9=_theme$UTTopbar9.breadCrumb)||void 0===_theme$UTTopbar9||null===(_theme$UTTopbar9=_theme$UTTopbar9.hover)||void 0===_theme$UTTopbar9?void 0:_theme$UTTopbar9.textDecoration,cursor:null==theme||null===(_theme$UTTopbar0=theme.UTTopbar)||void 0===_theme$UTTopbar0||null===(_theme$UTTopbar0=_theme$UTTopbar0.breadCrumb)||void 0===_theme$UTTopbar0||null===(_theme$UTTopbar0=_theme$UTTopbar0.hover)||void 0===_theme$UTTopbar0?void 0:_theme$UTTopbar0.cursor}},userMenu:{borderLeft:null==theme||null===(_theme$UTTopbar1=theme.UTTopbar)||void 0===_theme$UTTopbar1||null===(_theme$UTTopbar1=_theme$UTTopbar1.userMenu)||void 0===_theme$UTTopbar1?void 0:_theme$UTTopbar1.borderLeft,margin:(null==theme||null===(_theme$UTTopbar10=theme.UTTopbar)||void 0===_theme$UTTopbar10||null===(_theme$UTTopbar10=_theme$UTTopbar10.userMenu)||void 0===_theme$UTTopbar10?void 0:_theme$UTTopbar10.margin)||"0 0 0 20px",minWidth:null==theme||null===(_theme$UTTopbar11=theme.UTTopbar)||void 0===_theme$UTTopbar11||null===(_theme$UTTopbar11=_theme$UTTopbar11.userMenu)||void 0===_theme$UTTopbar11?void 0:_theme$UTTopbar11.minWidth,padding:(null==theme||null===(_theme$UTTopbar12=theme.UTTopbar)||void 0===_theme$UTTopbar12||null===(_theme$UTTopbar12=_theme$UTTopbar12.userMenu)||void 0===_theme$UTTopbar12?void 0:_theme$UTTopbar12.padding)||"0 0 0 20px",justifyContent:null==theme||null===(_theme$UTTopbar13=theme.UTTopbar)||void 0===_theme$UTTopbar13||null===(_theme$UTTopbar13=_theme$UTTopbar13.userMenu)||void 0===_theme$UTTopbar13?void 0:_theme$UTTopbar13.justifyContent},userMenuAvatar:{background:null==theme||null===(_theme$UTTopbar14=theme.UTTopbar)||void 0===_theme$UTTopbar14||null===(_theme$UTTopbar14=_theme$UTTopbar14.userMenuAvatar)||void 0===_theme$UTTopbar14?void 0:_theme$UTTopbar14.background,border:null==theme||null===(_theme$UTTopbar15=theme.UTTopbar)||void 0===_theme$UTTopbar15||null===(_theme$UTTopbar15=_theme$UTTopbar15.userMenuAvatar)||void 0===_theme$UTTopbar15?void 0:_theme$UTTopbar15.border,borderRadius:(null==theme||null===(_theme$UTTopbar16=theme.UTTopbar)||void 0===_theme$UTTopbar16||null===(_theme$UTTopbar16=_theme$UTTopbar16.userMenuAvatar)||void 0===_theme$UTTopbar16?void 0:_theme$UTTopbar16.borderRadius)||"50%",color:null==theme||null===(_theme$UTTopbar17=theme.UTTopbar)||void 0===_theme$UTTopbar17||null===(_theme$UTTopbar17=_theme$UTTopbar17.userMenuAvatar)||void 0===_theme$UTTopbar17?void 0:_theme$UTTopbar17.color,fontSize:(null==theme||null===(_theme$UTTopbar18=theme.UTTopbar)||void 0===_theme$UTTopbar18||null===(_theme$UTTopbar18=_theme$UTTopbar18.userMenuAvatar)||void 0===_theme$UTTopbar18?void 0:_theme$UTTopbar18.fontSize)||24,fontWeight:(null==theme||null===(_theme$UTTopbar19=theme.UTTopbar)||void 0===_theme$UTTopbar19||null===(_theme$UTTopbar19=_theme$UTTopbar19.userMenuAvatar)||void 0===_theme$UTTopbar19?void 0:_theme$UTTopbar19.fontWeight)||500,height:(null==theme||null===(_theme$UTTopbar20=theme.UTTopbar)||void 0===_theme$UTTopbar20||null===(_theme$UTTopbar20=_theme$UTTopbar20.userMenuAvatar)||void 0===_theme$UTTopbar20?void 0:_theme$UTTopbar20.height)||40,margin:(null==theme||null===(_theme$UTTopbar21=theme.UTTopbar)||void 0===_theme$UTTopbar21||null===(_theme$UTTopbar21=_theme$UTTopbar21.userMenuAvatar)||void 0===_theme$UTTopbar21?void 0:_theme$UTTopbar21.margin)||"0 10px 0 0",width:(null==theme||null===(_theme$UTTopbar22=theme.UTTopbar)||void 0===_theme$UTTopbar22||null===(_theme$UTTopbar22=_theme$UTTopbar22.userMenuAvatar)||void 0===_theme$UTTopbar22?void 0:_theme$UTTopbar22.width)||40},userMenuArrow:{alignSelf:null==theme||null===(_theme$UTTopbar23=theme.UTTopbar)||void 0===_theme$UTTopbar23||null===(_theme$UTTopbar23=_theme$UTTopbar23.userMenuArrow)||void 0===_theme$UTTopbar23?void 0:_theme$UTTopbar23.alignSelf,color:null==theme||null===(_theme$UTTopbar24=theme.UTTopbar)||void 0===_theme$UTTopbar24||null===(_theme$UTTopbar24=_theme$UTTopbar24.userMenuArrow)||void 0===_theme$UTTopbar24?void 0:_theme$UTTopbar24.color,fontSize:null==theme||null===(_theme$UTTopbar25=theme.UTTopbar)||void 0===_theme$UTTopbar25||null===(_theme$UTTopbar25=_theme$UTTopbar25.userMenuArrow)||void 0===_theme$UTTopbar25?void 0:_theme$UTTopbar25.fontSize,height:(null==theme||null===(_theme$UTTopbar26=theme.UTTopbar)||void 0===_theme$UTTopbar26||null===(_theme$UTTopbar26=_theme$UTTopbar26.userMenuArrow)||void 0===_theme$UTTopbar26?void 0:_theme$UTTopbar26.height)||20,margin:(null==theme||null===(_theme$UTTopbar27=theme.UTTopbar)||void 0===_theme$UTTopbar27||null===(_theme$UTTopbar27=_theme$UTTopbar27.userMenuArrow)||void 0===_theme$UTTopbar27?void 0:_theme$UTTopbar27.margin)||"0 0 0 6px",width:(null==theme||null===(_theme$UTTopbar28=theme.UTTopbar)||void 0===_theme$UTTopbar28||null===(_theme$UTTopbar28=_theme$UTTopbar28.userMenuArrow)||void 0===_theme$UTTopbar28?void 0:_theme$UTTopbar28.width)||"auto"},userMenuTitle:{color:null==theme||null===(_theme$UTTopbar29=theme.UTTopbar)||void 0===_theme$UTTopbar29||null===(_theme$UTTopbar29=_theme$UTTopbar29.userMenuTitle)||void 0===_theme$UTTopbar29?void 0:_theme$UTTopbar29.color,fontSize:null==theme||null===(_theme$UTTopbar30=theme.UTTopbar)||void 0===_theme$UTTopbar30||null===(_theme$UTTopbar30=_theme$UTTopbar30.userMenuTitle)||void 0===_theme$UTTopbar30?void 0:_theme$UTTopbar30.fontSize,fontWeight:(null==theme||null===(_theme$UTTopbar31=theme.UTTopbar)||void 0===_theme$UTTopbar31||null===(_theme$UTTopbar31=_theme$UTTopbar31.userMenuTitle)||void 0===_theme$UTTopbar31?void 0:_theme$UTTopbar31.fontWeight)||500,margin:null==theme||null===(_theme$UTTopbar32=theme.UTTopbar)||void 0===_theme$UTTopbar32||null===(_theme$UTTopbar32=_theme$UTTopbar32.userMenuTitle)||void 0===_theme$UTTopbar32?void 0:_theme$UTTopbar32.margin},notifications:{padding:(null==theme||null===(_theme$UTTopbar33=theme.UTTopbar)||void 0===_theme$UTTopbar33||null===(_theme$UTTopbar33=_theme$UTTopbar33.notifications)||void 0===_theme$UTTopbar33?void 0:_theme$UTTopbar33.padding)||"0 20px"},notificationsIcon:{height:(null==theme||null===(_theme$UTTopbar34=theme.UTTopbar)||void 0===_theme$UTTopbar34||null===(_theme$UTTopbar34=_theme$UTTopbar34.notificationsIcon)||void 0===_theme$UTTopbar34?void 0:_theme$UTTopbar34.height)||32,fontSize:(null==theme||null===(_theme$UTTopbar35=theme.UTTopbar)||void 0===_theme$UTTopbar35||null===(_theme$UTTopbar35=_theme$UTTopbar35.notificationsIcon)||void 0===_theme$UTTopbar35?void 0:_theme$UTTopbar35.fontSize)||30,padding:null==theme||null===(_theme$UTTopbar36=theme.UTTopbar)||void 0===_theme$UTTopbar36||null===(_theme$UTTopbar36=_theme$UTTopbar36.notificationsIcon)||void 0===_theme$UTTopbar36?void 0:_theme$UTTopbar36.padding},menuIcon:{color:null==theme||null===(_theme$UTTopbar37=theme.UTTopbar)||void 0===_theme$UTTopbar37||null===(_theme$UTTopbar37=_theme$UTTopbar37.menuIcon)||void 0===_theme$UTTopbar37?void 0:_theme$UTTopbar37.color,fontSize:(null==theme||null===(_theme$UTTopbar38=theme.UTTopbar)||void 0===_theme$UTTopbar38||null===(_theme$UTTopbar38=_theme$UTTopbar38.menuIcon)||void 0===_theme$UTTopbar38?void 0:_theme$UTTopbar38.fontSize)||25}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const retrieveStyle = _ref => {
+  var _theme$UTTopbar, _theme$UTTopbar2, _theme$UTTopbar3, _theme$UTTopbar4, _theme$UTTopbar5, _theme$UTTopbar6, _theme$UTTopbar7, _theme$UTTopbar8, _theme$UTTopbar9, _theme$UTTopbar0, _theme$UTTopbar1, _theme$UTTopbar10, _theme$UTTopbar11, _theme$UTTopbar12, _theme$UTTopbar13, _theme$UTTopbar14, _theme$UTTopbar15, _theme$UTTopbar16, _theme$UTTopbar17, _theme$UTTopbar18, _theme$UTTopbar19, _theme$UTTopbar20, _theme$UTTopbar21, _theme$UTTopbar22, _theme$UTTopbar23, _theme$UTTopbar24, _theme$UTTopbar25, _theme$UTTopbar26, _theme$UTTopbar27, _theme$UTTopbar28, _theme$UTTopbar29, _theme$UTTopbar30, _theme$UTTopbar31, _theme$UTTopbar32, _theme$UTTopbar33, _theme$UTTopbar34, _theme$UTTopbar35, _theme$UTTopbar36, _theme$UTTopbar37, _theme$UTTopbar38;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      background: (theme === null || theme === void 0 || (_theme$UTTopbar = theme.UTTopbar) === null || _theme$UTTopbar === void 0 || (_theme$UTTopbar = _theme$UTTopbar.container) === null || _theme$UTTopbar === void 0 ? void 0 : _theme$UTTopbar.background) || _colorsModule.default.white,
+      borderBottom: theme === null || theme === void 0 || (_theme$UTTopbar2 = theme.UTTopbar) === null || _theme$UTTopbar2 === void 0 || (_theme$UTTopbar2 = _theme$UTTopbar2.container) === null || _theme$UTTopbar2 === void 0 ? void 0 : _theme$UTTopbar2.borderBottom,
+      height: theme === null || theme === void 0 || (_theme$UTTopbar3 = theme.UTTopbar) === null || _theme$UTTopbar3 === void 0 || (_theme$UTTopbar3 = _theme$UTTopbar3.container) === null || _theme$UTTopbar3 === void 0 ? void 0 : _theme$UTTopbar3.height,
+      padding: (theme === null || theme === void 0 || (_theme$UTTopbar4 = theme.UTTopbar) === null || _theme$UTTopbar4 === void 0 || (_theme$UTTopbar4 = _theme$UTTopbar4.container) === null || _theme$UTTopbar4 === void 0 ? void 0 : _theme$UTTopbar4.padding) || '10px 20px',
+      position: theme === null || theme === void 0 || (_theme$UTTopbar5 = theme.UTTopbar) === null || _theme$UTTopbar5 === void 0 || (_theme$UTTopbar5 = _theme$UTTopbar5.container) === null || _theme$UTTopbar5 === void 0 ? void 0 : _theme$UTTopbar5.position,
+      top: theme === null || theme === void 0 || (_theme$UTTopbar6 = theme.UTTopbar) === null || _theme$UTTopbar6 === void 0 || (_theme$UTTopbar6 = _theme$UTTopbar6.container) === null || _theme$UTTopbar6 === void 0 ? void 0 : _theme$UTTopbar6.top,
+      zIndex: theme === null || theme === void 0 || (_theme$UTTopbar7 = theme.UTTopbar) === null || _theme$UTTopbar7 === void 0 || (_theme$UTTopbar7 = _theme$UTTopbar7.container) === null || _theme$UTTopbar7 === void 0 ? void 0 : _theme$UTTopbar7.zIndex
+    },
+    breadCrumb: {
+      '&:hover': {
+        backgroundColor: theme === null || theme === void 0 || (_theme$UTTopbar8 = theme.UTTopbar) === null || _theme$UTTopbar8 === void 0 || (_theme$UTTopbar8 = _theme$UTTopbar8.breadCrumb) === null || _theme$UTTopbar8 === void 0 || (_theme$UTTopbar8 = _theme$UTTopbar8.hover) === null || _theme$UTTopbar8 === void 0 ? void 0 : _theme$UTTopbar8.backgroundColor,
+        textDecoration: theme === null || theme === void 0 || (_theme$UTTopbar9 = theme.UTTopbar) === null || _theme$UTTopbar9 === void 0 || (_theme$UTTopbar9 = _theme$UTTopbar9.breadCrumb) === null || _theme$UTTopbar9 === void 0 || (_theme$UTTopbar9 = _theme$UTTopbar9.hover) === null || _theme$UTTopbar9 === void 0 ? void 0 : _theme$UTTopbar9.textDecoration,
+        cursor: theme === null || theme === void 0 || (_theme$UTTopbar0 = theme.UTTopbar) === null || _theme$UTTopbar0 === void 0 || (_theme$UTTopbar0 = _theme$UTTopbar0.breadCrumb) === null || _theme$UTTopbar0 === void 0 || (_theme$UTTopbar0 = _theme$UTTopbar0.hover) === null || _theme$UTTopbar0 === void 0 ? void 0 : _theme$UTTopbar0.cursor
+      }
+    },
+    userMenu: {
+      borderLeft: theme === null || theme === void 0 || (_theme$UTTopbar1 = theme.UTTopbar) === null || _theme$UTTopbar1 === void 0 || (_theme$UTTopbar1 = _theme$UTTopbar1.userMenu) === null || _theme$UTTopbar1 === void 0 ? void 0 : _theme$UTTopbar1.borderLeft,
+      margin: (theme === null || theme === void 0 || (_theme$UTTopbar10 = theme.UTTopbar) === null || _theme$UTTopbar10 === void 0 || (_theme$UTTopbar10 = _theme$UTTopbar10.userMenu) === null || _theme$UTTopbar10 === void 0 ? void 0 : _theme$UTTopbar10.margin) || '0 0 0 20px',
+      minWidth: theme === null || theme === void 0 || (_theme$UTTopbar11 = theme.UTTopbar) === null || _theme$UTTopbar11 === void 0 || (_theme$UTTopbar11 = _theme$UTTopbar11.userMenu) === null || _theme$UTTopbar11 === void 0 ? void 0 : _theme$UTTopbar11.minWidth,
+      padding: (theme === null || theme === void 0 || (_theme$UTTopbar12 = theme.UTTopbar) === null || _theme$UTTopbar12 === void 0 || (_theme$UTTopbar12 = _theme$UTTopbar12.userMenu) === null || _theme$UTTopbar12 === void 0 ? void 0 : _theme$UTTopbar12.padding) || '0 0 0 20px',
+      justifyContent: theme === null || theme === void 0 || (_theme$UTTopbar13 = theme.UTTopbar) === null || _theme$UTTopbar13 === void 0 || (_theme$UTTopbar13 = _theme$UTTopbar13.userMenu) === null || _theme$UTTopbar13 === void 0 ? void 0 : _theme$UTTopbar13.justifyContent
+    },
+    userMenuAvatar: {
+      background: theme === null || theme === void 0 || (_theme$UTTopbar14 = theme.UTTopbar) === null || _theme$UTTopbar14 === void 0 || (_theme$UTTopbar14 = _theme$UTTopbar14.userMenuAvatar) === null || _theme$UTTopbar14 === void 0 ? void 0 : _theme$UTTopbar14.background,
+      border: theme === null || theme === void 0 || (_theme$UTTopbar15 = theme.UTTopbar) === null || _theme$UTTopbar15 === void 0 || (_theme$UTTopbar15 = _theme$UTTopbar15.userMenuAvatar) === null || _theme$UTTopbar15 === void 0 ? void 0 : _theme$UTTopbar15.border,
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTTopbar16 = theme.UTTopbar) === null || _theme$UTTopbar16 === void 0 || (_theme$UTTopbar16 = _theme$UTTopbar16.userMenuAvatar) === null || _theme$UTTopbar16 === void 0 ? void 0 : _theme$UTTopbar16.borderRadius) || '50%',
+      color: theme === null || theme === void 0 || (_theme$UTTopbar17 = theme.UTTopbar) === null || _theme$UTTopbar17 === void 0 || (_theme$UTTopbar17 = _theme$UTTopbar17.userMenuAvatar) === null || _theme$UTTopbar17 === void 0 ? void 0 : _theme$UTTopbar17.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTTopbar18 = theme.UTTopbar) === null || _theme$UTTopbar18 === void 0 || (_theme$UTTopbar18 = _theme$UTTopbar18.userMenuAvatar) === null || _theme$UTTopbar18 === void 0 ? void 0 : _theme$UTTopbar18.fontSize) || 24,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTTopbar19 = theme.UTTopbar) === null || _theme$UTTopbar19 === void 0 || (_theme$UTTopbar19 = _theme$UTTopbar19.userMenuAvatar) === null || _theme$UTTopbar19 === void 0 ? void 0 : _theme$UTTopbar19.fontWeight) || 500,
+      height: (theme === null || theme === void 0 || (_theme$UTTopbar20 = theme.UTTopbar) === null || _theme$UTTopbar20 === void 0 || (_theme$UTTopbar20 = _theme$UTTopbar20.userMenuAvatar) === null || _theme$UTTopbar20 === void 0 ? void 0 : _theme$UTTopbar20.height) || 40,
+      margin: (theme === null || theme === void 0 || (_theme$UTTopbar21 = theme.UTTopbar) === null || _theme$UTTopbar21 === void 0 || (_theme$UTTopbar21 = _theme$UTTopbar21.userMenuAvatar) === null || _theme$UTTopbar21 === void 0 ? void 0 : _theme$UTTopbar21.margin) || '0 10px 0 0',
+      width: (theme === null || theme === void 0 || (_theme$UTTopbar22 = theme.UTTopbar) === null || _theme$UTTopbar22 === void 0 || (_theme$UTTopbar22 = _theme$UTTopbar22.userMenuAvatar) === null || _theme$UTTopbar22 === void 0 ? void 0 : _theme$UTTopbar22.width) || 40
+    },
+    userMenuArrow: {
+      alignSelf: theme === null || theme === void 0 || (_theme$UTTopbar23 = theme.UTTopbar) === null || _theme$UTTopbar23 === void 0 || (_theme$UTTopbar23 = _theme$UTTopbar23.userMenuArrow) === null || _theme$UTTopbar23 === void 0 ? void 0 : _theme$UTTopbar23.alignSelf,
+      color: theme === null || theme === void 0 || (_theme$UTTopbar24 = theme.UTTopbar) === null || _theme$UTTopbar24 === void 0 || (_theme$UTTopbar24 = _theme$UTTopbar24.userMenuArrow) === null || _theme$UTTopbar24 === void 0 ? void 0 : _theme$UTTopbar24.color,
+      fontSize: theme === null || theme === void 0 || (_theme$UTTopbar25 = theme.UTTopbar) === null || _theme$UTTopbar25 === void 0 || (_theme$UTTopbar25 = _theme$UTTopbar25.userMenuArrow) === null || _theme$UTTopbar25 === void 0 ? void 0 : _theme$UTTopbar25.fontSize,
+      height: (theme === null || theme === void 0 || (_theme$UTTopbar26 = theme.UTTopbar) === null || _theme$UTTopbar26 === void 0 || (_theme$UTTopbar26 = _theme$UTTopbar26.userMenuArrow) === null || _theme$UTTopbar26 === void 0 ? void 0 : _theme$UTTopbar26.height) || 20,
+      margin: (theme === null || theme === void 0 || (_theme$UTTopbar27 = theme.UTTopbar) === null || _theme$UTTopbar27 === void 0 || (_theme$UTTopbar27 = _theme$UTTopbar27.userMenuArrow) === null || _theme$UTTopbar27 === void 0 ? void 0 : _theme$UTTopbar27.margin) || '0 0 0 6px',
+      width: (theme === null || theme === void 0 || (_theme$UTTopbar28 = theme.UTTopbar) === null || _theme$UTTopbar28 === void 0 || (_theme$UTTopbar28 = _theme$UTTopbar28.userMenuArrow) === null || _theme$UTTopbar28 === void 0 ? void 0 : _theme$UTTopbar28.width) || 'auto'
+    },
+    userMenuTitle: {
+      color: theme === null || theme === void 0 || (_theme$UTTopbar29 = theme.UTTopbar) === null || _theme$UTTopbar29 === void 0 || (_theme$UTTopbar29 = _theme$UTTopbar29.userMenuTitle) === null || _theme$UTTopbar29 === void 0 ? void 0 : _theme$UTTopbar29.color,
+      fontSize: theme === null || theme === void 0 || (_theme$UTTopbar30 = theme.UTTopbar) === null || _theme$UTTopbar30 === void 0 || (_theme$UTTopbar30 = _theme$UTTopbar30.userMenuTitle) === null || _theme$UTTopbar30 === void 0 ? void 0 : _theme$UTTopbar30.fontSize,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTTopbar31 = theme.UTTopbar) === null || _theme$UTTopbar31 === void 0 || (_theme$UTTopbar31 = _theme$UTTopbar31.userMenuTitle) === null || _theme$UTTopbar31 === void 0 ? void 0 : _theme$UTTopbar31.fontWeight) || 500,
+      margin: theme === null || theme === void 0 || (_theme$UTTopbar32 = theme.UTTopbar) === null || _theme$UTTopbar32 === void 0 || (_theme$UTTopbar32 = _theme$UTTopbar32.userMenuTitle) === null || _theme$UTTopbar32 === void 0 ? void 0 : _theme$UTTopbar32.margin
+    },
+    notifications: {
+      padding: (theme === null || theme === void 0 || (_theme$UTTopbar33 = theme.UTTopbar) === null || _theme$UTTopbar33 === void 0 || (_theme$UTTopbar33 = _theme$UTTopbar33.notifications) === null || _theme$UTTopbar33 === void 0 ? void 0 : _theme$UTTopbar33.padding) || '0 20px'
+    },
+    notificationsIcon: {
+      height: (theme === null || theme === void 0 || (_theme$UTTopbar34 = theme.UTTopbar) === null || _theme$UTTopbar34 === void 0 || (_theme$UTTopbar34 = _theme$UTTopbar34.notificationsIcon) === null || _theme$UTTopbar34 === void 0 ? void 0 : _theme$UTTopbar34.height) || 32,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTTopbar35 = theme.UTTopbar) === null || _theme$UTTopbar35 === void 0 || (_theme$UTTopbar35 = _theme$UTTopbar35.notificationsIcon) === null || _theme$UTTopbar35 === void 0 ? void 0 : _theme$UTTopbar35.fontSize) || 30,
+      padding: theme === null || theme === void 0 || (_theme$UTTopbar36 = theme.UTTopbar) === null || _theme$UTTopbar36 === void 0 || (_theme$UTTopbar36 = _theme$UTTopbar36.notificationsIcon) === null || _theme$UTTopbar36 === void 0 ? void 0 : _theme$UTTopbar36.padding
+    },
+    menuIcon: {
+      color: theme === null || theme === void 0 || (_theme$UTTopbar37 = theme.UTTopbar) === null || _theme$UTTopbar37 === void 0 || (_theme$UTTopbar37 = _theme$UTTopbar37.menuIcon) === null || _theme$UTTopbar37 === void 0 ? void 0 : _theme$UTTopbar37.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTTopbar38 = theme.UTTopbar) === null || _theme$UTTopbar38 === void 0 || (_theme$UTTopbar38 = _theme$UTTopbar38.menuIcon) === null || _theme$UTTopbar38 === void 0 ? void 0 : _theme$UTTopbar38.fontSize) || 25
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTopbar/types.js

@@ -1 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.menuPropsType=exports.iconType=exports.classType=exports.avatarType=void 0;var _propTypes=require("prop-types");const classType=exports.classType=(0,_propTypes.shape)({container:_propTypes.string,notifications:_propTypes.string,title:_propTypes.string,userMenu:_propTypes.string,userMenuAvatar:_propTypes.string,userMenuArrow:_propTypes.string}),avatarType=exports.avatarType=(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.elementType,_propTypes.func]),iconType=exports.iconType=(0,_propTypes.oneOfType)([_propTypes.elementType,_propTypes.func]),menuPropsType=exports.menuPropsType=(0,_propTypes.shape)({ItemComponent:_propTypes.elementType.isRequired,items:_propTypes.array.isRequired,itemComponentProps:_propTypes.object,LastItem:_propTypes.elementType});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuPropsType = exports.iconType = exports.classType = exports.avatarType = void 0;
+var _propTypes = require("prop-types");
+const classType = exports.classType = (0, _propTypes.shape)({
+  container: _propTypes.string,
+  notifications: _propTypes.string,
+  title: _propTypes.string,
+  userMenu: _propTypes.string,
+  userMenuAvatar: _propTypes.string,
+  userMenuArrow: _propTypes.string
+});
+const avatarType = exports.avatarType = (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.elementType, _propTypes.func]);
+const iconType = exports.iconType = (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.func]);
+const menuPropsType = exports.menuPropsType = (0, _propTypes.shape)({
+  ItemComponent: _propTypes.elementType.isRequired,
+  items: _propTypes.array.isRequired,
+  itemComponentProps: _propTypes.object,
+  LastItem: _propTypes.elementType
+});

package/dist/components/UTTouchableWithoutFeedback/index.js

@@ -1 +1,64 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_UTRipple=_interopRequireDefault(require("../UTRipple")),_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)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}const UTTouchableWithoutFeedback=_ref=>{let{children:children,className:className,containerSetter:containerSetter,dataTestId:dataTestId,disabled:disabled=!1,keyName:keyName,onClick:onClick,onMouseDown:onMouseDown,withRipple:withRipple=!1,...props}=_ref;const[buttonRef,setButtonRef]=(0,_react.useState)(null);return _react.default.createElement("div",_extends({},props,{"aria-disabled":disabled,className:"".concat(_stylesModule.default.container," ").concat(className," ").concat(disabled&&_stylesModule.default.disabled),"data-testid":dataTestId,key:keyName,onMouseDown:onMouseDown?event=>{event.preventDefault(),disabled||onMouseDown(event)}:void 0,onClick:onClick?event=>{disabled||onClick(event)}:void 0,ref:ref=>{setButtonRef(ref),containerSetter&&containerSetter(ref)},role:"button",tabIndex:disabled?-1:0}),children,_react.default.createElement(_UTRipple.default,{elem:buttonRef,withRipple:withRipple&&!disabled}))};UTTouchableWithoutFeedback.propTypes={className:_propTypes.string,containerSetter:_propTypes.func,dataTestId:_propTypes.string,disabled:_propTypes.bool,keyName:_propTypes.string,onClick:_propTypes.func,onMouseDown:_propTypes.func,withRipple:_propTypes.bool};var _default=exports.default=UTTouchableWithoutFeedback;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTRipple = _interopRequireDefault(require("../UTRipple"));
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const UTTouchableWithoutFeedback = _ref => {
+  let {
+    children,
+    className,
+    containerSetter,
+    dataTestId,
+    disabled = false,
+    keyName,
+    onClick,
+    onMouseDown,
+    withRipple = false,
+    ...props
+  } = _ref;
+  const [buttonRef, setButtonRef] = (0, _react.useState)(null);
+  const setRef = ref => {
+    setButtonRef(ref);
+    if (containerSetter) containerSetter(ref);
+  };
+  const handleClick = event => {
+    if (!disabled) onClick(event);
+  };
+  const handleMouseDown = event => {
+    event.preventDefault();
+    if (!disabled) onMouseDown(event);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
+    "aria-disabled": disabled,
+    className: "".concat(_stylesModule.default.container, " ").concat(className, " ").concat(disabled && _stylesModule.default.disabled),
+    "data-testid": dataTestId,
+    key: keyName,
+    onMouseDown: onMouseDown ? handleMouseDown : undefined,
+    onClick: onClick ? handleClick : undefined,
+    ref: setRef,
+    role: "button",
+    tabIndex: disabled ? -1 : 0
+  }), children, /*#__PURE__*/_react.default.createElement(_UTRipple.default, {
+    elem: buttonRef,
+    withRipple: withRipple && !disabled
+  }));
+};
+UTTouchableWithoutFeedback.propTypes = {
+  className: _propTypes.string,
+  containerSetter: _propTypes.func,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  keyName: _propTypes.string,
+  onClick: _propTypes.func,
+  onMouseDown: _propTypes.func,
+  withRipple: _propTypes.bool
+};
+var _default = exports.default = UTTouchableWithoutFeedback;

package/dist/components/UTTracker/README.md

@@ -0,0 +1,26 @@
+# UTTracker
+
+### Description
+
+This component displays a vertical stepper intended to track progress
+
+## Props
+
+| Name        | Type              | Default  | Description                                                                                                                                                           |
+| ----------- | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title       | string            |          | Displays the title above the tracker.                                                                                                                                 |
+| mode        | card \| flat      | card     | Defines whether the component should display as a card or as the bare components without any background.                                                              |
+| variant     | standard \| error | standard | Defines the color scheme of the tracker steps and the icon on the active step.                                                                                        |
+| steps       | stepsType         |          | Displays a step with a rounded icon on the left for each object received.                                                                                             |
+| currentStep | number            |          | Defines which step will be active, previous ones will be marked as completed while following ones will not. Use 1 for the first step                                  |
+| detailsTab  | detailsType       |          | Defines whether the detailsTab is enabled or not, if it is, it will show the subSteps of each step. The title property shows a message along the tab (card mode only) |
+| subtitle    | string            |          | Displays under the title                                                                                                                                              |
+| description | string            |          | Displays under the subtitle                                                                                                                                           |
+
+### Custom Types
+
+| Type         | Shape                                                                          |
+| ------------ | ------------------------------------------------------------------------------ |
+| stepsType    | `{ id: number, title: string, subtitle: string, subSteps: [...subStepsType] }` |
+| subStepsType | `{ id: number, title: string, subtitle: string }`                              |
+| detailsType  | `{ enabled: bool, title: string }`                                             |

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

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

package/dist/components/UTTracker/components/Step/index.js

@@ -1 +1,66 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_propTypes2=require("../../propTypes"),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_constants=require("../../constants"),_classesUtils=require("../../../../utils/classesUtils"),_utils=require("../../utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const ERROR_ICON_SIZE=16,Step=_ref=>{let{first:first,isActive:isActive,isCompleted:isCompleted,step:step,classes:classes={},variant:variant}=_ref;const stepCompleted=isCompleted(step.id),stepActive=isActive(step.id),themedStyles=(0,_classesUtils.mergeClasses)(classes,_stylesModule.default);return _react.default.createElement("div",{className:"\n     ".concat(themedStyles.outerContainer,"\n      ").concat(stepActive&&themedStyles.activeOuterContainer,"\n      ").concat(first&&_stylesModule.default.stepMargin,"\n    ")},_react.default.createElement("div",{className:themedStyles.containerStep},_react.default.createElement("div",{className:"\n        ".concat(themedStyles.container,"\n        ").concat(classes.containerStep,"\n        ").concat(stepCompleted&&classes.completedLight,"\n        ").concat(stepActive&&classes.activeContainer,"\n        ").concat(stepActive&&variant===_constants.ERROR&&classes.fullContainer,"\n      ")},_react.default.createElement("div",{className:"\n          ".concat(themedStyles.innerContainer,"\n          ").concat(classes.innerContainer,"\n          ").concat(stepCompleted&&classes.completedInnerContainer,"\n          ").concat(stepActive&&classes.activeInnerContainer,"\n          ").concat(stepCompleted&&themedStyles.completedOuterContainer,"\n        ")},stepActive&&variant===_constants.ERROR&&_react.default.createElement(_UTIcon.default,{colorTheme:"light",name:"IconX",size:16,className:themedStyles.icon})))),_react.default.createElement("div",{className:"".concat(themedStyles.textContainer," ").concat(stepCompleted&&themedStyles.completedOuterContainer)},step.title&&_react.default.createElement(_UTLabel.default,{className:"".concat(stepCompleted?themedStyles.completedTitleColor:stepActive?themedStyles.activeTitleColor:themedStyles.titleColor),colorTheme:stepActive?(0,_utils.getLabelTheme)(variant):"dark",variant:"small",weight:"medium"},step.title),step.subtitle&&_react.default.createElement(_UTLabel.default,{className:"".concat(themedStyles.subtitleColor," ").concat(themedStyles.subtitle)},step.subtitle),step.description&&_react.default.createElement(_UTLabel.default,{variant:"small",colorTheme:"gray",className:themedStyles.description},step.description)))};Step.propTypes={classes:_propTypes.object,first:_propTypes.bool,isActive:_propTypes.func,isCompleted:_propTypes.func,step:_propTypes2.StepPropTypes,variant:_propTypes2.VariantPropTypes};var _default=exports.default=Step;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _propTypes2 = require("../../propTypes");
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _constants = require("../../constants");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _utils = require("../../utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ERROR_ICON_SIZE = 16;
+const Step = _ref => {
+  let {
+    first,
+    isActive,
+    isCompleted,
+    step,
+    classes = {},
+    variant
+  } = _ref;
+  const stepCompleted = isCompleted(step.id);
+  const stepActive = isActive(step.id);
+  const themedStyles = (0, _classesUtils.mergeClasses)(classes, _stylesModule.default);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n     ".concat(themedStyles.outerContainer, "\n      ").concat(stepActive && themedStyles.activeOuterContainer, "\n      ").concat(first && _stylesModule.default.stepMargin, "\n    ")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: themedStyles.containerStep
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n        ".concat(themedStyles.container, "\n        ").concat(classes.containerStep, "\n        ").concat(stepCompleted && classes.completedLight, "\n        ").concat(stepActive && classes.activeContainer, "\n        ").concat(stepActive && variant === _constants.ERROR && classes.fullContainer, "\n      ")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n          ".concat(themedStyles.innerContainer, "\n          ").concat(classes.innerContainer, "\n          ").concat(stepCompleted && classes.completedInnerContainer, "\n          ").concat(stepActive && classes.activeInnerContainer, "\n          ").concat(stepCompleted && themedStyles.completedOuterContainer, "\n        ")
+  }, stepActive && variant === _constants.ERROR && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: "light",
+    name: "IconX",
+    size: ERROR_ICON_SIZE,
+    className: themedStyles.icon
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(themedStyles.textContainer, " ").concat(stepCompleted && themedStyles.completedOuterContainer)
+  }, step.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(stepCompleted ? themedStyles.completedTitleColor : stepActive ? themedStyles.activeTitleColor : themedStyles.titleColor),
+    colorTheme: stepActive ? (0, _utils.getLabelTheme)(variant) : 'dark',
+    variant: "small",
+    weight: "medium"
+  }, step.title), step.subtitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(themedStyles.subtitleColor, " ").concat(themedStyles.subtitle)
+  }, step.subtitle), step.description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    colorTheme: "gray",
+    className: themedStyles.description
+  }, step.description)));
+};
+Step.propTypes = {
+  classes: _propTypes.object,
+  first: _propTypes.bool,
+  isActive: _propTypes.func,
+  isCompleted: _propTypes.func,
+  step: _propTypes2.StepPropTypes,
+  variant: _propTypes2.VariantPropTypes
+};
+var _default = exports.default = Step;