@widergy/energy-ui 3.158.0 → 3.159.0

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

@@ -0,0 +1,62 @@
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { GMAP_PARAMS, LOCATION_TYPES, ADDRESS_TYPES } from './constants';
+export const geolocation = message => navigator.geolocation ? navigator.geolocation : {
+  getCurrentPosition(success, failure) {
+    failure(message);
+  }
+};
+export const checkAddressIsValid = (latLng, usePolygon, polygon) => {
+  // Check if a position is included on Utility polygon or if utility hasn't setted a polygon
+  // To set map in this position
+  const utilityPolygon = new window.google.maps.Polygon({
+    paths: polygon
+  });
+  return !usePolygon || window.google.maps.geometry.poly.containsLocation(latLng, utilityPolygon);
+};
+export const retrieveAddressByCoords = (_ref, onAddressFoundCallback) => {
+  let {
+    location,
+    address
+  } = _ref;
+  const geocoder = new window.google.maps.Geocoder();
+  const parameters = address ? {
+    address
+  } : {
+    location
+  };
+  geocoder.geocode(parameters, (results, status) => {
+    if (status === 'OK') {
+      const addressResults = results.filter(result => result.types.some(type => type === ADDRESS_TYPES.street || type === ADDRESS_TYPES.route));
+      let finalAddress;
+      if (!isEmpty(addressResults)) {
+        finalAddress = addressResults.find(elem => elem.geometry.location_type === LOCATION_TYPES.rooftop) || addressResults.find(elem => elem.geometry.location_type === LOCATION_TYPES.rangeInterpolated) || addressResults.find(elem => elem.geometry.location_type === LOCATION_TYPES.geometricCenter);
+      } else if (!isEmpty(results)) {
+        finalAddress = {
+          ...results[0],
+          ...(address ? {
+            formatted_address: address
+          } : {})
+        };
+      }
+      if (finalAddress) onAddressFoundCallback(finalAddress);
+    }
+  });
+};
+export const findAddressComponent = (address, component) => {
+  const addrComponent = address.address_components.find(attribute => attribute.types.includes(component));
+  return addrComponent && addrComponent.long_name;
+};
+export const getValue = (address, latLng, paramName) => {
+  switch (paramName) {
+    case GMAP_PARAMS.latitude:
+      return latLng.lat();
+    case GMAP_PARAMS.longitude:
+      return latLng.lng();
+    case GMAP_PARAMS.formattedAddress:
+      return address.formatted_address;
+    default:
+      return findAddressComponent(address, paramName);
+  }
+};
+// configuration.address_components
+export const isValidConfiguration = field => field && field.configuration && field.configuration.address_components && field.configuration.address_components[GMAP_PARAMS.latitude] && field.configuration.address_components[GMAP_PARAMS.longitude] && field.configuration.address_components[GMAP_PARAMS.formattedAddress];

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

@@ -0,0 +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,
+    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/styles.module.scss

@@ -0,0 +1,20 @@
+.arrow {
+  border-bottom: 7px solid white;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  color: white;
+  height: 0;
+  position: absolute;
+  transform: translateY(-100%);
+  width: 0;
+}
+
+.scrollBlocker {
+  display: none;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+}

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

@@ -0,0 +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
+  } = _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

@@ -0,0 +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 : 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/assets/alert-triangle.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="alert-triangle">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M13.9552 3.17864C14.5707 2.81575 15.2722 2.62436 15.9867 2.62436C16.7012 2.62436 17.4027 2.81575 18.0182 3.17864C18.6295 3.53905 19.1339 4.05555 19.4796 4.67506L28.9403 20.9981C28.9717 21.0523 28.9993 21.1086 29.0227 21.1667C29.2675 21.7717 29.3605 22.4274 29.2936 23.0766C29.2268 23.7257 29.0021 24.3487 28.6392 24.8911C28.2762 25.4336 27.7861 25.8789 27.2115 26.1884C26.6369 26.4979 25.9953 26.6621 25.3427 26.6667L25.3334 26.6667H6.66672C6.64235 26.6667 6.61813 26.666 6.59408 26.6648C6.54707 26.6673 6.49947 26.6674 6.4514 26.6649C5.81419 26.6321 5.19409 26.4473 4.64285 26.1259C4.09162 25.8046 3.62526 25.356 3.2827 24.8177C2.94015 24.2794 2.73133 23.667 2.6737 23.0315C2.61607 22.3961 2.71128 21.7561 2.9514 21.1649C2.97473 21.1075 3.00205 21.0517 3.03314 20.9981L12.4938 4.6751C12.8396 4.05556 13.3439 3.53905 13.9552 3.17864ZM6.59306 24.002C6.61744 24.0007 6.642 24 6.66672 24H25.3279C25.5441 23.9979 25.7566 23.9432 25.947 23.8406C26.1385 23.7375 26.3019 23.589 26.4228 23.4082C26.5438 23.2274 26.6187 23.0198 26.641 22.8034C26.6606 22.6129 26.6389 22.4207 26.5778 22.2399L17.1665 6.00197L17.1534 5.97886C17.0381 5.77046 16.8691 5.59675 16.6639 5.47579C16.4587 5.35482 16.2249 5.29103 15.9867 5.29103C15.7485 5.29103 15.5147 5.35482 15.3095 5.47579C15.1044 5.59675 14.9354 5.77046 14.8201 5.97886L14.807 6.00197L5.39506 22.2408C5.33505 22.4172 5.31258 22.6045 5.32947 22.7907C5.34868 23.0025 5.41828 23.2066 5.53247 23.3861C5.64665 23.5655 5.80211 23.715 5.98585 23.8221C6.16959 23.9292 6.37629 23.9908 6.5887 24.0018C6.59015 24.0019 6.5916 24.0019 6.59306 24.002ZM16 10.6667C16.7364 10.6667 17.3334 11.2636 17.3334 12V14.6667C17.3334 15.4031 16.7364 16 16 16C15.2637 16 14.6667 15.4031 14.6667 14.6667V12C14.6667 11.2636 15.2637 10.6667 16 10.6667ZM16 18.6667C16.7364 18.6667 17.3334 19.2636 17.3334 20V20.0133C17.3334 20.7497 16.7364 21.3467 16 21.3467C15.2637 21.3467 14.6667 20.7497 14.6667 20.0133V20C14.6667 19.2636 15.2637 18.6667 16 18.6667Z" fill="#A86600"/>
+</g>
+</svg>

package/dist/esm/components/UTModal/assets/circle-check.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="circle-check">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M16 5.33334C10.1089 5.33334 5.33329 10.109 5.33329 16C5.33329 21.891 10.1089 26.6667 16 26.6667C21.891 26.6667 26.6666 21.891 26.6666 16C26.6666 10.109 21.891 5.33334 16 5.33334ZM2.66663 16C2.66663 8.63621 8.63616 2.66667 16 2.66667C23.3638 2.66667 29.3333 8.63621 29.3333 16C29.3333 23.3638 23.3638 29.3333 16 29.3333C8.63616 29.3333 2.66663 23.3638 2.66663 16ZM20.9428 12.3905C21.4635 12.9112 21.4635 13.7554 20.9428 14.2761L15.6094 19.6095C15.0887 20.1302 14.2445 20.1302 13.7238 19.6095L11.0572 16.9428C10.5365 16.4221 10.5365 15.5779 11.0572 15.0572C11.5778 14.5365 12.4221 14.5365 12.9428 15.0572L14.6666 16.7811L19.0572 12.3905C19.5779 11.8698 20.4221 11.8698 20.9428 12.3905Z" fill="#118460"/>
+</g>
+</svg>

package/dist/esm/components/UTModal/assets/circle-info.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M14 3.33332C8.10892 3.33332 3.33329 8.10895 3.33329 14C3.33329 19.891 8.10892 24.6667 14 24.6667C19.891 24.6667 24.6666 19.891 24.6666 14C24.6666 8.10895 19.891 3.33332 14 3.33332ZM0.666626 14C0.666626 6.63619 6.63616 0.666656 14 0.666656C21.3638 0.666656 27.3333 6.63619 27.3333 14C27.3333 21.3638 21.3638 27.3333 14 27.3333C6.63616 27.3333 0.666626 21.3638 0.666626 14ZM12.6666 8.66666C12.6666 7.93028 13.2636 7.33332 14 7.33332H14.0133C14.7497 7.33332 15.3466 7.93028 15.3466 8.66666C15.3466 9.40304 14.7497 9.99999 14.0133 9.99999H14C13.2636 9.99999 12.6666 9.40304 12.6666 8.66666ZM11.3333 14C11.3333 13.2636 11.9302 12.6667 12.6666 12.6667H14C14.7363 12.6667 15.3333 13.2636 15.3333 14V18C16.0697 18 16.6666 18.5969 16.6666 19.3333C16.6666 20.0697 16.0697 20.6667 15.3333 20.6667H14C13.2636 20.6667 12.6666 20.0697 12.6666 19.3333V15.3333C11.9302 15.3333 11.3333 14.7364 11.3333 14Z" fill="#037DB4"/>
+</svg>

package/dist/esm/components/UTModal/assets/circle-x.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="circle-x">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M16 5.33334C10.1089 5.33334 5.33329 10.109 5.33329 16C5.33329 21.891 10.1089 26.6667 16 26.6667C21.891 26.6667 26.6666 21.891 26.6666 16C26.6666 10.109 21.891 5.33334 16 5.33334ZM2.66663 16C2.66663 8.63621 8.63616 2.66667 16 2.66667C23.3638 2.66667 29.3333 8.63621 29.3333 16C29.3333 23.3638 23.3638 29.3333 16 29.3333C8.63616 29.3333 2.66663 23.3638 2.66663 16ZM12.3905 12.3905C12.9112 11.8698 13.7554 11.8698 14.2761 12.3905L16 14.1144L17.7238 12.3905C18.2445 11.8698 19.0887 11.8698 19.6094 12.3905C20.1301 12.9112 20.1301 13.7554 19.6094 14.2761L17.8856 16L19.6094 17.7239C20.1301 18.2446 20.1301 19.0888 19.6094 19.6095C19.0887 20.1302 18.2445 20.1302 17.7238 19.6095L16 17.8856L14.2761 19.6095C13.7554 20.1302 12.9112 20.1302 12.3905 19.6095C11.8698 19.0888 11.8698 18.2446 12.3905 17.7239L14.1143 16L12.3905 14.2761C11.8698 13.7554 11.8698 12.9112 12.3905 12.3905Z" fill="#E80C2C"/>
+</g>
+</svg>

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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +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,
+    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/styles.module.scss

@@ -0,0 +1,77 @@
+$icon-size: 56px;
+
+.container {
+  border-radius: 5px;
+  border-width: 0;
+  padding: 0;
+}
+
+.containerS {
+  width: 381px;
+}
+
+.containerM {
+  width: 560px;
+}
+
+.containerL {
+  width: 790px;
+}
+
+.containerXl {
+  width: 1200px;
+}
+
+.status {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 32px;
+}
+
+.icon {
+  border-radius: 100%;
+  height: $icon-size;
+  padding: 12px;
+  width: $icon-size;
+}
+
+.header {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+  padding: 24px;
+}
+
+.body {
+  padding-bottom: 24px;
+}
+
+.bodyPadding {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.actions {
+  align-items: center;
+  border-top-style: solid;
+  border-top-width: 1px;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 16px;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.withSecondaryActions {
+  justify-content: space-between;
+}
+
+.defaultActions {
+  align-items: center;
+  display: flex;
+  grid-gap: 16px;
+}