@linzjs/lui 17.48.0 → 17.49.0

package/dist/lui.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, createContext, createElement, useContext, useRef, PureComponent, forwardRef, useEffect, Fragment, useLayoutEffect, Component, useMemo, useCallback, cloneElement, Children, isValidElement } from 'react';
+import React__default, { useState, createContext, createElement, useContext, useRef, PureComponent, forwardRef as forwardRef$1, useEffect, Fragment, useLayoutEffect, Component, useMemo, useCallback, cloneElement, Children, isValidElement } from 'react';
 import { Menu as Menu$1, ControlledMenu, applyStatics, MenuItem, SubMenu, MenuDivider, MenuHeader, useMenuState, FocusableItem } from '@szhsin/react-menu';
 import crypto$1 from 'crypto';
 import { Formik, Form, useFormikContext, Field, getIn, connect, ErrorMessage, useField } from 'formik';
@@ -25045,7 +25045,7 @@ var Gi, kx = function(s, f, p) {
 );
 process.env.NODE_ENV !== "production" && (IE.displayName = "EmotionCacheContext");
 var EF = IE.Provider, bF = function(s) {
-  return /* @__PURE__ */ forwardRef(function(f, p) {
+  return /* @__PURE__ */ forwardRef$1(function(f, p) {
     var S = useContext(IE);
     return s(f, S, p);
   });
@@ -25386,8 +25386,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$a = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
-styleInject(css_248z$a);
+var css_248z$8 = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
+styleInject(css_248z$8);
 
 /**
  * Overwrite the common buttons for floating window to
@@ -27386,7 +27386,7 @@ Grid.prototype.destroy = function destroy (immediate) {
     );
 };
 
-function index (options) { return new Grid(options); }
+function index$1 (options) { return new Grid(options); }
 
 function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
 
@@ -27426,7 +27426,7 @@ var ReactSplitGrid = /*@__PURE__*/(function (superclass) {
         options.writeStyle = this.writeStyle;
         options.onDrag = this.onDrag;
 
-        this.split = index(options);
+        this.split = index$1(options);
     };
 
     ReactSplitGrid.prototype.componentDidUpdate = function componentDidUpdate (prevProps) {
@@ -27492,7 +27492,7 @@ var ReactSplitGrid = /*@__PURE__*/(function (superclass) {
 
             this.split.destroy(false);
 
-            this.split = index(options);
+            this.split = index$1(options);
         }
     };
 
@@ -27636,8 +27636,8 @@ ReactSplitGrid.defaultProps = {
     onDrag: undefined,
 };
 
-var css_248z$9 = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px;\n  /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
-styleInject(css_248z$9);
+var css_248z$7 = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px;\n  /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
+styleInject(css_248z$7);
 
 var GutterComponent = function (props) {
     var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
@@ -27955,8 +27955,8 @@ function LuiFormikForm(props) {
                 " "))));
 }
 
-var css_248z$8 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiError {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError-errorIcon {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError-errorText {\n  margin-left: 0.5rem;\n}";
-styleInject(css_248z$8);
+var css_248z$6 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiError {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError-errorIcon {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError-errorText {\n  margin-left: 0.5rem;\n}";
+styleInject(css_248z$6);
 
 var LuiError = function (_a) {
     var error = _a.error, className = _a.className;
@@ -28115,7 +28115,7 @@ var parseTextDate = function (value, options) {
     }
 };
 
-var DateInput = forwardRef(function (props, ref) {
+var DateInput = forwardRef$1(function (props, ref) {
     var valueProp = props.value, onChangeProp = props.onChange, onPasteProp = props.onPaste, inputProps = __rest(props, ["value", "onChange", "onPaste"]);
     return (React__default.createElement("input", __assign({}, inputProps, { ref: ref, pattern: "d{2}/d{2}/d{4}", placeholder: "dd/mm/yyyy", type: 'date', value: valueProp, onChange: function (e) { return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e); }, onPaste: function (e) {
             var data = e.clipboardData.getData('text');
@@ -28131,8 +28131,8 @@ function useGenerateOrDefaultId(idFromProps) {
     var id = useState(idFromProps ? idFromProps : v4())[0];
     return id;
 }
-var BareInput = forwardRef(function (props, ref) { return React__default.createElement("input", __assign({}, props, { ref: ref })); });
-var LuiTextInput = forwardRef(function (props, ref) {
+var BareInput = forwardRef$1(function (props, ref) { return React__default.createElement("input", __assign({}, props, { ref: ref })); });
+var LuiTextInput = forwardRef$1(function (props, ref) {
     var _a, _b, _c;
     var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
     var LuiInput = ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.type) === 'date' ? DateInput : BareInput;
@@ -29912,8 +29912,8 @@ var prefixer = function prefixer(element, index, children, callback) {
   }
 };
 
-var isBrowser$6 = typeof document !== 'undefined';
-var getServerStylisCache = isBrowser$6 ? undefined : weakMemoize(function () {
+var isBrowser$7 = typeof document !== 'undefined';
+var getServerStylisCache = isBrowser$7 ? undefined : weakMemoize(function () {
   return memoize(function () {
     var cache = {};
     return function (name) {
@@ -29930,7 +29930,7 @@ var createCache = function createCache(options) {
     throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
   }
 
-  if (isBrowser$6 && key === 'css') {
+  if (isBrowser$7 && key === 'css') {
     var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
     // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
     // note this very very intentionally targets all style elements regardless of the key to ensure
@@ -29966,7 +29966,7 @@ var createCache = function createCache(options) {
   var container;
   var nodesToHydrate = [];
 
-  if (isBrowser$6) {
+  if (isBrowser$7) {
     container = options.container || document.head;
     Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
@@ -29994,7 +29994,7 @@ var createCache = function createCache(options) {
     }), incorrectImportAlarm);
   }
 
-  if (isBrowser$6) {
+  if (isBrowser$7) {
     var currentSheet;
     var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {
       if (!element.root) {
@@ -30335,7 +30335,7 @@ var TYPE_STATICS = {};
 TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
 TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
 
-var isBrowser$5 = typeof document !== 'undefined';
+var isBrowser$6 = typeof document !== 'undefined';
 function getRegisteredStyles(registered, registeredStyles, classNames) {
   var rawClassName = '';
   classNames.split(' ').forEach(function (className) {
@@ -30359,7 +30359,7 @@ var registerStyles = function registerStyles(cache, serialized, isStringTag) {
   // in node since emotion-server relies on whether a style is in
   // the registered cache to know whether a style is global or not
   // also, note that this check will be dead code eliminated in the browser
-  isBrowser$5 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+  isBrowser$6 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
   }
 };
@@ -30374,14 +30374,14 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
     do {
       var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
 
-      if (!isBrowser$5 && maybeStyles !== undefined) {
+      if (!isBrowser$6 && maybeStyles !== undefined) {
         stylesForSSR += maybeStyles;
       }
 
       current = current.next;
     } while (current !== undefined);
 
-    if (!isBrowser$5 && stylesForSSR.length !== 0) {
+    if (!isBrowser$6 && stylesForSSR.length !== 0) {
       return stylesForSSR;
     }
   }
@@ -30801,17 +30801,17 @@ var serializeStyles = function serializeStyles(args, registered, mergedProps) {
   };
 };
 
-var isBrowser$4 = typeof document !== 'undefined';
+var isBrowser$5 = typeof document !== 'undefined';
 
 var syncFallback = function syncFallback(create) {
   return create();
 };
 
 var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
-var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$4 ? syncFallback : useInsertionEffect || syncFallback;
+var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$5 ? syncFallback : useInsertionEffect || syncFallback;
 var useInsertionEffectWithLayoutFallback = useInsertionEffect || useLayoutEffect;
 
-var isBrowser$3 = typeof document !== 'undefined';
+var isBrowser$4 = typeof document !== 'undefined';
 var hasOwnProperty$1 = {}.hasOwnProperty;
 
 var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
@@ -30832,14 +30832,14 @@ EmotionCacheContext.Provider;
 
 var withEmotionCache = function withEmotionCache(func) {
   // $FlowFixMe
-  return /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/forwardRef$1(function (props, ref) {
     // the cache will never be null in the browser
     var cache = useContext(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 
-if (!isBrowser$3) {
+if (!isBrowser$4) {
   withEmotionCache = function withEmotionCache(func) {
     return function (props) {
       var cache = useContext(EmotionCacheContext);
@@ -30948,7 +30948,7 @@ var Insertion$1 = function Insertion(_ref) {
     return insertStyles(cache, serialized, isStringTag);
   });
 
-  if (!isBrowser$3 && rules !== undefined) {
+  if (!isBrowser$4 && rules !== undefined) {
     var _ref2;
 
     var serializedNames = serialized.name;
@@ -31179,7 +31179,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   var styles = props.styles;
   var serialized = serializeStyles([styles], undefined, useContext(ThemeContext));
 
-  if (!isBrowser$3) {
+  if (!isBrowser$4) {
     var _ref;
 
     var serializedNames = serialized.name;
@@ -31365,17 +31365,17 @@ var Insertion = function Insertion(_ref) {
     for (var i = 0; i < serializedArr.length; i++) {
       var res = insertStyles(cache, serializedArr[i], false);
 
-      if (!isBrowser$3 && res !== undefined) {
+      if (!isBrowser$4 && res !== undefined) {
         rules += res;
       }
     }
 
-    if (!isBrowser$3) {
+    if (!isBrowser$4) {
       return rules;
     }
   });
 
-  if (!isBrowser$3 && rules.length !== 0) {
+  if (!isBrowser$4 && rules.length !== 0) {
     var _ref2;
 
     return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
@@ -31438,15 +31438,15 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 if (process.env.NODE_ENV !== 'production') {
-  var isBrowser$2 = typeof document !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked
+  var isBrowser$3 = typeof document !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked
 
   var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined';
 
-  if (isBrowser$2 && !isTestEnv) {
+  if (isBrowser$3 && !isTestEnv) {
     // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
     var globalContext = // $FlowIgnore
     typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef
-    : isBrowser$2 ? window : global;
+    : isBrowser$3 ? window : global;
     var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
 
     if (globalContext[globalKey]) {
@@ -31468,7 +31468,7 @@ function _taggedTemplateLiteral(strings, raw) {
   }));
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -31483,7 +31483,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -52457,8 +52457,8 @@ function isChromatic() {
         (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
 }
 
-var css_248z$7 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
-styleInject(css_248z$7);
+var css_248z$5 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
+styleInject(css_248z$5);
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 
@@ -52565,7 +52565,7 @@ var CreatableSelect = /*#__PURE__*/React__default.forwardRef(function (props, re
 /**
  * A wrapper around React Select with Lui styling
  */
-var LuiComboSelect = forwardRef(LuiComboSelectActual);
+var LuiComboSelect = forwardRef$1(LuiComboSelectActual);
 // declare the indicator in here so it gets the types from
 // the function declaration
 var LuiLoadingIndicator = function () { return React__default.createElement(LuiMiniSpinner, { size: 25 }); };
@@ -52579,13 +52579,13 @@ function LuiComboSelectActual(givenProps, ref) {
     // box-shadow: "-8px 0px 0 0 #cc0000";
     // border-radius: "4px";
     var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
-    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$7['sea'], primary75: css_248z$7['electric'], primary50: css_248z$7['spray'], primary25: css_248z$7['polar'], neutral90: css_248z$7['charcoal'], neutral80: css_248z$7['charcoal'], neutral70: css_248z$7['charcoal'], neutral60: css_248z$7['fuscous'], neutral50: css_248z$7['fuscous'], neutral40: css_248z$7['gray'], neutral30: css_248z$7['gray'], neutral20: css_248z$7['silver'], neutral10: css_248z$7['lily'], neutral5: css_248z$7['hint'], danger: css_248z$7['error'], dangerLight: css_248z$7['error-bg'] }) })); }, styles: {
+    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$5['sea'], primary75: css_248z$5['electric'], primary50: css_248z$5['spray'], primary25: css_248z$5['polar'], neutral90: css_248z$5['charcoal'], neutral80: css_248z$5['charcoal'], neutral70: css_248z$5['charcoal'], neutral60: css_248z$5['fuscous'], neutral50: css_248z$5['fuscous'], neutral40: css_248z$5['gray'], neutral30: css_248z$5['gray'], neutral20: css_248z$5['silver'], neutral10: css_248z$5['lily'], neutral5: css_248z$5['hint'], danger: css_248z$5['error'], dangerLight: css_248z$5['error-bg'] }) })); }, styles: {
             control: function (provided, state) { return (__assign(__assign({}, provided), { 
                 /* matches style of .LuiTextInput-input */
                 boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
                     borderColor: '#053d52'
                 } })); },
-            dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$7['fuscous'] })); },
+            dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$5['fuscous'] })); },
             indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
             input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
                     height: '38px !important'
@@ -52593,10 +52593,10 @@ function LuiComboSelectActual(givenProps, ref) {
             singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
             placeholder: function (provided) { return (__assign(__assign({}, provided), { 
                 /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
-                fontWeight: 'normal', fontStyle: 'italic', color: css_248z$7['input-placeholder'] })); },
+                fontWeight: 'normal', fontStyle: 'italic', color: css_248z$5['input-placeholder'] })); },
             option: function (provided, _a) {
                 var isSelected = _a.isSelected;
-                return (__assign(__assign({}, provided), { color: css_248z$7['input-text'], backgroundColor: isSelected ? css_248z$7['selection'] : css_248z$7['white'] }));
+                return (__assign(__assign({}, provided), { color: css_248z$5['input-text'], backgroundColor: isSelected ? css_248z$5['selection'] : css_248z$5['white'] }));
             }
         } });
     return (React__default.createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
@@ -52727,7 +52727,7 @@ var LuiHeader = function (_a) {
  * Note that it depends on it being rendered inside a LuiHeader for its styles to apply properly.
  * To configure the item for responsiveness, ensure to set any of the hideOn* properties.
  */
-var LuiHeaderMenuItem = forwardRef(function (_a, ref) {
+var LuiHeaderMenuItem = forwardRef$1(function (_a, ref) {
     var icon = _a.icon, label = _a.label, badge = _a.badge, hide = _a.hide, onClick = _a.onClick, _b = _a["data-testid"], dataTestId = _b === void 0 ? 'menu-item' : _b, children = _a.children;
     useDeprecatedWarning('LuiHeaderMenuItem');
     var menuItemClasses = clsx('lui-header-menu-item', hide && buildHideClassDict(hide));
@@ -52801,7 +52801,7 @@ var LuiHeaderV2 = function (_a) {
                     React__default.createElement("h1", null, headingText)))),
             React__default.createElement("div", { className: "LuiHeaderV2-col" }, children))));
 };
-var LuiHeaderMenuItemV2 = forwardRef(function (_a, ref) {
+var LuiHeaderMenuItemV2 = forwardRef$1(function (_a, ref) {
     var icon = _a.icon, _b = _a.iconColor, iconColor = _b === void 0 ? '#E2F3F7' : _b, label = _a.label, badge = _a.badge, onClick = _a.onClick, _c = _a["data-testid"], dataTestId = _c === void 0 ? 'menu-item' : _c, externalSelected = _a.isSelected, onClickOutside = _a.onClickOutside, onEscape = _a.onEscape, tooltip = _a.tooltip, children = _a.children, className = _a.className;
     var _d = useState(false), internalSelected = _d[0], setInternalSelected = _d[1];
     var useInternalSelectedStatus = externalSelected === undefined;
@@ -54968,8 +54968,8 @@ var LuiModalHeader = function (props) {
                 React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-var css_248z$6 = "@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n";
-styleInject(css_248z$6);
+var css_248z$4 = "@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n";
+styleInject(css_248z$4);
 
 /**
  * @internal
@@ -58200,8 +58200,8 @@ function bindGlobalEventListeners() {
   window.addEventListener('blur', onWindowBlur);
 }
 
-var isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined';
-var isIE11 = isBrowser$1 ? // @ts-ignore
+var isBrowser$2 = typeof window !== 'undefined' && typeof document !== 'undefined';
+var isIE11 = isBrowser$2 ? // @ts-ignore
 !!window.msCrypto : false;
 
 function createMemoryLeakWarning(method) {
@@ -59764,37 +59764,394 @@ tippy.setDefaultProps({
   render: render
 });
 
-var css_248z$5 = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
-styleInject(css_248z$5);
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-var css_248z$4 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
-styleInject(css_248z$4);
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined';
+function preserveRef(ref, node) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(node);
+    }
+
+    if ({}.hasOwnProperty.call(ref, 'current')) {
+      ref.current = node;
+    }
+  }
+}
+function ssrSafeCreateDiv() {
+  return isBrowser$1 && document.createElement('div');
+}
+function toDataAttributes(attrs) {
+  var dataAttrs = {
+    'data-placement': attrs.placement
+  };
+
+  if (attrs.referenceHidden) {
+    dataAttrs['data-reference-hidden'] = '';
+  }
+
+  if (attrs.escaped) {
+    dataAttrs['data-escaped'] = '';
+  }
+
+  return dataAttrs;
+}
+
+function deepEqual(x, y) {
+  if (x === y) {
+    return true;
+  } else if (typeof x === 'object' && x != null && typeof y === 'object' && y != null) {
+    if (Object.keys(x).length !== Object.keys(y).length) {
+      return false;
+    }
+
+    for (var prop in x) {
+      if (y.hasOwnProperty(prop)) {
+        if (!deepEqual(x[prop], y[prop])) {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    }
+
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function uniqueByShape(arr) {
+  var output = [];
+  arr.forEach(function (item) {
+    if (!output.find(function (outputItem) {
+      return deepEqual(item, outputItem);
+    })) {
+      output.push(item);
+    }
+  });
+  return output;
+}
+function deepPreserveProps(instanceProps, componentProps) {
+  var _instanceProps$popper, _componentProps$poppe;
+
+  return Object.assign({}, componentProps, {
+    popperOptions: Object.assign({}, instanceProps.popperOptions, componentProps.popperOptions, {
+      modifiers: uniqueByShape([].concat(((_instanceProps$popper = instanceProps.popperOptions) == null ? void 0 : _instanceProps$popper.modifiers) || [], ((_componentProps$poppe = componentProps.popperOptions) == null ? void 0 : _componentProps$poppe.modifiers) || []))
+    })
+  });
+}
+
+var useIsomorphicLayoutEffect$1 = isBrowser$1 ? useLayoutEffect : useEffect;
+function useMutableBox(initialValue) {
+  // Using refs instead of state as it's recommended to not store imperative
+  // values in state due to memory problems in React(?)
+  var ref = useRef();
+
+  if (!ref.current) {
+    ref.current = typeof initialValue === 'function' ? initialValue() : initialValue;
+  }
+
+  return ref.current;
+}
+
+function updateClassName(box, action, classNames) {
+  classNames.split(/\s+/).forEach(function (name) {
+    if (name) {
+      box.classList[action](name);
+    }
+  });
+}
+
+var classNamePlugin = {
+  name: 'className',
+  defaultValue: '',
+  fn: function fn(instance) {
+    var box = instance.popper.firstElementChild;
+
+    var isDefaultRenderFn = function isDefaultRenderFn() {
+      var _instance$props$rende;
+
+      return !!((_instance$props$rende = instance.props.render) == null ? void 0 : _instance$props$rende.$$tippy);
+    };
+
+    function add() {
+      if (instance.props.className && !isDefaultRenderFn()) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(['@tippyjs/react: Cannot use `className` prop in conjunction with', '`render` prop. Place the className on the element you are', 'rendering.'].join(' '));
+        }
+
+        return;
+      }
+
+      updateClassName(box, 'add', instance.props.className);
+    }
+
+    function remove() {
+      if (isDefaultRenderFn()) {
+        updateClassName(box, 'remove', instance.props.className);
+      }
+    }
+
+    return {
+      onCreate: add,
+      onBeforeUpdate: remove,
+      onAfterUpdate: add
+    };
+  }
+};
+
+function TippyGenerator(tippy) {
+  function Tippy(_ref) {
+    var children = _ref.children,
+        content = _ref.content,
+        visible = _ref.visible,
+        singleton = _ref.singleton,
+        render = _ref.render,
+        reference = _ref.reference,
+        _ref$disabled = _ref.disabled,
+        disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+        _ref$ignoreAttributes = _ref.ignoreAttributes,
+        ignoreAttributes = _ref$ignoreAttributes === void 0 ? true : _ref$ignoreAttributes;
+        _ref.__source;
+        _ref.__self;
+        var restOfNativeProps = _objectWithoutPropertiesLoose(_ref, ["children", "content", "visible", "singleton", "render", "reference", "disabled", "ignoreAttributes", "__source", "__self"]);
+
+    var isControlledMode = visible !== undefined;
+    var isSingletonMode = singleton !== undefined;
+
+    var _useState = useState(false),
+        mounted = _useState[0],
+        setMounted = _useState[1];
+
+    var _useState2 = useState({}),
+        attrs = _useState2[0],
+        setAttrs = _useState2[1];
+
+    var _useState3 = useState(),
+        singletonContent = _useState3[0],
+        setSingletonContent = _useState3[1];
+
+    var mutableBox = useMutableBox(function () {
+      return {
+        container: ssrSafeCreateDiv(),
+        renders: 1
+      };
+    });
+    var props = Object.assign({
+      ignoreAttributes: ignoreAttributes
+    }, restOfNativeProps, {
+      content: mutableBox.container
+    });
+
+    if (isControlledMode) {
+      if (process.env.NODE_ENV !== 'production') {
+        ['trigger', 'hideOnClick', 'showOnCreate'].forEach(function (nativeStateProp) {
+          if (props[nativeStateProp] !== undefined) {
+            console.warn(["@tippyjs/react: Cannot specify `" + nativeStateProp + "` prop in", "controlled mode (`visible` prop)"].join(' '));
+          }
+        });
+      }
+
+      props.trigger = 'manual';
+      props.hideOnClick = false;
+    }
+
+    if (isSingletonMode) {
+      disabled = true;
+    }
+
+    var computedProps = props;
+    var plugins = props.plugins || [];
+
+    if (render) {
+      computedProps = Object.assign({}, props, {
+        plugins: isSingletonMode && singleton.data != null ? [].concat(plugins, [{
+          fn: function fn() {
+            return {
+              onTrigger: function onTrigger(instance, event) {
+                var node = singleton.data.children.find(function (_ref2) {
+                  var instance = _ref2.instance;
+                  return instance.reference === event.currentTarget;
+                });
+                instance.state.$$activeSingletonInstance = node.instance;
+                setSingletonContent(node.content);
+              }
+            };
+          }
+        }]) : plugins,
+        render: function render() {
+          return {
+            popper: mutableBox.container
+          };
+        }
+      });
+    }
+
+    var deps = [reference].concat(children ? [children.type] : []); // CREATE
+
+    useIsomorphicLayoutEffect$1(function () {
+      var element = reference;
+
+      if (reference && reference.hasOwnProperty('current')) {
+        element = reference.current;
+      }
+
+      var instance = tippy(element || mutableBox.ref || ssrSafeCreateDiv(), Object.assign({}, computedProps, {
+        plugins: [classNamePlugin].concat(props.plugins || [])
+      }));
+      mutableBox.instance = instance;
+
+      if (disabled) {
+        instance.disable();
+      }
+
+      if (visible) {
+        instance.show();
+      }
+
+      if (isSingletonMode) {
+        singleton.hook({
+          instance: instance,
+          content: content,
+          props: computedProps,
+          setSingletonContent: setSingletonContent
+        });
+      }
+
+      setMounted(true);
+      return function () {
+        instance.destroy();
+        singleton == null ? void 0 : singleton.cleanup(instance);
+      };
+    }, deps); // UPDATE
+
+    useIsomorphicLayoutEffect$1(function () {
+      var _instance$popperInsta;
+
+      // Prevent this effect from running on 1st render
+      if (mutableBox.renders === 1) {
+        mutableBox.renders++;
+        return;
+      }
+
+      var instance = mutableBox.instance;
+      instance.setProps(deepPreserveProps(instance.props, computedProps)); // Fixes #264
+
+      (_instance$popperInsta = instance.popperInstance) == null ? void 0 : _instance$popperInsta.forceUpdate();
+
+      if (disabled) {
+        instance.disable();
+      } else {
+        instance.enable();
+      }
+
+      if (isControlledMode) {
+        if (visible) {
+          instance.show();
+        } else {
+          instance.hide();
+        }
+      }
+
+      if (isSingletonMode) {
+        singleton.hook({
+          instance: instance,
+          content: content,
+          props: computedProps,
+          setSingletonContent: setSingletonContent
+        });
+      }
+    });
+    useIsomorphicLayoutEffect$1(function () {
+      var _instance$props$poppe;
+
+      if (!render) {
+        return;
+      }
+
+      var instance = mutableBox.instance;
+      instance.setProps({
+        popperOptions: Object.assign({}, instance.props.popperOptions, {
+          modifiers: [].concat((((_instance$props$poppe = instance.props.popperOptions) == null ? void 0 : _instance$props$poppe.modifiers) || []).filter(function (_ref3) {
+            var name = _ref3.name;
+            return name !== '$$tippyReact';
+          }), [{
+            name: '$$tippyReact',
+            enabled: true,
+            phase: 'beforeWrite',
+            requires: ['computeStyles'],
+            fn: function fn(_ref4) {
+              var _state$modifiersData;
+
+              var state = _ref4.state;
+              var hideData = (_state$modifiersData = state.modifiersData) == null ? void 0 : _state$modifiersData.hide; // WARNING: this is a high-risk path that can cause an infinite
+              // loop. This expression _must_ evaluate to false when required
+
+              if (attrs.placement !== state.placement || attrs.referenceHidden !== (hideData == null ? void 0 : hideData.isReferenceHidden) || attrs.escaped !== (hideData == null ? void 0 : hideData.hasPopperEscaped)) {
+                setAttrs({
+                  placement: state.placement,
+                  referenceHidden: hideData == null ? void 0 : hideData.isReferenceHidden,
+                  escaped: hideData == null ? void 0 : hideData.hasPopperEscaped
+                });
+              }
+
+              state.attributes.popper = {};
+            }
+          }])
+        })
+      });
+    }, [attrs.placement, attrs.referenceHidden, attrs.escaped].concat(deps));
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children ? /*#__PURE__*/cloneElement(children, {
+      ref: function ref(node) {
+        mutableBox.ref = node;
+        preserveRef(children.ref, node);
+      }
+    }) : null, mounted && /*#__PURE__*/createPortal(render ? render(toDataAttributes(attrs), singletonContent, mutableBox.instance) : content, mutableBox.container));
+  }
+
+  return Tippy;
+}
+
+var forwardRef = (function (Tippy, defaultProps) {
+  return /*#__PURE__*/forwardRef$1(function TippyWrapper(_ref, _ref2) {
+    var children = _ref.children,
+        props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+    return (
+      /*#__PURE__*/
+      // If I spread them separately here, Babel adds the _extends ponyfill for
+      // some reason
+      React__default.createElement(Tippy, Object.assign({}, defaultProps, props), children ? /*#__PURE__*/cloneElement(children, {
+        ref: function ref(node) {
+          preserveRef(_ref2, node);
+          preserveRef(children.ref, node);
+        }
+      }) : null)
+    );
+  });
+});
+var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
+
+var Tippy = index;
 
-var id = 0;
-var getKey = function () { return id++; };
 var LuiTooltip = function (props) {
-    var children = props.children, message = props.message, placement = props.placement, trigger = props.trigger, _a = props.animation, animation = _a === void 0 ? true : _a, _b = props.followCursor, followCursor$1 = _b === void 0 ? false : _b, _c = props.mode, mode = _c === void 0 ? 'default' : _c, _d = props.interactive, interactive = _d === void 0 ? false : _d, _e = props.allowHTML, allowHTML = _e === void 0 ? false : _e, _f = props.offset, offset = _f === void 0 ? [0, 18] : _f;
-    var id = "LuiToolTip_".concat(useMemo(getKey, []));
-    useEffect(function () {
-        tippy("#".concat(id), {
-            content: message,
-            arrow: false,
-            trigger: trigger,
-            theme: mode,
-            placement: placement,
-            offset: offset,
-            animation: animation,
-            followCursor: followCursor$1,
-            interactive: interactive,
-            allowHTML: allowHTML,
-            plugins: [followCursor]
-        });
-        return function () {
-            var _a, _b;
-            (_b = (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a._tippy) === null || _b === void 0 ? void 0 : _b.destroy();
-        };
-    }, [id, message, placement, trigger, animation, followCursor$1]);
-    return React__default.createElement("span", { id: id }, children);
+    var children = props.children, content = props.content, message = props.message, placement = props.placement, offset = props.offset, _a = props.mode, mode = _a === void 0 ? 'default' : _a, plugins = props.plugins, arrow = props.arrow, className = props.className, rest = __rest(props, ["children", "content", "message", "placement", "offset", "mode", "plugins", "arrow", "className"]);
+    var tippyProps = __assign(__assign({}, rest), { content: content !== null && content !== void 0 ? content : message, theme: mode, placement: placement !== null && placement !== void 0 ? placement : 'bottom', offset: offset !== null && offset !== void 0 ? offset : [0, 18], className: "LuiTooltip ".concat(className !== null && className !== void 0 ? className : ''), arrow: arrow !== null && arrow !== void 0 ? arrow : false, plugins: __spreadArray(__spreadArray([], (plugins || []), true), [followCursor], false) });
+    return React__default.createElement(Tippy, __assign({}, tippyProps), children);
 };
 
 /**
@@ -60294,7 +60651,7 @@ function createMotionComponent(_a) {
             React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic)),
             features));
     }
-    return forwardRef(MotionComponent);
+    return forwardRef$1(MotionComponent);
 }
 
 /**