@seeqdev/qomponents 0.0.20 → 0.0.22

package/dist/index.esm.js

@@ -30,22 +30,267 @@ const browserName = browserId && browserId.split(' ', 2)[0];
 browserId && parseInt(browserId.split(' ', 2)[1], 10);
 const browserIsFirefox = browserId && browserName === 'Firefox';
 
+const colorClassesThemeLight = {
+    'theme': 'tw-text-sq-color-dark',
+    'white': 'tw-text-white',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': 'tw-text-sq-warning-color',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'tw-text-sq-disabled-gray',
+    'color': '',
+    'info': 'tw-text-sq-link',
+    'text': 'tw-text-sq-text-color',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+const colorClassesThemeDark = {
+    'theme': 'dark:tw-text-sq-color-dark-dark',
+    'white': '',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': '',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'dark:tw-text-sq-dark-disabled-gray',
+    'color': '',
+    'info': 'dark:tw-text-sq-link-dark',
+    'text': 'dark:tw-text-sq-dark-text',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = 0, }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return React__default.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
+    }
+    const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
+    const style = type === 'color' && color ? { color } : {};
+    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
+    const tooltipData = tooltip
+        ? {
+            'data-qtip-text': tooltip,
+            'data-qtip-placement': tooltipPlacement,
+            'data-qtip-is-html': isHtmlTooltip,
+            'data-qtip-testid': tooltipTestId,
+            'data-qtip-delay': tooltipDelay,
+        }
+        : undefined;
+    return (React__default.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
+};
+
+/**
+ * All-in-one Button:
+ *  - use "variant" to achieve the desired style
+ *  - include tooltips and/or icons
+ */
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
+    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
+    const baseClassesByVariant = {
+        'outline': 'tw-border-solid tw-border',
+        'theme': 'disabled:tw-opacity-50',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50',
+        'theme-light': 'disabled:tw-opacity-50',
+        'no-border': '',
+        'warning': 'tw-bg-sq-warning-color',
+    };
+    const textClassesByVariantLightTheme = {
+        'outline': 'tw-text-sq-text-color',
+        'theme': 'tw-text-white',
+        'theme-light': 'tw-text-white',
+        'danger': 'tw-text-white',
+        'no-border': 'tw-text-sq-text-color',
+        'warning': 'tw-text-white',
+    };
+    const textClassesByVariantDarkTheme = {
+        'outline': 'dark:tw-text-sq-dark-text',
+        'theme': 'dark:tw-text-white',
+        'theme-light': 'dark:tw-text-white',
+        'danger': 'dark:tw-text-white',
+        'no-border': 'dark:tw-text-sq-dark-text',
+        'warning': 'dark:tw-text-white',
+    };
+    const classesByVariantLightTheme = {
+        'outline': 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
+            ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
+        'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',
+        'danger': '',
+        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',
+        'no-border': '',
+        'warning': 'tw-bg-sq-warning-color',
+    };
+    const classesByVariantDarkTheme = {
+        'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
+            ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +
+            ' dark:active:tw-border-sq-color-dark',
+        'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',
+        'danger': '',
+        'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',
+        'no-border': '',
+        'warning': '',
+    };
+    const sizeClasses = {
+        sm: 'tw-text-sm',
+        lg: 'tw-text-xl',
+    };
+    const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
+    let tooltipData = undefined;
+    if (tooltip) {
+        tooltipData = {
+            'data-qtip-text': tooltip,
+            'data-qtip-placement': tooltipOptions?.position,
+            'data-qtip-is-html': isHtmlTooltip,
+            'data-qtip-testid': tooltipTestId,
+            'data-qtip-delay': tooltipOptions?.delay ?? 0,
+        };
+    }
+    return (React__default.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
+            stopPropagation && e.stopPropagation();
+            onClick && onClick();
+        }, onMouseDown: (e) => {
+            if (preventBlur) {
+                e.preventDefault();
+            }
+        }, className: appliedClasses },
+        icon && (React__default.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
+        label));
+};
+
+const errorClasses$2 = 'tw-border-sq-danger-color';
+const borderColorClasses$2 = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+const baseClasses$3 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+    ' disabled:tw-pointer-events-none' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
+    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
+const darkTheme$1 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
+const lightTheme$1 = 'tw-text-sq-text-color';
+const sizeClasses = {
+    sm: 'tw-text-sm',
+    lg: 'tw-text-xl',
+};
+/**
+ * Textfield.
+ */
+const TextField = React__default.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, } = props;
+    const internalRef = useRef(null);
+    const [cursor, setCursor] = useState(null);
+    const setAllRefs = (receivedRef) => {
+        if (ref)
+            ref.current = receivedRef;
+        internalRef.current = receivedRef;
+    };
+    useEffect(() => {
+        const input = internalRef.current;
+        if (input && type !== 'number')
+            input.setSelectionRange(cursor, cursor);
+    }, [ref, cursor, value]);
+    const handleChange = (e) => {
+        setCursor(e.target.selectionStart);
+        onChange && onChange(e);
+    };
+    useEffect(() => {
+        /**
+         * we need to change the value only if it's different since the internal state of "input" will change it anyway
+         * this will only be the case when the value has been changed externally via store (undo / redo)
+         */
+        if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
+            // we need to use this method because using the value props directly will switch the input to a "controlled"
+            // component
+            internalRef.current.value = `${value}`;
+        }
+    }, [value]);
+    let borderRadius = 'tw-rounded-sm';
+    if (inputGroup === 'left') {
+        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
+    }
+    else if (inputGroup === 'right') {
+        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
+    }
+    const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${showError ? errorClasses$2 : borderColorClasses$2} `;
+    return (React__default.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step }));
+});
+
+const alignment = 'tw-flex tw-items-center';
+const labelClasses = 'tw-ml-1.5 tw-text-sm';
+const baseClasses$2 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
+    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +
+    '  checked:tw-text-sq-text-color' +
+    ' disabled:tw-text-sq-fairly-dark-gray';
+const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$2}`;
+const radioClasses = `tw-form-radio ${baseClasses$2}`;
+/**
+ * Checkbox and Radio Box Component.
+ */
+const Checkbox = (props) => {
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
+    const assignedId = id ?? 'checkbox_' + Math.random();
+    return (React__default.createElement("span", { className: `${alignment} ${extraClassNames}` },
+        React__default.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
+        React__default.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
+                ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
+                : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
+};
+
+const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' + 'dark:tw-placeholder-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400';
+const errorClasses$1 = 'tw-border-sq-danger-color';
+const borderColorClasses$1 = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+/**
+ * TextArea.
+ */
+const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, showError, }) => {
+    const appliedClasses = `${baseClasses$1} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses$1 : borderColorClasses$1}`;
+    return (React__default.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
+};
+
 const DEFAULT_TOOL_TIP_DELAY = 1000;
 
 /**
- * This component displays a Tooltip for the provided children.
+ * @deprecated
+ * Note: Tooltip has been replaced by QTip - a singleton JS tooltip that behaves well even with overflow settings :)
+ * See @QTip for more info!
+ *
+ * This component displays a Tooltip for the provided children. It is a CSS only tooltip that will not display
+ * correctly if a parent element has an overflow CSS property assigned. Please use QTip to ensure your tooltips
+ * display correctly.
  */
 const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
     const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
     const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
     const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
-    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
   before:tw-border-l-transparent before:tw-border-r-black`;
-    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
    before:tw-border-l-black before:tw-border-r-transparent`;
-    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
   before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
-    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
   before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
     const placements = {
         top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
@@ -55,230 +300,2901 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     };
     return (React__default.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
         children,
-        React__default.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        React__default.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
         tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
 };
 
-/**
- * Icon:
- *  - access to Seeq custom icons by providing the desired icon
- *  - leverage "type" to style your icon
- */
-const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipDelay, tooltipPlacement, number, hasExternalTooltipHandler = false, }) => {
-    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
-        const errorMessage = color === undefined || color === ''
-            ? 'Icon with type="color" must have prop color specified.'
-            : 'Icon with prop color must have type="color".';
-        return React__default.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
-    }
-    const colorClassesThemeLight = {
-        'theme': 'tw-text-sq-color-dark',
-        'white': 'tw-text-white',
-        'dark-gray': 'tw-text-sq-fairly-dark-gray',
-        'warning': 'tw-text-sq-warning-color',
-        'darkish-gray': 'tw-text-sq-darkish-gray',
-        'gray': 'tw-text-sq-disabled-gray',
-        'color': '',
-        'info': 'tw-text-sq-link',
-        'text': 'tw-text-sq-text-color',
-        'inherit': '',
-        'danger': 'tw-text-sq-danger-color',
-        'theme-light': 'tw-text-sq-color-light',
-        'success': 'tw-text-sq-success-color',
-    };
-    const colorClassesThemeDark = {
-        'theme': 'dark:tw-text-sq-color-dark-dark',
-        'white': '',
-        'dark-gray': 'tw-text-sq-fairly-dark-gray',
-        'warning': '',
-        'darkish-gray': 'tw-text-sq-darkish-gray',
-        'gray': 'dark:tw-text-sq-dark-disabled-gray',
-        'color': '',
-        'info': 'dark:tw-text-sq-link-dark',
-        'text': 'dark:tw-text-sq-dark-text',
-        'inherit': '',
-        'danger': 'tw-text-sq-danger-color',
-        'theme-light': 'tw-text-sq-color-light',
-        'success': 'tw-text-sq-success-color',
-    };
-    const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
-    const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
-  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
-    const iconTag = (React__default.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number }));
-    return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (React__default.createElement(Tooltip, { text: tooltip, delay: tooltipDelay, position: tooltipPlacement }, iconTag)) : (iconTag);
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var purifyExports = {};
+var purify = {
+  get exports(){ return purifyExports; },
+  set exports(v){ purifyExports = v; },
+};
+
+/*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
+
+(function (module, exports) {
+	(function (global, factory) {
+	  module.exports = factory() ;
+	})(commonjsGlobal, (function () {
+	  const {
+	    entries,
+	    setPrototypeOf,
+	    isFrozen,
+	    getPrototypeOf,
+	    getOwnPropertyDescriptor
+	  } = Object;
+	  let {
+	    freeze,
+	    seal,
+	    create
+	  } = Object; // eslint-disable-line import/no-mutable-exports
+
+	  let {
+	    apply,
+	    construct
+	  } = typeof Reflect !== 'undefined' && Reflect;
+
+	  if (!apply) {
+	    apply = function apply(fun, thisValue, args) {
+	      return fun.apply(thisValue, args);
+	    };
+	  }
+
+	  if (!freeze) {
+	    freeze = function freeze(x) {
+	      return x;
+	    };
+	  }
+
+	  if (!seal) {
+	    seal = function seal(x) {
+	      return x;
+	    };
+	  }
+
+	  if (!construct) {
+	    construct = function construct(Func, args) {
+	      return new Func(...args);
+	    };
+	  }
+
+	  const arrayForEach = unapply(Array.prototype.forEach);
+	  const arrayPop = unapply(Array.prototype.pop);
+	  const arrayPush = unapply(Array.prototype.push);
+	  const stringToLowerCase = unapply(String.prototype.toLowerCase);
+	  const stringToString = unapply(String.prototype.toString);
+	  const stringMatch = unapply(String.prototype.match);
+	  const stringReplace = unapply(String.prototype.replace);
+	  const stringIndexOf = unapply(String.prototype.indexOf);
+	  const stringTrim = unapply(String.prototype.trim);
+	  const regExpTest = unapply(RegExp.prototype.test);
+	  const typeErrorCreate = unconstruct(TypeError);
+	  function unapply(func) {
+	    return function (thisArg) {
+	      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+	        args[_key - 1] = arguments[_key];
+	      }
+
+	      return apply(func, thisArg, args);
+	    };
+	  }
+	  function unconstruct(func) {
+	    return function () {
+	      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+	        args[_key2] = arguments[_key2];
+	      }
+
+	      return construct(func, args);
+	    };
+	  }
+	  /* Add properties to a lookup table */
+
+	  function addToSet(set, array, transformCaseFunc) {
+	    var _transformCaseFunc;
+
+	    transformCaseFunc = (_transformCaseFunc = transformCaseFunc) !== null && _transformCaseFunc !== void 0 ? _transformCaseFunc : stringToLowerCase;
+
+	    if (setPrototypeOf) {
+	      // Make 'in' and truthy checks like Boolean(set.constructor)
+	      // independent of any properties defined on Object.prototype.
+	      // Prevent prototype setters from intercepting set as a this value.
+	      setPrototypeOf(set, null);
+	    }
+
+	    let l = array.length;
+
+	    while (l--) {
+	      let element = array[l];
+
+	      if (typeof element === 'string') {
+	        const lcElement = transformCaseFunc(element);
+
+	        if (lcElement !== element) {
+	          // Config presets (e.g. tags.js, attrs.js) are immutable.
+	          if (!isFrozen(array)) {
+	            array[l] = lcElement;
+	          }
+
+	          element = lcElement;
+	        }
+	      }
+
+	      set[element] = true;
+	    }
+
+	    return set;
+	  }
+	  /* Shallow clone an object */
+
+	  function clone(object) {
+	    const newObject = create(null);
+
+	    for (const [property, value] of entries(object)) {
+	      newObject[property] = value;
+	    }
+
+	    return newObject;
+	  }
+	  /* This method automatically checks if the prop is function
+	   * or getter and behaves accordingly. */
+
+	  function lookupGetter(object, prop) {
+	    while (object !== null) {
+	      const desc = getOwnPropertyDescriptor(object, prop);
+
+	      if (desc) {
+	        if (desc.get) {
+	          return unapply(desc.get);
+	        }
+
+	        if (typeof desc.value === 'function') {
+	          return unapply(desc.value);
+	        }
+	      }
+
+	      object = getPrototypeOf(object);
+	    }
+
+	    function fallbackValue(element) {
+	      console.warn('fallback value for', element);
+	      return null;
+	    }
+
+	    return fallbackValue;
+	  }
+
+	  const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']); // SVG
+
+	  const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
+	  const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']); // List of SVG elements that are disallowed by default.
+	  // We still need to know them so that we can do namespace
+	  // checks properly in case one wants to add them to
+	  // allow-list.
+
+	  const svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);
+	  const mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']); // Similarly to SVG, we want to know all MathML elements,
+	  // even those that we disallow by default.
+
+	  const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);
+	  const text = freeze(['#text']);
+
+	  const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'xmlns', 'slot']);
+	  const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
+	  const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
+	  const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
+
+	  const MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode
+
+	  const ERB_EXPR = seal(/<%[\w\W]*|[\w\W]*%>/gm);
+	  const TMPLIT_EXPR = seal(/\${[\w\W]*}/gm);
+	  const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]/); // eslint-disable-line no-useless-escape
+
+	  const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape
+
+	  const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape
+	  );
+	  const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script|data):/i);
+	  const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex
+	  );
+	  const DOCTYPE_NAME = seal(/^html$/i);
+
+	  var EXPRESSIONS = /*#__PURE__*/Object.freeze({
+	    __proto__: null,
+	    MUSTACHE_EXPR: MUSTACHE_EXPR,
+	    ERB_EXPR: ERB_EXPR,
+	    TMPLIT_EXPR: TMPLIT_EXPR,
+	    DATA_ATTR: DATA_ATTR,
+	    ARIA_ATTR: ARIA_ATTR,
+	    IS_ALLOWED_URI: IS_ALLOWED_URI,
+	    IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,
+	    ATTR_WHITESPACE: ATTR_WHITESPACE,
+	    DOCTYPE_NAME: DOCTYPE_NAME
+	  });
+
+	  const getGlobal = () => typeof window === 'undefined' ? null : window;
+	  /**
+	   * Creates a no-op policy for internal use only.
+	   * Don't export this function outside this module!
+	   * @param {?TrustedTypePolicyFactory} trustedTypes The policy factory.
+	   * @param {HTMLScriptElement} purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).
+	   * @return {?TrustedTypePolicy} The policy created (or null, if Trusted Types
+	   * are not supported or creating the policy failed).
+	   */
+
+
+	  const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {
+	    if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {
+	      return null;
+	    } // Allow the callers to control the unique policy name
+	    // by adding a data-tt-policy-suffix to the script element with the DOMPurify.
+	    // Policy creation with duplicate names throws in Trusted Types.
+
+
+	    let suffix = null;
+	    const ATTR_NAME = 'data-tt-policy-suffix';
+
+	    if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) {
+	      suffix = purifyHostElement.getAttribute(ATTR_NAME);
+	    }
+
+	    const policyName = 'dompurify' + (suffix ? '#' + suffix : '');
+
+	    try {
+	      return trustedTypes.createPolicy(policyName, {
+	        createHTML(html) {
+	          return html;
+	        },
+
+	        createScriptURL(scriptUrl) {
+	          return scriptUrl;
+	        }
+
+	      });
+	    } catch (_) {
+	      // Policy creation failed (most likely another DOMPurify script has
+	      // already run). Skip creating the policy, as this will only cause errors
+	      // if TT are enforced.
+	      console.warn('TrustedTypes policy ' + policyName + ' could not be created.');
+	      return null;
+	    }
+	  };
+
+	  function createDOMPurify() {
+	    let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
+
+	    const DOMPurify = root => createDOMPurify(root);
+	    /**
+	     * Version label, exposed for easier checks
+	     * if DOMPurify is up to date or not
+	     */
+
+
+	    DOMPurify.version = '3.0.5';
+	    /**
+	     * Array of elements that DOMPurify removed during sanitation.
+	     * Empty if nothing was removed.
+	     */
+
+	    DOMPurify.removed = [];
+
+	    if (!window || !window.document || window.document.nodeType !== 9) {
+	      // Not running in a browser, provide a factory function
+	      // so that you can pass your own Window
+	      DOMPurify.isSupported = false;
+	      return DOMPurify;
+	    }
+
+	    const originalDocument = window.document;
+	    const currentScript = originalDocument.currentScript;
+	    let {
+	      document
+	    } = window;
+	    const {
+	      DocumentFragment,
+	      HTMLTemplateElement,
+	      Node,
+	      Element,
+	      NodeFilter,
+	      NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap,
+	      HTMLFormElement,
+	      DOMParser,
+	      trustedTypes
+	    } = window;
+	    const ElementPrototype = Element.prototype;
+	    const cloneNode = lookupGetter(ElementPrototype, 'cloneNode');
+	    const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');
+	    const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');
+	    const getParentNode = lookupGetter(ElementPrototype, 'parentNode'); // As per issue #47, the web-components registry is inherited by a
+	    // new document created via createHTMLDocument. As per the spec
+	    // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)
+	    // a new empty registry is used when creating a template contents owner
+	    // document, so we use that as our parent document to ensure nothing
+	    // is inherited.
+
+	    if (typeof HTMLTemplateElement === 'function') {
+	      const template = document.createElement('template');
+
+	      if (template.content && template.content.ownerDocument) {
+	        document = template.content.ownerDocument;
+	      }
+	    }
+
+	    let trustedTypesPolicy;
+	    let emptyHTML = '';
+	    const {
+	      implementation,
+	      createNodeIterator,
+	      createDocumentFragment,
+	      getElementsByTagName
+	    } = document;
+	    const {
+	      importNode
+	    } = originalDocument;
+	    let hooks = {};
+	    /**
+	     * Expose whether this browser supports running the full DOMPurify.
+	     */
+
+	    DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined;
+	    const {
+	      MUSTACHE_EXPR,
+	      ERB_EXPR,
+	      TMPLIT_EXPR,
+	      DATA_ATTR,
+	      ARIA_ATTR,
+	      IS_SCRIPT_OR_DATA,
+	      ATTR_WHITESPACE
+	    } = EXPRESSIONS;
+	    let {
+	      IS_ALLOWED_URI: IS_ALLOWED_URI$1
+	    } = EXPRESSIONS;
+	    /**
+	     * We consider the elements and attributes below to be safe. Ideally
+	     * don't add any new ones but feel free to remove unwanted ones.
+	     */
+
+	    /* allowed element names */
+
+	    let ALLOWED_TAGS = null;
+	    const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);
+	    /* Allowed attribute names */
+
+	    let ALLOWED_ATTR = null;
+	    const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);
+	    /*
+	     * Configure how DOMPUrify should handle custom elements and their attributes as well as customized built-in elements.
+	     * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)
+	     * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)
+	     * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.
+	     */
+
+	    let CUSTOM_ELEMENT_HANDLING = Object.seal(Object.create(null, {
+	      tagNameCheck: {
+	        writable: true,
+	        configurable: false,
+	        enumerable: true,
+	        value: null
+	      },
+	      attributeNameCheck: {
+	        writable: true,
+	        configurable: false,
+	        enumerable: true,
+	        value: null
+	      },
+	      allowCustomizedBuiltInElements: {
+	        writable: true,
+	        configurable: false,
+	        enumerable: true,
+	        value: false
+	      }
+	    }));
+	    /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */
+
+	    let FORBID_TAGS = null;
+	    /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */
+
+	    let FORBID_ATTR = null;
+	    /* Decide if ARIA attributes are okay */
+
+	    let ALLOW_ARIA_ATTR = true;
+	    /* Decide if custom data attributes are okay */
+
+	    let ALLOW_DATA_ATTR = true;
+	    /* Decide if unknown protocols are okay */
+
+	    let ALLOW_UNKNOWN_PROTOCOLS = false;
+	    /* Decide if self-closing tags in attributes are allowed.
+	     * Usually removed due to a mXSS issue in jQuery 3.0 */
+
+	    let ALLOW_SELF_CLOSE_IN_ATTR = true;
+	    /* Output should be safe for common template engines.
+	     * This means, DOMPurify removes data attributes, mustaches and ERB
+	     */
+
+	    let SAFE_FOR_TEMPLATES = false;
+	    /* Decide if document with <html>... should be returned */
+
+	    let WHOLE_DOCUMENT = false;
+	    /* Track whether config is already set on this instance of DOMPurify. */
+
+	    let SET_CONFIG = false;
+	    /* Decide if all elements (e.g. style, script) must be children of
+	     * document.body. By default, browsers might move them to document.head */
+
+	    let FORCE_BODY = false;
+	    /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html
+	     * string (or a TrustedHTML object if Trusted Types are supported).
+	     * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead
+	     */
+
+	    let RETURN_DOM = false;
+	    /* Decide if a DOM `DocumentFragment` should be returned, instead of a html
+	     * string  (or a TrustedHTML object if Trusted Types are supported) */
+
+	    let RETURN_DOM_FRAGMENT = false;
+	    /* Try to return a Trusted Type object instead of a string, return a string in
+	     * case Trusted Types are not supported  */
+
+	    let RETURN_TRUSTED_TYPE = false;
+	    /* Output should be free from DOM clobbering attacks?
+	     * This sanitizes markups named with colliding, clobberable built-in DOM APIs.
+	     */
+
+	    let SANITIZE_DOM = true;
+	    /* Achieve full DOM Clobbering protection by isolating the namespace of named
+	     * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules.
+	     *
+	     * HTML/DOM spec rules that enable DOM Clobbering:
+	     *   - Named Access on Window (§7.3.3)
+	     *   - DOM Tree Accessors (§3.1.5)
+	     *   - Form Element Parent-Child Relations (§4.10.3)
+	     *   - Iframe srcdoc / Nested WindowProxies (§4.8.5)
+	     *   - HTMLCollection (§4.2.10.2)
+	     *
+	     * Namespace isolation is implemented by prefixing `id` and `name` attributes
+	     * with a constant string, i.e., `user-content-`
+	     */
+
+	    let SANITIZE_NAMED_PROPS = false;
+	    const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-';
+	    /* Keep element content when removing element? */
+
+	    let KEEP_CONTENT = true;
+	    /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead
+	     * of importing it into a new Document and returning a sanitized copy */
+
+	    let IN_PLACE = false;
+	    /* Allow usage of profiles like html, svg and mathMl */
+
+	    let USE_PROFILES = {};
+	    /* Tags to ignore content of when KEEP_CONTENT is true */
+
+	    let FORBID_CONTENTS = null;
+	    const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);
+	    /* Tags that are safe for data: URIs */
+
+	    let DATA_URI_TAGS = null;
+	    const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);
+	    /* Attributes safe for values like "javascript:" */
+
+	    let URI_SAFE_ATTRIBUTES = null;
+	    const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);
+	    const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+	    const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+	    const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+	    /* Document namespace */
+
+	    let NAMESPACE = HTML_NAMESPACE;
+	    let IS_EMPTY_INPUT = false;
+	    /* Allowed XHTML+XML namespaces */
+
+	    let ALLOWED_NAMESPACES = null;
+	    const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);
+	    /* Parsing of strict XHTML documents */
+
+	    let PARSER_MEDIA_TYPE;
+	    const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];
+	    const DEFAULT_PARSER_MEDIA_TYPE = 'text/html';
+	    let transformCaseFunc;
+	    /* Keep a reference to config to pass to hooks */
+
+	    let CONFIG = null;
+	    /* Ideally, do not touch anything below this line */
+
+	    /* ______________________________________________ */
+
+	    const formElement = document.createElement('form');
+
+	    const isRegexOrFunction = function isRegexOrFunction(testValue) {
+	      return testValue instanceof RegExp || testValue instanceof Function;
+	    };
+	    /**
+	     * _parseConfig
+	     *
+	     * @param  {Object} cfg optional config literal
+	     */
+	    // eslint-disable-next-line complexity
+
+
+	    const _parseConfig = function _parseConfig(cfg) {
+	      if (CONFIG && CONFIG === cfg) {
+	        return;
+	      }
+	      /* Shield configuration object from tampering */
+
+
+	      if (!cfg || typeof cfg !== 'object') {
+	        cfg = {};
+	      }
+	      /* Shield configuration object from prototype pollution */
+
+
+	      cfg = clone(cfg);
+	      PARSER_MEDIA_TYPE = // eslint-disable-next-line unicorn/prefer-includes
+	      SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? PARSER_MEDIA_TYPE = DEFAULT_PARSER_MEDIA_TYPE : PARSER_MEDIA_TYPE = cfg.PARSER_MEDIA_TYPE; // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.
+
+	      transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase;
+	      /* Set configuration parameters */
+
+	      ALLOWED_TAGS = 'ALLOWED_TAGS' in cfg ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;
+	      ALLOWED_ATTR = 'ALLOWED_ATTR' in cfg ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;
+	      ALLOWED_NAMESPACES = 'ALLOWED_NAMESPACES' in cfg ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;
+	      URI_SAFE_ATTRIBUTES = 'ADD_URI_SAFE_ATTR' in cfg ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), // eslint-disable-line indent
+	      cfg.ADD_URI_SAFE_ATTR, // eslint-disable-line indent
+	      transformCaseFunc // eslint-disable-line indent
+	      ) // eslint-disable-line indent
+	      : DEFAULT_URI_SAFE_ATTRIBUTES;
+	      DATA_URI_TAGS = 'ADD_DATA_URI_TAGS' in cfg ? addToSet(clone(DEFAULT_DATA_URI_TAGS), // eslint-disable-line indent
+	      cfg.ADD_DATA_URI_TAGS, // eslint-disable-line indent
+	      transformCaseFunc // eslint-disable-line indent
+	      ) // eslint-disable-line indent
+	      : DEFAULT_DATA_URI_TAGS;
+	      FORBID_CONTENTS = 'FORBID_CONTENTS' in cfg ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;
+	      FORBID_TAGS = 'FORBID_TAGS' in cfg ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {};
+	      FORBID_ATTR = 'FORBID_ATTR' in cfg ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {};
+	      USE_PROFILES = 'USE_PROFILES' in cfg ? cfg.USE_PROFILES : false;
+	      ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true
+
+	      ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true
+
+	      ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false
+
+	      ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true
+
+	      SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false
+
+	      WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false
+
+	      RETURN_DOM = cfg.RETURN_DOM || false; // Default false
+
+	      RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false
+
+	      RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false
+
+	      FORCE_BODY = cfg.FORCE_BODY || false; // Default false
+
+	      SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true
+
+	      SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false
+
+	      KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true
+
+	      IN_PLACE = cfg.IN_PLACE || false; // Default false
+
+	      IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI;
+	      NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;
+	      CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};
+
+	      if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {
+	        CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;
+	      }
+
+	      if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {
+	        CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;
+	      }
+
+	      if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {
+	        CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;
+	      }
+
+	      if (SAFE_FOR_TEMPLATES) {
+	        ALLOW_DATA_ATTR = false;
+	      }
+
+	      if (RETURN_DOM_FRAGMENT) {
+	        RETURN_DOM = true;
+	      }
+	      /* Parse profile info */
+
+
+	      if (USE_PROFILES) {
+	        ALLOWED_TAGS = addToSet({}, [...text]);
+	        ALLOWED_ATTR = [];
+
+	        if (USE_PROFILES.html === true) {
+	          addToSet(ALLOWED_TAGS, html$1);
+	          addToSet(ALLOWED_ATTR, html);
+	        }
+
+	        if (USE_PROFILES.svg === true) {
+	          addToSet(ALLOWED_TAGS, svg$1);
+	          addToSet(ALLOWED_ATTR, svg);
+	          addToSet(ALLOWED_ATTR, xml);
+	        }
+
+	        if (USE_PROFILES.svgFilters === true) {
+	          addToSet(ALLOWED_TAGS, svgFilters);
+	          addToSet(ALLOWED_ATTR, svg);
+	          addToSet(ALLOWED_ATTR, xml);
+	        }
+
+	        if (USE_PROFILES.mathMl === true) {
+	          addToSet(ALLOWED_TAGS, mathMl$1);
+	          addToSet(ALLOWED_ATTR, mathMl);
+	          addToSet(ALLOWED_ATTR, xml);
+	        }
+	      }
+	      /* Merge configuration parameters */
+
+
+	      if (cfg.ADD_TAGS) {
+	        if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
+	          ALLOWED_TAGS = clone(ALLOWED_TAGS);
+	        }
+
+	        addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
+	      }
+
+	      if (cfg.ADD_ATTR) {
+	        if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
+	          ALLOWED_ATTR = clone(ALLOWED_ATTR);
+	        }
+
+	        addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);
+	      }
+
+	      if (cfg.ADD_URI_SAFE_ATTR) {
+	        addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);
+	      }
+
+	      if (cfg.FORBID_CONTENTS) {
+	        if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {
+	          FORBID_CONTENTS = clone(FORBID_CONTENTS);
+	        }
+
+	        addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);
+	      }
+	      /* Add #text in case KEEP_CONTENT is set to true */
+
+
+	      if (KEEP_CONTENT) {
+	        ALLOWED_TAGS['#text'] = true;
+	      }
+	      /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */
+
+
+	      if (WHOLE_DOCUMENT) {
+	        addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);
+	      }
+	      /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */
+
+
+	      if (ALLOWED_TAGS.table) {
+	        addToSet(ALLOWED_TAGS, ['tbody']);
+	        delete FORBID_TAGS.tbody;
+	      }
+
+	      if (cfg.TRUSTED_TYPES_POLICY) {
+	        if (typeof cfg.TRUSTED_TYPES_POLICY.createHTML !== 'function') {
+	          throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');
+	        }
+
+	        if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') {
+	          throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');
+	        } // Overwrite existing TrustedTypes policy.
+
+
+	        trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY; // Sign local variables required by `sanitize`.
+
+	        emptyHTML = trustedTypesPolicy.createHTML('');
+	      } else {
+	        // Uninitialized policy, attempt to initialize the internal dompurify policy.
+	        if (trustedTypesPolicy === undefined) {
+	          trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript);
+	        } // If creating the internal policy succeeded sign internal variables.
+
+
+	        if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {
+	          emptyHTML = trustedTypesPolicy.createHTML('');
+	        }
+	      } // Prevent further manipulation of configuration.
+	      // Not available in IE8, Safari 5, etc.
+
+
+	      if (freeze) {
+	        freeze(cfg);
+	      }
+
+	      CONFIG = cfg;
+	    };
+
+	    const MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);
+	    const HTML_INTEGRATION_POINTS = addToSet({}, ['foreignobject', 'desc', 'title', 'annotation-xml']); // Certain elements are allowed in both SVG and HTML
+	    // namespace. We need to specify them explicitly
+	    // so that they don't get erroneously deleted from
+	    // HTML namespace.
+
+	    const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);
+	    /* Keep track of all possible SVG and MathML tags
+	     * so that we can perform the namespace checks
+	     * correctly. */
+
+	    const ALL_SVG_TAGS = addToSet({}, svg$1);
+	    addToSet(ALL_SVG_TAGS, svgFilters);
+	    addToSet(ALL_SVG_TAGS, svgDisallowed);
+	    const ALL_MATHML_TAGS = addToSet({}, mathMl$1);
+	    addToSet(ALL_MATHML_TAGS, mathMlDisallowed);
+	    /**
+	     *
+	     *
+	     * @param  {Element} element a DOM element whose namespace is being checked
+	     * @returns {boolean} Return false if the element has a
+	     *  namespace that a spec-compliant parser would never
+	     *  return. Return true otherwise.
+	     */
+
+	    const _checkValidNamespace = function _checkValidNamespace(element) {
+	      let parent = getParentNode(element); // In JSDOM, if we're inside shadow DOM, then parentNode
+	      // can be null. We just simulate parent in this case.
+
+	      if (!parent || !parent.tagName) {
+	        parent = {
+	          namespaceURI: NAMESPACE,
+	          tagName: 'template'
+	        };
+	      }
+
+	      const tagName = stringToLowerCase(element.tagName);
+	      const parentTagName = stringToLowerCase(parent.tagName);
+
+	      if (!ALLOWED_NAMESPACES[element.namespaceURI]) {
+	        return false;
+	      }
+
+	      if (element.namespaceURI === SVG_NAMESPACE) {
+	        // The only way to switch from HTML namespace to SVG
+	        // is via <svg>. If it happens via any other tag, then
+	        // it should be killed.
+	        if (parent.namespaceURI === HTML_NAMESPACE) {
+	          return tagName === 'svg';
+	        } // The only way to switch from MathML to SVG is via`
+	        // svg if parent is either <annotation-xml> or MathML
+	        // text integration points.
+
+
+	        if (parent.namespaceURI === MATHML_NAMESPACE) {
+	          return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);
+	        } // We only allow elements that are defined in SVG
+	        // spec. All others are disallowed in SVG namespace.
+
+
+	        return Boolean(ALL_SVG_TAGS[tagName]);
+	      }
+
+	      if (element.namespaceURI === MATHML_NAMESPACE) {
+	        // The only way to switch from HTML namespace to MathML
+	        // is via <math>. If it happens via any other tag, then
+	        // it should be killed.
+	        if (parent.namespaceURI === HTML_NAMESPACE) {
+	          return tagName === 'math';
+	        } // The only way to switch from SVG to MathML is via
+	        // <math> and HTML integration points
+
+
+	        if (parent.namespaceURI === SVG_NAMESPACE) {
+	          return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];
+	        } // We only allow elements that are defined in MathML
+	        // spec. All others are disallowed in MathML namespace.
+
+
+	        return Boolean(ALL_MATHML_TAGS[tagName]);
+	      }
+
+	      if (element.namespaceURI === HTML_NAMESPACE) {
+	        // The only way to switch from SVG to HTML is via
+	        // HTML integration points, and from MathML to HTML
+	        // is via MathML text integration points
+	        if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {
+	          return false;
+	        }
+
+	        if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {
+	          return false;
+	        } // We disallow tags that are specific for MathML
+	        // or SVG and should never appear in HTML namespace
+
+
+	        return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);
+	      } // For XHTML and XML documents that support custom namespaces
+
+
+	      if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) {
+	        return true;
+	      } // The code should never reach this place (this means
+	      // that the element somehow got namespace that is not
+	      // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES).
+	      // Return false just in case.
+
+
+	      return false;
+	    };
+	    /**
+	     * _forceRemove
+	     *
+	     * @param  {Node} node a DOM node
+	     */
+
+
+	    const _forceRemove = function _forceRemove(node) {
+	      arrayPush(DOMPurify.removed, {
+	        element: node
+	      });
+
+	      try {
+	        // eslint-disable-next-line unicorn/prefer-dom-node-remove
+	        node.parentNode.removeChild(node);
+	      } catch (_) {
+	        node.remove();
+	      }
+	    };
+	    /**
+	     * _removeAttribute
+	     *
+	     * @param  {String} name an Attribute name
+	     * @param  {Node} node a DOM node
+	     */
+
+
+	    const _removeAttribute = function _removeAttribute(name, node) {
+	      try {
+	        arrayPush(DOMPurify.removed, {
+	          attribute: node.getAttributeNode(name),
+	          from: node
+	        });
+	      } catch (_) {
+	        arrayPush(DOMPurify.removed, {
+	          attribute: null,
+	          from: node
+	        });
+	      }
+
+	      node.removeAttribute(name); // We void attribute values for unremovable "is"" attributes
+
+	      if (name === 'is' && !ALLOWED_ATTR[name]) {
+	        if (RETURN_DOM || RETURN_DOM_FRAGMENT) {
+	          try {
+	            _forceRemove(node);
+	          } catch (_) {}
+	        } else {
+	          try {
+	            node.setAttribute(name, '');
+	          } catch (_) {}
+	        }
+	      }
+	    };
+	    /**
+	     * _initDocument
+	     *
+	     * @param  {String} dirty a string of dirty markup
+	     * @return {Document} a DOM, filled with the dirty markup
+	     */
+
+
+	    const _initDocument = function _initDocument(dirty) {
+	      /* Create a HTML document */
+	      let doc;
+	      let leadingWhitespace;
+
+	      if (FORCE_BODY) {
+	        dirty = '<remove></remove>' + dirty;
+	      } else {
+	        /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */
+	        const matches = stringMatch(dirty, /^[\r\n\t ]+/);
+	        leadingWhitespace = matches && matches[0];
+	      }
+
+	      if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) {
+	        // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)
+	        dirty = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + dirty + '</body></html>';
+	      }
+
+	      const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;
+	      /*
+	       * Use the DOMParser API by default, fallback later if needs be
+	       * DOMParser not work for svg when has multiple root element.
+	       */
+
+	      if (NAMESPACE === HTML_NAMESPACE) {
+	        try {
+	          doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);
+	        } catch (_) {}
+	      }
+	      /* Use createHTMLDocument in case DOMParser is not available */
+
+
+	      if (!doc || !doc.documentElement) {
+	        doc = implementation.createDocument(NAMESPACE, 'template', null);
+
+	        try {
+	          doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload;
+	        } catch (_) {// Syntax error if dirtyPayload is invalid xml
+	        }
+	      }
+
+	      const body = doc.body || doc.documentElement;
+
+	      if (dirty && leadingWhitespace) {
+	        body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);
+	      }
+	      /* Work on whole document or just its body */
+
+
+	      if (NAMESPACE === HTML_NAMESPACE) {
+	        return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];
+	      }
+
+	      return WHOLE_DOCUMENT ? doc.documentElement : body;
+	    };
+	    /**
+	     * _createIterator
+	     *
+	     * @param  {Document} root document/fragment to create iterator for
+	     * @return {Iterator} iterator instance
+	     */
+
+
+	    const _createIterator = function _createIterator(root) {
+	      return createNodeIterator.call(root.ownerDocument || root, root, // eslint-disable-next-line no-bitwise
+	      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT, null, false);
+	    };
+	    /**
+	     * _isClobbered
+	     *
+	     * @param  {Node} elm element to check for clobbering attacks
+	     * @return {Boolean} true if clobbered, false if safe
+	     */
+
+
+	    const _isClobbered = function _isClobbered(elm) {
+	      return elm instanceof HTMLFormElement && (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function' || typeof elm.hasChildNodes !== 'function');
+	    };
+	    /**
+	     * _isNode
+	     *
+	     * @param  {Node} obj object to check whether it's a DOM node
+	     * @return {Boolean} true is object is a DOM node
+	     */
+
+
+	    const _isNode = function _isNode(object) {
+	      return typeof Node === 'object' ? object instanceof Node : object && typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string';
+	    };
+	    /**
+	     * _executeHook
+	     * Execute user configurable hooks
+	     *
+	     * @param  {String} entryPoint  Name of the hook's entry point
+	     * @param  {Node} currentNode node to work on with the hook
+	     * @param  {Object} data additional hook parameters
+	     */
+
+
+	    const _executeHook = function _executeHook(entryPoint, currentNode, data) {
+	      if (!hooks[entryPoint]) {
+	        return;
+	      }
+
+	      arrayForEach(hooks[entryPoint], hook => {
+	        hook.call(DOMPurify, currentNode, data, CONFIG);
+	      });
+	    };
+	    /**
+	     * _sanitizeElements
+	     *
+	     * @protect nodeName
+	     * @protect textContent
+	     * @protect removeChild
+	     *
+	     * @param   {Node} currentNode to check for permission to exist
+	     * @return  {Boolean} true if node was killed, false if left alive
+	     */
+
+
+	    const _sanitizeElements = function _sanitizeElements(currentNode) {
+	      let content;
+	      /* Execute a hook if present */
+
+	      _executeHook('beforeSanitizeElements', currentNode, null);
+	      /* Check if element is clobbered or can clobber */
+
+
+	      if (_isClobbered(currentNode)) {
+	        _forceRemove(currentNode);
+
+	        return true;
+	      }
+	      /* Now let's check the element's type and name */
+
+
+	      const tagName = transformCaseFunc(currentNode.nodeName);
+	      /* Execute a hook if present */
+
+	      _executeHook('uponSanitizeElement', currentNode, {
+	        tagName,
+	        allowedTags: ALLOWED_TAGS
+	      });
+	      /* Detect mXSS attempts abusing namespace confusion */
+
+
+	      if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && (!_isNode(currentNode.content) || !_isNode(currentNode.content.firstElementChild)) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) {
+	        _forceRemove(currentNode);
+
+	        return true;
+	      }
+	      /* Remove element if anything forbids its presence */
+
+
+	      if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
+	        /* Check if we have a custom element to handle */
+	        if (!FORBID_TAGS[tagName] && _basicCustomElementTest(tagName)) {
+	          if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) return false;
+	          if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName)) return false;
+	        }
+	        /* Keep content except for bad-listed elements */
+
+
+	        if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {
+	          const parentNode = getParentNode(currentNode) || currentNode.parentNode;
+	          const childNodes = getChildNodes(currentNode) || currentNode.childNodes;
+
+	          if (childNodes && parentNode) {
+	            const childCount = childNodes.length;
+
+	            for (let i = childCount - 1; i >= 0; --i) {
+	              parentNode.insertBefore(cloneNode(childNodes[i], true), getNextSibling(currentNode));
+	            }
+	          }
+	        }
+
+	        _forceRemove(currentNode);
+
+	        return true;
+	      }
+	      /* Check whether element has a valid namespace */
+
+
+	      if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {
+	        _forceRemove(currentNode);
+
+	        return true;
+	      }
+	      /* Make sure that older browsers don't get fallback-tag mXSS */
+
+
+	      if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\/no(script|embed|frames)/i, currentNode.innerHTML)) {
+	        _forceRemove(currentNode);
+
+	        return true;
+	      }
+	      /* Sanitize element content to be template-safe */
+
+
+	      if (SAFE_FOR_TEMPLATES && currentNode.nodeType === 3) {
+	        /* Get the element's text content */
+	        content = currentNode.textContent;
+	        content = stringReplace(content, MUSTACHE_EXPR, ' ');
+	        content = stringReplace(content, ERB_EXPR, ' ');
+	        content = stringReplace(content, TMPLIT_EXPR, ' ');
+
+	        if (currentNode.textContent !== content) {
+	          arrayPush(DOMPurify.removed, {
+	            element: currentNode.cloneNode()
+	          });
+	          currentNode.textContent = content;
+	        }
+	      }
+	      /* Execute a hook if present */
+
+
+	      _executeHook('afterSanitizeElements', currentNode, null);
+
+	      return false;
+	    };
+	    /**
+	     * _isValidAttribute
+	     *
+	     * @param  {string} lcTag Lowercase tag name of containing element.
+	     * @param  {string} lcName Lowercase attribute name.
+	     * @param  {string} value Attribute value.
+	     * @return {Boolean} Returns true if `value` is valid, otherwise false.
+	     */
+	    // eslint-disable-next-line complexity
+
+
+	    const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {
+	      /* Make sure attribute cannot clobber */
+	      if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {
+	        return false;
+	      }
+	      /* Allow valid data-* attributes: At least one character after "-"
+	          (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)
+	          XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)
+	          We don't need to check the value; it's always URI safe. */
+
+
+	      if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
+	        if ( // First condition does a very basic check if a) it's basically a valid custom element tagname AND
+	        // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
+	        // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
+	        _basicCustomElementTest(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) || // Alternative, second condition checks if it's an `is`-attribute, AND
+	        // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
+	        lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {
+	          return false;
+	        }
+	        /* Check value is safe. First, is attr inert? If so, is safe */
+
+	      } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) {
+	        return false;
+	      } else ;
+
+	      return true;
+	    };
+	    /**
+	     * _basicCustomElementCheck
+	     * checks if at least one dash is included in tagName, and it's not the first char
+	     * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name
+	     * @param {string} tagName name of the tag of the node to sanitize
+	     */
+
+
+	    const _basicCustomElementTest = function _basicCustomElementTest(tagName) {
+	      return tagName.indexOf('-') > 0;
+	    };
+	    /**
+	     * _sanitizeAttributes
+	     *
+	     * @protect attributes
+	     * @protect nodeName
+	     * @protect removeAttribute
+	     * @protect setAttribute
+	     *
+	     * @param  {Node} currentNode to sanitize
+	     */
+
+
+	    const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {
+	      let attr;
+	      let value;
+	      let lcName;
+	      let l;
+	      /* Execute a hook if present */
+
+	      _executeHook('beforeSanitizeAttributes', currentNode, null);
+
+	      const {
+	        attributes
+	      } = currentNode;
+	      /* Check if we have attributes; if not we might have a text node */
+
+	      if (!attributes) {
+	        return;
+	      }
+
+	      const hookEvent = {
+	        attrName: '',
+	        attrValue: '',
+	        keepAttr: true,
+	        allowedAttributes: ALLOWED_ATTR
+	      };
+	      l = attributes.length;
+	      /* Go backwards over all attributes; safely remove bad ones */
+
+	      while (l--) {
+	        attr = attributes[l];
+	        const {
+	          name,
+	          namespaceURI
+	        } = attr;
+	        value = name === 'value' ? attr.value : stringTrim(attr.value);
+	        lcName = transformCaseFunc(name);
+	        /* Execute a hook if present */
+
+	        hookEvent.attrName = lcName;
+	        hookEvent.attrValue = value;
+	        hookEvent.keepAttr = true;
+	        hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set
+
+	        _executeHook('uponSanitizeAttribute', currentNode, hookEvent);
+
+	        value = hookEvent.attrValue;
+	        /* Did the hooks approve of the attribute? */
+
+	        if (hookEvent.forceKeepAttr) {
+	          continue;
+	        }
+	        /* Remove attribute */
+
+
+	        _removeAttribute(name, currentNode);
+	        /* Did the hooks approve of the attribute? */
+
+
+	        if (!hookEvent.keepAttr) {
+	          continue;
+	        }
+	        /* Work around a security issue in jQuery 3.0 */
+
+
+	        if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\/>/i, value)) {
+	          _removeAttribute(name, currentNode);
+
+	          continue;
+	        }
+	        /* Sanitize attribute content to be template-safe */
+
+
+	        if (SAFE_FOR_TEMPLATES) {
+	          value = stringReplace(value, MUSTACHE_EXPR, ' ');
+	          value = stringReplace(value, ERB_EXPR, ' ');
+	          value = stringReplace(value, TMPLIT_EXPR, ' ');
+	        }
+	        /* Is `value` valid for this attribute? */
+
+
+	        const lcTag = transformCaseFunc(currentNode.nodeName);
+
+	        if (!_isValidAttribute(lcTag, lcName, value)) {
+	          continue;
+	        }
+	        /* Full DOM Clobbering protection via namespace isolation,
+	         * Prefix id and name attributes with `user-content-`
+	         */
+
+
+	        if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {
+	          // Remove the attribute with this value
+	          _removeAttribute(name, currentNode); // Prefix the value and later re-create the attribute with the sanitized value
+
+
+	          value = SANITIZE_NAMED_PROPS_PREFIX + value;
+	        }
+	        /* Handle attributes that require Trusted Types */
+
+
+	        if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {
+	          if (namespaceURI) ; else {
+	            switch (trustedTypes.getAttributeType(lcTag, lcName)) {
+	              case 'TrustedHTML':
+	                {
+	                  value = trustedTypesPolicy.createHTML(value);
+	                  break;
+	                }
+
+	              case 'TrustedScriptURL':
+	                {
+	                  value = trustedTypesPolicy.createScriptURL(value);
+	                  break;
+	                }
+	            }
+	          }
+	        }
+	        /* Handle invalid data-* attribute set by try-catching it */
+
+
+	        try {
+	          if (namespaceURI) {
+	            currentNode.setAttributeNS(namespaceURI, name, value);
+	          } else {
+	            /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". */
+	            currentNode.setAttribute(name, value);
+	          }
+
+	          arrayPop(DOMPurify.removed);
+	        } catch (_) {}
+	      }
+	      /* Execute a hook if present */
+
+
+	      _executeHook('afterSanitizeAttributes', currentNode, null);
+	    };
+	    /**
+	     * _sanitizeShadowDOM
+	     *
+	     * @param  {DocumentFragment} fragment to iterate over recursively
+	     */
+
+
+	    const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {
+	      let shadowNode;
+
+	      const shadowIterator = _createIterator(fragment);
+	      /* Execute a hook if present */
+
+
+	      _executeHook('beforeSanitizeShadowDOM', fragment, null);
+
+	      while (shadowNode = shadowIterator.nextNode()) {
+	        /* Execute a hook if present */
+	        _executeHook('uponSanitizeShadowNode', shadowNode, null);
+	        /* Sanitize tags and elements */
+
+
+	        if (_sanitizeElements(shadowNode)) {
+	          continue;
+	        }
+	        /* Deep shadow DOM detected */
+
+
+	        if (shadowNode.content instanceof DocumentFragment) {
+	          _sanitizeShadowDOM(shadowNode.content);
+	        }
+	        /* Check attributes, sanitize if necessary */
+
+
+	        _sanitizeAttributes(shadowNode);
+	      }
+	      /* Execute a hook if present */
+
+
+	      _executeHook('afterSanitizeShadowDOM', fragment, null);
+	    };
+	    /**
+	     * Sanitize
+	     * Public method providing core sanitation functionality
+	     *
+	     * @param {String|Node} dirty string or DOM node
+	     * @param {Object} configuration object
+	     */
+	    // eslint-disable-next-line complexity
+
+
+	    DOMPurify.sanitize = function (dirty) {
+	      let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	      let body;
+	      let importedNode;
+	      let currentNode;
+	      let returnNode;
+	      /* Make sure we have a string to sanitize.
+	        DO NOT return early, as this will return the wrong type if
+	        the user has requested a DOM object rather than a string */
+
+	      IS_EMPTY_INPUT = !dirty;
+
+	      if (IS_EMPTY_INPUT) {
+	        dirty = '<!-->';
+	      }
+	      /* Stringify, in case dirty is an object */
+
+
+	      if (typeof dirty !== 'string' && !_isNode(dirty)) {
+	        if (typeof dirty.toString === 'function') {
+	          dirty = dirty.toString();
+
+	          if (typeof dirty !== 'string') {
+	            throw typeErrorCreate('dirty is not a string, aborting');
+	          }
+	        } else {
+	          throw typeErrorCreate('toString is not a function');
+	        }
+	      }
+	      /* Return dirty HTML if DOMPurify cannot run */
+
+
+	      if (!DOMPurify.isSupported) {
+	        return dirty;
+	      }
+	      /* Assign config vars */
+
+
+	      if (!SET_CONFIG) {
+	        _parseConfig(cfg);
+	      }
+	      /* Clean up removed elements */
+
+
+	      DOMPurify.removed = [];
+	      /* Check if dirty is correctly typed for IN_PLACE */
+
+	      if (typeof dirty === 'string') {
+	        IN_PLACE = false;
+	      }
+
+	      if (IN_PLACE) {
+	        /* Do some early pre-sanitization to avoid unsafe root nodes */
+	        if (dirty.nodeName) {
+	          const tagName = transformCaseFunc(dirty.nodeName);
+
+	          if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
+	            throw typeErrorCreate('root node is forbidden and cannot be sanitized in-place');
+	          }
+	        }
+	      } else if (dirty instanceof Node) {
+	        /* If dirty is a DOM element, append to an empty document to avoid
+	           elements being stripped by the parser */
+	        body = _initDocument('<!---->');
+	        importedNode = body.ownerDocument.importNode(dirty, true);
+
+	        if (importedNode.nodeType === 1 && importedNode.nodeName === 'BODY') {
+	          /* Node is already a body, use as is */
+	          body = importedNode;
+	        } else if (importedNode.nodeName === 'HTML') {
+	          body = importedNode;
+	        } else {
+	          // eslint-disable-next-line unicorn/prefer-dom-node-append
+	          body.appendChild(importedNode);
+	        }
+	      } else {
+	        /* Exit directly if we have nothing to do */
+	        if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT && // eslint-disable-next-line unicorn/prefer-includes
+	        dirty.indexOf('<') === -1) {
+	          return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;
+	        }
+	        /* Initialize the document to work on */
+
+
+	        body = _initDocument(dirty);
+	        /* Check we have a DOM node from the data */
+
+	        if (!body) {
+	          return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';
+	        }
+	      }
+	      /* Remove first element node (ours) if FORCE_BODY is set */
+
+
+	      if (body && FORCE_BODY) {
+	        _forceRemove(body.firstChild);
+	      }
+	      /* Get node iterator */
+
+
+	      const nodeIterator = _createIterator(IN_PLACE ? dirty : body);
+	      /* Now start iterating over the created document */
+
+
+	      while (currentNode = nodeIterator.nextNode()) {
+	        /* Sanitize tags and elements */
+	        if (_sanitizeElements(currentNode)) {
+	          continue;
+	        }
+	        /* Shadow DOM detected, sanitize it */
+
+
+	        if (currentNode.content instanceof DocumentFragment) {
+	          _sanitizeShadowDOM(currentNode.content);
+	        }
+	        /* Check attributes, sanitize if necessary */
+
+
+	        _sanitizeAttributes(currentNode);
+	      }
+	      /* If we sanitized `dirty` in-place, return it. */
+
+
+	      if (IN_PLACE) {
+	        return dirty;
+	      }
+	      /* Return sanitized string or DOM */
+
+
+	      if (RETURN_DOM) {
+	        if (RETURN_DOM_FRAGMENT) {
+	          returnNode = createDocumentFragment.call(body.ownerDocument);
+
+	          while (body.firstChild) {
+	            // eslint-disable-next-line unicorn/prefer-dom-node-append
+	            returnNode.appendChild(body.firstChild);
+	          }
+	        } else {
+	          returnNode = body;
+	        }
+
+	        if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {
+	          /*
+	            AdoptNode() is not used because internal state is not reset
+	            (e.g. the past names map of a HTMLFormElement), this is safe
+	            in theory but we would rather not risk another attack vector.
+	            The state that is cloned by importNode() is explicitly defined
+	            by the specs.
+	          */
+	          returnNode = importNode.call(originalDocument, returnNode, true);
+	        }
+
+	        return returnNode;
+	      }
+
+	      let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;
+	      /* Serialize doctype if allowed */
+
+	      if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {
+	        serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\n' + serializedHTML;
+	      }
+	      /* Sanitize final string template-safe */
+
+
+	      if (SAFE_FOR_TEMPLATES) {
+	        serializedHTML = stringReplace(serializedHTML, MUSTACHE_EXPR, ' ');
+	        serializedHTML = stringReplace(serializedHTML, ERB_EXPR, ' ');
+	        serializedHTML = stringReplace(serializedHTML, TMPLIT_EXPR, ' ');
+	      }
+
+	      return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;
+	    };
+	    /**
+	     * Public method to set the configuration once
+	     * setConfig
+	     *
+	     * @param {Object} cfg configuration object
+	     */
+
+
+	    DOMPurify.setConfig = function (cfg) {
+	      _parseConfig(cfg);
+
+	      SET_CONFIG = true;
+	    };
+	    /**
+	     * Public method to remove the configuration
+	     * clearConfig
+	     *
+	     */
+
+
+	    DOMPurify.clearConfig = function () {
+	      CONFIG = null;
+	      SET_CONFIG = false;
+	    };
+	    /**
+	     * Public method to check if an attribute value is valid.
+	     * Uses last set config, if any. Otherwise, uses config defaults.
+	     * isValidAttribute
+	     *
+	     * @param  {string} tag Tag name of containing element.
+	     * @param  {string} attr Attribute name.
+	     * @param  {string} value Attribute value.
+	     * @return {Boolean} Returns true if `value` is valid. Otherwise, returns false.
+	     */
+
+
+	    DOMPurify.isValidAttribute = function (tag, attr, value) {
+	      /* Initialize shared config vars if necessary. */
+	      if (!CONFIG) {
+	        _parseConfig({});
+	      }
+
+	      const lcTag = transformCaseFunc(tag);
+	      const lcName = transformCaseFunc(attr);
+	      return _isValidAttribute(lcTag, lcName, value);
+	    };
+	    /**
+	     * AddHook
+	     * Public method to add DOMPurify hooks
+	     *
+	     * @param {String} entryPoint entry point for the hook to add
+	     * @param {Function} hookFunction function to execute
+	     */
+
+
+	    DOMPurify.addHook = function (entryPoint, hookFunction) {
+	      if (typeof hookFunction !== 'function') {
+	        return;
+	      }
+
+	      hooks[entryPoint] = hooks[entryPoint] || [];
+	      arrayPush(hooks[entryPoint], hookFunction);
+	    };
+	    /**
+	     * RemoveHook
+	     * Public method to remove a DOMPurify hook at a given entryPoint
+	     * (pops it from the stack of hooks if more are present)
+	     *
+	     * @param {String} entryPoint entry point for the hook to remove
+	     * @return {Function} removed(popped) hook
+	     */
+
+
+	    DOMPurify.removeHook = function (entryPoint) {
+	      if (hooks[entryPoint]) {
+	        return arrayPop(hooks[entryPoint]);
+	      }
+	    };
+	    /**
+	     * RemoveHooks
+	     * Public method to remove all DOMPurify hooks at a given entryPoint
+	     *
+	     * @param  {String} entryPoint entry point for the hooks to remove
+	     */
+
+
+	    DOMPurify.removeHooks = function (entryPoint) {
+	      if (hooks[entryPoint]) {
+	        hooks[entryPoint] = [];
+	      }
+	    };
+	    /**
+	     * RemoveAllHooks
+	     * Public method to remove all DOMPurify hooks
+	     *
+	     */
+
+
+	    DOMPurify.removeAllHooks = function () {
+	      hooks = {};
+	    };
+
+	    return DOMPurify;
+	  }
+
+	  var purify = createDOMPurify();
+
+	  return purify;
+
+	}));
+	
+} (purify));
+
+var DOMPurify = purifyExports;
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain positioning strategy.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
+        ...data
+      }
+    };
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+      continue;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. This stops `shift()` from taking action, but can
+    // be worked around by calling it again after the `arrow()` if desired.
+    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? min$1 - center : max - center : 0;
+    return {
+      [axis]: coords[axis] - alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset + alignmentOffset
+      }
+    };
+  }
+});
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: 0,
+    crossAxis: 0,
+    alignmentAxis: null,
+    ...rawValue
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      const {
+        x,
+        y
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: diffCoords
+      };
+    }
+  };
+};
+
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  // Browsers without `ShadowRoot` support.
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isContainingBlock(element) {
+  const webkit = isWebKit();
+  const css = getComputedStyle$1(element);
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      currentNode = getParentNode(currentNode);
+    }
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+}
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentIFrame = win.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== win) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentIFrame = getWindow(currentIFrame).frameElement;
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  if (offsetParent === documentElement) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      ...clippingAncestor,
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+
+function getDimensions(element) {
+  return getCssDimensions(element);
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  return element.offsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const window = getWindow(element);
+  if (!isHTMLElement(element)) {
+    return window;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
+    return window;
+  }
+  return offsetParent || getContainingBlock(element) || window;
+}
+
+const getElementRects = async function (_ref) {
+  let {
+    reference,
+    floating,
+    strategy
+  } = _ref;
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  return {
+    reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      ...(await getDimensionsFn(floating))
+    }
+  };
 };
 
-/**
- * All-in-one Button:
- *  - use "variant" to achieve the desired style
- *  - include tooltips and/or icons
- */
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, }) => {
-    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
-    const baseClassesByVariant = {
-        'outline': 'tw-border-solid tw-border',
-        'theme': 'disabled:tw-opacity-50',
-        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50',
-        'theme-light': 'disabled:tw-opacity-50',
-        'no-border': '',
-        'warning': 'tw-bg-sq-warning-color',
-    };
-    const textClassesByVariantLightTheme = {
-        'outline': 'tw-text-sq-text-color',
-        'theme': 'tw-text-white',
-        'theme-light': 'tw-text-white',
-        'danger': 'tw-text-white',
-        'no-border': 'tw-text-sq-text-color',
-        'warning': 'tw-text-white',
-    };
-    const textClassesByVariantDarkTheme = {
-        'outline': 'dark:tw-text-sq-dark-text',
-        'theme': 'dark:tw-text-white',
-        'theme-light': 'dark:tw-text-white',
-        'danger': 'dark:tw-text-white',
-        'no-border': 'dark:tw-text-sq-dark-text',
-        'warning': 'dark:tw-text-white',
-    };
-    const classesByVariantLightTheme = {
-        'outline': 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
-            ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
-        'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',
-        'danger': '',
-        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',
-        'no-border': '',
-        'warning': 'tw-bg-sq-warning-color',
-    };
-    const classesByVariantDarkTheme = {
-        'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
-            ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +
-            ' dark:active:tw-border-sq-color-dark',
-        'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',
-        'danger': '',
-        'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',
-        'no-border': '',
-        'warning': '',
-    };
-    const sizeClasses = {
-        sm: 'tw-text-sm',
-        lg: 'tw-text-xl',
-    };
-    const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
-    const button = (React__default.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
-            stopPropagation && e.stopPropagation();
-            onClick && onClick();
-        }, onMouseDown: (e) => {
-            if (preventBlur) {
-                e.preventDefault();
-            }
-        }, className: appliedClasses },
-        icon && (React__default.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
-        label));
-    return tooltip ? (React__default.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    clearTimeout(timeoutId);
+    io && io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = element.getBoundingClientRect();
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 100);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          resizeObserver && resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo && cleanupIo();
+    resizeObserver && resizeObserver.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a reference element when it is given a certain CSS positioning
+ * strategy.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
 };
 
-const errorClasses$2 = 'tw-border-sq-danger-color';
-const borderColorClasses$2 = [
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-sq-dark-disabled-gray',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
-    'focus:tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-].join(' ');
-const baseClasses$3 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
-    ' disabled:tw-pointer-events-none' +
-    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
-    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
-const darkTheme$1 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
-const lightTheme$1 = 'tw-text-sq-text-color';
-const sizeClasses = {
-    sm: 'tw-text-sm',
-    lg: 'tw-text-xl',
-};
+const noop$1 = () => { };
+
 /**
- * Textfield.
+ * A setInterval hook that calls a callback after a interval duration
+ * when a condition is true
+ *
+ * @param callback The callback to be invoked after interval
+ * @param intervalDurationMs Amount of time in ms after which to invoke
+ * @param when The condition which when true, sets the interval
+ * @param startImmediate If the callback should be invoked immediately
+ * @see https://rooks.vercel.app/docs/useIntervalWhen
  */
-const TextField = React__default.forwardRef((props, ref) => {
-    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, } = props;
-    const internalRef = useRef(null);
-    const [cursor, setCursor] = useState(null);
-    const setAllRefs = (receivedRef) => {
-        if (ref)
-            ref.current = receivedRef;
-        internalRef.current = receivedRef;
-    };
+function useIntervalWhen(callback, intervalDurationMs = 0, when = true, startImmediate = false) {
+    const savedRefCallback = useRef();
     useEffect(() => {
-        const input = internalRef.current;
-        if (input && type !== 'number')
-            input.setSelectionRange(cursor, cursor);
-    }, [ref, cursor, value]);
-    const handleChange = (e) => {
-        setCursor(e.target.selectionStart);
-        onChange && onChange(e);
-    };
+        savedRefCallback.current = callback;
+    });
     useEffect(() => {
-        /**
-         * we need to change the value only if it's different since the internal state of "input" will change it anyway
-         * this will only be the case when the value has been changed externally via store (undo / redo)
-         */
-        if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
-            // we need to use this method because using the value props directly will switch the input to a "controlled"
-            // component
-            internalRef.current.value = `${value}`;
+        if (when) {
+            function internalCallback() {
+                var _a;
+                (_a = savedRefCallback.current) === null || _a === void 0 ? void 0 : _a.call(savedRefCallback);
+            }
+            if (startImmediate) {
+                internalCallback();
+            }
+            const interval = window.setInterval(internalCallback, intervalDurationMs);
+            return () => {
+                window.clearInterval(interval);
+            };
         }
-    }, [value]);
-    let borderRadius = 'tw-rounded-sm';
-    if (inputGroup === 'left') {
-        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
-    }
-    else if (inputGroup === 'right') {
-        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
+        return noop$1;
+    }, [when, intervalDurationMs, startImmediate]);
+}
+
+const getArrowStyle = (position, x, arrowWidth, tooltipHeight, tooltipWidth) => {
+    switch (position) {
+        case 'bottom':
+            return {
+                left: `${x}px`,
+                top: `${-arrowWidth}px`,
+            };
+        case 'left':
+            return {
+                left: `${tooltipWidth - arrowWidth}px`,
+                top: `${tooltipHeight / 2 - arrowWidth}px`,
+            };
+        case 'right':
+            return {
+                left: `${-arrowWidth}px`,
+                top: `${tooltipHeight / 2 - arrowWidth}px`,
+            };
+        default: // 'top':
+            return {
+                left: `${x}px`,
+                top: `${tooltipHeight - 10 + arrowWidth}px`,
+            };
     }
-    const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${showError ? errorClasses$2 : borderColorClasses$2} `;
-    return (React__default.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step }));
-});
-
-const alignment = 'tw-flex tw-items-center';
-const labelClasses = 'tw-ml-1.5 tw-text-sm';
-const baseClasses$2 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
-    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +
-    '  checked:tw-text-sq-text-color' +
-    ' disabled:tw-text-sq-fairly-dark-gray';
-const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$2}`;
-const radioClasses = `tw-form-radio ${baseClasses$2}`;
-/**
- * Checkbox and Radio Box Component.
- */
-const Checkbox = (props) => {
-    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
-    const assignedId = id ?? 'checkbox_' + Math.random();
-    return (React__default.createElement("span", { className: `${alignment} ${extraClassNames}` },
-        React__default.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
-        React__default.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
-                ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
-                : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
-};
-
-const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
-    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
-const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' + 'dark:tw-placeholder-sq-dark-text-lighter';
-const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400';
-const errorClasses$1 = 'tw-border-sq-danger-color';
-const borderColorClasses$1 = [
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-sq-dark-disabled-gray',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
-    'focus:tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-].join(' ');
+};
+const HTMLTip = ({ text }) => {
+    return React__default.createElement('div', {
+        dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(text) },
+    });
+};
 /**
- * TextArea.
+ * QTip
+ *
+ * QTip is a Singleton Tooltip component that guarantees high-performance and reduces component wrappers!
+ *
+ * QTip is used by all qomponents that support the display of tooltips.
+ * If you want to add a Tooltip to your application you can do so by adding the following html data-attributes:
+ *
+ *    'data-qtip-text': the tooltip text to display; this can also be a string containing valid HTML
+ *    'data-qtip-placement': one of TooltipPosition (top, bottom, right, or left)
+ *    'data-qtip-is-html': set this to true if you provided a text that contains HTML,
+ *    'data-qtip-delay': this can be used to delay the showing of the tooltip. this should be a number representing
+ *    the # of milliseconds you want to delay the tooltip for.
+ *    'data-qtip-testid': use this attribute to provide a value for a data-testid of your tooltip; this is useful
+ *    for tests
+ *
+ * In order for QTip to be able to display Tooltips you must add the QTip component to your top-most component
+ * (often that's App or Application) - simply add:
+ *
+ *    <QTip />
+ *
+ * and enjoy beautiful & performant tooltips!
  */
-const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, showError, }) => {
-    const appliedClasses = `${baseClasses$1} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses$1 : borderColorClasses$1}`;
-    return (React__default.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
+const QTip = () => {
+    const tooltipRef = useRef(null);
+    const tooltipTarget = useRef(null);
+    const tooltipArrowRef = useRef(null);
+    const [tooltipText, setTooltipText] = useState('');
+    const [tooltipTargetOriginalPosition, setTooltipTargetOriginalPosition] = useState(null);
+    const [show, setShow] = useState(false);
+    const [html, setHtml] = useState(false);
+    const [tooltipTestId, setTooltipTestId] = useState('');
+    const [overTooltip, setOverTooltip] = useState(false);
+    // Check every 300ms if the tooltip target position has changed and hide the tooltip if this happens.
+    useIntervalWhen(() => {
+        const currentPosition = tooltipTarget?.current?.getBoundingClientRect();
+        if (overTooltip) {
+            return;
+        }
+        if (tooltipTargetOriginalPosition?.y !== currentPosition?.y ||
+            tooltipTargetOriginalPosition?.x !== currentPosition?.x) {
+            setShow(false);
+        }
+    }, 300, show);
+    useEffect(() => {
+        document.body.addEventListener('mousemove', onMouseMove);
+        return () => {
+            document.removeEventListener('mousemove', onMouseMove);
+        };
+    }, []);
+    const ttTimeout = useRef();
+    const onMouseMove = (e) => {
+        clearTimeout(ttTimeout.current);
+        if (!(e.target instanceof HTMLElement)) {
+            return;
+        }
+        tooltipTarget.current = e.target;
+        let dataset = e.target?.dataset;
+        let text = dataset?.qtipText;
+        // Buttons support React.Nodes as children, the tooltip however is applied to the actual button component.
+        // we only check one level up - alternatively the tooltip can also be provided on the React.Node
+        if (!text || text === '') {
+            dataset = e.target?.parentElement?.dataset;
+            text = dataset?.qtipText;
+            tooltipTarget.current = e.target?.parentElement;
+        }
+        if (text) {
+            const delay = parseInt(dataset?.qtipDelay ?? '0');
+            ttTimeout.current = setTimeout(() => makeTooltip(text, dataset?.qtipPlacement, dataset?.qtipIsHtml === 'true', dataset?.qtipTestid, delay), delay);
+        }
+    };
+    const makeTooltip = (tooltipText, position = 'top', isHtml, dataTestId, delay) => {
+        if (tooltipText && tooltipTarget.current) {
+            setHtml(isHtml);
+            setTooltipText(tooltipText);
+            setTooltipTestId(dataTestId);
+            setTooltipTargetOriginalPosition(tooltipTarget.current.getBoundingClientRect());
+            const positionTooltip = () => {
+                if (tooltipRef.current && tooltipTarget.current) {
+                    computePosition(tooltipTarget.current, tooltipRef.current, {
+                        placement: position,
+                        middleware: [offset(10), arrow({ element: tooltipArrowRef.current })],
+                    }).then(({ x, y, middlewareData }) => {
+                        Object.assign(tooltipRef.current?.style, {
+                            left: `${x}px`,
+                            top: `${y}px`,
+                        });
+                        if (middlewareData.arrow) {
+                            const { x, y } = middlewareData.arrow;
+                            const arrowWidth = tooltipArrowRef.current?.offsetHeight / 2;
+                            const tooltipHeight = tooltipRef.current?.offsetHeight;
+                            const tooltipWidth = tooltipRef.current?.offsetWidth;
+                            const style = getArrowStyle(position, x || y, arrowWidth, tooltipHeight, tooltipWidth);
+                            Object.assign(tooltipArrowRef.current.style, style);
+                        }
+                        setShow(true);
+                    });
+                }
+            };
+            delay > 0
+                ? requestAnimationFrame(() => {
+                    positionTooltip();
+                })
+                : positionTooltip();
+        }
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw-absolute tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white tw-z-[9999] fade-in ' +
+                (show ? 'tw-visible' : 'tw-invisible tw-pointer-events-none') },
+            html ? React__default.createElement(HTMLTip, { text: tooltipText }) : tooltipText,
+            React__default.createElement("div", { className: "tw-absolute tw-w-[10px] tw-h-[10px] tw-rotate-45 tw-bg-black", ref: tooltipArrowRef }))));
 };
 
 function _typeof(obj) {
@@ -3256,10 +6172,6 @@ function _taggedTemplateLiteral(strings, raw) {
   }));
 }
 
-function l$1(t){return {...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}const g$1=["top","right","bottom","left"];g$1.reduce(((t,e)=>t.concat(e,e+"-start",e+"-end")),[]);
-
-function n(t){var e;return (null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function o(t){return n(t).getComputedStyle(t)}function i$1(t){return t instanceof n(t).Node}function r(t){return i$1(t)?(t.nodeName||"").toLowerCase():""}let l;function c(){if(l)return l;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(l=t.brands.map((t=>t.brand+"/"+t.version)).join(" "),l):navigator.userAgent}function s(t){return t instanceof n(t).HTMLElement}function f(t){return t instanceof n(t).Element}function u(t){if("undefined"==typeof ShadowRoot)return !1;return t instanceof n(t).ShadowRoot||t instanceof ShadowRoot}function a(t){const{overflow:e,overflowX:n,overflowY:i,display:r}=o(t);return /auto|scroll|overlay|hidden|clip/.test(e+i+n)&&!["inline","contents"].includes(r)}function p(){return /^((?!chrome|android).)*safari/i.test(c())}function g(t){return ["html","body","#document"].includes(r(t))}const x=Math.round;function w$1(t){const e=o(t);let n=parseFloat(e.width)||0,i=parseFloat(e.height)||0;const r=s(t),l=r?t.offsetWidth:n,c=r?t.offsetHeight:i,f=x(n)!==l||x(i)!==c;return f&&(n=l,i=c),{width:n,height:i,fallback:f}}function v(t){return f(t)?t:t.contextElement}const b={x:1,y:1};function L(t){const e=v(t);if(!s(e))return b;const n=e.getBoundingClientRect(),{width:o,height:i,fallback:r}=w$1(e);let l=(r?x(n.width):n.width)/o,c=(r?x(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}function E(e,o,i,r){var l,c;void 0===o&&(o=!1),void 0===i&&(i=!1);const s=e.getBoundingClientRect(),u=v(e);let a=b;o&&(r?f(r)&&(a=L(r)):a=L(e));const d=u?n(u):window,h=p()&&i;let g=(s.left+(h&&(null==(l=d.visualViewport)?void 0:l.offsetLeft)||0))/a.x,m=(s.top+(h&&(null==(c=d.visualViewport)?void 0:c.offsetTop)||0))/a.y,y=s.width/a.x,x=s.height/a.y;if(u){const t=n(u),e=r&&f(r)?n(r):r;let o=t.frameElement;for(;o&&r&&e!==t;){const t=L(o),e=o.getBoundingClientRect(),i=getComputedStyle(o);e.x+=(o.clientLeft+parseFloat(i.paddingLeft))*t.x,e.y+=(o.clientTop+parseFloat(i.paddingTop))*t.y,g*=t.x,m*=t.y,y*=t.x,x*=t.y,g+=e.x,m+=e.y,o=n(o).frameElement;}}return l$1({width:y,height:x,x:g,y:m})}function T(t){return ((i$1(t)?t.ownerDocument:t.document)||window.document).documentElement}function F(t){if("html"===r(t))return t;const e=t.assignedSlot||t.parentNode||u(t)&&t.host||T(t);return u(e)?e.host:e}function S(t){const e=F(t);return g(e)?e.ownerDocument.body:s(e)&&a(e)?e:S(e)}function W(t,e){var o;void 0===e&&(e=[]);const i=S(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=n(i);return r?e.concat(l,l.visualViewport||[],a(i)?i:[]):e.concat(i,W(i))}function z(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l=!0,animationFrame:c=!1}=o,s=i||r?[...f(t)?W(t):t.contextElement?W(t.contextElement):[],...W(e)]:[];s.forEach((t=>{const e=!f(t)&&t.toString().includes("V");!i||c&&!e||t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n);}));let u,a=null;l&&(a=new ResizeObserver((()=>{n();})),f(t)&&!c&&a.observe(t),f(t)||!t.contextElement||c||a.observe(t.contextElement),a.observe(e));let d=c?E(t):null;return c&&function e(){const o=E(t);!d||o.x===d.x&&o.y===d.y&&o.width===d.width&&o.height===d.height||n();d=o,u=requestAnimationFrame(e);}(),n(),()=>{var t;s.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n);})),null==(t=a)||t.disconnect(),a=null,c&&cancelAnimationFrame(u);}}
-
 var index =  useLayoutEffect ;
 
 var _excluded$3 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
@@ -3929,7 +6841,7 @@ var MenuPortal = function MenuPortal(props) {
       cleanupRef.current = null;
     }
     if (controlElement && menuPortalRef.current) {
-      cleanupRef.current = z(controlElement, menuPortalRef.current, updateComputedPosition, {
+      cleanupRef.current = autoUpdate(controlElement, menuPortalRef.current, updateComputedPosition, {
         elementResize: 'ResizeObserver' in window
       });
     }
@@ -7475,5 +10387,5 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
     return creatable ? React__default.createElement(CreatableSelect$1, { ...props }) : React__default.createElement(StateManagedSelect$1, { ...props });
 };
 
-export { Button, Checkbox, Icon, Select, TextArea, TextField, Tooltip };
+export { Button, Checkbox, Icon, QTip, Select, TextArea, TextField, Tooltip };
 //# sourceMappingURL=index.esm.js.map