@loja-integrada/admin-components 0.18.1 → 0.18.3

package/dist/admin-components.cjs.development.js

@@ -10,11 +10,11 @@ var reactTable = require('react-table');
 var ReactTextMask = _interopDefault(require('react-text-mask'));
 var Select$1 = require('react-select');
 var Select$1__default = _interopDefault(Select$1);
-var ReactModal = _interopDefault(require('react-modal'));
 var reactToastify = require('react-toastify');
 var injectStyle = require('react-toastify/dist/inject-style');
 var Tippy = _interopDefault(require('@tippyjs/react'));
 var styled = _interopDefault(require('styled-components'));
+var ReactModal = _interopDefault(require('react-modal'));
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -2597,846 +2597,859 @@ var TableComponent = function TableComponent(_ref2) {
 
 var Table = /*#__PURE__*/React__default.memo(TableComponent);
 
-var ItemWrapperClasses = "flex relative py-6 text-f7 leading-4 break-words no-underline";
-var ItemWrapperClassesContainerHover = "before:hover:block before:hover:absolute before:hover:h-full before:hover:w-5 lg:before:hover:w-8 before:hover:top-0 before:hover:-left-5 lg:before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-5 lg:after:hover:w-8 after:hover:top-0 after:hover:-right-5 lg:after:hover:-right-8 after:hover:bg-base-2";
+var alertTypes = {
+  success: {
+    "class": 'bg-success-light border-success',
+    icon: 'checkCircle',
+    iconClass: 'text-success'
+  },
+  warning: {
+    "class": 'bg-warning-light border-warning',
+    icon: 'exclamationTriangle',
+    iconClass: 'text-warning'
+  },
+  danger: {
+    "class": 'bg-danger-light border-danger',
+    icon: 'ban',
+    iconClass: 'text-danger'
+  },
+  info: {
+    "class": 'bg-base-1 border-inverted-2',
+    icon: 'infoCircle',
+    iconClass: 'text-inverted-2'
+  },
+  primary: {
+    "class": 'bg-primary-light border-primary',
+    icon: 'infoCircle',
+    iconClass: 'text-primary'
+  }
+};
 
-var DefaultWrapper = function DefaultWrapper(props) {
-  var children = props.children,
-      restProps = _objectWithoutPropertiesLoose(props, ["children"]);
+var AlertComponent = function AlertComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'info' : _ref$type,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      actions = _ref.actions,
+      _ref$showClose = _ref.showClose,
+      showClose = _ref$showClose === void 0 ? false : _ref$showClose,
+      onClose = _ref.onClose,
+      _ref$hideIcon = _ref.hideIcon,
+      hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+      customIcon = _ref.customIcon;
 
-  return React__default.createElement("div", Object.assign({}, restProps), children);
-};
+  var _useState = React.useState(isOpen),
+      alertIsOpen = _useState[0],
+      setAlertIsOpen = _useState[1];
 
-var TableListItemWrapper = function TableListItemWrapper(_ref) {
-  var _ref$Wrapper = _ref.Wrapper,
-      Wrapper = _ref$Wrapper === void 0 ? DefaultWrapper : _ref$Wrapper,
-      _ref$props = _ref.props,
-      props = _ref$props === void 0 ? {} : _ref$props,
-      children = _ref.children,
-      _ref$withHover = _ref.withHover,
-      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
-      _ref$isInsideContaine = _ref.isInsideContainer,
-      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
-  return React__default.createElement(Wrapper, Object.assign({
-    className: "table-item-wrapper " + ItemWrapperClasses + " " + (withHover ? "hover:bg-base-2 " + (isInsideContainer ? ItemWrapperClassesContainerHover : '') : '')
-  }, props), children);
-};
+  React.useEffect(function () {
+    setAlertIsOpen(isOpen);
+  }, [isOpen]);
 
-var TableListItem = function TableListItem(_ref) {
-  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
-      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt,
-      title = _ref.title,
-      description = _ref.description,
-      timestampTime = _ref.timestampTime,
-      timestampDate = _ref.timestampDate,
-      itemWrapper = _ref.itemWrapper,
-      itemWrapperProps = _ref.itemWrapperProps,
-      _ref$withHover = _ref.withHover,
-      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
-      _ref$isInsideContaine = _ref.isInsideContainer,
-      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine,
-      withIcon = _ref.withIcon,
-      append = _ref.append;
+  var handleOnClose = function handleOnClose() {
+    setAlertIsOpen(false);
+    onClose == null ? void 0 : onClose();
+  };
+
+  if (!alertIsOpen) return null;
   return React__default.createElement("div", {
-    className: "table-item border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
-  }, React__default.createElement(TableListItemWrapper, {
-    Wrapper: itemWrapper,
-    props: itemWrapperProps,
-    withHover: withHover,
-    isInsideContainer: isInsideContainer
-  }, withIcon && React__default.createElement("div", {
-    className: "table-item-icon flex items-center justify-center flex-none mr-4"
+    className: "alert border border-l-4 py-4 px-5 rounded w-full relative flex items-start sm:items-center " + alertTypes[type]["class"]
+  }, !hideIcon && React__default.createElement("div", {
+    className: "alert-icon hidden sm:block flex-shrink-0 mr-3 " + alertTypes[type].iconClass
+  }, React__default.createElement(Icon, {
+    icon: customIcon ? customIcon : alertTypes[type].icon,
+    size: 6
+  })), React__default.createElement("div", {
+    className: "flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0"
   }, React__default.createElement("div", {
-    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded " + (withIcon["class"] || '')
+    className: "flex flex-col justify-center min-w-0 break-words text-f6 tracking-4 leading-5 text-on-base"
+  }, React__default.createElement("span", {
+    className: "alert-title font-semibold"
+  }, title), subtitle && React__default.createElement("span", {
+    className: "alert-subtitle mt-1"
+  }, subtitle)), actions && React__default.createElement("div", {
+    className: "alert-actions flex flex-shrink-0 items-center flex-row sm:flex-row-reverse sm:space-x-reverse space-x-3 mt-3 sm:mt-0 sm:ml-5"
+  }, actions)), (showClose || onClose) && React__default.createElement("div", {
+    className: "alert-close flex-shrink-0 flex ml-5"
+  }, React__default.createElement("button", {
+    className: "p-2 -m-2 text-inverted-2 hover:text-inverted-1",
+    onClick: handleOnClose
   }, React__default.createElement(Icon, {
-    icon: withIcon.icon || 'minus',
+    icon: "close",
+    size: 4,
     block: true,
-    size: 5
-  }))), React__default.createElement("div", {
-    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
-  }, React__default.createElement("div", {
-    className: "table-item-title text-f6 font-semibold"
-  }, title), description && React__default.createElement("div", {
-    className: "table-item-description"
-  }, description)), (timestampTime || timestampDate || append) && React__default.createElement("div", {
-    className: "table-item-timestamp-append flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
-  }, timestampTime && React__default.createElement("div", {
-    className: "table-item-timestamp-time w-full"
-  }, timestampTime), timestampDate && React__default.createElement("div", {
-    className: "table-item-timestamp-date w-full hidden lg:block"
-  }, timestampDate), append && React__default.createElement("div", {
-    className: "table-item-append w-full"
-  }, append))));
+    className: "mt-px sm:mt-0"
+  }))));
 };
 
-var TableListItemLoading = function TableListItemLoading(_ref) {
-  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
-      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt;
+var Alert = /*#__PURE__*/React__default.memo(AlertComponent);
+
+var statusTypes = {
+  "default": 'bg-inverted-2',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  danger: 'bg-danger',
+  dangerLight: 'bg-danger-light'
+};
+
+var DescriptionComponent = function DescriptionComponent(_ref) {
+  var description = _ref.description,
+      inverted = _ref.inverted;
+  return description && React__default.createElement("span", {
+    className: "text-sm whitespace-normal break-words " + (inverted ? 'mr-2' : 'ml-2')
+  }, description) || null;
+};
+
+var StatusComponent = function StatusComponent(_ref2) {
+  var _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'default' : _ref2$type,
+      description = _ref2.description,
+      _ref2$inverted = _ref2.inverted,
+      inverted = _ref2$inverted === void 0 ? false : _ref2$inverted;
   return React__default.createElement("div", {
-    className: "table-item table-item-loading border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
-  }, React__default.createElement(TableListItemWrapper, null, React__default.createElement("div", {
-    className: "table-item-icon flex items-center justify-center flex-none mr-4"
-  }, React__default.createElement("div", {
-    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded"
-  }, React__default.createElement(LoadingPlaceholder, {
-    className: "w-full"
-  }))), React__default.createElement("div", {
-    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
-  }, React__default.createElement("div", {
-    className: "table-item-title text-f6 font-semibold"
-  }, React__default.createElement(LoadingPlaceholder, {
-    className: "w-2/3"
-  })), React__default.createElement("div", {
-    className: "table-item-description"
-  }, React__default.createElement(LoadingPlaceholder, {
-    className: "w-1/3"
-  }))), React__default.createElement("div", {
-    className: "table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
-  }, React__default.createElement("div", {
-    className: "table-item-timestamp-time w-full"
-  }, React__default.createElement(LoadingPlaceholder, {
-    className: "w-16"
-  })))));
+    className: "indicator-status inline-block whitespace-nowrap min-w-0"
+  }, inverted && React__default.createElement(DescriptionComponent, {
+    description: description,
+    inverted: inverted
+  }), React__default.createElement("span", {
+    className: "inline-block rounded-full " + statusTypes[type],
+    style: {
+      padding: '0.313rem'
+    }
+  }), !inverted && React__default.createElement(DescriptionComponent, {
+    description: description,
+    inverted: inverted
+  }));
 };
 
-var groupTitleMobileClass = "before:block before:absolute before:h-0 before:w-5 before:-top-px before:-left-5 before:border-t before:border-primary-bold before:border-opacity-10 after:block after:absolute after:h-0 after:w-5 after:-top-px after:-right-5 after:border-t after:border-primary-bold after:border-opacity-10";
+var Status = /*#__PURE__*/React__default.memo(StatusComponent);
 
-var TableListComponent = function TableListComponent(_ref) {
-  var _ref$className = _ref.className,
+var TagTypes = {
+  neutral: 'bg-base-1 border-inverted-2',
+  primary: 'bg-primary-light border-primary',
+  danger: 'bg-danger-light border-danger',
+  success: 'bg-success-light border-success',
+  warning: 'bg-warning-light border-warning'
+};
+
+var TagComponent = function TagComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'neutral' : _ref$type,
+      content = _ref.content,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      itemWrapper = _ref.itemWrapper,
-      _ref$items = _ref.items,
-      items = _ref$items === void 0 ? [] : _ref$items,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$empty = _ref.empty,
-      empty = _ref$empty === void 0 ? {
-    title: 'Nenhum registro encontrado'
-  } : _ref$empty,
-      _ref$withHover = _ref.withHover,
-      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
-      _ref$isInsideContaine = _ref.isInsideContainer,
-      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
-  var itemsMemoized = React__default.useMemo(function () {
-    var groups = items.reduce(function (groups, item) {
-      var groupTitle = item.timestampDate || item.timestampTime || 'no_title';
+      action = _ref.action;
+  return React__default.createElement("div", {
+    className: "tag " + (fullWidth ? 'flex' : 'inline-flex') + " items-center justify-between border rounded px-4 py-2 tracking-4 leading-6 text-f6 text-primary-bold " + TagTypes[type] + " " + className
+  }, React__default.createElement("div", {
+    className: "min-w-0 break-words -my-px"
+  }, content), action && React__default.createElement("div", {
+    className: "-my-px ml-3"
+  }, action));
+};
 
-      if (!groups[groupTitle]) {
-        groups[groupTitle] = [];
-      }
+var Tag = /*#__PURE__*/React__default.memo(TagComponent);
 
-      groups[groupTitle].push(item);
-      return groups;
-    }, {});
-    return Object.keys(groups).map(function (groupTitle) {
-      return {
-        title: groupTitle,
-        items: groups[groupTitle]
-      };
-    });
-  }, [items]);
-  return React__default.createElement("div", {
-    className: "table-list tracking-tight " + className
-  }, isLoading ? React__default.createElement("div", {
-    className: "table-list-loading"
-  }, React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null)) : !itemsMemoized || !itemsMemoized.length ? React__default.createElement("div", {
-    className: "table-list-empty flex flex-col items-center justify-center gap-5 min-h-[40vh] lg:min-h-[60vh] max-w-sm mx-auto px-4"
-  }, empty.illustration && React__default.createElement("div", {
-    className: "table-list-empty-illustration text-center"
-  }, empty.illustration), React__default.createElement("div", {
-    className: "table-list-empty-title text-center text-f4 font-semibold text-primary-bold leading-7"
-  }, empty.title), empty.subTitle && React__default.createElement("div", {
-    className: "table-list-empty-subtitle text-center text-f6 text-on-base-2 leading-6 -mt-1"
-  }, empty.subTitle), empty.action && React__default.createElement("div", {
-    className: "table-list-empty-action text-center"
-  }, empty.action)) : itemsMemoized.map(function (group, indexGroup) {
-    return React__default.createElement("div", {
-      key: "group-items-" + indexGroup,
-      className: "table-list-group"
-    }, group.title && group.title !== 'no_title' && React__default.createElement("div", {
-      className: "table-list-title relative lg:hidden border-primary-bold border-opacity-10 " + (indexGroup !== 0 ? "border-t " + (isInsideContainer ? groupTitleMobileClass : '') : '')
-    }, React__default.createElement("span", {
-      className: "text-f5 text-on-base-2 leading-4 break-words inline-block pt-6 pb-2"
-    }, group.title)), React__default.createElement("div", {
-      className: "group-items"
-    }, group.items.map(function (item, indexItem) {
-      return React__default.createElement(TableListItem, {
-        key: "group-item-" + indexItem,
-        forceBorderDesktop: indexItem === 0 && indexGroup !== 0,
-        title: item.title,
-        description: item.description,
-        timestampTime: item.timestampTime,
-        timestampDate: item.timestampDate,
-        itemWrapper: itemWrapper,
-        itemWrapperProps: item.itemWrapperProps,
-        withIcon: item.withIcon,
-        append: item.append,
-        withHover: withHover,
-        isInsideContainer: isInsideContainer
-      });
-    })));
-  }));
+var contextClass = {
+  success: 'bg-primary-light border-primary-dark',
+  error: 'bg-danger-light border-danger-dark',
+  info: 'bg-secondary-light border-secondary',
+  warning: 'bg-warning-light border-warning-dark',
+  "default": '',
+  dark: ''
+};
+var _progressClassName = {
+  success: '!bg-primary-dark',
+  error: '!bg-danger-dark',
+  info: '!bg-secondary-dark',
+  warning: '!bg-warning-dark',
+  "default": '',
+  dark: ''
 };
 
-var TableList = /*#__PURE__*/React__default.memo(TableListComponent);
+var Container = function Container() {
+  React.useEffect(function () {
+    injectStyle.injectStyle();
+  }, []);
+  return React__default.createElement(reactToastify.ToastContainer, {
+    toastClassName: function toastClassName(props) {
+      return "mb-3 border flex items-top justify-between p-3 pb-4 pr-4 relative rounded shadow-md " + contextClass[(props == null ? void 0 : props.type) || 'info'];
+    },
+    bodyClassName: function bodyClassName() {
+      return "max-w-[95%] text-sm text-on-base break-words";
+    },
+    progressClassName: function progressClassName(props) {
+      return (props == null ? void 0 : props.defaultClassName) + " !h-1 " + _progressClassName[(props == null ? void 0 : props.type) || 'info'];
+    },
+    closeButton: function closeButton(_ref) {
+      var closeToast = _ref.closeToast;
+      return React__default.createElement("div", {
+        className: "-mt-3 -mr-2 cursor-pointer text-on-base hover:text-on-base-2",
+        onClick: closeToast
+      }, React__default.createElement(Icon, {
+        icon: "close",
+        size: 3
+      }));
+    },
+    position: "top-right"
+  });
+};
 
-var activeStyles = function activeStyles(active) {
-  return active ? "border-primary font-semibold" : "border-transparent";
-}; // When using bold at hover, prevent text shift
+var notify = function notify(content, options) {
+  var type = (options == null ? void 0 : options.type) || 'info';
+  var autoClose = !(typeof (options == null ? void 0 : options.autoClose) === 'boolean') ? options == null ? void 0 : options.autoClose : (options == null ? void 0 : options.autoClose) && 5000;
+  reactToastify.toast(content, _extends({}, options, {
+    type: type,
+    autoClose: autoClose
+  }));
+};
 
+var Toast = {
+  Container: Container,
+  notify: notify
+};
 
-var boldFixStyle = "before:content-[attr(data-title)] before:block before:font-semibold before:h-0 before:overflow-hidden before:visibility-hidden";
-var disabledStyle = 'text-inverted-2 cursor-not-allowed';
-var TabsItem = function TabsItem(_ref) {
-  var id = _ref.id,
-      title = _ref.title,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onChange = _ref.onChange;
-  return React__default.createElement("button", {
-    id: "btnTab" + id,
-    className: "tabs-item " + (active ? 'tabs-item-active' : '') + " group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2 " + (disabled ? disabledStyle : ''),
-    onClick: function onClick() {
-      return onChange(id);
-    },
-    disabled: disabled
+var badgeTypes = {
+  neutral: 'bg-inverted-2',
+  primary: 'bg-primary-dark',
+  danger: 'bg-danger-dark',
+  success: 'bg-success-dark',
+  warning: 'bg-warning-dark'
+};
+var badgeSizes = {
+  "default": 'px-2 py-0.5 text-xs',
+  small: 'px-1.5 text-[0.70rem]'
+};
+
+var BadgeComponent = function BadgeComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'neutral' : _ref$type,
+      text = _ref.text,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      _ref$expanded = _ref.expanded,
+      expanded = _ref$expanded === void 0 ? false : _ref$expanded;
+  return React__default.createElement("div", {
+    className: "badge items-center justify-center rounded-full " + badgeTypes[type] + " " + badgeSizes[size] + " " + (expanded ? 'flex w-full' : 'inline-flex')
   }, React__default.createElement("span", {
-    className: "block tracking-4 text-f6 text-sm py-4 border-b-4 break-words " + (disabled ? '' : 'group-hover:font-semibold') + " " + activeStyles(active) + " " + boldFixStyle,
-    "data-title": title
-  }, title));
+    className: "tracking-4 font-semibold text-base-1"
+  }, text));
 };
 
-var TabsComponent = function TabsComponent(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      items = _ref.items,
-      activeItem = _ref.activeItem,
-      onChange = _ref.onChange;
+var Badge = /*#__PURE__*/React__default.memo(BadgeComponent);
 
-  var _useState = React.useState(activeItem),
-      currentActiveItem = _useState[0],
-      setCurrentActiveItem = _useState[1];
+var _templateObject;
 
-  React.useEffect(function () {
-    setCurrentActiveItem(activeItem);
-  }, [activeItem]);
+var TooltipComponent = function TooltipComponent(props) {
+  var _window;
 
-  var handleChange = function handleChange(id) {
-    if (id === currentActiveItem) return;
-    setCurrentActiveItem(id);
-    onChange == null ? void 0 : onChange(id);
-  };
+  var _React$useState = React__default.useState(false),
+      mounted = _React$useState[0],
+      setMounted = _React$useState[1];
 
-  if (!items || !Array.isArray(items)) return null;
-  return React__default.createElement("div", {
-    className: "tabs w-full flex flex-nowrap overflow-x-auto bg-base-1 border-b border-card-stroke " + className
-  }, items == null ? void 0 : items.map(function (item, index) {
-    if (!item.id) {
-      item.id = encodeURI(item.title);
+  var lazyPlugin = {
+    fn: function fn() {
+      return {
+        onMount: function onMount() {
+          return setMounted(true);
+        },
+        onHidden: function onHidden() {
+          return setMounted(false);
+        }
+      };
     }
+  };
 
-    return React__default.createElement(TabsItem, Object.assign({
-      key: "tab-item-" + index
-    }, item, {
-      onChange: handleChange,
-      active: currentActiveItem === item.id
-    }));
-  }));
-};
+  var computedProps = _extends({}, props);
 
-var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
+  computedProps.plugins = [lazyPlugin].concat(props.plugins || []);
 
-var TimelineItem = function TimelineItem(_ref) {
-  var item = _ref.item;
+  if (props.render) {
+    var render = props.render;
 
-  var _useState = React.useState(!item.toggle),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
+    computedProps.render = function () {
+      return mounted ? render.apply(void 0, arguments) : '';
+    };
+  } else {
+    computedProps.content = mounted ? props.content : '';
+  }
 
-  var iconBackgroundColor = item.iconBackgroundColor || "bg-inverted-2";
-  var icon = item.icon || 'minus';
-  var showToggle = item.toggle && item.description;
-  return React__default.createElement("li", {
-    className: "timeline-item relative mb-10 last:mb-0"
-  }, React__default.createElement("div", {
-    className: "timeline-badge absolute top-0 left-0 flex items-center justify-center text-base-1 w-8 h-8 -ml-3 rounded-full " + iconBackgroundColor
-  }, React__default.createElement(Icon, {
-    icon: icon,
-    size: 4
-  })), React__default.createElement("div", {
-    className: "ml-7 pt-px"
-  }, React__default.createElement("div", {
-    className: "timeline-title group py-1 text-f6 leading-6 tracking-4 text-inverted-1 font-semibold break-words " + (showToggle ? 'cursor-pointer' : ''),
-    onClick: function onClick() {
-      return showToggle && setIsOpen(function (isOpen) {
-        return !isOpen;
-      });
-    }
-  }, showToggle && React__default.createElement("button", {
-    className: "float-right p-1 -mt-px text-inverted-2 group-hover:text-inverted-1 focus:outline-none"
-  }, React__default.createElement(Icon, {
-    icon: "angleLeft",
-    size: 4,
-    className: "-mt-px transition-transform " + (isOpen ? 'rotate-90' : '-rotate-90'),
-    block: true
-  })), React__default.createElement("span", {
-    className: "inline break-words"
-  }, item.title)), item.timestamp && React__default.createElement("div", {
-    className: "timeline-timestamp mb-1 inline-flex items-center text-xs tracking-4 text-inverted-2 break-words"
-  }, React__default.createElement(Icon, {
-    icon: "clock",
-    size: 3,
-    className: "mr-1"
-  }), item.timestamp), item.description && React__default.createElement("div", {
-    className: "timeline-description mt-1 overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height " + (isOpen ? 'max-h-96' : 'max-h-0')
-  }, item.description)));
-};
+  if (typeof window === 'undefined') {
+    return React__default.createElement(React__default.Fragment, null, props.children);
+  }
 
-var TimelineComponent = function TimelineComponent(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      items = _ref.items,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$toggleItems = _ref.toggleItems,
-      toggleItems = _ref$toggleItems === void 0 ? true : _ref$toggleItems,
-      _ref$emptyTitle = _ref.emptyTitle,
-      emptyTitle = _ref$emptyTitle === void 0 ? 'Nenhum registro encontrado' : _ref$emptyTitle;
-  if (!isLoading && (!items || !Array.isArray(items))) return null;
-  return React__default.createElement("div", {
-    className: "w-full bg-base-1 border border-card-stroke rounded p-6 " + className
-  }, React__default.createElement("ul", {
-    className: "timeline relative list-none py-10 -mt-6 -mb-6 ml-2"
-  }, React__default.createElement("li", {
-    className: "timeline-line absolute -left-px top-0 bottom-0 bg-card-stroke ml-1",
-    style: {
-      width: '2px'
-    }
-  }), isLoading ? React__default.createElement(TimelineItem, {
-    item: {
-      title: React__default.createElement(LoadingPlaceholder, {
-        className: "mt-px pt-px w-1/2"
-      }),
-      icon: 'loading'
-    }
-  }) : (items == null ? void 0 : items.length) === 0 ? React__default.createElement(TimelineItem, {
-    item: {
-      title: emptyTitle,
-      icon: 'ban'
-    }
-  }) : items == null ? void 0 : items.map(function (item, index) {
-    var _item$toggle;
-
-    return React__default.createElement(TimelineItem, {
-      key: "timeline-item-" + index,
-      item: _extends({}, item, {
-        toggle: (_item$toggle = item.toggle) != null ? _item$toggle : toggleItems
-      })
-    });
-  })));
-};
-
-var Timeline = /*#__PURE__*/React__default.memo(TimelineComponent);
-
-var sizeClasses$1 = {
-  small: 'sm:max-w-[600px]',
-  "default": 'sm:max-w-4xl',
-  large: 'sm:max-w-6xl'
-};
-
-var ModalComponent = function ModalComponent(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-      _ref$preventClose = _ref.preventClose,
-      preventClose = _ref$preventClose === void 0 ? false : _ref$preventClose,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'default' : _ref$size,
-      headerTitle = _ref.headerTitle,
-      _ref$headerClose = _ref.headerClose,
-      headerClose = _ref$headerClose === void 0 ? 'Fechar' : _ref$headerClose,
-      footerActions = _ref.footerActions,
-      onClose = _ref.onClose,
-      _ref$closeTimeout = _ref.closeTimeout,
-      closeTimeout = _ref$closeTimeout === void 0 ? 200 : _ref$closeTimeout,
-      _parentSelector = _ref.parentSelector,
-      children = _ref.children;
-
-  var _useState = React.useState(false),
-      modalIsOpen = _useState[0],
-      setModalIsOpen = _useState[1];
-
-  var _useState2 = React.useState(false),
-      modalPreventClose = _useState2[0],
-      setModalPreventClose = _useState2[1];
-
-  React.useEffect(function () {
-    setModalIsOpen(isOpen);
-    setModalPreventClose(preventClose);
-  }, [isOpen, preventClose]);
-
-  var handleRequestCloseFunc = function handleRequestCloseFunc() {
-    setModalIsOpen(false);
-  };
-
-  var handleAfterCloseFunc = function handleAfterCloseFunc() {
-    onClose && onClose();
-  };
-
-  return React__default.createElement(ReactModal, {
-    isOpen: modalIsOpen,
-    onAfterClose: handleAfterCloseFunc,
-    onRequestClose: handleRequestCloseFunc,
-    closeTimeoutMS: closeTimeout,
-    ariaHideApp: false,
-    shouldCloseOnOverlayClick: !modalPreventClose,
-    shouldCloseOnEsc: !modalPreventClose,
-    overlayClassName: "justify-center items-end sm:items-center flex overflow-hidden w-screen h-full fixed inset-0 z-50 outline-none bg-black bg-opacity-60 pt-16 sm:p-3 focus:outline-none transition " + (modalIsOpen ? 'opacity-100' : 'opacity-0'),
-    className: "relative max-h-full p-8 sm:p-10 rounded-t-xl sm:rounded-xl shadow-lg flex flex-col w-full bg-base-1 outline-none focus:outline-none border border-card-stroke break-words " + sizeClasses$1[size] + " " + className,
-    bodyOpenClassName: 'ReactModal__Body--open overflow-hidden',
-    testId: 'modal-component',
-    parentSelector: function parentSelector() {
-      return _parentSelector ? _parentSelector : document.body;
-    },
-    contentElement: function contentElement(props, children) {
-      return React__default.createElement("div", Object.assign({}, props), React__default.createElement("div", {
-        className: "ReactModal__header w-full flex justify-between items-start"
-      }, React__default.createElement("span", {
-        className: "min-w-0 text-inverted-2 text-xs font-semibold uppercase break-words " + (headerTitle ? 'pb-3' : '')
-      }, headerTitle), React__default.createElement("button", {
-        type: "button",
-        id: "btnCloseModal",
-        className: (preventClose ? 'hidden' : 'flex') + " items-center p-2 pb-1 -mr-2 -mt-3 text-sm font-semibold text-inverted-2 hover:text-inverted-1",
-        onClick: handleRequestCloseFunc
-      }, headerClose !== false && React__default.createElement("span", {
-        className: "pr-2"
-      }, headerClose), React__default.createElement(Icon, {
-        icon: "close",
-        size: 4
-      }))), React__default.createElement("div", {
-        className: "ReactModal__innerContent flex-auto overflow-x-auto min-w-0 break-words overscroll-none -mx-8 sm:-mx-10 px-8 sm:px-10"
-      }, children), footerActions && React__default.createElement("div", {
-        className: "ReactModal__footer pt-5"
-      }, footerActions));
-    }
-  }, children);
+  return React__default.createElement(StyledTooltipComponent, Object.assign({}, computedProps, {
+    appendTo: (props == null ? void 0 : props.appendTo) || 'parent',
+    hideOnClick: (props == null ? void 0 : props.hideOnClick) || false,
+    trigger: (props == null ? void 0 : props.trigger) || 'mouseenter',
+    touch: (props == null ? void 0 : props.touch) || ['hold', 400],
+    duration: (props == null ? void 0 : props.duration) || 150,
+    placement: ((_window = window) == null ? void 0 : _window.innerWidth) < 1024 ? 'top' : (props == null ? void 0 : props.placement) || 'top',
+    interactive: (props == null ? void 0 : props.interactive) || false,
+    theme: (props == null ? void 0 : props.theme) || 'dark'
+  }));
 };
 
-var Modal = /*#__PURE__*/React__default.memo(ModalComponent);
-
-var backgroundShadowEffect = ['[background:linear-gradient(#FFFFFF_33%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),#FFFFFF_66%)_0_100%,radial-gradient(farthest-side_at_50%_0,rgba(156,156,156,0.5),rgba(0,0,0,0)),radial-gradient(farthest-side_at_50%_100%,_rgba(156,156,156,0.5),rgba(0,0,0,0))_0_100%]', '[background-size:100%_15px,100%_15px,100%_5px,100%_5px]', '[background-attachment:local,local,scroll,scroll]', '[background-repeat:no-repeat]', '[background-color:#FFFFFF]', '[&_.form-group_.bg-base-1]:bg-transparent'];
-var SidebarFixedComponent = function SidebarFixedComponent(_ref) {
-  var children = _ref.children,
-      footerActions = _ref.footerActions,
-      _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-      onClose = _ref.onClose,
-      helpLink = _ref.helpLink;
-
-  var _useState = React.useState(false),
-      sidebarIsOpen = _useState[0],
-      setSidebarIsOpen = _useState[1];
-
-  React.useEffect(function () {
-    setSidebarIsOpen(isOpen);
-  }, [isOpen]);
-
-  var handleRequestCloseFunc = function handleRequestCloseFunc() {
-    setSidebarIsOpen(false);
-    onClose == null ? void 0 : onClose();
-  };
-
-  return React__default.createElement("div", {
-    className: "sidebar-fixed fixed z-40 lg:z-20 right-0 bottom-0 w-full h-full transition-all overflow-x-hidden " + (sidebarIsOpen ? 'pointer-events-auto opacity-100' : 'opacity-0 pointer-events-none')
-  }, React__default.createElement("div", {
-    className: "sidebar-fixed-backdrop fixed inset-0 h-full w-full bg-black-alpha -z-1",
-    onClick: handleRequestCloseFunc
-  }), React__default.createElement("div", {
-    className: "sidebar-fixed-inner mt-10 sm:mt-0 top-0 bottom-0 right-0 absolute flex flex-col justify-between bg-base-1 transform transition-transform shadow h-auto w-full sm:max-w-[410px] sm:ml-16 rounded-t-lg sm:rounded-none " + (sidebarIsOpen ? 'translate-x-0' : 'translate-x-10')
-  }, React__default.createElement("div", {
-    className: "sidebar-fixed-header flex justify-between items-center p-3 lg:px-5 text-inverted-2"
-  }, React__default.createElement("button", {
-    className: "sidebar-fixed-close p-2 hover:text-primary transition-colors",
-    onClick: handleRequestCloseFunc
-  }, React__default.createElement(Icon, {
-    icon: "close",
-    block: true,
-    size: 4
-  })), helpLink && React__default.createElement("a", {
-    className: "sidebar-fixed-help p-2 hover:text-primary transition-colors",
-    href: helpLink,
-    target: "_blank",
-    rel: "noreferrer"
-  }, React__default.createElement(Icon, {
-    icon: "questionCircle",
-    block: true,
-    size: 4
-  }))), React__default.createElement("div", {
-    className: "sidebar-fixed-content flex-1 flex-grow w-full overflow-auto overscroll-none px-5 lg:px-7 break-words " + backgroundShadowEffect.join(' ')
-  }, children), footerActions && React__default.createElement("div", {
-    className: "sidebar-fixed-footer flex justify-between items-center p-5 lg:p-7 lg:pt-6"
-  }, footerActions)));
+var theme = {
+  light: {
+    background: '#fff',
+    color: '#371E56'
+  },
+  dark: {
+    background: '#371E56',
+    color: '#fff'
+  }
 };
-var SidebarFixed = /*#__PURE__*/React__default.memo(SidebarFixedComponent);
+var StyledTooltipComponent = /*#__PURE__*/styled(Tippy)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --bg-color: ", ";\n  position: relative;\n  background-color: var(--bg-color);\n  color: ", ";\n  border-radius: 3px;\n  font-size: 12px;\n  letter-spacing: -0.4px;\n  line-height: 1.4;\n  outline: 0;\n  transition-property: transform, visibility, opacity;\n\n  &[data-animation='fade'][data-state='hidden'] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  &[data-placement^='top'] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  &[data-placement^='top'] > .tippy-arrow:before {\n    bottom: -7px;\n    left: 0;\n    border-width: 8px 8px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow {\n    top: 0;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow:before {\n    top: -7px;\n    left: 0;\n    border-width: 0 8px 8px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow {\n    right: 0;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow:before {\n    border-width: 8px 0 8px 8px;\n    border-left-color: initial;\n    right: -7px;\n    transform-origin: center left;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow {\n    left: 0;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow:before {\n    left: -7px;\n    border-width: 8px 8px 8px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  &[data-inertia][data-state='visible'] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-arrow {\n    width: 15px;\n    height: 15px;\n    color: var(--bg-color);\n  }\n\n  .tippy-arrow:before {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 12px 8px;\n    z-index: 1;\n  }\n"])), function (props) {
+  return theme[props.theme].background;
+}, function (props) {
+  return theme[props.theme].color;
+});
+var Tooltip = /*#__PURE__*/React__default.memo(TooltipComponent);
 
-var alertTypes = {
-  success: {
+var InformationBoxTypes = {
+  tip: {
+    title: 'Dica!',
     "class": 'bg-success-light border-success',
-    icon: 'checkCircle',
+    icon: 'lightbulb',
     iconClass: 'text-success'
   },
   warning: {
+    title: 'Atenção!',
     "class": 'bg-warning-light border-warning',
     icon: 'exclamationTriangle',
     iconClass: 'text-warning'
   },
   danger: {
+    title: 'Cuidado!',
     "class": 'bg-danger-light border-danger',
     icon: 'ban',
     iconClass: 'text-danger'
-  },
-  info: {
-    "class": 'bg-base-1 border-inverted-2',
-    icon: 'infoCircle',
-    iconClass: 'text-inverted-2'
-  },
-  primary: {
-    "class": 'bg-primary-light border-primary',
-    icon: 'infoCircle',
-    iconClass: 'text-primary'
   }
 };
 
-var AlertComponent = function AlertComponent(_ref) {
+var InformationBoxComponent = function InformationBoxComponent(_ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'info' : _ref$type,
-      _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      actions = _ref.actions,
-      _ref$showClose = _ref.showClose,
-      showClose = _ref$showClose === void 0 ? false : _ref$showClose,
-      onClose = _ref.onClose,
-      _ref$hideIcon = _ref.hideIcon,
-      hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
-      customIcon = _ref.customIcon;
-
-  var _useState = React.useState(isOpen),
-      alertIsOpen = _useState[0],
-      setAlertIsOpen = _useState[1];
-
-  React.useEffect(function () {
-    setAlertIsOpen(isOpen);
-  }, [isOpen]);
-
-  var handleOnClose = function handleOnClose() {
-    setAlertIsOpen(false);
-    onClose == null ? void 0 : onClose();
-  };
-
-  if (!alertIsOpen) return null;
+      type = _ref$type === void 0 ? 'tip' : _ref$type,
+      subtitle = _ref.subtitle;
   return React__default.createElement("div", {
-    className: "alert border border-l-4 py-4 px-5 rounded w-full relative flex items-start sm:items-center " + alertTypes[type]["class"]
-  }, !hideIcon && React__default.createElement("div", {
-    className: "alert-icon hidden sm:block flex-shrink-0 mr-3 " + alertTypes[type].iconClass
+    className: "InformationBox pl-4 pr-6 pt-5 pb-6 rounded w-full relative flex items-start mb-3 " + InformationBoxTypes[type]["class"]
+  }, React__default.createElement("div", {
+    className: "w-10 h-10 flex justify-center items-center flex-shrink-0 rounded-full mr-3 bg-base-1"
   }, React__default.createElement(Icon, {
-    icon: customIcon ? customIcon : alertTypes[type].icon,
-    size: 6
+    icon: InformationBoxTypes[type].icon,
+    className: "InformationBox-icon " + InformationBoxTypes[type].iconClass,
+    size: 4
   })), React__default.createElement("div", {
-    className: "flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0"
+    className: "flex-grow flex flex-col sm:flex-row items-start justify-between min-w-0"
   }, React__default.createElement("div", {
-    className: "flex flex-col justify-center min-w-0 break-words text-f6 tracking-4 leading-5 text-on-base"
+    className: "flex flex-col justify-center min-w-0 break-words tracking-4 leading-6 text-on-base"
   }, React__default.createElement("span", {
-    className: "alert-title font-semibold"
-  }, title), subtitle && React__default.createElement("span", {
-    className: "alert-subtitle mt-1"
-  }, subtitle)), actions && React__default.createElement("div", {
-    className: "alert-actions flex flex-shrink-0 items-center flex-row sm:flex-row-reverse sm:space-x-reverse space-x-3 mt-3 sm:mt-0 sm:ml-5"
-  }, actions)), (showClose || onClose) && React__default.createElement("div", {
-    className: "alert-close flex-shrink-0 flex ml-5"
-  }, React__default.createElement("button", {
-    className: "p-2 -m-2 text-inverted-2 hover:text-inverted-1",
-    onClick: handleOnClose
-  }, React__default.createElement(Icon, {
-    icon: "close",
-    size: 4,
-    block: true,
-    className: "mt-px sm:mt-0"
-  }))));
+    className: "InformationBox-title text-f5 font-bold " + InformationBoxTypes[type].iconClass
+  }, InformationBoxTypes[type].title), subtitle && React__default.createElement("span", {
+    className: "InformationBox-subtitle text-f6 font-regular mt-1"
+  }, subtitle))));
 };
 
-var Alert = /*#__PURE__*/React__default.memo(AlertComponent);
+var InformationBox = /*#__PURE__*/React__default.memo(InformationBoxComponent);
 
-var statusTypes = {
-  "default": 'bg-inverted-2',
-  success: 'bg-success',
-  warning: 'bg-warning',
-  danger: 'bg-danger',
-  dangerLight: 'bg-danger-light'
+var ItemWrapperClasses = "flex relative py-6 text-f7 leading-4 break-words no-underline";
+var ItemWrapperClassesContainerHover = "before:hover:block before:hover:absolute before:hover:h-full before:hover:w-5 lg:before:hover:w-8 before:hover:top-0 before:hover:-left-5 lg:before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-5 lg:after:hover:w-8 after:hover:top-0 after:hover:-right-5 lg:after:hover:-right-8 after:hover:bg-base-2";
+
+var DefaultWrapper = function DefaultWrapper(props) {
+  var children = props.children,
+      restProps = _objectWithoutPropertiesLoose(props, ["children"]);
+
+  return React__default.createElement("div", Object.assign({}, restProps), children);
 };
 
-var DescriptionComponent = function DescriptionComponent(_ref) {
-  var description = _ref.description,
-      inverted = _ref.inverted;
-  return description && React__default.createElement("span", {
-    className: "text-sm whitespace-normal break-words " + (inverted ? 'mr-2' : 'ml-2')
-  }, description) || null;
+var TableListItemWrapper = function TableListItemWrapper(_ref) {
+  var _ref$Wrapper = _ref.Wrapper,
+      Wrapper = _ref$Wrapper === void 0 ? DefaultWrapper : _ref$Wrapper,
+      _ref$props = _ref.props,
+      props = _ref$props === void 0 ? {} : _ref$props,
+      children = _ref.children,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
+  return React__default.createElement(Wrapper, Object.assign({
+    className: "table-item-wrapper " + ItemWrapperClasses + " " + (withHover ? "hover:bg-base-2 " + (isInsideContainer ? ItemWrapperClassesContainerHover : '') : '')
+  }, props), children);
 };
 
-var StatusComponent = function StatusComponent(_ref2) {
-  var _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'default' : _ref2$type,
-      description = _ref2.description,
-      _ref2$inverted = _ref2.inverted,
-      inverted = _ref2$inverted === void 0 ? false : _ref2$inverted;
+var TableListItem = function TableListItem(_ref) {
+  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
+      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt,
+      title = _ref.title,
+      description = _ref.description,
+      timestampTime = _ref.timestampTime,
+      timestampDate = _ref.timestampDate,
+      itemWrapper = _ref.itemWrapper,
+      itemWrapperProps = _ref.itemWrapperProps,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine,
+      withIcon = _ref.withIcon,
+      append = _ref.append;
   return React__default.createElement("div", {
-    className: "indicator-status inline-block whitespace-nowrap min-w-0"
-  }, inverted && React__default.createElement(DescriptionComponent, {
-    description: description,
-    inverted: inverted
-  }), React__default.createElement("span", {
-    className: "inline-block rounded-full " + statusTypes[type],
-    style: {
-      padding: '0.313rem'
-    }
-  }), !inverted && React__default.createElement(DescriptionComponent, {
-    description: description,
-    inverted: inverted
-  }));
+    className: "table-item border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
+  }, React__default.createElement(TableListItemWrapper, {
+    Wrapper: itemWrapper,
+    props: itemWrapperProps,
+    withHover: withHover,
+    isInsideContainer: isInsideContainer
+  }, withIcon && React__default.createElement("div", {
+    className: "table-item-icon flex items-center justify-center flex-none mr-4"
+  }, React__default.createElement("div", {
+    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded " + (withIcon["class"] || '')
+  }, withIcon.tooltip ? React__default.createElement(Tooltip, {
+    content: withIcon.tooltip.message,
+    placement: withIcon.tooltip.placement
+  }, React__default.createElement("span", null, React__default.createElement(Icon, {
+    icon: withIcon.icon || 'minus',
+    block: true,
+    size: 5
+  }))) : React__default.createElement(Icon, {
+    icon: withIcon.icon || 'minus',
+    block: true,
+    size: 5
+  }))), React__default.createElement("div", {
+    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
+  }, React__default.createElement("div", {
+    className: "table-item-title text-f6 font-semibold"
+  }, title), description && React__default.createElement("div", {
+    className: "table-item-description"
+  }, description)), (timestampTime || timestampDate || append) && React__default.createElement("div", {
+    className: "table-item-timestamp-append flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
+  }, timestampTime && React__default.createElement("div", {
+    className: "table-item-timestamp-time w-full"
+  }, timestampTime), timestampDate && React__default.createElement("div", {
+    className: "table-item-timestamp-date w-full hidden lg:block"
+  }, timestampDate), append && React__default.createElement("div", {
+    className: "table-item-append w-full"
+  }, append))));
 };
 
-var Status = /*#__PURE__*/React__default.memo(StatusComponent);
-
-var TagTypes = {
-  neutral: 'bg-base-1 border-inverted-2',
-  primary: 'bg-primary-light border-primary',
-  danger: 'bg-danger-light border-danger',
-  success: 'bg-success-light border-success',
-  warning: 'bg-warning-light border-warning'
+var TableListItemLoading = function TableListItemLoading(_ref) {
+  var _ref$forceBorderDeskt = _ref.forceBorderDesktop,
+      forceBorderDesktop = _ref$forceBorderDeskt === void 0 ? false : _ref$forceBorderDeskt;
+  return React__default.createElement("div", {
+    className: "table-item table-item-loading border-primary-bold border-opacity-10 border-t first:border-t-0 " + (forceBorderDesktop ? 'lg:first:border-t' : '')
+  }, React__default.createElement(TableListItemWrapper, null, React__default.createElement("div", {
+    className: "table-item-icon flex items-center justify-center flex-none mr-4"
+  }, React__default.createElement("div", {
+    className: "table-item-icon-background h-8 w-8 flex items-center justify-center rounded"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-full"
+  }))), React__default.createElement("div", {
+    className: "table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full"
+  }, React__default.createElement("div", {
+    className: "table-item-title text-f6 font-semibold"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-2/3"
+  })), React__default.createElement("div", {
+    className: "table-item-description"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-1/3"
+  }))), React__default.createElement("div", {
+    className: "table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right"
+  }, React__default.createElement("div", {
+    className: "table-item-timestamp-time w-full"
+  }, React__default.createElement(LoadingPlaceholder, {
+    className: "w-16"
+  })))));
 };
 
-var TagComponent = function TagComponent(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'neutral' : _ref$type,
-      content = _ref.content,
-      _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-      _ref$className = _ref.className,
+var groupTitleMobileClass = "before:block before:absolute before:h-0 before:w-5 before:-top-px before:-left-5 before:border-t before:border-primary-bold before:border-opacity-10 after:block after:absolute after:h-0 after:w-5 after:-top-px after:-right-5 after:border-t after:border-primary-bold after:border-opacity-10";
+
+var TableListComponent = function TableListComponent(_ref) {
+  var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      action = _ref.action;
+      itemWrapper = _ref.itemWrapper,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$empty = _ref.empty,
+      empty = _ref$empty === void 0 ? {
+    title: 'Nenhum registro encontrado'
+  } : _ref$empty,
+      _ref$withHover = _ref.withHover,
+      withHover = _ref$withHover === void 0 ? false : _ref$withHover,
+      _ref$isInsideContaine = _ref.isInsideContainer,
+      isInsideContainer = _ref$isInsideContaine === void 0 ? false : _ref$isInsideContaine;
+  var itemsMemoized = React__default.useMemo(function () {
+    var groups = items.reduce(function (groups, item) {
+      var groupTitle = item.timestampDate || item.timestampTime || 'no_title';
+
+      if (!groups[groupTitle]) {
+        groups[groupTitle] = [];
+      }
+
+      groups[groupTitle].push(item);
+      return groups;
+    }, {});
+    return Object.keys(groups).map(function (groupTitle) {
+      return {
+        title: groupTitle,
+        items: groups[groupTitle]
+      };
+    });
+  }, [items]);
   return React__default.createElement("div", {
-    className: "tag " + (fullWidth ? 'flex' : 'inline-flex') + " items-center justify-between border rounded px-4 py-2 tracking-4 leading-6 text-f6 text-primary-bold " + TagTypes[type] + " " + className
-  }, React__default.createElement("div", {
-    className: "min-w-0 break-words -my-px"
-  }, content), action && React__default.createElement("div", {
-    className: "-my-px ml-3"
-  }, action));
+    className: "table-list tracking-tight " + className
+  }, isLoading ? React__default.createElement("div", {
+    className: "table-list-loading"
+  }, React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null), React__default.createElement(TableListItemLoading, null)) : !itemsMemoized || !itemsMemoized.length ? React__default.createElement("div", {
+    className: "table-list-empty flex flex-col items-center justify-center gap-5 min-h-[40vh] lg:min-h-[60vh] max-w-sm mx-auto px-4"
+  }, empty.illustration && React__default.createElement("div", {
+    className: "table-list-empty-illustration text-center"
+  }, empty.illustration), React__default.createElement("div", {
+    className: "table-list-empty-title text-center text-f4 font-semibold text-primary-bold leading-7"
+  }, empty.title), empty.subTitle && React__default.createElement("div", {
+    className: "table-list-empty-subtitle text-center text-f6 text-on-base-2 leading-6 -mt-1"
+  }, empty.subTitle), empty.action && React__default.createElement("div", {
+    className: "table-list-empty-action text-center"
+  }, empty.action)) : itemsMemoized.map(function (group, indexGroup) {
+    return React__default.createElement("div", {
+      key: "group-items-" + indexGroup,
+      className: "table-list-group"
+    }, group.title && group.title !== 'no_title' && React__default.createElement("div", {
+      className: "table-list-title relative lg:hidden border-primary-bold border-opacity-10 " + (indexGroup !== 0 ? "border-t " + (isInsideContainer ? groupTitleMobileClass : '') : '')
+    }, React__default.createElement("span", {
+      className: "text-f5 text-on-base-2 leading-4 break-words inline-block pt-6 pb-2"
+    }, group.title)), React__default.createElement("div", {
+      className: "group-items"
+    }, group.items.map(function (item, indexItem) {
+      return React__default.createElement(TableListItem, {
+        key: "group-item-" + indexItem,
+        forceBorderDesktop: indexItem === 0 && indexGroup !== 0,
+        title: item.title,
+        description: item.description,
+        timestampTime: item.timestampTime,
+        timestampDate: item.timestampDate,
+        itemWrapper: itemWrapper,
+        itemWrapperProps: item.itemWrapperProps,
+        withIcon: item.withIcon,
+        append: item.append,
+        withHover: withHover,
+        isInsideContainer: isInsideContainer
+      });
+    })));
+  }));
 };
 
-var Tag = /*#__PURE__*/React__default.memo(TagComponent);
+var TableList = /*#__PURE__*/React__default.memo(TableListComponent);
 
-var contextClass = {
-  success: 'bg-primary-light border-primary-dark',
-  error: 'bg-danger-light border-danger-dark',
-  info: 'bg-secondary-light border-secondary',
-  warning: 'bg-warning-light border-warning-dark',
-  "default": '',
-  dark: ''
-};
-var _progressClassName = {
-  success: '!bg-primary-dark',
-  error: '!bg-danger-dark',
-  info: '!bg-secondary-dark',
-  warning: '!bg-warning-dark',
-  "default": '',
-  dark: ''
+var activeStyles = function activeStyles(active) {
+  return active ? "border-primary font-semibold" : "border-transparent";
+}; // When using bold at hover, prevent text shift
+
+
+var boldFixStyle = "before:content-[attr(data-title)] before:block before:font-semibold before:h-0 before:overflow-hidden before:visibility-hidden";
+var disabledStyle = 'text-inverted-2 cursor-not-allowed';
+var TabsItem = function TabsItem(_ref) {
+  var id = _ref.id,
+      title = _ref.title,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange;
+  return React__default.createElement("button", {
+    id: "btnTab" + id,
+    className: "tabs-item " + (active ? 'tabs-item-active' : '') + " group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2 " + (disabled ? disabledStyle : ''),
+    onClick: function onClick() {
+      return onChange(id);
+    },
+    disabled: disabled
+  }, React__default.createElement("span", {
+    className: "block tracking-4 text-f6 text-sm py-4 border-b-4 break-words " + (disabled ? '' : 'group-hover:font-semibold') + " " + activeStyles(active) + " " + boldFixStyle,
+    "data-title": title
+  }, title));
 };
 
-var Container = function Container() {
+var TabsComponent = function TabsComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      items = _ref.items,
+      activeItem = _ref.activeItem,
+      onChange = _ref.onChange;
+
+  var _useState = React.useState(activeItem),
+      currentActiveItem = _useState[0],
+      setCurrentActiveItem = _useState[1];
+
   React.useEffect(function () {
-    injectStyle.injectStyle();
-  }, []);
-  return React__default.createElement(reactToastify.ToastContainer, {
-    toastClassName: function toastClassName(props) {
-      return "mb-3 border flex items-top justify-between p-3 pb-4 pr-4 relative rounded shadow-md " + contextClass[(props == null ? void 0 : props.type) || 'info'];
-    },
-    bodyClassName: function bodyClassName() {
-      return "max-w-[95%] text-sm text-on-base break-words";
-    },
-    progressClassName: function progressClassName(props) {
-      return (props == null ? void 0 : props.defaultClassName) + " !h-1 " + _progressClassName[(props == null ? void 0 : props.type) || 'info'];
-    },
-    closeButton: function closeButton(_ref) {
-      var closeToast = _ref.closeToast;
-      return React__default.createElement("div", {
-        className: "-mt-3 -mr-2 cursor-pointer text-on-base hover:text-on-base-2",
-        onClick: closeToast
-      }, React__default.createElement(Icon, {
-        icon: "close",
-        size: 3
-      }));
-    },
-    position: "top-right"
-  });
+    setCurrentActiveItem(activeItem);
+  }, [activeItem]);
+
+  var handleChange = function handleChange(id) {
+    if (id === currentActiveItem) return;
+    setCurrentActiveItem(id);
+    onChange == null ? void 0 : onChange(id);
+  };
+
+  if (!items || !Array.isArray(items)) return null;
+  return React__default.createElement("div", {
+    className: "tabs w-full flex flex-nowrap overflow-x-auto bg-base-1 border-b border-card-stroke " + className
+  }, items == null ? void 0 : items.map(function (item, index) {
+    if (!item.id) {
+      item.id = encodeURI(item.title);
+    }
+
+    return React__default.createElement(TabsItem, Object.assign({
+      key: "tab-item-" + index
+    }, item, {
+      onChange: handleChange,
+      active: currentActiveItem === item.id
+    }));
+  }));
 };
 
-var notify = function notify(content, options) {
-  var type = (options == null ? void 0 : options.type) || 'info';
-  var autoClose = !(typeof (options == null ? void 0 : options.autoClose) === 'boolean') ? options == null ? void 0 : options.autoClose : (options == null ? void 0 : options.autoClose) && 5000;
-  reactToastify.toast(content, _extends({}, options, {
-    type: type,
-    autoClose: autoClose
-  }));
+var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
+
+var TimelineItem = function TimelineItem(_ref) {
+  var item = _ref.item;
+
+  var _useState = React.useState(!item.toggle),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
+
+  var iconBackgroundColor = item.iconBackgroundColor || "bg-inverted-2";
+  var iconColor = item.iconColor || "text-base-1";
+  var icon = item.icon || 'minus';
+  var showToggle = item.toggle && item.description;
+  return React__default.createElement("li", {
+    className: "timeline-item relative mb-10 last:mb-0"
+  }, React__default.createElement("div", {
+    className: "timeline-badge absolute top-0 left-0 flex items-center justify-center w-8 h-8 -ml-3 rounded-full " + iconBackgroundColor
+  }, React__default.createElement(Icon, {
+    icon: icon,
+    size: 4,
+    className: iconColor
+  })), React__default.createElement("div", {
+    className: "ml-7 pt-px"
+  }, React__default.createElement("div", {
+    className: "timeline-title group py-1 text-f6 leading-6 tracking-4 text-inverted-1 font-semibold break-words " + (showToggle ? 'cursor-pointer' : ''),
+    onClick: function onClick() {
+      return showToggle && setIsOpen(function (isOpen) {
+        return !isOpen;
+      });
+    }
+  }, showToggle && React__default.createElement("button", {
+    className: "float-right p-1 -mt-px text-inverted-2 group-hover:text-inverted-1 focus:outline-none"
+  }, React__default.createElement(Icon, {
+    icon: "angleLeft",
+    size: 4,
+    className: "-mt-px transition-transform " + (isOpen ? 'rotate-90' : '-rotate-90'),
+    block: true
+  })), React__default.createElement("span", {
+    className: "inline break-words"
+  }, item.title)), item.timestamp && React__default.createElement("div", {
+    className: "timeline-timestamp mb-1 inline-flex items-center text-xs tracking-4 text-inverted-2 break-words"
+  }, React__default.createElement(Icon, {
+    icon: "clock",
+    size: 3,
+    className: "mr-1"
+  }), item.timestamp), item.description && React__default.createElement("div", {
+    className: "timeline-description mt-1 overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height " + (isOpen ? 'max-h-96' : 'max-h-0')
+  }, item.description)));
+};
+
+var TimelineComponent = function TimelineComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      items = _ref.items,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$toggleItems = _ref.toggleItems,
+      toggleItems = _ref$toggleItems === void 0 ? true : _ref$toggleItems,
+      _ref$emptyTitle = _ref.emptyTitle,
+      emptyTitle = _ref$emptyTitle === void 0 ? 'Nenhum registro encontrado' : _ref$emptyTitle;
+  if (!isLoading && (!items || !Array.isArray(items))) return null;
+  return React__default.createElement("div", {
+    className: "w-full bg-base-1 border border-card-stroke rounded p-6 " + className
+  }, React__default.createElement("ul", {
+    className: "timeline relative list-none py-10 -mt-6 -mb-6 ml-2"
+  }, React__default.createElement("li", {
+    className: "timeline-line absolute -left-px top-0 bottom-0 bg-card-stroke ml-1",
+    style: {
+      width: '2px'
+    }
+  }), isLoading ? React__default.createElement(TimelineItem, {
+    item: {
+      title: React__default.createElement(LoadingPlaceholder, {
+        className: "mt-px pt-px w-1/2"
+      }),
+      icon: 'loading'
+    }
+  }) : (items == null ? void 0 : items.length) === 0 ? React__default.createElement(TimelineItem, {
+    item: {
+      title: emptyTitle,
+      icon: 'ban'
+    }
+  }) : items == null ? void 0 : items.map(function (item, index) {
+    var _item$toggle;
+
+    return React__default.createElement(TimelineItem, {
+      key: "timeline-item-" + index,
+      item: _extends({}, item, {
+        toggle: (_item$toggle = item.toggle) != null ? _item$toggle : toggleItems
+      })
+    });
+  })));
 };
 
-var Toast = {
-  Container: Container,
-  notify: notify
-};
+var Timeline = /*#__PURE__*/React__default.memo(TimelineComponent);
 
-var badgeTypes = {
-  neutral: 'bg-inverted-2',
-  primary: 'bg-primary-dark',
-  danger: 'bg-danger-dark',
-  success: 'bg-success-dark',
-  warning: 'bg-warning-dark'
-};
-var badgeSizes = {
-  "default": 'px-2 py-0.5 text-xs',
-  small: 'px-1.5 text-[0.70rem]'
+var sizeClasses$1 = {
+  small: 'sm:max-w-[600px]',
+  "default": 'sm:max-w-4xl',
+  large: 'sm:max-w-6xl'
 };
 
-var BadgeComponent = function BadgeComponent(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'neutral' : _ref$type,
-      text = _ref.text,
+var ModalComponent = function ModalComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      _ref$preventClose = _ref.preventClose,
+      preventClose = _ref$preventClose === void 0 ? false : _ref$preventClose,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'default' : _ref$size,
-      _ref$expanded = _ref.expanded,
-      expanded = _ref$expanded === void 0 ? false : _ref$expanded;
-  return React__default.createElement("div", {
-    className: "badge items-center justify-center rounded-full " + badgeTypes[type] + " " + badgeSizes[size] + " " + (expanded ? 'flex w-full' : 'inline-flex')
-  }, React__default.createElement("span", {
-    className: "tracking-4 font-semibold text-base-1"
-  }, text));
-};
-
-var Badge = /*#__PURE__*/React__default.memo(BadgeComponent);
+      headerTitle = _ref.headerTitle,
+      _ref$headerClose = _ref.headerClose,
+      headerClose = _ref$headerClose === void 0 ? 'Fechar' : _ref$headerClose,
+      footerActions = _ref.footerActions,
+      onClose = _ref.onClose,
+      _ref$closeTimeout = _ref.closeTimeout,
+      closeTimeout = _ref$closeTimeout === void 0 ? 200 : _ref$closeTimeout,
+      _parentSelector = _ref.parentSelector,
+      children = _ref.children;
 
-var _templateObject;
+  var _useState = React.useState(false),
+      modalIsOpen = _useState[0],
+      setModalIsOpen = _useState[1];
 
-var TooltipComponent = function TooltipComponent(props) {
-  var _window;
+  var _useState2 = React.useState(false),
+      modalPreventClose = _useState2[0],
+      setModalPreventClose = _useState2[1];
 
-  var _React$useState = React__default.useState(false),
-      mounted = _React$useState[0],
-      setMounted = _React$useState[1];
+  React.useEffect(function () {
+    setModalIsOpen(isOpen);
+    setModalPreventClose(preventClose);
+  }, [isOpen, preventClose]);
 
-  var lazyPlugin = {
-    fn: function fn() {
-      return {
-        onMount: function onMount() {
-          return setMounted(true);
-        },
-        onHidden: function onHidden() {
-          return setMounted(false);
-        }
-      };
-    }
+  var handleRequestCloseFunc = function handleRequestCloseFunc() {
+    setModalIsOpen(false);
   };
 
-  var computedProps = _extends({}, props);
+  var handleAfterCloseFunc = function handleAfterCloseFunc() {
+    onClose && onClose();
+  };
 
-  computedProps.plugins = [lazyPlugin].concat(props.plugins || []);
+  return React__default.createElement(ReactModal, {
+    isOpen: modalIsOpen,
+    onAfterClose: handleAfterCloseFunc,
+    onRequestClose: handleRequestCloseFunc,
+    closeTimeoutMS: closeTimeout,
+    ariaHideApp: false,
+    shouldCloseOnOverlayClick: !modalPreventClose,
+    shouldCloseOnEsc: !modalPreventClose,
+    overlayClassName: "justify-center items-end sm:items-center flex overflow-hidden w-screen h-full fixed inset-0 z-50 outline-none bg-black bg-opacity-60 pt-16 sm:p-3 focus:outline-none transition " + (modalIsOpen ? 'opacity-100' : 'opacity-0'),
+    className: "relative max-h-full p-8 sm:p-10 rounded-t-xl sm:rounded-xl shadow-lg flex flex-col w-full bg-base-1 outline-none focus:outline-none border border-card-stroke break-words " + sizeClasses$1[size] + " " + className,
+    bodyOpenClassName: 'ReactModal__Body--open overflow-hidden',
+    testId: 'modal-component',
+    parentSelector: function parentSelector() {
+      return _parentSelector ? _parentSelector : document.body;
+    },
+    contentElement: function contentElement(props, children) {
+      return React__default.createElement("div", Object.assign({}, props), React__default.createElement("div", {
+        className: "ReactModal__header w-full flex justify-between items-start"
+      }, React__default.createElement("span", {
+        className: "min-w-0 text-inverted-2 text-xs font-semibold uppercase break-words " + (headerTitle ? 'pb-3' : '')
+      }, headerTitle), React__default.createElement("button", {
+        type: "button",
+        id: "btnCloseModal",
+        className: (preventClose ? 'hidden' : 'flex') + " items-center p-2 pb-1 -mr-2 -mt-3 text-sm font-semibold text-inverted-2 hover:text-inverted-1",
+        onClick: handleRequestCloseFunc
+      }, headerClose !== false && React__default.createElement("span", {
+        className: "pr-2"
+      }, headerClose), React__default.createElement(Icon, {
+        icon: "close",
+        size: 4
+      }))), React__default.createElement("div", {
+        className: "ReactModal__innerContent flex-auto overflow-x-auto min-w-0 break-words overscroll-none -mx-8 sm:-mx-10 px-8 sm:px-10"
+      }, children), footerActions && React__default.createElement("div", {
+        className: "ReactModal__footer pt-5"
+      }, footerActions));
+    }
+  }, children);
+};
 
-  if (props.render) {
-    var render = props.render;
+var Modal = /*#__PURE__*/React__default.memo(ModalComponent);
 
-    computedProps.render = function () {
-      return mounted ? render.apply(void 0, arguments) : '';
-    };
-  } else {
-    computedProps.content = mounted ? props.content : '';
-  }
+var backgroundShadowEffect = ['[background:linear-gradient(#FFFFFF_33%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),#FFFFFF_66%)_0_100%,radial-gradient(farthest-side_at_50%_0,rgba(156,156,156,0.5),rgba(0,0,0,0)),radial-gradient(farthest-side_at_50%_100%,_rgba(156,156,156,0.5),rgba(0,0,0,0))_0_100%]', '[background-size:100%_15px,100%_15px,100%_5px,100%_5px]', '[background-attachment:local,local,scroll,scroll]', '[background-repeat:no-repeat]', '[background-color:#FFFFFF]', '[&_.form-group_.bg-base-1]:bg-transparent'];
+var SidebarFixedComponent = function SidebarFixedComponent(_ref) {
+  var children = _ref.children,
+      footerActions = _ref.footerActions,
+      _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      onClose = _ref.onClose,
+      helpLink = _ref.helpLink;
 
-  return React__default.createElement(StyledTooltipComponent, Object.assign({}, computedProps, {
-    appendTo: (props == null ? void 0 : props.appendTo) || 'parent',
-    hideOnClick: (props == null ? void 0 : props.hideOnClick) || false,
-    trigger: (props == null ? void 0 : props.trigger) || 'mouseenter',
-    touch: (props == null ? void 0 : props.touch) || ['hold', 400],
-    duration: (props == null ? void 0 : props.duration) || 150,
-    placement: ((_window = window) == null ? void 0 : _window.innerWidth) < 1024 ? 'top' : (props == null ? void 0 : props.placement) || 'top',
-    interactive: (props == null ? void 0 : props.interactive) || false,
-    theme: (props == null ? void 0 : props.theme) || 'dark'
-  }));
-};
+  var _useState = React.useState(false),
+      sidebarIsOpen = _useState[0],
+      setSidebarIsOpen = _useState[1];
 
-var theme = {
-  light: {
-    background: '#fff',
-    color: '#371E56'
-  },
-  dark: {
-    background: '#371E56',
-    color: '#fff'
-  }
-};
-var StyledTooltipComponent = /*#__PURE__*/styled(Tippy)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --bg-color: ", ";\n  position: relative;\n  background-color: var(--bg-color);\n  color: ", ";\n  border-radius: 3px;\n  font-size: 12px;\n  letter-spacing: -0.4px;\n  line-height: 1.4;\n  outline: 0;\n  transition-property: transform, visibility, opacity;\n\n  &[data-animation='fade'][data-state='hidden'] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  &[data-placement^='top'] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  &[data-placement^='top'] > .tippy-arrow:before {\n    bottom: -7px;\n    left: 0;\n    border-width: 8px 8px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow {\n    top: 0;\n  }\n\n  &[data-placement^='bottom'] > .tippy-arrow:before {\n    top: -7px;\n    left: 0;\n    border-width: 0 8px 8px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow {\n    right: 0;\n  }\n\n  &[data-placement^='left'] > .tippy-arrow:before {\n    border-width: 8px 0 8px 8px;\n    border-left-color: initial;\n    right: -7px;\n    transform-origin: center left;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow {\n    left: 0;\n  }\n\n  &[data-placement^='right'] > .tippy-arrow:before {\n    left: -7px;\n    border-width: 8px 8px 8px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  &[data-inertia][data-state='visible'] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-arrow {\n    width: 15px;\n    height: 15px;\n    color: var(--bg-color);\n  }\n\n  .tippy-arrow:before {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 12px 8px;\n    z-index: 1;\n  }\n"])), function (props) {
-  return theme[props.theme].background;
-}, function (props) {
-  return theme[props.theme].color;
-});
-var Tooltip = /*#__PURE__*/React__default.memo(TooltipComponent);
+  React.useEffect(function () {
+    setSidebarIsOpen(isOpen);
+  }, [isOpen]);
 
-var InformationBoxTypes = {
-  tip: {
-    title: 'Dica!',
-    "class": 'bg-success-light border-success',
-    icon: 'lightbulb',
-    iconClass: 'text-success'
-  },
-  warning: {
-    title: 'Atenção!',
-    "class": 'bg-warning-light border-warning',
-    icon: 'exclamationTriangle',
-    iconClass: 'text-warning'
-  },
-  danger: {
-    title: 'Cuidado!',
-    "class": 'bg-danger-light border-danger',
-    icon: 'ban',
-    iconClass: 'text-danger'
-  }
-};
+  var handleRequestCloseFunc = function handleRequestCloseFunc() {
+    setSidebarIsOpen(false);
+    onClose == null ? void 0 : onClose();
+  };
 
-var InformationBoxComponent = function InformationBoxComponent(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'tip' : _ref$type,
-      subtitle = _ref.subtitle;
   return React__default.createElement("div", {
-    className: "InformationBox pl-4 pr-6 pt-5 pb-6 rounded w-full relative flex items-start mb-3 " + InformationBoxTypes[type]["class"]
+    className: "sidebar-fixed fixed z-40 lg:z-20 right-0 bottom-0 w-full h-full transition-all overflow-x-hidden " + (sidebarIsOpen ? 'pointer-events-auto opacity-100' : 'opacity-0 pointer-events-none')
   }, React__default.createElement("div", {
-    className: "w-10 h-10 flex justify-center items-center flex-shrink-0 rounded-full mr-3 bg-base-1"
+    className: "sidebar-fixed-backdrop fixed inset-0 h-full w-full bg-black-alpha -z-1",
+    onClick: handleRequestCloseFunc
+  }), React__default.createElement("div", {
+    className: "sidebar-fixed-inner mt-10 sm:mt-0 top-0 bottom-0 right-0 absolute flex flex-col justify-between bg-base-1 transform transition-transform shadow h-auto w-full sm:max-w-[410px] sm:ml-16 rounded-t-lg sm:rounded-none " + (sidebarIsOpen ? 'translate-x-0' : 'translate-x-10')
+  }, React__default.createElement("div", {
+    className: "sidebar-fixed-header flex justify-between items-center p-3 lg:px-5 text-inverted-2"
+  }, React__default.createElement("button", {
+    className: "sidebar-fixed-close p-2 hover:text-primary transition-colors",
+    onClick: handleRequestCloseFunc
   }, React__default.createElement(Icon, {
-    icon: InformationBoxTypes[type].icon,
-    className: "InformationBox-icon " + InformationBoxTypes[type].iconClass,
+    icon: "close",
+    block: true,
     size: 4
-  })), React__default.createElement("div", {
-    className: "flex-grow flex flex-col sm:flex-row items-start justify-between min-w-0"
-  }, React__default.createElement("div", {
-    className: "flex flex-col justify-center min-w-0 break-words tracking-4 leading-6 text-on-base"
-  }, React__default.createElement("span", {
-    className: "InformationBox-title text-f5 font-bold " + InformationBoxTypes[type].iconClass
-  }, InformationBoxTypes[type].title), subtitle && React__default.createElement("span", {
-    className: "InformationBox-subtitle text-f6 font-regular mt-1"
-  }, subtitle))));
+  })), helpLink && React__default.createElement("a", {
+    className: "sidebar-fixed-help p-2 hover:text-primary transition-colors",
+    href: helpLink,
+    target: "_blank",
+    rel: "noreferrer"
+  }, React__default.createElement(Icon, {
+    icon: "questionCircle",
+    block: true,
+    size: 4
+  }))), React__default.createElement("div", {
+    className: "sidebar-fixed-content flex-1 flex-grow w-full overflow-auto overscroll-none px-5 lg:px-7 break-words " + backgroundShadowEffect.join(' ')
+  }, children), footerActions && React__default.createElement("div", {
+    className: "sidebar-fixed-footer flex justify-between items-center p-5 lg:p-7 lg:pt-6"
+  }, footerActions)));
 };
-
-var InformationBox = /*#__PURE__*/React__default.memo(InformationBoxComponent);
+var SidebarFixed = /*#__PURE__*/React__default.memo(SidebarFixedComponent);
 
 var SharedContext = /*#__PURE__*/React__default.createContext({
   variant: 'default',