@festo-ui/react 3.1.0 → 3.2.0

package/react.esm.js

@@ -1,3499 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback, isValidElement, createContext, useContext } from 'react';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
-import OutsideClickHandler from 'react-outside-click-handler';
-import { usePopper } from 'react-popper';
-import Draggable from 'react-draggable';
-import flatpickr from 'flatpickr';
-import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
-import Quill from 'quill';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref !== null) {
-    ref.current = value;
-  }
-}
-
-function useForkRef(refA, refB) {
-  /**
-   * This will create a new function if the ref props change and are defined.
-   * 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 () {
-    if (refA == null && refB == null) {
-      return null;
-    }
-
-    return function (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);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CSSTransition, {
-    nodeRef: backdropRef,
-    unmountOnExit: true,
-    timeout: {
-      exit: 600
-    },
-    "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;
-    }
-  }, /*#__PURE__*/React.createElement(CSSTransition, {
-    ref: modalRef,
-    unmountOnExit: true,
-    classNames: "fr-modal",
-    appear: true,
-    "in": isOpen,
-    timeout: {
-      exit: 600
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: combinedRef,
-    className: classNames('fr-modal fwe-modal', className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-modal-close"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": "Close",
-    className: "fwe-btn fwe-btn-link fwe-dark",
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement("i", {
-    "aria-hidden": "true",
-    className: "fwe-icon fwe-icon-close-small"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "fwe-sr-only"
-  }, "Close"))), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-modal-header"
-  }, head), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-modal-body"
-  }, body), children))));
-});
-
-var ModalFooter = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var fullWidth = _ref.fullWidth,
-      children = _ref.children,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: classNames('fwe-modal-footer', className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-modal-buttons', {
-      'fwe-modal-buttons--full-width': fullWidth
-    })
-  }, children));
-});
-
-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,
-      props = __rest(_a, ["alertType", "title", "className", "body", "strong", "subtitle", "cancel", "ok", "onCancel", "onOk"]);
-
-  return /*#__PURE__*/React.createElement(Modal, Object.assign({
-    className: classNames({
-      'fwe-modal--with-indicator-bar': strong,
-      'fwe-modal--warning': alertType === 'warning',
-      'fwe-modal--error': alertType === 'error',
-      'fwe-modal--info': alertType === 'info'
-    }, className),
-    head: /*#__PURE__*/React.createElement(React.Fragment, null, subtitle && /*#__PURE__*/React.createElement("h2", {
-      className: "fwe-modal-h2"
-    }, /*#__PURE__*/React.createElement("i", {
-      className: classNames({
-        'fwe-icon': true,
-        'fwe-icon-status-warning': alertType === 'warning',
-        'fwe-icon-status-failure': alertType === 'error',
-        'fwe-icon-status-check-status': alertType === 'info'
-      })
-    }), subtitle), /*#__PURE__*/React.createElement("h1", {
-      className: "fwe-modal-h1"
-    }, /*#__PURE__*/React.createElement("i", {
-      className: classNames({
-        'fwe-icon': true,
-        'fwe-icon-status-warning': alertType === 'warning',
-        'fwe-icon-status-failure': alertType === 'error',
-        'fwe-icon-status-check-status': alertType === 'info'
-      })
-    }), title)),
-    body: /*#__PURE__*/React.createElement("p", null, body)
-  }, props), (cancel || ok) && /*#__PURE__*/React.createElement(ModalFooter, {
-    fullWidth: true
-  }, cancel && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": "Cancel",
-    className: classNames('fwe-btn fwe-btn-lg', {
-      'fwe-btn-link': strong && (alertType === 'warning' || alertType === 'error')
-    }),
-    onClick: onCancel
-  }, cancel), ok && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": "Ok",
-    className: "fwe-btn fwe-btn-hero fwe-btn-lg",
-    onClick: onOk
-  }, ok)));
-}
-
-/**
- * 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) {
-    if ( /*#__PURE__*/React.isValidElement(element)) {
-      childrenList.push(Object.assign(Object.assign({}, element), {
-        props: Object.assign(Object.assign({}, element.props), {
-          className: 'fr-breadcrumb-location'
-        })
-      }));
-    }
-  });
-  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"
-    }));
-  }));
-}
-
-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', {
-    'fwe-btn-icon': iconOnly
-  }, {
-    'fwe-disabled': disabled
-  }, {
-    'fwe-btn-hero': primary
-  }, {
-    'fwe-btn-lg': large
-  }, className);
-  return /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: onClick,
-    className: classes,
-    disabled: disabled
-  }, icon && /*#__PURE__*/React.createElement("i", {
-    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;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-card', className)
-  }, children);
-}
-
-function CardBody(_ref) {
-  var children = _ref.children,
-      text = _ref.text,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-card-body', className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-card-text"
-  }, text), children);
-}
-
-function CardHeader(_ref) {
-  var title = _ref.title,
-      subtitle = _ref.subtitle,
-      action = _ref.action,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-card-header', className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-card-title"
-  }, /*#__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);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes
-  }, /*#__PURE__*/React.createElement("i", {
-    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)));
-}
-
-var ChipType;
-
-(function (ChipType) {
-  ChipType[ChipType["Choice"] = 0] = "Choice";
-  ChipType[ChipType["Category"] = 1] = "Category";
-  ChipType[ChipType["Filter"] = 2] = "Filter";
-  ChipType[ChipType["Action"] = 3] = "Action";
-  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', {
-    'fwe-selected': selected
-  }, {
-    'fwe-disabled': disabled
-  }, {
-    'fwe-chip-lg': large
-  }, {
-    'fwe-category': type === ChipType.Category
-  }, {
-    'fwe-filter': type === ChipType.Filter
-  }, {
-    'fwe-readonly': type === ChipType.Readonly
-  }, className);
-  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
-  }), children, type === ChipType.Category && /*#__PURE__*/React.createElement("i", {
-    onClick: function onClick(e) {
-      return _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', {
-    'fwe-chip-container-lg': large
-  }, className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes
-  }, 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 () {
-    setShowPopper(open);
-  }, [open]);
-
-  var _usePopper = usePopper(referenceElement.current, popperElement, {
-    placement: position,
-    modifiers: [{
-      name: 'arrow',
-      options: {
-        element: arrowElement
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 24]
-      }
-    }, {
-      name: 'flip',
-      options: {
-        fallbackPlacements: flip ? fallbackPositions : [position || 'auto']
-      }
-    }]
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
-  var handleChange = function handleChange(e, status) {
-    if (stopPropagation) {
-      e.stopPropagation();
-    }
-
-    setShowPopper(status);
-
-    if (onStatusChange) {
-      onStatusChange(status);
-    }
-  };
-
-  var childrenWrapper = /*#__PURE__*/React.createElement("div", {
-    className: classes,
-    style: {
-      display: 'inline'
-    },
-    ref: referenceElement,
-    onClick: function onClick(e) {
-      return handleChange(e, !showPopper);
-    }
-  }, children);
-  return /*#__PURE__*/React.createElement(OutsideClickHandler, {
-    display: "inline",
-    onOutsideClick: function onOutsideClick(e) {
-      return handleChange(e, false);
-    }
-  }, wrapper ? wrapper(childrenWrapper) : childrenWrapper, showPopper && /*#__PURE__*/React.createElement("div", Object.assign({
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    className: classNames('fwe-popover-container', containerClassName),
-    ref: setPopperElement,
-    style: styles.popper
-  }, attributes.popper), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-popover"
-  }, popoverContent), arrow && /*#__PURE__*/React.createElement("div", {
-    ref: setArrowElement,
-    style: styles.arrow,
-    id: "arrow"
-  })));
-}
-
-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 getBorderColor() {
-    if (!color || color.toUpperCase() === '#FFFFFF' || color.toUpperCase() === '#F2F3F5') {
-      return '#b6bec6'; // = $control-border
-    }
-
-    return color;
-  }
-
-  var colorBox = /*#__PURE__*/React.createElement("div", {
-    className: "fwe-color-box",
-    style: {
-      background: color,
-      borderColor: getBorderColor()
-    }
-  }, !color && /*#__PURE__*/React.createElement("svg", {
-    className: "fwe-no-color-pattern",
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    id: "canvas1",
-    width: "18",
-    height: "18"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
-    id: "bwsquare2px",
-    width: "4",
-    height: "4",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#ffffff"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "0",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#e5e8eb"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "2",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#e5e8eb"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "2",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#ffffff"
-  }))), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    rx: "0",
-    ry: "0",
-    width: "18",
-    height: "18",
-    fill: "url(#bwsquare2px)",
-    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), ' '));
-  };
-
-  return showPopOver ? /*#__PURE__*/React.createElement(Popover, {
-    containerClassName: "fwe-popover-container--color-indicator",
-    position: "top",
-    flip: false,
-    wrapper: wrapper,
-    popoverContent: children,
-    open: isEditorOpen,
-    onStatusChange: setEditorOpen,
-    stopPropagation: true
-  }, colorBox) : /*#__PURE__*/React.createElement(React.Fragment, null, wrapper(colorBox));
-}
-
-var ColorHelper = /*#__PURE__*/function () {
-  function ColorHelper() {}
-
-  // based on: https://gist.github.com/mjackson/5311256
-  ColorHelper.rgbToHsv = function 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;
-    s = max === 0 ? 0 : d / max;
-
-    if (max === min) {
-      h = 0; // achromatic
-    } else {
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-
-        case g:
-          h = (b - r) / d + 2;
-          break;
-
-        case b:
-          h = (r - g) / d + 4;
-          break;
-
-      }
-
-      h /= 6;
-    }
-
-    return {
-      h: h,
-      s: s,
-      v: v
-    };
-  } // based on: https://gist.github.com/mjackson/5311256
-  ;
-
-  ColorHelper.hsvToRgb = function hsvToRgb(_hsv) {
-    var 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);
-
-    switch (i % 6) {
-      case 0:
-        r = hsv.v;
-        g = t;
-        b = p;
-        break;
-
-      case 1:
-        r = q;
-        g = hsv.v;
-        b = p;
-        break;
-
-      case 2:
-        r = p;
-        g = hsv.v;
-        b = t;
-        break;
-
-      case 3:
-        r = p;
-        g = q;
-        b = hsv.v;
-        break;
-
-      case 4:
-        r = t;
-        g = p;
-        b = hsv.v;
-        break;
-
-      case 5:
-        r = hsv.v;
-        g = p;
-        b = q;
-        break;
-
-    }
-
-    return {
-      r: this.limitToByte(r * 255),
-      g: this.limitToByte(g * 255),
-      b: this.limitToByte(b * 255)
-    };
-  };
-
-  ColorHelper.limitToByte = function limitToByte(num) {
-    if (num <= 0) {
-      return 0;
-    }
-
-    if (num >= 255) {
-      return 255;
-    }
-
-    return num;
-  };
-
-  ColorHelper.limitToOne = function limitToOne(num) {
-    if (num <= 0) {
-      return 0;
-    }
-
-    if (num >= 1) {
-      return 1;
-    }
-
-    return num;
-  };
-
-  ColorHelper.numberToHex = function numberToHex(rgb) {
-    var hex = Math.round(rgb).toString(16);
-
-    if (hex.length < 2) {
-      hex = "0" + hex;
-    }
-
-    return hex.toUpperCase();
-  };
-
-  ColorHelper.rgbToHex = function rgbToHex(_rgb) {
-    var 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;
-  };
-
-  ColorHelper.hexToRgb = function hexToRgb(hexString) {
-    var numbersOnly = hexString.substring(1);
-    var 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 = {
-    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];
-
-  function limitAlpha() {
-    if (innerAlpha > 100) {
-      return 100;
-    }
-
-    if (innerAlpha < 0) {
-      return 0;
-    }
-
-    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;
-
-  function getSaturationGradient() {
-    return "linear-gradient(to right, white,  hsl(" + hsv.h * 360 + ", 100%, 50%) )";
-  }
-
-  function updateInputs(hexColor) {
-    setHexInputColor(hexColor);
-    var rgb = ColorHelper.hexToRgb(hexColor);
-
-    if (rgb) {
-      setRedInput(rgb.r);
-      setGreenInput(rgb.g);
-      setBlueInput(rgb.b);
-    }
-  }
-
-  useEffect(function () {
-    if (onChange) {
-      onChange(innerColor);
-    }
-  }, [onChange, innerColor]);
-  useEffect(function () {
-    if (onAlphaChange && innerAlpha) {
-      onAlphaChange(innerAlpha);
-    }
-  }, [onAlphaChange, innerAlpha]);
-  var updateColorHsv = useCallback(function (_hsv, _changeColor) {
-    var rgb = ColorHelper.hsvToRgb(_hsv);
-    var hex = ColorHelper.rgbToHex(rgb);
-
-    if (_changeColor) {
-      setInnerColor(hex);
-    }
-
-    updateInputs(hex);
-  }, []);
-  useEffect(function () {
-    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
-      });
-    });
-  }
-
-  function onGradientDrag(e, data) {
-    e.preventDefault();
-    updateGradient(data.x, data.y);
-  }
-
-  function updateHue(y) {
-    var newHue = y / baseSize;
-    setChangeColor(true);
-    setHsv(function (prevHsv) {
-      return Object.assign(Object.assign({}, prevHsv), {
-        h: newHue
-      });
-    });
-  }
-
-  function onHueDrag(e, data) {
-    e.preventDefault();
-    updateHue(data.y + 14 + baseSize);
-  }
-
-  function updateAlpha(y) {
-    setInnerAlpha(100 - Math.round(y / baseSize * 100));
-  }
-
-  function onAlphaDrag(e, data) {
-    e.preventDefault();
-    updateAlpha(data.y);
-  }
-
-  var updateColorRgb = function updateColorRgb(newColor) {
-    var currentColor = newColor || '#FFFFFF';
-    updateInputs(currentColor);
-    var rgb = ColorHelper.hexToRgb(currentColor);
-    setChangeColor(false);
-
-    if (rgb) {
-      var newHsv = ColorHelper.rgbToHsv(rgb);
-
-      if (newHsv) {
-        setHsv(newHsv);
-      }
-    }
-
-    setInnerColor(newColor);
-  };
-
-  var isHexColor = function isHexColor(_color) {
-    return /^#[0-9A-F]{6}$/i.test(_color);
-  };
-
-  function onHexInput(event) {
-    var newHexInputColor = event.target.value;
-    setHexInputColor(newHexInputColor.toUpperCase());
-
-    if (isHexColor(newHexInputColor)) {
-      updateColorRgb(newHexInputColor.toUpperCase());
-    }
-  }
-
-  function onHexBlur() {
-    if (!isHexColor(hexInputColor) && innerColor) {
-      setHexInputColor(innerColor);
-      updateColorRgb(innerColor);
-    }
-  }
-
-  function onRgbBlur(channel) {
-    var currentInput = '';
-
-    switch (channel) {
-      case 'r':
-        currentInput = redInput;
-        break;
-
-      case 'g':
-        currentInput = greenInput;
-        break;
-
-      case 'b':
-        currentInput = blueInput;
-        break;
-
-    }
-
-    if (typeof currentInput !== 'number' || typeof currentInput === 'number' && currentInput > 255 && currentInput < 0) {
-      var rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
-
-      if (rgb) {
-        var newHexColor = ColorHelper.rgbToHex(rgb);
-        updateInputs(newHexColor);
-      }
-    }
-  }
-
-  function onRgbInput(_value, channel) {
-    var numberValue = Number.parseInt(_value, 10);
-
-    switch (channel) {
-      case 'r':
-        setRedInput(_value);
-        break;
-
-      case 'g':
-        setGreenInput(_value);
-        break;
-
-      case 'b':
-        setBlueInput(_value);
-        break;
-
-    }
-
-    if (numberValue <= 255 && numberValue >= 0) {
-      var rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
-
-      if (rgb) {
-        rgb[channel] = numberValue;
-        var newHexColor = ColorHelper.rgbToHex(rgb);
-        setInnerColor(newHexColor);
-        updateColorRgb(newHexColor);
-      }
-    }
-  }
-
-  function onAlphaInput(_alpha) {
-    var numberValue = Number.parseInt(_alpha, 10);
-    setInnerAlpha(numberValue);
-  }
-
-  function onAlphaBlur() {
-    setInnerAlpha(limitAlpha());
-  }
-
-  var onChangeType = function onChangeType(type) {
-    setInputType(type);
-    setSelectOpen(false);
-  };
-
-  function onRemoveColor() {
-    if (useAlpha) {
-      setInnerAlpha(0);
-    } else {
-      updateColorRgb();
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-color-picker', {
-      'fwe-alpha-active': useAlpha
-    }, className)
-  }, !paletteOnly && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-d-flex"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-gradient-picker"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-saturation-gradient",
-    style: {
-      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);
-    },
-    className: "fwe-brightness-gradient"
-  }), /*#__PURE__*/React.createElement(Draggable, {
-    position: {
-      x: saturationKnobOffset,
-      y: valueKnobOffset
-    },
-    onDrag: function onDrag(e, data) {
-      return onGradientDrag(e, data);
-    },
-    bounds: "parent"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-knob"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-hue-picker"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-picker-background",
-    onClick: function onClick(_ref3) {
-      var offsetY = _ref3.nativeEvent.offsetY;
-      return updateHue(offsetY);
-    }
-  }), /*#__PURE__*/React.createElement(Draggable, {
-    position: {
-      x: 3,
-      y: hueKnobOffset
-    },
-    onDrag: function onDrag(e, data) {
-      return onHueDrag(e, data);
-    },
-    bounds: "parent"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-knob",
-    style: {
-      background: "hsl(" + hsv.h * 360 + ", 100%, 50%)"
-    }
-  }))), useAlpha && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-alpha-picker"
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: "fwe-no-color-pattern",
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    id: "canvas1",
-    width: "8",
-    height: "184"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
-    id: "bwsquare2px",
-    width: "4",
-    height: "4",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#ffffff"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "0",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#e5e8eb"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "2",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#e5e8eb"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "2",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#ffffff"
-  }))), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    rx: "4",
-    ry: "4",
-    width: "8",
-    height: "184",
-    fill: "url(#bwsquare2px)",
-    strokeWidth: "0"
-  })), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(_ref4) {
-      var offsetY = _ref4.nativeEvent.offsetY;
-      return updateAlpha(offsetY);
-    },
-    className: "fwe-picker-background",
-    style: {
-      backgroundImage: "linear-gradient( " + innerColor + ",  transparent)"
-    }
-  }), /*#__PURE__*/React.createElement(Draggable, {
-    position: {
-      x: 3,
-      y: alphaKnobOffset
-    },
-    onDrag: function onDrag(e, data) {
-      return onAlphaDrag(e, data);
-    },
-    bounds: "parent"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-knob"
-  })))), !paletteOnly && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-mt-s"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-type-select"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-type-indicator",
-    onClick: function onClick() {
-      return setSelectOpen(function (prevOpen) {
-        return !prevOpen;
-      });
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-type"
-  }, inputType), /*#__PURE__*/React.createElement("i", {
-    className: "fwe-icon fwe-icon-arrows-collapse"
-  })), selectOpen && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-popover"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-type-item', {
-      'fwe-selected': inputType === 'HEX'
-    }),
-    onClick: function onClick() {
-      return 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');
-    }
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "fwe-icon fwe-icon-menu-check"
-  }), " RGB"))), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-d-flex"
-  }, inputType === 'HEX' && /*#__PURE__*/React.createElement("label", {
-    className: "fwe-input-text fwe-hex-input"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    value: hexInputColor,
-    onBlur: onHexBlur,
-    onChange: onHexInput
-  })), inputType === 'RGB' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
-    className: "fwe-input-text fwe-red-input"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    value: redInput,
-    onBlur: function onBlur() {
-      return onRgbBlur('r');
-    },
-    onChange: function onChange(e) {
-      return 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');
-    }
-  })), /*#__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');
-    }
-  }))), useAlpha && /*#__PURE__*/React.createElement("label", {
-    className: "fwe-input-text fwe-alpha-input fwe-ml-auto"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    min: "0",
-    max: "100",
-    value: innerAlpha,
-    onBlur: function onBlur() {
-      return onAlphaBlur();
-    },
-    onChange: function onChange(e) {
-      return onAlphaInput(e.target.value);
-    }
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "fwe-percent-char"
-  }, "%"))))), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-mt-xs fwe-color-grid"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-remove-color-button",
-    onClick: onRemoveColor
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: "fwe-no-color-pattern",
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    id: "canvas1",
-    width: "18",
-    height: "18"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
-    id: "bwsquare2px",
-    width: "4",
-    height: "4",
-    patternUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#ffffff"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "0",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#e5e8eb"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "2",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#e5e8eb"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "2",
-    y: "2",
-    width: "2",
-    height: "2",
-    stroke: "none",
-    fill: "#ffffff"
-  }))), /*#__PURE__*/React.createElement("rect", {
-    x: "0",
-    y: "0",
-    rx: "0",
-    ry: "0",
-    width: "18",
-    height: "18",
-    fill: "url(#bwsquare2px)",
-    strokeWidth: "0"
-  })), /*#__PURE__*/React.createElement("i", {
-    className: classNames('fwe-icon fwe-icon-menu-check', {
-      'fwe-color-text': !innerColor
-    })
-  })), palette.map(function (colorItem) {
-    var itemClasses = classNames('fwe-color-item', {
-      'fwe-white-item': colorItem.toUpperCase() === '#FFFFFF'
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      key: colorItem,
-      className: itemClasses,
-      style: {
-        background: colorItem
-      },
-      onClick: function onClick() {
-        return updateColorRgb(colorItem.toUpperCase());
-      }
-    }, innerColor === colorItem.toUpperCase() && /*#__PURE__*/React.createElement("i", {
-      className: "fwe-icon fwe-icon-menu-check"
-    }));
-  })));
-}
-
-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,
-      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) {
-    if (node !== null) {
-      setScrollableContent(node.scrollHeight > node.getBoundingClientRect().height);
-    }
-  }, []);
-  useEffect(function () {
-    if (!isOpen) {
-      setScrollableContent(false);
-    }
-  }, [isOpen]);
-  return /*#__PURE__*/React.createElement(Modal, Object.assign({
-    className: classNames({
-      'fwe-modal--with-scrollable-content': hasScrollableContent
-    }, className),
-    head: /*#__PURE__*/React.createElement(React.Fragment, null, subtitle && /*#__PURE__*/React.createElement("h2", {
-      className: "fwe-modal-h2"
-    }, subtitle), /*#__PURE__*/React.createElement("h1", {
-      className: "fwe-modal-h1"
-    }, title)),
-    ref: ref,
-    body: /*#__PURE__*/React.createElement("p", null, body),
-    isOpen: isOpen
-  }, props), (cancel || ok) && /*#__PURE__*/React.createElement(ModalFooter, {
-    fullWidth: !hasScrollableContent
-  }, cancel && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": "Cancel",
-    className: "fwe-btn fwe-btn-lg",
-    onClick: onCancel
-  }, cancel), ok && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": "Ok",
-    className: "fwe-btn fwe-btn-hero fwe-btn-lg",
-    onClick: onOk
-  }, 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 toggle() {
-    var newOpen = !open;
-    setOpen(newOpen);
-
-    if (newOpen) {
-      calendar.open();
-    } else {
-      calendar.close();
-    }
-  }
-
-  var datePickerRef = useRef(null);
-
-  var _ref2 = options || {},
-      keepOpenOnDateChange = _ref2.keepOpenOnDateChange,
-      maxDate = _ref2.maxDate,
-      minDate = _ref2.minDate;
-
-  useEffect(function () {
-    if (calendar !== null && value !== undefined) {
-      calendar.setDate(value);
-    }
-  }, [calendar, value]);
-  useEffect(function () {
-    var _a;
-
-    function handleChange(date) {
-      datePickerRef.current.blur();
-
-      if (onChange) {
-        onChange(date);
-      }
-    }
-
-    function handleClose() {
-      setOpen(false);
-      datePickerRef.current.blur();
-    }
-
-    if (datePickerRef.current && calendar === null) {
-      setCalendar(flatpickr(datePickerRef.current, {
-        defaultDate: innerDefaultValue,
-        onChange: function onChange(v) {
-          return handleChange(v[0]);
-        },
-        onClose: handleClose,
-        position: 'below center',
-        formatDate: formatDate,
-        closeOnSelect: (_a = !keepOpenOnDateChange) !== null && _a !== void 0 ? _a : true,
-        clickOpens: false,
-        minDate: minDate,
-        maxDate: maxDate
-      }));
-    }
-  }, [datePickerRef, calendar, maxDate, minDate, onChange, innerDefaultValue, formatDate, keepOpenOnDateChange]);
-  useEffect(function () {
-    return function () {
-      if (calendar !== null) {
-        calendar.destroy();
-      }
-    };
-  }, [calendar]);
-  return /*#__PURE__*/React.createElement("label", {
-    className: classNames('fwe-input-text fwe-input-text-icon', className),
-    onClick: toggle
-  }, /*#__PURE__*/React.createElement("i", {
-    className: classNames('fwe-icon fwe-icon-time-calendar', {
-      'fwe-color-hero': open && !disabled,
-      'fwe-color-control-disabled': disabled
-    })
-  }), /*#__PURE__*/React.createElement("input", {
-    ref: datePickerRef,
-    "aria-label": "picked date",
-    type: "text",
-    readOnly: true,
-    required: required || null,
-    className: classNames('fr-date-picker', {
-      'fwe-border-hero': open && !disabled
-    }),
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-label"
-  }, children), hint && /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-info"
-  }, hint), error && /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-invalid"
-  }, 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 toggle() {
-    var newOpen = !open;
-    setOpen(newOpen);
-
-    if (newOpen) {
-      calendar.open();
-    } else {
-      calendar.close();
-    }
-  }
-
-  var inputRef = useRef(null);
-  var input2Ref = useRef(null);
-  var containerRef = useRef(null);
-  useEffect(function () {
-    var _a;
-
-    function handleChange(dates) {
-      if (onChange) {
-        onChange(dates);
-      }
-    }
-
-    function handleClose() {
-      setOpen(false);
-      inputRef.current.blur();
-      input2Ref.current.blur();
-    }
-
-    if (containerRef.current && inputRef.current && input2Ref.current && calendar === null) {
-      setCalendar(flatpickr(inputRef.current, {
-        defaultDate: defaultValue,
-        plugins: [rangePlugin({
-          input: input2Ref.current
-        })],
-        onChange: function onChange(v) {
-          return handleChange(v);
-        },
-        position: 'below center',
-        positionElement: containerRef.current,
-        formatDate: formatDate,
-        closeOnSelect: (_a = !(options === null || options === void 0 ? void 0 : options.keepOpenOnDateChange)) !== null && _a !== void 0 ? _a : true,
-        clickOpens: false,
-        onClose: handleClose,
-        minDate: options === null || options === void 0 ? void 0 : options.minDate,
-        maxDate: options === null || options === void 0 ? void 0 : options.maxDate
-      }));
-    }
-  }, [inputRef, input2Ref, containerRef, formatDate, options, onChange, calendar, defaultValue]);
-  useEffect(function () {
-    return function () {
-      if (calendar !== null) {
-        calendar.destroy();
-      }
-    };
-  }, [calendar]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fr-date-range-picker', className),
-    onClick: toggle
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "fwe-input-text fwe-input-text-icon"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: classNames('fwe-icon fwe-icon-time-calendar', {
-      'fwe-color-hero': open && !disabled,
-      'fwe-color-control-disabled': disabled
-    })
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: "fr-date-range-picker-inputs"
-  }, /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    "aria-label": "picked start date",
-    type: "text",
-    readOnly: true,
-    required: required || null,
-    className: classNames({
-      'fwe-border-hero': open && !disabled
-    }),
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement("input", {
-    ref: input2Ref,
-    "aria-label": "picked end date",
-    type: "text",
-    readOnly: true,
-    required: required || null,
-    className: classNames({
-      'fwe-border-hero': open && !disabled
-    }),
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement("span", {
-    className: classNames('fwe-input-text-label', {
-      'fwe-color-text-disabled': disabled
-    })
-  }, children), hint && /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-info"
-  }, hint), error && /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-invalid"
-  }, 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', {
-    'fwe-disabled': disabled
-  }, className);
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: onClick,
-    type: "button",
-    className: classes,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement("i", {
-    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', {
-    'fwe-waiting-indicator-md': size === 'medium'
-  }, {
-    'fwe-waiting-indicator-sm': size === 'small'
-  }, className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "fr-waiting-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-waiting-circle-1"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-waiting-circle-2"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-waiting-circle-3"
-  })), children);
-}
-
-var PaginationType;
-
-(function (PaginationType) {
-  PaginationType["Simple"] = "SIMPLE";
-  PaginationType["Numeric"] = "NUMERIC";
-  PaginationType["Dots"] = "DOTS";
-})(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 () {
-    if (controlled) {
-      setInnerPageCurrent(pageCurrent);
-    }
-  }, [pageCurrent, controlled]);
-
-  function handleChange(newPage) {
-    if (!controlled) {
-      setInnerPageCurrent(newPage);
-    }
-
-    if (onChange) {
-      onChange(newPage);
-    }
-  }
-
-  function onBtnDown() {
-    if (innerPageCurrent > 1) {
-      var newPageCurrent = innerPageCurrent - 1;
-      handleChange(newPageCurrent);
-    }
-  }
-
-  function onBtnUp() {
-    if (innerPageCurrent < pageMax) {
-      var newPageCurrent = innerPageCurrent + 1;
-      handleChange(newPageCurrent);
-    }
-  }
-
-  function onDotClick(index) {
-    var newPageCurrent = index + 1;
-    handleChange(newPageCurrent);
-  }
-
-  function handleKeyPress(event, index) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      onDotClick(index);
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, type !== PaginationType.Dots && /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-pagination fwe-p-m', {
-      'fwe-d-none': pageMax < 2
-    }, className)
-  }, /*#__PURE__*/React.createElement("button", {
-    className: classNames('fwe-navigate-btn-down', {
-      'fwe-disabled': innerPageCurrent <= 1
-    }),
-    onClick: onBtnDown,
-    type: "button",
-    "aria-label": "navigate-btn-down"
-  }), type === PaginationType.Numeric && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: "fwe-page-current"
-  }, innerPageCurrent), /*#__PURE__*/React.createElement("span", {
-    className: "fwe-page-max"
-  }, pageMax)), /*#__PURE__*/React.createElement("button", {
-    className: classNames('fwe-navigate-btn-up', {
-      'fwe-disabled': innerPageCurrent >= pageMax,
-      'fwe-ml-4': type === PaginationType.Simple
-    }),
-    onClick: onBtnUp,
-    type: "button",
-    "aria-label": "navigate-btn-up"
-  })), type === PaginationType.Dots && /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-p-m', {
-      'fwe-d-none': pageMax < 2
-    }, 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);
-      }
-    });
-  }))));
-}
-
-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', {
-    'fwe-bg-red': error
-  }, {
-    'fwe-progress-bar-black': background === 'black'
-  }, {
-    'fwe-progress-bar-background': background === 'background'
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-progress', className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes,
-    role: "progressbar",
-    style: {
-      width: progress + "%"
-    },
-    "aria-valuenow": progress,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-label": "progressbar"
-  }));
-}
-
-function Tabs(_ref) {
-  var config = _ref.config,
-      children = _ref.children,
-      className = _ref.className,
-      onChange = _ref.onChange;
-
-  var _a, _b, _c;
-
-  var activeId = '';
-  React.Children.forEach(children, function (element) {
-    if ( /*#__PURE__*/React.isValidElement(element)) {
-      if (activeId === '') {
-        activeId = element.props.id;
-      } else if (element.props.active) {
-        activeId = element.props.id;
-      }
-    }
-  });
-
-  var _useState = useState(activeId),
-      currentId = _useState[0],
-      setId = _useState[1];
-
-  var 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'
-  }, {
-    'fwe-tab-items-fill': ((_c = config.tabItems) === null || _c === void 0 ? void 0 : _c.appearance) === 'fill'
-  });
-
-  var showTabPane = function showTabPane(id) {
-    if (onChange) {
-      onChange({
-        previous: currentId,
-        current: id
-      });
-    }
-
-    setId(id);
-  };
-
-  var innerChildren = React.Children.map(children, function (element) {
-    if ( /*#__PURE__*/isValidElement(element)) {
-      return /*#__PURE__*/React.cloneElement(element, {
-        isVisible: element.props.id === currentId,
-        active: element.props.id === currentId
-      });
-    }
-
-    return undefined;
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-tabs', className)
-  }, /*#__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;
-    return /*#__PURE__*/React.createElement("li", {
-      key: id,
-      className: classNames('fwe-tab-item', {
-        'fwe-active': active
-      }),
-      onClick: function onClick() {
-        return 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
-    }), /*#__PURE__*/React.createElement("span", null, name)) : /*#__PURE__*/React.createElement("a", {
-      className: "fwe-tab-link",
-      role: "tab",
-      "aria-controls": id,
-      "aria-selected": active
-    }, name));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-tab-content"
-  }, 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({
-    'fr-show': isVisible
-  }, {
-    'fr-hide': !isVisible
-  }, className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: tabPaneClasses
-  }, children);
-}
-
-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,
-      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 () {
-    setChecked(checked);
-    setIndeterminate(indeterminate);
-  }, [checked, indeterminate]);
-
-  var handleChange = function handleChange() {
-    var newChecked = !isChecked;
-
-    if (indeterminate) {
-      setIndeterminate(false);
-    }
-
-    setChecked(newChecked);
-    onChange(newChecked);
-  };
-
-  var containerClasses = classNames('fwe-checkbox-container', {
-    'fr-checkbox-large': large
-  }, {
-    'fr-checkbox-invalid': !valid || required
-  }, {
-    'fwe-disabled': disabled
-  }, {
-    'fwe-checked': isChecked
-  }, {
-    'fwe-label-below': labelPosition === 'below'
-  }, {
-    'fwe-label-before': labelPosition === 'before'
-  }, {
-    'fr-checkbox-indeterminate': isIndeterminate
-  }, className);
-  return /*#__PURE__*/React.createElement("label", {
-    className: containerClasses,
-    htmlFor: id
-  }, /*#__PURE__*/React.createElement("input", Object.assign({
-    name: name,
-    type: "checkbox",
-    id: id,
-    disabled: disabled,
-    onChange: function onChange() {
-      return handleChange();
-    }
-  }, props)), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-checkbox-indicator-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-checkbox-indicator-background"
-  }), !isIndeterminate && isChecked && (large ? /*#__PURE__*/React.createElement("svg", {
-    width: "24px",
-    height: "24px"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z",
-    fill: "#fff"
-  })) : /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
-    fill: "#fff"
-  }))), isIndeterminate && !isChecked && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-indeterminate-indicator"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-checkbox-title"
-  }, 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', {
-    'fwe-radio-label-below': innerLabelPosition === 'below'
-  }, {
-    'fwe-radio-label-before': innerLabelPosition === 'before'
-  }, {
-    'fwe-radio-lg': large || groupLarge
-  }, className);
-  return /*#__PURE__*/React.createElement("label", {
-    className: classes,
-    htmlFor: id
-  }, /*#__PURE__*/React.createElement("input", {
-    checked: checked,
-    type: "radio",
-    id: id,
-    name: groupName || name,
-    value: value || groupValue,
-    onChange: function onChange() {
-      return _onChange(value);
-    },
-    disabled: disabled || groupDisabled,
-    required: required || groupRequired
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-radio-checkmark"
-  }), " ", /*#__PURE__*/React.createElement("div", {
-    className: "fwe-radio-label-content"
-  }, children));
-}
-
-var 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) {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return null;
-    }
-
-    if (index === 0 && child.props.icon !== null) {
-      if (innerConfig.iconOnly) {
-        useIcon = true;
-      } else {
-        useIconAndText = true;
-      }
-    }
-
-    if (child.props.checked) {
-      tmpValue = child.props.value;
-    }
-
-    return null;
-  });
-
-  var _useState = useState(tmpValue),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var handleChange = function handleChange(event, _value) {
-    if (onChange) {
-      onChange(event, _value);
-    }
-
-    setValue(_value);
-  };
-
-  return /*#__PURE__*/React.createElement("fieldset", {
-    className: classNames('fwe-segment', {
-      'fwe-segment-outline': innerConfig.outline,
-      'fwe-segment-icon': useIcon,
-      'fwe-segment-icon-text': useIconAndText
-    }, className)
-  }, /*#__PURE__*/React.createElement("legend", null, legend), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-segment-group"
-  }, React.Children.map(children, function (child) {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return null;
-    }
-
-    var id = (Math.random() * Date.now()).toString().replace('.', '-');
-    return /*#__PURE__*/React.cloneElement(child, {
-      key: id,
-      id: id,
-      onChange: handleChange,
-      iconOnly: innerConfig.iconOnly,
-      checked: child.props.value === value
-    });
-  })));
-}
-
-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';
-
-  if (icon) {
-    viewMode = iconOnly ? 'icon' : 'icon-text';
-  }
-
-  var handleChange = function handleChange(event) {
-    if (onChange) {
-      onChange(event, value);
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
-    className: "fwe-segment-input",
-    type: "radio",
-    id: id,
-    name: name,
-    value: value,
-    checked: checked,
-    disabled: disabled,
-    onChange: function onChange(e) {
-      return handleChange(e);
-    }
-  }), /*#__PURE__*/React.createElement("label", {
-    className: classNames('fwe-segment-label', className),
-    htmlFor: id
-  }, viewMode === 'icon' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: "fwe-sr-only"
-  }, label), /*#__PURE__*/React.createElement("i", {
-    "aria-hidden": "true",
-    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)
-  }), label)));
-}
-
-var SelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var children = _a.children,
-      className = _a.className,
-      props = __rest(_a, ["children", "className"]);
-
-  return /*#__PURE__*/React.createElement("span", Object.assign({
-    ref: ref,
-    className: className
-  }, props), children);
-});
-
-function calcVirtualScrollHeight(config, itemLength) {
-  var defaultHeight = 48;
-  var height = defaultHeight;
-
-  if (itemLength === 2) {
-    height = defaultHeight * 2;
-  } else if (itemLength >= 3) {
-    height = defaultHeight * 3;
-  }
-
-  if (config.scroll.viewportSize != null && config.scroll.viewportSize !== undefined) {
-    if (itemLength >= config.scroll.viewportSize) {
-      height = config.scroll.viewportSize * defaultHeight;
-    } else if (itemLength < config.scroll.viewportSize) {
-      height = itemLength * defaultHeight;
-    }
-  }
-
-  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,
-      props = __rest(_a, ["defaultValue", "value", "label", "options", "onChange", "required", "config", "disabled", "className", "name", "id", "children", "hint", "error"]);
-
-  var _useState = 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) {
-    if ( /*#__PURE__*/React.isValidElement(element)) {
-      childrenList.push(Object.assign(Object.assign({}, element), {
-        props: Object.assign(Object.assign({}, element.props), {
-          className: 'fwe-select-option-content'
-        })
-      }));
-    }
-  });
-  var usedOptions = options !== null && options !== void 0 ? options : childrenList.map(function (child) {
-    return child.props.option;
-  });
-  var listItemRef = useRef(Array.from({
-    length: usedOptions.length
-  }, function () {
-    return /*#__PURE__*/React.createRef();
-  }));
-  useEffect(function () {
-    if (controlled) {
-      setInnerValue(value);
-    }
-  }, [value, controlled]);
-  var getSelectedOptionLabel = useCallback(function () {
-    var _a;
-
-    if (innerValue !== undefined) {
-      return (_a = usedOptions.find(function (option) {
-        return 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;
-
-  function handleButtonFocus(blur) {
-    if (buttonEl && buttonEl.current) {
-      if (blur) {
-        buttonEl.current.blur();
-      } else {
-        buttonEl.current.focus();
-      }
-    }
-  }
-
-  var focusNextElement = function focusNextElement(nextIndex) {
-    if (listItemRef && listItemRef.current) {
-      var nextItem = listItemRef.current[nextIndex].current;
-
-      if (nextItem !== null) {
-        nextItem.focus();
-      }
-    }
-  };
-
-  useEffect(function () {
-    if (optionsWrapper.isFocused) {
-      if (optionsWrapper.action === 'key') {
-        var index = usedOptions.findIndex(function (option) {
-          return option.label === getSelectedOptionLabel();
-        });
-
-        if (index >= 0) {
-          focusNextElement(index);
-        }
-      } else if (optionsWrapper.action === 'click') {
-        handleButtonFocus(true);
-      }
-    }
-  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel]);
-
-  var handleOptionChange = function handleOptionChange(newOption) {
-    if (!controlled) {
-      setInnerValue(newOption.data);
-    }
-
-    if (onChange) {
-      onChange(newOption.data);
-    }
-
-    setOptionsWrapper(function (prevOptionsWrapper) {
-      return 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', ' '];
-
-    if (arrowKeys.concat(validKeys).includes(event.key)) {
-      event.preventDefault();
-    }
-
-    if (event.key === 'ArrowDown') {
-      focusNextElement((index + 1) % usedOptions.length);
-    }
-
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      var nextIndex = (index - 1) % usedOptions.length;
-
-      if (nextIndex < 0) {
-        nextIndex += usedOptions.length;
-      }
-
-      focusNextElement(nextIndex);
-    }
-
-    if (validKeys.includes(event.key)) {
-      handleOptionChange(option);
-      event.preventDefault();
-    }
-
-    if (event.key === 'Escape') {
-      setOptionsWrapper(function (prevOptionsWrapper) {
-        return Object.assign(Object.assign({}, prevOptionsWrapper), {
-          isFocused: false
-        });
-      });
-      handleButtonFocus();
-    }
-  };
-
-  var handleKeyPress = function handleKeyPress(event) {
-    var validKeys = ['Enter', ' ', 'ArrowUp', 'ArrowDown'];
-
-    if (validKeys.includes(event.key)) {
-      event.preventDefault();
-
-      if (!disabled) {
-        setOptionsWrapper(function (prevOptionsWrapper) {
-          return {
-            action: 'key',
-            isFocused: !prevOptionsWrapper.isFocused
-          };
-        });
-      }
-    }
-  };
-
-  var handleClick = function handleClick(e) {
-    e.stopPropagation();
-
-    if (!disabled) {
-      setOptionsWrapper(function (prevOptionsWrapper) {
-        return {
-          action: '',
-          isFocused: !prevOptionsWrapper.isFocused
-        };
-      });
-    }
-  };
-
-  var selectedOptionLabel = getSelectedOptionLabel();
-  var selectClassName = classNames('fwe-select', {
-    'fwe-focus': optionsWrapper.isFocused
-  }, {
-    'fwe-empty': selectedOptionLabel === undefined && !optionsWrapper.isFocused
-  }, {
-    'fwe-required': required
-  }, {
-    'fwe-disabled': disabled
-  }, {
-    'fwe-invalid': error
-  });
-
-  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("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(SelectOption, Object.assign({}, propsWithoutOption)));
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement(OutsideClickHandler, {
-    onOutsideClick: function onOutsideClick() {
-      return setOptionsWrapper({
-        action: '',
-        isFocused: false
-      });
-    }
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: ref,
-    className: classNames('fwe-select-wrapper', className)
-  }, props), /*#__PURE__*/React.createElement("select", {
-    defaultValue: defaultValue,
-    value: innerValue,
-    name: name,
-    id: id,
-    "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", {
-    role: "button",
-    tabIndex: 0,
-    className: selectClassName,
-    onClick: function onClick(e) {
-      return handleClick(e);
-    },
-    ref: buttonEl,
-    onKeyDown: handleKeyPress
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-select-content"
-  }, selectedOptionLabel)), /*#__PURE__*/React.createElement("label", {
-    className: classNames('fwe-select-label', {
-      'fwe-sr-only': config === null || config === void 0 ? void 0 : config.hideLabel
-    }),
-    htmlFor: id
-  }, label || ''), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-select-underline"
-  }), hint && !error && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-select-description"
-  }, 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')
-  }, (scroll === null || scroll === void 0 ? void 0 : scroll.enabled) ? /*#__PURE__*/React.createElement("div", {
-    className: "fr-select-scroll",
-    style: {
-      height: calcVirtualScrollHeight(config, usedOptions.length)
-    }
-  }, 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', {
-    'fwe-slider-lg': large
-  }, {
-    'fr-slider-label': label !== null && showValue
-  }, className);
-  useEffect(function () {
-    setInnerValue(value);
-  }, [value]);
-  var updateValuePosition = useCallback(function () {
-    if (labelEl.current) {
-      var _labelEl$current$getB = labelEl.current.getBoundingClientRect(),
-          width = _labelEl$current$getB.width;
-
-      var diff = max - min;
-      setLeft((innerValue - min) / diff * (width - 16));
-    }
-  }, [innerValue, max, min]);
-
-  var handleAfterChange = function handleAfterChange() {
-    if (onChangeCommitted) {
-      onChangeCommitted(innerValue);
-    }
-  };
-
-  var handleChange = function handleChange(e) {
-    var newValue = Number.parseFloat(e.target.value);
-    setInnerValue(newValue);
-
-    if (onChange) {
-      onChange(e, newValue);
-    }
-  };
-
-  useEffect(function () {
-    function handleResize() {
-      updateValuePosition();
-    }
-
-    window.addEventListener('resize', handleResize);
-    handleResize(); // Remove event listener on cleanup
-
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, [updateValuePosition]);
-  return /*#__PURE__*/React.createElement("label", {
-    ref: labelEl,
-    className: classes
-  }, label && /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("input", {
-    className: "fwe-slider-input",
-    type: "range",
-    disabled: disabled,
-    min: min,
-    max: max,
-    step: step,
-    onChange: handleChange,
-    value: innerValue,
-    onKeyUp: handleAfterChange,
-    onMouseUp: handleAfterChange,
-    onTouchEnd: handleAfterChange
-  }), showValue && left !== null && /*#__PURE__*/React.createElement("span", {
-    className: "fr-slider-value",
-    style: {
-      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;
-
-    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 () {
-        clearTimeout(timer);
-      };
-    }
-
-    return undefined;
-  }, [data]);
-
-  function handleClose() {
-    setShow(false);
-  }
-
-  var classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
-  return /*#__PURE__*/React.createElement(CSSTransition, {
-    nodeRef: nodeRef,
-    onExited: function onExited() {
-      return onClose ? onClose() : undefined;
-    },
-    unmountOnExit: true,
-    timeout: {
-      exit: 600
-    },
-    "in": show,
-    classNames: classes,
-    appear: true
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: nodeRef,
-    className: classes
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames({
-      'fwe-snackbar': true,
-      'fwe-snackbar-b': (data === null || data === void 0 ? void 0 : data.variant) === 'b',
-      'fwe-snackbar-c': (data === null || data === void 0 ? void 0 : data.variant) === 'c',
-      'fwe-snackbar-warning': (data === null || data === void 0 ? void 0 : data.type) === 'warning',
-      'fwe-snackbar-error': (data === null || data === void 0 ? void 0 : data.type) === 'error',
-      'fwe-snackbar-shadow': data === null || data === void 0 ? void 0 : data.darkBackground
-    }, data === null || data === void 0 ? void 0 : data.className)
-  }, (data === null || data === void 0 ? void 0 : data.type) && /*#__PURE__*/React.createElement("i", {
-    "aria-hidden": true,
-    className: classNames({
-      'fwe-icon': true,
-      'fwe-icon-status-info': (data === null || data === void 0 ? void 0 : data.type) === 'info',
-      'fwe-icon-status-warning': (data === null || data === void 0 ? void 0 : data.type) === 'warning',
-      'fwe-icon-status-failure': (data === null || data === void 0 ? void 0 : data.type) === 'error'
-    })
-  }), /*#__PURE__*/React.createElement("span", null, data === null || data === void 0 ? void 0 : data.text), (data === null || data === void 0 ? void 0 : data.action) && /*#__PURE__*/React.createElement("button", {
-    "aria-label": "UserAction",
-    type: "button",
-    className: "fwe-btn fwe-btn-link",
-    onClick: function onClick() {
-      return 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",
-    className: "fwe-btn fwe-btn-link",
-    onClick: handleClose
-  }, /*#__PURE__*/React.createElement("i", {
-    "aria-hidden": true,
-    className: "fwe-icon fwe-icon-close-small"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "fwe-sr-only"
-  }, "Close")))));
-}
-
-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];
-
-  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);
-    });
-  }
-
-  function closeSnackbar(key) {
-    if (key) {
-      setSnacks(function (prevSnacks) {
-        return prevSnacks.filter(function (snack) {
-          return snack.key !== key;
-        });
-      });
-    }
-  }
-
-  function handleClose(snack) {
-    closeSnackbar(snack.key);
-
-    if (snack.onClose) {
-      snack.onClose();
-    }
-  }
-
-  var contextValue = {
-    addSnackbar: addSnackbar,
-    closeSnackbar: 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
-    });
-  })));
-}
-
-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), {
-    'fwe-switch-lg': large
-  }, className);
-
-  var _useState = useState(value),
-      currentValue = _useState[0],
-      setCurrentValue = _useState[1];
-
-  useEffect(function () {
-    setCurrentValue(value);
-  }, [value]);
-
-  var handleChange = function handleChange() {
-    var newValue = !currentValue;
-    setCurrentValue(newValue);
-
-    if (onChange) {
-      onChange(newValue);
-    }
-  };
-
-  return /*#__PURE__*/React.createElement("label", {
-    className: labelClassName
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    disabled: disabled,
-    checked: currentValue,
-    onChange: function onChange() {
-      return handleChange();
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-switch-track"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-switch-label-content"
-  }, title));
-}
-
-var TableHeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  function handleClick(event) {
-    if (props.onClick) {
-      props.onClick(event);
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("th", Object.assign({}, props, {
-    className: classNames('fwe-table-order', {
-      'fwe-active': props.active
-    }, {
-      'fwe-table-order-descending': !props.ascending
-    }, props.className),
-    onClick: handleClick,
-    ref: 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 () {
-    if (controlled) {
-      setInnerValue(value);
-    }
-  }, [value, controlled]);
-  useEffect(function () {
-    var input = ref.current;
-    var shadow = shadowRef.current;
-    var minRows = 2;
-    shadow.value = input.value || 'x';
-    shadow.style.width = "" + input.clientWidth;
-    var newHeight = Math.max(minRows * 24, shadow.scrollHeight);
-    setHeight(newHeight + 4 + 4 + 1);
-  }, [innerValue]);
-
-  function handleChange(event) {
-    if (!controlled) {
-      setInnerValue(event.target.value);
-    }
-
-    if (onChange) {
-      onChange(event);
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("label", {
-    className: classNames('fwe-input-text', className)
-  }, /*#__PURE__*/React.createElement("textarea", {
-    style: Object.assign({}, !rows && {
-      height: height,
-      overflow: 'hidden'
-    }),
-    ref: ref,
-    className: classNames('fr-textarea', "fwe-row-" + rows),
-    disabled: disabled,
-    readOnly: readonly,
-    required: required,
-    autoComplete: "off",
-    onChange: handleChange,
-    onFocus: onFocus,
-    onInput: onInput,
-    onBlur: onBlur,
-    maxLength: maxLength,
-    defaultValue: innerValue,
-    value: innerValue
-  }), /*#__PURE__*/React.createElement("textarea", {
-    style: {
-      visibility: 'hidden',
-      position: 'absolute',
-      overflow: 'hidden',
-      height: 0,
-      top: 0,
-      left: 0,
-      transform: 'translateZ(0)',
-      padding: '0'
-    },
-    ref: shadowRef,
-    readOnly: true
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-label"
-  }, label), hint && /*#__PURE__*/React.createElement("span", {
-    className: hintClasses
-  }, hint), error !== undefined && /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-invalid"
-  }, error), maxLength > 0 && /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-count"
-  }, 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 handleClick() {
-    var btn = btnRef.current;
-    setActive(function (prevActive) {
-      return !prevActive;
-    });
-    btn.click();
-  }
-
-  useEffect(function () {
-    function callback(mutationRecords) {
-      mutationRecords.forEach(function (mutationRecord) {
-        var classList = mutationRecord.target.classList;
-        var oldValue = mutationRecord.oldValue;
-
-        if (classList.contains('ql-active')) {
-          setActive(true);
-        }
-
-        if (!classList.contains('ql-active') && oldValue.includes('ql-active')) {
-          setActive(false);
-        }
-      });
-    }
-
-    if (btnRef.current && !noAction) {
-      var observer = new MutationObserver(callback);
-      observer.observe(btnRef.current, {
-        attributes: true,
-        attributeFilter: ['class'],
-        attributeOldValue: true
-      });
-    }
-  }, [btnRef, noAction]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    ref: btnRef,
-    type: "button",
-    className: classNames((_classNames = {}, _classNames["ql-" + (category || type)] = !list, _classNames), {
-      'ql-list': list
-    }, 'fwe-d-none', (_classNames2 = {}, _classNames2["action-" + type] = !noAction, _classNames2)),
-    "aria-hidden": "true",
-    value: value
-  }), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames('fwe-btn', {
-      'fwe-btn-toolbar-list': list
-    }, 'fr-button', className, {
-      'fwe-active': active && !noAction
-    }),
-    onClick: function onClick() {
-      return handleClick();
-    },
-    disabled: disabled
-  }, label && /*#__PURE__*/React.createElement("div", {
-    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')
-  })));
-}
-
-var xss = require('xss');
-
-var defaultConfig = {
-  toolbar: {
-    bold: true,
-    italic: true,
-    underline: true,
-    alignCenter: true,
-    alignRight: true,
-    bulletList: true,
-    orderedList: true,
-    image: true,
-    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;
-
-  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 = {
-    toolbar: Object.assign(Object.assign({}, defaultConfig.toolbar), configProps === null || configProps === void 0 ? void 0 : configProps.toolbar)
-  };
-  useEffect(function () {
-    if (editorRef && editor === null) {
-      var newEditor = new Quill(editorRef.current, {
-        modules: {
-          toolbar: "#editor-toolbar-" + id
-        },
-        theme: 'snow',
-        scrollingContainer: "#editor-container-" + id
-      });
-      newEditor.root.setAttribute('role', 'textbox');
-      newEditor.root.setAttribute('aria-labelledby', "editor-label-" + id);
-      newEditor.root.setAttribute('aria-multiline', 'true');
-      newEditor.enable(!readOnly);
-
-      if (disabled) {
-        newEditor.disable();
-      } else if (!readOnly) {
-        newEditor.enable();
-      } // set up a matcher that does allow/disallow to paste images corresponding to config settings
-
-
-      newEditor.clipboard.addMatcher('img', function (_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');
-        return new Delta().insert('');
-      });
-      setEditor(newEditor);
-    }
-  }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar.image]);
-  useEffect(function () {
-    if (editor) {
-      editor.on('text-change', function () {
-        var html = editor.root.innerHTML;
-
-        if (html === '<p><br></p>' || html === '<div><br></div>' || html === undefined) {
-          html = null;
-        }
-
-        if (onChange) {
-          onChange(html);
-        }
-
-        setInnerValue(html);
-      });
-    }
-  }, [editor, onChange]);
-  useEffect(function () {
-    if (editor) {
-      var whiteList = Object.assign(Object.assign({}, xss.whiteList), {
-        a: [].concat(xss.whiteList.a, ['rel'])
-      });
-      var sanitizedValue = xss(value, {
-        whiteList: whiteList
-      });
-      var content = editor.clipboard.convert(sanitizedValue);
-      editor.setContents(content, 'silent');
-    }
-  }, [editor, value]);
-
-  function currentLength() {
-    return (innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) || 0;
-  }
-
-  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;
-
-    switch (name) {
-      case 'typo':
-        return !typos || !textAlign && !linkOrImage && !lists;
-
-      case 'text-align':
-        return !textAlign || !linkOrImage && !lists;
-
-      case 'lists':
-        return !lists || !linkOrImage;
-
-      case 'image':
-        return !config.toolbar.image || !config.toolbar.link;
-    }
-
-    return true;
-  }
-
-  return /*#__PURE__*/React.createElement("label", {
-    className: classNames('fwe-input-text', {
-      disabled: disabled
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-editor-toolbar', (_classNames = {}, _classNames["fwe-editor-toolbar-" + className] = className, _classNames)),
-    id: "editor-toolbar-" + id
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ql-formats fwe-d-none"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "ql-size",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("option", {
-    value: "small",
-    "aria-label": "small"
-  }), /*#__PURE__*/React.createElement("option", {
-    selected: true,
-    "aria-label": "selected"
-  }), /*#__PURE__*/React.createElement("option", {
-    value: "large",
-    "aria-label": "large"
-  }), /*#__PURE__*/React.createElement("option", {
-    value: "huge",
-    "aria-label": "huge"
-  }))), /*#__PURE__*/React.createElement("span", {
-    className: "ql-formats fwe-mr-3"
-  }, ((_a = config === null || config === void 0 ? void 0 : config.toolbar) === null || _a === void 0 ? void 0 : _a.bold) && /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    type: "bold",
-    className: "fwe-mr-3",
-    label: "B"
-  }), ((_b = config === null || config === void 0 ? void 0 : config.toolbar) === null || _b === void 0 ? void 0 : _b.italic) && /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    type: "italic",
-    className: "fwe-mr-3",
-    label: "I"
-  }), ((_c = config === null || config === void 0 ? void 0 : config.toolbar) === null || _c === void 0 ? void 0 : _c.underline) && /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    type: "underline",
-    label: "U"
-  }), !hideDivider('typo') && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-  }), ((_d = config === null || config === void 0 ? void 0 : config.toolbar) === null || _d === void 0 ? void 0 : _d.alignCenter) && /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    category: "align",
-    type: "align-center",
-    icon: classNames('text-align-center', {
-      'fwe-gray': disabled
-    }),
-    value: "center",
-    className: classNames('fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments', {
-      'fwe-mr-3': (_e = config === null || config === void 0 ? void 0 : config.toolbar) === null || _e === void 0 ? void 0 : _e.alignRight
-    })
-  }), ((_f = config === null || config === void 0 ? void 0 : config.toolbar) === null || _f === void 0 ? void 0 : _f.alignRight) && /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    category: "align",
-    type: "align-right",
-    icon: classNames('text-align-right', {
-      'fwe-gray': disabled
-    }),
-    value: "right",
-    className: "fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments"
-  }), !hideDivider('text-align') && /*#__PURE__*/React.createElement("div", {
-    className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-  }), ((_g = config === null || config === void 0 ? void 0 : config.toolbar) === null || _g === void 0 ? void 0 : _g.bulletList) && /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    className: "fwe-mr-3",
-    type: "ul",
-    list: true,
-    icon: "list-list-view",
-    value: "bullet"
-  }), ((_h = config === null || config === void 0 ? void 0 : config.toolbar) === null || _h === void 0 ? void 0 : _h.orderedList) && /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    type: "ol",
-    list: true,
-    icon: "enumeration",
-    value: "ordered"
-  }), ((_j = config === null || config === void 0 ? void 0 : config.toolbar) === null || _j === void 0 ? void 0 : _j.image) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-  }), /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    type: "image",
-    icon: "image-image",
-    noAction: true
-  })), ((_k = config === null || config === void 0 ? void 0 : config.toolbar) === null || _k === void 0 ? void 0 : _k.link) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
-  }), /*#__PURE__*/React.createElement(TextEditorButton, {
-    disabled: disabled,
-    type: "link",
-    icon: "file-link",
-    noAction: true
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-editor-container', {
-      'fwe-editor-container--error': error
-    }),
-    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
-  }, 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));
-}
-
-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,
-      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 () {
-    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');
-
-  function handleChange(e) {
-    setInnerValue(e.target.value);
-
-    if (props.onChange) {
-      props.onChange(e);
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("label", {
-    className: labelClasses
-  }, /*#__PURE__*/React.createElement("input", Object.assign({
-    disabled: disabled,
-    required: required,
-    readOnly: readonly,
-    placeholder: placeholder,
-    autoComplete: "off",
-    min: min,
-    max: max,
-    step: step,
-    onChange: handleChange,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onInput: onInput,
-    type: innerType,
-    value: innerValue
-  }, props)), /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-label"
-  }, label), hint && /*#__PURE__*/React.createElement("span", {
-    className: hintClasses
-  }, hint), error && /*#__PURE__*/React.createElement("span", {
-    className: "fwe-input-text-invalid"
-  }, error));
-};
-
-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,
-      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 () {
-    setInnerValue(value);
-  }, [value]);
-
-  function handleChange(e) {
-    setInnerValue(e.target.value);
-
-    if (onChange) {
-      onChange(e);
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(Modal, Object.assign({
-    head: /*#__PURE__*/React.createElement(React.Fragment, null, subtitle && /*#__PURE__*/React.createElement("h2", {
-      className: "fwe-modal-h2"
-    }, subtitle), /*#__PURE__*/React.createElement("h1", {
-      className: "fwe-modal-h1"
-    }, title)),
-    body: /*#__PURE__*/React.createElement(TextInput, {
-      onChange: handleChange,
-      label: label,
-      hint: hint,
-      value: innerValue
-    })
-  }, props), (cancel || ok) && /*#__PURE__*/React.createElement(ModalFooter, null, cancel && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": "Cancel",
-    className: "fwe-btn",
-    onClick: onCancel
-  }, cancel), ok && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-label": "Ok",
-    className: "fwe-btn fwe-btn-hero",
-    onClick: function onClick() {
-      return onOk(innerValue);
-    }
-  }, ok)));
-}
-
-function PopoverMenu(_a) {
-  var icon = _a.icon,
-      menu = _a.menu,
-      className = _a.className,
-      props = __rest(_a, ["icon", "menu", "className"]);
-
-  var _useState = useState(false),
-      showPopper = _useState[0],
-      setShowPopper = _useState[1];
-
-  var handleClick = function handleClick(item) {
-    if (item.action) {
-      item.action(item.data);
-    }
-
-    setShowPopper(false);
-  };
-
-  var 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)));
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('fwe-popover-menu', className)
-  }, /*#__PURE__*/React.createElement(Popover, Object.assign({
-    popoverContent: content,
-    position: "right",
-    open: showPopper,
-    onStatusChange: setShowPopper
-  }, props), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "fwe-btn fwe-btn-link fwe-dark origin"
-  }, /*#__PURE__*/React.createElement("i", {
-    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, {
-    placement: position,
-    modifiers: [{
-      name: 'arrow',
-      options: {
-        element: arrowElement
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 24]
-      }
-    }, {
-      name: 'flip',
-      options: {
-        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);
-    }
-  }, children), showPopper && /*#__PURE__*/React.createElement("div", Object.assign({
-    className: "fwe-popover-container",
-    id: "tooltip",
-    ref: setPopperElement,
-    style: styles.popper
-  }, attributes.popper), /*#__PURE__*/React.createElement("div", {
-    ref: setArrowElement,
-    style: styles.arrow,
-    id: "arrow"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "fwe-popover"
-  }, title)));
-}
-
-export { AlertModal, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ColorIndicator, ColorPicker, ConfirmModal, DatePicker, DateRangePicker, LinkButton, LoadingIndicator, Pagination, Popover, PopoverMenu, Progress, Prompt, RadioButton, RadioButton as RadioGroup, Segment, SegmentControl, Select, Slider, Snackbar, SnackbarProvider, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextEditor, TextInput, Tooltip, useSnackbar };