@galaxy-ds/core 1.1.76 → 1.1.77

package/dist/index.js

@@ -30922,7 +30922,7 @@ function ChevronDownIcon(props) {
         React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.00001 6.08008L3.20001 6.88008L8.00001 11.6801L12.8 6.88008L12 6.08008L8.00001 10.0801L4.00001 6.08008Z", fill: "currentColor" })));
 }
 
-var useStyles$B = makeStyles(function (theme) {
+var useStyles$C = makeStyles(function (theme) {
     return createStyles({
         root: function (props) { return ({
             backgroundColor: props.bgColor || theme.palette.grey[200]
@@ -30930,7 +30930,7 @@ var useStyles$B = makeStyles(function (theme) {
     });
 });
 var AccordionSummary = function (props) {
-    var classes = useStyles$B({ bgColor: props.bgColor });
+    var classes = useStyles$C({ bgColor: props.bgColor });
     return (React__default["default"].createElement(MuiAccordionSummary, __assign$1({ className: classes.root }, props, { expandIcon: React__default["default"].createElement(ChevronDownIcon, { fontSize: 'small' }) })));
 };
 
@@ -33181,7 +33181,7 @@ var common = {
     opacity: opacity
 };
 
-var useStyles$A = makeStyles({
+var useStyles$B = makeStyles({
     root: {
         "&.gds-text-primary": {
             color: common.brand.primary.main,
@@ -33214,7 +33214,7 @@ var useStyles$A = makeStyles({
 });
 var Typography = React__default["default"].forwardRef(function (props, ref) {
     var color = props.color, upperCase = props.upperCase, rest = __rest(props, ["color", "upperCase"]);
-    var classes = useStyles$A(props);
+    var classes = useStyles$B(props);
     var colorProp;
     switch (color) {
         case 'primary':
@@ -33247,7 +33247,7 @@ var Typography = React__default["default"].forwardRef(function (props, ref) {
     return (React__default["default"].createElement(Typography$2, __assign$1({ ref: ref }, rest, { className: clsx(classes.root, colorProp, upperCase ? 'gds-text-uppercase' : '') })));
 });
 
-var useStyles$z = makeStyles({
+var useStyles$A = makeStyles({
     root: {
         '&.gds-divider': {
             marginTop: 2,
@@ -33265,7 +33265,7 @@ var useStyles$z = makeStyles({
 });
 var Divider = function (props) {
     var orientation = props.orientation, rest = __rest(props, ["orientation"]);
-    var classes = useStyles$z();
+    var classes = useStyles$A();
     var variantProp;
     switch (orientation) {
         case 'horizontal':
@@ -33280,7 +33280,7 @@ var Divider = function (props) {
     return (React__default["default"].createElement(Divider$2, __assign$1({}, rest, { className: clsx(classes.root, 'gds-divider', variantProp) })));
 };
 
-var useStyles$y = makeStyles(function (theme) {
+var useStyles$z = makeStyles(function (theme) {
     return createStyles({
         inputRoot: {
             '& > *': {
@@ -33368,7 +33368,7 @@ var useStyles$y = makeStyles(function (theme) {
 var Autocomplete = function (_a) {
     var _b;
     var label = _a.label, placeholder = _a.placeholder, _c = _a.platform, platform = _c === void 0 ? 'desktop' : _c, actionLabel = _a.actionLabel, actionClick = _a.actionClick, onChange = _a.onChange, bottomButtonHeight = _a.bottomButtonHeight, textFieldReadOnly = _a.textFieldReadOnly, rest = __rest(_a, ["label", "placeholder", "platform", "actionLabel", "actionClick", "onChange", "bottomButtonHeight", "textFieldReadOnly"]);
-    var classes = useStyles$y({ platform: platform, bottomButtonHeight: bottomButtonHeight });
+    var classes = useStyles$z({ platform: platform, bottomButtonHeight: bottomButtonHeight });
     var _d = React.useState(!((_b = rest.defaultValue) === null || _b === void 0 ? void 0 : _b.length) ? placeholder : null), inputPlaceholder = _d[0], setInputPlaceholder = _d[1];
     var root = React.useRef(null);
     var onKeyDownHandler = function (event) {
@@ -33401,7 +33401,7 @@ var Autocomplete = function (_a) {
             }, onKeyDown: onKeyDownHandler, ref: root }, rest))));
 };
 
-var useStyles$x = makeStyles(function () {
+var useStyles$y = makeStyles(function () {
     return createStyles({
         sizeSmall: {
             width: 18,
@@ -33432,7 +33432,7 @@ var useStyles$x = makeStyles(function () {
 var Avatar = function (props) {
     var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, rest = __rest(props, ["tooltip", "tooltipPlacement"]);
     var placement = tooltipPlacement !== undefined ? tooltipPlacement : "top";
-    var classes = useStyles$x(props);
+    var classes = useStyles$y(props);
     var sizeProp;
     var colorProp;
     switch (rest.size) {
@@ -33667,7 +33667,7 @@ var pallette$1 = {
 };
 var pallettes$1 = __assign$1({ pallette: pallette$1 }, common);
 
-var useStyles$w = makeStyles(createStyles({
+var useStyles$x = makeStyles(createStyles({
     root: {
         "&.gds-drawer-menu-item": {
             borderRadius: '0.5rem',
@@ -33740,7 +33740,7 @@ var useStyles$w = makeStyles(createStyles({
 }));
 var DrawerMenu = React__default["default"].forwardRef(function (props, ref) {
     var children = props.children, startAdornment = props.startAdornment, submenu = props.submenu, _a = props.variant, variant = _a === void 0 ? 'light' : _a, value = props.value, open = props.open, expand = props.expand, rest = __rest(props, ["children", "startAdornment", "submenu", "variant", "value", "open", "expand"]);
-    var classes = useStyles$w();
+    var classes = useStyles$x();
     var variantProp;
     switch (variant) {
         case 'light':
@@ -33857,7 +33857,7 @@ var typography$1 = {
 };
 
 // import Tooltip from '../Tooltip/Tooltip';
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$w = makeStyles(function (theme) {
     return createStyles({
         avatarBorder: {
             '& .MuiAvatar-root, & .MuiAvatarGroup-avatar': {
@@ -33922,7 +33922,7 @@ var useStyles$v = makeStyles(function (theme) {
     });
 });
 var AvatarsGroup = function (props) {
-    var classes = useStyles$v(props);
+    var classes = useStyles$w(props);
     props.color; var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, defaultProps = __rest(props, ["color", "tooltip", "tooltipPlacement"]);
     var colorProp;
     switch (props.color) {
@@ -33972,7 +33972,7 @@ var Box = function (props) {
     return (React__default["default"].createElement(Box$2, __assign$1({}, props)));
 };
 
-var useStyles$u = makeStyles(function (theme) {
+var useStyles$v = makeStyles(function (theme) {
     return createStyles({
         root: {
             "&.gds-button--danger": {}
@@ -33980,7 +33980,7 @@ var useStyles$u = makeStyles(function (theme) {
     });
 });
 var Button = function (props) {
-    var classes = useStyles$u(props);
+    var classes = useStyles$v(props);
     var isLoading = props.isLoading, isDanger = props.isDanger, defaultProps = __rest(props, ["isLoading", "isDanger"]);
     return (React__default["default"].createElement(Button$2, __assign$1({ disableElevation: true, disableRipple: true }, defaultProps, { onClick: defaultProps.onClick, ref: defaultProps.refprop, className: clsx(classes.root, isDanger ? ' gds-button--danger' : '') }), !isLoading ? defaultProps.children : React__default["default"].createElement(CircularProgress$1, { size: 16, color: "inherit" })));
 };
@@ -33998,7 +33998,7 @@ function CrossIcon(props) {
         React__default["default"].createElement("path", { stroke: "currentColor", d: "M8.012 15.875L15.887 8M15.887 15.976L8.012 8.101" })));
 }
 
-var useStyles$t = makeStyles({
+var useStyles$u = makeStyles({
     root: {
         '&.gds-chip-rounded': {
             borderRadius: 50,
@@ -34010,7 +34010,7 @@ var useStyles$t = makeStyles({
     },
 });
 var Chip = function (props) {
-    var classes = useStyles$t();
+    var classes = useStyles$u();
     var variant = props.variant, transparent = props.transparent, rounded = props.rounded, defaultProps = __rest(props, ["variant", "transparent", "rounded"]);
     var variantProp;
     switch (variant) {
@@ -34038,7 +34038,7 @@ var Chip = function (props) {
     return (React__default["default"].createElement(MuiChip, __assign$1({}, defaultProps, { size: "small", onDelete: defaultProps.onDelete, deleteIcon: React__default["default"].createElement(CrossIcon, null), className: clsx(variantProp, classes.root, transparent ? 'gds-chip-transparent' : '', rounded ? 'gds-chip-rounded' : '') })));
 };
 
-var useStyles$s = makeStyles({
+var useStyles$t = makeStyles({
     root: {
         "&.gds-card": {
             cursor: 'pointer'
@@ -34046,7 +34046,7 @@ var useStyles$s = makeStyles({
     },
 });
 var Card = function (props) {
-    var classes = useStyles$s();
+    var classes = useStyles$t();
     var active = props.active, children = props.children; __rest(props, ["active", "children"]);
     return (React__default["default"].createElement(MuiCard, { elevation: 0, className: clsx(classes.root, 'gds-card', active ? 'gds-card--active' : '') }, children));
 };
@@ -34072,7 +34072,7 @@ var Input = function (_a) {
         helperText && React__default["default"].createElement(FormHelperText$1, { error: error }, helperText)));
 };
 
-var useStyles$r = makeStyles(function () { return createStyles({
+var useStyles$s = makeStyles(function () { return createStyles({
     root: {
         width: function (props) { return props.width ? props.width : ''; }
     },
@@ -34083,7 +34083,7 @@ var useStyles$r = makeStyles(function () { return createStyles({
 }); });
 var Dropdown = function (_a) {
     var children = _a.children, _b = _a.elevation, elevation = _b === void 0 ? 3 : _b, _c = _a.align, align = _c === void 0 ? 'right' : _c, label = _a.label, width = _a.width, _d = _a.size, size = _d === void 0 ? 'medium' : _d, disabled = _a.disabled, _e = _a.variant, variant = _e === void 0 ? 'dropdown' : _e, fullWidth = _a.fullWidth, rest = __rest(_a, ["children", "elevation", "align", "label", "width", "size", "disabled", "variant", "fullWidth"]);
-    var classes = useStyles$r({ width: width });
+    var classes = useStyles$s({ width: width });
     var isDefinedWidth = function (definedWidth) {
         return typeof definedWidth !== 'undefined' ? 'MuiInputBase-definedWidth' : '';
     };
@@ -34127,7 +34127,7 @@ var EmptyState = function (_a) {
             React__default["default"].createElement(Typography$2, { color: 'textSecondary', variant: 'body1' }, description))));
 };
 
-var useStyles$q = makeStyles(function (theme) { return ({
+var useStyles$r = makeStyles(function (theme) { return ({
     root: {
         "&.gds-formgroup": {
             width: '100%'
@@ -34143,11 +34143,11 @@ var useStyles$q = makeStyles(function (theme) { return ({
 }); });
 var FormGroup = function (_a) {
     var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? 0 : _b, _c = _a.alignItems, alignItems = _c === void 0 ? 'flex-start' : _c, _d = _a.margin, margin = _d === void 0 ? false : _d, props = __rest(_a, ["children", "spacing", "alignItems", "margin"]);
-    var classes = useStyles$q({ spacing: spacing, alignItems: alignItems });
+    var classes = useStyles$r({ spacing: spacing, alignItems: alignItems });
     return (React__default["default"].createElement(MuiFormGroup, __assign$1({ className: clsx(classes.root, 'gds-formgroup', margin ? 'formGroupMargin' : '') }, props), children));
 };
 
-var useStyles$p = makeStyles({
+var useStyles$q = makeStyles({
     root: {
         "&.form-container": {
             display: "grid",
@@ -34159,11 +34159,11 @@ var useStyles$p = makeStyles({
     },
 });
 var FormContainer = function (props) {
-    var classes = useStyles$p(props);
+    var classes = useStyles$q(props);
     return (React__default["default"].createElement("form", { onSubmit: props.onSubmit, className: clsx(classes.root, "form-container") }, props.children));
 };
 
-var useStyles$o = makeStyles({
+var useStyles$p = makeStyles({
     root: {
         "&.form-body": {
             display: 'flex',
@@ -34184,11 +34184,11 @@ var useStyles$o = makeStyles({
 });
 var FormBody = function (props) {
     var children = props.children;
-    var classes = useStyles$o(props);
+    var classes = useStyles$p(props);
     return (React__default["default"].createElement("div", { className: clsx(classes.root, "form-body") }, children));
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$o = makeStyles(function (theme) {
     return createStyles({
         root: {
             "& .MuiDivider-root": {
@@ -34238,7 +34238,7 @@ var useStyles$n = makeStyles(function (theme) {
 });
 var MenuItem = React__default["default"].forwardRef(function (props, ref) {
     var children = props.children, startAdornment = props.startAdornment, value = props.value, system = props.system, border = props.border, checked = props.checked, rest = __rest(props, ["children", "startAdornment", "value", "system", "border", "checked"]);
-    var classes = useStyles$n();
+    var classes = useStyles$o();
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement(MuiMenuItem, __assign$1({ ref: ref }, rest, { button: true, className: clsx(classes.root, checked ? "gds-menu-item-checked" : "", system ? "gds-menu-item-system" : "", startAdornment ? "gds-menu-item-icon" : "") }),
             startAdornment ? (React__default["default"].createElement(ListItemIcon, null, startAdornment)) : null,
@@ -34262,7 +34262,7 @@ function LawconnectIcon(props) {
         React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.163 119.104a69.739 69.739 0 0049.313 20.426h.133a69.68 69.68 0 0064.35-43.067 69.663 69.663 0 005.281-26.673h-33.528v.042a36.23 36.23 0 01-22.382 33.464 36.236 36.236 0 11-13.853-69.718V.05a69.74 69.74 0 00-49.314 119.054zm119.049-95.585c0 12.962-10.507 23.47-23.469 23.47-12.962 0-23.47-10.508-23.47-23.47S103.782.049 116.744.049s23.469 10.508 23.469 23.47z", fill: "#ecedef" })));
 }
 
-var useStyles$m = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
     var _a;
     return ({
         root: {
@@ -34336,7 +34336,7 @@ var useStyles$m = makeStyles(function (theme) {
     });
 });
 var FormHeader = React__default["default"].forwardRef(function (props, ref) {
-    var classes = useStyles$m();
+    var classes = useStyles$n();
     return (React__default["default"].createElement(Box$2, { className: clsx(classes.root, 'gds-header', props.fixed ? 'gds-header-fixed' : '') },
         props.hideBranding ? ('') : (React__default["default"].createElement("div", { className: clsx(classes.root, 'gds-header_accent') },
             React__default["default"].createElement(LawconnectIcon, { size: "260" }))),
@@ -34350,7 +34350,7 @@ var FormHeader = React__default["default"].forwardRef(function (props, ref) {
         React__default["default"].createElement("div", { className: clsx(classes.root, 'gds-header_content') }, props.children)));
 });
 
-var useStyles$l = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiListSubheader-root': {
@@ -34370,13 +34370,13 @@ var useStyles$l = makeStyles(function (theme) {
 });
 var MenuHeader = function (props) {
     var children = props.children, rest = __rest(props, ["children"]);
-    var classes = useStyles$l();
+    var classes = useStyles$m();
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement(ListSubheader$2, __assign$1({}, rest), children),
         React__default["default"].createElement(Divider, null)));
 };
 
-var useStyles$k = makeStyles(function (theme) {
+var useStyles$l = makeStyles(function (theme) {
     return createStyles({
         root: {
             color: common.brand.utility.border,
@@ -34392,13 +34392,13 @@ var useStyles$k = makeStyles(function (theme) {
 });
 var MenuContext = function (_a) {
     var title = _a.title, children = _a.children, props = __rest(_a, ["title", "children"]);
-    var classes = useStyles$k();
+    var classes = useStyles$l();
     return (React__default["default"].createElement(MuiMenu, __assign$1({ PopoverClasses: { paper: classes.root } }, props, { elevation: 0 }),
         title ? React__default["default"].createElement(MenuHeader, null, title) : "",
         children));
 };
 
-var useStyles$j = makeStyles(function (theme) {
+var useStyles$k = makeStyles(function (theme) {
     return createStyles({
         root: {
             "&.gds-menu-system .MuiPaper-root": {
@@ -34416,7 +34416,7 @@ var useStyles$j = makeStyles(function (theme) {
 });
 var Menu = function (props) {
     var system = props.system, title = props.title, rest = __rest(props, ["system", "title"]);
-    var classes = useStyles$j(props);
+    var classes = useStyles$k(props);
     return (React__default["default"].createElement(MuiMenu, __assign$1({}, rest, { className: clsx(classes.root, system ? "gds-menu-system" : "") }, props, { elevation: 0 }),
         title ? React__default["default"].createElement(MenuHeader, null, title) : "",
         props.children));
@@ -34427,7 +34427,7 @@ function TickIcon(props) {
         React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.415 5.744l-.79.79 2.828 2.83 6.01-6.011-.79-.79-5.22 5.22-2.038-2.039z", fill: "currentColor" })));
 }
 
-var useStyles$i = makeStyles(function (theme) {
+var useStyles$j = makeStyles(function (theme) {
     return createStyles({
         root: {
             "& .MuiDivider-root": {
@@ -34467,7 +34467,7 @@ var useStyles$i = makeStyles(function (theme) {
     });
 });
 var MenuItemSystem = React__default["default"].forwardRef(function (props, ref) {
-    var classes = useStyles$i();
+    var classes = useStyles$j();
     var children = props.children, prependIcon = props.prependIcon, border = props.border, rest = __rest(props, ["children", "prependIcon", "border"]);
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement(MuiMenuItem, __assign$1({ className: classes.MenuItem, ref: ref }, rest),
@@ -34487,7 +34487,7 @@ var ListItemAvatar = function (props) {
     return (React__default["default"].createElement(MuiListItemAvatar, __assign$1({}, props)));
 };
 
-var useStyles$h = makeStyles(function () {
+var useStyles$i = makeStyles(function () {
     return createStyles({
         root: {
             position: 'relative',
@@ -34527,7 +34527,7 @@ var ListItemHoverContent = function (_a) {
         var width2 = contentRef2.current.clientWidth;
         setWidth(width1 > width2 ? width1 : width2);
     }, []);
-    var classes = useStyles$h({ width: width });
+    var classes = useStyles$i({ width: width });
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement("div", { ref: contentRef1, className: classes.hideOnHover }, hideOnHover),
         React__default["default"].createElement("div", { ref: contentRef2, className: classes.showOnHover }, showOnHover)));
@@ -34542,7 +34542,7 @@ var ListSubheader = function (props) {
     return (React__default["default"].createElement(ListSubheader$2, __assign$1({}, rest), children));
 };
 
-var useStyles$g = makeStyles(function (theme) { return createStyles({
+var useStyles$h = makeStyles(function (theme) { return createStyles({
     root: {
         color: common.grey[600],
         '&::after': {
@@ -34581,11 +34581,11 @@ var useStyles$g = makeStyles(function (theme) { return createStyles({
     selected: {}
 }); });
 var Tab = function (props) {
-    var classes = useStyles$g();
+    var classes = useStyles$h();
     return (React__default["default"].createElement(MuiTab, __assign$1({ className: classes.root, component: 'div' }, props)));
 };
 
-var useStyles$f = makeStyles(createStyles({
+var useStyles$g = makeStyles(createStyles({
     root: {
         flexGrow: 1,
         backgroundColor: common.brand.background.tabs,
@@ -34605,12 +34605,12 @@ var useStyles$f = makeStyles(createStyles({
 }));
 var Tabs = function (_a) {
     var children = _a.children, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, props = __rest(_a, ["children", "orientation"]);
-    var classes = useStyles$f();
+    var classes = useStyles$g();
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement(MuiTabs, __assign$1({ orientation: orientation }, props, { classes: { root: classes.tabsRoot, indicator: classes.indicator }, indicatorColor: "secondary" }), children)));
 };
 
-var useStyles$e = makeStyles(function (theme) { return createStyles({
+var useStyles$f = makeStyles(function (theme) { return createStyles({
     root: {
         backgroundColor: 'transparent',
         textTransform: 'none',
@@ -34680,7 +34680,7 @@ var TabListItem = function (_a) {
         var width2 = contentRef2.current.clientWidth;
         setWidth(width1 > width2 ? width1 : width2);
     }, []);
-    var classes = useStyles$e({ width: width });
+    var classes = useStyles$f({ width: width });
     return (React__default["default"].createElement(MuiListItem, __assign$1({ className: classes.root, button: true, disableGutters: true }, props),
         React__default["default"].createElement(React__default["default"].Fragment, null,
             children,
@@ -34750,7 +34750,7 @@ var RadioGroup = function (props) {
         React__default["default"].createElement(MuiRadioGroup, __assign$1({}, defaultProps, { "aria-label": props.label, name: props.name, value: radioValue, onChange: handleChange }), props.children)));
 };
 
-var useStyles$d = makeStyles(createStyles({
+var useStyles$e = makeStyles(createStyles({
     container: {
         height: '100%',
         overflow: 'hidden',
@@ -34771,7 +34771,7 @@ var Sidebar = function () { return null; };
 var Main = function () { return null; };
 var SidebarLayout = function (_a) {
     var children = _a.children, _b = _a.sidebarWidth, sidebarWidth = _b === void 0 ? 260 : _b, _c = _a.sidebarBgColor, sidebarBgColor = _c === void 0 ? '#f3f3f3' : _c; __rest(_a, ["children", "sidebarWidth", "sidebarBgColor"]);
-    var classes = useStyles$d();
+    var classes = useStyles$e();
     var sidebar = children.find(function (el) { return el.type === Sidebar; });
     var main = children.find(function (el) { return el.type === Main; });
     return (React__default["default"].createElement(Box$2, { display: "flex", className: classes.container },
@@ -34782,18 +34782,24 @@ SidebarLayout.Sidebar = Sidebar;
 SidebarLayout.Main = Main;
 
 // Generated with util/create-component.js
-var useStyles$c = makeStyles({
+var useStyles$d = makeStyles({
     root: {},
 });
 var Toolbar = function (props) {
-    var classes = useStyles$c();
+    var classes = useStyles$d();
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement(Toolbar$2, null, props.children)));
 };
 
+var useStyles$c = makeStyles({
+    tooltip: {
+        maxWidth: function (props) { return props.isFullWidth ? '98vw' : '320px'; }
+    }
+});
 var Tooltip = React__default["default"].forwardRef(function (props, ref) {
-    var children = props.children, TransitionProps = props.TransitionProps, defaultProps = __rest(props, ["children", "TransitionProps"]);
-    return (React__default["default"].createElement(Tooltip$2, __assign$1({ arrow: true, TransitionProps: __assign$1(__assign$1({}, TransitionProps), { timeout: 0 }), ref: ref }, defaultProps), children));
+    var children = props.children, TransitionProps = props.TransitionProps, _a = props.isFullWidth, isFullWidth = _a === void 0 ? true : _a, defaultProps = __rest(props, ["children", "TransitionProps", "isFullWidth"]);
+    var classes = useStyles$c({ isFullWidth: isFullWidth });
+    return (React__default["default"].createElement(Tooltip$2, __assign$1({ arrow: true, TransitionProps: __assign$1(__assign$1({}, TransitionProps), { timeout: 0 }), ref: ref }, defaultProps, { classes: { tooltip: classes.tooltip } }), children));
 });
 
 function DocTypeAppointment$2(props) {
@@ -35766,6 +35772,16 @@ var Dialog = function (props) {
                 React__default["default"].createElement(DialogActions$1, null, children)))));
 };
 
+function LoaderIcon(props) {
+    return (React__default["default"].createElement(SvgIcon$1, __assign$1({}, props, { viewBox: "0 0 24 30" }),
+        React__default["default"].createElement("circle", { r: "3", transform: "translate(2 15)" },
+            React__default["default"].createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: "0", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" })),
+        React__default["default"].createElement("circle", { r: "3", transform: "translate(12 15)" },
+            React__default["default"].createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: "0.3s", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" })),
+        React__default["default"].createElement("circle", { r: "3", transform: "translate(22 15)" },
+            React__default["default"].createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: ".6", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" }))));
+}
+
 // Use theme.shape.borderRadius to detect if it's Desktop or not
 var useStyles$a = makeStyles(function (theme) {
     return createStyles({
@@ -35799,42 +35815,61 @@ var useStyles$a = makeStyles(function (theme) {
         toolbarContainer: function (props) { return ({
             paddingRight: '16px',
             display: 'grid',
+            width: '100%',
+        }); },
+        toolbarActionWrapper: function () { return ({
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
         }); },
-        toolbarWrap: function (props) { return ({
+        toolbarAction: function (props) { return ({
+            display: 'flex',
+            gap: '4px',
+            alignItems: 'center',
+            position: props.isPlatformWeb ? 'absolute' : 'relative',
+            right: props.isPlatformWeb ? '16px' : 'auto',
+        }); },
+        toolbarWrap: function () { return ({
             width: '100%',
             overflow: 'hidden',
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "flex-end",
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-end',
         }); },
         toolbarContent: {
             marginTop: '10px',
-        }
+        },
     });
 });
 var HeaderToolbar = function (_a) {
     var _b;
-    var title = _a.title, titleVisibility = _a.titleVisibility, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _c = _a.bgPosition, bgPosition = _c === void 0 ? 'center' : _c, bgSize = _a.bgSize, divider = _a.divider, tooltip = _a.tooltip; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider", "tooltip"]);
-    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, right: right, bgPosition: bgPosition, bgSize: bgSize, titleVisibility: titleVisibility, divider: divider });
-    return (React__default["default"].createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper, (_b = {}, _b['with-title'] = titleVisibility, _b)) },
+    var title = _a.title, titleVisibility = _a.titleVisibility, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _c = _a.bgPosition, bgPosition = _c === void 0 ? 'center' : _c, bgSize = _a.bgSize, divider = _a.divider, tooltip = _a.tooltip, hasLoader = _a.hasLoader, loaderTitle = _a.loaderTitle, isPlatformWeb = _a.isPlatformWeb; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider", "tooltip", "hasLoader", "loaderTitle", "isPlatformWeb"]);
+    var classes = useStyles$a({
+        bgColor: bgColor,
+        bgImageURL: bgImageURL,
+        right: right,
+        bgPosition: bgPosition,
+        bgSize: bgSize,
+        titleVisibility: titleVisibility,
+        divider: divider,
+        isPlatformWeb: isPlatformWeb,
+    });
+    return (React__default["default"].createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper, (_b = {},
+            _b['with-title'] = titleVisibility,
+            _b)) },
         React__default["default"].createElement(Box$2, { className: clsx(classes.toolbarWrap) },
-            React__default["default"].createElement(Box$2, { className: clsx(classes.toolbarContainer, "gds-toolbar-title") },
-                title && (tooltip ? (React__default["default"].createElement(Tooltip, { title: title, placement: "bottom-start" },
-                    React__default["default"].createElement(Typography, { gutterBottom: true, variant: "h4", noWrap: true, upperCase: true }, title))) : (React__default["default"].createElement(Typography, { gutterBottom: true, variant: "h4", noWrap: true, upperCase: true }, title))),
+            React__default["default"].createElement(Box$2, { className: clsx(classes.toolbarContainer, 'gds-toolbar-title') },
+                title &&
+                    (tooltip ? (React__default["default"].createElement(Tooltip, { title: title, placement: "bottom-start" },
+                        React__default["default"].createElement(Typography, { gutterBottom: true, variant: "h4", noWrap: true, upperCase: true }, title))) : (React__default["default"].createElement(Box$2, { className: classes.toolbarActionWrapper },
+                        React__default["default"].createElement(Typography, { gutterBottom: true, variant: "h4", noWrap: true, upperCase: true }, title),
+                        hasLoader && (React__default["default"].createElement(Box$2, { className: classes.toolbarAction },
+                            React__default["default"].createElement(LoaderIcon, { color: "inherit" }),
+                            React__default["default"].createElement(Typography, { variant: "body2", noWrap: true }, loaderTitle)))))),
                 React__default["default"].createElement(Box$2, { className: clsx(classes.toolbarContent) }, left)),
-            right && (React__default["default"].createElement(Box$2, { className: clsx("gds-buttons-w-divider", classes.containerDivider) }, right)))));
+            right && (React__default["default"].createElement(Box$2, { className: clsx('gds-buttons-w-divider', classes.containerDivider) }, right)))));
 };
 
-function LoaderIcon(props) {
-    return (React__default["default"].createElement(SvgIcon$1, __assign$1({}, props, { viewBox: "0 0 24 30" }),
-        React__default["default"].createElement("circle", { r: "3", transform: "translate(2 15)" },
-            React__default["default"].createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: "0", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" })),
-        React__default["default"].createElement("circle", { r: "3", transform: "translate(12 15)" },
-            React__default["default"].createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: "0.3s", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" })),
-        React__default["default"].createElement("circle", { r: "3", transform: "translate(22 15)" },
-            React__default["default"].createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: ".6", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" }))));
-}
-
 function SpinnerIcon(props) {
     return (React__default["default"].createElement(SvgIcon$1, __assign$1({}, props, { viewBox: "0 0 120 120" }),
         React__default["default"].createElement("g", { transform: "rotate(-90 43 -17)" },
@@ -48120,7 +48155,7 @@ var themeWeb = createTheme({
                 borderRadius: 4,
                 backgroundColor: pallettes$1.brand.dark.secondary,
                 paddingTop: 5,
-                maxWidth: 'auto',
+                maxWidth: 'none',
                 minHeight: 26,
                 opacity: '0.9 !important',
             },
@@ -49370,7 +49405,7 @@ var themeDesktop = createTheme({
                 backgroundColor: pallettes.grey[50],
                 padding: 3,
                 minHeight: 22,
-                maxWidth: 'auto',
+                maxWidth: 'none',
                 boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.21)',
             },
             tooltipPlacementTop: {