@linzjs/lui 17.52.0 → 17.52.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [17.52.2](https://github.com/linz/lui/compare/v17.52.1...v17.52.2) (2023-04-26)
+
+
+### Bug Fixes
+
+* When LuiSideToolbar button is in loading space it increase the spacing below ([#933](https://github.com/linz/lui/issues/933)) ([f5b23eb](https://github.com/linz/lui/commit/f5b23ebdbb1ab7c6ccea776566638e5fb30b3165))
+
+## [17.52.1](https://github.com/linz/lui/compare/v17.52.0...v17.52.1) (2023-04-23)
+
+
+### Bug Fixes
+
+* release toolbar bug fix ([#932](https://github.com/linz/lui/issues/932)) ([4785395](https://github.com/linz/lui/commit/4785395da8571f138ad2fbe18363a06eda872537))
+
 # [17.52.0](https://github.com/linz/lui/compare/v17.51.0...v17.52.0) (2023-04-21)
 
 

package/dist/components/LuiSideToolbar/LuiSideToolbar.d.ts

@@ -1,21 +1,11 @@
 import './LuiSideToolbar.scss';
 import { ReactNode } from 'react';
-export declare type ToolbarConfig<T> = {
-    icon: string;
-    iconImage?: string;
-    isDisabled?: boolean;
-    isFetching?: boolean;
-    isToggled?: boolean;
-    key: T;
-    title: string;
-    tooltipMessage?: string;
-};
 export declare enum ToolbarDirection {
     LEFT = "Left",
     RIGHT = "Right"
 }
 export interface ToolbarProps {
     direction: ToolbarDirection;
-    children: ReactNode[];
+    children: ReactNode;
 }
 export declare function LuiSideToolbar(props: ToolbarProps): JSX.Element;

package/dist/index.d.ts

@@ -70,5 +70,8 @@ export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRe
 export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
 export { LuiSideMenu, ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';
 export { LuiSideMenuItem, ILuiSideMenuItemProps, LuiMenuItemClickHandler, } from './components/LuiSideMenu/LuiSideMenuItem';
+export { LuiSideToolbar, ToolbarDirection, } from './components/LuiSideToolbar/LuiSideToolbar';
+export { ToolbarButton, ToolbarButtonProps, } from './components/LuiSideToolbar/ToolbarButton';
+export { ToolbarItem, ToolbarItemProps, ToolbarItemSeparator, } from './components/LuiSideToolbar/ToolbarItem';
 export { Breakpoint, breakpoints, breakpointQuery, useMediaQuery, } from './components/common/UseMediaQuery';
 export { useEscapeFunction, usePageClickFunction, } from './components/common/Hooks';

package/dist/index.js

@@ -25426,8 +25426,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$8 = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
-styleInject(css_248z$8);
+var css_248z$a = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
+styleInject(css_248z$a);
 
 /**
  * Overwrite the common buttons for floating window to
@@ -27676,8 +27676,8 @@ ReactSplitGrid.defaultProps = {
     onDrag: undefined,
 };
 
-var css_248z$7 = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px;\n  /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
-styleInject(css_248z$7);
+var css_248z$9 = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px;\n  /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
+styleInject(css_248z$9);
 
 var GutterComponent = function (props) {
     var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
@@ -27995,8 +27995,8 @@ function LuiFormikForm(props) {
                 " "))));
 }
 
-var css_248z$6 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiError {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError-errorIcon {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError-errorText {\n  margin-left: 0.5rem;\n}";
-styleInject(css_248z$6);
+var css_248z$8 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiError {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError-errorIcon {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError-errorText {\n  margin-left: 0.5rem;\n}";
+styleInject(css_248z$8);
 
 var LuiError = function (_a) {
     var error = _a.error, className = _a.className;
@@ -52497,8 +52497,8 @@ function isChromatic() {
         (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
 }
 
-var css_248z$5 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
-styleInject(css_248z$5);
+var css_248z$7 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
+styleInject(css_248z$7);
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 
@@ -52619,13 +52619,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$5['sea'], primary75: css_248z$5['electric'], primary50: css_248z$5['spray'], primary25: css_248z$5['polar'], neutral90: css_248z$5['charcoal'], neutral80: css_248z$5['charcoal'], neutral70: css_248z$5['charcoal'], neutral60: css_248z$5['fuscous'], neutral50: css_248z$5['fuscous'], neutral40: css_248z$5['gray'], neutral30: css_248z$5['gray'], neutral20: css_248z$5['silver'], neutral10: css_248z$5['lily'], neutral5: css_248z$5['hint'], danger: css_248z$5['error'], dangerLight: css_248z$5['error-bg'] }) })); }, styles: {
+    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$7['sea'], primary75: css_248z$7['electric'], primary50: css_248z$7['spray'], primary25: css_248z$7['polar'], neutral90: css_248z$7['charcoal'], neutral80: css_248z$7['charcoal'], neutral70: css_248z$7['charcoal'], neutral60: css_248z$7['fuscous'], neutral50: css_248z$7['fuscous'], neutral40: css_248z$7['gray'], neutral30: css_248z$7['gray'], neutral20: css_248z$7['silver'], neutral10: css_248z$7['lily'], neutral5: css_248z$7['hint'], danger: css_248z$7['error'], dangerLight: css_248z$7['error-bg'] }) })); }, styles: {
             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$5['fuscous'] })); },
+            dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$7['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'
@@ -52633,10 +52633,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$5['input-placeholder'] })); },
+                fontWeight: 'normal', fontStyle: 'italic', color: css_248z$7['input-placeholder'] })); },
             option: function (provided, _a) {
                 var isSelected = _a.isSelected;
-                return (__assign(__assign({}, provided), { color: css_248z$5['input-text'], backgroundColor: isSelected ? css_248z$5['selection'] : css_248z$5['white'] }));
+                return (__assign(__assign({}, provided), { color: css_248z$7['input-text'], backgroundColor: isSelected ? css_248z$7['selection'] : css_248z$7['white'] }));
             }
         } });
     return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
@@ -55008,8 +55008,8 @@ var LuiModalHeader = function (props) {
                 React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-var css_248z$4 = "@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n";
-styleInject(css_248z$4);
+var css_248z$6 = "@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n";
+styleInject(css_248z$6);
 
 /**
  * @internal
@@ -60270,8 +60270,8 @@ var LuiSidePanelProvider = function (_a) {
         React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
 };
 
-var css_248z$3 = ".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$3);
+var css_248z$5 = ".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$5);
 
 var LuiSwitchButton = function (props) {
     var generatedId = useGenerateOrDefaultId();
@@ -67902,8 +67902,8 @@ var LuiAccordicardStatic = function (props) {
             React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
 };
 
-var css_248z$2 = "/**\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$2);
+var css_248z$4 = "/**\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$4);
 
 function $c1d7fb2ec91bae71$var$Item(props) {
     return null;
@@ -71403,16 +71403,16 @@ function DefaultEmptyIndicator() {
     return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
 }
 
-var css_248z$1 = "/**\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$1);
+var css_248z$3 = "/**\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$3);
 
 function RadioItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
     return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
 }
 
-var css_248z = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
-styleInject(css_248z);
+var css_248z$2 = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
+styleInject(css_248z$2);
 
 function CheckboxItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
@@ -71436,6 +71436,65 @@ function LuiSideMenuItem(_a) {
             React__default["default"].createElement("span", { className: "navText" }, label))));
 }
 
+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 #00000040, 0px 0px 3px 0px #00000026;\n}\n\n.Left {\n  justify-self: start;\n}\n\n.Right {\n  justify-self: end;\n}";
+styleInject(css_248z$1);
+
+exports.ToolbarDirection = void 0;
+(function (ToolbarDirection) {
+    ToolbarDirection["LEFT"] = "Left";
+    ToolbarDirection["RIGHT"] = "Right";
+})(exports.ToolbarDirection || (exports.ToolbarDirection = {}));
+function LuiSideToolbar(props) {
+    return (React__default["default"].createElement("div", { className: clsx(['Toolbar', 'app--shadow-sm', props.direction]), "data-testid": "toolbar" }, props.children));
+}
+
+/**
+ * Show LuiIcon or Image.
+ *
+ * @param param
+ * @returns
+ */
+var ToolbarIcon = function (_a) {
+    var iconImage = _a.iconImage, iconName = _a.iconName;
+    return iconImage ? (React__default["default"].createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default["default"].createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
+};
+
+var css_248z = "/**\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);
+
+/**
+ * Create button for using either LuiIcon or Image.
+ *
+ * @param props
+ * @returns
+ */
+var ToolbarButton = function (_a) {
+    var disabled = _a.disabled, highlighted = _a.highlighted, iconImage = _a.iconImage, iconName = _a.iconName, loading = _a.loading, onClick = _a.onClick, panelTitle = _a.panelTitle, panelKey = _a.panelKey, tooltip = _a.tooltip;
+    if (loading) {
+        return React__default["default"].createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
+    }
+    var button = (React__default["default"].createElement("button", { className: "".concat(highlighted ? 'lui-button-primary' : 'lui-button-secondary', " ToolbarButton ToolbarButton-placement"), "data-testid": "ToolbarButton-".concat(panelKey), disabled: disabled, onClick: onClick, title: panelTitle, type: "button" },
+        React__default["default"].createElement(ToolbarIcon, { iconImage: iconImage, iconName: iconName })));
+    return tooltip ? (React__default["default"].createElement(LuiTooltip, { placement: "auto", message: tooltip }, button)) : (React__default["default"].createElement(React__default["default"].Fragment, null, button));
+};
+
+/**
+ * Allows any item to be added into the toolbar (with appropriate styles and size)
+ *
+ * @param props
+ * @returns
+ */
+var ToolbarItem = function (props) {
+    if (props.loading) {
+        return React__default["default"].createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
+    }
+    var item = (React__default["default"].createElement("div", { className: "ToolbarButton", onClick: props.onClick, "data-testid": props.dataTestId }, props.children));
+    return props.tooltip ? (React__default["default"].createElement(LuiTooltip, { placement: "auto", message: props.tooltip }, item)) : (React__default["default"].createElement(React__default["default"].Fragment, null, item));
+};
+var ToolbarItemSeparator = function () {
+    return React__default["default"].createElement("div", { className: 'ToolbarItem-separator' });
+};
+
 var breakpoints = {
     sm: 480,
     md: 768,
@@ -71560,6 +71619,7 @@ exports.LuiSideMenu = LuiSideMenu;
 exports.LuiSideMenuItem = LuiSideMenuItem;
 exports.LuiSidePanel = LuiSidePanel;
 exports.LuiSidePanelProvider = LuiSidePanelProvider;
+exports.LuiSideToolbar = LuiSideToolbar;
 exports.LuiStaticMessage = LuiStaticMessage;
 exports.LuiStatusSpinner = LuiStatusSpinner;
 exports.LuiSwitchButton = LuiSwitchButton;
@@ -71575,6 +71635,9 @@ exports.LuiToastMessage = LuiToastMessage;
 exports.LuiTooltip = LuiTooltip;
 exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;
 exports.RadioItemRenderer = RadioItemRenderer;
+exports.ToolbarButton = ToolbarButton;
+exports.ToolbarItem = ToolbarItem;
+exports.ToolbarItemSeparator = ToolbarItemSeparator;
 exports.breakpointQuery = breakpointQuery;
 exports.breakpoints = breakpoints;
 exports.getDefaultSearchMenuOptions = getDefaultSearchMenuOptions;