plataforma-fundacao-componentes 2.22.7 → 2.22.8

package/dist/index.modern.js

@@ -9569,7 +9569,7 @@ var LeftCheckboxWithLabel = function LeftCheckboxWithLabel(props) {
     return style;
   }, [props.anchorLabelToCheckbox, props.disabled, props.justifyContent, props.removeUserSelect, props.spanProps]);
   return React.createElement("div", {
-    className: rootClassName$1w
+    className: getMergedClassNames([rootClassName$1w, props.w100 ? 'w-100' : ''])
   }, React.createElement("span", {
     className: rootClassName$1w + "-checkbox-wrapper",
     "tooltip-position": props['tooltip-position'],
@@ -9770,96 +9770,9 @@ var CircleArrowLeft = function CircleArrowLeft() {
   }))));
 };
 
-var rootClassName$1A = 'component-table-with-overflow';
-
-function TableWithOverflow(props) {
-  var _useState = useState("" + getUniqueKey()),
-      id = _useState[0];
-
-  var _useState2 = useState("fake_table" + getUniqueKey()),
-      fakeId = _useState2[0];
-
-  var attWidth = function attWidth() {
-    var fake = document.querySelector("#" + fakeId);
-    var real = document.querySelector("#" + id + " ." + rootClassName$1A + "-table");
-
-    if (real && fake) {
-      fake.style.width = real.getBoundingClientRect().width + "px";
-    }
-  };
-
-  var header = function header() {
-    document.querySelectorAll("#" + id + " ." + rootClassName$1A + "-table ." + rootClassName$1A + "-header ." + rootClassName$1A + "-cell").forEach(function (element, index) {
-      var fakeElement = document.querySelector("#" + fakeId + " thead tr th:nth-child(" + (index + 2) + ")");
-
-      if (fakeElement) {
-        element.style.minWidth = fakeElement.getBoundingClientRect().width + "px";
-        element.style.height = fakeElement.getBoundingClientRect().height + "px";
-      }
-    });
-  };
-
-  var body = function body() {
-    document.querySelectorAll("#" + id + " ." + rootClassName$1A + "-table ." + rootClassName$1A + "-body ." + rootClassName$1A + "-cell").forEach(function (el) {
-      var columnRef = el.getAttribute('columnref');
-      var rowRef = el.getAttribute('rowref');
-
-      if (columnRef && rowRef) {
-        var fakeElement = document.querySelector("#" + fakeId + " tbody tr:nth-child(" + rowRef + ") td:nth-child(" + columnRef + ")");
-
-        if (fakeElement) {
-          el.style.minWidth = fakeElement.getBoundingClientRect().width + "px";
-          el.style.height = fakeElement.getBoundingClientRect().height + "px";
-        }
-      }
-    });
-  };
-
-  var midWith = function midWith() {
-    var arrowControls = document.querySelector("#" + id + " ." + rootClassName$1A + "-arrow-control");
-    var mid = document.querySelector("#" + id + " ." + rootClassName$1A + "-table ." + rootClassName$1A + "-mid");
-    if (!mid) return;
-    mid.classList.add('over');
-
-    if (arrowControls) {
-      arrowControls.style.display = 'flex';
-    }
-
-    var clientWidth = mid.clientWidth,
-        scrollWidth = mid.scrollWidth;
-
-    if (clientWidth >= scrollWidth || Array.from(mid.querySelectorAll("." + rootClassName$1A + "-cell")).some(function (it) {
-      return it.getBoundingClientRect().width > clientWidth;
-    })) {
-      mid.classList.remove('over');
-
-      if (arrowControls) {
-        arrowControls.style.display = 'none';
-      }
-    }
-  };
-
-  useLayoutEffect(function () {
-    attWidth();
-    header();
-    body();
-    midWith();
-  }, [props.lines, props.columns]);
+function useDraggableScroll(reference) {
   useEffect(function () {
-    var func = function func() {
-      attWidth();
-      header();
-      body();
-      midWith();
-    };
-
-    window.addEventListener('resize', func);
-    return function () {
-      window.removeEventListener('resize', func);
-    };
-  }, []);
-  useEffect(function () {
-    var element = document.querySelector("#" + id + " ." + rootClassName$1A + "-table ." + rootClassName$1A + "-mid");
+    var element = reference.current;
     var pos = {
       left: 0,
       x: 0
@@ -9867,10 +9780,10 @@ function TableWithOverflow(props) {
     var moving = false;
 
     var mouseDownHandler = function mouseDownHandler(evt) {
-      if (evt.button === 0 && element.scrollWidth > element.clientWidth) {
+      if (evt.button === 0 && (element === null || element === void 0 ? void 0 : element.scrollWidth) > (element === null || element === void 0 ? void 0 : element.clientWidth)) {
         moving = true;
         pos = {
-          left: element.scrollLeft,
+          left: (element === null || element === void 0 ? void 0 : element.scrollLeft) || 0,
           x: evt.clientX
         };
       }
@@ -9888,170 +9801,160 @@ function TableWithOverflow(props) {
       moving = false;
     };
 
-    element.addEventListener('mousedown', mouseDownHandler);
+    element === null || element === void 0 ? void 0 : element.addEventListener('mousedown', mouseDownHandler);
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
     return function () {
-      element.removeEventListener('mousedown', mouseDownHandler);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('mousedown', mouseDownHandler);
       document.removeEventListener('mousemove', mouseMoveHandler);
       document.removeEventListener('mouseup', mouseUpHandler);
     };
-  }, []);
-  return React.createElement(React.Fragment, null, React.createElement("div", {
-    id: id,
-    className: rootClassName$1A
-  }, React.createElement("table", {
-    id: fakeId,
-    className: rootClassName$1A + "-fake-table"
-  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null), props.columns && props.columns.length ? Array.from(props.columns).map(function (column, columnIndex) {
-    return React.createElement("th", Object.assign({}, column.props, {
-      key: column.key ? column.key : columnIndex
-    }), column.value);
-  }) : undefined, React.createElement("th", null))), React.createElement("tbody", null, React.createElement("tr", null), props.lines && props.lines.length ? Array.from(props.lines).map(function (line, index) {
-    var key = line.key ? line.key : index;
-    delete line.key;
-    var lineProps = line.props ? line.props : {};
-    delete line.props;
-    return React.createElement("tr", Object.assign({
-      key: key
-    }, lineProps), React.createElement("td", null), Object.entries(line).map(function (cell, valueIndex) {
-      var column = Array.from(props.columns).find(function (c) {
-        return c.key === cell[0];
-      });
-      return (column === null || column === void 0 ? void 0 : column.key) === 'actions' ? React.createElement("td", {
-        key: fakeId + "-actions"
-      }) : React.createElement("td", Object.assign({
-        key: cell[1].key ? cell[1].key : valueIndex
-      }, column === null || column === void 0 ? void 0 : column.props, cell[1].props), cell[1]);
-    }), React.createElement("td", null));
-  }) : undefined)), props.upperHeader ? React.createElement(React.Fragment, null, React.createElement("div", {
-    className: getMergedClassNames([rootClassName$1A + "-upper-header", props.upperHeader.active ? 'active' : ''])
-  }, props.upperHeader.buttons && props.upperHeader.buttons.length ? props.upperHeader.buttons.map(function (btn, index) {
-    var _props$upperHeader;
+  }, [reference]);
+}
 
-    return React.createElement("button", {
-      id: btn.id || undefined,
-      key: index,
-      onClick: btn.onClick,
-      disabled: !((_props$upperHeader = props.upperHeader) !== null && _props$upperHeader !== void 0 && _props$upperHeader.active) || btn.disabled || false
-    }, React.createElement("span", null, btn.icon), btn.label);
-  }) : undefined)) : undefined, React.createElement("div", {
-    className: rootClassName$1A + "-outer-table"
-  }, React.createElement("div", {
-    className: getMergedClassNames([rootClassName$1A + "-table", props.upperHeader ? 'has-upper-header' : ''])
-  }, React.createElement("div", {
-    className: rootClassName$1A + "-left"
-  }, React.createElement("div", {
-    className: rootClassName$1A + "-header"
-  }, props.columns && props.columns.length ? Array.from(props.columns).slice(0, 2).map(function (column, index) {
-    return React.createElement("div", Object.assign({
-      key: index
-    }, column.props, {
-      className: getMergedClassNames([rootClassName$1A + "-cell", column.props && column.props.className ? column.props.className : '']),
-      style: {
-        width: '50%'
-      }
-    }), column.value);
-  }) : undefined), React.createElement("div", {
-    className: rootClassName$1A + "-body"
-  }, props.lines && props.lines.length ? Array.from(props.lines).map(function (line, index) {
-    var _props$columns$, _props$columns$2;
+var rootClassName$1A = 'component-upper-header-table';
 
-    return React.createElement("div", {
-      key: index,
-      className: getMergedClassNames([rootClassName$1A + "-row", line.disabled ? 'disabled' : ''])
-    }, React.createElement("div", {
-      className: rootClassName$1A + "-cell",
-      columnref: 2,
-      rowref: index + 2
-    }, line[(_props$columns$ = props.columns[0]) === null || _props$columns$ === void 0 ? void 0 : _props$columns$.key]), React.createElement("div", {
-      className: rootClassName$1A + "-cell",
-      columnref: 3,
-      rowref: index + 2
-    }, line[(_props$columns$2 = props.columns[1]) === null || _props$columns$2 === void 0 ? void 0 : _props$columns$2.key]));
-  }) : undefined)), React.createElement("div", {
-    className: rootClassName$1A + "-mid"
+function TableUpperHeader(props) {
+  var _props$leftContent, _props$rightContent;
+
+  return React.createElement("div", {
+    className: getMergedClassNames([rootClassName$1A, props.active ? 'active' : ''])
   }, React.createElement("div", {
-    className: rootClassName$1A + "-header"
-  }, props.columns && props.columns.length ? Array.from(props.columns).map(function (column, index) {
-    return React.createElement("div", Object.assign({
-      key: index
-    }, column.props, {
-      className: getMergedClassNames([rootClassName$1A + "-cell", column.props && column.props.className ? column.props.className : ''])
-    }), column.value);
-  }).slice(2, props.columns.length - 1) : undefined), React.createElement("div", {
-    className: rootClassName$1A + "-body"
-  }, props.lines && props.lines.length ? Array.from(props.lines).map(function (line, lineIndex) {
-    return React.createElement("div", {
-      key: lineIndex,
-      className: getMergedClassNames([rootClassName$1A + "-row", line.disabled ? 'disabled' : ''])
-    }, props.columns && props.columns.length ? Array.from(props.columns).map(function (column, index) {
-      return React.createElement("div", {
-        columnref: index + 2,
-        rowref: lineIndex + 2,
-        key: index,
-        className: rootClassName$1A + "-cell"
-      }, line[column.key]);
-    }).slice(2, props.columns.length - 1) : undefined);
-  }) : undefined)), React.createElement("div", {
+    className: rootClassName$1A + "-left"
+  }, (_props$leftContent = props.leftContent) === null || _props$leftContent === void 0 ? void 0 : _props$leftContent.map(function (btn, i) {
+    return React.createElement("button", Object.assign({
+      key: i
+    }, btn, {
+      disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false
+    }), btn.leftIcon && React.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React.createElement("span", null, btn.rightIcon));
+  })), React.createElement("div", {
     className: rootClassName$1A + "-right"
-  }, React.createElement("div", {
-    className: rootClassName$1A + "-header"
-  }, props.columns && props.columns.length ? Array.from(props.columns).map(function (column, index) {
-    return React.createElement("div", Object.assign({
-      key: index
-    }, column.props, {
-      className: getMergedClassNames([rootClassName$1A + "-cell", column.props && column.props.className ? column.props.className : ''])
-    }), column.value);
-  }).slice(props.columns.length - 1, props.columns.length) : undefined, props.showArrowControl ? React.createElement("div", {
-    className: rootClassName$1A + "-arrow-control"
-  }, React.createElement(IconButton$1, {
-    icon: React.createElement(CircleArrowLeft, null),
-    onClick: function onClick() {
-      var mid = document.querySelector("#" + id + " ." + rootClassName$1A + "-table ." + rootClassName$1A + "-mid");
+  }, (_props$rightContent = props.rightContent) === null || _props$rightContent === void 0 ? void 0 : _props$rightContent.map(function (btn, i) {
+    return React.createElement("button", Object.assign({
+      key: i
+    }, btn, {
+      disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false
+    }), btn.leftIcon && React.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React.createElement("span", null, btn.rightIcon));
+  })));
+}
+
+var TableUpperHeader$1 = memo(TableUpperHeader);
+
+var rootClassName$1B = 'component-table-with-overflow';
+
+function TableWithOverflow(props) {
+  var _props$columns, _props$lines;
+
+  var wrapperClassName = useMemo(function () {
+    return getMergedClassNames([rootClassName$1B + "-wrapper", props.hasActionsCol ? 'has-actions-col' : '', props.upperHeader ? 'has-upper-header' : '', 'left-columns-padding']);
+  }, [props.hasActionsCol, props.upperHeader]);
+  var outerTableRef = createRef();
+  useDraggableScroll(outerTableRef);
+
+  var handleArrowClick = function handleArrowClick(toAdd) {
+    if (toAdd === void 0) {
+      toAdd = 0;
+    }
+
+    if (outerTableRef.current) {
+      var left = outerTableRef.current.scrollLeft;
       scrollSmooth({
-        element: mid,
+        element: outerTableRef.current,
         top: 0,
-        left: mid.scrollLeft - 150,
+        left: left + toAdd,
         behavior: 'smooth',
         duration: 400
       });
     }
+  };
+
+  var paddingLeft = useMemo(function () {
+    return props.columns.reduce(function (prev, atual) {
+      var _atual$absolute;
+
+      var n = (_atual$absolute = atual.absolute) !== null && _atual$absolute !== void 0 && _atual$absolute.left ? parseInt(atual.absolute.width) : 0;
+      return prev + n;
+    }, 8) + "px";
+  }, [props.columns]);
+  var paddingRight = useMemo(function () {
+    return props.columns.reduce(function (prev, atual) {
+      var _atual$absolute2;
+
+      var n = (_atual$absolute2 = atual.absolute) !== null && _atual$absolute2 !== void 0 && _atual$absolute2.right ? parseInt(atual.absolute.width) : 0;
+      return prev + n;
+    }, 8) + "px";
+  }, [props.columns]);
+  return React.createElement("div", {
+    className: rootClassName$1B
+  }, props.upperHeader ? React.createElement("div", {
+    className: rootClassName$1B + "-upper-header"
+  }, React.createElement(TableUpperHeader$1, Object.assign({}, props.upperHeader))) : undefined, React.createElement("div", {
+    className: wrapperClassName,
+    style: {
+      paddingLeft: paddingLeft,
+      paddingRight: paddingRight
+    }
+  }, props.showTopNavigator && React.createElement("div", {
+    className: rootClassName$1B + "-table-arrows"
+  }, React.createElement(IconButton$1, {
+    icon: React.createElement(CircleArrowLeft, null),
+    onClick: function onClick() {
+      handleArrowClick(-150);
+    }
   }), React.createElement(IconButton$1, {
     icon: React.createElement(CircleArrowRight, null),
     onClick: function onClick() {
-      var mid = document.querySelector("#" + id + " ." + rootClassName$1A + "-table ." + rootClassName$1A + "-mid");
-      scrollSmooth({
-        element: mid,
-        top: 0,
-        left: mid.scrollLeft + 150,
-        behavior: 'smooth',
-        duration: 400
-      });
+      handleArrowClick(150);
     }
-  })) : undefined), React.createElement("div", {
-    className: rootClassName$1A + "-body"
-  }, props.lines && props.lines.length ? Array.from(props.lines).map(function (line, lineIndex) {
-    return React.createElement("div", {
+  })), React.createElement("div", {
+    className: rootClassName$1B + "-outer-table",
+    ref: outerTableRef
+  }, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+    className: 'absolute left-0'
+  }), (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.map(function (column) {
+    var _column$props;
+
+    return React.createElement("th", Object.assign({
+      key: "header-" + column.key
+    }, column.props, {
+      style: _extends({}, (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.style, column.absolute),
+      className: getMergedClassNames([column.key + "-cell", column.absolute ? 'absolute' : ''])
+    }), column.value);
+  }), React.createElement("th", {
+    className: 'absolute right-0'
+  })), React.createElement("tr", null)), React.createElement("tbody", null, (_props$lines = props.lines) === null || _props$lines === void 0 ? void 0 : _props$lines.map(function (line, lineIndex) {
+    var _props$columns2;
+
+    return React.createElement("tr", {
       key: lineIndex,
-      className: getMergedClassNames([rootClassName$1A + "-row", line.disabled ? 'disabled' : ''])
-    }, props.columns && props.columns.length ? Array.from(props.columns).map(function (column, index) {
-      return React.createElement("div", {
-        rowref: lineIndex + 2,
-        columnref: index + 2,
-        key: index,
-        className: rootClassName$1A + "-cell"
-      }, line[column.key]);
-    }).slice(props.columns.length - 1, props.columns.length) : undefined);
-  }) : undefined))))));
+      "aria-disabled": line.disabled || false
+    }, React.createElement("td", {
+      "data-draggable": false,
+      className: 'absolute left-0'
+    }), (_props$columns2 = props.columns) === null || _props$columns2 === void 0 ? void 0 : _props$columns2.map(function (column) {
+      var _column$props2, _column$props3;
+
+      return React.createElement("td", Object.assign({
+        "data-draggable": !Boolean(column.absolute),
+        key: lineIndex + "-" + column.key
+      }, column.props, {
+        style: _extends({}, (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.style, column.absolute),
+        className: getMergedClassNames([(_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.className, column.key + "-cell", column.absolute ? 'absolute' : ''])
+      }), line[column.key]);
+    }), React.createElement("td", {
+      className: 'absolute right-0'
+    }));
+  }))))));
 }
 
 TableWithOverflow.defaultProps = {
-  showArrowControl: true
+  showArrowControl: true,
+  hasActionsCol: true,
+  showTopNavigator: true
 };
 var TableWithOverflow$1 = memo(TableWithOverflow);
 
-var rootClassName$1B = 'component-tabs';
+var rootClassName$1C = 'component-tabs';
 
 function Tabs(props) {
   var _props$tabs;
@@ -10081,14 +9984,14 @@ function Tabs(props) {
     };
   }, [startBar]);
   return React.createElement("nav", {
-    className: rootClassName$1B,
+    className: rootClassName$1C,
     style: {
       justifyContent: props.justify
     },
     ref: navRef
   }, (_props$tabs = props.tabs) === null || _props$tabs === void 0 ? void 0 : _props$tabs.map(function (tab, index) {
     return React.createElement("button", {
-      className: getMergedClassNames([rootClassName$1B + "-tab", props.atual === index ? 'atual' : '', props.atual && props.changeTitleColor ? 'change' : '']),
+      className: getMergedClassNames([rootClassName$1C + "-tab", props.atual === index ? 'atual' : '', props.atual && props.changeTitleColor ? 'change' : '']),
       onClick: function onClick() {
         props.onChange(index);
       },
@@ -10098,16 +10001,16 @@ function Tabs(props) {
     }, React.createElement("span", null, tab.title));
   }), React.createElement("div", {
     ref: actualRef,
-    className: rootClassName$1B + "-bar"
+    className: rootClassName$1C + "-bar"
   }));
 }
 
 var Tabs$1 = memo(Tabs);
 
-var rootClassName$1C = 'icon-component';
+var rootClassName$1D = 'icon-component';
 var AlignCenterIcon = function AlignCenterIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1C,
+    className: rootClassName$1D,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10116,10 +10019,10 @@ var AlignCenterIcon = function AlignCenterIcon() {
   }));
 };
 
-var rootClassName$1D = 'icon-component';
+var rootClassName$1E = 'icon-component';
 var AlignJustifyIcon = function AlignJustifyIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1D,
+    className: rootClassName$1E,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10128,10 +10031,10 @@ var AlignJustifyIcon = function AlignJustifyIcon() {
   }));
 };
 
-var rootClassName$1E = 'icon-component';
+var rootClassName$1F = 'icon-component';
 var AlignLeftIcon = function AlignLeftIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1E,
+    className: rootClassName$1F,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10140,10 +10043,10 @@ var AlignLeftIcon = function AlignLeftIcon() {
   }));
 };
 
-var rootClassName$1F = 'icon-component';
+var rootClassName$1G = 'icon-component';
 var AlignRightIcon = function AlignRightIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1F,
+    className: rootClassName$1G,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10152,10 +10055,10 @@ var AlignRightIcon = function AlignRightIcon() {
   }));
 };
 
-var rootClassName$1G = 'icon-component';
+var rootClassName$1H = 'icon-component';
 var BoldIcon = function BoldIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1G,
+    className: rootClassName$1H,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10164,10 +10067,10 @@ var BoldIcon = function BoldIcon() {
   }));
 };
 
-var rootClassName$1H = 'icon-component';
+var rootClassName$1I = 'icon-component';
 var FontColorIcon = function FontColorIcon(props) {
   return React.createElement("svg", {
-    className: rootClassName$1H,
+    className: rootClassName$1I,
     viewBox: '-52 -80 299 372',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10189,10 +10092,10 @@ var FontColorIcon = function FontColorIcon(props) {
   })));
 };
 
-var rootClassName$1I = 'icon-component';
+var rootClassName$1J = 'icon-component';
 var FontIcon = function FontIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1I,
+    className: rootClassName$1J,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10201,10 +10104,10 @@ var FontIcon = function FontIcon() {
   }));
 };
 
-var rootClassName$1J = 'icon-component';
+var rootClassName$1K = 'icon-component';
 var ItalicIcon = function ItalicIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1J,
+    className: rootClassName$1K,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10213,10 +10116,10 @@ var ItalicIcon = function ItalicIcon() {
   }));
 };
 
-var rootClassName$1K = 'icon-component';
+var rootClassName$1L = 'icon-component';
 var LinkIcon = function LinkIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1K,
+    className: rootClassName$1L,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10225,10 +10128,10 @@ var LinkIcon = function LinkIcon() {
   }));
 };
 
-var rootClassName$1L = 'icon-component';
+var rootClassName$1M = 'icon-component';
 var RedoIcon = function RedoIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1L,
+    className: rootClassName$1M,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10237,10 +10140,10 @@ var RedoIcon = function RedoIcon() {
   }));
 };
 
-var rootClassName$1M = 'icon-component';
+var rootClassName$1N = 'icon-component';
 var UnderlineIcon = function UnderlineIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1M,
+    className: rootClassName$1N,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10249,10 +10152,10 @@ var UnderlineIcon = function UnderlineIcon() {
   }));
 };
 
-var rootClassName$1N = 'icon-component';
+var rootClassName$1O = 'icon-component';
 var UndoIcon = function UndoIcon() {
   return React.createElement("svg", {
-    className: rootClassName$1N,
+    className: rootClassName$1O,
     viewBox: '0 0 24 24',
     fill: 'currentColor',
     xmlns: 'http://www.w3.org/2000/svg'
@@ -10261,7 +10164,7 @@ var UndoIcon = function UndoIcon() {
   }));
 };
 
-var rootClassName$1O = 'text-editor-header-input';
+var rootClassName$1P = 'text-editor-header-input';
 function TextEditorHeaderInput(props) {
   var _useState = useState(getUniqueKey()),
       inputLabelId = _useState[0];
@@ -10281,7 +10184,7 @@ function TextEditorHeaderInput(props) {
         props.onChange(evt);
         evt.stopPropagation();
       },
-      className: getMergedClassNames([rootClassName$1O + "-input", props.className || '']),
+      className: getMergedClassNames([rootClassName$1P + "-input", props.className || '']),
       value: props.value,
       onKeyUp: function onKeyUp(evt) {
         if (evt.key === 'Enter' && typeof props.onEnter === 'function') {
@@ -10292,10 +10195,10 @@ function TextEditorHeaderInput(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1O
+    className: rootClassName$1P
   }, /*#__PURE__*/React.createElement("div", {
     id: inputLabelId,
-    className: getMergedClassNames([rootClassName$1O + "-label", props.value ? 'top' : ''])
+    className: getMergedClassNames([rootClassName$1P + "-label", props.value ? 'top' : ''])
   }, props.label), /*#__PURE__*/React.createElement("input", getInputProps()));
 }
 TextEditorHeaderInput.propTypes = {
@@ -10308,10 +10211,10 @@ TextEditorHeaderInput.defaultProps = {
   onChange: function onChange() {}
 };
 
-var rootClassName$1P = 'text-editor-menu-button';
+var rootClassName$1Q = 'text-editor-menu-button';
 function TextEditorMenuButton(props) {
   return /*#__PURE__*/React.createElement("button", _extends({}, props, {
-    className: getMergedClassNames([props.className || '', rootClassName$1P])
+    className: getMergedClassNames([props.className || '', rootClassName$1Q])
   }));
 }
 TextEditorMenuButton.propTypes = {
@@ -10319,8 +10222,8 @@ TextEditorMenuButton.propTypes = {
   disabled: propTypes.bool
 };
 
-var rootClassName$1Q = 'text-editor-color-picker';
-var colorClassName = rootClassName$1Q + "-color-button";
+var rootClassName$1R = 'text-editor-color-picker';
+var colorClassName = rootClassName$1R + "-color-button";
 var defaultColors = ['#121212', '#323c32', '#5a645a', '#828a82', '#33820d', '#3fa110'];
 
 var ColorButton = function ColorButton(props) {
@@ -10401,9 +10304,9 @@ function TextEditorColorPicker(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: rootClassName$1Q
+    className: rootClassName$1R
   }, /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1Q + "-colors"
+    className: rootClassName$1R + "-colors"
   }, defaultColors.map(function (color, index) {
     return /*#__PURE__*/React.createElement(ColorButton, {
       key: index,
@@ -10413,7 +10316,7 @@ function TextEditorColorPicker(props) {
       }
     });
   })), /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1Q + "-colors"
+    className: rootClassName$1R + "-colors"
   }, lastUsedColors.map(function (color, index) {
     return /*#__PURE__*/React.createElement(ColorButton, {
       key: index,
@@ -10424,9 +10327,9 @@ function TextEditorColorPicker(props) {
       }
     });
   })), /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1Q + "-hexa-row"
+    className: rootClassName$1R + "-hexa-row"
   }, /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1Q + "-picker-col"
+    className: rootClassName$1R + "-picker-col"
   }, /*#__PURE__*/React.createElement("input", {
     value: hexa,
     onChange: function onChange(evt) {
@@ -10437,7 +10340,7 @@ function TextEditorColorPicker(props) {
         setHexa(val);
       }, 200);
     },
-    className: rootClassName$1Q + "-color-picker",
+    className: rootClassName$1R + "-color-picker",
     type: "color"
   })), /*#__PURE__*/React.createElement(TextEditorHeaderInput, {
     label: "Hexadecimal",
@@ -10463,10 +10366,10 @@ TextEditorColorPicker.defaultProps = {
   onChange: function onChange() {}
 };
 
-var rootClassName$1R = 'text-editor-header-button';
+var rootClassName$1S = 'text-editor-header-button';
 function TextEditorHeaderButton(props) {
   return /*#__PURE__*/React.createElement("button", {
-    className: getMergedClassNames([rootClassName$1R, props.active ? 'active' : '']),
+    className: getMergedClassNames([rootClassName$1S, props.active ? 'active' : '']),
     onClick: props.onClick,
     disabled: props.disabled
   }, props.icon);
@@ -10478,7 +10381,7 @@ TextEditorHeaderButton.propTypes = {
   disabled: propTypes.bool
 };
 
-var rootClassName$1S = 'text-editor-title-choser';
+var rootClassName$1T = 'text-editor-title-choser';
 function TextEditorTitleChoser(props) {
   var _useState = useState(getUniqueKey()),
       id = _useState[0];
@@ -10522,7 +10425,7 @@ function TextEditorTitleChoser(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1S,
+    className: rootClassName$1T,
     id: id
   }, /*#__PURE__*/React.createElement("button", {
     onClick: function onClick() {
@@ -10542,7 +10445,7 @@ TextEditorTitleChoser.defaultProps = {
   onChange: function onChange() {}
 };
 
-var rootClassName$1T = 'text-editor-url-creator';
+var rootClassName$1U = 'text-editor-url-creator';
 function TextEditorUrlCreator(props) {
   var _useState = useState(getUniqueKey()),
       id = _useState[0];
@@ -10618,9 +10521,9 @@ function TextEditorUrlCreator(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: rootClassName$1T
+    className: rootClassName$1U
   }, /*#__PURE__*/React.createElement(Row$1, {
-    className: rootClassName$1T + "-url-row"
+    className: rootClassName$1U + "-url-row"
   }, /*#__PURE__*/React.createElement(TextEditorHeaderInput, {
     label: "Url",
     value: urlValue,
@@ -10629,7 +10532,7 @@ function TextEditorUrlCreator(props) {
     },
     onEnter: handleSubmit
   })), /*#__PURE__*/React.createElement(Row$1, {
-    className: rootClassName$1T + "-text-row"
+    className: rootClassName$1U + "-text-row"
   }, /*#__PURE__*/React.createElement(TextEditorHeaderInput, {
     label: "Texto",
     value: textValue,
@@ -10638,7 +10541,7 @@ function TextEditorUrlCreator(props) {
     },
     onEnter: handleSubmit
   })), /*#__PURE__*/React.createElement(Row$1, {
-    className: rootClassName$1T + "-new-tab-row"
+    className: rootClassName$1U + "-new-tab-row"
   }, /*#__PURE__*/React.createElement(Checkbox, {
     value: newTab,
     onChange: function onChange(value) {
@@ -10649,7 +10552,7 @@ function TextEditorUrlCreator(props) {
       return setNewTab(!newTab);
     }
   }, "Nova Guia")), /*#__PURE__*/React.createElement(Row$1, {
-    className: rootClassName$1T + "-ok-row"
+    className: rootClassName$1U + "-ok-row"
   }, /*#__PURE__*/React.createElement(TextEditorMenuButton, {
     disabled: !urlValue || !textValue,
     onClick: handleSubmit
@@ -10664,7 +10567,7 @@ TextEditorUrlCreator.defaultProps = {
   onChange: function onChange() {}
 };
 
-var rootClassName$1U = 'component-text-editor';
+var rootClassName$1V = 'component-text-editor';
 function TextEditor(props) {
   var _useState = useState(getUniqueKey()),
       id = _useState[0];
@@ -10687,7 +10590,7 @@ function TextEditor(props) {
 
   var getProps = function getProps() {
     var p = _extends({}, props, {
-      className: getMergedClassNames([rootClassName$1U, props.className || '', props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
+      className: getMergedClassNames([rootClassName$1V, props.className || '', props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
     });
 
     delete p.topLabel;
@@ -10714,7 +10617,7 @@ function TextEditor(props) {
     if (!selection || !selection.anchorNode) return;
     var aux = selection.anchorNode.parentElement;
 
-    while (!aux.hasAttribute('class', rootClassName$1U + "-editor")) {
+    while (!aux.hasAttribute('class', rootClassName$1V + "-editor")) {
       if (aux.tagName === 'A') {
         isLink = true;
       } else if (aux.tagName === 'FONT') {
@@ -10778,13 +10681,13 @@ function TextEditor(props) {
     }
   }, [props.value]);
   return /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1U + "-outer"
+    className: rootClassName$1V + "-outer"
   }, !props.hideTopLabel && /*#__PURE__*/React.createElement("div", {
-    className: getMergedClassNames([rootClassName$1U + "-top-label", props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
+    className: getMergedClassNames([rootClassName$1V + "-top-label", props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
   }, props.topLabel), /*#__PURE__*/React.createElement("div", getProps(), /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1U + "-header"
+    className: rootClassName$1V + "-header"
   }, /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1U + "-left-content"
+    className: rootClassName$1V + "-left-content"
   }, /*#__PURE__*/React.createElement(DropdownMenu, {
     opened: fontOpened,
     setOpened: setFontOpened,
@@ -10904,7 +10807,7 @@ function TextEditor(props) {
       document.querySelector("#" + id).focus();
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: rootClassName$1U + "-right-content"
+    className: rootClassName$1V + "-right-content"
   }, /*#__PURE__*/React.createElement(TextEditorHeaderButton, {
     disabled: props.disabled,
     icon: /*#__PURE__*/React.createElement(UndoIcon, null),
@@ -10919,12 +10822,12 @@ function TextEditor(props) {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: rootClassName$1U + "-editor",
+    className: rootClassName$1V + "-editor",
     contentEditable: !props.disabled,
     onClick: verifyCursor,
     onKeyUp: verifyCursor
   })), !props.hideHelperText && /*#__PURE__*/React.createElement("div", {
-    className: getMergedClassNames([rootClassName$1U + "-helper-text", props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
+    className: getMergedClassNames([rootClassName$1V + "-helper-text", props.disabled ? 'disabled' : '', props.error ? 'error' : ''])
   }, props.helperText));
 }
 TextEditor.propTypes = {
@@ -10951,17 +10854,17 @@ var ToastTypes;
   ToastTypes["Error"] = "error";
 })(ToastTypes || (ToastTypes = {}));
 
-var rootClassName$1V = 'component-toast';
+var rootClassName$1W = 'component-toast';
 function Toast(props) {
   var _useState = useState(props.id || getUniqueKey()),
       id = _useState[0];
 
   var getClassNames = function getClassNames() {
-    return getMergedClassNames([rootClassName$1V, rootClassName$1V + "-" + props.theme]);
+    return getMergedClassNames([rootClassName$1W, rootClassName$1W + "-" + props.theme]);
   };
 
   useEffect(function () {
-    var el = document.querySelector("#" + id + " ." + rootClassName$1V + "-fill");
+    var el = document.querySelector("#" + id + " ." + rootClassName$1W + "-fill");
 
     if (el) {
       el.style.animation = "fillToZero " + props.timeout + "ms linear forwards";
@@ -11008,22 +10911,22 @@ function Toast(props) {
     id: id,
     className: getClassNames()
   }, React.createElement("div", {
-    className: rootClassName$1V + "-left-content"
+    className: rootClassName$1W + "-left-content"
   }, props.label), React.createElement("div", {
-    className: rootClassName$1V + "-right-content"
+    className: rootClassName$1W + "-right-content"
   }, props.showActionButton && React.createElement("div", {
-    className: rootClassName$1V + "-action-button"
+    className: rootClassName$1W + "-action-button"
   }, props.actionButtonText), React.createElement("div", {
-    className: rootClassName$1V + "-close-button"
+    className: rootClassName$1W + "-close-button"
   }, React.createElement(IconButton$1, {
     icon: React.createElement(CloseIcon, null),
     onClick: function onClick() {
       if (typeof props.onClose === 'function') props.onClose();
     }
   }))), props.timeout ? React.createElement("div", {
-    className: getMergedClassNames([rootClassName$1V + "-bar", props.showStatusBar ? '' : 'hide'])
+    className: getMergedClassNames([rootClassName$1W + "-bar", props.showStatusBar ? '' : 'hide'])
   }, React.createElement("div", {
-    className: rootClassName$1V + "-fill",
+    className: rootClassName$1W + "-fill",
     onAnimationEnd: function onAnimationEnd() {
       if (typeof props.onClose === 'function') props.onClose();
     }
@@ -11038,7 +10941,7 @@ Toast.defaultProps = {
   onClose: function onClose() {}
 };
 
-var rootClassName$1W = 'comp-toast-manager';
+var rootClassName$1X = 'comp-toast-manager';
 var count = 0;
 var ToastManager = forwardRef(function (props, ref) {
   var _useState = useState([]),
@@ -11113,11 +11016,11 @@ var ToastManager = forwardRef(function (props, ref) {
   });
 
   var getClassNames = function getClassNames() {
-    return getMergedClassNames([rootClassName$1W + "-toasts", rootClassName$1W + "-" + props.verticalPosition, rootClassName$1W + "-" + props.horizontalPosition, props.reverse ? rootClassName$1W + "-reverse" : '', props.animateSize ? rootClassName$1W + "-animate-size" : '']);
+    return getMergedClassNames([rootClassName$1X + "-toasts", rootClassName$1X + "-" + props.verticalPosition, rootClassName$1X + "-" + props.horizontalPosition, props.reverse ? rootClassName$1X + "-reverse" : '', props.animateSize ? rootClassName$1X + "-animate-size" : '']);
   };
 
   useLayoutEffect(function () {
-    var wrapper = document.querySelector("." + rootClassName$1W + "-toasts");
+    var wrapper = document.querySelector("." + rootClassName$1X + "-toasts");
 
     if (wrapper && wrapper.childElementCount > 0) {
       var somaDasAlturas = 0;
@@ -11128,7 +11031,7 @@ var ToastManager = forwardRef(function (props, ref) {
         for (var i = 0; i < wrapper.children.length; i++) {
           var el = wrapper.children[i];
 
-          if (!el.classList.contains(rootClassName$1W + "-toast-exit")) {
+          if (!el.classList.contains(rootClassName$1X + "-toast-exit")) {
             el.style.transform = "translateY(" + somaDasAlturas + "px)";
             somaDasAlturas += el.getBoundingClientRect().height + 12;
           }
@@ -11137,7 +11040,7 @@ var ToastManager = forwardRef(function (props, ref) {
         for (var _i = wrapper.children.length - 1; _i >= 0; _i--) {
           var _el = wrapper.children[_i];
 
-          if (!_el.classList.contains(rootClassName$1W + "-toast-exit")) {
+          if (!_el.classList.contains(rootClassName$1X + "-toast-exit")) {
             somaDasAlturas += _el.getBoundingClientRect().height + 12;
             _el.style.transform = "translateY(" + somaDasAlturas + "px)";
           }
@@ -11146,7 +11049,7 @@ var ToastManager = forwardRef(function (props, ref) {
         for (var _i2 = 0; _i2 < wrapper.children.length; _i2++) {
           var _el2 = wrapper.children[_i2];
 
-          if (!_el2.classList.contains(rootClassName$1W + "-toast-exit")) {
+          if (!_el2.classList.contains(rootClassName$1X + "-toast-exit")) {
             somaDasAlturas += _el2.getBoundingClientRect().height + 12;
             _el2.style.transform = "translateY(-" + somaDasAlturas + "px)";
           }
@@ -11157,7 +11060,7 @@ var ToastManager = forwardRef(function (props, ref) {
         for (var _i3 = wrapper.children.length - 1; _i3 >= 0; _i3--) {
           var _el3 = wrapper.children[_i3];
 
-          if (!_el3.classList.contains(rootClassName$1W + "-toast-exit")) {
+          if (!_el3.classList.contains(rootClassName$1X + "-toast-exit")) {
             _el3.style.transform = "translateY(-" + somaDasAlturas + "px)";
             somaDasAlturas += _el3.getBoundingClientRect().height + 12;
           }
@@ -11170,11 +11073,11 @@ var ToastManager = forwardRef(function (props, ref) {
   }, arrayOfToast.map(function (toast) {
     return React.createElement(CSSTransition, {
       timeout: 300,
-      classNames: rootClassName$1W + "-toast",
+      classNames: rootClassName$1X + "-toast",
       key: toast.id,
       unmountOnExit: true
     }, React.createElement("div", {
-      className: rootClassName$1W + "-toastzin"
+      className: rootClassName$1X + "-toastzin"
     }, React.createElement(Toast, {
       theme: toast.type,
       label: toast.label,
@@ -11204,7 +11107,7 @@ var TooltipPosition;
   TooltipPosition["Bottom"] = "bottom";
 })(TooltipPosition || (TooltipPosition = {}));
 
-var rootClassName$1X = 'component-tooltip';
+var rootClassName$1Y = 'component-tooltip';
 function Tooltip(props) {
   var _useState = useState(props.id || getUniqueKey()),
       id = _useState[0];
@@ -11212,13 +11115,13 @@ function Tooltip(props) {
   var getProps = function getProps() {
     return _extends({}, props, {
       id: id,
-      className: getMergedClassNames([rootClassName$1X, props.className, rootClassName$1X + "-" + props.position])
+      className: getMergedClassNames([rootClassName$1Y, props.className, rootClassName$1Y + "-" + props.position])
     });
   };
 
   useEffect(function () {
     var element = document.querySelector("#" + id);
-    var triangle = element.querySelector("." + rootClassName$1X + "-triangle");
+    var triangle = element.querySelector("." + rootClassName$1Y + "-triangle");
     var bounding = element.getBoundingClientRect();
     var ScreenWidth = window.innerWidth;
 
@@ -11239,16 +11142,16 @@ function Tooltip(props) {
     }
   }, [id, props.position]);
   return React.createElement("div", {
-    className: rootClassName$1X + "-outer"
+    className: rootClassName$1Y + "-outer"
   }, React.createElement("div", Object.assign({}, getProps()), props.children, React.createElement("div", {
-    className: rootClassName$1X + "-triangle"
+    className: rootClassName$1Y + "-triangle"
   })));
 }
 Tooltip.defaultProps = {
   position: TooltipPosition.Top
 };
 
-var rootClassName$1Y = 'tooltip-manager';
+var rootClassName$1Z = 'tooltip-manager';
 function TooltipManager() {
   var _useState = useState([]),
       arrayOfTooltips = _useState[0],
@@ -11347,17 +11250,17 @@ function TooltipManager() {
     };
   }, []);
   return React.createElement(React.Fragment, null, React.createElement(TransitionGroup, {
-    className: rootClassName$1Y
+    className: rootClassName$1Z
   }, arrayOfTooltips.map(function (tooltip) {
     return React.createElement(CSSTransition, {
       timeout: 300,
-      classNames: rootClassName$1Y + "-tooltip",
+      classNames: rootClassName$1Z + "-tooltip",
       key: tooltip.id,
       unmountOnExit: true
     }, React.createElement(Tooltip, {
       id: tooltip.id,
       position: tooltip.position,
-      className: rootClassName$1Y + "-tooltip",
+      className: rootClassName$1Z + "-tooltip",
       style: _extends({}, tooltip.style),
       onMouseLeave: function onMouseLeave() {
         if (!document.querySelectorAll("[tooltip-id=" + tooltip.id + "]").length) {
@@ -11374,7 +11277,7 @@ function TooltipManager() {
 TooltipManager.propTypes = {};
 TooltipManager.defaultProps = {};
 
-var rootClassName$1Z = 'component-top-loader';
+var rootClassName$1_ = 'component-top-loader';
 function TopLoader(props) {
   return React.createElement(CSSTransition, {
     classNames: 'fade',
@@ -11382,11 +11285,11 @@ function TopLoader(props) {
     "in": props.opened,
     unmountOnExit: true
   }, React.createElement("div", {
-    className: rootClassName$1Z
+    className: rootClassName$1_
   }, React.createElement("div", {
-    className: rootClassName$1Z + "-logo"
+    className: rootClassName$1_ + "-logo"
   }, props.logo), props.status && React.createElement("div", {
-    className: rootClassName$1Z + "-status"
+    className: rootClassName$1_ + "-status"
   }, props.status)));
 }
 TopLoader.defaultProps = {
@@ -11395,11 +11298,11 @@ TopLoader.defaultProps = {
   })
 };
 
-var rootClassName$1_ = 'component-video-item';
+var rootClassName$1$ = 'component-video-item';
 function VideoItem(props) {
   var getProps = function getProps() {
     var p = _extends({}, props, {
-      className: getMergedClassNames([rootClassName$1_, props.className])
+      className: getMergedClassNames([rootClassName$1$, props.className])
     });
 
     delete p.url;
@@ -11416,20 +11319,20 @@ function VideoItem(props) {
     blackGround: props.blackGround || false
   })), React.createElement(Col$1, {
     cols: [12, 12, 6, 8, 8],
-    className: rootClassName$1_ + "-text-col"
+    className: rootClassName$1$ + "-text-col"
   }, React.createElement(Row$1, {
-    className: rootClassName$1_ + "-text-row"
+    className: rootClassName$1$ + "-text-row"
   }, React.createElement(Col$1, {
-    className: rootClassName$1_ + "-title"
+    className: rootClassName$1$ + "-title"
   }, props.title), React.createElement(Col$1, {
-    className: rootClassName$1_ + "-description nunito"
+    className: rootClassName$1$ + "-description nunito"
   }, props.description))));
 }
 VideoItem.defaultProps = {
   url: ''
 };
 
-var rootClassName$1$ = 'video-modal';
+var rootClassName$20 = 'video-modal';
 function VideoModal(props) {
   var handleClose = useCallback(function () {
     props.onClose(props.modalKey);
@@ -11437,7 +11340,7 @@ function VideoModal(props) {
   var filteredProps = useMemo(function () {
     var p = _extends({}, props, {
       id: props.id ? props.id : props.modalKey ? props.modalKey : "modal" + getUniqueKey(),
-      className: getMergedClassNames([rootClassName$1$, props.className || '', props.mobileOnXS ? 'mobile-on-xs' : '', rootClassName$1$ + "-" + String(props.size).toLowerCase()])
+      className: getMergedClassNames([rootClassName$20, props.className || '', props.mobileOnXS ? 'mobile-on-xs' : '', rootClassName$20 + "-" + String(props.size).toLowerCase()])
     });
 
     delete p.urlVideo;
@@ -11456,12 +11359,12 @@ function VideoModal(props) {
     return p;
   }, [props]);
   return React.createElement("div", Object.assign({}, filteredProps), React.createElement("div", {
-    className: rootClassName$1$ + "-close-button"
+    className: rootClassName$20 + "-close-button"
   }, React.createElement(IconButton$1, {
     onClick: handleClose,
     icon: React.createElement(CloseIcon, null)
   })), React.createElement("div", {
-    className: rootClassName$1$ + "-video-row"
+    className: rootClassName$20 + "-video-row"
   }, React.createElement(VideoPlayer, Object.assign({
     blackGround: true
   }, props.videoPlayerProps, {
@@ -11501,7 +11404,7 @@ function useDropOpened(initialState) {
   return [opened, toggleOpened];
 }
 
-var rootClassName$20 = 'comp-modal-manager';
+var rootClassName$21 = 'comp-modal-manager';
 var maskRootClassName$1 = 'component-modal-mask';
 
 var hackFocus$1 = function hackFocus() {
@@ -11587,14 +11490,14 @@ function useModalManager() {
   };
 
   return [React.createElement(React.Fragment, null, React.createElement(TransitionGroup, {
-    className: rootClassName$20 + "-modals"
+    className: rootClassName$21 + "-modals"
   }, arrayOfModal.map(function (obj) {
     var _obj$props, _obj$props2, _obj$props3;
 
     var M = obj.component;
     return React.createElement(CSSTransition, {
       timeout: 300,
-      classNames: (_obj$props = obj.props) !== null && _obj$props !== void 0 && _obj$props.mobileOnXS ? rootClassName$20 + "-mask-mobile-on-xs" : rootClassName$20 + "-mask",
+      classNames: (_obj$props = obj.props) !== null && _obj$props !== void 0 && _obj$props.mobileOnXS ? rootClassName$21 + "-mask-mobile-on-xs" : rootClassName$21 + "-mask",
       key: (_obj$props2 = obj.props) === null || _obj$props2 === void 0 ? void 0 : _obj$props2.modalKey,
       unmountOnExit: true
     }, React.createElement(ModalMask, {
@@ -11666,7 +11569,7 @@ function useScreenSize() {
   return value;
 }
 
-var rootClassName$21 = 'comp-toast-manager';
+var rootClassName$22 = 'comp-toast-manager';
 var count$1 = 0;
 function useToastManager(props) {
   var _useState = useState([]),
@@ -11714,10 +11617,10 @@ function useToastManager(props) {
     setArrayOfToast([]);
   }, []);
   var classNames = useMemo(function () {
-    return getMergedClassNames([rootClassName$21 + "-toasts", rootClassName$21 + "-" + verticalPosition, rootClassName$21 + "-" + horizontalPosition, reverse ? rootClassName$21 + "-reverse" : '', animateSize ? rootClassName$21 + "-animate-size" : '']);
+    return getMergedClassNames([rootClassName$22 + "-toasts", rootClassName$22 + "-" + verticalPosition, rootClassName$22 + "-" + horizontalPosition, reverse ? rootClassName$22 + "-reverse" : '', animateSize ? rootClassName$22 + "-animate-size" : '']);
   }, [reverse, animateSize, horizontalPosition, verticalPosition]);
   useLayoutEffect(function () {
-    var wrapper = document.querySelector("." + rootClassName$21 + "-toasts");
+    var wrapper = document.querySelector("." + rootClassName$22 + "-toasts");
 
     if (wrapper && wrapper.childElementCount > 0) {
       var somaDasAlturas = 0;
@@ -11728,7 +11631,7 @@ function useToastManager(props) {
         for (var i = 0; i < wrapper.children.length; i++) {
           var el = wrapper.children[i];
 
-          if (!el.classList.contains(rootClassName$21 + "-toast-exit")) {
+          if (!el.classList.contains(rootClassName$22 + "-toast-exit")) {
             el.style.transform = "translateY(" + somaDasAlturas + "px)";
             somaDasAlturas += el.getBoundingClientRect().height + 12;
           }
@@ -11737,7 +11640,7 @@ function useToastManager(props) {
         for (var _i = wrapper.children.length - 1; _i >= 0; _i--) {
           var _el = wrapper.children[_i];
 
-          if (!_el.classList.contains(rootClassName$21 + "-toast-exit")) {
+          if (!_el.classList.contains(rootClassName$22 + "-toast-exit")) {
             somaDasAlturas += _el.getBoundingClientRect().height + 12;
             _el.style.transform = "translateY(" + somaDasAlturas + "px)";
           }
@@ -11746,7 +11649,7 @@ function useToastManager(props) {
         for (var _i2 = 0; _i2 < wrapper.children.length; _i2++) {
           var _el2 = wrapper.children[_i2];
 
-          if (!_el2.classList.contains(rootClassName$21 + "-toast-exit")) {
+          if (!_el2.classList.contains(rootClassName$22 + "-toast-exit")) {
             somaDasAlturas += _el2.getBoundingClientRect().height + 12;
             _el2.style.transform = "translateY(-" + somaDasAlturas + "px)";
           }
@@ -11757,7 +11660,7 @@ function useToastManager(props) {
         for (var _i3 = wrapper.children.length - 1; _i3 >= 0; _i3--) {
           var _el3 = wrapper.children[_i3];
 
-          if (!_el3.classList.contains(rootClassName$21 + "-toast-exit")) {
+          if (!_el3.classList.contains(rootClassName$22 + "-toast-exit")) {
             _el3.style.transform = "translateY(-" + somaDasAlturas + "px)";
             somaDasAlturas += _el3.getBoundingClientRect().height + 12;
           }
@@ -11770,11 +11673,11 @@ function useToastManager(props) {
   }, arrayOfToast.map(function (toast) {
     return React.createElement(CSSTransition, {
       timeout: 300,
-      classNames: rootClassName$21 + "-toast",
+      classNames: rootClassName$22 + "-toast",
       key: toast.id,
       unmountOnExit: true
     }, React.createElement("div", {
-      className: rootClassName$21 + "-toastzin"
+      className: rootClassName$22 + "-toastzin"
     }, React.createElement(Toast, {
       theme: toast.theme,
       label: toast.label,