ui-kit-ck-consultant 0.5.148 → 0.5.152

package/dist/index.modern.js

@@ -382,7 +382,7 @@ var FormSelect = /*#__PURE__*/function (_React$Component) {
     }, "*") : '') : '', this.props.ignore !== true ? /*#__PURE__*/React.createElement("select", {
       className: style$5.form_select,
       onChange: this.props.onChange,
-      value: this.props.value,
+      value: this.props.value ? this.props.value : "DEFAULT",
       name: this.props.name,
       required: this.props.required,
       disabled: this.props.disabled,
@@ -399,7 +399,7 @@ var FormSelect = /*#__PURE__*/function (_React$Component) {
     }) : '') : /*#__PURE__*/React.createElement("select", {
       className: style$5.form_select,
       onChange: this.props.onChange,
-      value: this.props.value,
+      value: this.props.value ? this.props.value : "DEFAULT",
       name: this.props.name,
       required: this.props.required,
       disabled: this.props.disabled
@@ -1415,7 +1415,129 @@ var TabsCustomArrowMenu = /*#__PURE__*/function (_React$Component) {
   return TabsCustomArrowMenu;
 }(React.Component);
 
-var style$h = {"sidebar":"_2rooA","small":"_3Hv0y","mobile":"_1t5Wi","sidebar_header":"_2MRnG","sidebar_icon":"_1r537","button_hide":"_1OTTJ","sidebar_user":"_3iI4T","sidebar_user_icon":"_3wuAJ","sidebar_user_text":"_mb_54","sidebar_user_title":"_236yM","sidebar_user_subtitle":"_1z9F0","sidebar_body":"_1hv_V","sidebar_button":"_1iy27","sidebar_button_dropdown":"_1ZHFn","active":"_BPuzP","disabled":"_2BDmo","sidebar_button_second":"_2X9HU"};
+var style$h = {"tabs_edit":"_23a7-","tabs_edit_header":"_3zdac","tabs_edit_body":"_2cxzo","noCard":"_2WKxa","tabs_edit_menu":"_MFel7","active":"_32WLP","disabled":"_Eq4pW","tabs_edit_item":"_1lUyF"};
+
+var TabsEdit = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(TabsEdit, _React$Component);
+
+  function TabsEdit() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TabsEdit.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames$1(style$h.tabs_edit, this.props.className)
+    }, this.props.children);
+  };
+
+  return TabsEdit;
+}(React.Component);
+
+var TabsEditHeader = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(TabsEditHeader, _React$Component);
+
+  function TabsEditHeader() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TabsEditHeader.prototype;
+
+  _proto.render = function render() {
+    var _this = this;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames$1(style$h.tabs_edit_header, this.props.className)
+    }, /*#__PURE__*/React.createElement("div", null, this.props.children), /*#__PURE__*/React.createElement("div", {
+      cl: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cursor-pointer",
+      style: {
+        backgroundColor: 'var(--secondary-color)',
+        display: 'flex',
+        width: '40px',
+        height: '40px',
+        margin: 'auto',
+        borderRadius: '10px'
+      },
+      onClick: function onClick() {
+        return _this.props.onClickAdd ? _this.props.onClickAdd() : null;
+      }
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: "m-auto white",
+      icon: faPlus
+    }))));
+  };
+
+  return TabsEditHeader;
+}(React.Component);
+
+var TabsEditBody = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(TabsEditBody, _React$Component);
+
+  function TabsEditBody() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TabsEditBody.prototype;
+
+  _proto.render = function render() {
+    var _classNames;
+
+    var tabsBodyClass = classNames$1((_classNames = {}, _classNames[style$h.tabs_edit_body] = true, _classNames[style$h.noCard] = !!this.props.noCard, _classNames[this.props.className] = !!this.props.className, _classNames));
+    return /*#__PURE__*/React.createElement("div", {
+      className: tabsBodyClass
+    }, this.props.children);
+  };
+
+  return TabsEditBody;
+}(React.Component);
+
+var TabsEditItem = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(TabsEditItem, _React$Component);
+
+  function TabsEditItem() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TabsEditItem.prototype;
+
+  _proto.render = function render() {
+    var _classNames;
+
+    var tabsItemClass = classNames$1((_classNames = {}, _classNames[style$h.tabs_edit_item] = true, _classNames[style$h.active] = !!this.props.active, _classNames[this.props.className] = !!this.props.className, _classNames));
+    return /*#__PURE__*/React.createElement("div", {
+      className: tabsItemClass
+    }, this.props.children);
+  };
+
+  return TabsEditItem;
+}(React.Component);
+
+var TabsEditMenu = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(TabsEditMenu, _React$Component);
+
+  function TabsEditMenu() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TabsEditMenu.prototype;
+
+  _proto.render = function render() {
+    var _classNames;
+
+    var tabsMenuClass = classNames$1((_classNames = {}, _classNames[style$h.tabs_edit_menu] = true, _classNames[style$h.active] = !!this.props.active, _classNames[style$h.disabled] = !!this.props.disabled, _classNames[this.props.className] = !!this.props.className, _classNames));
+    return /*#__PURE__*/React.createElement("div", {
+      className: tabsMenuClass,
+      onClick: this.props.onClick
+    }, /*#__PURE__*/React.createElement("span", null, this.props.title));
+  };
+
+  return TabsEditMenu;
+}(React.Component);
+
+var style$i = {"sidebar":"_2rooA","small":"_3Hv0y","mobile":"_1t5Wi","sidebar_header":"_2MRnG","sidebar_icon":"_1r537","button_hide":"_1OTTJ","sidebar_user":"_3iI4T","sidebar_user_icon":"_3wuAJ","sidebar_user_text":"_mb_54","sidebar_user_title":"_236yM","sidebar_user_subtitle":"_1z9F0","sidebar_body":"_1hv_V","sidebar_button":"_1iy27","sidebar_button_dropdown":"_1ZHFn","active":"_BPuzP","disabled":"_2BDmo","sidebar_button_second":"_2X9HU"};
 
 var Sidebar = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Sidebar, _React$Component);
@@ -1561,43 +1683,43 @@ var Sidebar = /*#__PURE__*/function (_React$Component) {
         _classNames2,
         _this3 = this;
 
-    var sidebarClass = classNames$1((_classNames = {}, _classNames[style$h.small] = !!this.state.isHide, _classNames[style$h.mobile] = !!this.state.isMobile, _classNames), style$h.sidebar, this.props.className);
+    var sidebarClass = classNames$1((_classNames = {}, _classNames[style$i.small] = !!this.state.isHide, _classNames[style$i.mobile] = !!this.state.isMobile, _classNames), style$i.sidebar, this.props.className);
     return /*#__PURE__*/React.createElement("div", {
       className: sidebarClass
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$h.sidebar_header
+      className: style$i.sidebar_header
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$h.sidebar_icon
+      className: style$i.sidebar_icon
     }, this.props.icon ? /*#__PURE__*/React.createElement("img", {
       alt: "icon",
       src: this.props.icon
     }) : null), /*#__PURE__*/React.createElement("div", {
-      className: style$h.button_hide,
+      className: style$i.button_hide,
       onClick: this.handleHideClick
     }, this.state.isHide ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faCaretRight
     }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faCaretLeft
     }))), /*#__PURE__*/React.createElement("div", {
-      className: style$h.sidebar_user
+      className: style$i.sidebar_user
     }, this.props.picture ? /*#__PURE__*/React.createElement("div", {
-      className: style$h.sidebar_user_icon
+      className: style$i.sidebar_user_icon
     }, /*#__PURE__*/React.createElement("img", {
       src: this.props.picture,
       alt: 'profile'
     })) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       className: classNames$1((_classNames2 = {
         'm-auto': this.state.isHide === true
-      }, _classNames2[style$h.sidebar_user_icon] = true, _classNames2)),
+      }, _classNames2[style$i.sidebar_user_icon] = true, _classNames2)),
       icon: faUser
     }), this.state.isHide === false ? /*#__PURE__*/React.createElement("div", {
-      className: style$h.sidebar_user_text
+      className: style$i.sidebar_user_text
     }, /*#__PURE__*/React.createElement("span", {
-      className: style$h.sidebar_user_title
+      className: style$i.sidebar_user_title
     }, this.props.title), /*#__PURE__*/React.createElement("span", {
-      className: style$h.sidebar_user_subtitle
+      className: style$i.sidebar_user_subtitle
     }, this.props.subtitle)) : null), /*#__PURE__*/React.createElement("div", {
-      className: style$h.sidebar_body
+      className: style$i.sidebar_body
     }, this.state.views.map(function (element, idx) {
       if (element.path && element.isHide !== true) {
         var _classNames3;
@@ -1609,7 +1731,7 @@ var Sidebar = /*#__PURE__*/function (_React$Component) {
               _this3.handleChangeViewClick(element.path, idx);
             }
           },
-          className: classNames$1(style$h.sidebar_button, (_classNames3 = {}, _classNames3[style$h.active] = !!element.active, _classNames3[style$h.disabled] = !!element.disabled, _classNames3))
+          className: classNames$1(style$i.sidebar_button, (_classNames3 = {}, _classNames3[style$i.active] = !!element.active, _classNames3[style$i.disabled] = !!element.disabled, _classNames3))
         }, element.icon, /*#__PURE__*/React.createElement("span", null, element.name));
       } else if (element.isHide !== true) {
         var _classNames4;
@@ -1620,7 +1742,7 @@ var Sidebar = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             return _this3.handleDropdownClick(idx);
           },
-          className: classNames$1(style$h.sidebar_button_dropdown, (_classNames4 = {}, _classNames4[style$h.active] = !!element.active, _classNames4[style$h.disabled] = !!element.disabled, _classNames4))
+          className: classNames$1(style$i.sidebar_button_dropdown, (_classNames4 = {}, _classNames4[style$i.active] = !!element.active, _classNames4[style$i.disabled] = !!element.disabled, _classNames4))
         }, element.icon, /*#__PURE__*/React.createElement("span", null, element.name), element.active === true ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
           icon: faCaretDown
         }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -1637,7 +1759,7 @@ var Sidebar = /*#__PURE__*/function (_React$Component) {
                   _this3.handleChangeViewClick(elementDropdown.path, idx, idxDropdown);
                 }
               },
-              className: classNames$1(style$h.sidebar_button, style$h.sidebar_button_second, (_classNames5 = {}, _classNames5[style$h.active] = !!elementDropdown.active, _classNames5[style$h.disabled] = !!elementDropdown.disabled, _classNames5))
+              className: classNames$1(style$i.sidebar_button, style$i.sidebar_button_second, (_classNames5 = {}, _classNames5[style$i.active] = !!elementDropdown.active, _classNames5[style$i.disabled] = !!elementDropdown.disabled, _classNames5))
             }, elementDropdown.icon, /*#__PURE__*/React.createElement("span", null, elementDropdown.name)));
           }
         });
@@ -1649,7 +1771,7 @@ var Sidebar = /*#__PURE__*/function (_React$Component) {
   return Sidebar;
 }(React.Component);
 
-var style$i = {"doughnut_chart":"_3cUhz","text_doughnut_chart":"_3w6lM","text":"_2BjzU","number":"_25cuD","pie_chart":"_1uhd5","pie_chart_text":"_1U4br","bar_chart":"_2f4FH","bar_chart_text":"_2WPFA"};
+var style$j = {"doughnut_chart":"_3cUhz","text_doughnut_chart":"_3w6lM","text":"_2BjzU","number":"_25cuD","pie_chart":"_1uhd5","pie_chart_text":"_1U4br","bar_chart":"_2f4FH","bar_chart_text":"_2WPFA"};
 
 var DoughnutChart = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(DoughnutChart, _React$Component);
@@ -1689,7 +1811,7 @@ var DoughnutChart = /*#__PURE__*/function (_React$Component) {
       }]
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$i.doughnut_chart, this.props.className)
+      className: classNames$1(style$j.doughnut_chart, this.props.className)
     }, /*#__PURE__*/React.createElement(Doughnut, {
       id: this.props.text,
       data: data,
@@ -1715,17 +1837,17 @@ var DoughnutChart = /*#__PURE__*/function (_React$Component) {
         }
       }
     }), /*#__PURE__*/React.createElement("div", {
-      className: style$i.text_doughnut_chart
+      className: style$j.text_doughnut_chart
     }, /*#__PURE__*/React.createElement("p", {
       style: {
         color: this.getColor(num, max)
       },
-      className: style$i.number
+      className: style$j.number
     }, num, unit), /*#__PURE__*/React.createElement("p", {
       style: {
         color: this.getColor(num, max)
       },
-      className: style$i.text
+      className: style$j.text
     }, text)));
   };
 
@@ -1888,9 +2010,9 @@ var BarChart = /*#__PURE__*/function (_React$Component) {
       datasets: this.createDatasets(this.props.dataSet.length)
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(style$i.bar_chart, this.props.className)
+      className: classNames(style$j.bar_chart, this.props.className)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$i.bar_chart_text
+      className: style$j.bar_chart_text
     }, /*#__PURE__*/React.createElement("span", null, this.props.title)), /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'relative',
@@ -2075,9 +2197,9 @@ var RadarChart = /*#__PURE__*/function (_Component) {
       datasets: this.createDatasets(this.props.dataSet.length)
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(style$i.bar_chart, this.props.className)
+      className: classNames(style$j.bar_chart, this.props.className)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$i.bar_chart_text
+      className: style$j.bar_chart_text
     }, /*#__PURE__*/React.createElement("span", null, this.props.title)), /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'relative',
@@ -2141,9 +2263,9 @@ var PieChart = /*#__PURE__*/function (_React$Component) {
     var _this = this;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(style$i.pie_chart, this.props.className)
+      className: classNames(style$j.pie_chart, this.props.className)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$i.pie_chart_text
+      className: style$j.pie_chart_text
     }, /*#__PURE__*/React.createElement("span", null, this.props.title)), /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'relative',
@@ -2339,9 +2461,9 @@ var HorizontalBarChart = /*#__PURE__*/function (_React$Component) {
       datasets: this.createDatasets(this.props.dataSet.length)
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(style$i.bar_chart, this.props.className)
+      className: classNames(style$j.bar_chart, this.props.className)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$i.bar_chart_text
+      className: style$j.bar_chart_text
     }, /*#__PURE__*/React.createElement("span", null, this.props.title)), /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'relative',
@@ -2379,7 +2501,7 @@ var HorizontalBarChart = /*#__PURE__*/function (_React$Component) {
   return HorizontalBarChart;
 }(React.Component);
 
-var style$j = {"progress_bar_container":"_bHyVu","bar":"_XOUj6","custom_progress":"_jBsK1"};
+var style$k = {"progress_bar_container":"_bHyVu","bar":"_XOUj6","custom_progress":"_jBsK1"};
 
 var ProgressBar = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ProgressBar, _React$Component);
@@ -2458,12 +2580,12 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
     var max = this.props.max ? this.props.max : 100;
     var value = this.props.value ? this.props.value : 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$j.progress_bar_container, this.props.className)
+      className: classNames$1(style$k.progress_bar_container, this.props.className)
     }, /*#__PURE__*/React.createElement("span", null, this.props.title), /*#__PURE__*/React.createElement("div", {
-      className: style$j.bar,
+      className: style$k.bar,
       ref: this.refProgress
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$j.custom_progress, this.getColor(value, max)),
+      className: classNames$1(style$k.custom_progress, this.getColor(value, max)),
       style: {
         width: this.state.width
       }
@@ -2473,7 +2595,7 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
   return ProgressBar;
 }(React.Component);
 
-var style$k = {"loader_container":"_3me5z","loader_element":"_2CYNt","loader":"_3ysPX","grow":"_971Mp"};
+var style$l = {"loader_container":"_3me5z","loader_element":"_2CYNt","loader":"_3ysPX","grow":"_971Mp"};
 
 var Loader = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Loader, _React$Component);
@@ -2495,18 +2617,18 @@ var Loader = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     if (!this.props.show) return null;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$k.loader_container, this.props.className)
+      className: classNames$1(style$l.loader_container, this.props.className)
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$k.loader_element, this.props.classNameChildren)
+      className: classNames$1(style$l.loader_element, this.props.classNameChildren)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$k.loader
+      className: style$l.loader
     }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null)), this.props.message ? /*#__PURE__*/React.createElement("p", null, this.props.message) : null));
   };
 
   return Loader;
 }(React.Component);
 
-var style$l = {"icon":"_3s1Vv"};
+var style$m = {"icon":"_3s1Vv"};
 
 var Icon = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Icon, _React$Component);
@@ -2538,7 +2660,7 @@ var Icon = /*#__PURE__*/function (_React$Component) {
         fontSize: this.props.size ? this.props.size + 'px' : 'none'
       }
     }, this.props.icon({
-      className: classNames$1(style$l.icon),
+      className: classNames$1(style$m.icon),
       color: this.state.colorStyle
     }));
   };
@@ -2546,7 +2668,7 @@ var Icon = /*#__PURE__*/function (_React$Component) {
   return Icon;
 }(React.Component);
 
-var style$m = {"paginationContainer":"_25d6Y","pagination":"_2mqrQ","active":"_13Qaa","disabled":"_11Sql"};
+var style$n = {"paginationContainer":"_25d6Y","pagination":"_2mqrQ","active":"_13Qaa","disabled":"_11Sql"};
 
 var Pagination = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Pagination, _React$Component);
@@ -2559,11 +2681,11 @@ var Pagination = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$m.paginationContainer, this.props.className)
+      className: classNames$1(style$n.paginationContainer, this.props.className)
     }, /*#__PURE__*/React.createElement(PaginationCMP, {
-      innerClass: style$m.pagination,
-      activeClass: style$m.active,
-      disabledClass: style$m.disabled,
+      innerClass: style$n.pagination,
+      activeClass: style$n.active,
+      disabledClass: style$n.disabled,
       activePage: this.props.activePage,
       itemsCountPerPage: this.props.itemsCountPerPage,
       totalItemsCount: this.props.totalItemsCount,
@@ -2684,7 +2806,7 @@ var PaginationClass = /*#__PURE__*/function () {
   return PaginationClass;
 }();
 
-var style$n = {"FormDragDropFile_container":"_2tyK_","btn_close_drag_drop":"_1shfD","dropzone_multiple_container":"_HCj8R","background_text":"_2NB9V","dropzone_multiple_items":"_c3Txp","dropzone_multiple_item":"_WAS8S","delete_item_container":"_34DnJ"};
+var style$o = {"FormDragDropFile_container":"_2tyK_","btn_close_drag_drop":"_1shfD","dropzone_multiple_container":"_HCj8R","background_text":"_2NB9V","dropzone_multiple_items":"_c3Txp","dropzone_multiple_item":"_WAS8S","delete_item_container":"_34DnJ"};
 
 var Dropzone = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Dropzone, _React$Component);
@@ -2799,7 +2921,7 @@ var Dropzone = /*#__PURE__*/function (_React$Component) {
     var _this3 = this;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$n.FormDragDropFile_container, this.props.className)
+      className: classNames$1(style$o.FormDragDropFile_container, this.props.className)
     }, /*#__PURE__*/React.createElement(DropzoneCMP, {
       className: classNames$1(this.props.classNameChildren),
       onDrop: function onDrop(acceptedFiles) {
@@ -2815,7 +2937,7 @@ var Dropzone = /*#__PURE__*/function (_React$Component) {
           borderColor: _this3.state.borderColor
         }
       }, /*#__PURE__*/React.createElement("div", {
-        className: style$n.btn_close_drag_drop,
+        className: style$o.btn_close_drag_drop,
         style: {
           display: _this3.state.styleBtnClose
         }
@@ -2857,12 +2979,12 @@ var DropzoneMultiple = /*#__PURE__*/function (_React$Component) {
     _this.getFileComponent = function (idx) {
       return /*#__PURE__*/React.createElement("div", {
         key: idx,
-        className: classNames$1(style$n.dropzone_multiple_item, 'not-click'),
+        className: classNames$1(style$o.dropzone_multiple_item, 'not-click'),
         onClick: function onClick() {
           return _this.handleDeleteFile(idx);
         }
       }, /*#__PURE__*/React.createElement("div", {
-        className: classNames$1(style$n.delete_item_container)
+        className: classNames$1(style$o.delete_item_container)
       }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faTrash
       })), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -2991,7 +3113,7 @@ var DropzoneMultiple = /*#__PURE__*/function (_React$Component) {
       var getRootProps = _ref.getRootProps,
           getInputProps = _ref.getInputProps;
       return /*#__PURE__*/React.createElement("section", {
-        className: classNames$1(style$n.dropzone_multiple_container, _this2.props.className)
+        className: classNames$1(style$o.dropzone_multiple_container, _this2.props.className)
       }, /*#__PURE__*/React.createElement("div", _extends({}, getRootProps({
         onClick: function onClick(e) {
           if (_this2.hasParentClass(e.target, e.currentTarget, 'not-click')) {
@@ -2999,9 +3121,9 @@ var DropzoneMultiple = /*#__PURE__*/function (_React$Component) {
           }
         }
       }), {
-        className: classNames$1(style$n.dropzone_multiple_items)
+        className: classNames$1(style$o.dropzone_multiple_items)
       }), !_this2.state.files.length ? /*#__PURE__*/React.createElement("span", {
-        className: classNames$1(style$n.background_text)
+        className: classNames$1(style$o.background_text)
       }, "Glisser et d\xE9poser vos fichiers ou cliquer pour en s\xE9lectionner...", ' ', _this2.props.extensions ? "Formats accept\xE9s : " + _this2.props.extensions.join(', ') : '') : null, /*#__PURE__*/React.createElement("input", getInputProps()), _this2.state.files.map(function (file, idx) {
         return _this2.getFileComponent(idx);
       })));
@@ -3011,7 +3133,7 @@ var DropzoneMultiple = /*#__PURE__*/function (_React$Component) {
   return DropzoneMultiple;
 }(React.Component);
 
-var style$o = {"status":"_2qV1W"};
+var style$p = {"status":"_2qV1W"};
 
 var Status = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Status, _React$Component);
@@ -3024,7 +3146,7 @@ var Status = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(style$o.status, this.props.className),
+      className: classNames(style$p.status, this.props.className),
       style: this.props.style
     }, this.props.text);
   };
@@ -3032,7 +3154,7 @@ var Status = /*#__PURE__*/function (_React$Component) {
   return Status;
 }(React.Component);
 
-var style$p = {"alert_container":"_361mk","alert":"_22nl5","alert_element":"_2fV2F","alert_element_icon":"_1UPB2"};
+var style$q = {"alert_container":"_361mk","alert":"_22nl5","alert_element":"_2fV2F","alert_element_icon":"_1UPB2"};
 
 var AlertContainer = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(AlertContainer, _React$Component);
@@ -3045,7 +3167,7 @@ var AlertContainer = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: style$p.alert_container
+      className: style$q.alert_container
     }, this.props.children);
   };
 
@@ -3073,7 +3195,7 @@ var Alert = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$p.alert, this.props.backgroundColor)
+      className: classNames$1(style$q.alert, this.props.backgroundColor)
     }, /*#__PURE__*/React.createElement("span", {
       className: this.props.textColor
     }, this.props.text));
@@ -3093,18 +3215,18 @@ var AlertElement = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$p.alert_element, this.props.backgroundColor)
+      className: classNames$1(style$q.alert_element, this.props.backgroundColor)
     }, /*#__PURE__*/React.createElement("span", {
       className: this.props.textColor
     }, this.props.children), /*#__PURE__*/React.createElement("span", {
-      className: classNames$1(style$p.alert_element_icon, this.props.textColor)
+      className: classNames$1(style$q.alert_element_icon, this.props.textColor)
     }, this.props.icon));
   };
 
   return AlertElement;
 }(React.Component);
 
-var style$q = {"component":"_2wEDs","display-chips":"_1soMq","chips":"_1bGM-","buttonIcon":"_EFdFp"};
+var style$r = {"component":"_2wEDs","display-chips":"_1soMq","chips":"_1bGM-","buttonIcon":"_EFdFp"};
 
 var Chips = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Chips, _Component);
@@ -3174,15 +3296,15 @@ var Chips = /*#__PURE__*/function (_Component) {
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$q.component)
+      className: classNames$1(style$r.component)
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$q['display-chips'])
+      className: classNames$1(style$r['display-chips'])
     }, this.state.chipsList.length > 0 ? this.state.chipsList.map(function (chips, idx) {
       return /*#__PURE__*/React.createElement("div", {
         key: idx,
-        className: classNames$1(style$q.chips)
+        className: classNames$1(style$r.chips)
       }, /*#__PURE__*/React.createElement("div", null, chips.text), /*#__PURE__*/React.createElement(ButtonIcon, {
-        className: classNames$1(style$q.buttonIcon),
+        className: classNames$1(style$r.buttonIcon),
         onClick: function onClick() {
           return _this2.handleClick(chips);
         }
@@ -3203,7 +3325,7 @@ var Chips = /*#__PURE__*/function (_Component) {
   return Chips;
 }(Component);
 
-var style$r = {"listing_horizontal_container":"_64Nqe","listing_horizontal":"_2RiQY","listing_horizontal_icon":"_3CtDc","listing_green":"_2R0Mr","listing_orange":"_3V863","listing_horizontal_text":"_3cuTE","listing_horizontal_separator":"_1RaCo","listing_vertical_container":"_3dZW8","listing_vertical":"_wYzrK","listing_vertical_left":"_uTVeE","listing_vertical_right":"_3v-1E","listing_vertical_separator":"_1VFRz"};
+var style$s = {"listing_horizontal_container":"_64Nqe","listing_horizontal":"_2RiQY","listing_horizontal_icon":"_3CtDc","listing_green":"_2R0Mr","listing_orange":"_3V863","listing_horizontal_text":"_3cuTE","listing_horizontal_separator":"_1RaCo","listing_vertical_container":"_3dZW8","listing_vertical":"_wYzrK","listing_vertical_left":"_uTVeE","listing_vertical_right":"_3v-1E","listing_vertical_separator":"_1VFRz"};
 
 var ListingVerticalItem = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ListingVerticalItem, _React$Component);
@@ -3217,15 +3339,15 @@ var ListingVerticalItem = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var _classNames;
 
-    var listingClass = classNames$1((_classNames = {}, _classNames[style$r.listing_vertical] = true, _classNames[style$r.listing_green] = !!this.props.green, _classNames[style$r.listing_orange] = !!this.props.orange, _classNames));
+    var listingClass = classNames$1((_classNames = {}, _classNames[style$s.listing_vertical] = true, _classNames[style$s.listing_green] = !!this.props.green, _classNames[style$s.listing_orange] = !!this.props.orange, _classNames));
     return /*#__PURE__*/React.createElement("div", {
       className: listingClass
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_vertical_left
+      className: style$s.listing_vertical_left
     }, this.props.green ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faCheck
     }) : ''), /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_vertical_right
+      className: style$s.listing_vertical_right
     }, /*#__PURE__*/React.createElement("span", null, this.props.title), /*#__PURE__*/React.createElement("span", null, this.props.subtitle)));
   };
 
@@ -3243,7 +3365,7 @@ var ListingVerticalSeparator = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_vertical_separator
+      className: style$s.listing_vertical_separator
     }, /*#__PURE__*/React.createElement("span", null, "|"));
   };
 
@@ -3293,7 +3415,7 @@ var ListingVertical = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_vertical_container
+      className: style$s.listing_vertical_container
     }, this.getData());
   };
 
@@ -3312,15 +3434,15 @@ var ListingHorizontalItem = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var _classNames;
 
-    var listingClass = classNames$1((_classNames = {}, _classNames[style$r.listing_horizontal] = true, _classNames[style$r.listing_green] = !!this.props.green, _classNames[style$r.listing_orange] = !!this.props.orange, _classNames));
+    var listingClass = classNames$1((_classNames = {}, _classNames[style$s.listing_horizontal] = true, _classNames[style$s.listing_green] = !!this.props.green, _classNames[style$s.listing_orange] = !!this.props.orange, _classNames));
     return /*#__PURE__*/React.createElement("div", {
       className: listingClass
     }, /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_horizontal_icon
+      className: style$s.listing_horizontal_icon
     }, this.props.icon ? this.props.icon : this.props.green ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faCheck
     }) : ''), /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_horizontal_text
+      className: style$s.listing_horizontal_text
     }, /*#__PURE__*/React.createElement("span", null, this.props.date), /*#__PURE__*/React.createElement("span", null, this.props.title), /*#__PURE__*/React.createElement("span", null, this.props.subtitle)));
   };
 
@@ -3338,7 +3460,7 @@ var ListingHorizontalSeparator = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_horizontal_separator,
+      className: style$s.listing_horizontal_separator,
       style: {
         width: this.props.width
       }
@@ -3388,7 +3510,7 @@ var ListingHorizontal = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var separatorWidth = (this.props.data.length > 0 ? (this.props.data.length - 1) * 140 : 0) + "px";
     return /*#__PURE__*/React.createElement("div", {
-      className: style$r.listing_horizontal_container
+      className: style$s.listing_horizontal_container
     }, /*#__PURE__*/React.createElement(ListingHorizontalSeparator, {
       width: separatorWidth
     }), this.getData());
@@ -3397,7 +3519,7 @@ var ListingHorizontal = /*#__PURE__*/function (_React$Component) {
   return ListingHorizontal;
 }(React.Component);
 
-var style$s = {"dropdown":"_1ofQJ","dropdown_first":"_2kN79","space":"_SCby-","dropdown_menu":"_2Y_fS","show":"_3nBzR"};
+var style$t = {"dropdown":"_1ofQJ","dropdown_first":"_2kN79","space":"_SCby-","dropdown_menu":"_2Y_fS","show":"_3nBzR"};
 
 var Dropdown = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Dropdown, _Component);
@@ -3418,18 +3540,18 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     var _classNames,
         _this2 = this;
 
-    var dropdownMenuClass = classNames$1((_classNames = {}, _classNames[style$s.dropdown_menu] = true, _classNames[style$s.show] = !this.state.isHide, _classNames));
+    var dropdownMenuClass = classNames$1((_classNames = {}, _classNames[style$t.dropdown_menu] = true, _classNames[style$t.show] = !this.state.isHide, _classNames));
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$s.dropdown)
+      className: classNames$1(style$t.dropdown)
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$s.dropdown_first),
+      className: classNames$1(style$t.dropdown_first),
       onClick: function onClick() {
         return _this2.setState({
           isHide: !_this2.state.isHide
         });
       }
     }, this.props.title ? /*#__PURE__*/React.createElement("span", null, this.props.title) : /*#__PURE__*/React.createElement(Fragment, null), this.props.title && this.props.icon ? /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$s.space)
+      className: classNames$1(style$t.space)
     }) : /*#__PURE__*/React.createElement(Fragment, null), this.props.icon ? this.props.icon : /*#__PURE__*/React.createElement(Fragment, null)), /*#__PURE__*/React.createElement("div", {
       className: dropdownMenuClass
     }, this.props.data.map(function (element) {
@@ -3440,7 +3562,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   return Dropdown;
 }(Component);
 
-var style$t = {"error_full":"_2yA72","error_center":"_29Plu","error_center_group":"_38Iim","error_title":"_1G6Al","error_code":"_1aeC7","error_text":"_QYnsV"};
+var style$u = {"error_full":"_2yA72","error_center":"_29Plu","error_center_group":"_38Iim","error_title":"_1G6Al","error_code":"_1aeC7","error_text":"_QYnsV"};
 
 var Error404 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Error404, _React$Component);
@@ -3459,15 +3581,15 @@ var Error404 = /*#__PURE__*/function (_React$Component) {
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$t.error_full)
+      className: classNames$1(style$u.error_full)
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$t.error_center)
+      className: classNames$1(style$u.error_center)
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$t.error_center_group)
+      className: classNames$1(style$u.error_center_group)
     }, /*#__PURE__*/React.createElement("h3", {
-      className: classNames$1(style$t.error_title)
+      className: classNames$1(style$u.error_title)
     }, "Page not found"), /*#__PURE__*/React.createElement("h1", {
-      className: classNames$1(style$t.error_code)
+      className: classNames$1(style$u.error_code)
     }, /*#__PURE__*/React.createElement("span", {
       style: {
         'text-shadow': '-8px 0 0 #fff'
@@ -3481,7 +3603,7 @@ var Error404 = /*#__PURE__*/function (_React$Component) {
         'text-shadow': '-8px 0 0 #fff'
       }
     }, "4"))), /*#__PURE__*/React.createElement("h2", {
-      className: classNames$1(style$t.error_text)
+      className: classNames$1(style$u.error_text)
     }, this.props.text ? this.props.text : "La page n'existe pas"), /*#__PURE__*/React.createElement(Button, {
       onClick: function onClick() {
         return _this2.props.onBack ? _this2.props.onBack() : window.history.back();
@@ -3612,7 +3734,7 @@ var Cookie = /*#__PURE__*/function (_React$Component) {
   return Cookie;
 }(React.Component);
 
-var style$u = {"footer":"_2OnkF"};
+var style$v = {"footer":"_2OnkF"};
 
 var Footer = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Footer, _React$Component);
@@ -3629,7 +3751,7 @@ var Footer = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: style$u.footer
+      className: style$v.footer
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
       src: this.props.logo
     })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
@@ -3646,7 +3768,7 @@ var Footer = /*#__PURE__*/function (_React$Component) {
   return Footer;
 }(React.Component);
 
-var style$v = {"switch_container":"_3iRjz","switch":"_zCJtD"};
+var style$w = {"switch_container":"_3iRjz","switch":"_zCJtD"};
 
 var Switch = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Switch, _React$Component);
@@ -3667,11 +3789,11 @@ var Switch = /*#__PURE__*/function (_React$Component) {
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$v.switch_container, this.props.className)
+      className: classNames$1(style$w.switch_container, this.props.className)
     }, this.props.title ? /*#__PURE__*/React.createElement("span", {
       className: this.props.classNameTitle
     }, this.props.title) : null, /*#__PURE__*/React.createElement("div", {
-      className: classNames$1(style$v["switch"])
+      className: classNames$1(style$w["switch"])
     }, /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
         return _this2.setState({
@@ -3702,5 +3824,140 @@ var Switch = /*#__PURE__*/function (_React$Component) {
   return Switch;
 }(React.Component);
 
-export { Alert, AlertContainer, AlertElement, BarChart, Button, ButtonIcon, Card, CardColor, CardStatistics, CardTabs, Chips, Cookie, DoughnutChart, Dropdown, Dropzone, DropzoneMultiple, Error404, FloatActionButton, FloatActionButtonItem, Footer, FormCheckbox, FormInput, FormRadio, FormRange, FormSelect, FormTextarea, FullModal, Header, HorizontalBarChart, Icon, ListingHorizontal, ListingVertical, Loader, Modal, Nav, Pagination, PaginationClass, PieChart, ProgressBar, RadarChart, Sidebar, Signature, Slider, Status, Switch, Table, Tabs, TabsBody, TabsCustom, TabsCustomArrowCustom as TabsCustomArrow, TabsCustomArrowBody, TabsCustomArrowHeader, TabsCustomArrowItem, TabsCustomArrowMenu, TabsCustomBody, TabsCustomHeader, TabsCustomItem, TabsCustomMenu, TabsHeader, TabsItem, TabsMenu, Tbody, Td, Th, Thead, Tr };
+var Gauge = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Gauge, _React$Component);
+
+  function Gauge(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {
+      position: 0
+    };
+    return _this;
+  }
+
+  var _proto = Gauge.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.position) {
+      this.setState({
+        position: this.props.position
+      });
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.position !== this.props.position && this.props.position !== this.state.position) {
+      this.setState({
+        position: this.props.position
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: this.props.className
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'inline-block',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        color: 'var(--black)',
+        marginBottom: '16px'
+      }
+    }, this.props.title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        width: '100%',
+        height: '22px',
+        backgroundImage: this.props.colors.length === 3 ? "linear-gradient(to right, " + this.props.colors[0] + " 0%, " + this.props.colors[1] + " 50%, " + this.props.colors[2] + " 100%)" : "linear-gradient(to right, " + this.props.colors[0] + ", " + this.props.colors[1] + ")",
+        borderRadius: '8px'
+      },
+      onClick: function onClick(e) {
+        var currentTargetRect = e.currentTarget.getBoundingClientRect();
+        var width = currentTargetRect.width;
+        var positionX = e.pageX - currentTargetRect.left;
+        var step = _this2.props.step ? _this2.props.step : 1;
+        var position = positionX * 100 / width - positionX * 100 / width % step;
+
+        _this2.setState({
+          position: position
+        }, function () {
+          return _this2.props.onChange ? _this2.props.onChange(position) : null;
+        });
+      }
+    }, this.props.min ? /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.props.min + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-18px',
+        fontSize: '10px'
+      }
+    }, "MIN"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: '4px',
+        height: '28px',
+        borderRadius: '4px',
+        top: '-3px',
+        backgroundColor: 'black',
+        left: this.props.min + '%',
+        transform: 'translateX(-50%)'
+      }
+    })) : null, this.props.max ? /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.props.max + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-18px',
+        fontSize: '10px'
+      }
+    }, "MAX"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: '4px',
+        height: '28px',
+        borderRadius: '4px',
+        top: '-3px',
+        backgroundColor: 'black',
+        left: this.props.max + '%',
+        transform: 'translateX(-50%)'
+      }
+    })) : null, this.props.noText ? null : /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.state.position + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-16px',
+        fontSize: '10px',
+        fontWeight: 'bold',
+        transition: '0.3s'
+      }
+    }, parseInt(this.state.position), "%"), /*#__PURE__*/React.createElement("div", {
+      className: "cursor-pointer",
+      style: {
+        position: 'absolute',
+        bottom: '-6px',
+        width: 0,
+        height: 0,
+        borderLeft: '10px solid transparent',
+        borderRight: '10px solid transparent',
+        borderBottom: '18px solid black',
+        transform: 'translateX(-50%)',
+        left: this.state.position + '%'
+      }
+    }))));
+  };
+
+  return Gauge;
+}(React.Component);
+
+export { Alert, AlertContainer, AlertElement, BarChart, Button, ButtonIcon, Card, CardColor, CardStatistics, CardTabs, Chips, Cookie, DoughnutChart, Dropdown, Dropzone, DropzoneMultiple, Error404, FloatActionButton, FloatActionButtonItem, Footer, FormCheckbox, FormInput, FormRadio, FormRange, FormSelect, FormTextarea, FullModal, Gauge, Header, HorizontalBarChart, Icon, ListingHorizontal, ListingVertical, Loader, Modal, Nav, Pagination, PaginationClass, PieChart, ProgressBar, RadarChart, Sidebar, Signature, Slider, Status, Switch, Table, Tabs, TabsBody, TabsCustom, TabsCustomArrowCustom as TabsCustomArrow, TabsCustomArrowBody, TabsCustomArrowHeader, TabsCustomArrowItem, TabsCustomArrowMenu, TabsCustomBody, TabsCustomHeader, TabsCustomItem, TabsCustomMenu, TabsEdit, TabsEditBody, TabsEditHeader, TabsEditItem, TabsEditMenu, TabsHeader, TabsItem, TabsMenu, Tbody, Td, Th, Thead, Tr };
 //# sourceMappingURL=index.modern.js.map