@linzjs/lui 21.36.0 → 21.38.0

package/dist/lui.esm.js

@@ -25655,8 +25655,8 @@ function styleInject(css, ref) {
   }
 }
 
-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);
+var css_248z$m = ".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$m);
 
 /**
  * Overwrite the common buttons for floating window to
@@ -27851,8 +27851,8 @@ ReactSplitGrid.defaultProps = {
     onDrag: undefined,
 };
 
-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 css_248z$l = ".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$l);
 
 var GutterComponent = function (props) {
     var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
@@ -31611,8 +31611,8 @@ var LuiTabsPanelSwitch = function (props) {
         } }, tabProps), children));
 };
 
-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 css_248z$k = "/**\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$k);
 
 var LuiError = function (_a) {
     var error = _a.error, className = _a.className;
@@ -31974,8 +31974,8 @@ var LuiDateInput = React__default.forwardRef(function (_a, ref) {
     return React__default.createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
 });
 
-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 css_248z$j = ".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$j);
 
 var MoneyParser = /** @class */ (function () {
     function MoneyParser(init, options) {
@@ -39627,9 +39627,9 @@ var StateManagedSelect = /*#__PURE__*/React__default.forwardRef(function (props,
 
 var Select = StateManagedSelect;
 
-var css_248z$h = "";
+var css_248z$i = "";
 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$h);
+styleInject(css_248z$i);
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 
@@ -39801,17 +39801,12 @@ var motif = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id
  *
  * @param onEscape the handler function
  */
-var useEscapeFunction = function (onEscape) {
-    var escFunction = useCallback(function (event) {
-        if (event.keyCode === 27) {
-            onEscape();
-        }
-    }, [onEscape]);
+var useEscapeFunction = function (onEscape, trigger) {
+    if (trigger === void 0) { trigger = 'keydown'; }
+    var escFunction = useCallback(function (event) { return event.key === 'Escape' && onEscape(event); }, [onEscape]);
     useEffect(function () {
-        document.addEventListener('keydown', escFunction, false);
-        return function () {
-            document.removeEventListener('keydown', escFunction, false);
-        };
+        document.addEventListener(trigger, escFunction);
+        return function () { return document.removeEventListener(trigger, escFunction); };
     }, [escFunction]);
 };
 /**
@@ -42094,6 +42089,9 @@ var FeatureIFrame = function (_a) {
         React__default.createElement("iframe", __assign({ width: iframeConfig.width, height: iframeConfig.height, src: iframeConfig.url, title: iframeConfig.title }, iFrameProps))));
 };
 
+/**
+ * @deprecated this is replaced by `LuiModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiModal = function (props) {
     var _a;
     var node = useRef(null);
@@ -42149,6 +42147,9 @@ var LuiModal = function (props) {
                     }
                 } }, props.children))));
 };
+/**
+ * @deprecated this is replaced by `LuiAlertModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiAlertModal = function (props) {
     var materialIcon = getMaterialIconForLevel(props.level);
     var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
@@ -42156,9 +42157,15 @@ var LuiAlertModal = function (props) {
         React__default.createElement(LuiIcon, { name: "ic_".concat(materialIcon), alt: "".concat(level, " status icon"), size: "lg", className: "lui-msg-status-icon" }),
         children));
 };
+/**
+ * @deprecated this is replaced by `LuiModalV2.Buttons`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiAlertModalButtons = function (props) {
     return React__default.createElement("div", { className: "modal-btn-row" }, props.children);
 };
+/**
+ * @deprecated this is deprecated alongside `LuiModal`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiModalHeader = function (props) {
     var _a;
     var headerStyle = (_a = props.style) !== null && _a !== void 0 ? _a : 'default';
@@ -42173,8 +42180,122 @@ var LuiModalHeader = function (props) {
                 React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-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);
+/**
+ * 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.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;
+/** Implements the [updated modal design system](https://www.figma.com/design/E7g3n5ziI7bR8MisISayia/FigLUI?node-id=9924-54717&t=q2r6Gct1cKGP9Q5B-0), keeping the same api as `LuiModal` as much as possible. */
+var LuiModalV2 = function (props) {
+    var _a;
+    var modalRef = useRef(null);
+    var handleClickOutside = 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 = 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]);
+    useEscapeFunction(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.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.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.createElement("div", { className: "lui-modal-v2-header" },
+                props.isLoading && (React__default.createElement(LuiMiniSpinner, { size: 20, divProps: { className: 'lui-modal-v2-header-spinner' } })),
+                showHeadingIcon && (React__default.createElement("div", { className: "lui-modal-v2-header-icon" },
+                    React__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.createElement("h2", { className: "lui-modal-v2-header-title" }, props.headingText)),
+                showButtons && (React__default.createElement("div", { className: "lui-modal-v2-header-buttons" },
+                    showHelpButton && React__default.createElement(HelpButton, { helpLink: props.helpLink }),
+                    showCloseButton && React__default.createElement(CloseButton, { onClose: props.onClose })))),
+            React__default.createElement("div", { className: "lui-modal-v2-contents" }, props.children))));
+};
+var ButtonRow = function (props) { return (React__default.createElement("div", { className: clsx('lui-modal-v2-btn-row', props.className) }, props.children)); };
+LuiModalV2.Buttons = ButtonRow;
+var HelpButton = function (props) { return (React__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.createElement(LuiIcon, { name: "ic_help_outline", alt: "Help", size: "md" }))); };
+var CloseButton = function (props) { return (React__default.createElement("button", { "aria-label": "Modal Close", title: "Close", className: "lui-modal-v2-header-close-btn", onClick: props.onClose },
+    React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "md" }))); };
+/** Allows injecting the modal header text. Useful when you can't use the `headingText` prop directly, or when you need to render styled content. */
+var HeaderTitle = function (props) {
+    var _a = useState(), target = _a[0], setTarget = _a[1];
+    // on mount, find the parent modal and set it as the target
+    if (!target)
+        return (React__default.createElement("div", { style: { display: 'none' }, ref: function (el) {
+                var modal = el === null || el === void 0 ? void 0 : el.closest(".lui-modal-v2");
+                var modalHeader = modal === null || modal === void 0 ? void 0 : modal.querySelector(':scope > .lui-modal-v2-header');
+                modalHeader && setTarget(modalHeader);
+            } }));
+    return createPortal(React__default.createElement("h2", { className: clsx('lui-modal-v2-header-title lui-modal-v2-header-title-portal', props.className) }, props.children), target);
+};
+LuiModalV2.HeaderTitle = HeaderTitle;
+// 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 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.createElement(LuiModalV2, __assign({}, rest, { className: clsx("lui-modal-v2-alert lui-modal-v2-".concat(level), className), headingIcon: {
+            name: "ic_".concat(materialIcon),
+            alt: "".concat(level, " status icon"),
+            size: 'md',
+            status: status
+        } }), children));
+};
+
+var css_248z$h = "@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$h);
 
 /**
  * @internal
@@ -46771,34 +46892,6 @@ var LuiTooltip = function (props) {
     return React__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.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';
@@ -46848,8 +46941,8 @@ var LuiSidePanelProvider = function (_a) {
         React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
 };
 
-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 css_248z$g = ".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$g);
 
 var LuiSwitchButton = function (props) {
     var generatedId = useGenerateOrDefaultId();
@@ -54480,8 +54573,8 @@ var LuiAccordicardStatic = function (props) {
             React__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$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 css_248z$f = "/**\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$f);
 
 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;
@@ -54592,8 +54685,8 @@ var LuiMultiSwitch = function (_a) {
         React__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.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$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);
+var css_248z$e = "/**\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$e);
 
 function $c1d7fb2ec91bae71$var$Item(props) {
     return null;
@@ -58093,16 +58186,16 @@ function DefaultEmptyIndicator() {
     return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
 }
 
-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);
+var css_248z$d = "/**\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$d);
 
 function RadioItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
     return (React__default.createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
 }
 
-var css_248z$b = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
-styleInject(css_248z$b);
+var css_248z$c = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
+styleInject(css_248z$c);
 
 function CheckboxItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
@@ -58126,8 +58219,8 @@ function LuiSideMenuItem(_a) {
             React__default.createElement("span", { className: "navText" }, label))));
 }
 
-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 css_248z$b = "/**\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$b);
 
 var LuiProgressBar = function (_a) {
     var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
@@ -58155,8 +58248,8 @@ var LuiProgressBar = function (_a) {
         React__default.createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
 };
 
-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);
+var css_248z$a = "/**\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$a);
 
 var ToolbarDirection;
 (function (ToolbarDirection) {
@@ -58178,8 +58271,8 @@ var ToolbarIcon = function (_a) {
     return iconImage ? (React__default.createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default.createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
 };
 
-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);
+var css_248z$9 = "/**\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$9);
 
 /**
  * Create button for using either LuiIcon or Image.
@@ -58242,8 +58335,8 @@ var useMediaQuery = function (query) {
     return matches;
 };
 
-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 css_248z$8 = "/**\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$8);
 
 var LuiCounter = React__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"]);
@@ -58258,8 +58351,8 @@ var LuiCounter = React__default.forwardRef(function (props, ref) {
     return (React__default.createElement(React__default.Fragment, null, !(selectedNum === 0 && !countZero) && (React__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$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 css_248z$7 = "/**\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$7);
 
 var LuiPagination = function (_a) {
     var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
@@ -58369,11 +58462,11 @@ var LuiPagination = function (_a) {
             React__default.createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
 };
 
-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$6 = "/**\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$6);
 
-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 css_248z$5 = ".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$5);
 
 var useForkRef = function (forwardedRef) {
     var localRef = useRef(null);
@@ -59131,8 +59224,8 @@ var keyDownHandler = function (e) {
     return valueNow + delta;
 };
 
-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);
+var css_248z$4 = "/**\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$4);
 
 /**
  * Container that appends a separator when the children count equals 2.
@@ -59184,8 +59277,8 @@ var useSplitterRef = function () {
     return { ref: ref, setRatio: setRatio };
 };
 
-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 css_248z$3 = "/**\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$3);
 
 var LuiBannerV2 = forwardRef$1(function (_a, ref) {
     var _b, _c, _d;
@@ -59204,6 +59297,54 @@ var LuiBannerV2 = forwardRef$1(function (_a, ref) {
         onDismiss && (React__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.createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
 });
 
+var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-color-picker,\n.lui-input-color-group {\n  display: inline-grid;\n  gap: 0.5rem;\n  grid-template-columns: repeat(7, 1fr);\n}\n\ninput.lui-input-color-radio {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n  word-wrap: normal;\n}\ninput.lui-input-color-radio + label {\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 1rem;\n  cursor: pointer;\n  border: none;\n}\ninput.lui-input-color-radio:checked + label {\n  border: 0.125rem solid #ffffff;\n  box-shadow: 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.2509803922);\n  transition: all 0.05s ease;\n}";
+styleInject(css_248z$2);
+
+var defaultColours = [
+    { color: '#FF0000', description: 'Red' },
+    { color: '#FF9900', description: 'Orange' },
+    { color: '#FFFF00', description: 'Yellow' },
+    { color: '#00FF00', description: 'Lime' },
+    { color: '#00FFFF', description: 'Cyan' },
+    { color: '#4A86E8', description: 'Cornflower' },
+    { color: '#9900FF', description: 'Violet' },
+    { color: '#CC0100', description: 'Scarlet' },
+    { color: '#B45F06', description: 'Brown' },
+    { color: '#F1C231', description: 'Canary' },
+    { color: '#6AA84F', description: 'Olive' },
+    { color: '#45818E', description: 'Teal' },
+    { color: '#1255CC', description: 'Blue' },
+    { color: '#674EA7', description: 'Purple' },
+];
+
+var ColorInputGroup = forwardRef$1(function (props, ref) {
+    var _a;
+    return (React__default.createElement("div", __assign({ ref: ref }, props, { role: (_a = props.role) !== null && _a !== void 0 ? _a : 'lui-input-color-group', className: clsx('lui-input-color-group', props.className) })));
+});
+var ColorInput = forwardRef$1(function (props, ref) {
+    var name = props.name, color = props.color, description = props.description, label = props.label, input = __rest(props, ["name", "color", "description", "label"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("input", __assign({ ref: ref }, input, { name: name, type: "radio", id: color, value: color, className: clsx('lui-input-color-radio', input.className) })),
+        React__default.createElement("label", __assign({}, label, { htmlFor: color, style: __assign(__assign({}, label === null || label === void 0 ? void 0 : label.style), { color: color, backgroundColor: color }), className: clsx('lui-input-colour-label', label === null || label === void 0 ? void 0 : label.className), "aria-label": description || color, title: description }))));
+});
+
+/**
+ * @description Default colour palette template component using predetermined colours.
+ * To use custom colours, refer to the ColorInput and ColorInputGroup components.
+ * @param selected - The currently selected colour.
+ * @param onSelect - Callback function to handle the selected colour.
+ * @param name - The name of the colour picker.
+ */
+var ColorPalette = forwardRef$1(function (_a, ref) {
+    var _b;
+    var _c = _a.selected, selected = _c === void 0 ? (_b = defaultColours[0]) === null || _b === void 0 ? void 0 : _b.color : _c, onSelect = _a.onSelect; _a.children; var name = _a.name, className = _a.className, divProps = __rest(_a, ["selected", "onSelect", "children", "name", "className"]);
+    var colourGroupIdentifier = v4();
+    return (React__default.createElement(ColorInputGroup, __assign({ ref: ref }, divProps, { className: clsx('lui-color-picker', className) }), defaultColours.map(function (_a) {
+        var color = _a.color, description = _a.description;
+        return (React__default.createElement(ColorInput, __assign({ key: color, name: name !== null && name !== void 0 ? name : colourGroupIdentifier }, { color: color, description: description }, { checked: color === selected, onChange: function () { return onSelect(color); } })));
+    })));
+});
+
 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);
 
@@ -59694,5 +59835,5 @@ var LuiToastMessage = function (props) {
     return version === 'v2' ? (React__default.createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default.createElement(LuiToastMessage$1, __assign({}, props)));
 };
 
-export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, $F as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
+export { CheckboxItemRenderer, ColorInput, ColorInputGroup, ColorPalette, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, $F as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
 //# sourceMappingURL=lui.esm.js.map