@linzjs/lui 21.0.1 → 21.1.0

package/dist/lui.esm.js

@@ -25492,8 +25492,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".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$d);
+var css_248z$g = ".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$g);
 
 /**
  * Overwrite the common buttons for floating window to
@@ -26846,7 +26846,7 @@ var PropTypes = propTypes.exports;
 
 var numeric = function (value, unit) { return Number(value.slice(0, -1 * unit.length)); };
 
-var parseValue = function (value) {
+var parseValue$1 = function (value) {
     if (value.endsWith('px'))
         { return { value: value, type: 'px', numeric: numeric(value, 'px') } }
     if (value.endsWith('fr'))
@@ -26857,7 +26857,7 @@ var parseValue = function (value) {
     return null
 };
 
-var parse$3 = function (rule) { return rule.split(' ').map(parseValue); };
+var parse$3 = function (rule) { return rule.split(' ').map(parseValue$1); };
 
 var getSizeAtTrack = function (index, tracks, gap, end) {
     if ( gap === void 0 ) { gap = 0; }
@@ -27769,8 +27769,8 @@ ReactSplitGrid.defaultProps = {
     onDrag: undefined,
 };
 
-var css_248z$c = ".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$c);
+var css_248z$f = ".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$f);
 
 var GutterComponent = function (props) {
     var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
@@ -27797,6 +27797,9 @@ var SplitPanelState;
     SplitPanelState[SplitPanelState["CLOSED_LEFT"] = 1] = "CLOSED_LEFT";
     SplitPanelState[SplitPanelState["CLOSED_RIGHT"] = 2] = "CLOSED_RIGHT";
 })(SplitPanelState || (SplitPanelState = {}));
+/**
+ * @deprecated replaced by Splitter
+ */
 var LuiResizableLayout = function (props) {
     var givenLeftRef = props.givenLeftRef, givenRightRef = props.givenRightRef, givenGridTemplateColumns = props.givenGridTemplateColumns, givenColumnMinSizes = props.givenColumnMinSizes, givenColumnSnapOffset = props.givenColumnSnapOffset, callbackOnClickLeftArrowButton = props.callbackOnClickLeftArrowButton, callbackOnClickRightArrowButton = props.callbackOnClickRightArrowButton, callbackOnDraging = props.callbackOnDraging;
     var _a = useState(givenGridTemplateColumns ? givenGridTemplateColumns : '1fr 4px 1fr'), gridTemplateColumns = _a[0], setGridTemplateColumns = _a[1];
@@ -28066,8 +28069,8 @@ var LuiTabsPanelSwitch = function (props) {
         } }, props.children));
 };
 
-var css_248z$b = "/**\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$b);
+var css_248z$e = "/**\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$e);
 
 var LuiError = function (_a) {
     var error = _a.error, className = _a.className;
@@ -28424,8 +28427,8 @@ var LuiDateInput = React__default.forwardRef(function (_a, ref) {
     return React__default.createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
 });
 
-var css_248z$a = ".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$a);
+var css_248z$d = ".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$d);
 
 var MoneyParser = /** @class */ (function () {
     function MoneyParser(init, options) {
@@ -32820,7 +32823,7 @@ var css$1 = function css(_ref) {
   };
 };
 
-var Control = function Control(props) {
+var Control$1 = function Control(props) {
   var children = props.children,
       cx = props.cx,
       getStyles = props.getStyles,
@@ -33206,7 +33209,7 @@ var SingleValue = function SingleValue(props) {
 
 var components = {
   ClearIndicator: ClearIndicator,
-  Control: Control,
+  Control: Control$1,
   DropdownIndicator: DropdownIndicator,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
@@ -39591,8 +39594,8 @@ function isChromatic() {
         (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
 }
 
-var css_248z$9 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
-styleInject(css_248z$9);
+var css_248z$c = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
+styleInject(css_248z$c);
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 
@@ -39713,13 +39716,13 @@ function LuiComboSelectActual(givenProps, ref) {
     // box-shadow: "-8px 0px 0 0 #cc0000";
     // border-radius: "4px";
     var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
-    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$9['sea'], primary75: css_248z$9['electric'], primary50: css_248z$9['spray'], primary25: css_248z$9['polar'], neutral90: css_248z$9['charcoal'], neutral80: css_248z$9['charcoal'], neutral70: css_248z$9['charcoal'], neutral60: css_248z$9['fuscous'], neutral50: css_248z$9['fuscous'], neutral40: css_248z$9['gray'], neutral30: css_248z$9['gray'], neutral20: css_248z$9['silver'], neutral10: css_248z$9['lily'], neutral5: css_248z$9['hint'], danger: css_248z$9['error'], dangerLight: css_248z$9['error-bg'] }) })); }, styles: {
+    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$c['sea'], primary75: css_248z$c['electric'], primary50: css_248z$c['spray'], primary25: css_248z$c['polar'], neutral90: css_248z$c['charcoal'], neutral80: css_248z$c['charcoal'], neutral70: css_248z$c['charcoal'], neutral60: css_248z$c['fuscous'], neutral50: css_248z$c['fuscous'], neutral40: css_248z$c['gray'], neutral30: css_248z$c['gray'], neutral20: css_248z$c['silver'], neutral10: css_248z$c['lily'], neutral5: css_248z$c['hint'], danger: css_248z$c['error'], dangerLight: css_248z$c['error-bg'] }) })); }, styles: {
             control: function (provided, state) { return (__assign(__assign({}, provided), { 
                 /* matches style of .LuiTextInput-input */
                 boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
                     borderColor: '#053d52'
                 } })); },
-            dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$9['fuscous'] })); },
+            dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$c['fuscous'] })); },
             indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
             input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
                     height: '38px !important'
@@ -39727,10 +39730,10 @@ function LuiComboSelectActual(givenProps, ref) {
             singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
             placeholder: function (provided) { return (__assign(__assign({}, provided), { 
                 /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
-                fontWeight: 'normal', fontStyle: 'italic', color: css_248z$9['input-placeholder'] })); },
+                fontWeight: 'normal', fontStyle: 'italic', color: css_248z$c['input-placeholder'] })); },
             option: function (provided, _a) {
                 var isSelected = _a.isSelected;
-                return (__assign(__assign({}, provided), { color: css_248z$9['input-text'], backgroundColor: isSelected ? css_248z$9['selection'] : css_248z$9['white'] }));
+                return (__assign(__assign({}, provided), { color: css_248z$c['input-text'], backgroundColor: isSelected ? css_248z$c['selection'] : css_248z$c['white'] }));
             }
         } });
     return (React__default.createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
@@ -42110,8 +42113,8 @@ var LuiModalHeader = function (props) {
                 React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-var css_248z$8 = "@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$8);
+var css_248z$b = "@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$b);
 
 /**
  * @internal
@@ -46762,8 +46765,8 @@ var LuiSidePanelProvider = function (_a) {
         React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
 };
 
-var css_248z$7 = ".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$7);
+var css_248z$a = ".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$a);
 
 var LuiSwitchButton = function (props) {
     var generatedId = useGenerateOrDefaultId();
@@ -54394,8 +54397,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$6 = "/**\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}";
-styleInject(css_248z$6);
+var css_248z$9 = "/**\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}";
+styleInject(css_248z$9);
 
 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;
@@ -54506,8 +54509,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$5 = "/**\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$5);
+var css_248z$8 = "/**\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$8);
 
 function $c1d7fb2ec91bae71$var$Item(props) {
     return null;
@@ -58007,16 +58010,16 @@ function DefaultEmptyIndicator() {
     return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
 }
 
-var css_248z$4 = "/**\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$4);
+var css_248z$7 = "/**\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$7);
 
 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$3 = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
-styleInject(css_248z$3);
+var css_248z$6 = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
+styleInject(css_248z$6);
 
 function CheckboxItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
@@ -58040,8 +58043,8 @@ function LuiSideMenuItem(_a) {
             React__default.createElement("span", { className: "navText" }, label))));
 }
 
-var css_248z$2 = "/**\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$2);
+var css_248z$5 = "/**\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$5);
 
 var LuiProgressBar = function (_a) {
     var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
@@ -58069,8 +58072,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$1 = "/**\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$1);
+var css_248z$4 = "/**\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$4);
 
 var ToolbarDirection;
 (function (ToolbarDirection) {
@@ -58092,8 +58095,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 = "/**\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);
+var css_248z$3 = "/**\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$3);
 
 /**
  * Create button for using either LuiIcon or Image.
@@ -58161,5 +58164,520 @@ var LuiCounter = React__default.forwardRef(function (props, ref) {
     return (React__default.createElement("div", __assign({ ref: ref, className: clsx(selectedNum === 0 ? 'LuiCounter-zero' : 'LuiCounter-non-zero', className), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()));
 });
 
-export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, 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, 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, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, 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, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage };
+var css_248z$2 = "/**\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: 300ms;\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: 300ms;\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$2);
+
+var css_248z$1 = ".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$1);
+
+var useForkRef = function (forwardedRef) {
+    var localRef = useRef(null);
+    return forwardedRef || localRef;
+};
+
+/**
+ * Given a ref/element if finds the Separator and returns the most useful attributes
+ */
+var getSeparatorAttributes = function (props) {
+    var _a, _b, _c;
+    return getValues((props.child
+        ? (_a = props.child) === null || _a === void 0 ? void 0 : _a.closest('[role="separator"]')
+        : (_b = props.separator) !== null && _b !== void 0 ? _b : (_c = props.ref) === null || _c === void 0 ? void 0 : _c.current));
+};
+var getValues = function (el) {
+    return {
+        valueNow: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuenow')),
+        valueMin: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemin')),
+        valueMax: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemax')),
+        orientation: parseOrientation(el === null || el === void 0 ? void 0 : el.getAttribute('aria-orientation')),
+        thickness: getSeparatorThickness(el)
+    };
+};
+var parseValue = function (val) {
+    var parsed = parseFloat(val !== null && val !== void 0 ? val : '');
+    return isNaN(parsed) ? 0 : parsed;
+};
+var parseOrientation = function (val) {
+    return val === 'horizontal' || val === 'vertical' ? val : undefined;
+};
+/**
+ * Gets the separator width based on the splitter column gap.
+ */
+var getSeparatorThickness = function (separator) {
+    var initialGap = 4;
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    if (!splitter) {
+        return initialGap;
+    }
+    var property = (separator === null || separator === void 0 ? void 0 : separator.getAttribute('aria-orientation')) === 'horizontal'
+        ? 'row-gap'
+        : 'column-gap';
+    var parsed = parseFloat(getComputedStyle(splitter).getPropertyValue(property) || '');
+    return isNaN(parsed) ? initialGap : parsed;
+};
+
+var ControlIcon = function (_a) {
+    var parent = _a.parent, side = _a.side;
+    var _b = useState(), attributes = _b[0], setAttributes = _b[1];
+    useEffect(function () {
+        var _a;
+        var separator = (_a = parent.current) === null || _a === void 0 ? void 0 : _a.closest('[role="separator"]');
+        var callback = function () { return setAttributes(getIconAndText(side, separator)); };
+        callback();
+        var observer = new MutationObserver(callback);
+        observer.observe(separator, { attributeFilter: ['aria-valuenow'] });
+        return function () { return observer.disconnect(); };
+    }, [parent, side]);
+    return attributes ? React__default.createElement(LuiIcon, __assign({ size: "sm" }, attributes)) : null;
+};
+var getIconAndText = function (side, separator) {
+    var _a = getSeparatorAttributes({ separator: separator }), valueNow = _a.valueNow, orientation = _a.orientation;
+    var name = '';
+    var alt = '';
+    if (valueNow !== undefined) {
+        if (side === 'primary') {
+            var double = orientation === 'vertical'
+                ? 'ic_double_arrow_left'
+                : 'ic_keyboard_arrow_up'; // No double icon available
+            var single = orientation === 'vertical'
+                ? 'ic_keyboard_arrow_left'
+                : 'ic_keyboard_arrow_up';
+            name = valueNow !== 100 ? double : single;
+            alt =
+                valueNow !== 100 ? 'Collapse primary panel' : 'Restore primary panel';
+        }
+        else {
+            var double = orientation === 'vertical'
+                ? 'ic_double_arrow_right'
+                : 'ic_keyboard_arrow_down'; // No double icon available
+            var single = orientation === 'vertical'
+                ? 'ic_keyboard_arrow_right'
+                : 'ic_keyboard_arrow_down';
+            name = valueNow !== 0 ? double : single;
+            alt =
+                valueNow !== 0 ? 'Collapse secondary panel' : 'Restore secondary panel';
+        }
+    }
+    return { name: name, alt: alt };
+};
+
+var squareButtonSide = 25;
+var Control = forwardRef$1(function (props, forwardRef) {
+    var side = props.side, rest = __rest(props, ["side"]);
+    var ref = useForkRef(forwardRef);
+    useEffect(function () {
+        var callback = function () {
+            var control = ref.current;
+            var _a = getButtonProps(ref, side), hide = _a.hide, offset = _a.offset, orientation = _a.orientation;
+            var vertical = orientation === 'vertical';
+            control.style.left = vertical ? "".concat(offset, "px") : '50%';
+            control.style.transform = "translate".concat(vertical ? 'Y' : 'X', "(-50%)");
+            control.style.top = vertical ? '50%' : "".concat(offset, "px");
+            control.style.opacity = "".concat(hide ? 0 : 1);
+            control.style.pointerEvents = hide ? 'none' : '';
+            control.tabIndex = hide ? -1 : 0;
+        };
+        var separator = ref.current.closest('[role="separator"]');
+        callback();
+        var observer = new MutationObserver(callback);
+        observer.observe(separator, { attributeFilter: ['aria-valuenow'] });
+        return function () { return observer.disconnect(); };
+    }, [ref, side]);
+    return (React__default.createElement(LuiButton, __assign({ ref: ref, level: "primary" }, rest, { style: __assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), { width: squareButtonSide, height: squareButtonSide, borderRadius: '50%' }), className: clsx('Control', 'lui-button-icon-only', 'lui-box-shadow', rest === null || rest === void 0 ? void 0 : rest.className) }), (rest === null || rest === void 0 ? void 0 : rest.children) || React__default.createElement(ControlIcon, { parent: ref, side: side })));
+});
+var getButtonProps = function (button, side) {
+    var _a;
+    var _b = getSeparatorAttributes({ child: button.current }), valueNow = _b.valueNow, valueMin = _b.valueMin, valueMax = _b.valueMax, orientation = _b.orientation, thickness = _b.thickness;
+    var separator = (_a = button.current) === null || _a === void 0 ? void 0 : _a.closest('[role="separator"]');
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    var buttonPadding = thickness * 2;
+    var offset = side === 'primary' ? -(squareButtonSide + buttonPadding) : buttonPadding;
+    var splitterRect = splitter === null || splitter === void 0 ? void 0 : splitter.getBoundingClientRect();
+    var splitterExtension = orientation === 'horizontal' ? splitterRect === null || splitterRect === void 0 ? void 0 : splitterRect.height : splitterRect === null || splitterRect === void 0 ? void 0 : splitterRect.width;
+    var hiddenPixels = 0;
+    if (splitterExtension !== undefined && valueNow !== undefined) {
+        var valueNowPx = (valueNow / 100.0) * splitterExtension;
+        hiddenPixels =
+            side === 'primary'
+                ? Math.abs(offset) - valueNowPx
+                : squareButtonSide - (splitterExtension - valueNowPx - buttonPadding);
+    }
+    hiddenPixels = Math.max(hiddenPixels, 0);
+    var reachedLimit = side === 'primary' ? valueMin === valueNow : valueMax === valueNow;
+    return { offset: offset, orientation: orientation, hide: Boolean(hiddenPixels || reachedLimit) };
+};
+
+/**
+ * Delimits the separator position value between 0 to 100 by default.
+ * It will prioritize supplied min and max delimiters as long as they are within the 0-100 range.
+ * @param props Expects a separator value and optional min and max delimiters
+ */
+var clampSeparator = function (props) {
+    var _a = props.min, min = _a === void 0 ? 0 : _a, value = props.value, _b = props.max, max = _b === void 0 ? 100 : _b;
+    var minValue = Math.max(isNaN(min) ? 0 : min, 0);
+    var maxValue = Math.min(isNaN(max) ? 100 : max, 100);
+    return Math.min(Math.max(value, minValue), maxValue);
+};
+
+/**
+ * Returns a value from 0 to 100 that represents the separator position from left to right.
+ * @param separatorRef Separator ref
+ * @param drag Represents mouse/touch horizontal/vertical coordinate when the user is resizing.
+ */
+var getSeparatorPosition = function (separatorRef, drag) {
+    var _a;
+    var splitter = (_a = separatorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!splitter) {
+        return 0;
+    }
+    var orientation = getSeparatorAttributes({ ref: separatorRef }).orientation;
+    var rect = splitter.getBoundingClientRect();
+    var getContainerPixels = function (prop) {
+        return parseFloat(getComputedStyle(splitter).getPropertyValue(prop) || '0');
+    };
+    var lengthProp = orientation !== 'horizontal' ? 'width' : 'height';
+    var offsetProp = orientation !== 'horizontal' ? 'left' : 'top';
+    var containerLength = rect[lengthProp] || getContainerPixels(lengthProp);
+    var containerOffset = rect[lengthProp]
+        ? rect[offsetProp]
+        : getContainerPixels(offsetProp);
+    var value = ((drag - containerOffset) / containerLength) * 100;
+    return clampSeparator({ value: value });
+};
+
+/**
+ * It captures window events to report a new position.
+ * Provides necessary handlers for separator.
+ */
+var useMoveSeparator = function (separator, resize) {
+    var _a = useState(false), resizing = _a[0], setResizing = _a[1];
+    var values = function () { return getSeparatorAttributes({ ref: separator }); };
+    useEffect(function () {
+        var move = function (e) {
+            var _a;
+            var key = values().orientation === 'horizontal' ? 'clientY' : 'clientX';
+            var drag = e.type === 'mousemove'
+                ? e[key]
+                : (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a[key];
+            if (resizing && drag !== undefined) {
+                resize(getSeparatorPosition(separator, drag));
+            }
+        };
+        var mouseup = function () { return setResizing(false); };
+        window.addEventListener('mousemove', move);
+        window.addEventListener('touchmove', move);
+        window.addEventListener('click', mouseup);
+        return function () {
+            window.removeEventListener('mousemove', move);
+            window.removeEventListener('touchmove', move);
+            window.removeEventListener('click', mouseup);
+        };
+    }, [separator, resizing]);
+    useEffect(function () {
+        animateSeparator(separator, resizing ? 'clear-transition' : 'add-transition');
+    }, [separator, resizing]);
+    return {
+        onMouseDown: function () { return setResizing(true); },
+        onTouchStart: function () { return setResizing(true); },
+        onTouchEnd: function () { return setResizing(false); },
+        onBlur: function () { return setResizing(false); }
+    };
+};
+var animateSeparator = function (separatorRef, animate) {
+    var separator = separatorRef.current;
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    if (separator && splitter) {
+        if (animate === 'clear-transition') {
+            separator.style.transition = '';
+            splitter.style.transition = '';
+            splitter.style.cursor =
+                separator.getAttribute('aria-orientation') === 'vertical'
+                    ? 'col-resize'
+                    : 'row-resize';
+            splitter.classList.add('resizing');
+        }
+        else {
+            separator.style.transition = 'left 300ms, top 300ms';
+            splitter.style.transition =
+                'grid-template-columns 300ms, grid-template-rows 300ms';
+            splitter.style.cursor = '';
+            splitter.classList.remove('resizing');
+        }
+    }
+};
+
+/**
+ * Ensures valueNow is set to a valid value within its allowed boundaries.
+ * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ */
+var useValueSeparator = function (_a) {
+    var separator = _a.separator, ratio = _a.ratio, onResized = _a.onResized, _b = _a.boundaries, min = _b.min, max = _b.max;
+    var prev = useRef();
+    var setValueNow = useCallback(function (val) {
+        var valueNow = getSeparatorAttributes({ ref: separator }).valueNow;
+        var value = val !== null && val !== void 0 ? val : (valueNow || min + (max - min) / 2);
+        var newValue = clampSeparator({ value: value, max: max, min: min });
+        resize(separator, newValue);
+        if (prev.current !== newValue) {
+            prev.current = newValue;
+            onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
+        }
+    }, [onResized, min, max, prev]);
+    useEffect(function () {
+        setValueNow(ratio);
+    }, [setValueNow, ratio]);
+    useEffect(function () {
+        var callback = function () {
+            var value = getSeparatorAttributes({ ref: separator }).valueNow;
+            setValueNow(value);
+        };
+        callback();
+        var observer = new MutationObserver(callback);
+        observer.observe(separator.current, {
+            attributeFilter: ['aria-orientation', 'aria-valuemin', 'aria-valuemax']
+        });
+        return function () { return observer.disconnect(); };
+    }, [separator, setValueNow]);
+    useEffect(function () {
+        var observer = new MutationObserver(function (_a) {
+            var target = _a[0].target;
+            var el = target;
+            var splitter = target.parentElement;
+            var newValueNow = Number(el.getAttribute('aria-valuenow'));
+            if (!splitter.classList.contains('resizing')) {
+                setValueNow(newValueNow);
+            }
+        });
+        var attributeFilter = ['aria-valuenow'];
+        observer.observe(separator.current, { attributeFilter: attributeFilter });
+        return function () { return observer.disconnect(); };
+    }, [separator, setValueNow]);
+    return { setValueNow: setValueNow };
+};
+var resize = function (separator, value) {
+    var _a, _b;
+    var newValue = String(value);
+    if (!separator.current) {
+        return;
+    }
+    var _c = getSeparatorAttributes({
+        ref: separator
+    }), gap = _c.thickness, orientation = _c.orientation;
+    if (separator.current.getAttribute('aria-valuenow') !== newValue) {
+        separator.current.setAttribute('aria-valuenow', newValue);
+    }
+    var panels = (_a = separator.current.parentElement.childNodes.length) !== null && _a !== void 0 ? _a : 0;
+    var valueNow = Number(separator.current.getAttribute('aria-valuenow'));
+    var offset = gap / 2;
+    var absolute = "clamp(".concat(offset, "px, ").concat(valueNow, "%, calc(100% - ").concat(offset, "px))");
+    var gridTemplate = panels === 1
+        ? '1fr'
+        : "min(calc(".concat(valueNow, "% - ").concat(gap / 2, "px), calc(100% - ").concat(gap, "px)) 1fr");
+    var splitter = (_b = separator.current) === null || _b === void 0 ? void 0 : _b.parentElement;
+    if (splitter) {
+        splitter.style.opacity = '1';
+        if (orientation === 'vertical') {
+            splitter.style.columnGap = "".concat(gap, "px");
+            splitter.style.gridTemplateColumns = gridTemplate;
+            separator.current.style.width = "".concat(gap, "px");
+            separator.current.style.left = absolute;
+            separator.current.style.height = '100%';
+            separator.current.style.transform = 'translateX(-50%)';
+            separator.current.style.cursor = 'col-resize';
+            splitter.style.rowGap = '';
+            splitter.style.gridTemplateRows = '';
+            separator.current.style.top = '';
+        }
+        else {
+            splitter.style.rowGap = "".concat(gap, "px");
+            splitter.style.gridTemplateRows = gridTemplate;
+            separator.current.style.height = "".concat(gap, "px");
+            separator.current.style.top = absolute;
+            separator.current.style.width = '100%';
+            separator.current.style.transform = 'translateY(-50%)';
+            separator.current.style.cursor = 'row-resize';
+            splitter.style.columnGap = '';
+            splitter.style.gridTemplateColumns = '';
+            separator.current.style.left = '';
+        }
+    }
+};
+
+var isSplitSupported = function (splitter, separator) {
+    var childList = splitter === null || splitter === void 0 ? void 0 : splitter.childNodes.length;
+    return childList === 3 && splitter.childNodes[2] === separator;
+};
+/**
+ * Returns true if the splitter container has 3 child nodes, including the separator.
+ * The consumer must render 2 element nodes (not components), to be able to split.
+ * @param separatorRef Separator ref
+ */
+var useShowSeparator = function (separatorRef) {
+    useEffect(function () {
+        var separator = separatorRef.current;
+        var splitter = separator.parentElement;
+        setShowSeparator(separator, splitter, isSplitSupported(splitter, separatorRef === null || separatorRef === void 0 ? void 0 : separatorRef.current));
+        var observer = new MutationObserver(function (_a) {
+            var target = _a[0].target;
+            return setShowSeparator(separator, splitter, isSplitSupported(target, separatorRef === null || separatorRef === void 0 ? void 0 : separatorRef.current));
+        });
+        observer === null || observer === void 0 ? void 0 : observer.observe(splitter, { childList: true });
+        return function () { return observer === null || observer === void 0 ? void 0 : observer.disconnect(); };
+    }, []);
+};
+var setShowSeparator = function (separator, splitter, show) {
+    if (show) {
+        splitter.style.display = '';
+        separator.style.display = '';
+    }
+    else {
+        splitter.style.display = splitter.childNodes.length === 2 ? 'block' : '';
+        separator.style.display = 'none';
+    }
+};
+
+/**
+ * Gets the delta % the separator should move based on key down.
+ */
+var getKeyDownDeltaMove = function (e, valueNow) {
+    return getNewValueNow(shouldMoveFromKeyDown(e), valueNow, onePixelAsPercentage(e.currentTarget)) - valueNow;
+};
+var onePixelAsPercentage = function (separator) {
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    if (splitter) {
+        var splitterWidth = splitter.getBoundingClientRect().width;
+        return splitterWidth ? 100 / splitterWidth : 0;
+    }
+    return 0;
+};
+var shouldMoveFromKeyDown = function (e) {
+    var orientation = e.currentTarget.getAttribute('aria-orientation');
+    var isPrimary = [
+        orientation === 'horizontal' ? 'ArrowUp' : 'ArrowLeft',
+        'Home',
+    ].includes(e.key);
+    var isSecondary = [
+        orientation === 'horizontal' ? 'ArrowDown' : 'ArrowRight',
+        'End',
+    ].includes(e.key);
+    var direction = isPrimary ? -1 : isSecondary ? 1 : 0;
+    var isMeta = [e.ctrlKey, e.shiftKey, e.metaKey, e.altKey].some(Boolean);
+    var isArrow = e.key.startsWith('Arrow');
+    var isLimit = ['Home', 'End'].includes(e.key);
+    var speed = isLimit ? 'fastest' : isMeta && isArrow ? 'faster' : 'slow';
+    return [direction, speed];
+};
+var getNewValueNow = function (_a, valueNow, pixelUnit) {
+    var direction = _a[0], speed = _a[1];
+    if (direction) {
+        switch (speed) {
+            case 'slow':
+                return valueNow + pixelUnit * direction;
+            case 'faster':
+                return valueNow + 10 * direction;
+            case 'fastest':
+                return direction === -1 ? 0 : 100;
+        }
+    }
+    return valueNow;
+};
+
+var canceEvent = function (e) {
+    if (e.currentTarget !== e.target) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+};
+var Separator = forwardRef$1(function (_a, forwardRef) {
+    var _b;
+    var parts = _a.parts, ratio = _a.ratio, onResized = _a.onResized, props = __rest(_a, ["parts", "ratio", "onResized"]);
+    var separator = useForkRef(forwardRef);
+    var boundaries = {
+        min: props['aria-valuemin'],
+        max: props['aria-valuemax']
+    };
+    var setValueNow = useValueSeparator({
+        ratio: ratio,
+        separator: separator,
+        onResized: onResized,
+        boundaries: boundaries
+    }).setValueNow;
+    useShowSeparator(separator);
+    var values = function () { return getSeparatorAttributes({ ref: separator }); };
+    return (React__default.createElement("div", __assign({ ref: separator }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
+            var _a;
+            var newValueNow = keyDownHandler(e);
+            if (values().valueNow !== newValueNow) {
+                setValueNow(newValueNow);
+                e.preventDefault();
+            }
+            (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, className: clsx('Separator', props.className) }),
+        React__default.createElement("span", __assign({}, parts === null || parts === void 0 ? void 0 : parts.container, { className: clsx('Separator-arrows', (_b = parts === null || parts === void 0 ? void 0 : parts.container) === null || _b === void 0 ? void 0 : _b.className), onMouseDown: canceEvent, onTouchStart: canceEvent }),
+            React__default.createElement(Control, __assign({}, parts === null || parts === void 0 ? void 0 : parts.primary, { side: "primary", onClick: function (e) {
+                    var _a, _b;
+                    setValueNow(controlClickHandler(e, 'primary'));
+                    (_b = (_a = parts === null || parts === void 0 ? void 0 : parts.primary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                } })),
+            React__default.createElement(Control, __assign({}, parts === null || parts === void 0 ? void 0 : parts.secondary, { side: "secondary", onClick: function (e) {
+                    var _a, _b;
+                    setValueNow(controlClickHandler(e, 'secondary'));
+                    (_b = (_a = parts === null || parts === void 0 ? void 0 : parts.secondary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                } })))));
+});
+var controlClickHandler = function (e, side) {
+    var _a = getSeparatorAttributes({
+        child: e.currentTarget
+    }), valueNow = _a.valueNow, valueMin = _a.valueMin, valueMax = _a.valueMax;
+    var valueMiddle = valueMin + (valueMax - valueMin) / 2;
+    var newValue = [0, 100].includes(valueNow)
+        ? valueMiddle
+        : side === 'primary'
+            ? valueMin
+            : valueMax;
+    return newValue;
+};
+var keyDownHandler = function (e) {
+    var valueNow = getSeparatorAttributes({
+        child: e.currentTarget
+    }).valueNow;
+    var delta = getKeyDownDeltaMove(e, valueNow);
+    return valueNow + delta;
+};
+
+var css_248z = "/**\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);
+
+/**
+ * Container that appends a separator when the children count equals 2.
+ * It looks at HTML nodes, not React components
+ */
+var Splitter = forwardRef$1(function (props, ref) {
+    if (props === void 0) { props = {}; }
+    var parts = props.parts, ratio = props.ratio, onResized = props.onResized, min = props.min, max = props.max, children = props.children, _a = props.orientation, orientation = _a === void 0 ? 'vertical' : _a, rest = __rest(props, ["parts", "ratio", "onResized", "min", "max", "children", "orientation"]);
+    return (React__default.createElement("div", __assign({ ref: ref }, rest, { className: clsx('Splitter', rest === null || rest === void 0 ? void 0 : rest.className) }),
+        children,
+        React__default.createElement(Separator, __assign({}, parts === null || parts === void 0 ? void 0 : parts.separator, { tabIndex: 0, "aria-valuemin": Math.max(min !== null && min !== void 0 ? min : 0, 0), "aria-valuemax": Math.min(max !== null && max !== void 0 ? max : 100, 100), role: "separator", "aria-orientation": orientation, ratio: ratio, onResized: onResized, parts: parts === null || parts === void 0 ? void 0 : parts.controls }))));
+});
+Splitter.displayName = 'Splitter';
+
+var getSeparator = function (splitter) {
+    var _a;
+    var lastChild = (_a = splitter.current) === null || _a === void 0 ? void 0 : _a.lastChild;
+    return (lastChild === null || lastChild === void 0 ? void 0 : lastChild.getAttribute('role')) === 'separator'
+        ? lastChild
+        : undefined;
+};
+var useSplitterRef = function () {
+    var ref = useRef(null);
+    var setRatio = function (val) {
+        var separator = getSeparator(ref);
+        if (separator) {
+            separator.setAttribute('aria-valuenow', String(val));
+        }
+    };
+    return { ref: ref, setRatio: setRatio };
+};
+
+export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, 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, 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, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, 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 };
 //# sourceMappingURL=lui.esm.js.map