@galaxy-ds/core 1.1.46 → 1.1.47

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$y = makeStyles(function (theme) {
+var useStyles$z = makeStyles(function (theme) {
     return createStyles({
         root: function (props) { return ({
             backgroundColor: props.bgColor || theme.palette.grey[200]
@@ -30930,7 +30930,7 @@ var useStyles$y = makeStyles(function (theme) {
     });
 });
 var AccordionSummary = function (props) {
-    var classes = useStyles$y({ bgColor: props.bgColor });
+    var classes = useStyles$z({ bgColor: props.bgColor });
     return (React__default["default"].createElement(MuiAccordionSummary, __assign$1({ className: classes.root }, props, { expandIcon: React__default["default"].createElement(ChevronDownIcon, { fontSize: 'small' }) })));
 };
 
@@ -33174,7 +33174,7 @@ var common = {
     opacity: opacity
 };
 
-var useStyles$x = makeStyles({
+var useStyles$y = makeStyles({
     root: {
         "&.gds-text-primary": {
             color: common.brand.primary.main,
@@ -33207,7 +33207,7 @@ var useStyles$x = 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$x(props);
+    var classes = useStyles$y(props);
     var colorProp;
     switch (color) {
         case 'primary':
@@ -33240,7 +33240,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$w = makeStyles({
+var useStyles$x = makeStyles({
     root: {
         '&.gds-divider': {
             marginTop: 2,
@@ -33258,7 +33258,7 @@ var useStyles$w = makeStyles({
 });
 var Divider = function (props) {
     var orientation = props.orientation, rest = __rest(props, ["orientation"]);
-    var classes = useStyles$w();
+    var classes = useStyles$x();
     var variantProp;
     switch (orientation) {
         case 'horizontal':
@@ -33273,7 +33273,7 @@ var Divider = function (props) {
     return (React__default["default"].createElement(Divider$2, __assign$1({}, rest, { className: clsx(classes.root, 'gds-divider', variantProp) })));
 };
 
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$w = makeStyles(function (theme) {
     return createStyles({
         inputRoot: {
             '& > *': {
@@ -33360,7 +33360,7 @@ var useStyles$v = makeStyles(function (theme) {
 });
 var Autocomplete = function (_a) {
     var label = _a.label, placeholder = _a.placeholder, _b = _a.platform, platform = _b === void 0 ? 'desktop' : _b, actionLabel = _a.actionLabel, actionClick = _a.actionClick, onChange = _a.onChange, bottomButtonHeight = _a.bottomButtonHeight, rest = __rest(_a, ["label", "placeholder", "platform", "actionLabel", "actionClick", "onChange", "bottomButtonHeight"]);
-    var classes = useStyles$v({ platform: platform, bottomButtonHeight: bottomButtonHeight });
+    var classes = useStyles$w({ platform: platform, bottomButtonHeight: bottomButtonHeight });
     var _c = React.useState(placeholder), inputPlaceholder = _c[0], setInputPlaceholder = _c[1];
     var root = React.useRef(null);
     var onKeyDownHandler = function (event) {
@@ -33393,7 +33393,7 @@ var Autocomplete = function (_a) {
             }, onKeyDown: onKeyDownHandler, ref: root }, rest))));
 };
 
-var useStyles$u = makeStyles(function () {
+var useStyles$v = makeStyles(function () {
     return createStyles({
         sizeSmall: {
             width: 18,
@@ -33424,7 +33424,7 @@ var useStyles$u = 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$u(props);
+    var classes = useStyles$v(props);
     var sizeProp;
     var colorProp;
     switch (rest.size) {
@@ -33659,7 +33659,7 @@ var pallette$1 = {
 };
 var pallettes$1 = __assign$1({ pallette: pallette$1 }, common);
 
-var useStyles$t = makeStyles(createStyles({
+var useStyles$u = makeStyles(createStyles({
     root: {
         "&.gds-drawer-menu-item": {
             borderRadius: '0.5rem',
@@ -33732,7 +33732,7 @@ var useStyles$t = 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$t();
+    var classes = useStyles$u();
     var variantProp;
     switch (variant) {
         case 'light':
@@ -33849,7 +33849,7 @@ var typography$1 = {
 };
 
 // import Tooltip from '../Tooltip/Tooltip';
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$t = makeStyles(function (theme) {
     return createStyles({
         avatarBorder: {
             '& .MuiAvatar-root, & .MuiAvatarGroup-avatar': {
@@ -33914,7 +33914,7 @@ var useStyles$s = makeStyles(function (theme) {
     });
 });
 var AvatarsGroup = function (props) {
-    var classes = useStyles$s(props);
+    var classes = useStyles$t(props);
     props.color; var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, defaultProps = __rest(props, ["color", "tooltip", "tooltipPlacement"]);
     var colorProp;
     switch (props.color) {
@@ -33963,7 +33963,7 @@ var Box = function (props) {
     return (React__default["default"].createElement(Box$2, __assign$1({}, props)));
 };
 
-var useStyles$r = makeStyles(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
     return createStyles({
         root: {
             "&.gds-button--danger": {}
@@ -33971,7 +33971,7 @@ var useStyles$r = makeStyles(function (theme) {
     });
 });
 var Button = function (props) {
-    var classes = useStyles$r(props);
+    var classes = useStyles$s(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" })));
 };
@@ -33989,7 +33989,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$q = makeStyles({
+var useStyles$r = makeStyles({
     root: {
         '&.gds-chip-rounded': {
             borderRadius: 50,
@@ -34001,7 +34001,7 @@ var useStyles$q = makeStyles({
     },
 });
 var Chip = function (props) {
-    var classes = useStyles$q();
+    var classes = useStyles$r();
     var variant = props.variant, transparent = props.transparent, rounded = props.rounded, defaultProps = __rest(props, ["variant", "transparent", "rounded"]);
     var variantProp;
     switch (variant) {
@@ -34029,7 +34029,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$p = makeStyles({
+var useStyles$q = makeStyles({
     root: {
         "&.gds-card": {
             cursor: 'pointer'
@@ -34037,7 +34037,7 @@ var useStyles$p = makeStyles({
     },
 });
 var Card = function (props) {
-    var classes = useStyles$p();
+    var classes = useStyles$q();
     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));
 };
@@ -34063,7 +34063,7 @@ var Input = function (_a) {
         helperText && React__default["default"].createElement(FormHelperText$1, { error: error }, helperText)));
 };
 
-var useStyles$o = makeStyles(function () { return createStyles({
+var useStyles$p = makeStyles(function () { return createStyles({
     root: {
         width: function (props) { return props.width ? props.width : ''; }
     },
@@ -34074,7 +34074,7 @@ var useStyles$o = 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$o({ width: width });
+    var classes = useStyles$p({ width: width });
     var isDefinedWidth = function (definedWidth) {
         return typeof definedWidth !== 'undefined' ? 'MuiInputBase-definedWidth' : '';
     };
@@ -34118,7 +34118,7 @@ var EmptyState = function (_a) {
             React__default["default"].createElement(Typography$2, { color: 'textSecondary', variant: 'body1' }, description))));
 };
 
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$o = makeStyles(function (theme) { return ({
     root: {
         "&.gds-formgroup": {
             width: '100%'
@@ -34134,11 +34134,11 @@ var useStyles$n = 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$n({ spacing: spacing, alignItems: alignItems });
+    var classes = useStyles$o({ spacing: spacing, alignItems: alignItems });
     return (React__default["default"].createElement(MuiFormGroup, __assign$1({ className: clsx(classes.root, 'gds-formgroup', margin ? 'formGroupMargin' : '') }, props), children));
 };
 
-var useStyles$m = makeStyles({
+var useStyles$n = makeStyles({
     root: {
         "&.form-container": {
             display: "grid",
@@ -34150,11 +34150,11 @@ var useStyles$m = makeStyles({
     },
 });
 var FormContainer = function (props) {
-    var classes = useStyles$m(props);
+    var classes = useStyles$n(props);
     return (React__default["default"].createElement("form", { onSubmit: props.onSubmit, className: clsx(classes.root, "form-container") }, props.children));
 };
 
-var useStyles$l = makeStyles({
+var useStyles$m = makeStyles({
     root: {
         "&.form-body": {
             display: 'flex',
@@ -34175,7 +34175,7 @@ var useStyles$l = makeStyles({
 });
 var FormBody = function (props) {
     var children = props.children;
-    var classes = useStyles$l(props);
+    var classes = useStyles$m(props);
     return (React__default["default"].createElement("div", { className: clsx(classes.root, "form-body") }, children));
 };
 
@@ -34203,7 +34203,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$k = makeStyles({
+var useStyles$l = makeStyles({
     root: {
         '&.gds-header': {
             overflow: "hidden",
@@ -34268,7 +34268,7 @@ var useStyles$k = makeStyles({
     },
 });
 var FormHeader = React__default["default"].forwardRef(function (props, ref) {
-    var classes = useStyles$k();
+    var classes = useStyles$l();
     return (React__default["default"].createElement(Box$2, { className: clsx(classes.root, 'gds-header', props.fixed ? 'gds-header-fixed' : '') },
         React__default["default"].createElement("div", { className: clsx(classes.root, 'gds-header_accent') },
             React__default["default"].createElement(LawconnectIcon, { size: "260" })),
@@ -34282,7 +34282,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$j = makeStyles(function (theme) {
+var useStyles$k = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiListSubheader-root': {
@@ -34302,13 +34302,13 @@ var useStyles$j = makeStyles(function (theme) {
 });
 var MenuHeader = function (props) {
     var children = props.children, rest = __rest(props, ["children"]);
-    var classes = useStyles$j();
+    var classes = useStyles$k();
     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$i = makeStyles(function (theme) {
+var useStyles$j = makeStyles(function (theme) {
     return createStyles({
         root: {
             color: common.brand.utility.border,
@@ -34324,7 +34324,7 @@ var useStyles$i = makeStyles(function (theme) {
 });
 var MenuContext = function (_a) {
     var title = _a.title, children = _a.children, props = __rest(_a, ["title", "children"]);
-    var classes = useStyles$i();
+    var classes = useStyles$j();
     return (React__default["default"].createElement(MuiMenu, __assign$1({ PopoverClasses: { paper: classes.root } }, props, { elevation: 0 }),
         title ? React__default["default"].createElement(MenuHeader, null, title) : '',
         children));
@@ -34339,7 +34339,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$h = makeStyles(function (theme) {
+var useStyles$i = makeStyles(function (theme) {
     return createStyles({
         root: {
             '& .MuiDivider-root': {
@@ -34379,7 +34379,7 @@ var useStyles$h = makeStyles(function (theme) {
     });
 });
 var MenuItemSystem = React__default["default"].forwardRef(function (props, ref) {
-    var classes = useStyles$h();
+    var classes = useStyles$i();
     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),
@@ -34407,7 +34407,7 @@ var ListItemAvatar = function (props) {
     return (React__default["default"].createElement(MuiListItemAvatar, __assign$1({}, props)));
 };
 
-var useStyles$g = makeStyles(function () {
+var useStyles$h = makeStyles(function () {
     return createStyles({
         root: {
             position: 'relative',
@@ -34447,7 +34447,7 @@ var ListItemHoverContent = function (_a) {
         var width2 = contentRef2.current.clientWidth;
         setWidth(width1 > width2 ? width1 : width2);
     }, []);
-    var classes = useStyles$g({ width: width });
+    var classes = useStyles$h({ 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)));
@@ -34462,7 +34462,7 @@ var ListSubheader = function (props) {
     return (React__default["default"].createElement(ListSubheader$2, __assign$1({}, rest), children));
 };
 
-var useStyles$f = makeStyles(function (theme) { return createStyles({
+var useStyles$g = makeStyles(function (theme) { return createStyles({
     root: {
         color: common.grey[600],
         '&::after': {
@@ -34501,11 +34501,11 @@ var useStyles$f = makeStyles(function (theme) { return createStyles({
     selected: {}
 }); });
 var Tab = function (props) {
-    var classes = useStyles$f();
+    var classes = useStyles$g();
     return (React__default["default"].createElement(MuiTab, __assign$1({ className: classes.root, component: 'div' }, props)));
 };
 
-var useStyles$e = makeStyles(createStyles({
+var useStyles$f = makeStyles(createStyles({
     root: {
         flexGrow: 1,
         backgroundColor: common.brand.background.tabs,
@@ -34525,12 +34525,12 @@ var useStyles$e = 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$e();
+    var classes = useStyles$f();
     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$d = makeStyles(function (theme) { return createStyles({
+var useStyles$e = makeStyles(function (theme) { return createStyles({
     root: {
         backgroundColor: 'transparent',
         textTransform: 'none',
@@ -34600,7 +34600,7 @@ var TabListItem = function (_a) {
         var width2 = contentRef2.current.clientWidth;
         setWidth(width1 > width2 ? width1 : width2);
     }, []);
-    var classes = useStyles$d({ width: width });
+    var classes = useStyles$e({ 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,
@@ -34670,7 +34670,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$c = makeStyles(createStyles({
+var useStyles$d = makeStyles(createStyles({
     container: {
         height: '100%',
         overflow: 'hidden',
@@ -34691,7 +34691,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$c();
+    var classes = useStyles$d();
     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 },
@@ -34702,11 +34702,11 @@ SidebarLayout.Sidebar = Sidebar;
 SidebarLayout.Main = Main;
 
 // Generated with util/create-component.js
-var useStyles$b = makeStyles({
+var useStyles$c = makeStyles({
     root: {},
 });
 var Toolbar = function (props) {
-    var classes = useStyles$b();
+    var classes = useStyles$c();
     return (React__default["default"].createElement("div", { className: classes.root },
         React__default["default"].createElement(Toolbar$2, null, props.children)));
 };
@@ -35541,7 +35541,7 @@ function CrossIcon16(props) {
         React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.27831 7.98596L3.1391 12.1252L3.84621 12.8323L7.98541 8.69307L12.1391 12.8468L12.8462 12.1396L8.69252 7.98596L12.8462 3.83227L12.1391 3.12517L7.98541 7.27885L3.84621 3.13965L3.1391 3.84675L7.27831 7.98596Z" })));
 }
 
-var useStyles$a = makeStyles({
+var useStyles$b = makeStyles({
     root: {
         '&.gds-modal': {
             display: 'flex',
@@ -35658,7 +35658,7 @@ var useStyles$a = makeStyles({
     }
 });
 var Dialog = function (props) {
-    var classes = useStyles$a();
+    var classes = useStyles$b();
     var platform = props.platform, title = props.title, message = props.message, children = props.children; __rest(props, ["platform", "title", "message", "children"]);
     var variantIcon;
     switch (props.variant) {
@@ -35685,15 +35685,26 @@ var Dialog = function (props) {
                 React__default["default"].createElement(DialogActions$1, null, children)))));
 };
 
+var useStyles$a = makeStyles(function () {
+    return createStyles({
+        bgWrapper: function (props) { return ({
+            background: "url(" + props.bgImageURL + ") no-repeat",
+            backgroundSize: props.bgSize,
+            backgroundPosition: props.bgPosition + " center",
+            backgroundColor: props.bgColor ? props.bgColor + " !important" : '',
+        }); },
+    });
+});
 var HeaderToolbar = function (_a) {
-    var title = _a.title, left = _a.left, right = _a.right; __rest(_a, ["title", "left", "right"]);
-    return (React__default["default"].createElement(Toolbar$2, { className: 'gds-header-toolbar' },
-        React__default["default"].createElement(Box$2, { display: 'flex', justifyContent: 'space-between', style: { width: '100%' } },
-            React__default["default"].createElement(Box$2, { display: 'flex', flexDirection: 'column', justifyContent: 'stretch' },
-                title && React__default["default"].createElement(Box$2, { className: 'gds-header-toolbar-title', mb: 3 },
-                    React__default["default"].createElement(Typography, { variant: 'h1', color: 'primary' }, title)),
+    var title = _a.title, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _b = _a.bgPosition, bgPosition = _b === void 0 ? 'center' : _b, bgSize = _a.bgSize; __rest(_a, ["title", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize"]);
+    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize });
+    return (React__default["default"].createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper) },
+        React__default["default"].createElement(Box$2, { display: "flex", justifyContent: "space-between", style: { width: '100%' } },
+            React__default["default"].createElement(Box$2, { display: "flex", flexDirection: "column", justifyContent: "stretch" },
+                title && (React__default["default"].createElement(Box$2, { className: "gds-header-toolbar-title", mb: 3 },
+                    React__default["default"].createElement(Typography, { variant: "h1", color: "primary" }, title))),
                 left),
-            right && React__default["default"].createElement(Box$2, { className: 'gds-buttons-w-divider', borderLeft: "1px solid " + common.brand.utility.border }, right))));
+            right && (React__default["default"].createElement(Box$2, { className: "gds-buttons-w-divider", borderLeft: "1px solid " + common.brand.utility.border }, right)))));
 };
 
 function LoaderIcon(props) {
@@ -35706,6 +35717,28 @@ function LoaderIcon(props) {
             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)" },
+            React__default["default"].createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default["default"].createElement("animateTransform", { id: "b", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "0;a.end" }))),
+        React__default["default"].createElement("g", { transform: "rotate(-30 124.962 -145.406)" },
+            React__default["default"].createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default["default"].createElement("animateTransform", { id: "c", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "b.end" }))),
+        React__default["default"].createElement("g", { transform: "rotate(30 -98.962 205.406)" },
+            React__default["default"].createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default["default"].createElement("animateTransform", { id: "d", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "c.end" }))),
+        React__default["default"].createElement("g", { transform: "rotate(90 -17 77)" },
+            React__default["default"].createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default["default"].createElement("animateTransform", { id: "e", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "d.end-0.02s" }))),
+        React__default["default"].createElement("g", { transform: "rotate(150 4.962 42.594)" },
+            React__default["default"].createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default["default"].createElement("animateTransform", { id: "f", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "e.end" }))),
+        React__default["default"].createElement("g", { transform: "rotate(-150 21.038 17.406)" },
+            React__default["default"].createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default["default"].createElement("animateTransform", { id: "a", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "f.end" })))));
+}
+
 var useStyles$9 = makeStyles(function (theme) { return ({
     root: {
         zIndex: theme.zIndex.drawer + 1,
@@ -35716,7 +35749,7 @@ var useStyles$9 = makeStyles(function (theme) { return ({
     }
 }); });
 var Loader = function (props) {
-    var background = props.background, transparent = props.transparent, _a = props.position, position = _a === void 0 ? 'fixed' : _a, rest = __rest(props, ["background", "transparent", "position"]);
+    var background = props.background, transparent = props.transparent, spinner = props.spinner, _a = props.position, position = _a === void 0 ? 'fixed' : _a, rest = __rest(props, ["background", "transparent", "spinner", "position"]);
     var classes = useStyles$9({ position: position });
     var variantProp;
     if (transparent) {
@@ -35743,8 +35776,7 @@ var Loader = function (props) {
                 variantProp = "customBackdropLight";
         }
     }
-    return (React__default["default"].createElement(Backdrop$1, __assign$1({}, rest, { className: clsx(variantProp, classes.root), open: props.open }),
-        React__default["default"].createElement(LoaderIcon, { color: "inherit" })));
+    return (React__default["default"].createElement(Backdrop$1, __assign$1({}, rest, { className: clsx(variantProp, classes.root), open: props.open }), spinner ? (React__default["default"].createElement(SpinnerIcon, { color: "inherit" })) : (React__default["default"].createElement(LoaderIcon, { color: "inherit" }))));
 };
 
 var Grid = function (_a) {
@@ -46654,6 +46686,43 @@ var themeWeb = createTheme({
                 borderRight: 0,
             },
         },
+        MuiAccordion: {
+            root: {
+                '&.MuiPaper-root': {
+                    backgroundColor: 'white',
+                },
+                '&:before': {
+                    backgroundColor: "" + pallettes$1.brand.utility.border,
+                },
+                '&$expanded': {
+                    margin: 0,
+                },
+            },
+        },
+        MuiAccordionSummary: {
+            root: {
+                padding: '0 16px',
+                minHeight: 48,
+                '$expanded &': {
+                    minHeight: 48,
+                },
+            },
+            content: {
+                margin: '4px 0',
+                '$expanded &': {
+                    margin: '4px 0',
+                },
+            },
+            expandIcon: {
+                padding: '6px 12px',
+                transition: 'all 0.3s ease-out',
+            },
+        },
+        MuiAccordionDetails: {
+            root: {
+                padding: 0,
+            },
+        },
         MuiAppBar: {
             root: {
                 color: common.brand.neutral.white,
@@ -47910,13 +47979,18 @@ var themeDesktop = createTheme({
                 '&.MuiPaper-root': {
                     backgroundColor: 'white',
                 },
+                '&:before': {
+                    backgroundColor: "" + pallettes.brand.utility.border,
+                },
+                '&$expanded': {
+                    margin: 0,
+                }
             },
         },
         MuiAccordionSummary: {
             root: {
                 padding: '0 10px',
                 minHeight: 32,
-                borderBottom: "1px solid " + common.brand.utility.border,
                 '$expanded &': {
                     minHeight: 32,
                 },