@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,190 @@
-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)}import React,{useState,useEffect,Fragment,useRef,useMemo}from"react";import{string,elementType,func,array,object,objectOf,number,bool,oneOfType}from"prop-types";import ClickAwayListener from"@material-ui/core/ClickAwayListener";import Grow from"@material-ui/core/Grow";import Fade from"@material-ui/core/Fade";import Paper from"@material-ui/core/Paper";import Popper from"@material-ui/core/Popper";import MenuList from"@material-ui/core/MenuList";import ScrollBar from"react-perfect-scrollbar";import"react-perfect-scrollbar/dist/css/styles.css";import MenuItem from"@material-ui/core/MenuItem";import{isEmpty}from"@widergy/web-utils/lib/array";import{refType}from"../../types/commonTypes";import{mergeClasses}from"../../utils/classesUtils";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{retrieveStyle,retrieveMuiTheme}from"./theme";import{getTransitionOrigin,lockScreen}from"./utils";import styles from"./styles.module.scss";const UTMenu=_ref=>{let{anchor:anchor,animation:animation,animatorProps:animatorProps,arrowProps:arrowProps,classes:themeClasses,classNames:classNames,clickAwayListenerProps:clickAwayListenerProps,contextData:contextData={},elevation:elevation,iconBefore:iconBefore,ItemComponent:ItemComponent,itemIconProps:itemIconProps,itemProps:itemProps,items:items,LastItem:LastItem,lockScreenEnabled:lockScreenEnabled,menuItemProps:menuItemProps,menuListProps:menuListProps,menuPlacement:menuPlacement,modifiers:modifiers,onClickItem:onClickItem,onClose:onClose,paperProps:paperProps,popperProps:popperProps,scrollBarProps:scrollBarProps,withArrow:withArrow,withDivider:withDivider,withMenuItem:withMenuItem}=_ref;const blockerRef=useRef(null),classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),[arrowRef,setArrowRef]=useState(null),[open,handleOpenState]=useState(!1);useEffect(()=>{const shouldOpen=!!anchor&&!isEmpty(items);return handleOpenState(shouldOpen),lockScreenEnabled&&anchor&&lockScreen(blockerRef,!0),()=>(document.body.style.overflow="unset",lockScreenEnabled&&lockScreen(blockerRef,!1))},[anchor,items]);const popperModifiers=Object.assign({arrow:{enabled:!0,element:arrowRef}},modifiers),Animator="grow"===animation?Grow:Fade,handleScrollbarSync=ps=>setTimeout(()=>ps.update(),350),lastItem=items.length-1;return React.createElement(Fragment,null,anchor&&React.createElement(Popper,_extends({anchorEl:anchor,open:open,transition:!0,placement:menuPlacement,modifiers:popperModifiers,className:classes.popper},popperProps),_ref2=>{let{TransitionProps:TransitionProps,placement:placement}=_ref2;return React.createElement(Animator,_extends({in:open},TransitionProps,{style:{transformOrigin:getTransitionOrigin(placement)}},animatorProps),React.createElement("div",null,withArrow&&React.createElement("div",_extends({className:styles.arrow,ref:setArrowRef},arrowProps)),React.createElement(Paper,_extends({elevation:elevation,className:classes.paper},paperProps),React.createElement(ClickAwayListener,_extends({onClickAway:onClose},clickAwayListenerProps),React.createElement("div",null,React.createElement(MenuList,_extends({autoFocusItem:open,className:classes.menuList},menuListProps),React.createElement(ScrollBar,_extends({onSync:handleScrollbarSync,className:classes.scrollBar},scrollBarProps),null==items?void 0:items.map((item,index)=>{const handleClick=event=>{item.onClick?item.onClick(event,contextData,onClose):onClickItem&&onClickItem(event,contextData),contextData.clickCallback&&contextData.clickCallback()};return ItemComponent?withMenuItem?React.createElement(MenuItem,_extends({className:"".concat(classes.menuItemContainer," ").concat(item.menuItemClassName),"data-testid":item.dataTestId,disabled:item.disabled,divider:withDivider&&index<lastItem,key:item.key,onClick:handleClick},menuItemProps),React.createElement(ItemComponent,_extends({className:classes.menuItem},itemProps,item))):React.createElement(ItemComponent,_extends({className:classes.menuItem},itemProps,item)):React.createElement(MenuItem,_extends({className:"".concat(classes.menuItemContainer," ").concat(item.menuItemClassName),"data-testid":item.dataTestId,disabled:item.disabled,divider:withDivider&&index<lastItem,key:item.key,onClick:handleClick},menuItemProps),iconBefore&&item.Icon&&React.createElement(item.Icon,_extends({className:classes.menuItemIcon},itemIconProps,item.iconProps)),React.createElement(UTLabel,_extends({className:classes.menuItem},itemProps,item.labelProps),item.label),!iconBefore&&item.Icon&&React.createElement(item.Icon,_extends({className:classes.menuItemIcon},itemIconProps,item.iconProps)))}))),LastItem&&React.createElement(LastItem,null))))))}),React.createElement("div",{ref:blockerRef,className:styles.scrollBlocker}))};UTMenu.defaultProps={animation:"grow",animatorProps:{},arrowProps:{},clickAwayListenerProps:{},elevation:5,iconBefore:!1,lockScreenEnabled:!1,menuItemProps:{},menuListProps:{},menuPlacement:"bottom",onClickItem:void 0,paperProps:{},popperProps:{},scrollBarProps:{},withArrow:!1},UTMenu.propTypes={anchor:oneOfType([refType,elementType]),animation:string,animatorProps:object,arrowProps:object,classes:objectOf(string),classNames:objectOf(string),clickAwayListenerProps:object,contextData:object,elevation:number,iconBefore:bool,ItemComponent:elementType,itemIconProps:object,itemProps:object,items:array,LastItem:elementType,lockScreenEnabled:bool,MenuItemClassName:string,menuItemProps:object,menuListProps:object,menuPlacement:string,modifiers:objectOf(string),onClickItem:func,onClose:func.isRequired,paperProps:object,popperProps:object,scrollBarProps:object,withArrow:bool,withDivider:bool,withMenuItem:bool};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTMenu);
+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); }
+import React, { useState, useEffect, Fragment, useRef, useMemo } from 'react';
+import { string, elementType, func, array, object, objectOf, number, bool, oneOfType } from 'prop-types';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Fade from '@material-ui/core/Fade';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuList from '@material-ui/core/MenuList';
+import ScrollBar from 'react-perfect-scrollbar';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import MenuItem from '@material-ui/core/MenuItem';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { refType } from '../../types/commonTypes';
+import { mergeClasses } from '../../utils/classesUtils';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+import { getTransitionOrigin, lockScreen } from './utils';
+import styles from './styles.module.scss';
+const UTMenu = _ref => {
+  let {
+    anchor,
+    animation,
+    animatorProps,
+    arrowProps,
+    classes: themeClasses,
+    classNames,
+    clickAwayListenerProps,
+    contextData = {},
+    elevation,
+    iconBefore,
+    ItemComponent,
+    itemIconProps,
+    itemProps,
+    items,
+    LastItem,
+    lockScreenEnabled,
+    menuItemProps,
+    menuListProps,
+    menuPlacement,
+    modifiers,
+    onClickItem,
+    onClose,
+    paperProps,
+    popperProps,
+    scrollBarProps,
+    withArrow,
+    withDivider,
+    withMenuItem
+  } = _ref;
+  const blockerRef = useRef(null);
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const [arrowRef, setArrowRef] = useState(null);
+  const [open, handleOpenState] = useState(false);
+  useEffect(() => {
+    const shouldOpen = !!anchor && !isEmpty(items);
+    handleOpenState(shouldOpen);
+    if (lockScreenEnabled && anchor) lockScreen(blockerRef, true);
+    return () => {
+      document.body.style.overflow = 'unset';
+      return lockScreenEnabled && lockScreen(blockerRef, false);
+    };
+  }, [anchor, items]);
+  const popperModifiers = Object.assign({
+    arrow: {
+      enabled: true,
+      element: arrowRef
+    }
+  }, modifiers);
+  const Animator = animation === 'grow' ? Grow : Fade;
+  const handleScrollbarSync = ps => setTimeout(() => ps.update(), 350);
+  const lastItem = items.length - 1;
+  return /*#__PURE__*/React.createElement(Fragment, null, anchor && /*#__PURE__*/React.createElement(Popper, _extends({
+    anchorEl: anchor,
+    open: open,
+    transition: true,
+    placement: menuPlacement,
+    modifiers: popperModifiers,
+    className: classes.popper
+  }, popperProps), _ref2 => {
+    let {
+      TransitionProps,
+      placement
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Animator, _extends({
+      in: open
+    }, TransitionProps, {
+      style: {
+        transformOrigin: getTransitionOrigin(placement)
+      }
+    }, animatorProps), /*#__PURE__*/React.createElement("div", null, withArrow && /*#__PURE__*/React.createElement("div", _extends({
+      className: styles.arrow,
+      ref: setArrowRef
+    }, arrowProps)), /*#__PURE__*/React.createElement(Paper, _extends({
+      elevation: elevation,
+      className: classes.paper
+    }, paperProps), /*#__PURE__*/React.createElement(ClickAwayListener, _extends({
+      onClickAway: onClose
+    }, clickAwayListenerProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuList, _extends({
+      autoFocusItem: open,
+      className: classes.menuList
+    }, menuListProps), /*#__PURE__*/React.createElement(ScrollBar, _extends({
+      onSync: handleScrollbarSync,
+      className: classes.scrollBar
+    }, scrollBarProps), items === null || items === void 0 ? void 0 : items.map((item, index) => {
+      const handleClick = event => {
+        if (item.onClick) item.onClick(event, contextData, onClose);else if (onClickItem) onClickItem(event, contextData);
+        if (contextData.clickCallback) contextData.clickCallback();
+      };
+      return ItemComponent ? withMenuItem ? /*#__PURE__*/React.createElement(MenuItem, _extends({
+        className: "".concat(classes.menuItemContainer, " ").concat(item.menuItemClassName),
+        "data-testid": item.dataTestId,
+        disabled: item.disabled,
+        divider: withDivider && index < lastItem,
+        key: item.key,
+        onClick: handleClick
+      }, menuItemProps), /*#__PURE__*/React.createElement(ItemComponent, _extends({
+        className: classes.menuItem
+      }, itemProps, item))) : /*#__PURE__*/React.createElement(ItemComponent, _extends({
+        className: classes.menuItem
+      }, itemProps, item)) : /*#__PURE__*/React.createElement(MenuItem, _extends({
+        className: "".concat(classes.menuItemContainer, " ").concat(item.menuItemClassName),
+        "data-testid": item.dataTestId,
+        disabled: item.disabled,
+        divider: withDivider && index < lastItem,
+        key: item.key,
+        onClick: handleClick
+      }, menuItemProps), iconBefore && item.Icon && /*#__PURE__*/React.createElement(item.Icon, _extends({
+        className: classes.menuItemIcon
+      }, itemIconProps, item.iconProps)), /*#__PURE__*/React.createElement(UTLabel, _extends({
+        className: classes.menuItem
+      }, itemProps, item.labelProps), item.label), !iconBefore && item.Icon && /*#__PURE__*/React.createElement(item.Icon, _extends({
+        className: classes.menuItemIcon
+      }, itemIconProps, item.iconProps)));
+    }))), LastItem && /*#__PURE__*/React.createElement(LastItem, null))))));
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: blockerRef,
+    className: styles.scrollBlocker
+  }));
+};
+UTMenu.defaultProps = {
+  animation: 'grow',
+  animatorProps: {},
+  arrowProps: {},
+  clickAwayListenerProps: {},
+  elevation: 5,
+  iconBefore: false,
+  lockScreenEnabled: false,
+  menuItemProps: {},
+  menuListProps: {},
+  menuPlacement: 'bottom',
+  onClickItem: undefined,
+  paperProps: {},
+  popperProps: {},
+  scrollBarProps: {},
+  withArrow: false
+};
+UTMenu.propTypes = {
+  anchor: oneOfType([refType, elementType]),
+  animation: string,
+  animatorProps: object,
+  arrowProps: object,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  clickAwayListenerProps: object,
+  contextData: object,
+  elevation: number,
+  iconBefore: bool,
+  ItemComponent: elementType,
+  itemIconProps: object,
+  itemProps: object,
+  items: array,
+  LastItem: elementType,
+  lockScreenEnabled: bool,
+  MenuItemClassName: string,
+  menuItemProps: object,
+  menuListProps: object,
+  menuPlacement: string,
+  modifiers: objectOf(string),
+  onClickItem: func,
+  onClose: func.isRequired,
+  paperProps: object,
+  popperProps: object,
+  scrollBarProps: object,
+  withArrow: bool,
+  withDivider: bool,
+  withMenuItem: bool
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTMenu);

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

@@ -1 +1,56 @@
-import{createTheme}from"@material-ui/core/styles";export const retrieveStyle=_ref=>{var _theme$UTMenu,_theme$UTMenu2,_theme$UTMenu3,_theme$UTMenu4,_theme$UTMenu5,_theme$UTMenu6,_theme$UTMenu7,_theme$UTMenu8,_theme$UTMenu9,_theme$UTMenu0,_theme$UTMenu1,_theme$UTMenu10,_theme$UTMenu11,_theme$UTMenu12,_theme$UTMenu13,_theme$UTMenu14,_theme$UTMenu15,_theme$UTMenu16,_theme$UTMenu17;let{theme:theme}=_ref;return{paper:{padding:null==theme||null===(_theme$UTMenu=theme.UTMenu)||void 0===_theme$UTMenu||null===(_theme$UTMenu=_theme$UTMenu.paper)||void 0===_theme$UTMenu?void 0:_theme$UTMenu.padding,borderRadius:null==theme||null===(_theme$UTMenu2=theme.UTMenu)||void 0===_theme$UTMenu2||null===(_theme$UTMenu2=_theme$UTMenu2.paper)||void 0===_theme$UTMenu2?void 0:_theme$UTMenu2.borderRadius,boxShadow:null==theme||null===(_theme$UTMenu3=theme.UTMenu)||void 0===_theme$UTMenu3||null===(_theme$UTMenu3=_theme$UTMenu3.paper)||void 0===_theme$UTMenu3?void 0:_theme$UTMenu3.boxShadow},menuList:{borderRadius:null==theme||null===(_theme$UTMenu4=theme.UTMenu)||void 0===_theme$UTMenu4||null===(_theme$UTMenu4=_theme$UTMenu4.menuList)||void 0===_theme$UTMenu4?void 0:_theme$UTMenu4.borderRadius,padding:null==theme||null===(_theme$UTMenu5=theme.UTMenu)||void 0===_theme$UTMenu5||null===(_theme$UTMenu5=_theme$UTMenu5.menuList)||void 0===_theme$UTMenu5?void 0:_theme$UTMenu5.padding,outline:null==theme||null===(_theme$UTMenu6=theme.UTMenu)||void 0===_theme$UTMenu6||null===(_theme$UTMenu6=_theme$UTMenu6.menuList)||void 0===_theme$UTMenu6?void 0:_theme$UTMenu6.outline,width:null==theme||null===(_theme$UTMenu7=theme.UTMenu)||void 0===_theme$UTMenu7||null===(_theme$UTMenu7=_theme$UTMenu7.menuList)||void 0===_theme$UTMenu7?void 0:_theme$UTMenu7.width},menuItem:{fontSize:null==theme||null===(_theme$UTMenu8=theme.UTMenu)||void 0===_theme$UTMenu8||null===(_theme$UTMenu8=_theme$UTMenu8.menuItem)||void 0===_theme$UTMenu8?void 0:_theme$UTMenu8.fontSize,color:null==theme||null===(_theme$UTMenu9=theme.UTMenu)||void 0===_theme$UTMenu9||null===(_theme$UTMenu9=_theme$UTMenu9.menuItem)||void 0===_theme$UTMenu9?void 0:_theme$UTMenu9.color,backgroundColor:null==theme||null===(_theme$UTMenu0=theme.UTMenu)||void 0===_theme$UTMenu0||null===(_theme$UTMenu0=_theme$UTMenu0.menuItem)||void 0===_theme$UTMenu0?void 0:_theme$UTMenu0.backgroundColor},popper:{zIndex:9999,margin:null==theme||null===(_theme$UTMenu1=theme.UTMenu)||void 0===_theme$UTMenu1||null===(_theme$UTMenu1=_theme$UTMenu1.popper)||void 0===_theme$UTMenu1?void 0:_theme$UTMenu1.margin},menuItemIcon:{height:null==theme||null===(_theme$UTMenu10=theme.UTMenu)||void 0===_theme$UTMenu10||null===(_theme$UTMenu10=_theme$UTMenu10.menuItemIcon)||void 0===_theme$UTMenu10?void 0:_theme$UTMenu10.height,color:null==theme||null===(_theme$UTMenu11=theme.UTMenu)||void 0===_theme$UTMenu11||null===(_theme$UTMenu11=_theme$UTMenu11.menuItemIcon)||void 0===_theme$UTMenu11?void 0:_theme$UTMenu11.color,fontSize:null==theme||null===(_theme$UTMenu12=theme.UTMenu)||void 0===_theme$UTMenu12||null===(_theme$UTMenu12=_theme$UTMenu12.menuItemIcon)||void 0===_theme$UTMenu12?void 0:_theme$UTMenu12.fontSize,margin:null==theme||null===(_theme$UTMenu13=theme.UTMenu)||void 0===_theme$UTMenu13||null===(_theme$UTMenu13=_theme$UTMenu13.menuItemIcon)||void 0===_theme$UTMenu13?void 0:_theme$UTMenu13.margin,width:null==theme||null===(_theme$UTMenu14=theme.UTMenu)||void 0===_theme$UTMenu14||null===(_theme$UTMenu14=_theme$UTMenu14.menuItemIcon)||void 0===_theme$UTMenu14?void 0:_theme$UTMenu14.width},menuItemContainer:{padding:null==theme||null===(_theme$UTMenu15=theme.UTMenu)||void 0===_theme$UTMenu15||null===(_theme$UTMenu15=_theme$UTMenu15.menuItemContainer)||void 0===_theme$UTMenu15?void 0:_theme$UTMenu15.padding,position:null==theme||null===(_theme$UTMenu16=theme.UTMenu)||void 0===_theme$UTMenu16||null===(_theme$UTMenu16=_theme$UTMenu16.menuItemContainer)||void 0===_theme$UTMenu16?void 0:_theme$UTMenu16.position},scrollBar:{maxHeight:null==theme||null===(_theme$UTMenu17=theme.UTMenu)||void 0===_theme$UTMenu17||null===(_theme$UTMenu17=_theme$UTMenu17.scrollBar)||void 0===_theme$UTMenu17?void 0:_theme$UTMenu17.maxHeight}}};export const retrieveMuiTheme=theme=>{var _theme$UTMenu18,_theme$UTMenu19;return createTheme({overrides:{MuiListItem:{divider:{borderBottomColor:null==theme||null===(_theme$UTMenu18=theme.UTMenu)||void 0===_theme$UTMenu18||null===(_theme$UTMenu18=_theme$UTMenu18.divider)||void 0===_theme$UTMenu18?void 0:_theme$UTMenu18.color,borderBottomWidth:null==theme||null===(_theme$UTMenu19=theme.UTMenu)||void 0===_theme$UTMenu19||null===(_theme$UTMenu19=_theme$UTMenu19.divider)||void 0===_theme$UTMenu19?void 0:_theme$UTMenu19.width}}}})};
+import { createTheme } from '@material-ui/core/styles';
+export const retrieveStyle = _ref => {
+  var _theme$UTMenu, _theme$UTMenu2, _theme$UTMenu3, _theme$UTMenu4, _theme$UTMenu5, _theme$UTMenu6, _theme$UTMenu7, _theme$UTMenu8, _theme$UTMenu9, _theme$UTMenu0, _theme$UTMenu1, _theme$UTMenu10, _theme$UTMenu11, _theme$UTMenu12, _theme$UTMenu13, _theme$UTMenu14, _theme$UTMenu15, _theme$UTMenu16, _theme$UTMenu17;
+  let {
+    theme
+  } = _ref;
+  return {
+    paper: {
+      padding: theme === null || theme === void 0 || (_theme$UTMenu = theme.UTMenu) === null || _theme$UTMenu === void 0 || (_theme$UTMenu = _theme$UTMenu.paper) === null || _theme$UTMenu === void 0 ? void 0 : _theme$UTMenu.padding,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTMenu2 = theme.UTMenu) === null || _theme$UTMenu2 === void 0 || (_theme$UTMenu2 = _theme$UTMenu2.paper) === null || _theme$UTMenu2 === void 0 ? void 0 : _theme$UTMenu2.borderRadius,
+      boxShadow: theme === null || theme === void 0 || (_theme$UTMenu3 = theme.UTMenu) === null || _theme$UTMenu3 === void 0 || (_theme$UTMenu3 = _theme$UTMenu3.paper) === null || _theme$UTMenu3 === void 0 ? void 0 : _theme$UTMenu3.boxShadow
+    },
+    menuList: {
+      borderRadius: theme === null || theme === void 0 || (_theme$UTMenu4 = theme.UTMenu) === null || _theme$UTMenu4 === void 0 || (_theme$UTMenu4 = _theme$UTMenu4.menuList) === null || _theme$UTMenu4 === void 0 ? void 0 : _theme$UTMenu4.borderRadius,
+      padding: theme === null || theme === void 0 || (_theme$UTMenu5 = theme.UTMenu) === null || _theme$UTMenu5 === void 0 || (_theme$UTMenu5 = _theme$UTMenu5.menuList) === null || _theme$UTMenu5 === void 0 ? void 0 : _theme$UTMenu5.padding,
+      outline: theme === null || theme === void 0 || (_theme$UTMenu6 = theme.UTMenu) === null || _theme$UTMenu6 === void 0 || (_theme$UTMenu6 = _theme$UTMenu6.menuList) === null || _theme$UTMenu6 === void 0 ? void 0 : _theme$UTMenu6.outline,
+      width: theme === null || theme === void 0 || (_theme$UTMenu7 = theme.UTMenu) === null || _theme$UTMenu7 === void 0 || (_theme$UTMenu7 = _theme$UTMenu7.menuList) === null || _theme$UTMenu7 === void 0 ? void 0 : _theme$UTMenu7.width
+    },
+    menuItem: {
+      fontSize: theme === null || theme === void 0 || (_theme$UTMenu8 = theme.UTMenu) === null || _theme$UTMenu8 === void 0 || (_theme$UTMenu8 = _theme$UTMenu8.menuItem) === null || _theme$UTMenu8 === void 0 ? void 0 : _theme$UTMenu8.fontSize,
+      color: theme === null || theme === void 0 || (_theme$UTMenu9 = theme.UTMenu) === null || _theme$UTMenu9 === void 0 || (_theme$UTMenu9 = _theme$UTMenu9.menuItem) === null || _theme$UTMenu9 === void 0 ? void 0 : _theme$UTMenu9.color,
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTMenu0 = theme.UTMenu) === null || _theme$UTMenu0 === void 0 || (_theme$UTMenu0 = _theme$UTMenu0.menuItem) === null || _theme$UTMenu0 === void 0 ? void 0 : _theme$UTMenu0.backgroundColor
+    },
+    popper: {
+      zIndex: 9999,
+      margin: theme === null || theme === void 0 || (_theme$UTMenu1 = theme.UTMenu) === null || _theme$UTMenu1 === void 0 || (_theme$UTMenu1 = _theme$UTMenu1.popper) === null || _theme$UTMenu1 === void 0 ? void 0 : _theme$UTMenu1.margin
+    },
+    menuItemIcon: {
+      height: theme === null || theme === void 0 || (_theme$UTMenu10 = theme.UTMenu) === null || _theme$UTMenu10 === void 0 || (_theme$UTMenu10 = _theme$UTMenu10.menuItemIcon) === null || _theme$UTMenu10 === void 0 ? void 0 : _theme$UTMenu10.height,
+      color: theme === null || theme === void 0 || (_theme$UTMenu11 = theme.UTMenu) === null || _theme$UTMenu11 === void 0 || (_theme$UTMenu11 = _theme$UTMenu11.menuItemIcon) === null || _theme$UTMenu11 === void 0 ? void 0 : _theme$UTMenu11.color,
+      fontSize: theme === null || theme === void 0 || (_theme$UTMenu12 = theme.UTMenu) === null || _theme$UTMenu12 === void 0 || (_theme$UTMenu12 = _theme$UTMenu12.menuItemIcon) === null || _theme$UTMenu12 === void 0 ? void 0 : _theme$UTMenu12.fontSize,
+      margin: theme === null || theme === void 0 || (_theme$UTMenu13 = theme.UTMenu) === null || _theme$UTMenu13 === void 0 || (_theme$UTMenu13 = _theme$UTMenu13.menuItemIcon) === null || _theme$UTMenu13 === void 0 ? void 0 : _theme$UTMenu13.margin,
+      width: theme === null || theme === void 0 || (_theme$UTMenu14 = theme.UTMenu) === null || _theme$UTMenu14 === void 0 || (_theme$UTMenu14 = _theme$UTMenu14.menuItemIcon) === null || _theme$UTMenu14 === void 0 ? void 0 : _theme$UTMenu14.width
+    },
+    menuItemContainer: {
+      padding: theme === null || theme === void 0 || (_theme$UTMenu15 = theme.UTMenu) === null || _theme$UTMenu15 === void 0 || (_theme$UTMenu15 = _theme$UTMenu15.menuItemContainer) === null || _theme$UTMenu15 === void 0 ? void 0 : _theme$UTMenu15.padding,
+      position: theme === null || theme === void 0 || (_theme$UTMenu16 = theme.UTMenu) === null || _theme$UTMenu16 === void 0 || (_theme$UTMenu16 = _theme$UTMenu16.menuItemContainer) === null || _theme$UTMenu16 === void 0 ? void 0 : _theme$UTMenu16.position
+    },
+    scrollBar: {
+      maxHeight: theme === null || theme === void 0 || (_theme$UTMenu17 = theme.UTMenu) === null || _theme$UTMenu17 === void 0 || (_theme$UTMenu17 = _theme$UTMenu17.scrollBar) === null || _theme$UTMenu17 === void 0 ? void 0 : _theme$UTMenu17.maxHeight
+    }
+  };
+};
+export const retrieveMuiTheme = theme => {
+  var _theme$UTMenu18, _theme$UTMenu19;
+  return createTheme({
+    overrides: {
+      MuiListItem: {
+        divider: {
+          borderBottomColor: theme === null || theme === void 0 || (_theme$UTMenu18 = theme.UTMenu) === null || _theme$UTMenu18 === void 0 || (_theme$UTMenu18 = _theme$UTMenu18.divider) === null || _theme$UTMenu18 === void 0 ? void 0 : _theme$UTMenu18.color,
+          borderBottomWidth: theme === null || theme === void 0 || (_theme$UTMenu19 = theme.UTMenu) === null || _theme$UTMenu19 === void 0 || (_theme$UTMenu19 = _theme$UTMenu19.divider) === null || _theme$UTMenu19 === void 0 ? void 0 : _theme$UTMenu19.width
+        }
+      }
+    }
+  });
+};

package/dist/esm/components/UTMenu/utils.js

@@ -1 +1,10 @@
-import{isDesktop}from"@widergy/web-utils/lib/browser";export const getTransitionOrigin=placement=>placement.search("bottom")>=0?placement.replace("bottom","top"):placement.search("top")>=0?placement.replace("top","bottom"):placement;export const bodyHasScroll=()=>!!(document.body&&document.body.scrollHeight&&window.innerHeight)&&document.body.scrollHeight>window.innerHeight;export const getScrollbarWidth=()=>document.body&&document.body.clientWidth&&window.innerWidth?window.innerWidth-document.body.clientWidth:0;export const lockScreen=(blocker,lock)=>{const body=document.getElementsByTagName("body")[0];body.style.paddingRight=lock&&isDesktop(1024)&&bodyHasScroll()?"".concat(getScrollbarWidth(),"px"):"",body.style.overflow=lock?"hidden":"",blocker.current.style.display=lock?"initial":""};
+import { isDesktop } from '@widergy/web-utils/lib/browser';
+export const getTransitionOrigin = placement => placement.search('bottom') >= 0 ? placement.replace('bottom', 'top') : placement.search('top') >= 0 ? placement.replace('top', 'bottom') : placement;
+export const bodyHasScroll = () => document.body && document.body.scrollHeight && window.innerHeight ? document.body.scrollHeight > window.innerHeight : false;
+export const getScrollbarWidth = () => document.body && document.body.clientWidth && window.innerWidth ? window.innerWidth - document.body.clientWidth : 0;
+export const lockScreen = (blocker, lock) => {
+  const body = document.getElementsByTagName('body')[0];
+  body.style.paddingRight = lock && isDesktop(1024) && bodyHasScroll() ? "".concat(getScrollbarWidth(), "px") : '';
+  body.style.overflow = lock ? 'hidden' : '';
+  blocker.current.style.display = lock ? 'initial' : '';
+};

package/dist/esm/components/UTModal/constants.js

@@ -1 +1,75 @@
-import React from"react";var InfoIcon=function(props){return React.createElement("svg",props,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 3.333C8.109 3.333 3.333 8.11 3.333 14S8.11 24.667 14 24.667 24.667 19.89 24.667 14 19.89 3.333 14 3.333ZM.667 14C.667 6.636 6.637.667 14 .667c7.364 0 13.333 5.97 13.333 13.333 0 7.364-5.97 13.333-13.333 13.333C6.636 27.333.667 21.363.667 14Zm12-5.333c0-.737.597-1.334 1.333-1.334h.013a1.333 1.333 0 1 1 0 2.667H14a1.333 1.333 0 0 1-1.333-1.333ZM11.333 14c0-.736.597-1.333 1.334-1.333H14c.736 0 1.333.597 1.333 1.333v4a1.333 1.333 0 1 1 0 2.667H14a1.333 1.333 0 0 1-1.333-1.334v-4A1.333 1.333 0 0 1 11.333 14Z",fill:"#037DB4"}))};InfoIcon.defaultProps={width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg"};var WarningIcon=function(props){return React.createElement("svg",props,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13.955 3.179a4 4 0 0 1 5.525 1.496l9.46 16.323c.032.054.06.11.083.169a3.999 3.999 0 0 1-3.68 5.5H6.667l-.073-.002a1.358 1.358 0 0 1-.143 0 3.999 3.999 0 0 1-3.5-5.5c.024-.057.051-.113.082-.167l9.46-16.323a4 4 0 0 1 1.462-1.496ZM6.593 24.002 6.667 24h18.66a1.332 1.332 0 0 0 1.25-1.76l-9.41-16.238-.014-.023a1.333 1.333 0 0 0-2.333 0l-.013.023-9.412 16.239A1.333 1.333 0 0 0 6.59 24l.004.001ZM16 10.667c.736 0 1.333.597 1.333 1.333v2.667a1.333 1.333 0 0 1-2.666 0V12c0-.736.597-1.333 1.333-1.333Zm0 8c.736 0 1.333.597 1.333 1.333v.013a1.333 1.333 0 0 1-2.666 0V20c0-.736.597-1.333 1.333-1.333Z",fill:"#A86600"}))};WarningIcon.defaultProps={width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"};var SuccessIcon=function(props){return React.createElement("svg",props,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 5.333C10.109 5.333 5.333 10.11 5.333 16S10.11 26.667 16 26.667 26.667 21.89 26.667 16 21.89 5.333 16 5.333ZM2.667 16C2.667 8.636 8.637 2.667 16 2.667c7.364 0 13.333 5.97 13.333 13.333 0 7.364-5.97 13.333-13.333 13.333-7.364 0-13.333-5.97-13.333-13.333Zm18.276-3.61c.52.521.52 1.365 0 1.886l-5.334 5.334c-.52.52-1.364.52-1.885 0l-2.667-2.667a1.333 1.333 0 1 1 1.886-1.886l1.724 1.724 4.39-4.39c.52-.521 1.365-.521 1.886 0Z",fill:"#118460"}))};SuccessIcon.defaultProps={width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"};var ErrorIcon=function(props){return React.createElement("svg",props,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 5.333C10.109 5.333 5.333 10.11 5.333 16S10.11 26.667 16 26.667 26.667 21.89 26.667 16 21.89 5.333 16 5.333ZM2.667 16C2.667 8.636 8.637 2.667 16 2.667c7.364 0 13.333 5.97 13.333 13.333 0 7.364-5.97 13.333-13.333 13.333-7.364 0-13.333-5.97-13.333-13.333Zm9.723-3.61c.521-.52 1.365-.52 1.886 0L16 14.114l1.724-1.724a1.333 1.333 0 1 1 1.885 1.886L17.886 16l1.723 1.724a1.333 1.333 0 1 1-1.885 1.886L16 17.886l-1.724 1.724a1.333 1.333 0 1 1-1.886-1.886L14.114 16l-1.724-1.724a1.333 1.333 0 0 1 0-1.886Z",fill:"#E80C2C"}))};ErrorIcon.defaultProps={width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"};export const STATUSES={INFO:"info",WARNING:"warning",SUCCESS:"success",ERROR:"error"};export const STATUS_ICONS={[STATUSES.INFO]:InfoIcon,[STATUSES.WARNING]:WarningIcon,[STATUSES.SUCCESS]:SuccessIcon,[STATUSES.ERROR]:ErrorIcon};export const CANCEL_BUTTON_TEXT="Cancelar";export const ACCEPT_BUTTON_TEXT="Aceptar";
+import React from "react";
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 3.333C8.109 3.333 3.333 8.11 3.333 14S8.11 24.667 14 24.667 24.667 19.89 24.667 14 19.89 3.333 14 3.333ZM.667 14C.667 6.636 6.637.667 14 .667c7.364 0 13.333 5.97 13.333 13.333 0 7.364-5.97 13.333-13.333 13.333C6.636 27.333.667 21.363.667 14Zm12-5.333c0-.737.597-1.334 1.333-1.334h.013a1.333 1.333 0 1 1 0 2.667H14a1.333 1.333 0 0 1-1.333-1.333ZM11.333 14c0-.736.597-1.333 1.334-1.333H14c.736 0 1.333.597 1.333 1.333v4a1.333 1.333 0 1 1 0 2.667H14a1.333 1.333 0 0 1-1.333-1.334v-4A1.333 1.333 0 0 1 11.333 14Z",
+    fill: "#037DB4"
+  }));
+};
+InfoIcon.defaultProps = {
+  width: "28",
+  height: "28",
+  viewBox: "0 0 28 28",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var WarningIcon = function WarningIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.955 3.179a4 4 0 0 1 5.525 1.496l9.46 16.323c.032.054.06.11.083.169a3.999 3.999 0 0 1-3.68 5.5H6.667l-.073-.002a1.358 1.358 0 0 1-.143 0 3.999 3.999 0 0 1-3.5-5.5c.024-.057.051-.113.082-.167l9.46-16.323a4 4 0 0 1 1.462-1.496ZM6.593 24.002 6.667 24h18.66a1.332 1.332 0 0 0 1.25-1.76l-9.41-16.238-.014-.023a1.333 1.333 0 0 0-2.333 0l-.013.023-9.412 16.239A1.333 1.333 0 0 0 6.59 24l.004.001ZM16 10.667c.736 0 1.333.597 1.333 1.333v2.667a1.333 1.333 0 0 1-2.666 0V12c0-.736.597-1.333 1.333-1.333Zm0 8c.736 0 1.333.597 1.333 1.333v.013a1.333 1.333 0 0 1-2.666 0V20c0-.736.597-1.333 1.333-1.333Z",
+    fill: "#A86600"
+  }));
+};
+WarningIcon.defaultProps = {
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var SuccessIcon = function SuccessIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 5.333C10.109 5.333 5.333 10.11 5.333 16S10.11 26.667 16 26.667 26.667 21.89 26.667 16 21.89 5.333 16 5.333ZM2.667 16C2.667 8.636 8.637 2.667 16 2.667c7.364 0 13.333 5.97 13.333 13.333 0 7.364-5.97 13.333-13.333 13.333-7.364 0-13.333-5.97-13.333-13.333Zm18.276-3.61c.52.521.52 1.365 0 1.886l-5.334 5.334c-.52.52-1.364.52-1.885 0l-2.667-2.667a1.333 1.333 0 1 1 1.886-1.886l1.724 1.724 4.39-4.39c.52-.521 1.365-.521 1.886 0Z",
+    fill: "#118460"
+  }));
+};
+SuccessIcon.defaultProps = {
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var ErrorIcon = function ErrorIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 5.333C10.109 5.333 5.333 10.11 5.333 16S10.11 26.667 16 26.667 26.667 21.89 26.667 16 21.89 5.333 16 5.333ZM2.667 16C2.667 8.636 8.637 2.667 16 2.667c7.364 0 13.333 5.97 13.333 13.333 0 7.364-5.97 13.333-13.333 13.333-7.364 0-13.333-5.97-13.333-13.333Zm9.723-3.61c.521-.52 1.365-.52 1.886 0L16 14.114l1.724-1.724a1.333 1.333 0 1 1 1.885 1.886L17.886 16l1.723 1.724a1.333 1.333 0 1 1-1.885 1.886L16 17.886l-1.724 1.724a1.333 1.333 0 1 1-1.886-1.886L14.114 16l-1.724-1.724a1.333 1.333 0 0 1 0-1.886Z",
+    fill: "#E80C2C"
+  }));
+};
+ErrorIcon.defaultProps = {
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+export const STATUSES = {
+  INFO: 'info',
+  WARNING: 'warning',
+  SUCCESS: 'success',
+  ERROR: 'error'
+};
+export const STATUS_ICONS = {
+  [STATUSES.INFO]: InfoIcon,
+  [STATUSES.WARNING]: WarningIcon,
+  [STATUSES.SUCCESS]: SuccessIcon,
+  [STATUSES.ERROR]: ErrorIcon
+};
+export const CANCEL_BUTTON_TEXT = 'Cancelar';
+export const ACCEPT_BUTTON_TEXT = 'Aceptar';

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

@@ -1 +1,96 @@
-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)}import React,{useEffect,useMemo,useRef}from"react";import{bool,elementType,func,object,objectOf,shape,string}from"prop-types";import{objectIsEmpty}from"@widergy/web-utils/lib/object";import{capitalize}from"../../utils/componentUtils";import{mergeClasses}from"../../utils/classesUtils";import UTButton from"../UTButton";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import{ACCEPT_BUTTON_TEXT,CANCEL_BUTTON_TEXT,STATUS_ICONS}from"./constants";import styles from"./styles.module.scss";const UTModal=_ref=>{let{cancelAction:cancelAction,children:children,classes:themeClasses,classNames:classNames,description:description,descriptionProps:descriptionProps={},handleClickAway:handleClickAway,isOpen:isOpen,primaryAction:primaryAction,removeBodyPadding:removeBodyPadding,secondaryAction:secondaryAction,SecondaryActionComponent:SecondaryActionComponent,size:size,status:status,title:title}=_ref;const dialogRef=useRef(null);useEffect(()=>{isOpen?dialogRef.current.showModal():dialogRef.current.close()},[isOpen]);const classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),StatusIcon=STATUS_ICONS[status],withSecondaryActions=!objectIsEmpty(secondaryAction)||SecondaryActionComponent;return React.createElement("dialog",{className:"".concat(styles.container," ").concat(classes.container," ").concat(size?styles["container".concat(capitalize(size))]:styles.containerM),onClick:event=>handleClickAway&&"DIALOG"===event.target.tagName&&handleClickAway(),ref:dialogRef},React.createElement("div",null,StatusIcon&&React.createElement("div",{className:"".concat(styles.status," ").concat(classes["status".concat(capitalize(status))])},React.createElement(StatusIcon,{className:"".concat(styles.icon," ").concat(classes["icon".concat(capitalize(status))])})),React.createElement("div",{className:styles.header},React.createElement(UTLabel,{variant:"title3",weight:"medium"},title),description&&React.createElement(UTLabel,_extends({colorTheme:"gray"},descriptionProps),description)),children&&React.createElement("div",{className:"".concat(styles.body," ").concat(!removeBodyPadding&&styles.bodyPadding)},children),React.createElement("div",{className:"\n            ".concat(styles.actions,"\n            ").concat(classes.actions,"\n            ").concat(withSecondaryActions&&styles.withSecondaryActions,"\n          ")},withSecondaryActions&&React.createElement("div",null,SecondaryActionComponent?React.createElement(SecondaryActionComponent,null):React.createElement(UTButton,_extends({colorTheme:"secondary",variant:"semitransparent"},secondaryAction),secondaryAction.label)),React.createElement("div",{className:styles.defaultActions},!objectIsEmpty(cancelAction)&&React.createElement(UTButton,_extends({colorTheme:"secondary",variant:"text"},cancelAction),cancelAction.label||CANCEL_BUTTON_TEXT),!objectIsEmpty(primaryAction)&&React.createElement(UTButton,_extends({colorTheme:"primary",variant:"filled"},primaryAction),primaryAction.label||ACCEPT_BUTTON_TEXT)))))};UTModal.propTypes={cancelAction:shape({label:string,onClick:func}),classes:objectOf(string),classNames:objectOf(string),description:string,descriptionProps:object,handleClickAway:func,isOpen:bool,primaryAction:shape({label:string,onClick:func}),removeBodyPadding:bool,secondaryAction:shape({label:string,onClick:func}),SecondaryActionComponent:elementType,size:string,status:string,title:string};export default WithTheme(retrieveStyle)(UTModal);
+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); }
+import React, { useEffect, useMemo, useRef } from 'react';
+import { bool, elementType, func, object, objectOf, shape, string } from 'prop-types';
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import { capitalize } from '../../utils/componentUtils';
+import { mergeClasses } from '../../utils/classesUtils';
+import UTButton from '../UTButton';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import { ACCEPT_BUTTON_TEXT, CANCEL_BUTTON_TEXT, STATUS_ICONS } from './constants';
+import styles from './styles.module.scss';
+const UTModal = _ref => {
+  let {
+    cancelAction,
+    children,
+    classes: themeClasses,
+    classNames,
+    description,
+    descriptionProps = {},
+    handleClickAway,
+    isOpen,
+    primaryAction,
+    removeBodyPadding,
+    secondaryAction,
+    SecondaryActionComponent,
+    size,
+    status,
+    title
+  } = _ref;
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) dialogRef.current.showModal();else dialogRef.current.close();
+  }, [isOpen]);
+  const onClickDialog = event => handleClickAway && event.target.tagName === 'DIALOG' && handleClickAway();
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const StatusIcon = STATUS_ICONS[status];
+  const withSecondaryActions = !objectIsEmpty(secondaryAction) || SecondaryActionComponent;
+  return /*#__PURE__*/React.createElement("dialog", {
+    className: "".concat(styles.container, " ").concat(classes.container, " ").concat(size ? styles["container".concat(capitalize(size))] : styles.containerM),
+    onClick: onClickDialog,
+    ref: dialogRef
+  }, /*#__PURE__*/React.createElement("div", null, StatusIcon && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.status, " ").concat(classes["status".concat(capitalize(status))])
+  }, /*#__PURE__*/React.createElement(StatusIcon, {
+    className: "".concat(styles.icon, " ").concat(classes["icon".concat(capitalize(status))])
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, title), description && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray"
+  }, descriptionProps), description)), children && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.body, " ").concat(!removeBodyPadding && styles.bodyPadding)
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "\n            ".concat(styles.actions, "\n            ").concat(classes.actions, "\n            ").concat(withSecondaryActions && styles.withSecondaryActions, "\n          ")
+  }, withSecondaryActions && /*#__PURE__*/React.createElement("div", null, SecondaryActionComponent ? /*#__PURE__*/React.createElement(SecondaryActionComponent, null) : /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: "secondary",
+    variant: "semitransparent"
+  }, secondaryAction), secondaryAction.label)), /*#__PURE__*/React.createElement("div", {
+    className: styles.defaultActions
+  }, !objectIsEmpty(cancelAction) && /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: "secondary",
+    variant: "text"
+  }, cancelAction), cancelAction.label || CANCEL_BUTTON_TEXT), !objectIsEmpty(primaryAction) && /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: "primary",
+    variant: "filled"
+  }, primaryAction), primaryAction.label || ACCEPT_BUTTON_TEXT)))));
+};
+UTModal.propTypes = {
+  cancelAction: shape({
+    label: string,
+    onClick: func
+  }),
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  description: string,
+  descriptionProps: object,
+  handleClickAway: func,
+  isOpen: bool,
+  primaryAction: shape({
+    label: string,
+    onClick: func
+  }),
+  removeBodyPadding: bool,
+  secondaryAction: shape({
+    label: string,
+    onClick: func
+  }),
+  SecondaryActionComponent: elementType,
+  size: string,
+  status: string,
+  title: string
+};
+export default WithTheme(retrieveStyle)(UTModal);

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

@@ -1 +1,48 @@
-import{resolveCssValue}from"../../utils/classesUtils";import{getShadow}from"../../utils/shadowUtils";export const retrieveStyle=_ref=>{var _theme$Palette$shadow;let{theme:theme}=_ref;return{container:{backgroundColor:theme.Palette.light["01"],boxShadow:getShadow({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:2}),"&::backdrop":{backgroundColor:resolveCssValue(theme.Palette.dark["05"]),opacity:"0.25"}},statusInfo:{backgroundColor:theme.Palette.information["04"]},statusWarning:{backgroundColor:theme.Palette.warning["04"]},statusSuccess:{backgroundColor:theme.Palette.success["04"]},statusError:{backgroundColor:theme.Palette.error["04"]},iconInfo:{backgroundColor:theme.Palette.information["02"]},iconWarning:{backgroundColor:theme.Palette.warning["02"]},iconSuccess:{backgroundColor:theme.Palette.success["02"]},iconError:{backgroundColor:theme.Palette.error["02"]},actions:{borderTopColor:theme.Palette.light["04"]}}};
+import { resolveCssValue } from '../../utils/classesUtils';
+import { getShadow } from '../../utils/shadowUtils';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette.light['01'],
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      '&::backdrop': {
+        backgroundColor: resolveCssValue(theme.Palette.dark['05']),
+        opacity: '0.25'
+      }
+    },
+    statusInfo: {
+      backgroundColor: theme.Palette.information['04']
+    },
+    statusWarning: {
+      backgroundColor: theme.Palette.warning['04']
+    },
+    statusSuccess: {
+      backgroundColor: theme.Palette.success['04']
+    },
+    statusError: {
+      backgroundColor: theme.Palette.error['04']
+    },
+    iconInfo: {
+      backgroundColor: theme.Palette.information['02']
+    },
+    iconWarning: {
+      backgroundColor: theme.Palette.warning['02']
+    },
+    iconSuccess: {
+      backgroundColor: theme.Palette.success['02']
+    },
+    iconError: {
+      backgroundColor: theme.Palette.error['02']
+    },
+    actions: {
+      borderTopColor: theme.Palette.light['04']
+    }
+  };
+};

package/dist/esm/components/UTOnboarding/README.md

@@ -0,0 +1,49 @@
+# UTOnboarding
+
+### Description
+
+Onboarding component.
+
+### Variants
+
+- Default: variant = 'dark'
+- Information: variant = 'information'
+- Light: variant = 'light'
+
+### Props
+
+- handleOnClose: function --> optional, se ejecutara cuando se cierra el onboarding
+- handleComplete: function --> optional, se ejecutara cuando se completa el onboarding
+- options: object | Espera recibir un objeto propio de la libreria de intro react js. Ejemplo de valores posibles
+  - nextLabel: string --> Next button label
+  - prevLabel: string --> Previous button label
+  - options: objeto --> Ejemplo de lo que se puede pasar:
+    {{ positionPrecedence: ['right'] }} (posicion del onboarding)
+- steps: array of object --> requerido
+
+  - Cada objeto espera recibir:
+
+    ` {
+    title: '¡Bienvenido a tu oficina virtual!',
+    element: '.step_1',
+    image: '',
+    description:
+      'Inicia el tutorial de introducción y descubrí todas las gestiones que podés realizar en tus cuentas.'
+}`
+
+  - title: Titulo del onboarding
+  - element: string | CSS selector to use for the step
+  - position: string | Position of the tooltip
+  - intro : string | The tooltip content
+  - description: string | si quiero agregar una imagen voy a tener que pasarle una description en lugar del intro
+  - image: imagen de tipo png
+  - vectorImage: imagen de tipo svg
+  - hideFooter: bool | oculta los botones y los steps
+  - highlightClass: CSS class of the helperLayer.
+  - tooltipClass: CSS class of the tooltip
+  - isSuggestion: bool | si es el primer paso y no quiero que tenga tooltip puedo dejarlo en true
+  -  closeButtonDataTestId: string | data-testid para el botón de cerrar
+  -  descriptionDataTestId: string | data-testid para la descripción
+  -  nextButtonDataTestId: string | data-testid para el botón de siguiente
+  -  prevButtonDataTestId: string | data-testid para el botón de atrás
+  -  titleDataTestId: string | data-testid para el título

package/dist/esm/components/UTOnboarding/components/OnboardingStep/index.js

@@ -1 +1,38 @@
-import React from"react";import"intro.js/introjs.css";import{bool,number,object,string}from"prop-types";import styles from"./styles.module.scss";const OnboardingStep=_ref=>{let{currentStep:currentStep,descriptionDataTestId:descriptionDataTestId,hideFooter:hideFooter=!1,step:step,totalSteps:totalSteps,variant:variant}=_ref;return React.createElement("div",null,React.createElement("h3",{className:"".concat(styles.description," ").concat(styles["".concat(variant,"Description")]),"data-testid":descriptionDataTestId},step.description),step.vectorImage?React.createElement(step.vectorImage,{alt:"",className:styles.wizardImage}):step.image&&React.createElement("img",{alt:"",className:styles.wizardImage,src:step.image}),!hideFooter&&React.createElement("div",{className:styles.footer},React.createElement("h3",{className:"".concat(styles.counterSteps," ").concat(styles["".concat(variant,"CounterSteps")])},currentStep+1," de ",totalSteps)))};OnboardingStep.propTypes={currentStep:number,descriptionDataTestId:string,hideFooter:bool,step:object,totalSteps:number,variant:string};export default OnboardingStep;
+import React from 'react';
+import 'intro.js/introjs.css';
+import { bool, number, object, string } from 'prop-types';
+import styles from './styles.module.scss';
+const OnboardingStep = _ref => {
+  let {
+    currentStep,
+    descriptionDataTestId,
+    hideFooter = false,
+    step,
+    totalSteps,
+    variant
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "".concat(styles.description, " ").concat(styles["".concat(variant, "Description")]),
+    "data-testid": descriptionDataTestId
+  }, step.description), step.vectorImage ? /*#__PURE__*/React.createElement(step.vectorImage, {
+    alt: "",
+    className: styles.wizardImage
+  }) : step.image && /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: styles.wizardImage,
+    src: step.image
+  }), !hideFooter && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "".concat(styles.counterSteps, " ").concat(styles["".concat(variant, "CounterSteps")])
+  }, currentStep + 1, " de ", totalSteps)));
+};
+OnboardingStep.propTypes = {
+  currentStep: number,
+  descriptionDataTestId: string,
+  hideFooter: bool,
+  step: object,
+  totalSteps: number,
+  variant: string
+};
+export default OnboardingStep;

package/dist/esm/components/UTOnboarding/constants.js

@@ -1 +1,12 @@
-export const VARIANTS={dark:"dark",information:"information",light:"light"};export const DEFAULT_PROPS={variant:"dark"};export const DONE_LABEL="Finalizar";export const NEXT_LABEL="Siguiente";export const PREV_LABEL="Atrás";export const START_LABEL="Comenzar";
+export const VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+export const DEFAULT_PROPS = {
+  variant: 'dark'
+};
+export const DONE_LABEL = 'Finalizar';
+export const NEXT_LABEL = 'Siguiente';
+export const PREV_LABEL = 'Atrás';
+export const START_LABEL = 'Comenzar';