@linzjs/lui 21.34.1-3 → 21.35.0

package/dist/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var reactMenu = require('@szhsin/react-menu');
 var lottie = require('lottie-web/build/player/lottie_light');
 var crypto$1 = require('crypto');
-var require$$1 = require('react-dom');
+var ReactDOM = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var lottie__default = /*#__PURE__*/_interopDefaultLegacy(lottie);
 var crypto__default = /*#__PURE__*/_interopDefaultLegacy(crypto$1);
-var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -25684,8 +25684,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$j = ".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 rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);\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$j);
+var css_248z$l = ".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 rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);\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$l);
 
 /**
  * Overwrite the common buttons for floating window to
@@ -25775,87 +25775,6 @@ var LuiFloatingWindow = function (props) {
     return (React__default["default"].createElement(WF, __assign({}, props, { name: LUI_WINDOW_NAME, initialSize: initialSize, initialPosition: initialPosition || INITIAL_POSITION, minSize: { width: MINI_WIDTH, height: MINI_HEIGHT }, bounds: bounds, headerProps: generateHeaders, startDisplayed: startDisplayed, startPoppedOut: startPoppedOut })));
 };
 
-var LuiToastMessage = function (_a) {
-    var level = _a.level, _b = _a.displayTimeout, displayTimeout = _b === void 0 ? 4000 : _b, _c = _a.display, display = _c === void 0 ? true : _c, requireDismiss = _a.requireDismiss, onClose = _a.onClose, _d = _a.onCloseDelay, onCloseDelay = _d === void 0 ? displayTimeout : _d, children = _a.children, type = _a.type;
-    var _e = React.useState('lui-msg-toast-show'), className = _e[0], setClassname = _e[1];
-    var _f = React.useState(undefined), fadeOutTimer = _f[0], setFadeOutTimer = _f[1];
-    var _g = React.useState(undefined), removeTimer = _g[0], setRemoveTimer = _g[1];
-    var materialIcon = getMaterialIconForLevel(level);
-    var callOnCloseAfterDissolved = function () {
-        // This is so the caller can remove it from the dom
-        if (onClose) {
-            var timer = window.setTimeout(onClose, onCloseDelay);
-            setRemoveTimer(timer);
-        }
-    };
-    React.useEffect(function () {
-        // clear timers if previously set
-        fadeOutTimer && clearTimeout(fadeOutTimer);
-        removeTimer && clearTimeout(removeTimer);
-        setClassname('lui-msg-toast-show');
-        if (!requireDismiss && displayTimeout !== 0) {
-            // set a new timer
-            var timer = window.setTimeout(function () {
-                setClassname('lui-msg-toast-hide');
-                callOnCloseAfterDissolved();
-            }, displayTimeout);
-            setFadeOutTimer(timer);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [requireDismiss, displayTimeout, children]);
-    React.useEffect(function () {
-        if (!display) {
-            setClassname('lui-msg-toast-hide');
-            callOnCloseAfterDissolved();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [display]);
-    return (React__default["default"].createElement("div", { role: "status", "data-testid": className, className: "lui-msg-".concat(level, " lui-msg-toast lui-msg-toast-dismissable ").concat(className) },
-        React__default["default"].createElement("i", { className: "lui-msg-status-icon material-icons-round" }, materialIcon),
-        children,
-        React__default["default"].createElement("button", { "aria-label": "Close dialog", type: type || 'button', onClick: function () {
-                setClassname('lui-msg-toast-hide');
-                callOnCloseAfterDissolved();
-            } },
-            React__default["default"].createElement("i", { className: "material-icons-round" }, "close"))));
-};
-
-var UIMessagingContext = React.createContext({
-    // @ts-ignore
-    showMessage: function (props) { }
-});
-function useShowLUIMessage() {
-    return React.useContext(UIMessagingContext).showMessage;
-}
-var LuiMessagingContextProvider = function (props) {
-    var _a = React.useState(), _message = _a[0], setMessage = _a[1];
-    var _b = React.useState(), _messageType = _b[0], setMessageType = _b[1];
-    var _c = React.useState('success'), _messageLevel = _c[0], setMessageLevel = _c[1];
-    var _d = React.useState(true), _requireDismiss = _d[0], setRequireDismiss = _d[1];
-    var showMessage = function (props) {
-        setMessage(props.message);
-        setMessageType(props.messageType);
-        setMessageLevel(props.messageLevel);
-        setRequireDismiss(props.requireDismiss === undefined
-            ? props.messageLevel === 'error'
-            : props.requireDismiss);
-    };
-    var renderMessage = function () {
-        switch (_messageType) {
-            case 'toast':
-                return (React__default["default"].createElement(LuiToastMessage, { onClose: function () {
-                        setMessage(undefined);
-                    }, level: _messageLevel, requireDismiss: _requireDismiss },
-                    React__default["default"].createElement("span", { "data-testid": 'toastMessageShow' }, typeof _message === 'string' ? React__default["default"].createElement("h2", null, _message) : _message)));
-            default:
-                return null;
-        }
-    };
-    return (React__default["default"].createElement(UIMessagingContext.Provider, { value: { showMessage: showMessage } },
-        _message && renderMessage(),
-        props.children));
-};
-
 var LuiExpandableBanner = function (props) {
     var contentMaxHeight = props.contentMaxHeight;
     var initiallyCollapsed = React.useRef(props.start === 'expanded' ? false : true);
@@ -27961,8 +27880,8 @@ ReactSplitGrid.defaultProps = {
     onDrag: undefined,
 };
 
-var css_248z$i = ".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; /*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$i);
+var css_248z$k = ".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; /*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$k);
 
 var GutterComponent = function (props) {
     var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
@@ -31721,8 +31640,8 @@ var LuiTabsPanelSwitch = function (props) {
         } }, tabProps), children));
 };
 
-var css_248z$h = "/**\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$h);
+var css_248z$j = "/**\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$j);
 
 var LuiError = function (_a) {
     var error = _a.error, className = _a.className;
@@ -32084,8 +32003,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
     return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
 });
 
-var css_248z$g = ".LuiTextInput.money input {\n  background-image: url(\"data:image/svg+xml;utf8,   <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>   <text x='4' y='31' font-size='15' font-family='Open Sans, system-ui, sans-seri' text-anchor='middle'>$</text>  </svg>\");\n  background-position: 10px center;\n  background-repeat: no-repeat;\n  padding-left: 22px;\n  line-height: unset;\n}";
-styleInject(css_248z$g);
+var css_248z$i = ".LuiTextInput.money input {\n  background-image: url(\"data:image/svg+xml;utf8,   <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>   <text x='4' y='31' font-size='15' font-family='Open Sans, system-ui, sans-seri' text-anchor='middle'>$</text>  </svg>\");\n  background-position: 10px center;\n  background-repeat: no-repeat;\n  padding-left: 22px;\n  line-height: unset;\n}";
+styleInject(css_248z$i);
 
 var MoneyParser = /** @class */ (function () {
     function MoneyParser(init, options) {
@@ -32696,7 +32615,7 @@ function hash$2 (value, length) {
  * @param {string} value
  * @return {string}
  */
-function trim (value) {
+function trim$1 (value) {
 	return value.trim()
 }
 
@@ -32913,7 +32832,7 @@ function dealloc (value) {
  * @return {string}
  */
 function delimit (type) {
-	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
+	return trim$1(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
 }
 
 /**
@@ -33162,7 +33081,7 @@ function ruleset (value, root, parent, index, offset, rules, points, type, props
 
 	for (var i = 0, j = 0, k = 0; i < index; ++i)
 		for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
-			if (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\f/g, rule[x])))
+			if (z = trim$1(j > 0 ? rule[x] + ' ' + y : replace(y, /&\f/g, rule[x])))
 				props[k++] = z;
 
 	return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length)
@@ -36095,7 +36014,7 @@ var MenuPortal = /*#__PURE__*/function (_Component2) {
         value: {
           getPortalPlacement: this.getPortalPlacement
         }
-      }, appendTo ? /*#__PURE__*/require$$1.createPortal(menuWrapper, appendTo) : menuWrapper);
+      }, appendTo ? /*#__PURE__*/ReactDOM.createPortal(menuWrapper, appendTo) : menuWrapper);
     }
   }]);
 
@@ -39737,9 +39656,9 @@ var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
 
 var Select = StateManagedSelect;
 
-var css_248z$f = "";
+var css_248z$h = "";
 var colors = {"charcoal":"#2a292c","fuscous":"#6b6966","gray":"#989189","silver":"#beb9b4","lily":"#eaeaea","dew":"#DAD7D6","hint":"#f9f9f9","snow":"#ffffff","white":"#ffffff","teal":"#00425d","sea":"#007198","electric":"#0096cc","spray":"#73c8e1","polar":"#e2f3f7","memesia":"#1F69C3","sherpa":"#004b50","surfie":"#017a76","persian":"#00a599","downy":"#73cdc8","iceberg":"#dcf5f0","sacramento":"#004e32","salem":"#08814d","pigment":"#0aa245","granny":"#9bd79b","panache":"#e9fae7","brand-primary":"#004b50","brand-secondary":"#017a76","engine":"#cc0000","carrot":"#EA6A2E","kendall":"#F5CCCC","elizabeth":"#FBDED0","andrea":"#3A7CDF","celestial":"#D7E5F9","golf":"#0AA345","error":"#cc0000","error-bg":"#F5CCCC","error-focus":"#5a0000","warning":"#EA6A2E","warning-bg":"#fbdfd2","warning-focus":"#b33a01","success":"#0aa245","success-bg":"#e9fae7","info":"#3A7CDF","info-bg":"#d8e5f9","visited":"#00425d","green-hover":"#107c3a","green-active":"#094a22","green-btn":"#0aa245","txt-link":"#1F69C3","primary-hover-btn":"#005678","selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#2a292c","base-type-color":"#2a292c","input-text":"#2a292c","input-placeholder":"#6b6966","input-placeholder-when-disabled":"#989189","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#6b6966","linz-color-primary":"#023d48","linz-color-primary-hover":"#01818a","linz-color-tertiary":"#e1e44a","linz-color-tertiary-hover":"#cdcf59","color-test-pink":"#f09","linz-linear-gradient-blue":"linear-gradient(70deg, #00425d 12%, #007198 100%)","linz-linear-gradient-teal":"linear-gradient(270deg, #00a599 1%, #73cdc8 100%)"};
-styleInject(css_248z$f);
+styleInject(css_248z$h);
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 
@@ -39924,14 +39843,6 @@ var useEscapeFunction = function (onEscape) {
         };
     }, [escFunction]);
 };
-var useEscapeFunction2 = function (onEscape, trigger) {
-    if (trigger === void 0) { trigger = 'keydown'; }
-    var escFunction = React.useCallback(function (event) { return event.key === 'Escape' && onEscape(event); }, [onEscape]);
-    React.useEffect(function () {
-        document.addEventListener(trigger, escFunction);
-        return function () { return document.removeEventListener(trigger, escFunction); };
-    }, [escFunction]);
-};
 /**
  * A hook which allows handling of click event anywhere on the page.
  * Provides a way of handling clicks done inside or outside the element bound to the returned react ref.
@@ -41867,7 +41778,7 @@ var _react = React__default["default"];
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require$$1__default["default"];
+var _reactDom = ReactDOM__default["default"];
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
 
@@ -42291,118 +42202,8 @@ var LuiModalHeader = function (props) {
                 React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-/**
- * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
- * usage:
- ```typescript
-  const refElement = React.useRef<HTMLButtonElement>(null);
-  const handleClickOutside = () => {
-      console.log("hello world");
-  };
-  useClickedOutsideElement(refElement, handleClickOutside);
-  return <button ref={refElement}>Click Me!</button>;
- ```
- */
-function useClickedOutsideElement(refElement, handleClickOutside) {
-    React__default["default"].useEffect(function () {
-        function onOutsideClicked(event) {
-            var element = refElement.current;
-            if (!(element === null || element === void 0 ? void 0 : element.contains(event.target))) {
-                handleClickOutside();
-            }
-        }
-        document.addEventListener('mousedown', onOutsideClicked);
-        return function () {
-            document.removeEventListener('mousedown', onOutsideClicked);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-}
-
-var _a;
-// this is here for the tests
-var isTest = typeof process !== 'undefined' && ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test';
-if (!isTest)
-    Modal.setAppElement('#root');
-var LuiModalV2 = function (props) {
-    var _a;
-    var modalRef = React.useRef(null);
-    var handleClickOutside = React.useCallback(function () { var _a; return props.shouldCloseOnOverlayClick && ((_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props)); }, [props.shouldCloseOnEsc, props.onClose]);
-    useClickedOutsideElement(modalRef, handleClickOutside);
-    var handleEsc = React.useCallback(function (e) {
-        var _a;
-        if (props.shouldCloseOnEsc !== false) {
-            e.stopPropagation();
-            (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        }
-    }, [props.shouldCloseOnEsc, props.onClose]);
-    useEscapeFunction2(handleEsc, props.shouldCloseOnEsc === 'use-keyup' ? 'keyup' : 'keydown');
-    var handleAutoFocus = function (el) {
-        if (props.preventAutoFocus)
-            return;
-        if (el && !el.contains(el.ownerDocument.activeElement)) {
-            var firstFocusableElement = el.querySelector('input,button');
-            firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
-        }
-    };
-    var showCloseButton = Boolean(props.showCloseButton && props.onClose);
-    var showHelpButton = Boolean(props.helpLink);
-    var showButtons = showCloseButton || showHelpButton;
-    var showHeadingIcon = props.headingIcon && !props.isLoading;
-    return (React__default["default"].createElement(Modal, { key: props.key, isOpen: true, 
-        // disble the `shouldClose` props as we handle them ourselves
-        shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', 
-        // required to prevent warnings that are not applicable in real usage
-        ariaHideApp: !isTest, parentSelector: props.appendToElement },
-        React__default["default"].createElement("div", { ref: function (el) {
-                modalRef.current = el;
-                handleAutoFocus(el);
-            }, className: clsx('lui-modal-v2 lui-box-shadow', props.maxWidth && 'lui-max-width', props.className) },
-            React__default["default"].createElement("div", { className: "lui-modal-v2-header", id: "lui-modal-v2-header" },
-                props.isLoading && (React__default["default"].createElement(LuiMiniSpinner, { size: 20, divProps: { className: 'lui-modal-v2-header-spinner' } })),
-                showHeadingIcon && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-icon" },
-                    React__default["default"].createElement(LuiIcon, __assign({ size: "md", name: "", alt: "Help" }, props.headingIcon, { className: clsx('', (_a = props.headingIcon) === null || _a === void 0 ? void 0 : _a.className) })))),
-                props.headingText && (React__default["default"].createElement("h2", { className: "lui-modal-v2-header-title" }, props.headingText)),
-                showButtons && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-buttons" },
-                    showHelpButton && React__default["default"].createElement(HelpButton, { helpLink: props.helpLink }),
-                    showCloseButton && React__default["default"].createElement(CloseButton, { onClose: props.onClose })))),
-            React__default["default"].createElement("div", { className: "lui-modal-v2-contents" }, props.children))));
-};
-var LuiModalV2Buttons = function (props) { return (React__default["default"].createElement("div", { className: clsx('lui-modal-v2-btn-row', props.className) }, props.children)); };
-var HelpButton = function (props) { return (React__default["default"].createElement("button", { "aria-label": "Modal Help", title: "Help", className: "lui-modal-v2-header-help-btn", onClick: typeof props.helpLink === 'string'
-        ? function () { return window.open(props.helpLink, '_blank'); }
-        : props.helpLink },
-    React__default["default"].createElement(LuiIcon, { name: "ic_help_outline", alt: "Help", size: "md" }))); };
-var CloseButton = function (props) { return (React__default["default"].createElement("button", { "aria-label": "Modal Close", title: "Close", className: "lui-modal-v2-header-close-btn", onClick: props.onClose },
-    React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "md" }))); };
-/** Allows injecting the modal header text */
-var LuiModalV2HeadingText = function (props) {
-    var _a = React.useState(), target = _a[0], setTarget = _a[1];
-    React.useEffect(function () {
-        var modalHeader = document.querySelector('#lui-modal-v2-header');
-        modalHeader && setTarget(modalHeader);
-    }, []);
-    if (!target)
-        return null;
-    return require$$1.createPortal(React__default["default"].createElement("h2", { className: clsx('lui-modal-v2-header-title lui-modal-v2-header-title-portal', props.className) }, props.children), target);
-};
-
-var LuiAlertModalV2 = function (props) {
-    var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
-    var materialIcon = getMaterialIconForLevel(level);
-    var status = Object.keys(ICON_STATUS).includes(level)
-        ? level
-        : 'interactive';
-    return (React__default["default"].createElement(LuiModalV2, __assign({}, rest, { className: clsx("lui-modal-v2-".concat(level), className), headingIcon: {
-            name: "ic_".concat(materialIcon),
-            alt: "".concat(level, " status icon"),
-            size: 'md',
-            status: status
-        } }), children));
-};
-
-var css_248z$e = "@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  user-select: none;\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\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
-styleInject(css_248z$e);
+var css_248z$g = "@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  user-select: none;\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\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
+styleInject(css_248z$g);
 
 /**
  * @internal
@@ -46964,7 +46765,7 @@ function TippyGenerator(tippy) {
         mutableBox.ref = node;
         preserveRef(children.ref, node);
       }
-    }) : null, mounted && /*#__PURE__*/require$$1.createPortal(render ? render(toDataAttributes(attrs), singletonContent, mutableBox.instance) : content, mutableBox.container));
+    }) : null, mounted && /*#__PURE__*/ReactDOM.createPortal(render ? render(toDataAttributes(attrs), singletonContent, mutableBox.instance) : content, mutableBox.container));
   }
 
   return Tippy;
@@ -46999,6 +46800,34 @@ var LuiTooltip = function (props) {
     return React__default["default"].createElement(Tippy, __assign({}, tippyProps), children);
 };
 
+/**
+ * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
+ * usage:
+ ```typescript
+  const refElement = React.useRef<HTMLButtonElement>(null);
+  const handleClickOutside = () => {
+      console.log("hello world");
+  };
+  useClickedOutsideElement(refElement, handleClickOutside);
+  return <button ref={refElement}>Click Me!</button>;
+ ```
+ */
+function useClickedOutsideElement(refElement, handleClickOutside) {
+    React__default["default"].useEffect(function () {
+        function onOutsideClicked(event) {
+            var element = refElement.current;
+            if (!(element === null || element === void 0 ? void 0 : element.contains(event.target))) {
+                handleClickOutside();
+            }
+        }
+        document.addEventListener('mousedown', onOutsideClicked);
+        return function () {
+            document.removeEventListener('mousedown', onOutsideClicked);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}
+
 var getFillClassName = function (fillVariation, backgroundFill) {
     if (backgroundFill) {
         return 'LuiBadge--fill';
@@ -47048,8 +46877,8 @@ var LuiSidePanelProvider = function (_a) {
         React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
 };
 
-var css_248z$d = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  width: 40px;\n  height: 20px;\n  background: grey;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 16px;\n  border-radius: 18px;\n  transition: 0.2s;\n  background: #fff;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n  left: calc(100% - 2px);\n  transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n  width: 20px;\n}";
-styleInject(css_248z$d);
+var css_248z$f = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  width: 40px;\n  height: 20px;\n  background: grey;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 16px;\n  border-radius: 18px;\n  transition: 0.2s;\n  background: #fff;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n  left: calc(100% - 2px);\n  transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n  width: 20px;\n}";
+styleInject(css_248z$f);
 
 var LuiSwitchButton = function (props) {
     var generatedId = useGenerateOrDefaultId();
@@ -54680,8 +54509,8 @@ var LuiAccordicardStatic = function (props) {
             React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
 };
 
-var css_248z$c = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-accordion {\n  padding: 8px;\n  display: flex;\n  border-radius: 5px;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n  transition: all 0.3s ease-in-out;\n  transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n  transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n  padding: 4px;\n}\n.lui-accordion h4 {\n  padding: 4px;\n}\n.lui-accordion > summary {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lui-accordion > summary h4 {\n  margin-top: 0;\n  display: inline-block;\n}\n.lui-accordion > summary::marker, .lui-accordion > summary::-webkit-details-marker {\n  display: none;\n}";
-styleInject(css_248z$c);
+var css_248z$e = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-accordion {\n  padding: 8px;\n  display: flex;\n  border-radius: 5px;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n  transition: all 0.3s ease-in-out;\n  transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n  transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n  padding: 4px;\n}\n.lui-accordion h4 {\n  padding: 4px;\n}\n.lui-accordion > summary {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lui-accordion > summary h4 {\n  margin-top: 0;\n  display: inline-block;\n}\n.lui-accordion > summary::marker, .lui-accordion > summary::-webkit-details-marker {\n  display: none;\n}";
+styleInject(css_248z$e);
 
 var LuiAccordion = function (props) {
     var _a = props.expanded, expanded = _a === void 0 ? false : _a, heading = props.heading, children = props.children, _b = props.iconColor, iconColor = _b === void 0 ? '#017A76' : _b, className = props.className, _c = props.style, style = _c === void 0 ? {} : _c;
@@ -54792,8 +54621,8 @@ var LuiMultiSwitch = function (_a) {
         React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
 };
 
-var css_248z$b = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  user-select: none;\n  color: #6b6966;\n  line-height: 16px;\n  padding: 0.5rem 0.5rem;\n}";
-styleInject(css_248z$b);
+var css_248z$d = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  user-select: none;\n  color: #6b6966;\n  line-height: 16px;\n  padding: 0.5rem 0.5rem;\n}";
+styleInject(css_248z$d);
 
 function $c1d7fb2ec91bae71$var$Item(props) {
     return null;
@@ -58293,16 +58122,16 @@ function DefaultEmptyIndicator() {
     return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
 }
 
-var css_248z$a = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.RadioItemRenderer {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 0 0 2rem;\n}\n.RadioItemRenderer::before {\n  content: \"\";\n  height: 1.5rem;\n  min-width: 1.5rem;\n  width: 1.5rem;\n  border: 2px solid #007198;\n  border-radius: 50%;\n  background-color: transparent;\n  position: absolute;\n  left: 0;\n  top: 0;\n  margin-right: 0.75rem;\n}\n.RadioItemRenderer:after {\n  content: \"\";\n  position: absolute;\n  left: 5px;\n  top: 5px;\n  background-color: #007198;\n  height: 14px;\n  min-width: 14px;\n  width: 14px;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n.RadioItemRenderer-isSelected:after {\n  opacity: 1;\n}";
-styleInject(css_248z$a);
+var css_248z$c = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.RadioItemRenderer {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 0 0 2rem;\n}\n.RadioItemRenderer::before {\n  content: \"\";\n  height: 1.5rem;\n  min-width: 1.5rem;\n  width: 1.5rem;\n  border: 2px solid #007198;\n  border-radius: 50%;\n  background-color: transparent;\n  position: absolute;\n  left: 0;\n  top: 0;\n  margin-right: 0.75rem;\n}\n.RadioItemRenderer:after {\n  content: \"\";\n  position: absolute;\n  left: 5px;\n  top: 5px;\n  background-color: #007198;\n  height: 14px;\n  min-width: 14px;\n  width: 14px;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n.RadioItemRenderer-isSelected:after {\n  opacity: 1;\n}";
+styleInject(css_248z$c);
 
 function RadioItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
     return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
 }
 
-var css_248z$9 = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
-styleInject(css_248z$9);
+var css_248z$b = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
+styleInject(css_248z$b);
 
 function CheckboxItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
@@ -58326,8 +58155,8 @@ function LuiSideMenuItem(_a) {
             React__default["default"].createElement("span", { className: "navText" }, label))));
 }
 
-var css_248z$8 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n@keyframes animate-stripes {\n  100% {\n    background-position: 100px 0;\n  }\n}\n.ProgressBar, .ProgressBar-PROC, .ProgressBar-COMP, .ProgressBar-FAIL {\n  height: 5px;\n  width: 100%;\n  background-color: #eaeaea;\n  border-radius: 3px;\n}\n.ProgressBar-FAIL {\n  background-color: #cc0000;\n}\n.ProgressBar-COMP {\n  background-color: #0aa245;\n}\n.ProgressBar-PROC {\n  background-color: #0096cc;\n  transition: width 0.3s ease-in-out;\n}\n.ProgressBar-PROC.indeterminate {\n  background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, transparent 75%);\n  background-size: 50px 100%;\n  animation: animate-stripes 5s linear infinite;\n}";
-styleInject(css_248z$8);
+var css_248z$a = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n@keyframes animate-stripes {\n  100% {\n    background-position: 100px 0;\n  }\n}\n.ProgressBar, .ProgressBar-PROC, .ProgressBar-COMP, .ProgressBar-FAIL {\n  height: 5px;\n  width: 100%;\n  background-color: #eaeaea;\n  border-radius: 3px;\n}\n.ProgressBar-FAIL {\n  background-color: #cc0000;\n}\n.ProgressBar-COMP {\n  background-color: #0aa245;\n}\n.ProgressBar-PROC {\n  background-color: #0096cc;\n  transition: width 0.3s ease-in-out;\n}\n.ProgressBar-PROC.indeterminate {\n  background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, transparent 75%);\n  background-size: 50px 100%;\n  animation: animate-stripes 5s linear infinite;\n}";
+styleInject(css_248z$a);
 
 var LuiProgressBar = function (_a) {
     var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
@@ -58355,8 +58184,8 @@ var LuiProgressBar = function (_a) {
         React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
 };
 
-var css_248z$7 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Toolbar {\n  position: absolute;\n  align-items: center;\n  align-self: center;\n  background: #ffffff;\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  margin: 0 0.75rem;\n  padding: 0;\n  width: fit-content;\n  z-index: 1000;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n\n.Left {\n  justify-self: start;\n}\n\n.Right {\n  justify-self: end;\n}";
-styleInject(css_248z$7);
+var css_248z$9 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Toolbar {\n  position: absolute;\n  align-items: center;\n  align-self: center;\n  background: #ffffff;\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  margin: 0 0.75rem;\n  padding: 0;\n  width: fit-content;\n  z-index: 1000;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n\n.Left {\n  justify-self: start;\n}\n\n.Right {\n  justify-self: end;\n}";
+styleInject(css_248z$9);
 
 exports.ToolbarDirection = void 0;
 (function (ToolbarDirection) {
@@ -58378,8 +58207,8 @@ var ToolbarIcon = function (_a) {
     return iconImage ? (React__default["default"].createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default["default"].createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
 };
 
-var css_248z$6 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
-styleInject(css_248z$6);
+var css_248z$8 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
+styleInject(css_248z$8);
 
 /**
  * Create button for using either LuiIcon or Image.
@@ -58442,8 +58271,8 @@ var useMediaQuery = function (query) {
     return matches;
 };
 
-var css_248z$5 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiCounter-round {\n  background: #007198;\n  color: #ffffff;\n  text-align: center;\n  width: 1.5em;\n  height: 1.5em;\n  border-radius: 50%;\n  display: inline-block;\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  pointer-events: none;\n}";
-styleInject(css_248z$5);
+var css_248z$7 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiCounter-round {\n  background: #007198;\n  color: #ffffff;\n  text-align: center;\n  width: 1.5em;\n  height: 1.5em;\n  border-radius: 50%;\n  display: inline-block;\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  pointer-events: none;\n}";
+styleInject(css_248z$7);
 
 var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
     var selectedNum = props.selectedNum, totalNum = props.totalNum, _a = props.shape, shape = _a === void 0 ? 'rect' : _a, _b = props.countZero, countZero = _b === void 0 ? true : _b, title = props.title, className = props.className, rest = __rest(props, ["selectedNum", "totalNum", "shape", "countZero", "title", "className"]);
@@ -58458,8 +58287,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null, !(selectedNum === 0 && !countZero) && (React__default["default"].createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
 });
 
-var css_248z$4 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n  display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n  display: flex;\n}\n\n.lui-pagination-controller {\n  container-type: inline-size;\n}\n@container (min-width: 500px) {\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: flex;\n  }\n}\n@container (max-width: 499px) {\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: flex;\n  }\n}\n\n.lui-pagination {\n  display: flex;\n  user-select: none;\n  justify-content: center;\n}\n.lui-pagination-page-counter {\n  display: flex;\n  align-items: center;\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n  color: #2a292c;\n  height: 40px;\n  padding: 0.5rem 0.75rem;\n  vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n  fill: #2a292c;\n}\n.lui-pagination .lui-button:hover {\n  color: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n  background-color: #007198;\n  color: #ffffff;\n}\n.lui-pagination-ellipsis {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n  fill: #989189 !important;\n}";
-styleInject(css_248z$4);
+var css_248z$6 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n  display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n  display: flex;\n}\n\n.lui-pagination-controller {\n  container-type: inline-size;\n}\n@container (min-width: 500px) {\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: flex;\n  }\n}\n@container (max-width: 499px) {\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: flex;\n  }\n}\n\n.lui-pagination {\n  display: flex;\n  user-select: none;\n  justify-content: center;\n}\n.lui-pagination-page-counter {\n  display: flex;\n  align-items: center;\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n  color: #2a292c;\n  height: 40px;\n  padding: 0.5rem 0.75rem;\n  vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n  fill: #2a292c;\n}\n.lui-pagination .lui-button:hover {\n  color: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n  background-color: #007198;\n  color: #ffffff;\n}\n.lui-pagination-ellipsis {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n  fill: #989189 !important;\n}";
+styleInject(css_248z$6);
 
 var LuiPagination = function (_a) {
     var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
@@ -58569,11 +58398,11 @@ var LuiPagination = function (_a) {
             React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
 };
 
-var css_248z$3 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Separator {\n  background-color: #eaeaea;\n  position: absolute;\n  display: flex;\n  justify-content: space-around;\n  transition-property: background-color;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator-arrows {\n  align-self: center;\n  position: relative;\n  opacity: 0;\n  transition-property: opacity;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n  background-color: #73c8e1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n  opacity: 1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n  display: inline-block;\n}";
-styleInject(css_248z$3);
+var css_248z$5 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Separator {\n  background-color: #eaeaea;\n  position: absolute;\n  display: flex;\n  justify-content: space-around;\n  transition-property: background-color;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator-arrows {\n  align-self: center;\n  position: relative;\n  opacity: 0;\n  transition-property: opacity;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n  background-color: #73c8e1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n  opacity: 1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n  display: inline-block;\n}";
+styleInject(css_248z$5);
 
-var css_248z$2 = ".Control {\n  transition: opacity 0.2s ease;\n  position: absolute;\n  margin-left: 0 !important;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}";
-styleInject(css_248z$2);
+var css_248z$4 = ".Control {\n  transition: opacity 0.2s ease;\n  position: absolute;\n  margin-left: 0 !important;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}";
+styleInject(css_248z$4);
 
 var useForkRef = function (forwardedRef) {
     var localRef = React.useRef(null);
@@ -59331,8 +59160,8 @@ var keyDownHandler = function (e) {
     return valueNow + delta;
 };
 
-var css_248z$1 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Splitter {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n  position: relative;\n  z-index: 0;\n  background: #f9f9f9;\n  overflow: auto;\n}\n.Splitter.resizing * {\n  pointer-events: none;\n  user-select: none;\n}";
-styleInject(css_248z$1);
+var css_248z$3 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Splitter {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n  position: relative;\n  z-index: 0;\n  background: #f9f9f9;\n  overflow: auto;\n}\n.Splitter.resizing * {\n  pointer-events: none;\n  user-select: none;\n}";
+styleInject(css_248z$3);
 
 /**
  * Container that appends a separator when the children count equals 2.
@@ -59384,8 +59213,8 @@ var useSplitterRef = function () {
     return { ref: ref, setRatio: setRatio };
 };
 
-var css_248z = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiBannerV2 {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n  font-size: 16px;\n  display: grid;\n  align-items: center;\n  min-height: 3rem;\n  position: relative;\n  background-color: #ffffff;\n  border-radius: 5px;\n  padding-bottom: 0.5rem;\n  padding-top: 0.5rem;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.LuiBannerV2 > :first-child {\n  margin-top: 0;\n}\n.LuiBannerV2.has-level {\n  padding-left: 3.25rem;\n  border-left-width: 0.5rem;\n  border-left-style: solid;\n}\n.LuiBannerV2.warning {\n  border-left-color: #EA6A2E;\n}\n.LuiBannerV2.error {\n  border-left-color: #cc0000;\n}\n.LuiBannerV2.info {\n  border-left-color: #3A7CDF;\n}\n.LuiBannerV2.success {\n  border-left-color: #0AA345;\n}\n.LuiBannerV2.can-dismiss {\n  padding-right: 2.5rem;\n}\n.LuiBannerV2-Icon {\n  position: absolute;\n  left: 0.5rem;\n  top: 0.5rem;\n}\n.LuiBannerV2-Icon.warning {\n  color: #EA6A2E;\n}\n.LuiBannerV2-Icon.error {\n  color: #cc0000;\n}\n.LuiBannerV2-Icon.info {\n  color: #3A7CDF;\n}\n.LuiBannerV2-Icon.success {\n  color: #0AA345;\n}\n.LuiBannerV2-Icon svg {\n  fill: currentColor;\n}\n.LuiBannerV2-Dismiss {\n  display: flex;\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: transparent;\n  padding: 0;\n}\n.LuiBannerV2-Dismiss svg {\n  fill: #6b6966;\n}";
-styleInject(css_248z);
+var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiBannerV2 {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n  font-size: 16px;\n  display: grid;\n  align-items: center;\n  min-height: 3rem;\n  position: relative;\n  background-color: #ffffff;\n  border-radius: 5px;\n  padding-bottom: 0.5rem;\n  padding-top: 0.5rem;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.LuiBannerV2 > :first-child {\n  margin-top: 0;\n}\n.LuiBannerV2.has-level {\n  padding-left: 3.25rem;\n  border-left-width: 0.5rem;\n  border-left-style: solid;\n}\n.LuiBannerV2.warning {\n  border-left-color: #EA6A2E;\n}\n.LuiBannerV2.error {\n  border-left-color: #cc0000;\n}\n.LuiBannerV2.info {\n  border-left-color: #3A7CDF;\n}\n.LuiBannerV2.success {\n  border-left-color: #0AA345;\n}\n.LuiBannerV2.can-dismiss {\n  padding-right: 2.5rem;\n}\n.LuiBannerV2-Icon {\n  position: absolute;\n  left: 0.5rem;\n  top: 0.5rem;\n}\n.LuiBannerV2-Icon.warning {\n  color: #EA6A2E;\n}\n.LuiBannerV2-Icon.error {\n  color: #cc0000;\n}\n.LuiBannerV2-Icon.info {\n  color: #3A7CDF;\n}\n.LuiBannerV2-Icon.success {\n  color: #0AA345;\n}\n.LuiBannerV2-Icon svg {\n  fill: currentColor;\n}\n.LuiBannerV2-Dismiss {\n  display: flex;\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: transparent;\n  padding: 0;\n}\n.LuiBannerV2-Dismiss svg {\n  fill: #6b6966;\n}";
+styleInject(css_248z$2);
 
 var LuiBannerV2 = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
@@ -59404,6 +59233,462 @@ var LuiBannerV2 = React.forwardRef(function (_a, ref) {
         onDismiss && (React__default["default"].createElement("button", __assign({}, dismissButtonProps, { className: clsx('LuiBannerV2-Dismiss', dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.className), "aria-label": (_b = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps['aria-label']) !== null && _b !== void 0 ? _b : 'Dismiss', type: (_c = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.type) !== null && _c !== void 0 ? _c : 'button', onClick: onDismiss }), (_d = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.children) !== null && _d !== void 0 ? _d : (React__default["default"].createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
 });
 
+var css_248z$1 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToastProvider {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n  grid-template-areas: \"left center right\";\n  padding: 1.5rem;\n  z-index: 1200;\n}\n.ToastProvider .LuiBannerV2 {\n  justify-content: flex-start;\n  min-height: 4rem;\n  min-width: 320px;\n  max-width: min(50vw - 2rem, 400px);\n  background-color: #f9f9f9;\n}\n.ToastProvider .LuiBannerV2-Icon {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ToastProvider .LuiBannerV2-Icon.warning {\n  transform: translateY(calc(-50% - 1px));\n}\n.ToastProvider .LuiBannerV2 * {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-weight: 400;\n}";
+styleInject(css_248z$1);
+
+var topRightToastsHeight = function (portal) {
+    var _a, _b, _c, _d;
+    var toasts = (_b = (_a = portal.getElementsByClassName('topRight')[0]) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-toastid]')) !== null && _b !== void 0 ? _b : [];
+    var lastOne = toasts[toasts.length - 1];
+    var rect = lastOne === null || lastOne === void 0 ? void 0 : lastOne.getBoundingClientRect();
+    return ((_c = rect === null || rect === void 0 ? void 0 : rect.top) !== null && _c !== void 0 ? _c : 0) + ((_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0);
+};
+var observer = function (portal) {
+    return new MutationObserver(function () {
+        var oldToasts = document === null || document === void 0 ? void 0 : document.querySelectorAll('.lui-msg-toast');
+        if (oldToasts === null || oldToasts === void 0 ? void 0 : oldToasts.length) {
+            var newTop_1 = Math.max(topRightToastsHeight(portal) - 24, 0);
+            oldToasts.forEach(function (el) {
+                var oldToast = el;
+                var oldTop = parseInt(oldToast.style.top);
+                if (newTop_1 !== oldTop) {
+                    oldToast.style.top = "".concat(newTop_1, "px");
+                    oldToast.style.transition = oldTop > newTop_1 ? 'top 0.2s ease-in' : '';
+                }
+            });
+        }
+    });
+};
+/**
+ * Observes DOM changes in the elements tree to identify older toasts
+ * that have been added to the page, to calculate a CSS top value so
+ * that these are stacked below the new ones, if any.
+ */
+var observeOlderToasts = function (portal) {
+    return observer(portal).observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+};
+
+var portalId = 'lui-global-toast-container';
+/**
+ * Retrieves the toast provider container element. It creates a new
+ * one if it hasn't been created already.
+ *
+ * @description It is expected that application A, renders application B, that happens to render
+ * the new toasts as well. In this case, application B will still render the context
+ * provider to handle their toasts, but it will re-use the portal created by A.
+ *
+ * When the provider is created, it will observe older toasts coming to the screen
+ * to make them visually align with the new ones. This needs to happens when the portal is
+ * created, regardless of what app has created it.
+ *
+ * @returns HTMLDivElement
+ */
+var getToastProviderEl = function () {
+    var portal = document.getElementById(portalId);
+    if (portal) {
+        return portal;
+    }
+    portal = document.createElement('div');
+    portal.id = portalId;
+    portal.className = 'ToastProvider';
+    if (document.body.firstChild) {
+        document.body.insertBefore(portal, document.body.firstChild);
+    }
+    else {
+        document.body.appendChild(portal);
+    }
+    // Register the observer when the portal is created to visually align older toastd with new ones
+    observeOlderToasts(portal);
+    return portal;
+};
+
+var css_248z = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToastSection {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 0.5rem;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  /* IE and Edge */\n  -ms-overflow-style: none;\n  /* Firefox */\n  scrollbar-width: none;\n  /* Opera Safari Chrome */\n}\n.ToastSection::-webkit-scrollbar {\n  display: none;\n}\n.ToastSection > :not(:last-child) {\n  margin-bottom: 0.5rem;\n}\n.ToastSection [data-toastId] {\n  pointer-events: all;\n}\n.ToastSection.topLeft {\n  grid-area: left;\n}\n.ToastSection.topLeft [data-toastId] {\n  margin-right: auto;\n  max-height: 100vh;\n  animation: 0.4s topLeftin forwards;\n}\n@keyframes topLeftin {\n  0% {\n    opacity: 0;\n    transform: translateX(-40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(0%);\n  }\n}\n.ToastSection.topLeft [data-toastId].ItemDeleted {\n  animation: 0.4s topLeftout forwards;\n}\n@keyframes topLeftout {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n    transform: translateX(-40%);\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    margin-bottom: 0;\n  }\n}\n.ToastSection.topCenter {\n  grid-area: center;\n}\n.ToastSection.topCenter [data-toastId] {\n  margin-left: auto;\n  margin-right: auto;\n  max-height: 100vh;\n  animation: 0.4s topCenterin forwards;\n}\n@keyframes topCenterin {\n  0% {\n    opacity: 0;\n    transform: translateY(-40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(0%);\n  }\n}\n.ToastSection.topCenter [data-toastId].ItemDeleted {\n  animation: 0.4s topCenterout forwards;\n}\n@keyframes topCenterout {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n    transform: translateY(-40%);\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    margin-bottom: 0;\n  }\n}\n.ToastSection.topRight {\n  grid-area: right;\n}\n.ToastSection.topRight [data-toastId] {\n  margin-left: auto;\n  max-height: 100vh;\n  animation: 0.4s topRightin forwards;\n}\n@keyframes topRightin {\n  0% {\n    opacity: 0;\n    transform: translateX(40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(0%);\n  }\n}\n.ToastSection.topRight [data-toastId].ItemDeleted {\n  animation: 0.4s topRightout forwards;\n}\n@keyframes topRightout {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n    transform: translateX(40%);\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    margin-bottom: 0;\n  }\n}\n.ToastSection.bottomLeft {\n  margin-right: auto;\n  grid-area: left;\n  margin-top: auto;\n}\n.ToastSection.bottomLeft [data-toastId] {\n  animation: 0.4s bottomLeftin forwards;\n}\n@keyframes bottomLeftin {\n  0% {\n    opacity: 0;\n    max-height: 0;\n  }\n  50% {\n    max-height: 100vh;\n    opacity: 0;\n    transform: translateX(-40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(0%);\n  }\n}\n.ToastSection.bottomLeft [data-toastId].ItemDeleted {\n  animation: 0.4s bottomLeftout forwards;\n}\n@keyframes bottomLeftout {\n  0% {\n    opacity: 1;\n    max-height: 100vh;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(-40%);\n  }\n}\n.ToastSection.bottomCenter {\n  grid-area: center;\n  margin-top: auto;\n  margin-left: auto;\n  margin-right: auto;\n}\n.ToastSection.bottomCenter [data-toastId] {\n  animation: 0.4s bottomCenterin forwards;\n}\n@keyframes bottomCenterin {\n  0% {\n    opacity: 0;\n    max-height: 0;\n  }\n  50% {\n    max-height: 100vh;\n    opacity: 0;\n    transform: translateY(40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(0%);\n  }\n}\n.ToastSection.bottomCenter [data-toastId].ItemDeleted {\n  animation: 0.4s bottomCenterout forwards;\n}\n@keyframes bottomCenterout {\n  0% {\n    opacity: 1;\n    max-height: 100vh;\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-40%);\n  }\n}\n.ToastSection.bottomRight {\n  grid-area: right;\n  margin-top: auto;\n}\n.ToastSection.bottomRight [data-toastId] {\n  margin-left: auto;\n  animation: 0.4s bottomRightin forwards;\n}\n@keyframes bottomRightin {\n  0% {\n    opacity: 0;\n    max-height: 0;\n  }\n  50% {\n    max-height: 100vh;\n    opacity: 0;\n    transform: translateX(40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(0%);\n  }\n}\n.ToastSection.bottomRight [data-toastId].ItemDeleted {\n  animation: 0.4s bottomRightout forwards;\n}\n@keyframes bottomRightout {\n  0% {\n    opacity: 1;\n    max-height: 100vh;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(40%);\n  }\n}";
+styleInject(css_248z);
+
+var getToastSectionEl = function (position) {
+    var portal = getToastProviderEl();
+    var section = portal.getElementsByClassName(position)[0];
+    if (section) {
+        return section;
+    }
+    section = document.createElement('div');
+    section.className = "ToastSection ".concat(position);
+    portal.appendChild(section);
+    return section;
+};
+var ToastSection = function (_a) {
+    var position = _a.position, list = _a.list, remove = _a.remove, defaultTimeout = _a.defaultTimeout;
+    var section = getToastSectionEl(position);
+    var _b = React.useState(list), state = _b[0], setState = _b[1];
+    React.useEffect(
+    /**
+     * Delay deletions from provider state. Add instead a 'ItemDeleted' class to the
+     * toasts that are pending deletion to trigger an exiting animation.
+     *
+     * Because of this local copy of the global state, any toasts additions need to be
+     * copied over in a useEffect as well.
+     */
+    function delayToastsDeletionAndAddNewOnes() {
+        var deleted = state
+            .filter(function (s) { return !list.some(function (l) { return l.id === s.id; }); })
+            .map(function (s) { return s.id; });
+        var added = list.filter(function (l) { return !state.some(function (s) { return s.id === l.id; }); });
+        deleted
+            .map(function (id) { return section.querySelector("[data-toastid=\"".concat(id, "\"]")); })
+            .forEach(function (deletedToast) { return deletedToast === null || deletedToast === void 0 ? void 0 : deletedToast.classList.add('ItemDeleted'); });
+        if (added.length) {
+            setState(function (prev) { return __spreadArray(__spreadArray([], prev, true), added, true); });
+        }
+    }, [list, state]);
+    React.useEffect(
+    /**
+     * Capture toast updates to be copied to the local state
+     */
+    function updateExistingToasts() {
+        if (list.length === state.length) {
+            var updated_1 = list.filter(function (l) {
+                return state.find(function (s) { return s.id === l.id && s.updatedAt !== l.updatedAt; });
+            });
+            if (updated_1.length) {
+                setState(function (prev) {
+                    return prev.map(function (p) { var _a; return (_a = updated_1.find(function (u) { return u.id === p.id; })) !== null && _a !== void 0 ? _a : p; });
+                });
+            }
+        }
+    }, [list, state]);
+    React.useEffect(
+    /**
+     * Capture 'animationend' so that once a toast has left the page, it can
+     * be cleared from the local state.
+     *
+     * @description It uses `addEventListener` in the section, because the
+     * section portal may have been created by a parent App and not necessarily
+     * the consumer application.
+     */
+    function clearLocalStateAfterDeleteAnimationEnds() {
+        var animationEnd = function (e) {
+            var _a, _b, _c;
+            var animatedToast = e.target;
+            var animatedId = Number(animatedToast.getAttribute('data-toastid'));
+            if (animatedToast.classList.contains('ItemDeleted')) {
+                (_c = (_b = (_a = state
+                    .find(function (s) { return s.id === animatedId; })) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.onLeave) === null || _c === void 0 ? void 0 : _c.call(_b, animatedId);
+                setState(function (prev) { return prev.filter(function (t) { return t.id !== animatedId; }); });
+            }
+        };
+        section.addEventListener('animationend', animationEnd);
+        return function () { return section.removeEventListener('animationend', animationEnd); };
+    }, [section, state]);
+    return ReactDOM__default["default"].createPortal(React__namespace.createElement(React.Fragment, { key: position }, state.map(function (toast) { return (React__namespace.createElement(Toast, __assign({ key: toast.id }, { toast: toast, remove: remove, defaultTimeout: defaultTimeout }))); })), section);
+};
+var Toast = function (props) {
+    var _a, _b;
+    var toast = props.toast, remove = props.remove, defaultTimeout = props.defaultTimeout;
+    var close = React.useCallback(function () { return remove(toast.id); }, [remove, toast.id]);
+    var ms = (_b = (_a = toast.options) === null || _a === void 0 ? void 0 : _a.timeout) !== null && _b !== void 0 ? _b : defaultTimeout;
+    var shouldPersist = [
+        NaN,
+        Infinity,
+        Number.MAX_SAFE_INTEGER,
+        Number.MAX_VALUE,
+    ].includes(ms);
+    React.useEffect(function () {
+        if (!shouldPersist) {
+            var timer_1 = setTimeout(close, ms);
+            return function () { return clearTimeout(timer_1); };
+        }
+        return;
+    }, [shouldPersist, ms, close]);
+    return (React__namespace.createElement("div", { "data-toastid": toast.id }, typeof toast.notification === 'function'
+        ? toast.notification({ close: close })
+        : toast.notification));
+};
+
+var reducer = function (state, action) {
+    var updatedAt = new Date().getTime();
+    if (action.type === 'add') {
+        var createdAt = updatedAt;
+        var notification = action.notification, options = action.options, id = action.id;
+        var toast = { notification: notification, options: options, id: id, updatedAt: updatedAt, createdAt: createdAt };
+        var toasts = __spreadArray([toast], state.toasts, true);
+        return trim(__assign(__assign({}, state), { toasts: toasts }));
+    }
+    if (action.type === 'remove') {
+        return __assign(__assign({}, state), { toasts: state.toasts.filter(function (t) { return t.id !== action.id; }) });
+    }
+    if (action.type === 'update') {
+        var notification = action.notification, options = action.options, id_1 = action.id;
+        var updated_1 = { notification: notification, options: options, id: id_1, updatedAt: updatedAt };
+        return __assign(__assign({}, state), { toasts: state.toasts.map(function (t) { return (t.id !== id_1 ? t : __assign(__assign({}, t), updated_1)); }) });
+    }
+    return state;
+};
+var useToastState = function (_a) {
+    var stack = _a.stack;
+    var _b = React.useReducer(reducer, {
+        toasts: [],
+        stack: stack
+    }), state = _b[0], dispatch = _b[1];
+    var toasts = group(state.toasts);
+    return { toasts: toasts, dispatch: dispatch };
+};
+var group = function (list) {
+    var initial = [];
+    return list.reduce(function (res, item) {
+        var _a;
+        var _b, _c;
+        var position = (_c = (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.position) !== null && _c !== void 0 ? _c : 'topRight';
+        return __assign(__assign({}, res), (_a = {}, _a[position] = __spreadArray(__spreadArray([], res[position], true), [item], false), _a));
+    }, {
+        topLeft: initial,
+        topCenter: initial,
+        topRight: initial,
+        bottomLeft: initial,
+        bottomCenter: initial,
+        bottomRight: initial
+    });
+};
+var trim = function (state) { return (__assign(__assign({}, state), { toasts: Object.values(group(state.toasts))
+        .map(function (toasts) {
+        return toasts
+            .sort(function (a, b) { return (a.createdAt > b.createdAt ? -1 : 1); })
+            .slice(0, state.stack);
+    })
+        .flat() })); };
+
+var ToastContext = React__namespace.createContext(undefined);
+var portal = getToastProviderEl();
+var ToastProvider = function (_a) {
+    var children = _a.children, _b = _a.defaultTimeout, defaultTimeout = _b === void 0 ? 4000 : _b, _c = _a.stack, stack = _c === void 0 ? 5 : _c;
+    var _d = useToastState({ stack: stack }), toasts = _d.toasts, dispatch = _d.dispatch;
+    var remove = React.useCallback(function (id) { return dispatch({ type: 'remove', id: id }); }, [dispatch]);
+    if (React.useContext(ToastContext)) {
+        return React__namespace.createElement(React__namespace.Fragment, null, children);
+    }
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        ReactDOM__default["default"].createPortal(React__namespace.createElement(React__namespace.Fragment, null, Object.entries(toasts).map(function (_a) {
+            var section = _a[0], list = _a[1];
+            return (React__namespace.createElement(ToastSection, __assign({ key: section }, {
+                position: section,
+                list: list,
+                remove: remove,
+                defaultTimeout: defaultTimeout
+            })));
+        })), portal),
+        React__namespace.createElement(ToastContext.Provider, { value: dispatch }, children)));
+};
+
+var getUniqueToastId = function () { return Math.floor(Math.random() * 10000); };
+var toastFunctions = function (dispatch) {
+    var toast = function (notification, options) {
+        var id = getUniqueToastId();
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'add', notification: notification, options: options, id: id });
+        return id;
+    };
+    var update = function (id, notification, options) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'update', notification: notification, options: options, id: id });
+        return id;
+    };
+    var banner = function (level, defaults) {
+        if (defaults === void 0) { defaults = {}; }
+        return function (children, options) {
+            if (options === void 0) { options = defaults; }
+            return toast(function (_a) {
+                var close = _a.close;
+                return (React__namespace.createElement(LuiBannerV2, __assign({}, { level: level, children: children }, { onDismiss: options.timeout === Infinity ? close : undefined })));
+            }, options);
+        };
+    };
+    return {
+        toast: toast,
+        update: update,
+        dismiss: function (id) { return dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'remove', id: id }); },
+        info: banner('info'),
+        success: banner('success'),
+        error: banner('error', { timeout: Infinity }),
+        warning: banner('warning', { timeout: Infinity }),
+        plain: banner()
+    };
+};
+var useToast = function () {
+    var dispatch = React.useContext(ToastContext);
+    return React.useMemo(function () { return toastFunctions(dispatch); }, [dispatch]);
+};
+
+var LuiToastMessage$1 = function (_a) {
+    var level = _a.level, _b = _a.displayTimeout, displayTimeout = _b === void 0 ? 4000 : _b, _c = _a.display, display = _c === void 0 ? true : _c, requireDismiss = _a.requireDismiss, onClose = _a.onClose, _d = _a.onCloseDelay, onCloseDelay = _d === void 0 ? displayTimeout : _d, children = _a.children, type = _a.type;
+    var _e = React.useState('lui-msg-toast-show'), className = _e[0], setClassname = _e[1];
+    var _f = React.useState(undefined), fadeOutTimer = _f[0], setFadeOutTimer = _f[1];
+    var _g = React.useState(undefined), removeTimer = _g[0], setRemoveTimer = _g[1];
+    var materialIcon = getMaterialIconForLevel(level);
+    var callOnCloseAfterDissolved = function () {
+        // This is so the caller can remove it from the dom
+        if (onClose) {
+            var timer = window.setTimeout(onClose, onCloseDelay);
+            setRemoveTimer(timer);
+        }
+    };
+    React.useEffect(function () {
+        // clear timers if previously set
+        fadeOutTimer && clearTimeout(fadeOutTimer);
+        removeTimer && clearTimeout(removeTimer);
+        setClassname('lui-msg-toast-show');
+        if (!requireDismiss && displayTimeout !== 0) {
+            // set a new timer
+            var timer = window.setTimeout(function () {
+                setClassname('lui-msg-toast-hide');
+                callOnCloseAfterDissolved();
+            }, displayTimeout);
+            setFadeOutTimer(timer);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [requireDismiss, displayTimeout, children]);
+    React.useEffect(function () {
+        if (!display) {
+            setClassname('lui-msg-toast-hide');
+            callOnCloseAfterDissolved();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [display]);
+    return (React__default["default"].createElement("div", { role: "status", "data-testid": className, className: "lui-msg-".concat(level, " lui-msg-toast lui-msg-toast-dismissable ").concat(className) },
+        React__default["default"].createElement("i", { className: "lui-msg-status-icon material-icons-round" }, materialIcon),
+        children,
+        React__default["default"].createElement("button", { "aria-label": "Close dialog", type: type || 'button', onClick: function () {
+                setClassname('lui-msg-toast-hide');
+                callOnCloseAfterDissolved();
+            } },
+            React__default["default"].createElement("i", { className: "material-icons-round" }, "close"))));
+};
+
+var UIMessagingContext = React.createContext({
+    // @ts-ignore
+    showMessage: function (props) { }
+});
+function useShowLUIMessage$1() {
+    return React.useContext(UIMessagingContext).showMessage;
+}
+var LuiMessagingContextProvider$1 = function (props) {
+    var _a = React.useState(), _message = _a[0], setMessage = _a[1];
+    var _b = React.useState(), _messageType = _b[0], setMessageType = _b[1];
+    var _c = React.useState('success'), _messageLevel = _c[0], setMessageLevel = _c[1];
+    var _d = React.useState(true), _requireDismiss = _d[0], setRequireDismiss = _d[1];
+    var showMessage = function (props) {
+        setMessage(props.message);
+        setMessageType(props.messageType);
+        setMessageLevel(props.messageLevel);
+        setRequireDismiss(props.requireDismiss === undefined
+            ? props.messageLevel === 'error'
+            : props.requireDismiss);
+    };
+    var renderMessage = function () {
+        switch (_messageType) {
+            case 'toast':
+                return (React__default["default"].createElement(LuiToastMessage$1, { onClose: function () {
+                        setMessage(undefined);
+                    }, level: _messageLevel, requireDismiss: _requireDismiss },
+                    React__default["default"].createElement("span", { "data-testid": 'toastMessageShow' }, typeof _message === 'string' ? React__default["default"].createElement("h2", null, _message) : _message)));
+            default:
+                return null;
+        }
+    };
+    return (React__default["default"].createElement(UIMessagingContext.Provider, { value: { showMessage: showMessage } },
+        _message && renderMessage(),
+        props.children));
+};
+
+var LuiToastMessageCompatibleInterface = function (props) {
+    var level = props.level, _a = props.displayTimeout, displayTimeout = _a === void 0 ? 4000 : _a, _b = props.display, display = _b === void 0 ? true : _b, requireDismiss = props.requireDismiss, onClose = props.onClose, children = props.children;
+    var toastIdRef = React.useRef(undefined);
+    var onceDismissedRef = React.useRef(false);
+    var displayRef = React.useRef(display);
+    var _c = useToast(), toast = _c.toast, dismiss = _c.dismiss, update = _c.update;
+    displayRef.current = display;
+    // Close when it's unmounted
+    React.useEffect(function () {
+        return function () {
+            if (toastIdRef.current) {
+                dismiss(toastIdRef.current);
+                toastIdRef.current = undefined;
+            }
+        };
+    }, []);
+    React.useEffect(function () {
+        var onceDismissed = onceDismissedRef.current;
+        if (display && !onceDismissed) {
+            var notification = function (_a) {
+                var close = _a.close;
+                var onDismiss = requireDismiss ? close : undefined;
+                return React__default["default"].createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: onDismiss, children: children }));
+            };
+            var options = {
+                timeout: displayTimeout === 0 ? Infinity : displayTimeout,
+                onLeave: function () {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                    onceDismissedRef.current = displayRef.current;
+                    toastIdRef.current = undefined;
+                }
+            };
+            if (!toastIdRef.current) {
+                toastIdRef.current = toast(notification, options);
+            }
+            else {
+                update(toastIdRef.current, notification, options);
+            }
+        }
+        if (!display && toastIdRef.current !== undefined) {
+            dismiss(toastIdRef.current);
+            toastIdRef.current = undefined;
+        }
+    }, [props]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+};
+
+/**
+ * Provide new toast hook with old interface from original useShowLUIMessage
+ */
+var useShowLUIMessageCompatibleInterface = function () {
+    var toast = useToast().toast;
+    return function (props) {
+        var message = props.message, messageLevel = props.messageLevel, requireDismiss = props.requireDismiss;
+        var toastProps = { children: message, level: messageLevel };
+        if (requireDismiss || messageLevel === 'error') {
+            toast(function (_a) {
+                var close = _a.close;
+                return React__default["default"].createElement(LuiBannerV2, __assign({}, toastProps, { onDismiss: close }));
+            });
+        }
+        else {
+            toast(React__default["default"].createElement(LuiBannerV2, __assign({}, toastProps)));
+        }
+    };
+};
+
+var ToastUpgrade = React.createContext(false);
+var useToastUpgrade = function () { return React.useContext(ToastUpgrade); };
+/**
+ * @deprecated Use ToastProvider or LuiMessagingContextProvider with upgrade prop set to true to get the new designs
+ */
+var LuiMessagingContextProvider = function (props) {
+    var _a = props.upgrade, upgrade = _a === void 0 ? false : _a, rest = __rest(props, ["upgrade"]);
+    if (React.useContext(ToastContext)) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null, rest.children);
+    }
+    return (React__default["default"].createElement(ToastUpgrade.Provider, { value: upgrade }, upgrade ? (React__default["default"].createElement(ToastProvider, __assign({}, rest))) : (React__default["default"].createElement(LuiMessagingContextProvider$1, __assign({}, rest)))));
+};
+var useShowLUIMessage = function () {
+    var upgrade = useToastUpgrade();
+    var older = useShowLUIMessage$1();
+    var newer = useShowLUIMessageCompatibleInterface();
+    return upgrade ? newer : older;
+};
+var LuiToastMessage = function (props) {
+    var upgrade = useToastUpgrade();
+    return upgrade ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
+};
+
 exports.CheckboxItemRenderer = CheckboxItemRenderer;
 exports.LUI_WINDOW_NAME = LUI_WINDOW_NAME;
 exports.LuiAccordicard = LuiAccordicard;
@@ -59411,7 +59696,6 @@ exports.LuiAccordicardStatic = LuiAccordicardStatic;
 exports.LuiAccordion = LuiAccordion;
 exports.LuiAlertModal = LuiAlertModal;
 exports.LuiAlertModalButtons = LuiAlertModalButtons;
-exports.LuiAlertModalV2 = LuiAlertModalV2;
 exports.LuiAppFooterSml = LuiAppFooterSml;
 exports.LuiBadge = LuiBadge;
 exports.LuiBanner = LuiBanner;
@@ -59465,9 +59749,6 @@ exports.LuiMenuCloseButtonV2 = LuiMenuCloseButtonV2;
 exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
 exports.LuiMiniSpinner = LuiMiniSpinner;
 exports.LuiModal = LuiModal;
-exports.LuiModalV2 = LuiModalV2;
-exports.LuiModalV2Buttons = LuiModalV2Buttons;
-exports.LuiModalV2HeadingText = LuiModalV2HeadingText;
 exports.LuiMoneyInput = LuiMoneyInput;
 exports.LuiMultiSwitch = LuiMultiSwitch;
 exports.LuiMultiSwitchYesNo = LuiMultiSwitchYesNo;
@@ -59507,6 +59788,7 @@ exports.LuiTooltip = LuiTooltip;
 exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;
 exports.RadioItemRenderer = RadioItemRenderer;
 exports.Splitter = Splitter;
+exports.ToastProvider = ToastProvider;
 exports.ToolbarButton = ToolbarButton;
 exports.ToolbarItem = ToolbarItem;
 exports.ToolbarItemSeparator = ToolbarItemSeparator;
@@ -59521,4 +59803,5 @@ exports.useMediaQuery = useMediaQuery;
 exports.usePageClickFunction = usePageClickFunction;
 exports.useShowLUIMessage = useShowLUIMessage;
 exports.useSplitterRef = useSplitterRef;
+exports.useToast = useToast;
 //# sourceMappingURL=index.js.map