@festo-ui/react 3.0.0-pre-20220111.1 → 3.1.0-pre-20220203.4

package/{react.esm.js → index.esm.js}

@@ -49,50 +49,49 @@ function useForkRef(refA, refB) {
    * This means react will call the old forkRef with `null` and the new forkRef
    * with the ref. Cleanup naturally emerges from this behavior
    */
-  return React.useMemo(function () {
+  return React.useMemo(() => {
     if (refA == null && refB == null) {
       return null;
     }
 
-    return function (instance) {
+    return instance => {
       setRef(refA, instance);
       setRef(refB, instance);
     };
   }, [refA, refB]);
 }
 
-var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var head = _ref.head,
-      isOpen = _ref.isOpen,
-      body = _ref.body,
-      onClose = _ref.onClose,
-      className = _ref.className,
-      children = _ref.children;
-  var backdropRef = useRef(null);
-  var modalRef = useRef(null);
-  var combinedRef = useForkRef(ref, modalRef);
+const Modal = /*#__PURE__*/forwardRef(({
+  head,
+  isOpen,
+  body,
+  onClose,
+  className,
+  children
+}, ref) => {
+  const backdropRef = useRef(null);
+  const modalRef = useRef(null);
+  const combinedRef = useForkRef(ref, modalRef);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CSSTransition, {
     nodeRef: backdropRef,
     unmountOnExit: true,
     timeout: {
       exit: 600
     },
-    "in": isOpen,
+    in: isOpen,
     classNames: "fr-modal-backdrop",
     appear: true
   }, /*#__PURE__*/React.createElement("div", {
     ref: backdropRef,
     className: "fr-modal-backdrop fwe-modal-backdrop"
   })), /*#__PURE__*/React.createElement(OutsideClickHandler, {
-    onOutsideClick: function onOutsideClick() {
-      return onClose ? onClose() : undefined;
-    }
+    onOutsideClick: () => onClose ? onClose() : undefined
   }, /*#__PURE__*/React.createElement(CSSTransition, {
     ref: modalRef,
     unmountOnExit: true,
     classNames: "fr-modal",
     appear: true,
-    "in": isOpen,
+    in: isOpen,
     timeout: {
       exit: 600
     }
@@ -118,10 +117,11 @@ var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, body), children))));
 });
 
-var ModalFooter = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var fullWidth = _ref.fullWidth,
-      children = _ref.children,
-      className = _ref.className;
+const ModalFooter = /*#__PURE__*/forwardRef(({
+  fullWidth,
+  children,
+  className
+}, ref) => {
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: classNames('fwe-modal-footer', className)
@@ -133,16 +133,18 @@ var ModalFooter = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 
 function AlertModal(_a) {
-  var alertType = _a.alertType,
-      title = _a.title,
-      className = _a.className,
-      body = _a.body,
-      strong = _a.strong,
-      subtitle = _a.subtitle,
-      cancel = _a.cancel,
-      ok = _a.ok,
-      onCancel = _a.onCancel,
-      onOk = _a.onOk,
+  var {
+    alertType,
+    title,
+    className,
+    body,
+    strong,
+    subtitle,
+    cancel,
+    ok,
+    onCancel,
+    onOk
+  } = _a,
       props = __rest(_a, ["alertType", "title", "className", "body", "strong", "subtitle", "cancel", "ok", "onCancel", "onOk"]);
 
   return /*#__PURE__*/React.createElement(Modal, Object.assign({
@@ -193,13 +195,14 @@ function AlertModal(_a) {
  * Breadcrumb navigation can be used on pages with multiple navigation levels.
  */
 
-function Breadcrumb(_ref) {
-  var locations = _ref.locations,
-      _onClick = _ref.onClick,
-      children = _ref.children,
-      className = _ref.className;
-  var childrenList = [];
-  React.Children.forEach(children, function (element) {
+function Breadcrumb({
+  locations,
+  onClick,
+  children,
+  className
+}) {
+  const childrenList = [];
+  React.Children.forEach(children, element => {
     if ( /*#__PURE__*/React.isValidElement(element)) {
       childrenList.push(Object.assign(Object.assign({}, element), {
         props: Object.assign(Object.assign({}, element.props), {
@@ -210,41 +213,32 @@ function Breadcrumb(_ref) {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('fwe-breadcrumb', className)
-  }, locations ? locations.map(function (location, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: location.url
-    }, /*#__PURE__*/React.createElement("a", {
-      className: "fr-breadcrumb-location",
-      href: location.url,
-      onClick: function onClick(e) {
-        return _onClick ? _onClick(e) : undefined;
-      }
-    }, location.label), index + 1 < locations.length && /*#__PURE__*/React.createElement("i", {
-      className: "fwe-icon fwe-icon-arrows-right-2"
-    }));
-  }) : childrenList.map(function (child, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: child.props.children
-    }, child, " ", index + 1 < childrenList.length && /*#__PURE__*/React.createElement("i", {
-      className: "fwe-icon fwe-icon-arrows-right-2"
-    }));
-  }));
+  }, locations ? locations.map((location, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: location.url
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "fr-breadcrumb-location",
+    href: location.url,
+    onClick: e => onClick ? onClick(e) : undefined
+  }, location.label), index + 1 < locations.length && /*#__PURE__*/React.createElement("i", {
+    className: "fwe-icon fwe-icon-arrows-right-2"
+  }))) : childrenList.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: child.props.children
+  }, child, " ", index + 1 < childrenList.length && /*#__PURE__*/React.createElement("i", {
+    className: "fwe-icon fwe-icon-arrows-right-2"
+  }))));
 }
 
-function Button(_ref) {
-  var icon = _ref.icon,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$iconOnly = _ref.iconOnly,
-      iconOnly = _ref$iconOnly === void 0 ? false : _ref$iconOnly,
-      _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large,
-      onClick = _ref.onClick,
-      _ref$primary = _ref.primary,
-      primary = _ref$primary === void 0 ? false : _ref$primary,
-      className = _ref.className,
-      children = _ref.children;
-  var classes = classNames('fwe-btn', {
+function Button({
+  icon,
+  disabled = false,
+  iconOnly = false,
+  large = false,
+  onClick,
+  primary = false,
+  className,
+  children
+}) {
+  const classes = classNames('fwe-btn', {
     'fwe-btn-icon': iconOnly
   }, {
     'fwe-disabled': disabled
@@ -259,24 +253,26 @@ function Button(_ref) {
     className: classes,
     disabled: disabled
   }, icon && /*#__PURE__*/React.createElement("i", {
-    className: "fwe-icon fwe-icon-" + icon
+    className: `fwe-icon fwe-icon-${icon}`
   }), !iconOnly && /*#__PURE__*/React.createElement("div", {
     className: "fr-button-text"
   }, children));
 }
 
-function Card(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
+function Card({
+  children,
+  className
+}) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('fwe-card', className)
   }, children);
 }
 
-function CardBody(_ref) {
-  var children = _ref.children,
-      text = _ref.text,
-      className = _ref.className;
+function CardBody({
+  children,
+  text,
+  className
+}) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('fwe-card-body', className)
   }, /*#__PURE__*/React.createElement("div", {
@@ -284,11 +280,12 @@ function CardBody(_ref) {
   }, text), children);
 }
 
-function CardHeader(_ref) {
-  var title = _ref.title,
-      subtitle = _ref.subtitle,
-      action = _ref.action,
-      className = _ref.className;
+function CardHeader({
+  title,
+  subtitle,
+  action,
+  className
+}) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('fwe-card-header', className)
   }, /*#__PURE__*/React.createElement("div", {
@@ -296,16 +293,17 @@ function CardHeader(_ref) {
   }, /*#__PURE__*/React.createElement("h5", null, title), subtitle && /*#__PURE__*/React.createElement("p", null, subtitle)), action);
 }
 
-function CardNotification(_ref) {
-  var iconName = _ref.iconName,
-      className = _ref.className,
-      title = _ref.title,
-      message = _ref.message;
-  var classes = classNames('fwe-card-notification', className);
+function CardNotification({
+  iconName,
+  className,
+  title,
+  message
+}) {
+  const classes = classNames('fwe-card-notification', className);
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("i", {
-    className: "fwe-icon fwe-icon-" + iconName + " fwe-icon-lg"
+    className: `fwe-icon fwe-icon-${iconName} fwe-icon-lg`
   }), /*#__PURE__*/React.createElement("div", {
     className: "fwe-card-title"
   }, /*#__PURE__*/React.createElement("h6", null, title), message && /*#__PURE__*/React.createElement("p", null, message)));
@@ -321,20 +319,17 @@ var ChipType;
   ChipType[ChipType["Readonly"] = 4] = "Readonly";
 })(ChipType || (ChipType = {}));
 
-function Chip(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? ChipType.Choice : _ref$type,
-      _ref$selected = _ref.selected,
-      selected = _ref$selected === void 0 ? false : _ref$selected,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large,
-      icon = _ref.icon,
-      children = _ref.children,
-      _onClick = _ref.onClick,
-      className = _ref.className;
-  var classes = classNames('fr-chip', 'fwe-chip', {
+function Chip({
+  type = ChipType.Choice,
+  selected = false,
+  disabled = false,
+  large = false,
+  icon,
+  children,
+  onClick,
+  className
+}) {
+  const classes = classNames('fr-chip', 'fwe-chip', {
     'fwe-selected': selected
   }, {
     'fwe-disabled': disabled
@@ -350,24 +345,20 @@ function Chip(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, icon && /*#__PURE__*/React.createElement("i", {
-    onClick: function onClick(e) {
-      return _onClick ? _onClick(e) : undefined;
-    },
-    className: "fwe-icon fwe-icon-" + icon
+    onClick: e => onClick ? onClick(e) : undefined,
+    className: `fwe-icon fwe-icon-${icon}`
   }), children, type === ChipType.Category && /*#__PURE__*/React.createElement("i", {
-    onClick: function onClick(e) {
-      return _onClick ? _onClick(e) : undefined;
-    },
+    onClick: e => onClick ? onClick(e) : undefined,
     className: "fwe-icon fwe-icon-menu-close"
   }));
 }
 
-function ChipContainer(_ref) {
-  var _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large,
-      children = _ref.children,
-      className = _ref.className;
-  var classes = classNames('fwe-chip-container', {
+function ChipContainer({
+  large = false,
+  children,
+  className
+}) {
+  const classes = classNames('fwe-chip-container', {
     'fwe-chip-container-lg': large
   }, className);
   return /*#__PURE__*/React.createElement("div", {
@@ -375,43 +366,32 @@ function ChipContainer(_ref) {
   }, children);
 }
 
-function Popover(_ref) {
-  var popoverContent = _ref.popoverContent,
-      children = _ref.children,
-      position = _ref.position,
-      fallbackPositions = _ref.fallbackPositions,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
-      onStatusChange = _ref.onStatusChange,
-      wrapper = _ref.wrapper,
-      className = _ref.className,
-      _ref$flip = _ref.flip,
-      flip = _ref$flip === void 0 ? true : _ref$flip,
-      containerClassName = _ref.containerClassName,
-      stopPropagation = _ref.stopPropagation,
-      _ref$arrow = _ref.arrow,
-      arrow = _ref$arrow === void 0 ? true : _ref$arrow;
-
-  var _useState = useState(open),
-      showPopper = _useState[0],
-      setShowPopper = _useState[1];
-
-  var referenceElement = useRef(null);
-
-  var _useState2 = useState(null),
-      popperElement = _useState2[0],
-      setPopperElement = _useState2[1];
-
-  var _useState3 = useState(null),
-      arrowElement = _useState3[0],
-      setArrowElement = _useState3[1];
-
-  var classes = classNames(className);
-  useEffect(function () {
+function Popover({
+  popoverContent,
+  children,
+  position,
+  fallbackPositions,
+  open = false,
+  onStatusChange,
+  wrapper,
+  className,
+  flip = true,
+  containerClassName,
+  stopPropagation,
+  arrow = true
+}) {
+  const [showPopper, setShowPopper] = useState(open);
+  const referenceElement = useRef(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const classes = classNames(className);
+  useEffect(() => {
     setShowPopper(open);
   }, [open]);
-
-  var _usePopper = usePopper(referenceElement.current, popperElement, {
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement.current, popperElement, {
     placement: position,
     modifiers: [{
       name: 'arrow',
@@ -429,11 +409,9 @@ function Popover(_ref) {
         fallbackPlacements: flip ? fallbackPositions : [position || 'auto']
       }
     }]
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
+  });
 
-  var handleChange = function handleChange(e, status) {
+  const handleChange = (e, status) => {
     if (stopPropagation) {
       e.stopPropagation();
     }
@@ -445,25 +423,19 @@ function Popover(_ref) {
     }
   };
 
-  var childrenWrapper = /*#__PURE__*/React.createElement("div", {
+  const childrenWrapper = /*#__PURE__*/React.createElement("div", {
     className: classes,
     style: {
       display: 'inline'
     },
     ref: referenceElement,
-    onClick: function onClick(e) {
-      return handleChange(e, !showPopper);
-    }
+    onClick: e => handleChange(e, !showPopper)
   }, children);
   return /*#__PURE__*/React.createElement(OutsideClickHandler, {
     display: "inline",
-    onOutsideClick: function onOutsideClick(e) {
-      return handleChange(e, false);
-    }
+    onOutsideClick: e => handleChange(e, false)
   }, wrapper ? wrapper(childrenWrapper) : childrenWrapper, showPopper && /*#__PURE__*/React.createElement("div", Object.assign({
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
+    onClick: e => e.stopPropagation(),
     className: classNames('fwe-popover-container', containerClassName),
     ref: setPopperElement,
     style: styles.popper
@@ -476,20 +448,17 @@ function Popover(_ref) {
   })));
 }
 
-function ColorIndicator(_ref) {
-  var text = _ref.text,
-      label = _ref.label,
-      color = _ref.color,
-      className = _ref.className,
-      _ref$showPopOver = _ref.showPopOver,
-      showPopOver = _ref$showPopOver === void 0 ? false : _ref$showPopOver,
-      children = _ref.children,
-      disabled = _ref.disabled;
-  var classes = classNames('fwe-color-indicator', className, disabled);
-
-  var _useState = useState(false),
-      isEditorOpen = _useState[0],
-      setEditorOpen = _useState[1];
+function ColorIndicator({
+  text,
+  label,
+  color,
+  className,
+  showPopOver = false,
+  children,
+  disabled
+}) {
+  const classes = classNames('fwe-color-indicator', className, disabled);
+  const [isEditorOpen, setEditorOpen] = useState(false);
 
   function getBorderColor() {
     if (!color || color.toUpperCase() === '#FFFFFF' || color.toUpperCase() === '#F2F3F5') {
@@ -499,7 +468,7 @@ function ColorIndicator(_ref) {
     return color;
   }
 
-  var colorBox = /*#__PURE__*/React.createElement("div", {
+  const colorBox = /*#__PURE__*/React.createElement("div", {
     className: "fwe-color-box",
     style: {
       background: color,
@@ -557,25 +526,19 @@ function ColorIndicator(_ref) {
     strokeWidth: "0"
   })));
 
-  var wrapper = function wrapper(wrapperChildren) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes,
-      onClick: function onClick() {
-        return setEditorOpen(function (prevOpen) {
-          return showPopOver ? !prevOpen : prevOpen;
-        });
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        opacity: isEditorOpen ? 0 : 1
-      },
-      className: "fwe-color-label"
-    }, label), /*#__PURE__*/React.createElement("div", {
-      className: "fwe-color-container"
-    }, wrapperChildren, " ", text && /*#__PURE__*/React.createElement("div", {
-      className: "fwe-color-indicator-text"
-    }, text), ' '));
-  };
+  const wrapper = wrapperChildren => /*#__PURE__*/React.createElement("div", {
+    className: classes,
+    onClick: () => setEditorOpen(prevOpen => showPopOver ? !prevOpen : prevOpen)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: isEditorOpen ? 0 : 1
+    },
+    className: "fwe-color-label"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "fwe-color-container"
+  }, wrapperChildren, " ", text && /*#__PURE__*/React.createElement("div", {
+    className: "fwe-color-indicator-text"
+  }, text), ' '));
 
   return showPopOver ? /*#__PURE__*/React.createElement(Popover, {
     containerClassName: "fwe-popover-container--color-indicator",
@@ -589,24 +552,22 @@ function ColorIndicator(_ref) {
   }, colorBox) : /*#__PURE__*/React.createElement(React.Fragment, null, wrapper(colorBox));
 }
 
-var ColorHelper = /*#__PURE__*/function () {
-  function ColorHelper() {}
-
+class ColorHelper {
   // based on: https://gist.github.com/mjackson/5311256
-  ColorHelper.rgbToHsv = function rgbToHsv(rgb) {
+  static rgbToHsv(rgb) {
     if (!rgb) {
       return undefined;
     }
 
-    var r = this.limitToByte(rgb.r) / 255;
-    var g = this.limitToByte(rgb.g) / 255;
-    var b = this.limitToByte(rgb.b) / 255;
-    var max = Math.max(r, g, b);
-    var min = Math.min(r, g, b);
-    var h = max;
-    var s = max;
-    var v = max;
-    var d = max - min;
+    const r = this.limitToByte(rgb.r) / 255;
+    const g = this.limitToByte(rgb.g) / 255;
+    const b = this.limitToByte(rgb.b) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = max;
+    let s = max;
+    const v = max;
+    const d = max - min;
     s = max === 0 ? 0 : d / max;
 
     if (max === min) {
@@ -631,26 +592,26 @@ var ColorHelper = /*#__PURE__*/function () {
     }
 
     return {
-      h: h,
-      s: s,
-      v: v
+      h,
+      s,
+      v
     };
   } // based on: https://gist.github.com/mjackson/5311256
-  ;
 
-  ColorHelper.hsvToRgb = function hsvToRgb(_hsv) {
-    var hsv = _hsv;
+
+  static hsvToRgb(_hsv) {
+    const hsv = _hsv;
     hsv.h = this.limitToOne(_hsv.h);
     hsv.s = this.limitToOne(_hsv.s);
     hsv.v = this.limitToOne(_hsv.v);
-    var r = 0;
-    var g = 0;
-    var b = 0;
-    var i = Math.floor(hsv.h * 6);
-    var f = hsv.h * 6 - i;
-    var p = hsv.v * (1 - hsv.s);
-    var q = hsv.v * (1 - f * hsv.s);
-    var t = hsv.v * (1 - (1 - f) * hsv.s);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    const i = Math.floor(hsv.h * 6);
+    const f = hsv.h * 6 - i;
+    const p = hsv.v * (1 - hsv.s);
+    const q = hsv.v * (1 - f * hsv.s);
+    const t = hsv.v * (1 - (1 - f) * hsv.s);
 
     switch (i % 6) {
       case 0:
@@ -696,9 +657,9 @@ var ColorHelper = /*#__PURE__*/function () {
       g: this.limitToByte(g * 255),
       b: this.limitToByte(b * 255)
     };
-  };
+  }
 
-  ColorHelper.limitToByte = function limitToByte(num) {
+  static limitToByte(num) {
     if (num <= 0) {
       return 0;
     }
@@ -708,9 +669,9 @@ var ColorHelper = /*#__PURE__*/function () {
     }
 
     return num;
-  };
+  }
 
-  ColorHelper.limitToOne = function limitToOne(num) {
+  static limitToOne(num) {
     if (num <= 0) {
       return 0;
     }
@@ -720,105 +681,71 @@ var ColorHelper = /*#__PURE__*/function () {
     }
 
     return num;
-  };
+  }
 
-  ColorHelper.numberToHex = function numberToHex(rgb) {
-    var hex = Math.round(rgb).toString(16);
+  static numberToHex(rgb) {
+    let hex = Math.round(rgb).toString(16);
 
     if (hex.length < 2) {
-      hex = "0" + hex;
+      hex = `0${hex}`;
     }
 
     return hex.toUpperCase();
-  };
+  }
 
-  ColorHelper.rgbToHex = function rgbToHex(_rgb) {
-    var rgb = _rgb;
+  static rgbToHex(_rgb) {
+    const rgb = _rgb;
     rgb.r = this.limitToByte(rgb.r);
     rgb.g = this.limitToByte(rgb.g);
     rgb.b = this.limitToByte(rgb.b);
-    var red = this.numberToHex(rgb.r);
-    var green = this.numberToHex(rgb.g);
-    var blue = this.numberToHex(rgb.b);
-    return "#" + red + green + blue;
-  };
+    const red = this.numberToHex(rgb.r);
+    const green = this.numberToHex(rgb.g);
+    const blue = this.numberToHex(rgb.b);
+    return `#${red}${green}${blue}`;
+  }
 
-  ColorHelper.hexToRgb = function hexToRgb(hexString) {
-    var numbersOnly = hexString.substring(1);
-    var aRgbHex = numbersOnly.match(/.{1,2}/g);
+  static hexToRgb(hexString) {
+    const numbersOnly = hexString.substring(1);
+    const aRgbHex = numbersOnly.match(/.{1,2}/g);
     return aRgbHex ? {
       r: parseInt(aRgbHex[0], 16),
       g: parseInt(aRgbHex[1], 16),
       b: parseInt(aRgbHex[2], 16)
     } : undefined;
-  };
+  }
 
-  return ColorHelper;
-}();
-
-var PREDEFINED_COLORS = ['#0091dc', '#333333', '#ffffff', '#f2f3f5', '#e5e8eb', '#d8dce1', '#b6bec6', '#80ca3d', '#ffd600', '#ff9600', '#d50000'];
-
-function ColorPicker(_ref) {
-  var _ref$palette = _ref.palette,
-      palette = _ref$palette === void 0 ? PREDEFINED_COLORS : _ref$palette,
-      _ref$useAlpha = _ref.useAlpha,
-      useAlpha = _ref$useAlpha === void 0 ? false : _ref$useAlpha,
-      _ref$alpha = _ref.alpha,
-      alpha = _ref$alpha === void 0 ? 100 : _ref$alpha,
-      paletteOnly = _ref.paletteOnly,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? '#FFFFFF' : _ref$color,
-      onChange = _ref.onChange,
-      onAlphaChange = _ref.onAlphaChange,
-      className = _ref.className;
-  var baseSize = 184;
-  var initialRgb = ColorHelper.hexToRgb(color);
-  var defaultHsv = {
+}
+
+const PREDEFINED_COLORS = ['#0091dc', '#333333', '#ffffff', '#f2f3f5', '#e5e8eb', '#d8dce1', '#b6bec6', '#80ca3d', '#ffd600', '#ff9600', '#d50000'];
+
+function ColorPicker({
+  palette = PREDEFINED_COLORS,
+  useAlpha = false,
+  alpha = 100,
+  paletteOnly,
+  color = '#FFFFFF',
+  onChange,
+  onAlphaChange,
+  className
+}) {
+  const baseSize = 184;
+  const initialRgb = ColorHelper.hexToRgb(color);
+  const defaultHsv = {
     h: 0,
     s: 0,
     v: 1
   };
-  var initialHsv = initialRgb ? ColorHelper.rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
-
-  var _useState = useState(initialHsv),
-      hsv = _useState[0],
-      setHsv = _useState[1];
-
-  var _useState2 = useState(color),
-      innerColor = _useState2[0],
-      setInnerColor = _useState2[1];
-
-  var _useState3 = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.r) || 255),
-      redInput = _useState3[0],
-      setRedInput = _useState3[1];
-
-  var _useState4 = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.g) || 255),
-      greenInput = _useState4[0],
-      setGreenInput = _useState4[1];
-
-  var _useState5 = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.b) || 255),
-      blueInput = _useState5[0],
-      setBlueInput = _useState5[1];
-
-  var _useState6 = useState(color),
-      hexInputColor = _useState6[0],
-      setHexInputColor = _useState6[1];
-
-  var _useState7 = useState('RGB'),
-      inputType = _useState7[0],
-      setInputType = _useState7[1];
-
-  var _useState8 = useState(false),
-      selectOpen = _useState8[0],
-      setSelectOpen = _useState8[1];
-
-  var _useState9 = useState(alpha),
-      innerAlpha = _useState9[0],
-      setInnerAlpha = _useState9[1];
-
-  var _useState10 = useState(true),
-      changeColor = _useState10[0],
-      setChangeColor = _useState10[1];
+  const initialHsv = initialRgb ? ColorHelper.rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
+  const [hsv, setHsv] = useState(initialHsv);
+  const [innerColor, setInnerColor] = useState(color);
+  const [redInput, setRedInput] = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.r) || 255);
+  const [greenInput, setGreenInput] = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.g) || 255);
+  const [blueInput, setBlueInput] = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.b) || 255);
+  const [hexInputColor, setHexInputColor] = useState(color);
+  const [inputType, setInputType] = useState('RGB');
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [innerAlpha, setInnerAlpha] = useState(alpha);
+  const [changeColor, setChangeColor] = useState(true);
 
   function limitAlpha() {
     if (innerAlpha > 100) {
@@ -832,18 +759,18 @@ function ColorPicker(_ref) {
     return innerAlpha;
   }
 
-  var hueKnobOffset = hsv.h * baseSize - 14 - baseSize;
-  var saturationKnobOffset = hsv.s * baseSize;
-  var valueKnobOffset = (1 - hsv.v) * baseSize;
-  var alphaKnobOffset = (100 - limitAlpha()) / 100 * baseSize;
+  const hueKnobOffset = hsv.h * baseSize - 14 - baseSize;
+  const saturationKnobOffset = hsv.s * baseSize;
+  const valueKnobOffset = (1 - hsv.v) * baseSize;
+  const alphaKnobOffset = (100 - limitAlpha()) / 100 * baseSize;
 
   function getSaturationGradient() {
-    return "linear-gradient(to right, white,  hsl(" + hsv.h * 360 + ", 100%, 50%) )";
+    return `linear-gradient(to right, white,  hsl(${hsv.h * 360}, 100%, 50%) )`;
   }
 
   function updateInputs(hexColor) {
     setHexInputColor(hexColor);
-    var rgb = ColorHelper.hexToRgb(hexColor);
+    const rgb = ColorHelper.hexToRgb(hexColor);
 
     if (rgb) {
       setRedInput(rgb.r);
@@ -852,19 +779,19 @@ function ColorPicker(_ref) {
     }
   }
 
-  useEffect(function () {
+  useEffect(() => {
     if (onChange) {
       onChange(innerColor);
     }
   }, [onChange, innerColor]);
-  useEffect(function () {
+  useEffect(() => {
     if (onAlphaChange && innerAlpha) {
       onAlphaChange(innerAlpha);
     }
   }, [onAlphaChange, innerAlpha]);
-  var updateColorHsv = useCallback(function (_hsv, _changeColor) {
-    var rgb = ColorHelper.hsvToRgb(_hsv);
-    var hex = ColorHelper.rgbToHex(rgb);
+  const updateColorHsv = useCallback((_hsv, _changeColor) => {
+    const rgb = ColorHelper.hsvToRgb(_hsv);
+    const hex = ColorHelper.rgbToHex(rgb);
 
     if (_changeColor) {
       setInnerColor(hex);
@@ -872,18 +799,16 @@ function ColorPicker(_ref) {
 
     updateInputs(hex);
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     updateColorHsv(hsv, changeColor);
   }, [updateColorHsv, hsv, changeColor]);
 
   function updateGradient(x, y) {
     setChangeColor(true);
-    setHsv(function (prevHsv) {
-      return Object.assign(Object.assign({}, prevHsv), {
-        s: Math.floor(x) / baseSize,
-        v: (baseSize - y) / baseSize
-      });
-    });
+    setHsv(prevHsv => Object.assign(Object.assign({}, prevHsv), {
+      s: Math.floor(x) / baseSize,
+      v: (baseSize - y) / baseSize
+    }));
   }
 
   function onGradientDrag(e, data) {
@@ -892,13 +817,11 @@ function ColorPicker(_ref) {
   }
 
   function updateHue(y) {
-    var newHue = y / baseSize;
+    const newHue = y / baseSize;
     setChangeColor(true);
-    setHsv(function (prevHsv) {
-      return Object.assign(Object.assign({}, prevHsv), {
-        h: newHue
-      });
-    });
+    setHsv(prevHsv => Object.assign(Object.assign({}, prevHsv), {
+      h: newHue
+    }));
   }
 
   function onHueDrag(e, data) {
@@ -915,14 +838,14 @@ function ColorPicker(_ref) {
     updateAlpha(data.y);
   }
 
-  var updateColorRgb = function updateColorRgb(newColor) {
-    var currentColor = newColor || '#FFFFFF';
+  const updateColorRgb = newColor => {
+    const currentColor = newColor || '#FFFFFF';
     updateInputs(currentColor);
-    var rgb = ColorHelper.hexToRgb(currentColor);
+    const rgb = ColorHelper.hexToRgb(currentColor);
     setChangeColor(false);
 
     if (rgb) {
-      var newHsv = ColorHelper.rgbToHsv(rgb);
+      const newHsv = ColorHelper.rgbToHsv(rgb);
 
       if (newHsv) {
         setHsv(newHsv);
@@ -932,12 +855,10 @@ function ColorPicker(_ref) {
     setInnerColor(newColor);
   };
 
-  var isHexColor = function isHexColor(_color) {
-    return /^#[0-9A-F]{6}$/i.test(_color);
-  };
+  const isHexColor = _color => /^#[0-9A-F]{6}$/i.test(_color);
 
   function onHexInput(event) {
-    var newHexInputColor = event.target.value;
+    const newHexInputColor = event.target.value;
     setHexInputColor(newHexInputColor.toUpperCase());
 
     if (isHexColor(newHexInputColor)) {
@@ -953,7 +874,7 @@ function ColorPicker(_ref) {
   }
 
   function onRgbBlur(channel) {
-    var currentInput = '';
+    let currentInput = '';
 
     switch (channel) {
       case 'r':
@@ -971,17 +892,17 @@ function ColorPicker(_ref) {
     }
 
     if (typeof currentInput !== 'number' || typeof currentInput === 'number' && currentInput > 255 && currentInput < 0) {
-      var rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
+      const rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
 
       if (rgb) {
-        var newHexColor = ColorHelper.rgbToHex(rgb);
+        const newHexColor = ColorHelper.rgbToHex(rgb);
         updateInputs(newHexColor);
       }
     }
   }
 
   function onRgbInput(_value, channel) {
-    var numberValue = Number.parseInt(_value, 10);
+    const numberValue = Number.parseInt(_value, 10);
 
     switch (channel) {
       case 'r':
@@ -999,11 +920,11 @@ function ColorPicker(_ref) {
     }
 
     if (numberValue <= 255 && numberValue >= 0) {
-      var rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
+      const rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
 
       if (rgb) {
         rgb[channel] = numberValue;
-        var newHexColor = ColorHelper.rgbToHex(rgb);
+        const newHexColor = ColorHelper.rgbToHex(rgb);
         setInnerColor(newHexColor);
         updateColorRgb(newHexColor);
       }
@@ -1011,7 +932,7 @@ function ColorPicker(_ref) {
   }
 
   function onAlphaInput(_alpha) {
-    var numberValue = Number.parseInt(_alpha, 10);
+    const numberValue = Number.parseInt(_alpha, 10);
     setInnerAlpha(numberValue);
   }
 
@@ -1019,7 +940,7 @@ function ColorPicker(_ref) {
     setInnerAlpha(limitAlpha());
   }
 
-  var onChangeType = function onChangeType(type) {
+  const onChangeType = type => {
     setInputType(type);
     setSelectOpen(false);
   };
@@ -1046,21 +967,19 @@ function ColorPicker(_ref) {
       backgroundImage: getSaturationGradient()
     }
   }), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(_ref2) {
-      var _ref2$nativeEvent = _ref2.nativeEvent,
-          offsetX = _ref2$nativeEvent.offsetX,
-          offsetY = _ref2$nativeEvent.offsetY;
-      return updateGradient(offsetX, offsetY);
-    },
+    onClick: ({
+      nativeEvent: {
+        offsetX,
+        offsetY
+      }
+    }) => updateGradient(offsetX, offsetY),
     className: "fwe-brightness-gradient"
   }), /*#__PURE__*/React.createElement(Draggable, {
     position: {
       x: saturationKnobOffset,
       y: valueKnobOffset
     },
-    onDrag: function onDrag(e, data) {
-      return onGradientDrag(e, data);
-    },
+    onDrag: (e, data) => onGradientDrag(e, data),
     bounds: "parent"
   }, /*#__PURE__*/React.createElement("div", {
     className: "fwe-knob"
@@ -1068,23 +987,22 @@ function ColorPicker(_ref) {
     className: "fwe-hue-picker"
   }, /*#__PURE__*/React.createElement("div", {
     className: "fwe-picker-background",
-    onClick: function onClick(_ref3) {
-      var offsetY = _ref3.nativeEvent.offsetY;
-      return updateHue(offsetY);
-    }
+    onClick: ({
+      nativeEvent: {
+        offsetY
+      }
+    }) => updateHue(offsetY)
   }), /*#__PURE__*/React.createElement(Draggable, {
     position: {
       x: 3,
       y: hueKnobOffset
     },
-    onDrag: function onDrag(e, data) {
-      return onHueDrag(e, data);
-    },
+    onDrag: (e, data) => onHueDrag(e, data),
     bounds: "parent"
   }, /*#__PURE__*/React.createElement("div", {
     className: "fwe-knob",
     style: {
-      background: "hsl(" + hsv.h * 360 + ", 100%, 50%)"
+      background: `hsl(${hsv.h * 360}, 100%, 50%)`
     }
   }))), useAlpha && /*#__PURE__*/React.createElement("div", {
     className: "fwe-alpha-picker"
@@ -1139,22 +1057,21 @@ function ColorPicker(_ref) {
     fill: "url(#bwsquare2px)",
     strokeWidth: "0"
   })), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(_ref4) {
-      var offsetY = _ref4.nativeEvent.offsetY;
-      return updateAlpha(offsetY);
-    },
+    onClick: ({
+      nativeEvent: {
+        offsetY
+      }
+    }) => updateAlpha(offsetY),
     className: "fwe-picker-background",
     style: {
-      backgroundImage: "linear-gradient( " + innerColor + ",  transparent)"
+      backgroundImage: `linear-gradient( ${innerColor},  transparent)`
     }
   }), /*#__PURE__*/React.createElement(Draggable, {
     position: {
       x: 3,
       y: alphaKnobOffset
     },
-    onDrag: function onDrag(e, data) {
-      return onAlphaDrag(e, data);
-    },
+    onDrag: (e, data) => onAlphaDrag(e, data),
     bounds: "parent"
   }, /*#__PURE__*/React.createElement("div", {
     className: "fwe-knob"
@@ -1164,11 +1081,7 @@ function ColorPicker(_ref) {
     className: "fwe-type-select"
   }, /*#__PURE__*/React.createElement("div", {
     className: "fwe-type-indicator",
-    onClick: function onClick() {
-      return setSelectOpen(function (prevOpen) {
-        return !prevOpen;
-      });
-    }
+    onClick: () => setSelectOpen(prevOpen => !prevOpen)
   }, /*#__PURE__*/React.createElement("span", {
     className: "fwe-input-type"
   }, inputType), /*#__PURE__*/React.createElement("i", {
@@ -1179,18 +1092,14 @@ function ColorPicker(_ref) {
     className: classNames('fwe-type-item', {
       'fwe-selected': inputType === 'HEX'
     }),
-    onClick: function onClick() {
-      return onChangeType('HEX');
-    }
+    onClick: () => onChangeType('HEX')
   }, /*#__PURE__*/React.createElement("i", {
     className: "fwe-icon fwe-icon-menu-check"
   }), " HEX"), /*#__PURE__*/React.createElement("div", {
     className: classNames('fwe-type-item', {
       'fwe-selected': inputType === 'RGB'
     }),
-    onClick: function onClick() {
-      return onChangeType('RGB');
-    }
+    onClick: () => onChangeType('RGB')
   }, /*#__PURE__*/React.createElement("i", {
     className: "fwe-icon fwe-icon-menu-check"
   }), " RGB"))), /*#__PURE__*/React.createElement("div", {
@@ -1207,34 +1116,22 @@ function ColorPicker(_ref) {
   }, /*#__PURE__*/React.createElement("input", {
     type: "text",
     value: redInput,
-    onBlur: function onBlur() {
-      return onRgbBlur('r');
-    },
-    onChange: function onChange(e) {
-      return onRgbInput(e.target.value, 'r');
-    }
+    onBlur: () => onRgbBlur('r'),
+    onChange: e => onRgbInput(e.target.value, 'r')
   })), /*#__PURE__*/React.createElement("label", {
     className: "fwe-input-text fwe-green-input"
   }, /*#__PURE__*/React.createElement("input", {
     type: "text",
     value: greenInput,
-    onBlur: function onBlur() {
-      return onRgbBlur('g');
-    },
-    onChange: function onChange(e) {
-      return onRgbInput(e.target.value, 'g');
-    }
+    onBlur: () => onRgbBlur('g'),
+    onChange: e => onRgbInput(e.target.value, 'g')
   })), /*#__PURE__*/React.createElement("label", {
     className: "fwe-input-text fwe-green-input"
   }, /*#__PURE__*/React.createElement("input", {
     type: "text",
     value: blueInput,
-    onBlur: function onBlur() {
-      return onRgbBlur('b');
-    },
-    onChange: function onChange(e) {
-      return onRgbInput(e.target.value, 'b');
-    }
+    onBlur: () => onRgbBlur('b'),
+    onChange: e => onRgbInput(e.target.value, 'b')
   }))), useAlpha && /*#__PURE__*/React.createElement("label", {
     className: "fwe-input-text fwe-alpha-input fwe-ml-auto"
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
@@ -1242,12 +1139,8 @@ function ColorPicker(_ref) {
     min: "0",
     max: "100",
     value: innerAlpha,
-    onBlur: function onBlur() {
-      return onAlphaBlur();
-    },
-    onChange: function onChange(e) {
-      return onAlphaInput(e.target.value);
-    }
+    onBlur: () => onAlphaBlur(),
+    onChange: e => onAlphaInput(e.target.value)
   }), /*#__PURE__*/React.createElement("span", {
     className: "fwe-percent-char"
   }, "%"))))), /*#__PURE__*/React.createElement("div", {
@@ -1309,8 +1202,8 @@ function ColorPicker(_ref) {
     className: classNames('fwe-icon fwe-icon-menu-check', {
       'fwe-color-text': !innerColor
     })
-  })), palette.map(function (colorItem) {
-    var itemClasses = classNames('fwe-color-item', {
+  })), palette.map(colorItem => {
+    const itemClasses = classNames('fwe-color-item', {
       'fwe-white-item': colorItem.toUpperCase() === '#FFFFFF'
     });
     return /*#__PURE__*/React.createElement("div", {
@@ -1319,9 +1212,7 @@ function ColorPicker(_ref) {
       style: {
         background: colorItem
       },
-      onClick: function onClick() {
-        return updateColorRgb(colorItem.toUpperCase());
-      }
+      onClick: () => updateColorRgb(colorItem.toUpperCase())
     }, innerColor === colorItem.toUpperCase() && /*#__PURE__*/React.createElement("i", {
       className: "fwe-icon fwe-icon-menu-check"
     }));
@@ -1329,27 +1220,26 @@ function ColorPicker(_ref) {
 }
 
 function ConfirmModal(_a) {
-  var title = _a.title,
-      subtitle = _a.subtitle,
-      body = _a.body,
-      className = _a.className,
-      cancel = _a.cancel,
-      ok = _a.ok,
-      onCancel = _a.onCancel,
-      onOk = _a.onOk,
-      isOpen = _a.isOpen,
+  var {
+    title,
+    subtitle,
+    body,
+    className,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    isOpen
+  } = _a,
       props = __rest(_a, ["title", "subtitle", "body", "className", "cancel", "ok", "onCancel", "onOk", "isOpen"]);
 
-  var _useState = useState(false),
-      hasScrollableContent = _useState[0],
-      setScrollableContent = _useState[1];
-
-  var ref = useCallback(function (node) {
+  const [hasScrollableContent, setScrollableContent] = useState(false);
+  const ref = useCallback(node => {
     if (node !== null) {
       setScrollableContent(node.scrollHeight > node.getBoundingClientRect().height);
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (!isOpen) {
       setScrollableContent(false);
     }
@@ -1381,33 +1271,25 @@ function ConfirmModal(_a) {
   }, ok)));
 }
 
-function DatePicker(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      required = _ref.required,
-      error = _ref.error,
-      hint = _ref.hint,
-      value = _ref.value,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? new Date() : _ref$defaultValue,
-      _ref$formatDate = _ref.formatDate,
-      formatDate = _ref$formatDate === void 0 ? Intl.DateTimeFormat().format : _ref$formatDate,
-      options = _ref.options,
-      onChange = _ref.onChange;
-
-  var _useState = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var _useState2 = useState(null),
-      calendar = _useState2[0],
-      setCalendar = _useState2[1];
-
-  var innerDefaultValue = value || defaultValue;
+function DatePicker({
+  children,
+  className,
+  disabled,
+  required,
+  error,
+  hint,
+  value,
+  defaultValue = new Date(),
+  formatDate = Intl.DateTimeFormat().format,
+  options,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [calendar, setCalendar] = useState(null);
+  const innerDefaultValue = value || defaultValue;
 
   function toggle() {
-    var newOpen = !open;
+    const newOpen = !open;
     setOpen(newOpen);
 
     if (newOpen) {
@@ -1417,19 +1299,18 @@ function DatePicker(_ref) {
     }
   }
 
-  var datePickerRef = useRef(null);
-
-  var _ref2 = options || {},
-      keepOpenOnDateChange = _ref2.keepOpenOnDateChange,
-      maxDate = _ref2.maxDate,
-      minDate = _ref2.minDate;
-
-  useEffect(function () {
+  const datePickerRef = useRef(null);
+  const {
+    keepOpenOnDateChange,
+    maxDate,
+    minDate
+  } = options || {};
+  useEffect(() => {
     if (calendar !== null && value !== undefined) {
       calendar.setDate(value);
     }
   }, [calendar, value]);
-  useEffect(function () {
+  useEffect(() => {
     var _a;
 
     function handleChange(date) {
@@ -1448,25 +1329,21 @@ function DatePicker(_ref) {
     if (datePickerRef.current && calendar === null) {
       setCalendar(flatpickr(datePickerRef.current, {
         defaultDate: innerDefaultValue,
-        onChange: function onChange(v) {
-          return handleChange(v[0]);
-        },
+        onChange: v => handleChange(v[0]),
         onClose: handleClose,
         position: 'below center',
-        formatDate: formatDate,
+        formatDate,
         closeOnSelect: (_a = !keepOpenOnDateChange) !== null && _a !== void 0 ? _a : true,
         clickOpens: false,
-        minDate: minDate,
-        maxDate: maxDate
+        minDate,
+        maxDate
       }));
     }
   }, [datePickerRef, calendar, maxDate, minDate, onChange, innerDefaultValue, formatDate, keepOpenOnDateChange]);
-  useEffect(function () {
-    return function () {
-      if (calendar !== null) {
-        calendar.destroy();
-      }
-    };
+  useEffect(() => () => {
+    if (calendar !== null) {
+      calendar.destroy();
+    }
   }, [calendar]);
   return /*#__PURE__*/React.createElement("label", {
     className: classNames('fwe-input-text fwe-input-text-icon', className),
@@ -1495,29 +1372,23 @@ function DatePicker(_ref) {
   }, error));
 }
 
-function DateRangePicker(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      error = _ref.error,
-      formatDate = _ref.formatDate,
-      hint = _ref.hint,
-      onChange = _ref.onChange,
-      options = _ref.options,
-      required = _ref.required,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? new Date() : _ref$defaultValue;
-
-  var _useState = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var _useState2 = useState(null),
-      calendar = _useState2[0],
-      setCalendar = _useState2[1];
+function DateRangePicker({
+  children,
+  className,
+  disabled,
+  error,
+  formatDate,
+  hint,
+  onChange,
+  options,
+  required,
+  defaultValue = new Date()
+}) {
+  const [open, setOpen] = useState(false);
+  const [calendar, setCalendar] = useState(null);
 
   function toggle() {
-    var newOpen = !open;
+    const newOpen = !open;
     setOpen(newOpen);
 
     if (newOpen) {
@@ -1527,10 +1398,10 @@ function DateRangePicker(_ref) {
     }
   }
 
-  var inputRef = useRef(null);
-  var input2Ref = useRef(null);
-  var containerRef = useRef(null);
-  useEffect(function () {
+  const inputRef = useRef(null);
+  const input2Ref = useRef(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
     var _a;
 
     function handleChange(dates) {
@@ -1551,12 +1422,10 @@ function DateRangePicker(_ref) {
         plugins: [rangePlugin({
           input: input2Ref.current
         })],
-        onChange: function onChange(v) {
-          return handleChange(v);
-        },
+        onChange: v => handleChange(v),
         position: 'below center',
         positionElement: containerRef.current,
-        formatDate: formatDate,
+        formatDate,
         closeOnSelect: (_a = !(options === null || options === void 0 ? void 0 : options.keepOpenOnDateChange)) !== null && _a !== void 0 ? _a : true,
         clickOpens: false,
         onClose: handleClose,
@@ -1565,12 +1434,10 @@ function DateRangePicker(_ref) {
       }));
     }
   }, [inputRef, input2Ref, containerRef, formatDate, options, onChange, calendar, defaultValue]);
-  useEffect(function () {
-    return function () {
-      if (calendar !== null) {
-        calendar.destroy();
-      }
-    };
+  useEffect(() => () => {
+    if (calendar !== null) {
+      calendar.destroy();
+    }
   }, [calendar]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('fr-date-range-picker', className),
@@ -1616,16 +1483,15 @@ function DateRangePicker(_ref) {
   }, error)));
 }
 
-function LinkButton(_ref) {
-  var icon = _ref.icon,
-      onClick = _ref.onClick,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children,
-      _ref$iconOnly = _ref.iconOnly,
-      iconOnly = _ref$iconOnly === void 0 ? false : _ref$iconOnly,
-      className = _ref.className;
-  var classes = classNames('fwe-btn', 'fwe-btn-link', {
+function LinkButton({
+  icon,
+  onClick,
+  disabled = false,
+  children,
+  iconOnly = false,
+  className
+}) {
+  const classes = classNames('fwe-btn', 'fwe-btn-link', {
     'fwe-disabled': disabled
   }, className);
   return /*#__PURE__*/React.createElement("button", {
@@ -1634,16 +1500,16 @@ function LinkButton(_ref) {
     className: classes,
     disabled: disabled
   }, /*#__PURE__*/React.createElement("i", {
-    className: "fwe-icon fwe-icon-" + icon
+    className: `fwe-icon fwe-icon-${icon}`
   }), !iconOnly && children);
 }
 
-function LoadingIndicator(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'large' : _ref$size,
-      children = _ref.children,
-      className = _ref.className;
-  var classes = classNames('fwe-waiting-indicator', {
+function LoadingIndicator({
+  size = 'large',
+  children,
+  className
+}) {
+  const classes = classNames('fwe-waiting-indicator', {
     'fwe-waiting-indicator-md': size === 'medium'
   }, {
     'fwe-waiting-indicator-sm': size === 'small'
@@ -1670,22 +1536,18 @@ var PaginationType;
 })(PaginationType || (PaginationType = {}));
 
 function Pagination(props) {
-  var pageMax = props.pageMax,
-      onChange = props.onChange,
-      pageCurrent = props.pageCurrent,
-      _props$defaultPageCur = props.defaultPageCurrent,
-      defaultPageCurrent = _props$defaultPageCur === void 0 ? 1 : _props$defaultPageCur,
-      _props$type = props.type,
-      type = _props$type === void 0 ? PaginationType.Numeric : _props$type,
-      className = props.className;
-  var controlled = pageCurrent !== undefined;
-
-  var _useState = useState(controlled ? pageCurrent : defaultPageCurrent),
-      innerPageCurrent = _useState[0],
-      setInnerPageCurrent = _useState[1];
-
-  var dotArray = Array.from(new Array(pageMax).keys());
-  useEffect(function () {
+  const {
+    pageMax,
+    onChange,
+    pageCurrent,
+    defaultPageCurrent = 1,
+    type = PaginationType.Numeric,
+    className
+  } = props;
+  const controlled = pageCurrent !== undefined;
+  const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
+  const dotArray = Array.from(new Array(pageMax).keys());
+  useEffect(() => {
     if (controlled) {
       setInnerPageCurrent(pageCurrent);
     }
@@ -1703,20 +1565,20 @@ function Pagination(props) {
 
   function onBtnDown() {
     if (innerPageCurrent > 1) {
-      var newPageCurrent = innerPageCurrent - 1;
+      const newPageCurrent = innerPageCurrent - 1;
       handleChange(newPageCurrent);
     }
   }
 
   function onBtnUp() {
     if (innerPageCurrent < pageMax) {
-      var newPageCurrent = innerPageCurrent + 1;
+      const newPageCurrent = innerPageCurrent + 1;
       handleChange(newPageCurrent);
     }
   }
 
   function onDotClick(index) {
-    var newPageCurrent = index + 1;
+    const newPageCurrent = index + 1;
     handleChange(newPageCurrent);
   }
 
@@ -1755,33 +1617,26 @@ function Pagination(props) {
     }, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: "fwe-pagination"
-  }, dotArray.map(function (index) {
-    return /*#__PURE__*/React.createElement("span", {
-      tabIndex: 0,
-      role: "button",
-      key: index,
-      className: classNames('fwe-page-dot', {
-        'fwe-selected': index + 1 === innerPageCurrent
-      }),
-      onClick: function onClick() {
-        return onDotClick(index);
-      },
-      "aria-label": "page-dot",
-      onKeyPress: function onKeyPress(e) {
-        return handleKeyPress(e, index);
-      }
-    });
-  }))));
+  }, dotArray.map(index => /*#__PURE__*/React.createElement("span", {
+    tabIndex: 0,
+    role: "button",
+    key: index,
+    className: classNames('fwe-page-dot', {
+      'fwe-selected': index + 1 === innerPageCurrent
+    }),
+    onClick: () => onDotClick(index),
+    "aria-label": "page-dot",
+    onKeyPress: e => handleKeyPress(e, index)
+  })))));
 }
 
-function Progress(_ref) {
-  var _ref$background = _ref.background,
-      background = _ref$background === void 0 ? 'white' : _ref$background,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? false : _ref$error,
-      progress = _ref.progress,
-      className = _ref.className;
-  var classes = classNames('fwe-progress-bar', {
+function Progress({
+  background = 'white',
+  error = false,
+  progress,
+  className
+}) {
+  const classes = classNames('fwe-progress-bar', {
     'fwe-bg-red': error
   }, {
     'fwe-progress-bar-black': background === 'black'
@@ -1794,7 +1649,7 @@ function Progress(_ref) {
     className: classes,
     role: "progressbar",
     style: {
-      width: progress + "%"
+      width: `${progress}%`
     },
     "aria-valuenow": progress,
     "aria-valuemin": 0,
@@ -1803,16 +1658,16 @@ function Progress(_ref) {
   }));
 }
 
-function Tabs(_ref) {
-  var config = _ref.config,
-      children = _ref.children,
-      className = _ref.className,
-      onChange = _ref.onChange;
-
+function Tabs({
+  config,
+  children,
+  className,
+  onChange
+}) {
   var _a, _b, _c;
 
-  var activeId = '';
-  React.Children.forEach(children, function (element) {
+  let activeId = '';
+  React.Children.forEach(children, element => {
     if ( /*#__PURE__*/React.isValidElement(element)) {
       if (activeId === '') {
         activeId = element.props.id;
@@ -1821,12 +1676,8 @@ function Tabs(_ref) {
       }
     }
   });
-
-  var _useState = useState(activeId),
-      currentId = _useState[0],
-      setId = _useState[1];
-
-  var tabListClasses = classNames('fwe-tab-bar', {
+  const [currentId, setId] = useState(activeId);
+  const tabListClasses = classNames('fwe-tab-bar', {
     'fwe-tab-bar-full-width': (_a = config.tabBar) === null || _a === void 0 ? void 0 : _a.fullWidth
   }, {
     'fwe-tab-items-equal-width': ((_b = config.tabItems) === null || _b === void 0 ? void 0 : _b.appearance) === 'equal'
@@ -1834,7 +1685,7 @@ function Tabs(_ref) {
     'fwe-tab-items-fill': ((_c = config.tabItems) === null || _c === void 0 ? void 0 : _c.appearance) === 'fill'
   });
 
-  var showTabPane = function showTabPane(id) {
+  const showTabPane = id => {
     if (onChange) {
       onChange({
         previous: currentId,
@@ -1845,7 +1696,7 @@ function Tabs(_ref) {
     setId(id);
   };
 
-  var innerChildren = React.Children.map(children, function (element) {
+  const innerChildren = React.Children.map(children, element => {
     if ( /*#__PURE__*/isValidElement(element)) {
       return /*#__PURE__*/React.cloneElement(element, {
         isVisible: element.props.id === currentId,
@@ -1860,27 +1711,26 @@ function Tabs(_ref) {
   }, /*#__PURE__*/React.createElement("ul", {
     role: "tablist",
     className: tabListClasses
-  }, innerChildren.map(function (child) {
-    var _child$props = child.props,
-        id = _child$props.id,
-        active = _child$props.active,
-        icon = _child$props.icon,
-        name = _child$props.name;
+  }, innerChildren.map(child => {
+    const {
+      id,
+      active,
+      icon,
+      name
+    } = child.props;
     return /*#__PURE__*/React.createElement("li", {
       key: id,
       className: classNames('fwe-tab-item', {
         'fwe-active': active
       }),
-      onClick: function onClick() {
-        return showTabPane(id);
-      }
+      onClick: () => showTabPane(id)
     }, child.props.icon ? /*#__PURE__*/React.createElement("a", {
       className: "fwe-tab-link",
       role: "tab",
       "aria-controls": id,
       "aria-selected": active
     }, /*#__PURE__*/React.createElement("i", {
-      className: "fwe-icon " + icon
+      className: `fwe-icon ${icon}`
     }), /*#__PURE__*/React.createElement("span", null, name)) : /*#__PURE__*/React.createElement("a", {
       className: "fwe-tab-link",
       role: "tab",
@@ -1892,12 +1742,12 @@ function Tabs(_ref) {
   }, innerChildren));
 }
 
-function TabPane(_ref) {
-  var _ref$isVisible = _ref.isVisible,
-      isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-      children = _ref.children,
-      className = _ref.className;
-  var tabPaneClasses = classNames({
+function TabPane({
+  isVisible = false,
+  children,
+  className
+}) {
+  const tabPaneClasses = classNames({
     'fr-show': isVisible
   }, {
     'fr-hide': !isVisible
@@ -1908,40 +1758,31 @@ function TabPane(_ref) {
 }
 
 function Checkbox(_a) {
-  var id = _a.id,
-      checked = _a.checked,
-      onChange = _a.onChange,
-      name = _a.name,
-      _a$large = _a.large,
-      large = _a$large === void 0 ? false : _a$large,
-      _a$valid = _a.valid,
-      valid = _a$valid === void 0 ? true : _a$valid,
-      _a$labelPosition = _a.labelPosition,
-      labelPosition = _a$labelPosition === void 0 ? 'after' : _a$labelPosition,
-      required = _a.required,
-      _a$disabled = _a.disabled,
-      disabled = _a$disabled === void 0 ? false : _a$disabled,
-      _a$indeterminate = _a.indeterminate,
-      indeterminate = _a$indeterminate === void 0 ? false : _a$indeterminate,
-      children = _a.children,
-      className = _a.className,
+  var {
+    id,
+    checked,
+    onChange,
+    name,
+    large = false,
+    valid = true,
+    labelPosition = 'after',
+    required,
+    disabled = false,
+    indeterminate = false,
+    children,
+    className
+  } = _a,
       props = __rest(_a, ["id", "checked", "onChange", "name", "large", "valid", "labelPosition", "required", "disabled", "indeterminate", "children", "className"]);
 
-  var _useState = useState(checked),
-      isChecked = _useState[0],
-      setChecked = _useState[1];
-
-  var _useState2 = useState(indeterminate),
-      isIndeterminate = _useState2[0],
-      setIndeterminate = _useState2[1];
-
-  useEffect(function () {
+  const [isChecked, setChecked] = useState(checked);
+  const [isIndeterminate, setIndeterminate] = useState(indeterminate);
+  useEffect(() => {
     setChecked(checked);
     setIndeterminate(indeterminate);
   }, [checked, indeterminate]);
 
-  var handleChange = function handleChange() {
-    var newChecked = !isChecked;
+  const handleChange = () => {
+    const newChecked = !isChecked;
 
     if (indeterminate) {
       setIndeterminate(false);
@@ -1951,7 +1792,7 @@ function Checkbox(_a) {
     onChange(newChecked);
   };
 
-  var containerClasses = classNames('fwe-checkbox-container', {
+  const containerClasses = classNames('fwe-checkbox-container', {
     'fr-checkbox-large': large
   }, {
     'fr-checkbox-invalid': !valid || required
@@ -1974,9 +1815,7 @@ function Checkbox(_a) {
     type: "checkbox",
     id: id,
     disabled: disabled,
-    onChange: function onChange() {
-      return handleChange();
-    }
+    onChange: () => handleChange()
   }, props)), /*#__PURE__*/React.createElement("div", {
     className: "fwe-checkbox-indicator-container"
   }, /*#__PURE__*/React.createElement("div", {
@@ -2001,35 +1840,31 @@ function Checkbox(_a) {
   }, children));
 }
 
-var RadioGroupContext = /*#__PURE__*/createContext({});
-
-function RadioButton(_ref) {
-  var id = _ref.id,
-      _onChange = _ref.onChange,
-      value = _ref.value,
-      name = _ref.name,
-      checked = _ref.checked,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'after' : _ref$labelPosition,
-      _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      children = _ref.children,
-      className = _ref.className;
-
-  var _useContext = useContext(RadioGroupContext),
-      groupDisabled = _useContext.disabled,
-      groupLabelPosition = _useContext.labelPosition,
-      groupLarge = _useContext.large,
-      groupName = _useContext.name,
-      groupRequired = _useContext.required,
-      groupValue = _useContext.value;
-
-  var innerLabelPosition = groupLabelPosition || labelPosition;
-  var classes = classNames('fwe-radio', {
+const RadioGroupContext = /*#__PURE__*/createContext({});
+
+function RadioButton({
+  id,
+  onChange,
+  value,
+  name,
+  checked,
+  labelPosition = 'after',
+  large = false,
+  disabled = false,
+  required = false,
+  children,
+  className
+}) {
+  const {
+    disabled: groupDisabled,
+    labelPosition: groupLabelPosition,
+    large: groupLarge,
+    name: groupName,
+    required: groupRequired,
+    value: groupValue
+  } = useContext(RadioGroupContext);
+  const innerLabelPosition = groupLabelPosition || labelPosition;
+  const classes = classNames('fwe-radio', {
     'fwe-radio-label-below': innerLabelPosition === 'below'
   }, {
     'fwe-radio-label-before': innerLabelPosition === 'before'
@@ -2045,9 +1880,7 @@ function RadioButton(_ref) {
     id: id,
     name: groupName || name,
     value: value || groupValue,
-    onChange: function onChange() {
-      return _onChange(value);
-    },
+    onChange: () => onChange(value),
     disabled: disabled || groupDisabled,
     required: required || groupRequired
   }), /*#__PURE__*/React.createElement("div", {
@@ -2057,21 +1890,23 @@ function RadioButton(_ref) {
   }, children));
 }
 
-var defaultConfig$1 = {
+const defaultConfig$1 = {
   outline: true,
   iconOnly: true
 };
 function Segment(props) {
-  var children = props.children,
-      legend = props.legend,
-      config = props.config,
-      onChange = props.onChange,
-      className = props.className;
-  var innerConfig = Object.assign(Object.assign({}, defaultConfig$1), config);
-  var useIcon = false;
-  var useIconAndText = false;
-  var tmpValue = '';
-  React.Children.forEach(children, function (child, index) {
+  const {
+    children,
+    legend,
+    config,
+    onChange,
+    className
+  } = props;
+  const innerConfig = Object.assign(Object.assign({}, defaultConfig$1), config);
+  let useIcon = false;
+  let useIconAndText = false;
+  let tmpValue = '';
+  React.Children.forEach(children, (child, index) => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
@@ -2090,12 +1925,9 @@ function Segment(props) {
 
     return null;
   });
+  const [value, setValue] = useState(tmpValue);
 
-  var _useState = useState(tmpValue),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var handleChange = function handleChange(event, _value) {
+  const handleChange = (event, _value) => {
     if (onChange) {
       onChange(event, _value);
     }
@@ -2111,15 +1943,15 @@ function Segment(props) {
     }, className)
   }, /*#__PURE__*/React.createElement("legend", null, legend), /*#__PURE__*/React.createElement("div", {
     className: "fwe-segment-group"
-  }, React.Children.map(children, function (child) {
+  }, React.Children.map(children, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
 
-    var id = (Math.random() * Date.now()).toString().replace('.', '-');
+    const id = (Math.random() * Date.now()).toString().replace('.', '-');
     return /*#__PURE__*/React.cloneElement(child, {
       key: id,
-      id: id,
+      id,
       onChange: handleChange,
       iconOnly: innerConfig.iconOnly,
       checked: child.props.value === value
@@ -2128,24 +1960,25 @@ function Segment(props) {
 }
 
 function SegmentControl(props) {
-  var label = props.label,
-      checked = props.checked,
-      disabled = props.disabled,
-      name = props.name,
-      value = props.value,
-      icon = props.icon,
-      onChange = props.onChange,
-      iconOnly = props.iconOnly,
-      _props$id = props.id,
-      id = _props$id === void 0 ? (Math.random() * Date.now()).toString().replace('.', '-') : _props$id,
-      className = props.className;
-  var viewMode = 'text';
+  const {
+    label,
+    checked,
+    disabled,
+    name,
+    value,
+    icon,
+    onChange,
+    iconOnly,
+    id = (Math.random() * Date.now()).toString().replace('.', '-'),
+    className
+  } = props;
+  let viewMode = 'text';
 
   if (icon) {
     viewMode = iconOnly ? 'icon' : 'icon-text';
   }
 
-  var handleChange = function handleChange(event) {
+  const handleChange = event => {
     if (onChange) {
       onChange(event, value);
     }
@@ -2159,9 +1992,7 @@ function SegmentControl(props) {
     value: value,
     checked: checked,
     disabled: disabled,
-    onChange: function onChange(e) {
-      return handleChange(e);
-    }
+    onChange: e => handleChange(e)
   }), /*#__PURE__*/React.createElement("label", {
     className: classNames('fwe-segment-label', className),
     htmlFor: id
@@ -2169,16 +2000,18 @@ function SegmentControl(props) {
     className: "fwe-sr-only"
   }, label), /*#__PURE__*/React.createElement("i", {
     "aria-hidden": "true",
-    className: classNames('fwe-icon', "fwe-icon-" + icon)
+    className: classNames('fwe-icon', `fwe-icon-${icon}`)
   })), viewMode === 'text' && label, viewMode === 'icon-text' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
     "aria-hidden": "true",
-    className: classNames('fwe-icon', "fwe-icon-" + icon)
+    className: classNames('fwe-icon', `fwe-icon-${icon}`)
   }), label)));
 }
 
-var SelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      className = _a.className,
+const SelectOption = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className
+  } = _a,
       props = __rest(_a, ["children", "className"]);
 
   return /*#__PURE__*/React.createElement("span", Object.assign({
@@ -2188,8 +2021,8 @@ var SelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 
 function calcVirtualScrollHeight(config, itemLength) {
-  var defaultHeight = 48;
-  var height = defaultHeight;
+  const defaultHeight = 48;
+  let height = defaultHeight;
 
   if (itemLength === 2) {
     height = defaultHeight * 2;
@@ -2208,40 +2041,34 @@ function calcVirtualScrollHeight(config, itemLength) {
   return height;
 }
 
-var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var defaultValue = _a.defaultValue,
-      value = _a.value,
-      label = _a.label,
-      options = _a.options,
-      onChange = _a.onChange,
-      _a$required = _a.required,
-      required = _a$required === void 0 ? false : _a$required,
-      config = _a.config,
-      disabled = _a.disabled,
-      className = _a.className,
-      name = _a.name,
-      id = _a.id,
-      children = _a.children,
-      hint = _a.hint,
-      error = _a.error,
+const Select = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    defaultValue,
+    value,
+    label,
+    options,
+    onChange,
+    required = false,
+    config,
+    disabled,
+    className,
+    name,
+    id,
+    children,
+    hint,
+    error
+  } = _a,
       props = __rest(_a, ["defaultValue", "value", "label", "options", "onChange", "required", "config", "disabled", "className", "name", "id", "children", "hint", "error"]);
 
-  var _useState = useState({
+  const [optionsWrapper, setOptionsWrapper] = useState({
     isFocused: false,
     action: ''
-  }),
-      optionsWrapper = _useState[0],
-      setOptionsWrapper = _useState[1];
-
-  var controlled = value !== undefined;
-
-  var _useState2 = useState(controlled ? value : defaultValue),
-      innerValue = _useState2[0],
-      setInnerValue = _useState2[1];
-
-  var buttonEl = useRef(null);
-  var childrenList = [];
-  React.Children.forEach(children, function (element) {
+  });
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const buttonEl = useRef(null);
+  const childrenList = [];
+  React.Children.forEach(children, element => {
     if ( /*#__PURE__*/React.isValidElement(element)) {
       childrenList.push(Object.assign(Object.assign({}, element), {
         props: Object.assign(Object.assign({}, element.props), {
@@ -2250,31 +2077,25 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
       }));
     }
   });
-  var usedOptions = options !== null && options !== void 0 ? options : childrenList.map(function (child) {
-    return child.props.option;
-  });
-  var listItemRef = useRef(Array.from({
+  const usedOptions = options !== null && options !== void 0 ? options : childrenList.map(child => child.props.option);
+  const listItemRef = useRef(Array.from({
     length: usedOptions.length
-  }, function () {
-    return /*#__PURE__*/React.createRef();
-  }));
-  useEffect(function () {
+  }, () => /*#__PURE__*/React.createRef()));
+  useEffect(() => {
     if (controlled) {
       setInnerValue(value);
     }
   }, [value, controlled]);
-  var getSelectedOptionLabel = useCallback(function () {
+  const getSelectedOptionLabel = useCallback(() => {
     var _a;
 
     if (innerValue !== undefined) {
-      return (_a = usedOptions.find(function (option) {
-        return option.data === innerValue;
-      })) === null || _a === void 0 ? void 0 : _a.label;
+      return (_a = usedOptions.find(option => option.data === innerValue)) === null || _a === void 0 ? void 0 : _a.label;
     }
 
     return undefined;
   }, [usedOptions, innerValue]);
-  var scroll = config === null || config === void 0 ? void 0 : config.scroll;
+  const scroll = config === null || config === void 0 ? void 0 : config.scroll;
 
   function handleButtonFocus(blur) {
     if (buttonEl && buttonEl.current) {
@@ -2286,9 +2107,9 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   }
 
-  var focusNextElement = function focusNextElement(nextIndex) {
+  const focusNextElement = nextIndex => {
     if (listItemRef && listItemRef.current) {
-      var nextItem = listItemRef.current[nextIndex].current;
+      const nextItem = listItemRef.current[nextIndex].current;
 
       if (nextItem !== null) {
         nextItem.focus();
@@ -2296,12 +2117,10 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   };
 
-  useEffect(function () {
+  useEffect(() => {
     if (optionsWrapper.isFocused) {
       if (optionsWrapper.action === 'key') {
-        var index = usedOptions.findIndex(function (option) {
-          return option.label === getSelectedOptionLabel();
-        });
+        const index = usedOptions.findIndex(option => option.label === getSelectedOptionLabel());
 
         if (index >= 0) {
           focusNextElement(index);
@@ -2312,7 +2131,7 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel]);
 
-  var handleOptionChange = function handleOptionChange(newOption) {
+  const handleOptionChange = newOption => {
     if (!controlled) {
       setInnerValue(newOption.data);
     }
@@ -2321,20 +2140,18 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
       onChange(newOption.data);
     }
 
-    setOptionsWrapper(function (prevOptionsWrapper) {
-      return Object.assign(Object.assign({}, prevOptionsWrapper), {
-        isFocused: false
-      });
-    });
+    setOptionsWrapper(prevOptionsWrapper => Object.assign(Object.assign({}, prevOptionsWrapper), {
+      isFocused: false
+    }));
 
     if (buttonEl && buttonEl.current) {
       buttonEl.current.focus();
     }
   };
 
-  var handleListKeyDown = function handleListKeyDown(event, option, index) {
-    var arrowKeys = ['ArrowDown', 'ArrowUp'];
-    var validKeys = ['Enter', ' '];
+  const handleListKeyDown = (event, option, index) => {
+    const arrowKeys = ['ArrowDown', 'ArrowUp'];
+    const validKeys = ['Enter', ' '];
 
     if (arrowKeys.concat(validKeys).includes(event.key)) {
       event.preventDefault();
@@ -2346,7 +2163,7 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
 
     if (event.key === 'ArrowUp') {
       event.preventDefault();
-      var nextIndex = (index - 1) % usedOptions.length;
+      let nextIndex = (index - 1) % usedOptions.length;
 
       if (nextIndex < 0) {
         nextIndex += usedOptions.length;
@@ -2361,47 +2178,41 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
 
     if (event.key === 'Escape') {
-      setOptionsWrapper(function (prevOptionsWrapper) {
-        return Object.assign(Object.assign({}, prevOptionsWrapper), {
-          isFocused: false
-        });
-      });
+      setOptionsWrapper(prevOptionsWrapper => Object.assign(Object.assign({}, prevOptionsWrapper), {
+        isFocused: false
+      }));
       handleButtonFocus();
     }
   };
 
-  var handleKeyPress = function handleKeyPress(event) {
-    var validKeys = ['Enter', ' ', 'ArrowUp', 'ArrowDown'];
+  const handleKeyPress = event => {
+    const validKeys = ['Enter', ' ', 'ArrowUp', 'ArrowDown'];
 
     if (validKeys.includes(event.key)) {
       event.preventDefault();
 
       if (!disabled) {
-        setOptionsWrapper(function (prevOptionsWrapper) {
-          return {
-            action: 'key',
-            isFocused: !prevOptionsWrapper.isFocused
-          };
-        });
+        setOptionsWrapper(prevOptionsWrapper => ({
+          action: 'key',
+          isFocused: !prevOptionsWrapper.isFocused
+        }));
       }
     }
   };
 
-  var handleClick = function handleClick(e) {
+  const handleClick = e => {
     e.stopPropagation();
 
     if (!disabled) {
-      setOptionsWrapper(function (prevOptionsWrapper) {
-        return {
-          action: '',
-          isFocused: !prevOptionsWrapper.isFocused
-        };
-      });
+      setOptionsWrapper(prevOptionsWrapper => ({
+        action: '',
+        isFocused: !prevOptionsWrapper.isFocused
+      }));
     }
   };
 
-  var selectedOptionLabel = getSelectedOptionLabel();
-  var selectClassName = classNames('fwe-select', {
+  const selectedOptionLabel = getSelectedOptionLabel();
+  const selectClassName = classNames('fwe-select', {
     'fwe-focus': optionsWrapper.isFocused
   }, {
     'fwe-empty': selectedOptionLabel === undefined && !optionsWrapper.isFocused
@@ -2414,56 +2225,46 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
 
   function renderOptions() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, options && options.map(function (option, i) {
-      return /*#__PURE__*/React.createElement("li", {
-        ref: listItemRef.current[i],
-        role: "option",
-        "aria-selected": option.label === selectedOptionLabel,
-        key: option.data,
-        onClick: function onClick() {
-          return handleOptionChange(option);
-        },
-        className: classNames('fwe-select-option', {
-          'fwe-empty': !option.label
-        }),
-        onKeyDown: function onKeyDown(e) {
-          return handleListKeyDown(e, option, i);
-        },
-        tabIndex: 0
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "fwe-select-option-content"
-      }, option.label));
-    }), childrenList.map(function (child, i) {
-      var _a = child.props,
-          option = _a.option,
-          propsWithoutOption = __rest(_a, ["option"]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, options && options.map((option, i) => /*#__PURE__*/React.createElement("li", {
+      ref: listItemRef.current[i],
+      role: "option",
+      "aria-selected": option.label === selectedOptionLabel,
+      key: option.data,
+      onClick: () => handleOptionChange(option),
+      className: classNames('fwe-select-option', {
+        'fwe-empty': !option.label
+      }),
+      onKeyDown: e => handleListKeyDown(e, option, i),
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "fwe-select-option-content"
+    }, option.label))), childrenList.map((child, i) => {
+      const _a = child.props,
+            {
+        option
+      } = _a,
+            propsWithoutOption = __rest(_a, ["option"]);
 
       return /*#__PURE__*/React.createElement("li", {
         ref: listItemRef.current[i],
         role: "option",
         "aria-selected": option.label === selectedOptionLabel,
         key: option.data,
-        onClick: function onClick() {
-          return handleOptionChange(option);
-        },
+        onClick: () => handleOptionChange(option),
         className: classNames('fwe-select-option', {
           'fwe-empty': !option.label
         }),
-        onKeyDown: function onKeyDown(e) {
-          return handleListKeyDown(e, option, i);
-        },
+        onKeyDown: e => handleListKeyDown(e, option, i),
         tabIndex: 0
       }, /*#__PURE__*/React.createElement(SelectOption, Object.assign({}, propsWithoutOption)));
     }));
   }
 
   return /*#__PURE__*/React.createElement(OutsideClickHandler, {
-    onOutsideClick: function onOutsideClick() {
-      return setOptionsWrapper({
-        action: '',
-        isFocused: false
-      });
-    }
+    onOutsideClick: () => setOptionsWrapper({
+      action: '',
+      isFocused: false
+    })
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     className: classNames('fwe-select-wrapper', className)
@@ -2475,18 +2276,14 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-label": label,
     disabled: disabled,
     required: required
-  }, usedOptions.map(function (option) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: option.data,
-      value: option.data
-    }, option.label);
-  })), /*#__PURE__*/React.createElement("div", {
+  }, usedOptions.map(option => /*#__PURE__*/React.createElement("option", {
+    key: option.data,
+    value: option.data
+  }, option.label))), /*#__PURE__*/React.createElement("div", {
     role: "button",
     tabIndex: 0,
     className: selectClassName,
-    onClick: function onClick(e) {
-      return handleClick(e);
-    },
+    onClick: e => handleClick(e),
     ref: buttonEl,
     onKeyDown: handleKeyPress
   }, /*#__PURE__*/React.createElement("div", {
@@ -2503,7 +2300,7 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, hint), error && /*#__PURE__*/React.createElement("div", {
     className: "fwe-select-invalid"
   }, " ", error, " "), /*#__PURE__*/React.createElement("ul", {
-    className: "fwe-select-options-container" + (optionsWrapper.isFocused ? '' : ' fwe-d-none')
+    className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`
   }, (scroll === null || scroll === void 0 ? void 0 : scroll.enabled) ? /*#__PURE__*/React.createElement("div", {
     className: "fr-select-scroll",
     style: {
@@ -2512,57 +2309,48 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, renderOptions()) : renderOptions())));
 });
 
-function Slider(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      label = _ref.label,
-      _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large,
-      max = _ref.max,
-      min = _ref.min,
-      onChange = _ref.onChange,
-      onChangeCommitted = _ref.onChangeCommitted,
-      step = _ref.step,
-      value = _ref.value,
-      _ref$showValue = _ref.showValue,
-      showValue = _ref$showValue === void 0 ? true : _ref$showValue,
-      className = _ref.className;
-
-  var _useState = useState(value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
-
-  var _useState2 = useState(null),
-      left = _useState2[0],
-      setLeft = _useState2[1];
-
-  var labelEl = useRef(null);
-  var classes = classNames('fwe-slider', {
+function Slider({
+  disabled = false,
+  label,
+  large = false,
+  max,
+  min,
+  onChange,
+  onChangeCommitted,
+  step,
+  value,
+  showValue = true,
+  className
+}) {
+  const [innerValue, setInnerValue] = useState(value);
+  const [left, setLeft] = useState(null);
+  const labelEl = useRef(null);
+  const classes = classNames('fwe-slider', {
     'fwe-slider-lg': large
   }, {
     'fr-slider-label': label !== null && showValue
   }, className);
-  useEffect(function () {
+  useEffect(() => {
     setInnerValue(value);
   }, [value]);
-  var updateValuePosition = useCallback(function () {
+  const updateValuePosition = useCallback(() => {
     if (labelEl.current) {
-      var _labelEl$current$getB = labelEl.current.getBoundingClientRect(),
-          width = _labelEl$current$getB.width;
-
-      var diff = max - min;
+      const {
+        width
+      } = labelEl.current.getBoundingClientRect();
+      const diff = max - min;
       setLeft((innerValue - min) / diff * (width - 16));
     }
   }, [innerValue, max, min]);
 
-  var handleAfterChange = function handleAfterChange() {
+  const handleAfterChange = () => {
     if (onChangeCommitted) {
       onChangeCommitted(innerValue);
     }
   };
 
-  var handleChange = function handleChange(e) {
-    var newValue = Number.parseFloat(e.target.value);
+  const handleChange = e => {
+    const newValue = Number.parseFloat(e.target.value);
     setInnerValue(newValue);
 
     if (onChange) {
@@ -2570,7 +2358,7 @@ function Slider(_ref) {
     }
   };
 
-  useEffect(function () {
+  useEffect(() => {
     function handleResize() {
       updateValuePosition();
     }
@@ -2578,9 +2366,7 @@ function Slider(_ref) {
     window.addEventListener('resize', handleResize);
     handleResize(); // Remove event listener on cleanup
 
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
+    return () => window.removeEventListener('resize', handleResize);
   }, [updateValuePosition]);
   return /*#__PURE__*/React.createElement("label", {
     ref: labelEl,
@@ -2600,35 +2386,30 @@ function Slider(_ref) {
   }), showValue && left !== null && /*#__PURE__*/React.createElement("span", {
     className: "fr-slider-value",
     style: {
-      left: left + "px"
+      left: `${left}px`
     }
   }, innerValue));
 }
 
 function Snackbar(props) {
-  var data = props.data,
-      onAction = props.onAction,
-      onClose = props.onClose,
-      _props$first = props.first,
-      first = _props$first === void 0 ? false : _props$first;
-
-  var _useState = useState(true),
-      show = _useState[0],
-      setShow = _useState[1];
-
-  var nodeRef = useRef(null);
-  useEffect(function () {
-    var disappearAfter = 5000;
+  const {
+    data,
+    onAction,
+    onClose,
+    first = false
+  } = props;
+  const [show, setShow] = useState(true);
+  const nodeRef = useRef(null);
+  useEffect(() => {
+    let disappearAfter = 5000;
 
     if ((data === null || data === void 0 ? void 0 : data.disappearAfter) !== null) {
       if ((data === null || data === void 0 ? void 0 : data.disappearAfter) && (data === null || data === void 0 ? void 0 : data.disappearAfter) > 0) {
         disappearAfter = data === null || data === void 0 ? void 0 : data.disappearAfter;
       }
 
-      var timer = setTimeout(function () {
-        return setShow(false);
-      }, disappearAfter);
-      return function () {
+      const timer = setTimeout(() => setShow(false), disappearAfter);
+      return () => {
         clearTimeout(timer);
       };
     }
@@ -2640,17 +2421,15 @@ function Snackbar(props) {
     setShow(false);
   }
 
-  var classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
+  const classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
   return /*#__PURE__*/React.createElement(CSSTransition, {
     nodeRef: nodeRef,
-    onExited: function onExited() {
-      return onClose ? onClose() : undefined;
-    },
+    onExited: () => onClose ? onClose() : undefined,
     unmountOnExit: true,
     timeout: {
       exit: 600
     },
-    "in": show,
+    in: show,
     classNames: classes,
     appear: true
   }, /*#__PURE__*/React.createElement("div", {
@@ -2677,9 +2456,7 @@ function Snackbar(props) {
     "aria-label": "UserAction",
     type: "button",
     className: "fwe-btn fwe-btn-link",
-    onClick: function onClick() {
-      return onAction ? onAction() : undefined;
-    }
+    onClick: () => onAction ? onAction() : undefined
   }, data === null || data === void 0 ? void 0 : data.action), (data === null || data === void 0 ? void 0 : data.showClose) && /*#__PURE__*/React.createElement("button", {
     "aria-label": "Close",
     type: "button",
@@ -2696,36 +2473,28 @@ function Snackbar(props) {
 var SnackbarContext = /*#__PURE__*/React.createContext({});
 
 function SnackbarProvider(props) {
-  var _props$config = props.config,
-      config = _props$config === void 0 ? {
-    darkBackground: true
-  } : _props$config,
-      children = props.children,
-      className = props.className;
-
-  var _useState = useState([]),
-      snacks = _useState[0],
-      setSnacks = _useState[1];
+  const {
+    config = {
+      darkBackground: true
+    },
+    children,
+    className
+  } = props;
+  const [snacks, setSnacks] = useState([]);
 
   function addSnackbar(snackData, onAction, onClose) {
-    setSnacks(function (prevSnacks) {
-      return [{
-        data: Object.assign(Object.assign({}, config), snackData),
-        onAction: onAction,
-        onClose: onClose,
-        key: new Date().getTime() + Math.random(),
-        first: prevSnacks.length === 0
-      }].concat(prevSnacks);
-    });
+    setSnacks(prevSnacks => [{
+      data: Object.assign(Object.assign({}, config), snackData),
+      onAction,
+      onClose,
+      key: new Date().getTime() + Math.random(),
+      first: prevSnacks.length === 0
+    }, ...prevSnacks]);
   }
 
   function closeSnackbar(key) {
     if (key) {
-      setSnacks(function (prevSnacks) {
-        return prevSnacks.filter(function (snack) {
-          return snack.key !== key;
-        });
-      });
+      setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
     }
   }
 
@@ -2737,60 +2506,46 @@ function SnackbarProvider(props) {
     }
   }
 
-  var contextValue = {
-    addSnackbar: addSnackbar,
-    closeSnackbar: closeSnackbar
+  const contextValue = {
+    addSnackbar,
+    closeSnackbar
   };
   return /*#__PURE__*/React.createElement(SnackbarContext.Provider, {
     value: contextValue
   }, children, /*#__PURE__*/React.createElement("div", {
     className: classNames('fwe-snackbar-container', className)
-  }, snacks.map(function (snack) {
-    return /*#__PURE__*/React.createElement(Snackbar, {
-      key: snack.key,
-      data: snack.data,
-      onAction: function onAction() {
-        return snack.onAction ? snack.onAction() : undefined;
-      },
-      onClose: function onClose() {
-        return handleClose(snack);
-      },
-      first: snack.first
-    });
-  })));
+  }, snacks.map(snack => /*#__PURE__*/React.createElement(Snackbar, {
+    key: snack.key,
+    data: snack.data,
+    onAction: () => snack.onAction ? snack.onAction() : undefined,
+    onClose: () => handleClose(snack),
+    first: snack.first
+  }))));
 }
 
-var useSnackbar = (function () {
-  return useContext(SnackbarContext);
-});
-
-function Switch(_ref) {
-  var _classNames;
-
-  var _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'before' : _ref$labelPosition,
-      _ref$large = _ref.large,
-      large = _ref$large === void 0 ? false : _ref$large,
-      title = _ref.title,
-      value = _ref.value,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onChange = _ref.onChange,
-      className = _ref.className;
-  var labelClassName = classNames('fwe-switch', (_classNames = {}, _classNames["fwe-switch-label-" + labelPosition] = true, _classNames), {
+var useSnackbar = (() => useContext(SnackbarContext));
+
+function Switch({
+  labelPosition = 'before',
+  large = false,
+  title,
+  value,
+  disabled = false,
+  onChange,
+  className
+}) {
+  const labelClassName = classNames('fwe-switch', {
+    [`fwe-switch-label-${labelPosition}`]: true
+  }, {
     'fwe-switch-lg': large
   }, className);
-
-  var _useState = useState(value),
-      currentValue = _useState[0],
-      setCurrentValue = _useState[1];
-
-  useEffect(function () {
+  const [currentValue, setCurrentValue] = useState(value);
+  useEffect(() => {
     setCurrentValue(value);
   }, [value]);
 
-  var handleChange = function handleChange() {
-    var newValue = !currentValue;
+  const handleChange = () => {
+    const newValue = !currentValue;
     setCurrentValue(newValue);
 
     if (onChange) {
@@ -2804,9 +2559,7 @@ function Switch(_ref) {
     type: "checkbox",
     disabled: disabled,
     checked: currentValue,
-    onChange: function onChange() {
-      return handleChange();
-    }
+    onChange: () => handleChange()
   }), /*#__PURE__*/React.createElement("div", {
     className: "fwe-switch-track"
   }), /*#__PURE__*/React.createElement("div", {
@@ -2814,7 +2567,7 @@ function Switch(_ref) {
   }, title));
 }
 
-var TableHeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+const TableHeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   function handleClick(event) {
     if (props.onClick) {
       props.onClick(event);
@@ -2832,48 +2585,41 @@ var TableHeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-function TextArea(_ref) {
-  var disabled = _ref.disabled,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onInput = _ref.onInput,
-      readonly = _ref.readonly,
-      required = _ref.required,
-      label = _ref.label,
-      error = _ref.error,
-      hint = _ref.hint,
-      value = _ref.value,
-      rows = _ref.rows,
-      maxLength = _ref.maxLength,
-      className = _ref.className,
-      defaultValue = _ref.defaultValue;
-  var controlled = value !== undefined;
-
-  var _useState = useState(controlled ? value : defaultValue),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
-
-  var hintClasses = classNames('fwe-input-text-info');
-  var shadowRef = React.useRef(null);
-  var ref = React.useRef(null);
-
-  var _useState2 = useState(null),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
-  useEffect(function () {
+function TextArea({
+  disabled,
+  onBlur,
+  onChange,
+  onFocus,
+  onInput,
+  readonly,
+  required,
+  label,
+  error,
+  hint,
+  value,
+  rows,
+  maxLength,
+  className,
+  defaultValue
+}) {
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const hintClasses = classNames('fwe-input-text-info');
+  const shadowRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const [height, setHeight] = useState(null);
+  useEffect(() => {
     if (controlled) {
       setInnerValue(value);
     }
   }, [value, controlled]);
-  useEffect(function () {
-    var input = ref.current;
-    var shadow = shadowRef.current;
-    var minRows = 2;
+  useEffect(() => {
+    const input = ref.current;
+    const shadow = shadowRef.current;
+    const minRows = 2;
     shadow.value = input.value || 'x';
-    shadow.style.width = "" + input.clientWidth;
-    var newHeight = Math.max(minRows * 24, shadow.scrollHeight);
+    shadow.style.width = `${input.clientWidth}`;
+    const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
     setHeight(newHeight + 4 + 4 + 1);
   }, [innerValue]);
 
@@ -2891,11 +2637,11 @@ function TextArea(_ref) {
     className: classNames('fwe-input-text', className)
   }, /*#__PURE__*/React.createElement("textarea", {
     style: Object.assign({}, !rows && {
-      height: height,
+      height,
       overflow: 'hidden'
     }),
     ref: ref,
-    className: classNames('fr-textarea', "fwe-row-" + rows),
+    className: classNames('fr-textarea', `fwe-row-${rows}`),
     disabled: disabled,
     readOnly: readonly,
     required: required,
@@ -2931,38 +2677,35 @@ function TextArea(_ref) {
   }, innerValue.length, " /", maxLength));
 }
 
-function TextEditorButton(_ref) {
-  var _classNames, _classNames2;
-
-  var disabled = _ref.disabled,
-      label = _ref.label,
-      type = _ref.type,
-      className = _ref.className,
-      icon = _ref.icon,
-      list = _ref.list,
-      value = _ref.value,
-      noAction = _ref.noAction,
-      category = _ref.category;
-
-  var _useState = useState(false),
-      active = _useState[0],
-      setActive = _useState[1];
-
-  var btnRef = useRef(null);
+function TextEditorButton({
+  disabled,
+  label,
+  type,
+  className,
+  icon,
+  list,
+  value,
+  noAction,
+  category
+}) {
+  const [active, setActive] = useState(false);
+  const btnRef = useRef(null);
 
   function handleClick() {
-    var btn = btnRef.current;
-    setActive(function (prevActive) {
-      return !prevActive;
-    });
+    const btn = btnRef.current;
+    setActive(prevActive => !prevActive);
     btn.click();
   }
 
-  useEffect(function () {
+  useEffect(() => {
     function callback(mutationRecords) {
-      mutationRecords.forEach(function (mutationRecord) {
-        var classList = mutationRecord.target.classList;
-        var oldValue = mutationRecord.oldValue;
+      mutationRecords.forEach(mutationRecord => {
+        const {
+          classList
+        } = mutationRecord.target;
+        const {
+          oldValue
+        } = mutationRecord;
 
         if (classList.contains('ql-active')) {
           setActive(true);
@@ -2975,7 +2718,7 @@ function TextEditorButton(_ref) {
     }
 
     if (btnRef.current && !noAction) {
-      var observer = new MutationObserver(callback);
+      const observer = new MutationObserver(callback);
       observer.observe(btnRef.current, {
         attributes: true,
         attributeFilter: ['class'],
@@ -2986,9 +2729,13 @@ function TextEditorButton(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     ref: btnRef,
     type: "button",
-    className: classNames((_classNames = {}, _classNames["ql-" + (category || type)] = !list, _classNames), {
+    className: classNames({
+      [`ql-${category || type}`]: !list
+    }, {
       'ql-list': list
-    }, 'fwe-d-none', (_classNames2 = {}, _classNames2["action-" + type] = !noAction, _classNames2)),
+    }, 'fwe-d-none', {
+      [`action-${type}`]: !noAction
+    }),
     "aria-hidden": "true",
     value: value
   }), /*#__PURE__*/React.createElement("button", {
@@ -2998,20 +2745,18 @@ function TextEditorButton(_ref) {
     }, 'fr-button', className, {
       'fwe-active': active && !noAction
     }),
-    onClick: function onClick() {
-      return handleClick();
-    },
+    onClick: () => handleClick(),
     disabled: disabled
   }, label && /*#__PURE__*/React.createElement("div", {
-    className: "fr-button-text fwe-text-" + type
+    className: `fr-button-text fwe-text-${type}`
   }, label), icon && /*#__PURE__*/React.createElement("i", {
-    className: classNames('fwe-icon fwe-icon-toolbar-list', "fwe-icon-" + icon, 'fwe-pr-0')
+    className: classNames('fwe-icon fwe-icon-toolbar-list', `fwe-icon-${icon}`, 'fwe-pr-0')
   })));
 }
 
-var xss = require('xss');
+const xss = require('xss');
 
-var defaultConfig = {
+const defaultConfig = {
   toolbar: {
     bold: true,
     italic: true,
@@ -3024,51 +2769,38 @@ var defaultConfig = {
     link: true
   }
 };
-function TextEditor(_ref) {
-  var _classNames;
-
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      label = _ref.label,
-      maxLength = _ref.maxLength,
-      value = _ref.value,
-      hint = _ref.hint,
-      error = _ref.error,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      onChange = _ref.onChange,
-      className = _ref.className,
-      configProps = _ref.config;
-
+function TextEditor({
+  disabled = false,
+  label,
+  maxLength,
+  value,
+  hint,
+  error,
+  readOnly = false,
+  onChange,
+  className,
+  config: configProps
+}) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 
-  var editorRef = useRef(null);
-
-  var _useState = useState(null),
-      editor = _useState[0],
-      setEditor = _useState[1];
-
-  var _useState2 = useState((Math.random() * Date.now()).toString().replace('.', '-')),
-      id = _useState2[0];
-
-  var _useState3 = useState(value),
-      innerValue = _useState3[0],
-      setInnerValue = _useState3[1];
-
-  var config = {
+  const editorRef = useRef(null);
+  const [editor, setEditor] = useState(null);
+  const [id] = useState((Math.random() * Date.now()).toString().replace('.', '-'));
+  const [innerValue, setInnerValue] = useState(value);
+  const config = {
     toolbar: Object.assign(Object.assign({}, defaultConfig.toolbar), configProps === null || configProps === void 0 ? void 0 : configProps.toolbar)
   };
-  useEffect(function () {
+  useEffect(() => {
     if (editorRef && editor === null) {
-      var newEditor = new Quill(editorRef.current, {
+      const newEditor = new Quill(editorRef.current, {
         modules: {
-          toolbar: "#editor-toolbar-" + id
+          toolbar: `#editor-toolbar-${id}`
         },
         theme: 'snow',
-        scrollingContainer: "#editor-container-" + id
+        scrollingContainer: `#editor-container-${id}`
       });
       newEditor.root.setAttribute('role', 'textbox');
-      newEditor.root.setAttribute('aria-labelledby', "editor-label-" + id);
+      newEditor.root.setAttribute('aria-labelledby', `editor-label-${id}`);
       newEditor.root.setAttribute('aria-multiline', 'true');
       newEditor.enable(!readOnly);
 
@@ -3079,23 +2811,23 @@ function TextEditor(_ref) {
       } // set up a matcher that does allow/disallow to paste images corresponding to config settings
 
 
-      newEditor.clipboard.addMatcher('img', function (_node, delta) {
+      newEditor.clipboard.addMatcher('img', (_node, delta) => {
         // allowed, passthru delta
         if (config.toolbar.image === true) {
           return delta;
         } // not allowed, remove image by setting up a new delta
 
 
-        var Delta = Quill["import"]('quill-delta');
+        const Delta = Quill.import('quill-delta');
         return new Delta().insert('');
       });
       setEditor(newEditor);
     }
   }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar.image]);
-  useEffect(function () {
+  useEffect(() => {
     if (editor) {
-      editor.on('text-change', function () {
-        var html = editor.root.innerHTML;
+      editor.on('text-change', () => {
+        let html = editor.root.innerHTML;
 
         if (html === '<p><br></p>' || html === '<div><br></div>' || html === undefined) {
           html = null;
@@ -3109,15 +2841,15 @@ function TextEditor(_ref) {
       });
     }
   }, [editor, onChange]);
-  useEffect(function () {
+  useEffect(() => {
     if (editor) {
-      var whiteList = Object.assign(Object.assign({}, xss.whiteList), {
-        a: [].concat(xss.whiteList.a, ['rel'])
+      const whiteList = Object.assign(Object.assign({}, xss.whiteList), {
+        a: [...xss.whiteList.a, 'rel']
       });
-      var sanitizedValue = xss(value, {
-        whiteList: whiteList
+      const sanitizedValue = xss(value, {
+        whiteList
       });
-      var content = editor.clipboard.convert(sanitizedValue);
+      const content = editor.clipboard.convert(sanitizedValue);
       editor.setContents(content, 'silent');
     }
   }, [editor, value]);
@@ -3127,10 +2859,10 @@ function TextEditor(_ref) {
   }
 
   function hideDivider(name) {
-    var linkOrImage = config.toolbar.image || config.toolbar.link;
-    var lists = config.toolbar.bulletList || config.toolbar.orderedList;
-    var typos = config.toolbar.bold || config.toolbar.italic || config.toolbar.underline;
-    var textAlign = config.toolbar.alignCenter || config.toolbar.alignRight;
+    const linkOrImage = config.toolbar.image || config.toolbar.link;
+    const lists = config.toolbar.bulletList || config.toolbar.orderedList;
+    const typos = config.toolbar.bold || config.toolbar.italic || config.toolbar.underline;
+    const textAlign = config.toolbar.alignCenter || config.toolbar.alignRight;
 
     switch (name) {
       case 'typo':
@@ -3151,11 +2883,13 @@ function TextEditor(_ref) {
 
   return /*#__PURE__*/React.createElement("label", {
     className: classNames('fwe-input-text', {
-      disabled: disabled
+      disabled
     })
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-editor-toolbar', (_classNames = {}, _classNames["fwe-editor-toolbar-" + className] = className, _classNames)),
-    id: "editor-toolbar-" + id
+    className: classNames('fwe-editor-toolbar', {
+      [`fwe-editor-toolbar-${className}`]: className
+    }),
+    id: `editor-toolbar-${id}`
   }, /*#__PURE__*/React.createElement("span", {
     className: "ql-formats fwe-d-none"
   }, /*#__PURE__*/React.createElement("select", {
@@ -3244,52 +2978,51 @@ function TextEditor(_ref) {
     className: classNames('fwe-editor-container', {
       'fwe-editor-container--error': error
     }),
-    id: "editor-container-" + id
+    id: `editor-container-${id}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "fwe-editor",
     ref: editorRef
   })), /*#__PURE__*/React.createElement("span", {
     className: "fwe-input-text-label",
-    id: "editor-label-" + id
+    id: `editor-label-${id}`
   }, label), error && /*#__PURE__*/React.createElement("span", {
     className: "fwe-text-editor-invalid"
   }, error), hint && /*#__PURE__*/React.createElement("span", {
     className: "fwe-text-editor-info"
   }, hint), maxLength && maxLength > 0 && value != null && /*#__PURE__*/React.createElement("span", {
     className: "fwe-input-text-count"
-  }, currentLength() + " / " + maxLength));
+  }, `${currentLength()} / ${maxLength}`));
 }
 
-var TextInput = function TextInput(_a) {
-  var disabled = _a.disabled,
-      required = _a.required,
-      readonly = _a.readonly,
-      placeholder = _a.placeholder,
-      max = _a.max,
-      min = _a.min,
-      onBlur = _a.onBlur,
-      onFocus = _a.onFocus,
-      onInput = _a.onInput,
-      step = _a.step,
-      type = _a.type,
-      value = _a.value,
-      error = _a.error,
-      hint = _a.hint,
-      label = _a.label,
-      labelClassName = _a.labelClassName,
+const TextInput = _a => {
+  var {
+    disabled,
+    required,
+    readonly,
+    placeholder,
+    max,
+    min,
+    onBlur,
+    onFocus,
+    onInput,
+    step,
+    type,
+    value,
+    error,
+    hint,
+    label,
+    labelClassName
+  } = _a,
       props = __rest(_a, ["disabled", "required", "readonly", "placeholder", "max", "min", "onBlur", "onFocus", "onInput", "step", "type", "value", "error", "hint", "label", "labelClassName"]);
 
-  var _useState = useState(value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
-
-  useEffect(function () {
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
     setInnerValue(value);
   }, [value]);
-  var supported = ['text', 'number', 'password', 'datetime-local'];
-  var innerType = type && supported.indexOf(type) !== -1 ? type : 'text';
-  var labelClasses = classNames('fwe-input-text', labelClassName);
-  var hintClasses = classNames('fwe-input-text-info');
+  const supported = ['text', 'number', 'password', 'datetime-local'];
+  const innerType = type && supported.indexOf(type) !== -1 ? type : 'text';
+  const labelClasses = classNames('fwe-input-text', labelClassName);
+  const hintClasses = classNames('fwe-input-text-info');
 
   function handleChange(e) {
     setInnerValue(e.target.value);
@@ -3326,23 +3059,22 @@ var TextInput = function TextInput(_a) {
 };
 
 function Prompt(_a) {
-  var title = _a.title,
-      subtitle = _a.subtitle,
-      hint = _a.hint,
-      label = _a.label,
-      value = _a.value,
-      onChange = _a.onChange,
-      onOk = _a.onOk,
-      onCancel = _a.onCancel,
-      cancel = _a.cancel,
-      ok = _a.ok,
+  var {
+    title,
+    subtitle,
+    hint,
+    label,
+    value,
+    onChange,
+    onOk,
+    onCancel,
+    cancel,
+    ok
+  } = _a,
       props = __rest(_a, ["title", "subtitle", "hint", "label", "value", "onChange", "onOk", "onCancel", "cancel", "ok"]);
 
-  var _useState = useState(value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
-
-  useEffect(function () {
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
     setInnerValue(value);
   }, [value]);
 
@@ -3375,23 +3107,21 @@ function Prompt(_a) {
     type: "button",
     "aria-label": "Ok",
     className: "fwe-btn fwe-btn-hero",
-    onClick: function onClick() {
-      return onOk(innerValue);
-    }
+    onClick: () => onOk(innerValue)
   }, ok)));
 }
 
 function PopoverMenu(_a) {
-  var icon = _a.icon,
-      menu = _a.menu,
-      className = _a.className,
+  var {
+    icon,
+    menu,
+    className
+  } = _a,
       props = __rest(_a, ["icon", "menu", "className"]);
 
-  var _useState = useState(false),
-      showPopper = _useState[0],
-      setShowPopper = _useState[1];
+  const [showPopper, setShowPopper] = useState(false);
 
-  var handleClick = function handleClick(item) {
+  const handleClick = item => {
     if (item.action) {
       item.action(item.data);
     }
@@ -3399,22 +3129,18 @@ function PopoverMenu(_a) {
     setShowPopper(false);
   };
 
-  var content = /*#__PURE__*/React.createElement("ul", {
+  const content = /*#__PURE__*/React.createElement("ul", {
     className: "fwe-list-group"
-  }, menu.map(function (item) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: item.icon + item.text,
-      className: "fwe-list-group-item"
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "fwe-btn fwe-btn-link fwe-dark",
-      onClick: function onClick() {
-        return handleClick(item);
-      }
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "fwe-icon fwe-pr-0 " + item.icon
-    }), /*#__PURE__*/React.createElement("span", null, item.text)));
-  }));
+  }, menu.map(item => /*#__PURE__*/React.createElement("li", {
+    key: item.icon + item.text,
+    className: "fwe-list-group-item"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "fwe-btn fwe-btn-link fwe-dark",
+    onClick: () => handleClick(item)
+  }, /*#__PURE__*/React.createElement("i", {
+    className: `fwe-icon fwe-pr-0 ${item.icon}`
+  }), /*#__PURE__*/React.createElement("span", null, item.text)))));
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('fwe-popover-menu', className)
   }, /*#__PURE__*/React.createElement(Popover, Object.assign({
@@ -3426,32 +3152,24 @@ function PopoverMenu(_a) {
     type: "button",
     className: "fwe-btn fwe-btn-link fwe-dark origin"
   }, /*#__PURE__*/React.createElement("i", {
-    className: "fwe-icon fwe-pr-0 " + icon
+    className: `fwe-icon fwe-pr-0 ${icon}`
   }))));
 }
 
-function Tooltip(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      title = _ref.title,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'bottom' : _ref$position;
-
-  var _useState = useState(false),
-      showPopper = _useState[0],
-      setShowPopper = _useState[1];
-
-  var referenceElement = useRef(null);
-
-  var _useState2 = useState(null),
-      popperElement = _useState2[0],
-      setPopperElement = _useState2[1];
-
-  var _useState3 = useState(null),
-      arrowElement = _useState3[0],
-      setArrowElement = _useState3[1];
-
-  var _usePopper = usePopper(referenceElement.current, popperElement, {
+function Tooltip({
+  children,
+  className,
+  title,
+  position = 'bottom'
+}) {
+  const [showPopper, setShowPopper] = useState(false);
+  const referenceElement = useRef(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement.current, popperElement, {
     placement: position,
     modifiers: [{
       name: 'arrow',
@@ -3469,19 +3187,12 @@ function Tooltip(_ref) {
         fallbackPlacements: ['right', 'left', 'top']
       }
     }]
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames('fr-tooltip-container', className),
     ref: referenceElement,
-    onMouseEnter: function onMouseEnter() {
-      return setShowPopper(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setShowPopper(false);
-    }
+    onMouseEnter: () => setShowPopper(true),
+    onMouseLeave: () => setShowPopper(false)
   }, children), showPopper && /*#__PURE__*/React.createElement("div", Object.assign({
     className: "fwe-popover-container",
     id: "tooltip",