@festo-ui/react 3.1.0 → 3.2.1-pre-20220624.2

package/index.esm.js

@@ -0,0 +1,4778 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import React, { createContext, forwardRef, useRef, useState, useContext, useCallback, useMemo, useEffect, isValidElement } from 'react';
+import { Transition, 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';
+import ReactDOM from 'react-dom';
+
+/*! *****************************************************************************
+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;
+}
+
+const AccordionContext$1 = /*#__PURE__*/createContext({});
+
+let nextId$2 = 0;
+const Accordion = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    showMore = 'Show more',
+    showLess = 'Show less',
+    keepItemsOpen = true,
+    className
+  } = _a,
+      props = __rest(_a, ["children", "showMore", "showLess", "keepItemsOpen", "className"]);
+
+  const componentId = useRef(`accordion-${++nextId$2}`);
+  const [expanded, setExpanded] = useState(false);
+
+  const handleChange = (id, newExpanded) => {
+    setExpanded(newExpanded ? id : false);
+  };
+
+  const contextValue = {
+    showMore,
+    showLess,
+    parentId: componentId.current,
+    keepItemsOpen,
+    expanded: expanded,
+    toggle: handleChange
+  };
+  return jsx(AccordionContext$1.Provider, Object.assign({
+    value: contextValue
+  }, {
+    children: jsx("div", Object.assign({
+      ref: ref,
+      className: classNames('fr-accordion', className)
+    }, props, {
+      children: children
+    }), void 0)
+  }), void 0);
+});
+
+const AccordionHeader = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className
+  } = _a,
+      props = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({
+    ref: ref,
+    className: classNames('fr-accordion-header', className)
+  }, props, {
+    children: children
+  }), void 0);
+});
+
+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(() => {
+    if (refA == null && refB == null) {
+      return null;
+    }
+
+    return instance => {
+      setRef(refA, instance);
+      setRef(refB, instance);
+    };
+  }, [refA, refB]);
+}
+
+const AccordionContext = /*#__PURE__*/createContext({});
+
+const AccordionItemBody = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className
+  } = _a,
+      props = __rest(_a, ["children", "className"]);
+
+  const {
+    expanded,
+    id
+  } = useContext(AccordionContext);
+  const innerRef = useRef(null);
+  const element = innerRef.current;
+  const combinedRef = useForkRef(ref, innerRef);
+  const initialHeight = useRef(expanded ? 'auto' : 0);
+
+  const handleEntering = () => {
+    const itemHeight = element.scrollHeight;
+    element.style.height = `${itemHeight}px`;
+  };
+
+  const handleEntered = () => {
+    element.style.height = 'auto';
+  };
+
+  const handleExit = () => {
+    const itemHeight = element.scrollHeight;
+    element.style.height = `${itemHeight}px`;
+  };
+
+  const handleExiting = () => {
+    setTimeout(() => {
+      element.style.height = '0px';
+    });
+  };
+
+  return jsx(Transition, Object.assign({
+    in: expanded,
+    nodeRef: innerRef,
+    timeout: 300,
+    onExit: handleExit,
+    onExiting: handleExiting,
+    onEntering: handleEntering,
+    onEntered: handleEntered
+  }, {
+    children: jsxs("div", Object.assign({
+      ref: combinedRef,
+      role: "region",
+      id: `${id}-body`,
+      "aria-labelledby": `${id}-header`,
+      className: classNames('fr-accordion-item-body', className),
+      style: {
+        height: initialHeight.current,
+        minHeight: 0
+      }
+    }, props, {
+      children: [children, jsx("div", {
+        className: "fr-accordion-item-body-spacer-bottom"
+      }, void 0)]
+    }), void 0)
+  }), void 0);
+});
+
+const AccordionItemHeader = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className
+  } = _a,
+      props = __rest(_a, ["children", "className"]);
+
+  const {
+    toggle,
+    id
+  } = useContext(AccordionContext);
+  return jsx("div", Object.assign({
+    ref: ref,
+    className: classNames("fr-accordion-item-header", className),
+    role: "button",
+    tabIndex: 0,
+    id: `${id}-header`,
+    "aria-controls": `${id}-body`,
+    onClick: toggle
+  }, props, {
+    children: children
+  }), void 0);
+});
+
+function useControlled({
+  controlled,
+  default: defaultValue
+}) {
+  const {
+    current: isControlled
+  } = useRef(controlled !== undefined);
+  const [valueState, setValue] = useState(defaultValue);
+  const value = isControlled ? controlled : valueState;
+  const setValueIfUncontrolled = useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, [isControlled]);
+  return [value, setValueIfUncontrolled];
+}
+
+let nextId$1 = 0;
+const AccordionItem = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    expanded: expandedProp,
+    defaultExpanded = false,
+    children,
+    onChange,
+    className
+  } = _a,
+      props = __rest(_a, ["expanded", "defaultExpanded", "children", "onChange", "className"]);
+
+  const {
+    showLess,
+    showMore,
+    parentId,
+    keepItemsOpen,
+    expanded: expandedContext,
+    toggle: accordionToggle
+  } = useContext(AccordionContext$1);
+  const componentId = useRef(`accordion-item-${++nextId$1}`);
+  const id = `${parentId}-${componentId.current}`;
+  const controlledExpanded = keepItemsOpen ? expandedProp : expandedContext === id;
+  const [expanded, setExpanded] = useControlled({
+    controlled: controlledExpanded,
+    default: defaultExpanded
+  });
+  const linkText = expanded ? showLess : showMore;
+  const handleChange = useCallback(event => {
+    if (onChange) {
+      onChange(event, !expanded);
+    }
+
+    if (!keepItemsOpen) {
+      accordionToggle(id, !expanded);
+    }
+
+    setExpanded(!expanded);
+  }, [accordionToggle, expanded, id, keepItemsOpen, onChange, setExpanded]);
+  const contextValue = useMemo(() => ({
+    expanded,
+    toggle: handleChange,
+    id
+  }), [expanded, handleChange, id]);
+  return jsx(AccordionContext.Provider, Object.assign({
+    value: contextValue
+  }, {
+    children: jsxs("div", Object.assign({
+      ref: ref,
+      className: classNames('fr-accordion-item', {
+        'fr-accordion-item--collapsed': !expanded,
+        'fr-accordion-item--expanded': expanded
+      }, className)
+    }, props, {
+      children: [children, jsx("div", Object.assign({
+        className: "fr-accordion-item-link"
+      }, {
+        children: linkText
+      }), void 0)]
+    }), void 0)
+  }), void 0);
+});
+
+/**
+ * Breadcrumb navigation can be used on pages with multiple navigation levels.
+ */
+
+function Breadcrumb({
+  locations,
+  onClick,
+  children,
+  className
+}) {
+  const childrenList = [];
+  React.Children.forEach(children, element => {
+    if ( /*#__PURE__*/React.isValidElement(element)) {
+      childrenList.push(Object.assign(Object.assign({}, element), {
+        props: Object.assign(Object.assign({}, element.props), {
+          className: 'fr-breadcrumb-location'
+        })
+      }));
+    }
+  });
+  return jsx("div", Object.assign({
+    className: classNames('fwe-breadcrumb', className)
+  }, {
+    children: locations ? locations.map((location, index) => jsxs(React.Fragment, {
+      children: [jsx("a", Object.assign({
+        className: "fr-breadcrumb-location",
+        href: location.url,
+        onClick: e => onClick ? onClick(e) : undefined
+      }, {
+        children: location.label
+      }), void 0), index + 1 < locations.length && jsx("i", {
+        className: "fwe-icon fwe-icon-arrows-right-2"
+      }, void 0)]
+    }, location.url)) : childrenList.map((child, index) => jsxs(React.Fragment, {
+      children: [child, " ", index + 1 < childrenList.length && jsx("i", {
+        className: "fwe-icon fwe-icon-arrows-right-2"
+      }, void 0)]
+    }, child.props.children))
+  }), void 0);
+}
+
+function Button({
+  icon,
+  disabled = false,
+  iconOnly = false,
+  large = false,
+  onClick,
+  primary = false,
+  className,
+  children
+}) {
+  const classes = classNames('fwe-btn', 'fr-button', {
+    'fwe-btn-icon': iconOnly
+  }, {
+    'fwe-disabled': disabled
+  }, {
+    'fwe-btn-hero': primary
+  }, {
+    'fwe-btn-lg': large
+  }, className);
+  return jsxs("button", Object.assign({
+    type: "button",
+    onClick: onClick,
+    className: classes,
+    disabled: disabled
+  }, {
+    children: [icon && jsx("i", {
+      className: `fwe-icon fwe-icon-${icon}`
+    }, void 0), !iconOnly && jsx("div", {
+      children: children
+    }, void 0)]
+  }), void 0);
+}
+
+function Card({
+  children,
+  className
+}) {
+  return jsx("div", Object.assign({
+    className: classNames('fwe-card', className)
+  }, {
+    children: children
+  }), void 0);
+}
+
+function CardBody({
+  children,
+  text,
+  className
+}) {
+  return jsxs("div", Object.assign({
+    className: classNames('fwe-card-body', className)
+  }, {
+    children: [jsx("div", Object.assign({
+      className: "fwe-card-text"
+    }, {
+      children: text
+    }), void 0), children]
+  }), void 0);
+}
+
+function CardHeader({
+  title,
+  subtitle,
+  action,
+  className
+}) {
+  return jsxs("div", Object.assign({
+    className: classNames('fwe-card-header', className)
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: "fwe-card-title"
+    }, {
+      children: [jsx("h5", {
+        children: title
+      }, void 0), subtitle && jsx("p", {
+        children: subtitle
+      }, void 0)]
+    }), void 0), action]
+  }), void 0);
+}
+
+function CardNotification({
+  iconName,
+  className,
+  title,
+  message
+}) {
+  const classes = classNames('fwe-card-notification', className);
+  return jsxs("div", Object.assign({
+    className: classes
+  }, {
+    children: [jsx("i", {
+      className: `fwe-icon fwe-icon-${iconName} fwe-icon-lg`
+    }, void 0), jsxs("div", Object.assign({
+      className: "fwe-card-title"
+    }, {
+      children: [jsx("h6", {
+        children: title
+      }, void 0), message && jsx("p", {
+        children: message
+      }, void 0)]
+    }), void 0)]
+  }), void 0);
+}
+
+function ChipContainer({
+  large = false,
+  children,
+  className
+}) {
+  const classes = classNames('fwe-chip-container', {
+    'fwe-chip-container-lg': large
+  }, className);
+  return jsx("div", Object.assign({
+    className: classes
+  }, {
+    children: children
+  }), void 0);
+}
+
+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({
+  type = ChipType.Choice,
+  selected = false,
+  disabled = false,
+  large = false,
+  icon,
+  children,
+  onClick,
+  className
+}) {
+  const classes = classNames('fr-chip', 'fwe-chip', {
+    'fwe-selected': selected
+  }, {
+    'fwe-disabled': disabled
+  }, {
+    'fwe-chip-lg': large
+  }, {
+    'fwe-category': type === ChipType.Category
+  }, {
+    'fwe-filter': type === ChipType.Filter
+  }, {
+    'fwe-readonly': type === ChipType.Readonly
+  }, className);
+  return jsxs("div", Object.assign({
+    className: classes
+  }, {
+    children: [icon && jsx("i", {
+      onClick: e => onClick ? onClick(e) : undefined,
+      className: `fwe-icon fwe-icon-${icon}`
+    }, void 0), children, type === ChipType.Category && jsx("i", {
+      onClick: e => onClick ? onClick(e) : undefined,
+      className: "fwe-icon fwe-icon-menu-close"
+    }, void 0)]
+  }), void 0);
+}
+
+function LinkButton({
+  icon,
+  onClick,
+  disabled = false,
+  children,
+  iconOnly = false,
+  className
+}) {
+  const classes = classNames('fwe-btn', 'fwe-btn-link', {
+    'fwe-disabled': disabled
+  }, className);
+  return jsxs("button", Object.assign({
+    onClick: onClick,
+    type: "button",
+    className: classes,
+    disabled: disabled
+  }, {
+    children: [jsx("i", {
+      className: `fwe-icon fwe-icon-${icon}`
+    }, void 0), !iconOnly && children]
+  }), void 0);
+}
+
+function LoadingIndicator({
+  size = 'large',
+  children,
+  className
+}) {
+  const classes = classNames('fwe-waiting-indicator', {
+    'fwe-waiting-indicator-md': size === 'medium'
+  }, {
+    'fwe-waiting-indicator-sm': size === 'small'
+  }, className);
+  return jsxs("div", Object.assign({
+    className: "fr-waiting-container"
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: classes
+    }, {
+      children: [jsx("div", {
+        className: "fwe-waiting-circle-1"
+      }, void 0), jsx("div", {
+        className: "fwe-waiting-circle-2"
+      }, void 0), jsx("div", {
+        className: "fwe-waiting-circle-3"
+      }, void 0)]
+    }), void 0), children]
+  }), void 0);
+}
+
+const Modal = /*#__PURE__*/forwardRef(({
+  head,
+  isOpen,
+  body,
+  onClose,
+  className,
+  children
+}, ref) => {
+  const backdropRef = useRef(null);
+  const modalRef = useRef(null);
+  const combinedRef = useForkRef(ref, modalRef);
+  return jsxs(Fragment, {
+    children: [jsx(CSSTransition, Object.assign({
+      nodeRef: backdropRef,
+      unmountOnExit: true,
+      timeout: {
+        exit: 600
+      },
+      in: isOpen,
+      classNames: "fr-modal-backdrop",
+      appear: true
+    }, {
+      children: jsx("div", {
+        ref: backdropRef,
+        className: "fr-modal-backdrop fwe-modal-backdrop"
+      }, void 0)
+    }), void 0), jsx(OutsideClickHandler, Object.assign({
+      onOutsideClick: () => onClose ? onClose() : undefined
+    }, {
+      children: jsx(CSSTransition, Object.assign({
+        ref: modalRef,
+        unmountOnExit: true,
+        classNames: "fr-modal",
+        appear: true,
+        in: isOpen,
+        timeout: {
+          exit: 600
+        }
+      }, {
+        children: jsxs("div", Object.assign({
+          ref: combinedRef,
+          className: classNames('fr-modal fwe-modal', className)
+        }, {
+          children: [jsx("div", Object.assign({
+            className: "fwe-modal-close"
+          }, {
+            children: jsxs("button", Object.assign({
+              type: "button",
+              "aria-label": "Close",
+              className: "fwe-btn fwe-btn-link fwe-dark",
+              onClick: onClose
+            }, {
+              children: [jsx("i", {
+                "aria-hidden": "true",
+                className: "fwe-icon fwe-icon-close-small"
+              }, void 0), jsx("span", Object.assign({
+                className: "fwe-sr-only"
+              }, {
+                children: "Close"
+              }), void 0)]
+            }), void 0)
+          }), void 0), jsx("div", Object.assign({
+            className: "fwe-modal-header"
+          }, {
+            children: head
+          }), void 0), jsx("div", Object.assign({
+            className: "fwe-modal-body"
+          }, {
+            children: body
+          }), void 0), children]
+        }), void 0)
+      }), void 0)
+    }), void 0)]
+  }, void 0);
+});
+
+const ModalFooter = /*#__PURE__*/forwardRef(({
+  children,
+  className
+}, ref) => {
+  return jsx("div", Object.assign({
+    ref: ref,
+    className: classNames('fwe-modal-footer', className)
+  }, {
+    children: jsx("div", Object.assign({
+      className: classNames('fwe-modal-buttons')
+    }, {
+      children: children
+    }), void 0)
+  }), void 0);
+});
+
+function AlertModal(_a) {
+  var {
+    alertType,
+    title,
+    className,
+    body,
+    strong,
+    subtitle,
+    cancel,
+    ok,
+    onCancel,
+    onOk
+  } = _a,
+      props = __rest(_a, ["alertType", "title", "className", "body", "strong", "subtitle", "cancel", "ok", "onCancel", "onOk"]);
+
+  return jsx(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: jsxs(Fragment, {
+      children: [subtitle && jsxs("h2", Object.assign({
+        className: "fwe-modal-h2"
+      }, {
+        children: [jsx("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'
+          })
+        }, void 0), subtitle]
+      }), void 0), jsxs("h1", Object.assign({
+        className: "fwe-modal-h1"
+      }, {
+        children: [jsx("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'
+          })
+        }, void 0), title]
+      }), void 0)]
+    }, void 0),
+    body: jsx("p", {
+      children: body
+    }, void 0)
+  }, props, {
+    children: (cancel || ok) && jsxs(ModalFooter, {
+      children: [cancel && jsx("button", Object.assign({
+        type: "button",
+        "aria-label": "Cancel",
+        className: classNames('fwe-btn fwe-btn-lg', {
+          'fwe-btn-link': strong
+        }),
+        onClick: onCancel
+      }, {
+        children: cancel
+      }), void 0), ok && jsx("button", Object.assign({
+        type: "button",
+        "aria-label": "Ok",
+        className: classNames('fwe-btn fwe-btn-lg', {
+          'fwe-btn-hero': !strong
+        }),
+        onClick: onOk
+      }, {
+        children: ok
+      }), void 0)]
+    }, void 0)
+  }), void 0);
+}
+
+function ConfirmModal(_a) {
+  var {
+    title,
+    subtitle,
+    body,
+    className,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    isOpen,
+    large
+  } = _a,
+      props = __rest(_a, ["title", "subtitle", "body", "className", "cancel", "ok", "onCancel", "onOk", "isOpen", "large"]);
+
+  return jsx(Modal, Object.assign({
+    className: classNames({
+      'fwe-modal--large': large
+    }, className),
+    head: jsxs(Fragment, {
+      children: [subtitle && jsx("h2", Object.assign({
+        className: "fwe-modal-h2"
+      }, {
+        children: subtitle
+      }), void 0), jsx("h1", Object.assign({
+        className: "fwe-modal-h1"
+      }, {
+        children: title
+      }), void 0)]
+    }, void 0),
+    body: jsx("p", {
+      children: body
+    }, void 0),
+    isOpen: isOpen
+  }, props, {
+    children: (cancel || ok) && jsxs(ModalFooter, {
+      children: [cancel && jsx("button", Object.assign({
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn fwe-btn-lg",
+        onClick: onCancel
+      }, {
+        children: cancel
+      }), void 0), ok && jsx("button", Object.assign({
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+        onClick: onOk
+      }, {
+        children: ok
+      }), void 0)]
+    }, void 0)
+  }), void 0);
+}
+
+const TextInput = _a => {
+  var {
+    disabled,
+    required,
+    readonly,
+    placeholder,
+    max,
+    min,
+    onBlur,
+    onFocus,
+    onInput,
+    step,
+    type,
+    value,
+    error,
+    hint,
+    label,
+    labelClassName
+  } = _a,
+      props = __rest(_a, ["disabled", "required", "readonly", "placeholder", "max", "min", "onBlur", "onFocus", "onInput", "step", "type", "value", "error", "hint", "label", "labelClassName"]);
+
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  const supported = ['text', 'number', 'password', 'datetime-local'];
+  const innerType = type && supported.indexOf(type) !== -1 ? type : 'text';
+  const labelClasses = classNames('fwe-input-text', labelClassName);
+  const hintClasses = classNames('fwe-input-text-info');
+
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  }
+
+  return jsxs("label", Object.assign({
+    className: labelClasses
+  }, {
+    children: [jsx("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), void 0), jsx("span", Object.assign({
+      className: "fwe-input-text-label"
+    }, {
+      children: label
+    }), void 0), hint && jsx("span", Object.assign({
+      className: hintClasses
+    }, {
+      children: hint
+    }), void 0), error && jsx("span", Object.assign({
+      className: "fwe-input-text-invalid"
+    }, {
+      children: error
+    }), void 0)]
+  }), void 0);
+};
+
+function Prompt(_a) {
+  var {
+    title,
+    subtitle,
+    hint,
+    label,
+    value,
+    onChange,
+    onOk,
+    onCancel,
+    cancel,
+    ok
+  } = _a,
+      props = __rest(_a, ["title", "subtitle", "hint", "label", "value", "onChange", "onOk", "onCancel", "cancel", "ok"]);
+
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  return jsx(Modal, Object.assign({
+    head: jsxs(Fragment, {
+      children: [subtitle && jsx("h2", Object.assign({
+        className: "fwe-modal-h2"
+      }, {
+        children: subtitle
+      }), void 0), jsx("h1", Object.assign({
+        className: "fwe-modal-h1"
+      }, {
+        children: title
+      }), void 0)]
+    }, void 0),
+    body: jsx(TextInput, {
+      onChange: handleChange,
+      label: label,
+      hint: hint,
+      value: innerValue
+    }, void 0)
+  }, props, {
+    children: (cancel || ok) && jsxs(ModalFooter, {
+      children: [cancel && jsx("button", Object.assign({
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn",
+        onClick: onCancel
+      }, {
+        children: cancel
+      }), void 0), ok && jsx("button", Object.assign({
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero",
+        onClick: () => onOk(innerValue)
+      }, {
+        children: ok
+      }), void 0)]
+    }, void 0)
+  }), void 0);
+}
+
+var PaginationType;
+
+(function (PaginationType) {
+  PaginationType["Simple"] = "SIMPLE";
+  PaginationType["Numeric"] = "NUMERIC";
+  PaginationType["Dots"] = "DOTS";
+})(PaginationType || (PaginationType = {}));
+
+function Pagination(props) {
+  const {
+    pageMax,
+    onChange,
+    pageCurrent,
+    defaultPageCurrent = 1,
+    type = PaginationType.Numeric,
+    className
+  } = props;
+  const controlled = pageCurrent !== undefined;
+  const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
+  const dotArray = Array.from(new Array(pageMax).keys());
+  useEffect(() => {
+    if (controlled) {
+      setInnerPageCurrent(pageCurrent);
+    }
+  }, [pageCurrent, controlled]);
+
+  function handleChange(newPage) {
+    if (!controlled) {
+      setInnerPageCurrent(newPage);
+    }
+
+    if (onChange) {
+      onChange(newPage);
+    }
+  }
+
+  function onBtnDown() {
+    if (innerPageCurrent > 1) {
+      const newPageCurrent = innerPageCurrent - 1;
+      handleChange(newPageCurrent);
+    }
+  }
+
+  function onBtnUp() {
+    if (innerPageCurrent < pageMax) {
+      const newPageCurrent = innerPageCurrent + 1;
+      handleChange(newPageCurrent);
+    }
+  }
+
+  function onDotClick(index) {
+    const newPageCurrent = index + 1;
+    handleChange(newPageCurrent);
+  }
+
+  function handleKeyPress(event, index) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      onDotClick(index);
+    }
+  }
+
+  return jsxs(Fragment, {
+    children: [type !== PaginationType.Dots && jsxs("div", Object.assign({
+      className: classNames('fwe-pagination fwe-p-m', {
+        'fwe-d-none': pageMax < 2
+      }, className)
+    }, {
+      children: [jsx("button", {
+        className: classNames('fwe-navigate-btn-down', {
+          'fwe-disabled': innerPageCurrent <= 1
+        }),
+        onClick: onBtnDown,
+        type: "button",
+        "aria-label": "navigate-btn-down"
+      }, void 0), type === PaginationType.Numeric && jsxs(Fragment, {
+        children: [jsx("span", Object.assign({
+          className: "fwe-page-current"
+        }, {
+          children: innerPageCurrent
+        }), void 0), jsx("span", Object.assign({
+          className: "fwe-page-max"
+        }, {
+          children: pageMax
+        }), void 0)]
+      }, void 0), jsx("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"
+      }, void 0)]
+    }), void 0), type === PaginationType.Dots && jsx("div", Object.assign({
+      className: classNames('fwe-p-m', {
+        'fwe-d-none': pageMax < 2
+      }, className)
+    }, {
+      children: jsx("div", Object.assign({
+        className: "fwe-pagination"
+      }, {
+        children: dotArray.map(index => jsx("span", {
+          tabIndex: 0,
+          role: "button",
+          className: classNames('fwe-page-dot', {
+            'fwe-selected': index + 1 === innerPageCurrent
+          }),
+          onClick: () => onDotClick(index),
+          "aria-label": "page-dot",
+          onKeyPress: e => handleKeyPress(e, index)
+        }, index))
+      }), void 0)
+    }), void 0)]
+  }, void 0);
+}
+
+function Popover({
+  popoverContent,
+  children,
+  position,
+  fallbackPositions,
+  open = false,
+  onStatusChange,
+  wrapper,
+  className,
+  flip = true,
+  containerClassName,
+  stopPropagation,
+  arrow = true
+}) {
+  const [showPopper, setShowPopper] = useState(open);
+  const referenceElement = useRef(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const classes = classNames(className);
+  useEffect(() => {
+    setShowPopper(open);
+  }, [open]);
+  const {
+    styles,
+    attributes
+  } = 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']
+      }
+    }]
+  });
+
+  const handleChange = (e, status) => {
+    if (stopPropagation) {
+      e.stopPropagation();
+    }
+
+    setShowPopper(status);
+
+    if (onStatusChange) {
+      onStatusChange(status);
+    }
+  };
+
+  const childrenWrapper = jsx("div", Object.assign({
+    className: classes,
+    style: {
+      display: 'inline'
+    },
+    ref: referenceElement,
+    onClick: e => handleChange(e, !showPopper)
+  }, {
+    children: children
+  }), void 0);
+
+  return jsxs(OutsideClickHandler, Object.assign({
+    display: "inline",
+    onOutsideClick: e => handleChange(e, false)
+  }, {
+    children: [wrapper ? wrapper(childrenWrapper) : childrenWrapper, showPopper && jsxs("div", Object.assign({
+      onClick: e => e.stopPropagation(),
+      className: classNames('fwe-popover-container', containerClassName),
+      ref: setPopperElement,
+      style: styles.popper
+    }, attributes.popper, {
+      children: [jsx("div", Object.assign({
+        className: "fwe-popover"
+      }, {
+        children: popoverContent
+      }), void 0), arrow && jsx("div", {
+        ref: setArrowElement,
+        style: styles.arrow,
+        id: "arrow"
+      }, void 0)]
+    }), void 0)]
+  }), void 0);
+}
+
+function PopoverMenu(_a) {
+  var {
+    icon,
+    menu,
+    className
+  } = _a,
+      props = __rest(_a, ["icon", "menu", "className"]);
+
+  const [showPopper, setShowPopper] = useState(false);
+
+  const handleClick = item => {
+    if (item.action) {
+      item.action(item.data);
+    }
+
+    setShowPopper(false);
+  };
+
+  const content = jsx("ul", Object.assign({
+    className: "fwe-list-group"
+  }, {
+    children: menu.map(item => jsx("li", Object.assign({
+      className: "fwe-list-group-item"
+    }, {
+      children: jsxs("button", Object.assign({
+        type: "button",
+        className: "fwe-btn fwe-btn-link fwe-dark",
+        onClick: () => handleClick(item)
+      }, {
+        children: [jsx("i", {
+          className: `fwe-icon fwe-pr-0 ${item.icon}`
+        }, void 0), jsx("span", {
+          children: item.text
+        }, void 0)]
+      }), void 0)
+    }), item.icon + item.text))
+  }), void 0);
+
+  return jsx("div", Object.assign({
+    className: classNames('fwe-popover-menu', className)
+  }, {
+    children: jsx(Popover, Object.assign({
+      popoverContent: content,
+      position: "right",
+      open: showPopper,
+      onStatusChange: setShowPopper
+    }, props, {
+      children: jsx("button", Object.assign({
+        type: "button",
+        className: "fwe-btn fwe-btn-link fwe-dark origin"
+      }, {
+        children: jsx("i", {
+          className: `fwe-icon fwe-pr-0 ${icon}`
+        }, void 0)
+      }), void 0)
+    }), void 0)
+  }), void 0);
+}
+
+function Tooltip({
+  children,
+  className,
+  title,
+  position = 'bottom'
+}) {
+  const [showPopper, setShowPopper] = useState(false);
+  const referenceElement = useRef(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement.current, popperElement, {
+    placement: position,
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 24]
+      }
+    }, {
+      name: 'flip',
+      options: {
+        fallbackPlacements: ['right', 'left', 'top']
+      }
+    }]
+  });
+  return jsxs(Fragment, {
+    children: [jsx("div", Object.assign({
+      className: classNames('fr-tooltip-container', className),
+      ref: referenceElement,
+      onMouseEnter: () => setShowPopper(true),
+      onMouseLeave: () => setShowPopper(false)
+    }, {
+      children: children
+    }), void 0), showPopper && jsxs("div", Object.assign({
+      className: "fwe-popover-container",
+      id: "tooltip",
+      ref: setPopperElement,
+      style: styles.popper
+    }, attributes.popper, {
+      children: [jsx("div", {
+        ref: setArrowElement,
+        style: styles.arrow,
+        id: "arrow"
+      }, void 0), jsx("div", Object.assign({
+        className: "fwe-popover"
+      }, {
+        children: title
+      }), void 0)]
+    }), void 0)]
+  }, void 0);
+}
+
+function Progress({
+  background = 'white',
+  error = false,
+  progress,
+  className
+}) {
+  const classes = classNames('fwe-progress-bar', {
+    'fwe-bg-red': error
+  }, {
+    'fwe-progress-bar-black': background === 'black'
+  }, {
+    'fwe-progress-bar-background': background === 'background'
+  });
+  return jsx("div", Object.assign({
+    className: classNames('fwe-progress', className)
+  }, {
+    children: jsx("div", {
+      className: classes,
+      role: "progressbar",
+      style: {
+        width: `${progress}%`
+      },
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": "progressbar"
+    }, void 0)
+  }), void 0);
+}
+
+function Snackbar(props) {
+  const {
+    data,
+    onAction,
+    onClose,
+    first = false
+  } = props;
+  const [show, setShow] = useState(true);
+  const nodeRef = useRef(null);
+  useEffect(() => {
+    let disappearAfter = 5000;
+
+    if ((data === null || data === void 0 ? void 0 : data.disappearAfter) !== null) {
+      if ((data === null || data === void 0 ? void 0 : data.disappearAfter) && (data === null || data === void 0 ? void 0 : data.disappearAfter) > 0) {
+        disappearAfter = data === null || data === void 0 ? void 0 : data.disappearAfter;
+      }
+
+      const timer = setTimeout(() => setShow(false), disappearAfter);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+
+    return undefined;
+  }, [data]);
+
+  function handleClose() {
+    setShow(false);
+  }
+
+  const classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
+  return jsx(CSSTransition, Object.assign({
+    nodeRef: nodeRef,
+    onExited: () => onClose ? onClose() : undefined,
+    unmountOnExit: true,
+    timeout: {
+      exit: 600
+    },
+    in: show,
+    classNames: classes,
+    appear: true
+  }, {
+    children: jsx("div", Object.assign({
+      ref: nodeRef,
+      className: classes
+    }, {
+      children: jsxs("div", Object.assign({
+        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)
+      }, {
+        children: [(data === null || data === void 0 ? void 0 : data.type) && jsx("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'
+          })
+        }, void 0), jsx("span", {
+          children: data === null || data === void 0 ? void 0 : data.text
+        }, void 0), (data === null || data === void 0 ? void 0 : data.action) && jsx("button", Object.assign({
+          "aria-label": "UserAction",
+          type: "button",
+          className: "fwe-btn fwe-btn-link",
+          onClick: () => onAction ? onAction() : undefined
+        }, {
+          children: data === null || data === void 0 ? void 0 : data.action
+        }), void 0), (data === null || data === void 0 ? void 0 : data.showClose) && jsxs("button", Object.assign({
+          "aria-label": "Close",
+          type: "button",
+          className: "fwe-btn fwe-btn-link",
+          onClick: handleClose
+        }, {
+          children: [jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-close-small"
+          }, void 0), jsx("span", Object.assign({
+            className: "fwe-sr-only"
+          }, {
+            children: "Close"
+          }), void 0)]
+        }), void 0)]
+      }), void 0)
+    }), void 0)
+  }), void 0);
+}
+
+var SnackbarContext = /*#__PURE__*/React.createContext({});
+
+function SnackbarProvider(props) {
+  const {
+    config = {
+      darkBackground: true
+    },
+    children,
+    className
+  } = props;
+  const [snacks, setSnacks] = useState([]);
+
+  function addSnackbar(snackData, onAction, onClose) {
+    setSnacks(prevSnacks => [{
+      data: Object.assign(Object.assign({}, config), snackData),
+      onAction,
+      onClose,
+      key: new Date().getTime() + Math.random(),
+      first: prevSnacks.length === 0
+    }, ...prevSnacks]);
+  }
+
+  function closeSnackbar(key) {
+    if (key) {
+      setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
+    }
+  }
+
+  function handleClose(snack) {
+    closeSnackbar(snack.key);
+
+    if (snack.onClose) {
+      snack.onClose();
+    }
+  }
+
+  const contextValue = {
+    addSnackbar,
+    closeSnackbar
+  };
+  return jsxs(SnackbarContext.Provider, Object.assign({
+    value: contextValue
+  }, {
+    children: [children, jsx("div", Object.assign({
+      className: classNames('fwe-snackbar-container', className)
+    }, {
+      children: snacks.map(snack => jsx(Snackbar, {
+        data: snack.data,
+        onAction: () => snack.onAction ? snack.onAction() : undefined,
+        onClose: () => handleClose(snack),
+        first: snack.first
+      }, snack.key))
+    }), void 0)]
+  }), void 0);
+}
+
+var useSnackbar = (() => useContext(SnackbarContext));
+
+const StepHorizontal = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className,
+    isActive
+  } = _a,
+      props = __rest(_a, ["children", "className", "isActive"]);
+
+  return jsx("div", Object.assign({
+    ref: ref,
+    className: classNames('overflow-hidden', {
+      hidden: !isActive
+    })
+  }, props, {
+    children: jsx("div", Object.assign({
+      className: "fr-moving-container"
+    }, {
+      children: children
+    }), void 0)
+  }), void 0);
+});
+
+const StepperHorizontal = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className,
+    stepIndex = 0,
+    onChange
+  } = _a,
+      props = __rest(_a, ["children", "className", "stepIndex", "onChange"]);
+
+  const stepComponents = React.Children.map(children, (child, i) => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
+        isActive: i === stepIndex
+      }));
+    }
+  });
+
+  function handleStepClick(index) {
+    if (stepIndex > index && onChange) {
+      onChange(index);
+    }
+  }
+
+  return jsxs(Fragment, {
+    children: [jsx("div", Object.assign({
+      className: "fwe-stepper-horizontal"
+    }, {
+      children: stepComponents && stepComponents.map((step, i) => jsx("div", Object.assign({
+        ref: ref,
+        className: classNames('fwe-step-container', {
+          'fwe-step-done': stepIndex > i,
+          'fwe-step-active': i === stepIndex
+        }),
+        onClick: () => handleStepClick(i)
+      }, props, {
+        children: jsxs("div", Object.assign({
+          className: "fwe-step"
+        }, {
+          children: [jsx("div", Object.assign({
+            className: "fwe-step-no"
+          }, {
+            children: i + 1
+          }), void 0), jsx("div", Object.assign({
+            className: "fwe-step-name"
+          }, {
+            children: step.props.title
+          }), void 0)]
+        }), void 0)
+      }), i))
+    }), void 0), stepComponents]
+  }, void 0);
+});
+
+const StepVertical = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className,
+    isActive,
+    isLastElement,
+    isDone,
+    index,
+    title,
+    onStepClick
+  } = _a,
+      props = __rest(_a, ["children", "className", "isActive", "isLastElement", "isDone", "index", "title", "onStepClick"]);
+
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    if (isActive) {
+      const itemHeight = contentRef.current.offsetHeight;
+      containerRef.current.style.height = `${itemHeight}px`;
+    } else {
+      containerRef.current.style.height = '20px';
+    }
+  }, [isActive]);
+
+  function handleClick() {
+    if (onStepClick) {
+      onStepClick();
+    }
+  }
+
+  return jsxs("div", Object.assign({
+    ref: ref,
+    className: classNames('fwe-step-container', {
+      'fwe-last-element': isLastElement,
+      'fwe-step-active': isActive,
+      'fwe-step-done': isDone
+    })
+  }, props, {
+    children: [jsxs("div", Object.assign({
+      className: "fwe-step",
+      onClick: handleClick
+    }, {
+      children: [jsx("div", Object.assign({
+        className: "fwe-step-no"
+      }, {
+        children: index + 1
+      }), void 0), jsx("div", Object.assign({
+        className: "fwe-step-name"
+      }, {
+        children: title
+      }), void 0)]
+    }), void 0), jsx("div", Object.assign({
+      ref: containerRef,
+      className: "fwe-step-content-container"
+    }, {
+      children: jsx("div", Object.assign({
+        ref: contentRef,
+        className: "fwe-step-content"
+      }, {
+        children: children
+      }), void 0)
+    }), void 0)]
+  }), void 0);
+});
+
+const StepperVertical = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className,
+    stepIndex = 0,
+    onChange
+  } = _a,
+      props = __rest(_a, ["children", "className", "stepIndex", "onChange"]);
+
+  function handleStepClick(index) {
+    if (stepIndex > index && onChange) {
+      onChange(index);
+    }
+  }
+
+  const stepComponents = React.Children.map(children, (child, i) => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
+        isActive: i === stepIndex,
+        index: i,
+        isDone: i < stepIndex,
+        isLastElement: i === React.Children.count(children) - 1,
+        onStepClick: () => handleStepClick(i)
+      }));
+    }
+  });
+  return jsx("div", Object.assign({
+    ref: ref,
+    className: classNames('fwe-stepper-vertical', className)
+  }, props, {
+    children: stepComponents
+  }), void 0);
+});
+
+function TabPane({
+  isVisible = false,
+  children,
+  className,
+  tabId,
+  id
+}) {
+  const tabPaneClasses = classNames({
+    'fr-show': isVisible
+  }, {
+    'fr-hide': !isVisible
+  }, className);
+  return jsx("div", Object.assign({
+    id: id,
+    "aria-labelledby": tabId,
+    className: tabPaneClasses
+  }, {
+    children: children
+  }), void 0);
+}
+
+const useTabScroll = (tabLength, componentId, refs) => {
+  const {
+    elRef,
+    scrollContent,
+    scrollArea
+  } = refs;
+  const [style, setStyle] = useState({});
+  const [classes, setClasses] = useState('');
+
+  function getScrollContentStyleValue(propName) {
+    return window.getComputedStyle(scrollContent.current).getPropertyValue(propName);
+  }
+
+  function calculateCurrentTranslateX() {
+    const transformValue = getScrollContentStyleValue('transform');
+
+    if (transformValue === 'none') {
+      return 0;
+    } // the transform value is in form of 'matrix(a, b, c, d, tx, ty)'
+    // get all the parenthesized values
+
+
+    const match = /\((.+?)\)/.exec(transformValue);
+
+    if (!match) {
+      return 0;
+    }
+
+    const matrixParams = match[1]; // we need value of tx -> translateX
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+    const [a, b, c, d, tx, ty] = matrixParams.split(',');
+    return parseFloat(tx);
+  }
+
+  function getScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current.scrollLeft;
+    return scrollLeft - currentTranslateX;
+  }
+
+  function calculateScrollEdges() {
+    const scrollContentWidth = scrollContent.current.offsetWidth;
+    const scrollAreaWidth = scrollArea.current.offsetWidth;
+    return {
+      left: 0,
+      right: scrollContentWidth - scrollAreaWidth
+    };
+  }
+
+  function clampScrollValue(scrollX) {
+    const edges = calculateScrollEdges();
+    return Math.min(Math.max(edges.left, scrollX), edges.right);
+  }
+
+  function getIncrementScrollOperation(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const targetScrollX = scrollX + currentScrollX;
+    const safeScrollX = clampScrollValue(targetScrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    return {
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    };
+  }
+
+  function getAnimatingScrollPosition() {
+    const currentTranslateX = calculateCurrentTranslateX();
+    const scrollLeft = scrollArea.current.scrollLeft;
+    return scrollLeft - currentTranslateX;
+  }
+
+  function stopScrollAnimation() {
+    const currentScrollPosition = getAnimatingScrollPosition();
+    setClasses('');
+    setStyle({
+      transform: 'translateX(0px)'
+    });
+    scrollArea.current.scrollLeft = currentScrollPosition;
+  }
+
+  function animate(animation) {
+    // no animation needed
+    if (animation.scrollDelta === 0) {
+      return;
+    }
+
+    stopScrollAnimation(); // this animation uses the flip approach
+    // https://aerotwist.com/blog/flip-your-animations/
+    // https://css-tricks.com/animating-layouts-with-the-flip-technique/
+
+    scrollArea.current.scrollLeft = animation.finalScrollPosition;
+    setStyle({
+      transform: `translateX(${animation.scrollDelta}px)`
+    }); // force repaint
+
+    scrollArea.current.getBoundingClientRect();
+    requestAnimationFrame(() => {
+      setClasses('fr-tab-scroller--animating');
+      setStyle({
+        transform: 'none'
+      });
+    });
+  }
+
+  function incrementScroll(scrollXIncrement) {
+    // no scroll needed
+    if (scrollXIncrement === 0) {
+      return;
+    }
+
+    const scrollOperation = getIncrementScrollOperation(scrollXIncrement);
+    animate(scrollOperation);
+  }
+
+  function computeDimensions(tab) {
+    const rootWidth = tab.offsetWidth;
+    const rootLeft = tab.offsetLeft;
+    const tabContent = tab.querySelector('.fr-tab-content');
+    const contentWidth = tabContent.offsetWidth;
+    const contentLeft = tabContent.offsetLeft;
+    return {
+      contentLeft: rootLeft + contentLeft,
+      contentRight: rootLeft + contentLeft + contentWidth,
+      rootLeft,
+      rootRight: rootLeft + rootWidth
+    };
+  }
+
+  function calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
+    const nextTab = elRef.current.querySelector(`#${componentId}-tab-${nextIndex}`);
+    const nextTabDimensions = computeDimensions(nextTab);
+    const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
+    const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
+    const leftIncrement = relativeContentRight - 48;
+    const rightIncrement = relativeContentLeft + 48;
+
+    if (nextIndex < index) {
+      return Math.min(leftIncrement, 0);
+    }
+
+    return Math.max(rightIncrement, 0);
+  }
+
+  function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
+    /**
+     * tabs are laid out in the tab scroller like this:
+     *
+     *    scroll position
+     *    +---+
+     *    |   |   bar width
+     *    |   +-----------------------------------+
+     *    |   |                                   |
+     *    |   v                                   v
+     *    |   +-----------------------------------+
+     *    v   |             tab scroller          |
+     *    +------------+--------------+-------------------+
+     *    |    tab     |      tab     |        tab        |
+     *    +------------+--------------+-------------------+
+     *        |                                   |
+     *        +-----------------------------------+
+     *
+     * to determine the next adjacent index, we look at the tab root left and
+     * tab root right, both relative to the scroll position. if the tab root
+     * left is less than 0, then we know it's out of view to the left. if the
+     * tab root right minus the bar width is greater than 0, we know the tab is
+     * out of view to the right. from there, we either increment or decrement
+     * the index.
+     */
+    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
+    const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
+    const relativeRootDelta = relativeRootLeft + relativeRootRight;
+    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
+    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
+
+    if (leftEdgeIsCloser) {
+      return index - 1;
+    }
+
+    if (rightEdgeIsCloser) {
+      return index + 1;
+    }
+
+    return -1;
+  }
+
+  function indexIsInRange(index) {
+    return index >= 0 && index < tabLength;
+  }
+
+  function scrollIntoView(index, tab) {
+    const scrollPosition = getScrollPosition();
+    const barWidth = scrollArea.current.offsetWidth;
+    const tabDimensions = computeDimensions(tab);
+    const nextIndex = findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
+
+    if (!indexIsInRange(nextIndex)) {
+      return;
+    }
+
+    const scrollIncrement = calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
+    incrementScroll(scrollIncrement);
+  }
+
+  function scrollTo(scrollX) {
+    const currentScrollX = getScrollPosition();
+    const safeScrollX = clampScrollValue(scrollX);
+    const scrollDelta = safeScrollX - currentScrollX;
+    animate({
+      finalScrollPosition: safeScrollX,
+      scrollDelta
+    });
+  }
+
+  function handleTabScroll(e, index) {
+    const scrollContentWidth = scrollContent.current.offsetWidth;
+    const scrollAreaWidth = scrollArea.current.offsetWidth; // check if no scroll is needed
+
+    if (scrollAreaWidth > scrollContentWidth) {
+      return;
+    } // check index
+
+
+    if (!indexIsInRange(index)) {
+      return;
+    } // always scroll to 0 if scrolling to the first tab
+
+
+    if (index === 0) {
+      scrollTo(0);
+      return;
+    } // always scroll to the max value if scrolling to the last tab
+
+
+    if (index === tabLength - 1) {
+      scrollTo(scrollContent.current.offsetWidth);
+      return;
+    }
+
+    if (e.currentTarget instanceof HTMLElement) {
+      const currentTab = e.currentTarget;
+      scrollIntoView(index, currentTab);
+    }
+  }
+
+  return [handleTabScroll, classes, style];
+};
+
+let nextId = 0;
+const Tabs = /*#__PURE__*/forwardRef((_a, ref) => {
+  var _b, _c, _d;
+
+  var {
+    config,
+    children,
+    className,
+    onChange,
+    viewType = 'responsive',
+    showDivider = false
+  } = _a,
+      props = __rest(_a, ["config", "children", "className", "onChange", "viewType", "showDivider"]);
+
+  const [useCompactDensity, setCompactDensity] = useState(true);
+  const componentId = useRef(`tabs-${++nextId}`);
+  const elRef = useRef(null);
+  const combinedRef = useForkRef(ref, elRef);
+  const scrollContent = useRef(null);
+  const scrollArea = useRef(null);
+  const observer = useRef(null);
+  let activeId = '';
+  React.Children.forEach(children, (element, i) => {
+    if ( /*#__PURE__*/React.isValidElement(element)) {
+      if (activeId === '') {
+        activeId = `${componentId.current}-tab-panel-${i}`;
+      } else if (element.props.active) {
+        activeId = `${componentId.current}-tab-panel-${i}`;
+      }
+    }
+  });
+  const [currentId, setId] = useState(activeId);
+  const innerChildren = React.Children.map(children, (element, i) => {
+    if ( /*#__PURE__*/isValidElement(element)) {
+      const newId = `${componentId.current}-tab-panel-${i}`;
+      return /*#__PURE__*/React.cloneElement(element, Object.assign({
+        isVisible: newId === currentId,
+        active: newId === currentId,
+        id: newId,
+        tabId: `${componentId.current}-tab-${i}`
+      }, element.props));
+    }
+
+    return undefined;
+  });
+  const [handleTabScroll, classes, style] = useTabScroll(innerChildren.length, componentId.current, {
+    elRef,
+    scrollContent,
+    scrollArea
+  });
+  useEffect(() => {
+    const current = scrollArea.current;
+
+    if (current) {
+      const initialWidth = current.offsetWidth;
+
+      if (initialWidth > 768) {
+        setCompactDensity(false);
+      }
+
+      observer.current = new ResizeObserver(() => {
+        const width = current.offsetWidth;
+
+        if (width > 768 && useCompactDensity) {
+          setCompactDensity(false);
+        } else if (width <= 768 && !useCompactDensity) {
+          setCompactDensity(true);
+        }
+      });
+
+      if (current) {
+        observer.current.observe(current);
+      }
+    }
+
+    return () => {
+      if (observer && observer.current) {
+        observer.current.unobserve(current);
+      }
+    };
+  }, [useCompactDensity]);
+
+  const showTabPane = id => {
+    if (onChange) {
+      onChange({
+        previous: currentId,
+        current: id
+      });
+    }
+
+    setId(id);
+  };
+
+  function handleClick(e, index, id) {
+    handleTabScroll(e, index);
+    showTabPane(id);
+  }
+
+  return (// eslint-disable-next-line react/jsx-no-useless-fragment
+    jsx(React.Fragment, {
+      children: viewType === 'legacy' ? jsxs("div", Object.assign({
+        className: classNames('fwe-legacy-tabs', className)
+      }, {
+        children: [jsx("ul", Object.assign({
+          role: "tablist",
+          className: classNames('fwe-legacy-tab-bar', {
+            'fwe-legacy-tab-bar-full-width': (_b = config === null || config === void 0 ? void 0 : config.tabBar) === null || _b === void 0 ? void 0 : _b.fullWidth
+          }, {
+            'fwe-legacy-tab-items-equal-width': ((_c = config === null || config === void 0 ? void 0 : config.tabItems) === null || _c === void 0 ? void 0 : _c.appearance) === 'equal'
+          }, {
+            'fwe-legacy-tab-items-fill': ((_d = config === null || config === void 0 ? void 0 : config.tabItems) === null || _d === void 0 ? void 0 : _d.appearance) === 'fill'
+          })
+        }, {
+          children: innerChildren.map((child, i) => {
+            const {
+              active,
+              icon,
+              name,
+              id,
+              tabId
+            } = child.props;
+            return jsx("li", Object.assign({
+              className: classNames('fwe-legacy-tab-item', {
+                'fwe-active': active
+              }),
+              onClick: () => showTabPane(id)
+            }, {
+              children: icon ? jsxs("a", Object.assign({
+                id: tabId,
+                className: classNames('fwe-legacy-tab-link', {
+                  'fwe-can-swap-icon': innerChildren.length === 2 && i === 1
+                }),
+                role: "tab",
+                "aria-controls": id,
+                "aria-selected": active
+              }, {
+                children: [jsx("i", {
+                  className: `fwe-icon ${icon}`
+                }, void 0), jsx("span", {
+                  children: name
+                }, void 0)]
+              }), void 0) : jsx("a", Object.assign({
+                id: tabId,
+                className: "fwe-legacy-tab-link",
+                role: "tab",
+                "aria-controls": id,
+                "aria-selected": active
+              }, {
+                children: name
+              }), void 0)
+            }), tabId);
+          })
+        }), void 0), jsx("div", Object.assign({
+          className: "fwe-legacy-tab-panel-content"
+        }, {
+          children: innerChildren
+        }), void 0)]
+      }), void 0) : jsxs("div", Object.assign({
+        className: "fr-tab-bar",
+        role: "tablist",
+        ref: combinedRef
+      }, props, {
+        children: [jsx("div", Object.assign({
+          className: classNames('fr-tab-scroller', classes)
+        }, {
+          children: jsx("div", Object.assign({
+            className: classNames('fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll', {
+              'fr-tab-scroller-scroll-area--compact': useCompactDensity
+            }),
+            ref: scrollArea
+          }, {
+            children: jsxs("div", Object.assign({
+              className: classNames('fr-tab-scroller-scroll-content', {
+                'fr-tab-scroller-scroll-content--with-divider': showDivider
+              }),
+              ref: scrollContent,
+              style: style
+            }, {
+              children: [innerChildren.map((child, i) => {
+                const {
+                  active,
+                  name,
+                  id,
+                  tabId
+                } = child.props;
+                return jsxs("button", Object.assign({
+                  role: "tab",
+                  className: classNames('fr-tab', {
+                    'fr-tab--active': active
+                  }),
+                  id: tabId,
+                  "aria-controls": id,
+                  "aria-selected": active,
+                  tabIndex: i === 0 ? 0 : 1,
+                  onClick: e => handleClick(e, i, id)
+                }, {
+                  children: [jsx("span", Object.assign({
+                    className: "fr-tab-content"
+                  }, {
+                    children: jsx("span", Object.assign({
+                      className: "fr-tab-text-label"
+                    }, {
+                      children: name
+                    }), void 0)
+                  }), void 0), jsx("span", Object.assign({
+                    className: classNames('fr-tab-indicator', {
+                      'fr-tab-indicator--active': active
+                    })
+                  }, {
+                    children: jsx("span", {
+                      className: "fr-tab-indicator-content fr-tab-indicator-content--underline"
+                    }, void 0)
+                  }), void 0)]
+                }), tabId);
+              }), jsx("div", {
+                className: "fr-tab-scroller-divider-line"
+              }, void 0)]
+            }), void 0)
+          }), void 0)
+        }), void 0), jsx("div", Object.assign({
+          className: "fr-tab-panel-content"
+        }, {
+          children: innerChildren
+        }), void 0)]
+      }), void 0)
+    }, void 0)
+  );
+});
+
+const TableHeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  function handleClick(event) {
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  }
+
+  return jsx("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
+  }), void 0);
+});
+
+function Checkbox(_a) {
+  var {
+    id,
+    checked,
+    onChange,
+    name,
+    large = false,
+    valid = true,
+    labelPosition = 'after',
+    required,
+    disabled = false,
+    indeterminate = false,
+    children,
+    className
+  } = _a,
+      props = __rest(_a, ["id", "checked", "onChange", "name", "large", "valid", "labelPosition", "required", "disabled", "indeterminate", "children", "className"]);
+
+  const [isChecked, setChecked] = useState(checked);
+  const [isIndeterminate, setIndeterminate] = useState(indeterminate);
+  useEffect(() => {
+    setChecked(checked);
+    setIndeterminate(indeterminate);
+  }, [checked, indeterminate]);
+
+  const handleChange = () => {
+    const newChecked = !isChecked;
+
+    if (indeterminate) {
+      setIndeterminate(false);
+    }
+
+    setChecked(newChecked);
+    onChange(newChecked);
+  };
+
+  const 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 jsxs("label", Object.assign({
+    className: containerClasses,
+    htmlFor: id
+  }, {
+    children: [jsx("input", Object.assign({
+      name: name,
+      type: "checkbox",
+      id: id,
+      disabled: disabled,
+      onChange: () => handleChange()
+    }, props), void 0), jsxs("div", Object.assign({
+      className: "fwe-checkbox-indicator-container"
+    }, {
+      children: [jsx("div", {
+        className: "fwe-checkbox-indicator-background"
+      }, void 0), !isIndeterminate && isChecked && (large ? jsx("svg", Object.assign({
+        width: "24px",
+        height: "24px"
+      }, {
+        children: jsx("path", {
+          d: "M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z",
+          fill: "#fff"
+        }, void 0)
+      }), void 0) : jsx("svg", Object.assign({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16"
+      }, {
+        children: jsx("path", {
+          d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
+          fill: "#fff"
+        }, void 0)
+      }), void 0)), isIndeterminate && !isChecked && jsx("div", {
+        className: "fwe-indeterminate-indicator"
+      }, void 0)]
+    }), void 0), jsx("div", Object.assign({
+      className: "fwe-checkbox-title"
+    }, {
+      children: children
+    }), void 0)]
+  }), void 0);
+}
+
+function ColorIndicator({
+  text,
+  label,
+  color,
+  className,
+  showPopOver = false,
+  children,
+  disabled
+}) {
+  const classes = classNames('fwe-color-indicator', className, disabled);
+  const [isEditorOpen, setEditorOpen] = useState(false);
+
+  function getBorderColor() {
+    if (!color || color.toUpperCase() === '#FFFFFF' || color.toUpperCase() === '#F2F3F5') {
+      return '#b6bec6'; // = $control-border
+    }
+
+    return color;
+  }
+
+  const colorBox = jsx("div", Object.assign({
+    className: "fwe-color-box",
+    style: {
+      background: color,
+      borderColor: getBorderColor()
+    }
+  }, {
+    children: !color && jsxs("svg", Object.assign({
+      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"
+    }, {
+      children: [jsx("defs", {
+        children: jsxs("pattern", Object.assign({
+          id: "bwsquare2px",
+          width: "4",
+          height: "4",
+          patternUnits: "userSpaceOnUse"
+        }, {
+          children: [jsx("rect", {
+            x: "0",
+            y: "0",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#ffffff"
+          }, void 0), jsx("rect", {
+            x: "2",
+            y: "0",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#e5e8eb"
+          }, void 0), jsx("rect", {
+            x: "0",
+            y: "2",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#e5e8eb"
+          }, void 0), jsx("rect", {
+            x: "2",
+            y: "2",
+            width: "2",
+            height: "2",
+            stroke: "none",
+            fill: "#ffffff"
+          }, void 0)]
+        }), void 0)
+      }, void 0), jsx("rect", {
+        x: "0",
+        y: "0",
+        rx: "0",
+        ry: "0",
+        width: "18",
+        height: "18",
+        fill: "url(#bwsquare2px)",
+        strokeWidth: "0"
+      }, void 0)]
+    }), void 0)
+  }), void 0);
+
+  const wrapper = wrapperChildren => jsxs("div", Object.assign({
+    className: classes,
+    onClick: () => setEditorOpen(prevOpen => showPopOver ? !prevOpen : prevOpen)
+  }, {
+    children: [jsx("div", Object.assign({
+      style: {
+        opacity: isEditorOpen ? 0 : 1
+      },
+      className: "fwe-color-label"
+    }, {
+      children: label
+    }), void 0), jsxs("div", Object.assign({
+      className: "fwe-color-container"
+    }, {
+      children: [wrapperChildren, " ", text && jsx("div", Object.assign({
+        className: "fwe-color-indicator-text"
+      }, {
+        children: text
+      }), void 0), ' ']
+    }), void 0)]
+  }), void 0);
+
+  return showPopOver ? jsx(Popover, Object.assign({
+    containerClassName: "fwe-popover-container--color-indicator",
+    position: "top",
+    flip: false,
+    wrapper: wrapper,
+    popoverContent: children,
+    open: isEditorOpen,
+    onStatusChange: setEditorOpen,
+    stopPropagation: true
+  }, {
+    children: colorBox
+  }), void 0) : jsx(Fragment, {
+    children: wrapper(colorBox)
+  }, void 0);
+}
+
+class ColorHelper {
+  // based on: https://gist.github.com/mjackson/5311256
+  static rgbToHsv(rgb) {
+    if (!rgb) {
+      return undefined;
+    }
+
+    const r = this.limitToByte(rgb.r) / 255;
+    const g = this.limitToByte(rgb.g) / 255;
+    const b = this.limitToByte(rgb.b) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = max;
+    let s = max;
+    const v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+
+    if (max === min) {
+      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,
+      s,
+      v
+    };
+  } // based on: https://gist.github.com/mjackson/5311256
+
+
+  static hsvToRgb(_hsv) {
+    const hsv = _hsv;
+    hsv.h = this.limitToOne(_hsv.h);
+    hsv.s = this.limitToOne(_hsv.s);
+    hsv.v = this.limitToOne(_hsv.v);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    const i = Math.floor(hsv.h * 6);
+    const f = hsv.h * 6 - i;
+    const p = hsv.v * (1 - hsv.s);
+    const q = hsv.v * (1 - f * hsv.s);
+    const t = hsv.v * (1 - (1 - f) * hsv.s);
+
+    switch (i % 6) {
+      case 0:
+        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)
+    };
+  }
+
+  static limitToByte(num) {
+    if (num <= 0) {
+      return 0;
+    }
+
+    if (num >= 255) {
+      return 255;
+    }
+
+    return num;
+  }
+
+  static limitToOne(num) {
+    if (num <= 0) {
+      return 0;
+    }
+
+    if (num >= 1) {
+      return 1;
+    }
+
+    return num;
+  }
+
+  static numberToHex(rgb) {
+    let hex = Math.round(rgb).toString(16);
+
+    if (hex.length < 2) {
+      hex = `0${hex}`;
+    }
+
+    return hex.toUpperCase();
+  }
+
+  static rgbToHex(_rgb) {
+    const rgb = _rgb;
+    rgb.r = this.limitToByte(rgb.r);
+    rgb.g = this.limitToByte(rgb.g);
+    rgb.b = this.limitToByte(rgb.b);
+    const red = this.numberToHex(rgb.r);
+    const green = this.numberToHex(rgb.g);
+    const blue = this.numberToHex(rgb.b);
+    return `#${red}${green}${blue}`;
+  }
+
+  static hexToRgb(hexString) {
+    const numbersOnly = hexString.substring(1);
+    const aRgbHex = numbersOnly.match(/.{1,2}/g);
+    return aRgbHex ? {
+      r: parseInt(aRgbHex[0], 16),
+      g: parseInt(aRgbHex[1], 16),
+      b: parseInt(aRgbHex[2], 16)
+    } : undefined;
+  }
+
+}
+
+const PREDEFINED_COLORS = ['#0091dc', '#333333', '#ffffff', '#f2f3f5', '#e5e8eb', '#d8dce1', '#b6bec6', '#80ca3d', '#ffd600', '#ff9600', '#d50000'];
+
+function ColorPicker({
+  palette = PREDEFINED_COLORS,
+  useAlpha = false,
+  alpha = 100,
+  paletteOnly,
+  color = '#FFFFFF',
+  onChange,
+  onAlphaChange,
+  className
+}) {
+  const baseSize = 184;
+  const initialRgb = ColorHelper.hexToRgb(color);
+  const defaultHsv = {
+    h: 0,
+    s: 0,
+    v: 1
+  };
+  const initialHsv = initialRgb ? ColorHelper.rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
+  const [hsv, setHsv] = useState(initialHsv);
+  const [innerColor, setInnerColor] = useState(color);
+  const [redInput, setRedInput] = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.r) || 255);
+  const [greenInput, setGreenInput] = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.g) || 255);
+  const [blueInput, setBlueInput] = useState((initialRgb === null || initialRgb === void 0 ? void 0 : initialRgb.b) || 255);
+  const [hexInputColor, setHexInputColor] = useState(color);
+  const [inputType, setInputType] = useState('RGB');
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [innerAlpha, setInnerAlpha] = useState(alpha);
+  const [changeColor, setChangeColor] = useState(true);
+
+  function limitAlpha() {
+    if (innerAlpha > 100) {
+      return 100;
+    }
+
+    if (innerAlpha < 0) {
+      return 0;
+    }
+
+    return innerAlpha;
+  }
+
+  const hueKnobOffset = hsv.h * baseSize - 14 - baseSize;
+  const saturationKnobOffset = hsv.s * baseSize;
+  const valueKnobOffset = (1 - hsv.v) * baseSize;
+  const alphaKnobOffset = (100 - limitAlpha()) / 100 * baseSize;
+
+  function getSaturationGradient() {
+    return `linear-gradient(to right, white,  hsl(${hsv.h * 360}, 100%, 50%) )`;
+  }
+
+  function updateInputs(hexColor) {
+    setHexInputColor(hexColor);
+    const rgb = ColorHelper.hexToRgb(hexColor);
+
+    if (rgb) {
+      setRedInput(rgb.r);
+      setGreenInput(rgb.g);
+      setBlueInput(rgb.b);
+    }
+  }
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(innerColor);
+    }
+  }, [onChange, innerColor]);
+  useEffect(() => {
+    if (onAlphaChange && innerAlpha) {
+      onAlphaChange(innerAlpha);
+    }
+  }, [onAlphaChange, innerAlpha]);
+  const updateColorHsv = useCallback((_hsv, _changeColor) => {
+    const rgb = ColorHelper.hsvToRgb(_hsv);
+    const hex = ColorHelper.rgbToHex(rgb);
+
+    if (_changeColor) {
+      setInnerColor(hex);
+    }
+
+    updateInputs(hex);
+  }, []);
+  useEffect(() => {
+    updateColorHsv(hsv, changeColor);
+  }, [updateColorHsv, hsv, changeColor]);
+
+  function updateGradient(x, y) {
+    setChangeColor(true);
+    setHsv(prevHsv => 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) {
+    const newHue = y / baseSize;
+    setChangeColor(true);
+    setHsv(prevHsv => 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);
+  }
+
+  const updateColorRgb = newColor => {
+    const currentColor = newColor || '#FFFFFF';
+    updateInputs(currentColor);
+    const rgb = ColorHelper.hexToRgb(currentColor);
+    setChangeColor(false);
+
+    if (rgb) {
+      const newHsv = ColorHelper.rgbToHsv(rgb);
+
+      if (newHsv) {
+        setHsv(newHsv);
+      }
+    }
+
+    setInnerColor(newColor);
+  };
+
+  const isHexColor = _color => /^#[0-9A-F]{6}$/i.test(_color);
+
+  function onHexInput(event) {
+    const 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) {
+    let 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) {
+      const rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
+
+      if (rgb) {
+        const newHexColor = ColorHelper.rgbToHex(rgb);
+        updateInputs(newHexColor);
+      }
+    }
+  }
+
+  function onRgbInput(_value, channel) {
+    const 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) {
+      const rgb = ColorHelper.hexToRgb(innerColor || '#FFFFFF');
+
+      if (rgb) {
+        rgb[channel] = numberValue;
+        const newHexColor = ColorHelper.rgbToHex(rgb);
+        setInnerColor(newHexColor);
+        updateColorRgb(newHexColor);
+      }
+    }
+  }
+
+  function onAlphaInput(_alpha) {
+    const numberValue = Number.parseInt(_alpha, 10);
+    setInnerAlpha(numberValue);
+  }
+
+  function onAlphaBlur() {
+    setInnerAlpha(limitAlpha());
+  }
+
+  const onChangeType = type => {
+    setInputType(type);
+    setSelectOpen(false);
+  };
+
+  function onRemoveColor() {
+    if (useAlpha) {
+      setInnerAlpha(0);
+    } else {
+      updateColorRgb();
+    }
+  }
+
+  return jsxs("div", Object.assign({
+    className: classNames('fwe-color-picker', {
+      'fwe-alpha-active': useAlpha
+    }, className)
+  }, {
+    children: [!paletteOnly && jsxs("div", Object.assign({
+      className: "fwe-d-flex"
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: "fwe-gradient-picker"
+      }, {
+        children: [jsx("div", {
+          className: "fwe-saturation-gradient",
+          style: {
+            backgroundImage: getSaturationGradient()
+          }
+        }, void 0), jsx("div", {
+          onClick: ({
+            nativeEvent: {
+              offsetX,
+              offsetY
+            }
+          }) => updateGradient(offsetX, offsetY),
+          className: "fwe-brightness-gradient"
+        }, void 0), jsx(Draggable, Object.assign({
+          position: {
+            x: saturationKnobOffset,
+            y: valueKnobOffset
+          },
+          onDrag: (e, data) => onGradientDrag(e, data),
+          bounds: "parent"
+        }, {
+          children: jsx("div", {
+            className: "fwe-knob"
+          }, void 0)
+        }), void 0)]
+      }), void 0), jsxs("div", Object.assign({
+        className: "fwe-hue-picker"
+      }, {
+        children: [jsx("div", {
+          className: "fwe-picker-background",
+          onClick: ({
+            nativeEvent: {
+              offsetY
+            }
+          }) => updateHue(offsetY)
+        }, void 0), jsx(Draggable, Object.assign({
+          position: {
+            x: 3,
+            y: hueKnobOffset
+          },
+          onDrag: (e, data) => onHueDrag(e, data),
+          bounds: "parent"
+        }, {
+          children: jsx("div", {
+            className: "fwe-knob",
+            style: {
+              background: `hsl(${hsv.h * 360}, 100%, 50%)`
+            }
+          }, void 0)
+        }), void 0)]
+      }), void 0), useAlpha && jsxs("div", Object.assign({
+        className: "fwe-alpha-picker"
+      }, {
+        children: [jsxs("svg", Object.assign({
+          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"
+        }, {
+          children: [jsx("defs", {
+            children: jsxs("pattern", Object.assign({
+              id: "bwsquare2px",
+              width: "4",
+              height: "4",
+              patternUnits: "userSpaceOnUse"
+            }, {
+              children: [jsx("rect", {
+                x: "0",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }, void 0), jsx("rect", {
+                x: "2",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }, void 0), jsx("rect", {
+                x: "0",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }, void 0), jsx("rect", {
+                x: "2",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }, void 0)]
+            }), void 0)
+          }, void 0), jsx("rect", {
+            x: "0",
+            y: "0",
+            rx: "4",
+            ry: "4",
+            width: "8",
+            height: "184",
+            fill: "url(#bwsquare2px)",
+            strokeWidth: "0"
+          }, void 0)]
+        }), void 0), jsx("div", {
+          onClick: ({
+            nativeEvent: {
+              offsetY
+            }
+          }) => updateAlpha(offsetY),
+          className: "fwe-picker-background",
+          style: {
+            backgroundImage: `linear-gradient( ${innerColor},  transparent)`
+          }
+        }, void 0), jsx(Draggable, Object.assign({
+          position: {
+            x: 3,
+            y: alphaKnobOffset
+          },
+          onDrag: (e, data) => onAlphaDrag(e, data),
+          bounds: "parent"
+        }, {
+          children: jsx("div", {
+            className: "fwe-knob"
+          }, void 0)
+        }), void 0)]
+      }), void 0)]
+    }), void 0), !paletteOnly && jsxs("div", Object.assign({
+      className: "fwe-mt-s"
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: "fwe-type-select"
+      }, {
+        children: [jsxs("div", Object.assign({
+          className: "fwe-type-indicator",
+          onClick: () => setSelectOpen(prevOpen => !prevOpen)
+        }, {
+          children: [jsx("span", Object.assign({
+            className: "fwe-input-type"
+          }, {
+            children: inputType
+          }), void 0), jsx("i", {
+            className: "fwe-icon fwe-icon-arrows-collapse"
+          }, void 0)]
+        }), void 0), selectOpen && jsxs("div", Object.assign({
+          className: "fwe-popover"
+        }, {
+          children: [jsxs("div", Object.assign({
+            className: classNames('fwe-type-item', {
+              'fwe-selected': inputType === 'HEX'
+            }),
+            onClick: () => onChangeType('HEX')
+          }, {
+            children: [jsx("i", {
+              className: "fwe-icon fwe-icon-menu-check"
+            }, void 0), " HEX"]
+          }), void 0), jsxs("div", Object.assign({
+            className: classNames('fwe-type-item', {
+              'fwe-selected': inputType === 'RGB'
+            }),
+            onClick: () => onChangeType('RGB')
+          }, {
+            children: [jsx("i", {
+              className: "fwe-icon fwe-icon-menu-check"
+            }, void 0), " RGB"]
+          }), void 0)]
+        }), void 0)]
+      }), void 0), jsxs("div", Object.assign({
+        className: "fwe-d-flex"
+      }, {
+        children: [inputType === 'HEX' && jsx("label", Object.assign({
+          className: "fwe-input-text fwe-hex-input"
+        }, {
+          children: jsx("input", {
+            type: "text",
+            value: hexInputColor,
+            onBlur: onHexBlur,
+            onChange: onHexInput
+          }, void 0)
+        }), void 0), inputType === 'RGB' && jsxs(Fragment, {
+          children: [jsx("label", Object.assign({
+            className: "fwe-input-text fwe-red-input"
+          }, {
+            children: jsx("input", {
+              type: "text",
+              value: redInput,
+              onBlur: () => onRgbBlur('r'),
+              onChange: e => onRgbInput(e.target.value, 'r')
+            }, void 0)
+          }), void 0), jsx("label", Object.assign({
+            className: "fwe-input-text fwe-green-input"
+          }, {
+            children: jsx("input", {
+              type: "text",
+              value: greenInput,
+              onBlur: () => onRgbBlur('g'),
+              onChange: e => onRgbInput(e.target.value, 'g')
+            }, void 0)
+          }), void 0), jsx("label", Object.assign({
+            className: "fwe-input-text fwe-green-input"
+          }, {
+            children: jsx("input", {
+              type: "text",
+              value: blueInput,
+              onBlur: () => onRgbBlur('b'),
+              onChange: e => onRgbInput(e.target.value, 'b')
+            }, void 0)
+          }), void 0)]
+        }, void 0), useAlpha && jsx("label", Object.assign({
+          className: "fwe-input-text fwe-alpha-input fwe-ml-auto"
+        }, {
+          children: jsxs("span", {
+            children: [jsx("input", {
+              type: "number",
+              min: "0",
+              max: "100",
+              value: innerAlpha,
+              onBlur: () => onAlphaBlur(),
+              onChange: e => onAlphaInput(e.target.value)
+            }, void 0), jsx("span", Object.assign({
+              className: "fwe-percent-char"
+            }, {
+              children: "%"
+            }), void 0)]
+          }, void 0)
+        }), void 0)]
+      }), void 0)]
+    }), void 0), jsxs("div", Object.assign({
+      className: "fwe-mt-xs fwe-color-grid"
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: "fwe-remove-color-button",
+        onClick: onRemoveColor
+      }, {
+        children: [jsxs("svg", Object.assign({
+          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"
+        }, {
+          children: [jsx("defs", {
+            children: jsxs("pattern", Object.assign({
+              id: "bwsquare2px",
+              width: "4",
+              height: "4",
+              patternUnits: "userSpaceOnUse"
+            }, {
+              children: [jsx("rect", {
+                x: "0",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }, void 0), jsx("rect", {
+                x: "2",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }, void 0), jsx("rect", {
+                x: "0",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }, void 0), jsx("rect", {
+                x: "2",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }, void 0)]
+            }), void 0)
+          }, void 0), jsx("rect", {
+            x: "0",
+            y: "0",
+            rx: "0",
+            ry: "0",
+            width: "18",
+            height: "18",
+            fill: "url(#bwsquare2px)",
+            strokeWidth: "0"
+          }, void 0)]
+        }), void 0), jsx("i", {
+          className: classNames('fwe-icon fwe-icon-menu-check', {
+            'fwe-color-text': !innerColor
+          })
+        }, void 0)]
+      }), void 0), palette.map(colorItem => {
+        const itemClasses = classNames('fwe-color-item', {
+          'fwe-white-item': colorItem.toUpperCase() === '#FFFFFF'
+        });
+        return jsx("div", Object.assign({
+          className: itemClasses,
+          style: {
+            background: colorItem
+          },
+          onClick: () => updateColorRgb(colorItem.toUpperCase())
+        }, {
+          children: innerColor === colorItem.toUpperCase() && jsx("i", {
+            className: "fwe-icon fwe-icon-menu-check"
+          }, void 0)
+        }), colorItem);
+      })]
+    }), void 0)]
+  }), void 0);
+}
+
+function DatePicker({
+  children,
+  className,
+  disabled,
+  required,
+  error,
+  hint,
+  value,
+  defaultValue = new Date(),
+  formatDate = Intl.DateTimeFormat().format,
+  options,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [calendar, setCalendar] = useState(null);
+  const innerDefaultValue = value || defaultValue;
+
+  function toggle() {
+    const newOpen = !open;
+    setOpen(newOpen);
+
+    if (newOpen) {
+      calendar.open();
+    } else {
+      calendar.close();
+    }
+  }
+
+  const datePickerRef = useRef(null);
+  const {
+    keepOpenOnDateChange,
+    maxDate,
+    minDate
+  } = options || {};
+  useEffect(() => {
+    if (calendar !== null && value !== undefined) {
+      calendar.setDate(value);
+    }
+  }, [calendar, value]);
+  useEffect(() => {
+    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: v => handleChange(v[0]),
+        onClose: handleClose,
+        position: 'below center',
+        formatDate,
+        closeOnSelect: (_a = !keepOpenOnDateChange) !== null && _a !== void 0 ? _a : true,
+        clickOpens: false,
+        minDate,
+        maxDate
+      }));
+    }
+  }, [datePickerRef, calendar, maxDate, minDate, onChange, innerDefaultValue, formatDate, keepOpenOnDateChange]);
+  useEffect(() => () => {
+    if (calendar !== null) {
+      calendar.destroy();
+    }
+  }, [calendar]);
+  return jsxs("label", Object.assign({
+    className: classNames('fwe-input-text fwe-input-text-icon', className),
+    onClick: toggle
+  }, {
+    children: [jsx("i", {
+      className: classNames('fwe-icon fwe-icon-time-calendar', {
+        'fwe-color-hero': open && !disabled,
+        'fwe-color-control-disabled': disabled
+      })
+    }, void 0), jsx("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
+    }, void 0), jsx("span", Object.assign({
+      className: "fwe-input-text-label"
+    }, {
+      children: children
+    }), void 0), hint && jsx("span", Object.assign({
+      className: "fwe-input-text-info"
+    }, {
+      children: hint
+    }), void 0), error && jsx("span", Object.assign({
+      className: "fwe-input-text-invalid"
+    }, {
+      children: error
+    }), void 0)]
+  }), void 0);
+}
+
+function DateRangePicker({
+  children,
+  className,
+  disabled,
+  error,
+  formatDate,
+  hint,
+  onChange,
+  options,
+  required,
+  defaultValue = new Date()
+}) {
+  const [open, setOpen] = useState(false);
+  const [calendar, setCalendar] = useState(null);
+
+  function toggle() {
+    const newOpen = !open;
+    setOpen(newOpen);
+
+    if (newOpen) {
+      calendar.open();
+    } else {
+      calendar.close();
+    }
+  }
+
+  const inputRef = useRef(null);
+  const input2Ref = useRef(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    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: v => handleChange(v),
+        position: 'below center',
+        positionElement: containerRef.current,
+        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(() => () => {
+    if (calendar !== null) {
+      calendar.destroy();
+    }
+  }, [calendar]);
+  return jsx("div", Object.assign({
+    className: classNames('fr-date-range-picker', className),
+    onClick: toggle
+  }, {
+    children: jsxs("label", Object.assign({
+      className: "fwe-input-text fwe-input-text-icon"
+    }, {
+      children: [jsx("i", {
+        className: classNames('fwe-icon fwe-icon-time-calendar', {
+          'fwe-color-hero': open && !disabled,
+          'fwe-color-control-disabled': disabled
+        })
+      }, void 0), jsxs("div", Object.assign({
+        ref: containerRef,
+        className: "fr-date-range-picker-inputs"
+      }, {
+        children: [jsx("input", {
+          ref: inputRef,
+          "aria-label": "picked start date",
+          type: "text",
+          readOnly: true,
+          required: required || null,
+          className: classNames({
+            'fwe-border-hero': open && !disabled
+          }),
+          disabled: disabled
+        }, void 0), jsx("input", {
+          ref: input2Ref,
+          "aria-label": "picked end date",
+          type: "text",
+          readOnly: true,
+          required: required || null,
+          className: classNames({
+            'fwe-border-hero': open && !disabled
+          }),
+          disabled: disabled
+        }, void 0)]
+      }), void 0), jsx("span", Object.assign({
+        className: classNames('fwe-input-text-label', {
+          'fwe-color-text-disabled': disabled
+        })
+      }, {
+        children: children
+      }), void 0), hint && jsx("span", Object.assign({
+        className: "fwe-input-text-info"
+      }, {
+        children: hint
+      }), void 0), error && jsx("span", Object.assign({
+        className: "fwe-input-text-invalid"
+      }, {
+        children: error
+      }), void 0)]
+    }), void 0)
+  }), void 0);
+}
+
+const RadioGroupContext = /*#__PURE__*/createContext({});
+
+function RadioButton({
+  id,
+  onChange,
+  value,
+  name,
+  checked,
+  labelPosition = 'after',
+  large = false,
+  disabled = false,
+  required = false,
+  children,
+  className
+}) {
+  const {
+    disabled: groupDisabled,
+    labelPosition: groupLabelPosition,
+    large: groupLarge,
+    name: groupName,
+    required: groupRequired,
+    value: groupValue
+  } = useContext(RadioGroupContext);
+  const innerLabelPosition = groupLabelPosition || labelPosition;
+  const classes = classNames('fwe-radio', {
+    'fwe-radio-label-below': innerLabelPosition === 'below'
+  }, {
+    'fwe-radio-label-before': innerLabelPosition === 'before'
+  }, {
+    'fwe-radio-lg': large || groupLarge
+  }, className);
+  return jsxs("label", Object.assign({
+    className: classes,
+    htmlFor: id
+  }, {
+    children: [jsx("input", {
+      checked: checked,
+      type: "radio",
+      id: id,
+      name: groupName || name,
+      value: value || groupValue,
+      onChange: () => onChange(value),
+      disabled: disabled || groupDisabled,
+      required: required || groupRequired
+    }, void 0), jsx("div", {
+      className: "fwe-radio-checkmark"
+    }, void 0), " ", jsx("div", Object.assign({
+      className: "fwe-radio-label-content"
+    }, {
+      children: children
+    }), void 0)]
+  }), void 0);
+}
+
+const defaultConfig$1 = {
+  outline: true,
+  iconOnly: true
+};
+function Segment(props) {
+  const {
+    children,
+    legend,
+    config,
+    onChange,
+    className
+  } = props;
+  const innerConfig = Object.assign(Object.assign({}, defaultConfig$1), config);
+  let useIcon = false;
+  let useIconAndText = false;
+  let tmpValue = '';
+  React.Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+
+    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;
+  });
+  const [value, setValue] = useState(tmpValue);
+
+  const handleChange = (event, _value) => {
+    if (onChange) {
+      onChange(event, _value);
+    }
+
+    setValue(_value);
+  };
+
+  return jsxs("fieldset", Object.assign({
+    className: classNames('fwe-segment', {
+      'fwe-segment-outline': innerConfig.outline,
+      'fwe-segment-icon': useIcon,
+      'fwe-segment-icon-text': useIconAndText
+    }, className)
+  }, {
+    children: [jsx("legend", Object.assign({
+      className: "fwe-sr-only fwe-d-inline-block"
+    }, {
+      children: legend
+    }), void 0), jsx("div", Object.assign({
+      className: "fwe-segment-group"
+    }, {
+      children: React.Children.map(children, child => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          return null;
+        }
+
+        const id = (Math.random() * Date.now()).toString().replace('.', '-');
+        return /*#__PURE__*/React.cloneElement(child, {
+          key: id,
+          id,
+          onChange: handleChange,
+          iconOnly: innerConfig.iconOnly,
+          checked: child.props.value === value
+        });
+      })
+    }), void 0)]
+  }), void 0);
+}
+
+function SegmentControl(props) {
+  const {
+    label,
+    checked,
+    disabled,
+    name,
+    value,
+    icon,
+    onChange,
+    iconOnly,
+    id = (Math.random() * Date.now()).toString().replace('.', '-'),
+    className
+  } = props;
+  let viewMode = 'text';
+
+  if (icon) {
+    viewMode = iconOnly ? 'icon' : 'icon-text';
+  }
+
+  const prefix = 'fwe-icon-';
+  let innerIcon = icon;
+
+  if (icon && icon.indexOf(prefix) === -1) {
+    innerIcon = prefix + icon;
+  }
+
+  const handleChange = event => {
+    if (onChange) {
+      onChange(event, value);
+    }
+  };
+
+  return jsxs(Fragment, {
+    children: [jsx("input", {
+      className: "fwe-segment-input",
+      type: "radio",
+      id: id,
+      name: name,
+      value: value,
+      checked: checked,
+      disabled: disabled,
+      onChange: e => handleChange(e)
+    }, void 0), jsxs("label", Object.assign({
+      className: classNames('fwe-segment-label', className),
+      htmlFor: id
+    }, {
+      children: [viewMode === 'icon' && jsxs(Fragment, {
+        children: [jsx("span", Object.assign({
+          className: "fwe-sr-only"
+        }, {
+          children: label
+        }), void 0), jsx("i", {
+          "aria-hidden": "true",
+          className: classNames('fwe-icon', innerIcon)
+        }, void 0)]
+      }, void 0), viewMode === 'text' && label, viewMode === 'icon-text' && jsxs(Fragment, {
+        children: [jsx("i", {
+          "aria-hidden": "true",
+          className: classNames('fwe-icon', innerIcon)
+        }, void 0), label]
+      }, void 0)]
+    }), void 0)]
+  }, void 0);
+}
+
+const SelectOption = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    children,
+    className
+  } = _a,
+      props = __rest(_a, ["children", "className"]);
+
+  return jsx("span", Object.assign({
+    ref: ref,
+    className: className
+  }, props, {
+    children: children
+  }), void 0);
+});
+
+function calcVirtualScrollHeight(config, itemLength) {
+  const defaultHeight = 48;
+  let 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;
+}
+
+const Select = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+    defaultValue,
+    value,
+    label,
+    options,
+    onChange,
+    required = false,
+    config,
+    disabled,
+    className,
+    name,
+    id,
+    children,
+    hint,
+    error
+  } = _a,
+      props = __rest(_a, ["defaultValue", "value", "label", "options", "onChange", "required", "config", "disabled", "className", "name", "id", "children", "hint", "error"]);
+
+  const [optionsWrapper, setOptionsWrapper] = useState({
+    isFocused: false,
+    action: ''
+  });
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const buttonEl = useRef(null);
+  const childrenList = [];
+  React.Children.forEach(children, element => {
+    if ( /*#__PURE__*/React.isValidElement(element)) {
+      childrenList.push(Object.assign(Object.assign({}, element), {
+        props: Object.assign(Object.assign({}, element.props), {
+          className: 'fwe-select-option-content'
+        })
+      }));
+    }
+  });
+  const usedOptions = options !== null && options !== void 0 ? options : childrenList.map(child => child.props.option);
+  const listItemRef = useRef(Array.from({
+    length: usedOptions.length
+  }, () => /*#__PURE__*/React.createRef()));
+  useEffect(() => {
+    if (controlled) {
+      setInnerValue(value);
+    }
+  }, [value, controlled]);
+  const getSelectedOptionLabel = useCallback(() => {
+    var _a;
+
+    if (innerValue !== undefined) {
+      return (_a = usedOptions.find(option => option.data === innerValue)) === null || _a === void 0 ? void 0 : _a.label;
+    }
+
+    return undefined;
+  }, [usedOptions, innerValue]);
+  const 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();
+      }
+    }
+  }
+
+  const focusNextElement = nextIndex => {
+    if (listItemRef && listItemRef.current) {
+      const nextItem = listItemRef.current[nextIndex].current;
+
+      if (nextItem !== null) {
+        nextItem.focus();
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (optionsWrapper.isFocused) {
+      if (optionsWrapper.action === 'key') {
+        const index = usedOptions.findIndex(option => option.label === getSelectedOptionLabel());
+
+        if (index >= 0) {
+          focusNextElement(index);
+        }
+      } else if (optionsWrapper.action === 'click') {
+        handleButtonFocus(true);
+      }
+    }
+  }, [optionsWrapper, usedOptions, innerValue, getSelectedOptionLabel]);
+
+  const handleOptionChange = newOption => {
+    if (!controlled) {
+      setInnerValue(newOption.data);
+    }
+
+    if (onChange) {
+      onChange(newOption.data);
+    }
+
+    setOptionsWrapper(prevOptionsWrapper => Object.assign(Object.assign({}, prevOptionsWrapper), {
+      isFocused: false
+    }));
+
+    if (buttonEl && buttonEl.current) {
+      buttonEl.current.focus();
+    }
+  };
+
+  const handleListKeyDown = (event, option, index) => {
+    const arrowKeys = ['ArrowDown', 'ArrowUp'];
+    const 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();
+      let 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(prevOptionsWrapper => Object.assign(Object.assign({}, prevOptionsWrapper), {
+        isFocused: false
+      }));
+      handleButtonFocus();
+    }
+  };
+
+  const handleKeyPress = event => {
+    const validKeys = ['Enter', ' ', 'ArrowUp', 'ArrowDown'];
+
+    if (validKeys.includes(event.key)) {
+      event.preventDefault();
+
+      if (!disabled) {
+        setOptionsWrapper(prevOptionsWrapper => ({
+          action: 'key',
+          isFocused: !prevOptionsWrapper.isFocused
+        }));
+      }
+    }
+  };
+
+  const handleClick = e => {
+    e.stopPropagation();
+
+    if (!disabled) {
+      setOptionsWrapper(prevOptionsWrapper => ({
+        action: '',
+        isFocused: !prevOptionsWrapper.isFocused
+      }));
+    }
+  };
+
+  const selectedOptionLabel = getSelectedOptionLabel();
+  const 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 jsxs(Fragment, {
+      children: [options && options.map((option, i) => jsx("li", Object.assign({
+        ref: listItemRef.current[i],
+        role: "option",
+        "aria-selected": option.label === selectedOptionLabel,
+        onClick: () => handleOptionChange(option),
+        className: classNames('fwe-select-option', {
+          'fwe-empty': !option.label
+        }),
+        onKeyDown: e => handleListKeyDown(e, option, i),
+        tabIndex: 0
+      }, {
+        children: jsx("span", Object.assign({
+          className: "fwe-select-option-content"
+        }, {
+          children: option.label
+        }), void 0)
+      }), option.data)), childrenList.map((child, i) => {
+        const _a = child.props,
+              {
+          option
+        } = _a,
+              propsWithoutOption = __rest(_a, ["option"]);
+
+        return jsx("li", Object.assign({
+          ref: listItemRef.current[i],
+          role: "option",
+          "aria-selected": option.label === selectedOptionLabel,
+          onClick: () => handleOptionChange(option),
+          className: classNames('fwe-select-option', {
+            'fwe-empty': !option.label
+          }),
+          onKeyDown: e => handleListKeyDown(e, option, i),
+          tabIndex: 0
+        }, {
+          children: jsx(SelectOption, Object.assign({}, propsWithoutOption), void 0)
+        }), option.data);
+      })]
+    }, void 0);
+  }
+
+  return jsx(OutsideClickHandler, Object.assign({
+    onOutsideClick: () => setOptionsWrapper({
+      action: '',
+      isFocused: false
+    })
+  }, {
+    children: jsxs("div", Object.assign({
+      ref: ref,
+      className: classNames('fwe-select-wrapper', className)
+    }, props, {
+      children: [jsx("select", Object.assign({
+        defaultValue: defaultValue,
+        value: innerValue,
+        name: name,
+        id: id,
+        "aria-label": label,
+        disabled: disabled,
+        required: required
+      }, {
+        children: usedOptions.map(option => jsx("option", Object.assign({
+          value: option.data
+        }, {
+          children: option.label
+        }), option.data))
+      }), void 0), jsx("div", Object.assign({
+        role: "button",
+        tabIndex: 0,
+        className: selectClassName,
+        onClick: e => handleClick(e),
+        ref: buttonEl,
+        onKeyDown: handleKeyPress
+      }, {
+        children: jsx("div", Object.assign({
+          className: "fwe-select-content"
+        }, {
+          children: selectedOptionLabel
+        }), void 0)
+      }), void 0), jsx("label", Object.assign({
+        className: classNames('fwe-select-label', {
+          'fwe-sr-only': config === null || config === void 0 ? void 0 : config.hideLabel
+        }),
+        htmlFor: id
+      }, {
+        children: label || ''
+      }), void 0), jsx("div", {
+        className: "fwe-select-underline"
+      }, void 0), hint && !error && jsx("div", Object.assign({
+        className: "fwe-select-description"
+      }, {
+        children: hint
+      }), void 0), error && jsxs("div", Object.assign({
+        className: "fwe-select-invalid"
+      }, {
+        children: [" ", error, " "]
+      }), void 0), jsx("ul", Object.assign({
+        className: `fwe-select-options-container${optionsWrapper.isFocused ? '' : ' fwe-d-none'}`
+      }, {
+        children: (scroll === null || scroll === void 0 ? void 0 : scroll.enabled) ? jsx("div", Object.assign({
+          className: "fr-select-scroll",
+          style: {
+            height: calcVirtualScrollHeight(config, usedOptions.length)
+          }
+        }, {
+          children: renderOptions()
+        }), void 0) : renderOptions()
+      }), void 0)]
+    }), void 0)
+  }), void 0);
+});
+
+function Slider({
+  disabled = false,
+  label,
+  large = false,
+  max,
+  min,
+  onChange,
+  onChangeCommitted,
+  step,
+  value,
+  showValue = true,
+  className
+}) {
+  const [innerValue, setInnerValue] = useState(value);
+  const [left, setLeft] = useState(null);
+  const labelEl = useRef(null);
+  const classes = classNames('fwe-slider', {
+    'fwe-slider-lg': large
+  }, {
+    'fr-slider-label': label !== null && showValue
+  }, className);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  const updateValuePosition = useCallback(() => {
+    if (labelEl.current) {
+      const {
+        width
+      } = labelEl.current.getBoundingClientRect();
+      const diff = max - min;
+      setLeft((innerValue - min) / diff * (width - 16));
+    }
+  }, [innerValue, max, min]);
+
+  const handleAfterChange = () => {
+    if (onChangeCommitted) {
+      onChangeCommitted(innerValue);
+    }
+  };
+
+  const handleChange = e => {
+    const newValue = Number.parseFloat(e.target.value);
+    setInnerValue(newValue);
+
+    if (onChange) {
+      onChange(e, newValue);
+    }
+  };
+
+  useEffect(() => {
+    function handleResize() {
+      updateValuePosition();
+    }
+
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Remove event listener on cleanup
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, [updateValuePosition]);
+  return jsxs("label", Object.assign({
+    ref: labelEl,
+    className: classes
+  }, {
+    children: [label && jsx("span", {
+      children: label
+    }, void 0), jsx("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
+    }, void 0), showValue && left !== null && jsx("span", Object.assign({
+      className: "fr-slider-value",
+      style: {
+        left: `${left}px`
+      }
+    }, {
+      children: innerValue
+    }), void 0)]
+  }), void 0);
+}
+
+function Switch({
+  labelPosition = 'before',
+  large = false,
+  title,
+  value,
+  disabled = false,
+  onChange,
+  className
+}) {
+  const labelClassName = classNames('fwe-switch', {
+    [`fwe-switch-label-${labelPosition}`]: true
+  }, {
+    'fwe-switch-lg': large
+  }, className);
+  const [currentValue, setCurrentValue] = useState(value);
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  const handleChange = () => {
+    const newValue = !currentValue;
+    setCurrentValue(newValue);
+
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  return jsxs("label", Object.assign({
+    className: labelClassName
+  }, {
+    children: [jsx("input", {
+      type: "checkbox",
+      disabled: disabled,
+      checked: currentValue,
+      onChange: () => handleChange()
+    }, void 0), jsx("div", {
+      className: "fwe-switch-track"
+    }, void 0), jsx("div", Object.assign({
+      className: "fwe-switch-label-content"
+    }, {
+      children: title
+    }), void 0)]
+  }), void 0);
+}
+
+function TextArea({
+  disabled,
+  onBlur,
+  onChange,
+  onFocus,
+  onInput,
+  readonly,
+  required,
+  label,
+  error,
+  hint,
+  value,
+  rows,
+  maxLength,
+  className,
+  defaultValue
+}) {
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const hintClasses = classNames('fwe-input-text-info');
+  const shadowRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const [height, setHeight] = useState(null);
+  useEffect(() => {
+    if (controlled) {
+      setInnerValue(value);
+    }
+  }, [value, controlled]);
+  useEffect(() => {
+    const input = ref.current;
+    const shadow = shadowRef.current;
+    const minRows = 2;
+    shadow.value = input.value || 'x';
+    shadow.style.width = `${input.clientWidth}`;
+    const 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 jsxs("label", Object.assign({
+    className: classNames('fwe-input-text', className)
+  }, {
+    children: [jsx("textarea", {
+      style: Object.assign({}, !rows && {
+        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
+    }, void 0), jsx("textarea", {
+      style: {
+        visibility: 'hidden',
+        position: 'absolute',
+        overflow: 'hidden',
+        height: 0,
+        top: 0,
+        left: 0,
+        transform: 'translateZ(0)',
+        padding: '0'
+      },
+      ref: shadowRef,
+      readOnly: true
+    }, void 0), jsx("span", Object.assign({
+      className: "fwe-input-text-label"
+    }, {
+      children: label
+    }), void 0), hint && jsx("span", Object.assign({
+      className: hintClasses
+    }, {
+      children: hint
+    }), void 0), error !== undefined && jsx("span", Object.assign({
+      className: "fwe-input-text-invalid"
+    }, {
+      children: error
+    }), void 0), maxLength > 0 && jsxs("span", Object.assign({
+      className: "fwe-input-text-count"
+    }, {
+      children: [innerValue.length, " /", maxLength]
+    }), void 0)]
+  }), void 0);
+}
+
+function TextEditorButton({
+  disabled,
+  label,
+  type,
+  className,
+  icon,
+  list,
+  value,
+  noAction,
+  category
+}) {
+  const [active, setActive] = useState(false);
+  const btnRef = useRef(null);
+
+  function handleClick() {
+    const btn = btnRef.current;
+    setActive(prevActive => !prevActive);
+    btn.click();
+  }
+
+  useEffect(() => {
+    function callback(mutationRecords) {
+      mutationRecords.forEach(mutationRecord => {
+        const {
+          classList
+        } = mutationRecord.target;
+        const {
+          oldValue
+        } = mutationRecord;
+
+        if (classList.contains('ql-active')) {
+          setActive(true);
+        }
+
+        if (!classList.contains('ql-active') && oldValue.includes('ql-active')) {
+          setActive(false);
+        }
+      });
+    }
+
+    if (btnRef.current && !noAction) {
+      const observer = new MutationObserver(callback);
+      observer.observe(btnRef.current, {
+        attributes: true,
+        attributeFilter: ['class'],
+        attributeOldValue: true
+      });
+    }
+  }, [btnRef, noAction]);
+  return jsxs(Fragment, {
+    children: [jsx("button", {
+      ref: btnRef,
+      type: "button",
+      className: classNames({
+        [`ql-${category || type}`]: !list
+      }, {
+        'ql-list': list
+      }, 'fwe-d-none', {
+        [`action-${type}`]: !noAction
+      }),
+      "aria-hidden": "true",
+      value: value
+    }, void 0), jsxs("button", Object.assign({
+      type: "button",
+      className: classNames('fwe-btn', {
+        'fwe-btn-toolbar-list': list
+      }, 'fr-button', className, {
+        'fwe-active': active && !noAction
+      }),
+      onClick: () => handleClick(),
+      disabled: disabled
+    }, {
+      children: [label && jsx("div", Object.assign({
+        className: `fr-button-text fwe-text-${type}`
+      }, {
+        children: label
+      }), void 0), icon && jsx("i", {
+        className: classNames('fwe-icon fwe-icon-toolbar-list', `fwe-icon-${icon}`, 'fwe-pr-0')
+      }, void 0)]
+    }), void 0)]
+  }, void 0);
+}
+
+const xss = require('xss');
+
+const defaultConfig = {
+  toolbar: {
+    bold: true,
+    italic: true,
+    underline: true,
+    alignCenter: true,
+    alignRight: true,
+    bulletList: true,
+    orderedList: true,
+    image: true,
+    link: true
+  }
+};
+function TextEditor({
+  disabled = false,
+  label,
+  maxLength,
+  value,
+  hint,
+  error,
+  readOnly = false,
+  onChange,
+  className,
+  config: configProps
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+
+  const editorRef = useRef(null);
+  const [editor, setEditor] = useState(null);
+  const [id] = useState((Math.random() * Date.now()).toString().replace('.', '-'));
+  const [innerValue, setInnerValue] = useState(value);
+  const config = {
+    toolbar: Object.assign(Object.assign({}, defaultConfig.toolbar), configProps === null || configProps === void 0 ? void 0 : configProps.toolbar)
+  };
+  useEffect(() => {
+    if (editorRef && editor === null) {
+      const 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', (_node, delta) => {
+        // allowed, passthru delta
+        if (config.toolbar.image === true) {
+          return delta;
+        } // not allowed, remove image by setting up a new delta
+
+
+        const Delta = Quill.import('quill-delta');
+        return new Delta().insert('');
+      });
+      setEditor(newEditor);
+    }
+  }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar.image]);
+  useEffect(() => {
+    if (editor) {
+      editor.on('text-change', () => {
+        let 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(() => {
+    if (editor) {
+      const whiteList = Object.assign(Object.assign({}, xss.whiteList), {
+        a: [...xss.whiteList.a, 'rel']
+      });
+      const sanitizedValue = xss(value, {
+        whiteList
+      });
+      const 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) {
+    const linkOrImage = config.toolbar.image || config.toolbar.link;
+    const lists = config.toolbar.bulletList || config.toolbar.orderedList;
+    const typos = config.toolbar.bold || config.toolbar.italic || config.toolbar.underline;
+    const textAlign = config.toolbar.alignCenter || config.toolbar.alignRight;
+
+    switch (name) {
+      case 'typo':
+        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 jsxs("label", Object.assign({
+    className: classNames('fwe-input-text', {
+      disabled
+    })
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: classNames('fwe-editor-toolbar', {
+        [`fwe-editor-toolbar-${className}`]: className
+      }),
+      id: `editor-toolbar-${id}`
+    }, {
+      children: [jsx("span", Object.assign({
+        className: "ql-formats fwe-d-none"
+      }, {
+        children: jsxs("select", Object.assign({
+          className: "ql-size",
+          "aria-hidden": "true"
+        }, {
+          children: [jsx("option", {
+            value: "small",
+            "aria-label": "small"
+          }, void 0), jsx("option", {
+            selected: true,
+            "aria-label": "selected"
+          }, void 0), jsx("option", {
+            value: "large",
+            "aria-label": "large"
+          }, void 0), jsx("option", {
+            value: "huge",
+            "aria-label": "huge"
+          }, void 0)]
+        }), void 0)
+      }), void 0), jsxs("span", Object.assign({
+        className: "ql-formats fwe-mr-3"
+      }, {
+        children: [((_a = config === null || config === void 0 ? void 0 : config.toolbar) === null || _a === void 0 ? void 0 : _a.bold) && jsx(TextEditorButton, {
+          disabled: disabled,
+          type: "bold",
+          className: "fwe-mr-3",
+          label: "B"
+        }, void 0), ((_b = config === null || config === void 0 ? void 0 : config.toolbar) === null || _b === void 0 ? void 0 : _b.italic) && jsx(TextEditorButton, {
+          disabled: disabled,
+          type: "italic",
+          className: "fwe-mr-3",
+          label: "I"
+        }, void 0), ((_c = config === null || config === void 0 ? void 0 : config.toolbar) === null || _c === void 0 ? void 0 : _c.underline) && jsx(TextEditorButton, {
+          disabled: disabled,
+          type: "underline",
+          label: "U"
+        }, void 0), !hideDivider('typo') && jsx("div", {
+          className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+        }, void 0), ((_d = config === null || config === void 0 ? void 0 : config.toolbar) === null || _d === void 0 ? void 0 : _d.alignCenter) && jsx(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
+          })
+        }, void 0), ((_f = config === null || config === void 0 ? void 0 : config.toolbar) === null || _f === void 0 ? void 0 : _f.alignRight) && jsx(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"
+        }, void 0), !hideDivider('text-align') && jsx("div", {
+          className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+        }, void 0), ((_g = config === null || config === void 0 ? void 0 : config.toolbar) === null || _g === void 0 ? void 0 : _g.bulletList) && jsx(TextEditorButton, {
+          disabled: disabled,
+          className: "fwe-mr-3",
+          type: "ul",
+          list: true,
+          icon: "list-list-view",
+          value: "bullet"
+        }, void 0), ((_h = config === null || config === void 0 ? void 0 : config.toolbar) === null || _h === void 0 ? void 0 : _h.orderedList) && jsx(TextEditorButton, {
+          disabled: disabled,
+          type: "ol",
+          list: true,
+          icon: "enumeration",
+          value: "ordered"
+        }, void 0), ((_j = config === null || config === void 0 ? void 0 : config.toolbar) === null || _j === void 0 ? void 0 : _j.image) && jsxs(Fragment, {
+          children: [jsx("div", {
+            className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+          }, void 0), jsx(TextEditorButton, {
+            disabled: disabled,
+            type: "image",
+            icon: "image-image",
+            noAction: true
+          }, void 0)]
+        }, void 0), ((_k = config === null || config === void 0 ? void 0 : config.toolbar) === null || _k === void 0 ? void 0 : _k.link) && jsxs(Fragment, {
+          children: [jsx("div", {
+            className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
+          }, void 0), jsx(TextEditorButton, {
+            disabled: disabled,
+            type: "link",
+            icon: "file-link",
+            noAction: true
+          }, void 0)]
+        }, void 0)]
+      }), void 0)]
+    }), void 0), jsx("div", Object.assign({
+      className: classNames('fwe-editor-container', {
+        'fwe-editor-container--error': error
+      }),
+      id: `editor-container-${id}`
+    }, {
+      children: jsx("div", {
+        className: "fwe-editor",
+        ref: editorRef
+      }, void 0)
+    }), void 0), jsx("span", Object.assign({
+      className: "fwe-input-text-label",
+      id: `editor-label-${id}`
+    }, {
+      children: label
+    }), void 0), error && jsx("span", Object.assign({
+      className: "fwe-text-editor-invalid"
+    }, {
+      children: error
+    }), void 0), hint && jsx("span", Object.assign({
+      className: "fwe-text-editor-info"
+    }, {
+      children: hint
+    }), void 0), maxLength && maxLength > 0 && value != null && jsx("span", Object.assign({
+      className: "fwe-input-text-count"
+    }, {
+      children: `${currentLength()} / ${maxLength}`
+    }), void 0)]
+  }), void 0);
+}
+
+function useOnClickOutside(ref, callback, ref2) {
+  useEffect(() => {
+    const listener = event => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target) || !ref2 || !ref2.current || ref2.current.contains(event.target)) {
+        return;
+      }
+
+      callback();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, ref2, callback]);
+}
+
+const TimePickerDropdown = /*#__PURE__*/forwardRef(({
+  timeFormat,
+  date,
+  onDateChange,
+  showSeconds,
+  onClose,
+  style
+}, ref) => {
+  const innerRef = useRef(null);
+  const combinedRef = useForkRef(ref, innerRef);
+  const hoursRef = useRef(null);
+  const [tmpHours, setTmpHours] = useState(null);
+  const [tmpMinutes, setTmpMinutes] = useState(null);
+  const [tmpSeconds, setTmpSeconds] = useState(null);
+  const [innerDate, setInnerDate] = useState(date);
+  const min = 0;
+  const hourMax = timeFormat === '12' ? 12 : 23;
+  const minutesSecondsMax = 59;
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      hoursRef.current.focus();
+    });
+  }, []);
+
+  function handleKeyPress(e) {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+      onClose(e.key === 'Enter' ? innerDate : undefined);
+    }
+  }
+
+  function handleHourUp() {
+    const newDate = new Date(innerDate);
+    newDate.setHours(innerDate.getHours() + 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpHours(null);
+  }
+
+  function handleHourDown() {
+    const newDate = new Date(innerDate);
+    newDate.setHours(innerDate.getHours() - 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpHours(null);
+  }
+
+  function handleHourChange(e) {
+    const newDate = new Date(innerDate);
+    const hour = +e.target.value;
+    newDate.setHours(hour > hourMax ? hourMax : hour < min ? min : hour);
+    setInnerDate(newDate);
+    setTmpHours(e.target.value);
+  }
+
+  function handleMinuteUp() {
+    const newDate = new Date(innerDate);
+    newDate.setMinutes(innerDate.getMinutes() + 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpMinutes(null);
+  }
+
+  function handleMinuteDown() {
+    const newDate = new Date(innerDate);
+    newDate.setMinutes(innerDate.getMinutes() - 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpMinutes(null);
+  }
+
+  function handleMinuteChange(e) {
+    const newDate = new Date(innerDate);
+    const minute = +e.target.value;
+    newDate.setMinutes(minute > minutesSecondsMax ? minutesSecondsMax : minute < min ? min : minute);
+    setInnerDate(newDate);
+    setTmpMinutes(e.target.value);
+  }
+
+  function handleSecondUp() {
+    const newDate = new Date(innerDate);
+    newDate.setSeconds(innerDate.getSeconds() + 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpSeconds(null);
+  }
+
+  function handleSecondDown() {
+    const newDate = new Date(innerDate);
+    newDate.setSeconds(innerDate.getSeconds() - 1);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpSeconds(null);
+  }
+
+  function handleSecondChange(e) {
+    const newDate = new Date(innerDate);
+    const seconds = +e.target.value;
+    newDate.setSeconds(seconds > minutesSecondsMax ? minutesSecondsMax : seconds < min ? min : seconds);
+    setInnerDate(newDate);
+    setTmpSeconds(e.target.value);
+  }
+
+  const hours = timeFormat === '12' ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
+  return jsxs("div", Object.assign({
+    style: style,
+    ref: combinedRef,
+    className: classNames('fr-timepicker fwe-timepicker', {
+      'fwe-timepicker-am-pm': timeFormat === '12'
+    }),
+    onKeyDown: e => handleKeyPress(e),
+    tabIndex: -1
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: "fwe-timepicker-spinners"
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: "fwe-timepicker-spinners-hours"
+      }, {
+        children: [jsx("button", Object.assign({
+          type: "button",
+          "aria-label": "hour up",
+          className: "fwe-btn fwe-btn-link fwe-dark",
+          onClick: () => handleHourUp()
+        }, {
+          children: jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-arrows-expand"
+          }, void 0)
+        }), void 0), jsx("input", {
+          "aria-label": "hours value",
+          className: "fwe-timepicker-hide-spinners",
+          type: "number",
+          min: min,
+          step: 1,
+          value: tmpHours !== null && tmpHours !== void 0 ? tmpHours : (hours < 10 ? '0' : '') + hours,
+          max: hourMax,
+          onInput: handleHourChange,
+          ref: hoursRef
+        }, void 0), jsx("button", Object.assign({
+          type: "button",
+          "aria-label": "hour down",
+          className: "fwe-btn fwe-btn-link fwe-dark",
+          onClick: () => handleHourDown()
+        }, {
+          children: jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-arrows-collapse"
+          }, void 0)
+        }), void 0)]
+      }), void 0), jsxs("div", Object.assign({
+        className: "fwe-timepicker-spinners-minutes"
+      }, {
+        children: [jsx("button", Object.assign({
+          type: "button",
+          "aria-label": "minute up",
+          className: "fwe-btn fwe-btn-link fwe-dark",
+          onClick: () => handleMinuteUp()
+        }, {
+          children: jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-arrows-expand"
+          }, void 0)
+        }), void 0), jsx("input", {
+          "aria-label": "minutes value",
+          className: "fwe-timepicker-hide-spinners",
+          type: "number",
+          min: min,
+          step: 1,
+          value: tmpMinutes !== null && tmpMinutes !== void 0 ? tmpMinutes : (innerDate.getMinutes() < 10 ? '0' : '') + innerDate.getMinutes(),
+          max: minutesSecondsMax,
+          onInput: handleMinuteChange
+        }, void 0), jsx("button", Object.assign({
+          type: "button",
+          "aria-label": "minute down",
+          className: "fwe-btn fwe-btn-link fwe-dark",
+          onClick: () => handleMinuteDown()
+        }, {
+          children: jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-arrows-collapse"
+          }, void 0)
+        }), void 0)]
+      }), void 0), showSeconds && jsxs("div", Object.assign({
+        className: "fwe-timepicker-spinners-seconds"
+      }, {
+        children: [jsx("button", Object.assign({
+          type: "button",
+          "aria-label": "seconds up",
+          className: "fwe-btn fwe-btn-link fwe-dark",
+          onClick: () => handleSecondUp()
+        }, {
+          children: jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-arrows-expand"
+          }, void 0)
+        }), void 0), jsx("input", {
+          "aria-label": "seconds value",
+          className: "fwe-timepicker-hide-spinners",
+          type: "number",
+          min: min,
+          step: 1,
+          value: tmpSeconds !== null && tmpSeconds !== void 0 ? tmpSeconds : (innerDate.getSeconds() < 10 ? '0' : '') + innerDate.getSeconds(),
+          max: minutesSecondsMax,
+          onInput: handleSecondChange
+        }, void 0), jsx("button", Object.assign({
+          type: "button",
+          "aria-label": "minute down",
+          className: "fwe-btn fwe-btn-link fwe-dark",
+          onClick: () => handleSecondDown()
+        }, {
+          children: jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-arrows-collapse"
+          }, void 0)
+        }), void 0)]
+      }), void 0)]
+    }), void 0), timeFormat === '12' && jsx("span", Object.assign({
+      className: "fwe-badge fwe-badge-control"
+    }, {
+      children: innerDate.getHours() >= 12 ? 'PM' : 'AM'
+    }), void 0)]
+  }), void 0);
+});
+
+const TimePicker = /*#__PURE__*/forwardRef((_a, ref) => {
+  var _b, _c, _d;
+
+  var {
+    error,
+    hint,
+    required,
+    disabled,
+    children,
+    value,
+    options,
+    defaultValue,
+    formatDate,
+    onChange
+  } = _a,
+      props = __rest(_a, ["error", "hint", "required", "disabled", "children", "value", "options", "defaultValue", "formatDate", "onChange"]);
+
+  const innerFormatDate = formatDate !== null && formatDate !== void 0 ? formatDate : Intl.DateTimeFormat('default', Object.assign({
+    hour: 'numeric',
+    minute: 'numeric'
+  }, (options === null || options === void 0 ? void 0 : options.showSeconds) && {
+    second: 'numeric'
+  })).format;
+  const timeFormat = (_b = options === null || options === void 0 ? void 0 : options.timeFormat) !== null && _b !== void 0 ? _b : '24';
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const customModifier = useMemo(() => ({
+    name: 'offset',
+    options: {
+      offset: ({
+        placement
+      }) => {
+        if (placement === 'bottom') {
+          return [0, -12];
+        } else {
+          return [0, 0];
+        }
+      }
+    }
+  }), []);
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement, popperElement, {
+    modifiers: [customModifier]
+  });
+  const combinedRef = useForkRef(ref, setReferenceElement);
+  const labelRef = useRef(null);
+  const allRefs = useForkRef(combinedRef, labelRef);
+  const timePickerRef = useRef(null);
+  const combinedTimePickerRef = useForkRef(timePickerRef, setPopperElement);
+  const [open, setOpen] = useState(false);
+  const closeDropdown = useCallback(() => {
+    setOpen(false);
+  }, []);
+  useOnClickOutside(labelRef, closeDropdown, timePickerRef);
+  const controlled = value !== undefined;
+  const initialValue = controlled ? value : defaultValue;
+  const [innerValue, setInnerValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : new Date());
+  useEffect(() => {
+    if (value !== undefined) {
+      setInnerValue(value);
+    }
+  }, [value]);
+
+  function toggle(e) {
+    e.preventDefault();
+
+    if (!disabled) {
+      setOpen(prevOpen => !prevOpen);
+    }
+  }
+
+  function handleDateChange(newDate) {
+    if (!controlled) {
+      setInnerValue(newDate);
+    }
+
+    if (onChange) {
+      onChange(newDate);
+    }
+  }
+
+  function handleClose(newDate) {
+    if (newDate) {
+      handleDateChange(newDate);
+    }
+
+    setOpen(false);
+  }
+
+  const container = ((_c = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument) || document;
+  return jsxs(Fragment, {
+    children: [jsxs("label", Object.assign({
+      ref: allRefs,
+      className: "fr-time-picker fwe-input-text fwe-input-text-icon",
+      onClick: toggle
+    }, props, {
+      children: [jsx("i", {
+        className: classNames('fwe-icon fwe-icon-time-time', {
+          'fwe-color-hero': open,
+          'fwe-color-control-disabled': disabled
+        })
+      }, void 0), jsx("input", {
+        "aria-label": "picked time",
+        type: "text",
+        readOnly: true,
+        required: required,
+        className: classNames({
+          'fwe-border-hero': open
+        }),
+        value: innerFormatDate(innerValue),
+        disabled: disabled
+      }, void 0), jsx("span", Object.assign({
+        className: "fwe-input-text-label"
+      }, {
+        children: children
+      }), void 0), hint && jsx("span", Object.assign({
+        className: "fwe-input-text-info"
+      }, {
+        children: hint
+      }), void 0), error && jsx("span", Object.assign({
+        className: "fwe-input-text-invalid"
+      }, {
+        children: error
+      }), void 0)]
+    }), void 0), open && /*#__PURE__*/ReactDOM.createPortal(jsx(TimePickerDropdown, Object.assign({
+      ref: combinedTimePickerRef,
+      onClose: handleClose,
+      onDateChange: handleDateChange,
+      timeFormat: timeFormat,
+      showSeconds: options === null || options === void 0 ? void 0 : options.showSeconds,
+      date: innerValue,
+      style: Object.assign(Object.assign({}, styles.popper), {
+        minWidth: (_d = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _d === void 0 ? void 0 : _d.scrollWidth
+      })
+    }, attributes.popper), void 0), container.body)]
+  }, void 0);
+});
+
+export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, 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, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextEditor, TextInput, TimePicker, Tooltip, useSnackbar };