@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTTextInput/versions/V1/styles.module.scss

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.textHelp {
+  text-align: left;
+}

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

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, memo } from 'react';
+import { func, string } from 'prop-types';
+const DEFAULT_IFRAME_SRC = 'https://mindmup.github.io/3rdpartycookiecheck/start.html';
+const DEFAULT_IFRAME_TITLE = 'UTThirdPartyCookieChecker';
+const UTThirdPartyCookieChecker = _ref => {
+  let {
+    disabledCallback,
+    enabledCallback,
+    iframeSrc,
+    iframeTitle
+  } = _ref;
+  const iframeRef = useRef(null);
+  const handleCallback = event => {
+    if (event.data === 'MM:3PCsupported' && enabledCallback) {
+      return enabledCallback();
+    }
+    if (event.data === 'MM:3PCunsupported' && disabledCallback) {
+      return disabledCallback();
+    }
+    return () => undefined;
+  };
+  useEffect(() => {
+    window.addEventListener('message', handleCallback, false);
+    iframeRef.current.src = iframeSrc || DEFAULT_IFRAME_SRC;
+    return () => window.removeEventListener('message', handleCallback, false);
+  }, []);
+  return /*#__PURE__*/React.createElement("iframe", {
+    ref: iframeRef,
+    title: iframeTitle || DEFAULT_IFRAME_TITLE,
+    style: {
+      display: 'none'
+    }
+  });
+};
+UTThirdPartyCookieChecker.propTypes = {
+  disabledCallback: func,
+  enabledCallback: func,
+  iframeSrc: string,
+  iframeTitle: string
+};
+export default /*#__PURE__*/memo(UTThirdPartyCookieChecker);

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

@@ -0,0 +1,68 @@
+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, { useMemo } from 'react';
+import Tippy from '@tippy.js/react';
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/shift-toward.css';
+import { node, bool, object, arrayOf, number, string, objectOf } from 'prop-types';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { mergeClasses } from '../../utils/classesUtils';
+import styles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+const UTTooltip = _ref => {
+  let {
+    arrow = true,
+    children,
+    classes: themeStyles,
+    className,
+    content,
+    dataTestId,
+    duration = [600, 350],
+    forceArrow,
+    hideOnClick = false,
+    inertia = true,
+    interactive = true,
+    stringContentClassName,
+    stringContentProps,
+    tippyProps
+  } = _ref;
+  const theme = useMemo(() => mergeClasses(themeStyles, {
+    container: className,
+    stringContent: stringContentClassName
+  }), [className, stringContentClassName]);
+  if (!content) return children;
+  return /*#__PURE__*/React.createElement(Tippy, _extends({
+    animation: "shift-toward",
+    inertia: inertia,
+    duration: duration,
+    arrow: arrow,
+    hideOnClick: hideOnClick,
+    className: "".concat(theme.container, " ").concat(forceArrow && styles.arrow),
+    interactive: interactive
+  }, tippyProps, {
+    content: /*#__PURE__*/React.isValidElement(content) ? content : /*#__PURE__*/React.createElement(UTLabel, _extends({
+      className: "".concat(styles.baseContent, " ").concat(stringContentClassName),
+      colorTheme: "light",
+      dataTestId: dataTestId,
+      variant: "xsmall",
+      withMarkdown: true
+    }, stringContentProps), content)
+  }), children);
+};
+UTTooltip.propTypes = {
+  arrow: bool,
+  classes: objectOf(string),
+  className: string,
+  content: node,
+  dataTestId: string,
+  duration: arrayOf(number),
+  forceArrow: bool,
+  hideOnClick: bool,
+  inertia: bool,
+  interactive: bool,
+  placement: string,
+  stringContentClassName: string,
+  stringContentProps: object,
+  tippyProps: object
+};
+export default WithTheme(retrieveStyle)(UTTooltip);

package/dist/esm/components/UTTooltip/styles.module.scss

@@ -0,0 +1,15 @@
+@use '../../scss/variables/colors.module.scss' as *;
+
+.baseContent {
+  text-align: left;
+
+  & a {
+    color: $white;
+  }
+}
+
+.arrow {
+  :global .tippy-arrow {
+    display: block !important;
+  }
+}

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

@@ -0,0 +1,24 @@
+export const retrieveStyle = _ref => {
+  var _theme$UTTooltip, _theme$UTTooltip2, _theme$UTTooltip3, _theme$UTTooltip4, _theme$UTTooltip5, _theme$UTTooltip6, _theme$UTTooltip7, _theme$UTTooltip8, _theme$UTTooltip9, _theme$UTTooltip0;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTTooltip = theme.UTTooltip) === null || _theme$UTTooltip === void 0 || (_theme$UTTooltip = _theme$UTTooltip.container) === null || _theme$UTTooltip === void 0 ? void 0 : _theme$UTTooltip.backgroundColor,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTTooltip2 = theme.UTTooltip) === null || _theme$UTTooltip2 === void 0 || (_theme$UTTooltip2 = _theme$UTTooltip2.container) === null || _theme$UTTooltip2 === void 0 ? void 0 : _theme$UTTooltip2.borderRadius,
+      boxShadow: theme === null || theme === void 0 || (_theme$UTTooltip3 = theme.UTTooltip) === null || _theme$UTTooltip3 === void 0 || (_theme$UTTooltip3 = _theme$UTTooltip3.container) === null || _theme$UTTooltip3 === void 0 ? void 0 : _theme$UTTooltip3.boxShadow,
+      fontSize: theme === null || theme === void 0 || (_theme$UTTooltip4 = theme.UTTooltip) === null || _theme$UTTooltip4 === void 0 || (_theme$UTTooltip4 = _theme$UTTooltip4.container) === null || _theme$UTTooltip4 === void 0 ? void 0 : _theme$UTTooltip4.fontSize,
+      padding: theme === null || theme === void 0 || (_theme$UTTooltip5 = theme.UTTooltip) === null || _theme$UTTooltip5 === void 0 || (_theme$UTTooltip5 = _theme$UTTooltip5.container) === null || _theme$UTTooltip5 === void 0 ? void 0 : _theme$UTTooltip5.padding,
+      '& > .tippy-arrow': {
+        display: theme === null || theme === void 0 || (_theme$UTTooltip6 = theme.UTTooltip) === null || _theme$UTTooltip6 === void 0 || (_theme$UTTooltip6 = _theme$UTTooltip6.arrow) === null || _theme$UTTooltip6 === void 0 ? void 0 : _theme$UTTooltip6.display
+      }
+    },
+    stringContent: {
+      fontSize: theme === null || theme === void 0 || (_theme$UTTooltip7 = theme.UTTooltip) === null || _theme$UTTooltip7 === void 0 || (_theme$UTTooltip7 = _theme$UTTooltip7.stringContent) === null || _theme$UTTooltip7 === void 0 ? void 0 : _theme$UTTooltip7.fontSize,
+      fontWeight: theme === null || theme === void 0 || (_theme$UTTooltip8 = theme.UTTooltip) === null || _theme$UTTooltip8 === void 0 || (_theme$UTTooltip8 = _theme$UTTooltip8.stringContent) === null || _theme$UTTooltip8 === void 0 ? void 0 : _theme$UTTooltip8.fontWeight,
+      lineHeight: theme === null || theme === void 0 || (_theme$UTTooltip9 = theme.UTTooltip) === null || _theme$UTTooltip9 === void 0 || (_theme$UTTooltip9 = _theme$UTTooltip9.stringContent) === null || _theme$UTTooltip9 === void 0 ? void 0 : _theme$UTTooltip9.lineHeight,
+      color: theme === null || theme === void 0 || (_theme$UTTooltip0 = theme.UTTooltip) === null || _theme$UTTooltip0 === void 0 || (_theme$UTTooltip0 = _theme$UTTooltip0.stringContent) === null || _theme$UTTooltip0 === void 0 ? void 0 : _theme$UTTooltip0.color
+    }
+  };
+};

package/dist/esm/components/UTTopbar/components/Notifications/index.js

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+import { arrayOf, object } from 'prop-types';
+import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { classType, iconType } from '../../types.js';
+import styles from './styles.module.scss';
+const Notifications = _ref => {
+  let {
+    classes,
+    IconActive = NotificationsNoneIcon,
+    IconInactive = NotificationsNoneIcon,
+    notifications = []
+  } = _ref;
+  const IconComponent = isEmpty(notifications) ? IconActive : IconInactive;
+  return /*#__PURE__*/React.createElement(IconComponent, {
+    className: "".concat(styles.notificationsIcon, " ").concat(classes.notificationsIcon)
+  });
+};
+Notifications.propTypes = {
+  classes: classType,
+  IconActive: iconType,
+  IconInactive: iconType,
+  notifications: arrayOf(object)
+};
+export default /*#__PURE__*/memo(Notifications);

package/dist/esm/components/UTTopbar/components/Notifications/styles.module.scss

@@ -0,0 +1,10 @@
+.userMenu {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  min-width: 160px;
+}
+
+.notificationsIcon {
+  width: auto;
+}

package/dist/esm/components/UTTopbar/components/UserMenu/index.js

@@ -0,0 +1,51 @@
+import React, { memo, Fragment } from 'react';
+import { bool, func, node, string } from 'prop-types';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import UTLabel from '../../../UTLabel';
+import { classType, avatarType, iconType } from '../../types.js';
+import styles from './styles.module.scss';
+const UserMenu = _ref => {
+  let {
+    Arrow,
+    avatar,
+    classes,
+    dataTestId,
+    handleClick,
+    justAvatar,
+    MenuComponent,
+    menuOpened,
+    subtitle,
+    title
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    dataTestId: dataTestId,
+    onClick: handleClick,
+    className: "".concat(justAvatar ? styles.justAvatarUserMenu : styles.userMenu, " ").concat(classes.userMenu, " ").concat(!handleClick && styles.disableMenu)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.userMenuAvatar, " ").concat(classes.userMenuAvatar)
+  }, avatar), !justAvatar && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: styles.labelWithArrow
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(classes.userMenuTitle, " ").concat(styles.userMenuTitle),
+    withMarkdown: true
+  }, title), handleClick && MenuComponent && /*#__PURE__*/React.createElement(Arrow, {
+    className: "\n                ".concat(classes.userMenuArrow, "\n                ").concat(styles.userMenuArrow, "\n                ").concat(!!menuOpened && styles.opened, "\n              ")
+  })), subtitle)), MenuComponent);
+};
+UserMenu.propTypes = {
+  Arrow: iconType,
+  avatar: avatarType,
+  classes: classType,
+  dataTestId: string,
+  handleClick: func,
+  justAvatar: bool,
+  MenuComponent: node,
+  menuOpened: bool,
+  subtitle: node,
+  title: string
+};
+UserMenu.defaultProps = {
+  Arrow: ExpandMoreIcon
+};
+export default /*#__PURE__*/memo(UserMenu);

package/dist/esm/components/UTTopbar/components/UserMenu/styles.module.scss

@@ -0,0 +1,46 @@
+%userMenu {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+
+.userMenu {
+  @extend %userMenu;
+  min-width: 160px;
+}
+
+.justAvatarUserMenu {
+  @extend %userMenu;
+}
+
+.userMenuAvatar {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-transform: uppercase;
+}
+
+.userMenuArrow {
+  transition: transform 0.4s;
+}
+
+.userMenuTitle {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.opened {
+  transform: rotate(180deg);
+}
+
+.disableMenu {
+  cursor: default;
+  pointer-events: none;
+}
+
+.labelWithArrow {
+  align-items: center;
+  display: flex;
+}

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

@@ -0,0 +1,112 @@
+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, { useMemo } from 'react';
+import { array, bool, func, node, string, oneOfType, arrayOf, shape, object } from 'prop-types';
+import MenuIcon from '@material-ui/icons/Menu';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import UTLabel from '../UTLabel';
+import UTBreadcrumbs from '../UTBreadcrumbs';
+import { mergeClasses } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import UserMenu from './components/UserMenu';
+import Notifications from './components/Notifications';
+import { retrieveStyle } from './theme';
+import { classType, iconType, avatarType } from './types.js';
+import styles from './styles.module.scss';
+const UTTopbar = _ref => {
+  let {
+    Arrow,
+    avatar,
+    breadcrumbs,
+    breadcrumbsProps,
+    children,
+    classes: themeClasses,
+    classNames,
+    enableNotifications = false,
+    handleClick,
+    handleMenu,
+    isMobileOrTablet = false,
+    isMobileSize,
+    justAvatar,
+    MenuComponent,
+    menuOpened,
+    notificationIconActive,
+    notificationIconInactive,
+    separator = '/',
+    title,
+    titleProps,
+    userMenuDataTestId,
+    userSubtitle,
+    userTitle,
+    UTMenu
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const showSideBarMenu = handleMenu && (isMobileSize || isMobileOrTablet);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(showSideBarMenu && styles.containerWithMenu, " ").concat(classes.container)
+  }, showSideBarMenu && /*#__PURE__*/React.createElement(MenuIcon, {
+    onClick: handleMenu,
+    className: classes.menuIcon
+  }), isEmpty(breadcrumbs) ? /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: "".concat(isMobileSize && styles.mobileTitle)
+  }, titleProps), title) : isMobileSize ? /*#__PURE__*/React.createElement("div", {
+    className: styles.showLastBreadcrumbContainer
+  }, breadcrumbs.length > 1 && UTMenu, breadcrumbs.length > 1 && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.separator,
+    variant: "small",
+    weight: "medium",
+    colorTheme: "gray"
+  }, separator), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.lastBreadcrumb,
+    colorTheme: "gray",
+    weight: "medium"
+  }, breadcrumbs[breadcrumbs.length - 1].label)) : /*#__PURE__*/React.createElement(UTBreadcrumbs, _extends({
+    breadcrumbs: breadcrumbs
+  }, breadcrumbsProps)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.rightSection, " ").concat(showSideBarMenu && styles.rightSectionWithMenu)
+  }, children, enableNotifications && /*#__PURE__*/React.createElement(Notifications, {
+    classes: classes,
+    IconActive: notificationIconActive,
+    IconInactive: notificationIconInactive,
+    notifications: []
+  }), /*#__PURE__*/React.createElement(UserMenu, {
+    Arrow: Arrow,
+    avatar: avatar,
+    classes: classes,
+    dataTestId: userMenuDataTestId,
+    handleClick: handleClick,
+    justAvatar: justAvatar,
+    MenuComponent: MenuComponent,
+    menuOpened: menuOpened,
+    subtitle: userSubtitle,
+    title: userTitle
+  })));
+};
+UTTopbar.propTypes = {
+  Arrow: iconType,
+  avatar: avatarType,
+  breadcrumbs: array,
+  breadcrumbsProps: object,
+  classes: classType,
+  classNames: classType,
+  enableNotifications: bool,
+  handleClick: func,
+  handleMenu: func,
+  isMobileOrTablet: bool,
+  isMobileSize: bool,
+  justAvatar: bool,
+  MenuComponent: node,
+  menuOpened: bool,
+  notificationIconActive: iconType,
+  notificationIconInactive: iconType,
+  title: oneOfType([string, arrayOf(shape({
+    label: string,
+    route: string
+  }))]),
+  titleProps: object,
+  userMenuDataTestId: string,
+  userSubtitle: node,
+  userTitle: string,
+  UTMenu: node,
+  separator: string
+};
+export default WithTheme(retrieveStyle)(UTTopbar);

package/dist/esm/components/UTTopbar/styles.module.scss

@@ -0,0 +1,40 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.containerWithMenu {
+  justify-content: unset !important;
+}
+
+.mobileTitle {
+  display: none;
+}
+
+.rightSection {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+
+.rightSectionWithMenu {
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.showLastBreadcrumbContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+  max-width: fit-content;
+  width: 50%;
+}
+
+.lastBreadcrumb {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,69 @@
+import Colors from '../../scss/variables/colors.module.scss';
+export 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) || Colors.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
+    }
+  };
+};

package/dist/esm/components/UTTopbar/types.js

@@ -0,0 +1,17 @@
+import { array, elementType, func, object, oneOfType, shape, string } from 'prop-types';
+export const classType = shape({
+  container: string,
+  notifications: string,
+  title: string,
+  userMenu: string,
+  userMenuAvatar: string,
+  userMenuArrow: string
+});
+export const avatarType = oneOfType([string, elementType, func]);
+export const iconType = oneOfType([elementType, func]);
+export const menuPropsType = shape({
+  ItemComponent: elementType.isRequired,
+  items: array.isRequired,
+  itemComponentProps: object,
+  LastItem: elementType
+});

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

@@ -0,0 +1,56 @@
+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 } from 'react';
+import { func, string, bool } from 'prop-types';
+import Ripple from '../UTRipple';
+import styles from './styles.module.scss';
+const UTTouchableWithoutFeedback = _ref => {
+  let {
+    children,
+    className,
+    containerSetter,
+    dataTestId,
+    disabled = false,
+    keyName,
+    onClick,
+    onMouseDown,
+    withRipple = false,
+    ...props
+  } = _ref;
+  const [buttonRef, setButtonRef] = 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.createElement("div", _extends({}, props, {
+    "aria-disabled": disabled,
+    className: "".concat(styles.container, " ").concat(className, " ").concat(disabled && styles.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.createElement(Ripple, {
+    elem: buttonRef,
+    withRipple: withRipple && !disabled
+  }));
+};
+UTTouchableWithoutFeedback.propTypes = {
+  className: string,
+  containerSetter: func,
+  dataTestId: string,
+  disabled: bool,
+  keyName: string,
+  onClick: func,
+  onMouseDown: func,
+  withRipple: bool
+};
+export default UTTouchableWithoutFeedback;

package/dist/esm/components/UTTouchableWithoutFeedback/styles.module.scss

@@ -0,0 +1,13 @@
+.container {
+  align-items: flex-start;
+  border-width: 0;
+  cursor: pointer;
+  display: flex;
+  outline: 0;
+  position: relative;
+}
+
+.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/dist/esm/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 }`                                             |