@galaxy-ds/core 1.1.46 → 1.1.50

package/dist/index.esm.js

@@ -30895,7 +30895,7 @@ function ChevronDownIcon(props) {
         React__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]
@@ -30903,7 +30903,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.createElement(MuiAccordionSummary, __assign$1({ className: classes.root }, props, { expandIcon: React__default.createElement(ChevronDownIcon, { fontSize: 'small' }) })));
 };
 
@@ -33147,7 +33147,7 @@ var common = {
     opacity: opacity
 };
 
-var useStyles$x = makeStyles({
+var useStyles$y = makeStyles({
     root: {
         "&.gds-text-primary": {
             color: common.brand.primary.main,
@@ -33180,7 +33180,7 @@ var useStyles$x = makeStyles({
 });
 var Typography = React__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':
@@ -33213,7 +33213,7 @@ var Typography = React__default.forwardRef(function (props, ref) {
     return (React__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,
@@ -33231,7 +33231,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':
@@ -33246,7 +33246,7 @@ var Divider = function (props) {
     return (React__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: {
             '& > *': {
@@ -33333,7 +33333,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 = useState(placeholder), inputPlaceholder = _c[0], setInputPlaceholder = _c[1];
     var root = useRef(null);
     var onKeyDownHandler = function (event) {
@@ -33366,7 +33366,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,
@@ -33397,7 +33397,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) {
@@ -33632,7 +33632,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',
@@ -33705,7 +33705,7 @@ var useStyles$t = makeStyles(createStyles({
 }));
 var DrawerMenu = React__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':
@@ -33822,7 +33822,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': {
@@ -33887,7 +33887,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) {
@@ -33936,7 +33936,7 @@ var Box = function (props) {
     return (React__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": {}
@@ -33944,7 +33944,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.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.createElement(CircularProgress$1, { size: 16, color: "inherit" })));
 };
@@ -33962,7 +33962,7 @@ function CrossIcon(props) {
         React__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,
@@ -33974,7 +33974,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) {
@@ -34002,7 +34002,7 @@ var Chip = function (props) {
     return (React__default.createElement(MuiChip, __assign$1({}, defaultProps, { size: "small", onDelete: defaultProps.onDelete, deleteIcon: React__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'
@@ -34010,7 +34010,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.createElement(MuiCard, { elevation: 0, className: clsx(classes.root, 'gds-card', active ? 'gds-card--active' : '') }, children));
 };
@@ -34036,7 +34036,7 @@ var Input = function (_a) {
         helperText && React__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 : ''; }
     },
@@ -34047,7 +34047,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' : '';
     };
@@ -34091,7 +34091,7 @@ var EmptyState = function (_a) {
             React__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%'
@@ -34107,11 +34107,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.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",
@@ -34123,11 +34123,11 @@ var useStyles$m = makeStyles({
     },
 });
 var FormContainer = function (props) {
-    var classes = useStyles$m(props);
+    var classes = useStyles$n(props);
     return (React__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',
@@ -34148,7 +34148,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.createElement("div", { className: clsx(classes.root, "form-body") }, children));
 };
 
@@ -34176,7 +34176,7 @@ function LawconnectIcon(props) {
         React__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",
@@ -34241,7 +34241,7 @@ var useStyles$k = makeStyles({
     },
 });
 var FormHeader = React__default.forwardRef(function (props, ref) {
-    var classes = useStyles$k();
+    var classes = useStyles$l();
     return (React__default.createElement(Box$2, { className: clsx(classes.root, 'gds-header', props.fixed ? 'gds-header-fixed' : '') },
         React__default.createElement("div", { className: clsx(classes.root, 'gds-header_accent') },
             React__default.createElement(LawconnectIcon, { size: "260" })),
@@ -34255,7 +34255,7 @@ var FormHeader = React__default.forwardRef(function (props, ref) {
         React__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': {
@@ -34275,13 +34275,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.createElement("div", { className: classes.root },
         React__default.createElement(ListSubheader$2, __assign$1({}, rest), children),
         React__default.createElement(Divider, null)));
 };
 
-var useStyles$i = makeStyles(function (theme) {
+var useStyles$j = makeStyles(function (theme) {
     return createStyles({
         root: {
             color: common.brand.utility.border,
@@ -34297,7 +34297,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.createElement(MuiMenu, __assign$1({ PopoverClasses: { paper: classes.root } }, props, { elevation: 0 }),
         title ? React__default.createElement(MenuHeader, null, title) : '',
         children));
@@ -34312,7 +34312,7 @@ function TickIcon(props) {
         React__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': {
@@ -34352,7 +34352,7 @@ var useStyles$h = makeStyles(function (theme) {
     });
 });
 var MenuItemSystem = React__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.createElement("div", { className: classes.root },
         React__default.createElement(MuiMenuItem, __assign$1({ className: classes.MenuItem, ref: ref }, rest),
@@ -34380,7 +34380,7 @@ var ListItemAvatar = function (props) {
     return (React__default.createElement(MuiListItemAvatar, __assign$1({}, props)));
 };
 
-var useStyles$g = makeStyles(function () {
+var useStyles$h = makeStyles(function () {
     return createStyles({
         root: {
             position: 'relative',
@@ -34420,7 +34420,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.createElement("div", { className: classes.root },
         React__default.createElement("div", { ref: contentRef1, className: classes.hideOnHover }, hideOnHover),
         React__default.createElement("div", { ref: contentRef2, className: classes.showOnHover }, showOnHover)));
@@ -34435,7 +34435,7 @@ var ListSubheader = function (props) {
     return (React__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': {
@@ -34474,11 +34474,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.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,
@@ -34498,12 +34498,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.createElement("div", { className: classes.root },
         React__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',
@@ -34573,7 +34573,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.createElement(MuiListItem, __assign$1({ className: classes.root, button: true, disableGutters: true }, props),
         React__default.createElement(React__default.Fragment, null,
             children,
@@ -34643,7 +34643,7 @@ var RadioGroup = function (props) {
         React__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',
@@ -34664,7 +34664,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.createElement(Box$2, { display: "flex", className: classes.container },
@@ -34675,11 +34675,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.createElement("div", { className: classes.root },
         React__default.createElement(Toolbar$2, null, props.children)));
 };
@@ -35514,7 +35514,7 @@ function CrossIcon16(props) {
         React__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',
@@ -35631,7 +35631,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) {
@@ -35658,15 +35658,46 @@ var Dialog = function (props) {
                 React__default.createElement(DialogActions$1, null, children)))));
 };
 
+// Use theme.shape.borderRadius to detect if it's Desktop or not
+var useStyles$a = makeStyles(function (theme) {
+    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" : '',
+        }); },
+        titleVis: function (props) { return ({
+            display: props.titleVisibility === undefined
+                ? theme.shape.borderRadius === 0
+                    ? ''
+                    : 'none'
+                : props.titleVisibility
+                    ? ''
+                    : 'none',
+        }); },
+        containerDivider: function (props) { return ({
+            borderLeft: props.divider === undefined
+                ? theme.shape.borderRadius === 0
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none'
+                : props.divider
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none',
+        }); },
+    });
+});
 var HeaderToolbar = function (_a) {
-    var title = _a.title, left = _a.left, right = _a.right; __rest(_a, ["title", "left", "right"]);
-    return (React__default.createElement(Toolbar$2, { className: 'gds-header-toolbar' },
-        React__default.createElement(Box$2, { display: 'flex', justifyContent: 'space-between', style: { width: '100%' } },
-            React__default.createElement(Box$2, { display: 'flex', flexDirection: 'column', justifyContent: 'stretch' },
-                title && React__default.createElement(Box$2, { className: 'gds-header-toolbar-title', mb: 3 },
-                    React__default.createElement(Typography, { variant: 'h1', color: 'primary' }, title)),
+    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; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider"]);
+    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize, titleVisibility: titleVisibility, divider: divider });
+    return (React__default.createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper, (_b = {}, _b['with-title'] = titleVisibility, _b)) },
+        React__default.createElement(Box$2, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", style: { width: '100%' } },
+            React__default.createElement(Box$2, { display: "flex", flexDirection: "column", justifyContent: "stretch" },
+                title && (React__default.createElement(Box$2, { className: clsx("gds-header-toolbar-title", classes.titleVis), mb: 3 },
+                    React__default.createElement(Typography, { variant: "h1", color: "primary" }, title))),
                 left),
-            right && React__default.createElement(Box$2, { className: 'gds-buttons-w-divider', borderLeft: "1px solid " + common.brand.utility.border }, right))));
+            right && (React__default.createElement(Box$2, { className: clsx("gds-buttons-w-divider", classes.containerDivider) }, right)))));
 };
 
 function LoaderIcon(props) {
@@ -35679,6 +35710,28 @@ function LoaderIcon(props) {
             React__default.createElement("animate", { attributeName: "opacity", values: "1;.2; 1", begin: ".6", dur: "1.2s", calcMode: "paced", repeatCount: "indefinite" }))));
 }
 
+function SpinnerIcon(props) {
+    return (React__default.createElement(SvgIcon$1, __assign$1({}, props, { viewBox: "0 0 120 120" }),
+        React__default.createElement("g", { transform: "rotate(-90 43 -17)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__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.createElement("g", { transform: "rotate(-30 124.962 -145.406)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "c", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "b.end" }))),
+        React__default.createElement("g", { transform: "rotate(30 -98.962 205.406)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "d", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "c.end" }))),
+        React__default.createElement("g", { transform: "rotate(90 -17 77)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__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.createElement("g", { transform: "rotate(150 4.962 42.594)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__default.createElement("animateTransform", { id: "f", attributeName: "transform", dur: "0.2s", type: "translate", values: "0 0; 14 0; 0 0", begin: "e.end" }))),
+        React__default.createElement("g", { transform: "rotate(-150 21.038 17.406)" },
+            React__default.createElement("circle", { cx: "0", cy: "0", r: "8" },
+                React__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,
@@ -35689,7 +35742,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) {
@@ -35716,8 +35769,7 @@ var Loader = function (props) {
                 variantProp = "customBackdropLight";
         }
     }
-    return (React__default.createElement(Backdrop$1, __assign$1({}, rest, { className: clsx(variantProp, classes.root), open: props.open }),
-        React__default.createElement(LoaderIcon, { color: "inherit" })));
+    return (React__default.createElement(Backdrop$1, __assign$1({}, rest, { className: clsx(variantProp, classes.root), open: props.open }), spinner ? (React__default.createElement(SpinnerIcon, { color: "inherit" })) : (React__default.createElement(LoaderIcon, { color: "inherit" }))));
 };
 
 var Grid = function (_a) {
@@ -45615,7 +45667,7 @@ styleInject(css_248z$2);
 var css_248z$1 = ".rdrCalendarWrapper{\n  color: #000000;\n  font-size: 12px;\n}\n\n.rdrDateDisplayWrapper{\n  background-color: rgb(239, 242, 247);\n}\n\n.rdrDateDisplay{\n  margin: 0.833em;\n}\n\n.rdrDateDisplayItem{\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);\n  border: 1px solid transparent;\n}\n\n.rdrDateDisplayItem input{\n    cursor: pointer;\n    height: 2.5em;\n    line-height: 2.5em;\n    border: 0px;\n    background: transparent;\n    width: 100%;\n    color: #849095;\n  }\n\n.rdrDateDisplayItemActive{\n  border-color: currentColor;\n}\n\n.rdrDateDisplayItemActive input{\n    color: #7d888d\n  }\n\n.rdrMonthAndYearWrapper {\n  align-items: center;\n  height: 60px;\n  padding-top: 10px;\n}\n\n.rdrMonthAndYearPickers{\n  font-weight: 600;\n}\n\n.rdrMonthAndYearPickers select{\n    -moz-appearance: none;\n         appearance: none;\n    -webkit-appearance: none;\n    border: 0;\n    background: transparent;\n    padding: 10px 30px 10px 10px;\n    border-radius: 4px;\n    outline: 0;\n    color: #3e484f;\n    background: url(\"data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>\") no-repeat;\n    background-position: right 8px center;\n    cursor: pointer;\n    text-align: center\n  }\n\n.rdrMonthAndYearPickers select:hover{\n      background-color: rgba(0,0,0,0.07);\n    }\n\n.rdrMonthPicker, .rdrYearPicker{\n  margin: 0 5px\n}\n\n.rdrNextPrevButton {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 0 0.833em;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  background: #EFF2F7\n}\n\n.rdrNextPrevButton:hover{\n    background: #E1E7F0;\n  }\n\n.rdrNextPrevButton i {\n    display: block;\n    width: 0;\n    height: 0;\n    padding: 0;\n    text-align: center;\n    border-style: solid;\n    margin: auto;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrPprevButton i {\n    border-width: 4px 6px 4px 4px;\n    border-color: transparent rgb(52, 73, 94) transparent transparent;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrNextButton i {\n    margin: 0 0 0 7px;\n    border-width: 4px 4px 4px 6px;\n    border-color: transparent transparent transparent rgb(52, 73, 94);\n    transform: translate(3px, 0px);\n  }\n\n.rdrWeekDays {\n  padding: 0 0.833em;\n}\n\n.rdrMonth{\n  padding: 0 0.833em 1.666em 0.833em;\n}\n\n.rdrMonth .rdrWeekDays {\n    padding: 0;\n  }\n\n.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{\n  display: none;\n}\n\n.rdrWeekDay {\n  font-weight: 400;\n  line-height: 2.667em;\n  color: rgb(132, 144, 149);\n}\n\n.rdrDay {\n  background: transparent;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border: 0;\n  padding: 0;\n  line-height: 3.000em;\n  height: 3.000em;\n  text-align: center;\n  color: #1d2429\n}\n\n.rdrDay:focus {\n    outline: 0;\n  }\n\n.rdrDayNumber {\n  outline: 0;\n  font-weight: 300;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  top: 5px;\n  bottom: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.rdrDayToday .rdrDayNumber span{\n  font-weight: 500\n}\n\n.rdrDayToday .rdrDayNumber span:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    left: 50%;\n    transform: translate(-50%, 0);\n    width: 18px;\n    height: 2px;\n    border-radius: 2px;\n    background: #3d91ff;\n  }\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{\n      background: #fff;\n    }\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{\n          color: rgba(255, 255, 255, 0.85);\n        }\n\n.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{\n  background: currentColor;\n  position: absolute;\n  top: 5px;\n  left: 0;\n  right: 0;\n  bottom: 5px;\n}\n\n.rdrSelected{\n  left: 2px;\n  right: 2px;\n}\n\n.rdrInRange{}\n\n.rdrStartEdge{\n  border-top-left-radius: 1.042em;\n  border-bottom-left-radius: 1.042em;\n  left: 2px;\n}\n\n.rdrEndEdge{\n  border-top-right-radius: 1.042em;\n  border-bottom-right-radius: 1.042em;\n  right: 2px;\n}\n\n.rdrSelected{\n  border-radius: 1.042em;\n}\n\n.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{\n    border-top-left-radius: 1.042em;\n    border-bottom-left-radius: 1.042em;\n    left: 2px;\n  }\n\n.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{\n    border-top-right-radius: 1.042em;\n    border-bottom-right-radius: 1.042em;\n    right: 2px;\n  }\n\n.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{\n    border-top-left-radius: 1.333em;\n    border-bottom-left-radius: 1.333em;\n    border-left-width: 1px;\n    left: 0px;\n  }\n\n.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{\n   border-top-right-radius: 1.333em;\n   border-bottom-right-radius: 1.333em;\n   border-right-width: 1px;\n   right: 0px;\n }\n\n.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{\n  background: rgba(255, 255, 255, 0.09);\n  position: absolute;\n  top: 3px;\n  left: 0px;\n  right: 0px;\n  bottom: 3px;\n  pointer-events: none;\n  border: 0px solid currentColor;\n  z-index: 1;\n}\n\n.rdrDayStartPreview{\n  border-top-width: 1px;\n  border-left-width: 1px;\n  border-bottom-width: 1px;\n  border-top-left-radius: 1.333em;\n  border-bottom-left-radius: 1.333em;\n  left: 0px;\n}\n\n.rdrDayInPreview{\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.rdrDayEndPreview{\n  border-top-width: 1px;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  border-top-right-radius: 1.333em;\n  border-bottom-right-radius: 1.333em;\n  right: 2px;\n  right: 0px;\n}\n\n.rdrDefinedRangesWrapper{\n  font-size: 12px;\n  width: 226px;\n  border-right: solid 1px #eff2f7;\n  background: #fff;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected{\n    color: currentColor;\n    font-weight: 600;\n  }\n\n.rdrStaticRange{\n  border: 0;\n  cursor: pointer;\n  display: block;\n  outline: 0;\n  border-bottom: 1px solid #eff2f7;\n  padding: 0;\n  background: #fff\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{\n      background: #eff2f7;\n    }\n\n.rdrStaticRangeLabel{\n  display: block;\n  outline: 0;\n  line-height: 18px;\n  padding: 10px 20px;\n  text-align: left;\n}\n\n.rdrInputRanges{\n  padding: 10px 0;\n}\n\n.rdrInputRange{\n  align-items: center;\n  padding: 5px 20px;\n}\n\n.rdrInputRangeInput{\n  width: 30px;\n  height: 30px;\n  line-height: 30px;\n  border-radius: 4px;\n  text-align: center;\n  border: solid 1px rgb(222, 231, 235);\n  margin-right: 10px;\n  color: rgb(108, 118, 122)\n}\n\n.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{\n    border-color: rgb(180, 191, 196);\n    outline: 0;\n    color: #333;\n  }\n\n.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{\n  content: '';\n  border: 1px solid currentColor;\n  border-radius: 1.333em;\n  position: absolute;\n  top: -2px;\n  bottom: -2px;\n  left: 0px;\n  right: 0px;\n  background: transparent;\n}\n\n.rdrDayPassive{\n  pointer-events: none;\n}\n\n.rdrDayPassive .rdrDayNumber span{\n    color: #d5dce0;\n  }\n\n.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{\n    display: none;\n  }\n\n.rdrDayDisabled {\n  background-color: rgb(248, 248, 248);\n}\n\n.rdrDayDisabled .rdrDayNumber span{\n    color: #aeb9bf;\n  }\n\n.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{\n    filter: grayscale(100%) opacity(60%);\n  }\n\n.rdrMonthName{\n  text-align: left;\n  font-weight: 600;\n  color: #849095;\n  padding: 0.833em;\n}\n";
 styleInject(css_248z$1);
 
-var css_248z = ".leap-4d-date-picker {\n  --primary: #1e365e;\n  --primary-lighter: #0060aa;\n  --selection-bg-color: #dceef9;\n  --text-default: #444;\n  --text-grey-secondary: #6b6b6b;\n  --text-muted: #aab0b8;\n  --background-grey: #eee;\n  --background-grey-lighter: #f3f3f3;\n  --border-color: #d8d8d8;\n  --input-focus-color: #32abe2;\n}\n\n.leap-4d-date-picker.rdrDateRangePickerWrapper,\n.leap-4d-calendar.rdrCalendarWrapper {\n  box-shadow: 0 0 1px rgba(0, 0, 0, 1);\n}\n\n/* Defined Ranges */\n.rdrDefinedRangesWrapper {\n  width: 120px;\n  border-color: var(--border-color);\n}\n\n.rdrInputRanges {\n  display: none;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected {\n  color: var(--primary) !important;\n  background-color: var(--selection-bg-color);\n}\n\n.rdrStaticRangeLabel {\n  line-height: 1rem;\n  padding: 0.625rem 1.5rem;\n}\n\n/* Calendar */\n.rdrDateDisplayWrapper {\n  background-color: var(--background-grey);\n}\n\n.rdrDateDisplay {\n  margin: 0.5rem 0.75rem;\n}\n\n.rdrDateDisplayItem {\n  border-radius: 2px;\n}\n\n.rdrDateDisplayItem input {\n  height: 1.5rem;\n  line-height: 1.5rem;\n}\n\n.rdrDateDisplayItemActive {\n  border-color: var(--input-focus-color);\n}\n\n.rdrMonthAndYearWrapper {\n  height: 2rem;\n  padding-top: 0;\n  /* background-color: var(--background-grey-lighter); */\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n}\n\n.leap-4d-calendar .rdrMonthAndYearWrapper {\n  border-top: none;\n}\n\n.rdrMonthAndYearPickers select {\n  padding: 8px 24px 8px 8px;\n  font-size: 13px;\n  color: var(--primary);\n  border-radius: 0;\n}\n\n.rdrMonthAndYearPickers select:hover {\n  background-color: var(--selection-bg-color);\n}\n\n.rdrMonthName {\n  padding: 0.5rem 0.5rem 0.25rem;\n  text-align: center;\n  color: var(--text-grey-secondary);\n}\n\n.rdrMonth {\n  padding: 0 1em 0.5em;\n  width: 18.5em;\n}\n\n.rdrMonth:only-child {\n  width: 100%;\n}\n\n.rdrDay {\n  height: 2em;\n  line-height: 2em;\n}\n\n.rdrWeekDay {\n  color: var(--text-muted);\n  font-weight: 600;\n  line-height: 2em;\n}\n\n.rdrSelected,\n.rdrInRange,\n.rdrStartEdge,\n.rdrEndEdge {\n  top: 1px;\n  bottom: 1px;\n}\n\n.rdrDayNumber span {\n  color: var(--text-default);\n}\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {\n  color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span {\n  font-weight: 600;\n}\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {\n  background-color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span:after {\n  background-color: var(--primary);\n  bottom: -1px;\n  width: 15px;\n  height: 1px;\n}\n\n.rdrNextPrevButton {\n  margin: 0 0.75rem;\n  background: none;\n}\n\n.rdrNextPrevButton i {\n  width: 24px;\n  height: 24px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3964 7.14645C12.5917 6.95118 12.9083 6.95118 13.1036 7.14645L17.6036 11.6464C17.7988 11.8417 17.7988 12.1583 17.6036 12.3536L13.1036 16.8536C12.9083 17.0488 12.5917 17.0488 12.3964 16.8536C12.2012 16.6583 12.2012 16.3417 12.3964 16.1464L16.0429 12.5H6.75C6.47386 12.5 6.25 12.2761 6.25 12C6.25 11.7239 6.47386 11.5 6.75 11.5H16.0429L12.3964 7.85355C12.2012 7.65829 12.2012 7.34171 12.3964 7.14645Z' fill='%231E365E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5Z' fill='%231E365E'/%3E%3C/svg%3E%0A\");\n  background-repeat: no-repeat;\n  padding: 0;\n  margin: 0;\n}\n\n.rdrPprevButton i {\n  border: none;\n  transform: rotate(-180deg);\n}\n\n.rdrNextButton i {\n  border: none;\n  transform: none;\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,\n.rdrStaticRange:focus .rdrStaticRangeLabel {\n  background-color: var(--selection-bg-color);\n}\n";
+var css_248z = ".leap-4d-date-picker {\n  --primary: #1e365e;\n  --primary-lighter: #0060aa;\n  --selection-bg-color: #dceef9;\n  --text-default: #444;\n  --text-grey-secondary: #6b6b6b;\n  --text-muted: #aab0b8;\n  --background-grey: #eee;\n  --background-grey-lighter: #f3f3f3;\n  --border-color: #d8d8d8;\n  --input-focus-color: #32abe2;\n}\n\n.leap-4d-date-picker.rdrDateRangePickerWrapper,\n.leap-4d-calendar.rdrCalendarWrapper {\n  box-shadow: 0 0 1px rgba(0, 0, 0, 1);\n}\n\n/* Defined Ranges */\n.rdrDefinedRangesWrapper {\n  width: 120px;\n  border-color: var(--border-color);\n}\n\n.rdrInputRanges {\n  display: none;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected {\n  color: var(--primary) !important;\n  background-color: var(--selection-bg-color);\n}\n\n.rdrStaticRangeLabel {\n  line-height: 1rem;\n  padding: 0.625rem 1.5rem;\n}\n\n/* Calendar */\n.rdrDateDisplayWrapper {\n  background-color: var(--background-grey);\n}\n\n.rdrDateDisplay {\n  margin: 0.5rem 0.75rem;\n}\n\n.rdrDateDisplayItem {\n  border-radius: 2px;\n}\n\n.rdrDateDisplayItem input {\n  height: 1.5rem;\n  line-height: 1.5rem;\n}\n\n.rdrDateDisplayItemActive {\n  border-color: var(--input-focus-color);\n}\n\n.rdrMonthAndYearWrapper {\n  height: 2rem;\n  padding-top: 0;\n  /* background-color: var(--background-grey-lighter); */\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n}\n\n.leap-4d-calendar .rdrMonthAndYearWrapper {\n  border-top: none;\n}\n\n.rdrMonthAndYearPickers select {\n  padding: 8px 24px 8px 8px;\n  font-size: 13px;\n  color: var(--primary);\n  border-radius: 0;\n}\n\n.rdrMonthAndYearPickers select:hover {\n  background-color: var(--selection-bg-color);\n}\n\n.rdrMonthAndYearPickers select option {\n  background-color: white;\n}\n\n.rdrMonthName {\n  padding: 0.5rem 0.5rem 0.25rem;\n  text-align: center;\n  color: var(--text-grey-secondary);\n}\n\n.rdrMonth {\n  padding: 0 1em 0.5em;\n  width: 18.5em;\n}\n\n.rdrMonth:only-child {\n  width: 100%;\n}\n\n.rdrDay {\n  height: 2em;\n  line-height: 2em;\n}\n\n.rdrWeekDay {\n  color: var(--text-muted);\n  font-weight: 600;\n  line-height: 2em;\n}\n\n.rdrSelected,\n.rdrInRange,\n.rdrStartEdge,\n.rdrEndEdge {\n  top: 1px;\n  bottom: 1px;\n}\n\n.rdrDayNumber span {\n  color: var(--text-default);\n}\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {\n  color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span {\n  font-weight: 600;\n}\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {\n  background-color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span:after {\n  background-color: var(--primary);\n  bottom: -1px;\n  width: 15px;\n  height: 1px;\n}\n\n.rdrNextPrevButton {\n  margin: 0 0.75rem;\n  background: none;\n}\n\n.rdrNextPrevButton i {\n  width: 24px;\n  height: 24px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3964 7.14645C12.5917 6.95118 12.9083 6.95118 13.1036 7.14645L17.6036 11.6464C17.7988 11.8417 17.7988 12.1583 17.6036 12.3536L13.1036 16.8536C12.9083 17.0488 12.5917 17.0488 12.3964 16.8536C12.2012 16.6583 12.2012 16.3417 12.3964 16.1464L16.0429 12.5H6.75C6.47386 12.5 6.25 12.2761 6.25 12C6.25 11.7239 6.47386 11.5 6.75 11.5H16.0429L12.3964 7.85355C12.2012 7.65829 12.2012 7.34171 12.3964 7.14645Z' fill='%231E365E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5Z' fill='%231E365E'/%3E%3C/svg%3E%0A\");\n  background-repeat: no-repeat;\n  padding: 0;\n  margin: 0;\n}\n\n.rdrPprevButton i {\n  border: none;\n  transform: rotate(-180deg);\n}\n\n.rdrNextButton i {\n  border: none;\n  transform: none;\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,\n.rdrStaticRange:focus .rdrStaticRangeLabel {\n  background-color: var(--selection-bg-color);\n}\n";
 styleInject(css_248z);
 
 var DateRangePicker = function (_a) {
@@ -46627,6 +46679,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,
@@ -47711,15 +47800,15 @@ var themeWeb = createTheme({
                     minHeight: 50,
                     paddingLeft: 16,
                     paddingRight: 16,
-                    '& .gds-header-toolbar-title': {
-                        display: 'none',
-                    },
                     '& .gds-buttons-w-divider': {
-                        borderLeft: 'none',
+                        paddingLeft: 16,
                     },
                     '& .MuiInputBase-root, & .MuiButtonBase-root': {
                         maxHeight: 32,
                     },
+                    '&.with-title': {
+                        padding: 16,
+                    }
                 },
             },
         },
@@ -47883,13 +47972,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,
                 },