@galaxy-ds/core 2.0.4 → 2.0.6

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import MuiCssBaseline from '@mui/material/CssBaseline';
-import { createTheme, ThemeProvider as ThemeProvider$1, ListItem as ListItem$1, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, SvgIcon as SvgIcon$1, List as List$1, ListSubheader as ListSubheader$1, ListItemButton, Collapse, AccordionDetails as AccordionDetails$1, Accordion as Accordion$1, AccordionSummary as AccordionSummary$1, AvatarGroup as AvatarGroup$1, IconButton as IconButton$1, Tooltip as Tooltip$2, Typography as Typography$1, AppBar as AppBar$1, Toolbar as Toolbar$1, Box as Box$1, InputLabel as InputLabel$1, styled as styled$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, CircularProgress, Card as Card$1, FormControlLabel, Checkbox as Checkbox$1, useTheme, Dialog as Dialog$1, DialogActions, Drawer as Drawer$1, MenuItem as MenuItem$1, Select as Select$1, Grid as Grid$1, FormGroup as FormGroup$1, Divider as Divider$2, ListItemAvatar as ListItemAvatar$1, Backdrop, Menu as Menu$1, DialogContent, DialogTitle, Pagination as Pagination$1, PaginationItem, LinearProgress, Radio as Radio$1, FormControl, FormLabel, RadioGroup as RadioGroup$1, Switch as Switch$1, Tab as Tab$1, Table as Table$1, TableBody as TableBody$1, TableCell as TableCell$1, TableContainer as TableContainer$1, TableFooter as TableFooter$1, TableHead as TableHead$1, TableRow as TableRow$1, Tabs as Tabs$1, TextField as TextField$2 } from '@mui/material';
+import { createTheme, ThemeProvider as ThemeProvider$1, ListItem as ListItem$1, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, SvgIcon as SvgIcon$1, List as List$1, ListSubheader as ListSubheader$1, ListItemButton, Collapse, AccordionDetails as AccordionDetails$1, Accordion as Accordion$1, AccordionSummary as AccordionSummary$1, AvatarGroup as AvatarGroup$1, IconButton as IconButton$1, Tooltip as Tooltip$2, Typography as Typography$1, AppBar as AppBar$1, Toolbar as Toolbar$1, Box as Box$1, InputLabel as InputLabel$1, styled as styled$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, CircularProgress, Card as Card$1, FormControlLabel, Checkbox as Checkbox$1, useTheme, Dialog as Dialog$1, DialogActions, Drawer as Drawer$1, MenuItem as MenuItem$1, Select as Select$1, Grid as Grid$1, FormGroup as FormGroup$1, Divider as Divider$2, ListItemAvatar as ListItemAvatar$1, Backdrop, Menu as Menu$1, DialogContent, DialogTitle, Pagination as Pagination$1, PaginationItem, LinearProgress, Popover as Popover$1, Radio as Radio$1, FormControl, FormLabel, RadioGroup as RadioGroup$1, Switch as Switch$1, Tab as Tab$1, Table as Table$1, TableBody as TableBody$1, TableCell as TableCell$1, TableContainer as TableContainer$1, TableFooter as TableFooter$1, TableHead as TableHead$1, TableRow as TableRow$1, Tabs as Tabs$1, TextField as TextField$2 } from '@mui/material';
 import { createTheme as createTheme$1, styled } from '@mui/material/styles';
 import React, { useState, useRef, forwardRef, useEffect } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -19,8 +19,9 @@ import FormHelperText from '@mui/material/FormHelperText';
 import Toolbar$2 from '@mui/material/Toolbar';
 import ListItemIcon$2 from '@mui/material/ListItemIcon';
 import ListItemText$2 from '@mui/material/ListItemText';
-import ListItemButton$1 from '@mui/material/ListItemButton';
 import Button$2 from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import ListItemButton$1 from '@mui/material/ListItemButton';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -16516,6 +16517,17 @@ var ProgressBar = function (props) {
     return jsx(LinearProgress, __assign({ variant: "determinate", color: color }, rest));
 };
 
+var Popover = function (props) {
+    props.anchorEl; var setAnchorEl = props.setAnchorEl, rest = __rest(props, ["anchorEl", "setAnchorEl"]);
+    var handleClose = function () {
+        setAnchorEl && setAnchorEl(null);
+    };
+    return (jsx(Popover$1, __assign({ id: "gds-popover", anchorEl: props.anchorEl, onClose: handleClose, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+        } }, rest, { children: props.children })));
+};
+
 var MuiFormControlLabel = styled(FormControlLabel)({
     marginLeft: 0,
 });
@@ -16525,353 +16537,138 @@ var Radio = function (props) {
     return (jsx(MuiFormControlLabel, { value: value, label: label, control: jsx(Radio$1, __assign({ value: value, disableRipple: true, color: "default", icon: jsx(Icon, { name: SvgRadioDefault }), checkedIcon: jsx(Icon, { name: SvgRadioChecked }) }, rest)) }));
 };
 
-var RadioGroup = function (props) {
-    var label = props.label, rest = __rest(props, ["label"]);
-    return (jsxs(FormControl, __assign({ component: "fieldset" }, { children: [label ? jsx(FormLabel, { children: label }) : '', jsx(RadioGroup$1, __assign({ "aria-label": label }, rest, { children: props.children }))] })));
-};
-
-var SelectStyled = styled(Select$1)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        borderRadius: theme.shapes.card,
-        height: 40,
-        select: {
-            padding: '0 16px',
-            height: 40,
-            lineHeight: '40px',
-            display: 'flex',
-            alignItems: 'center',
-            '& .MuiTypography-root': {
-                fontWeight: 'inherit',
-            },
-            '&.MuiInputBase-input, &.MuiOutlinedInput-input': {
-                paddingRight: '44px',
-                paddingTop: 0,
-            },
-            '&.MuiInputBase-input.MuiFilledInput-input': {},
-            '&.MuiInputBase-input': {
-                '&.MuiFilledInput-input': {
-                    '&:focus': {
-                        backgroundColor: 'transparent',
-                    },
-                },
-            },
+styled('div')({
+    height: '80px',
+    display: 'flex',
+    alignItems: 'center',
+    borderLeft: '1px solid transparent',
+    '&:active': {
+        backgroundColor: '#9DC9F4',
+        borderColor: '#9DC9F4',
+    },
+});
+var RibbonButtonStyled$1 = styled(Button$2)({
+    '&.MuiButton-root': {
+        height: '80px',
+        minWidth: 'unset',
+        padding: '0 8px',
+        textTransform: 'capitalize',
+        border: '1px solid transparent',
+        display: 'flex',
+        '&.carat': {
+            borderLeft: '1px solid transparent',
         },
-        '& .MuiFilledInput-input': {
-            paddingTop: '8px',
-            '&:focus': {
-                backgroundColor: 'transparent',
+        '&:hover': {
+            backgroundColor: '#DDE7F3',
+            borderColor: '#CADEF3',
+            '& .carat': {
+                borderColor: '#CADEF3',
             },
         },
-        legend: {
-            display: 'none',
+        '&:active': {
+            backgroundColor: '#C7DEF3',
+            borderColor: '#9DC9F4',
+            '& .carat': {
+                borderColor: '#9DC9F4',
+            },
         },
-    });
+    },
+});
+var RibbonLabelStyled = styled(Typography)({
+    color: '#444444',
+});
+var RibbonContentStyled = styled('div', {
+    shouldForwardProp: function (prop) { return prop !== 'isWrapped'; },
+})(function (_a) {
+    var isWrapped = _a.isWrapped;
+    return (__assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }, (isWrapped && {
+        width: '54px',
+    })));
 });
 
-var Select = function (props) {
-    return jsx(SelectStyled, __assign({ IconComponent: SvgChevronDownLg }, props));
-};
-
-var SidebarWrapper = styled(Box)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var SidebarMain = styled(Box)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  flex: auto;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"], ["\n  flex: auto;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
-var SidebarSide = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"], ["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
-var templateObject_1$3, templateObject_2$1, templateObject_3;
-
-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;
-    var sidebar = children.find(function (el) { return el.type === Sidebar; });
-    var main = children.find(function (el) { return el.type === Main; });
-    return (jsxs(SidebarWrapper, __assign({ display: "flex" }, { children: [jsx(SidebarSide, __assign({ bgcolor: sidebarBgColor, width: sidebarWidth }, { children: sidebar && sidebar.props.children })), jsx(SidebarMain, { children: main && main.props.children })] })));
-};
-SidebarLayout.Sidebar = Sidebar;
-SidebarLayout.Main = Main;
+var RibbonButton = forwardRef(function RibbonMenuListButton(props, ref) {
+    props.isWrapped; props.icon; props.label; var rest = __rest(props, ["isWrapped", "icon", "label"]);
+    return (jsx(RibbonButtonStyled$1, __assign({ ref: ref, variant: "outlined" }, rest, { children: jsxs(RibbonContentStyled, __assign({ isWrapped: props.isWrapped }, { children: [props.icon, jsx(RibbonLabelStyled, __assign({ variant: "body2" }, { children: props.label }))] })) })));
+});
 
-var StepsContainer = styled('div')(function (_a) {
-    var theme = _a.theme;
-    return ({
-        height: 4,
-        width: '100%',
-        borderRadius: theme.shape.borderRadius,
-        backgroundColor: theme.palette.background.default,
+var RibbonButtonGroupStyled = styled(ButtonGroup)({
+    '&.MuiButtonGroup-root': {
+        width: 'max-content',
+        textTransform: 'capitalize',
+        border: '1px solid transparent',
+        padding: '0',
         display: 'flex',
-    });
-});
-var StepBar = styled('div')(function (_a) {
-    var theme = _a.theme;
-    return ({
-        height: 4,
-        width: '100%',
-        '&:first-of-type': {
-            borderRadius: theme.shape.borderRadius,
-            borderBottomRightRadius: 0,
-            borderTopRightRadius: 0,
-        },
-        '&:last-of-type': {
-            borderRadius: theme.shape.borderRadius,
-            borderBottomLeftRadius: 0,
-            borderTopLeftRadius: 0,
+        '&.carat': {
+            border: '1px solid transparent',
         },
-        '&.active': {
-            backgroundColor: theme.palette.text.primary,
-            borderRadius: theme.shape.borderRadius,
-            '&:not(:first-of-type)': {
-                borderBottomLeftRadius: 0,
-                borderTopLeftRadius: 0,
+        '&:hover': {
+            backgroundColor: '#DDE7F3',
+            borderColor: '#CADEF3',
+            '& .carat': {
+                borderLeftColor: '#CADEF3',
             },
         },
-        '&.completed': {
-            backgroundColor: theme.palette.text.secondary,
-        },
-    });
-});
-var LabelsContainer = styled('div')(function () { return ({
-    marginTop: 8,
-    display: 'flex',
-}); });
-var StepLabel = styled(Typography)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.palette.text.disabled,
-        '&.active': {
-            color: theme.palette.text.primary,
-        },
-        '&.completed': {
-            color: theme.palette.text.secondary,
+        '&:active': {
+            borderColor: '#9DC9F4',
+            '& .carat': {
+                backgroundColor: '#C7DEF3',
+                borderLeftColor: '#9DC9F4',
+            },
         },
-    });
-});
-
-var StepNavigation = function (props) {
-    var ref = props.ref, steps = props.steps, activeStep = props.activeStep;
-    return (jsxs(Fragment, { children: [jsx(StepsContainer, __assign({ ref: ref }, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (_a, index) {
-                    var label = _a.label;
-                    return (jsx(StepBar, { className: clsx(activeStep === index ? 'active' : '', activeStep > index ? 'completed' : '') }, label));
-                }) })), jsx(LabelsContainer, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (_a, index) {
-                    var label = _a.label;
-                    return (jsx(StepLabel, __assign({ className: clsx(activeStep === index ? 'active' : '', activeStep > index ? 'completed' : ''), variant: 'subtitle2', width: 100 / steps.length + '%' }, { children: label }), label));
-                }) })] }));
-};
-
-var Switch = function (props) {
-    return jsx(Switch$1, __assign({ color: "default" }, props));
-};
-
-var Tab = function (props) {
-    return jsx(Tab$1, __assign({}, props, { children: props.children }));
-};
-
-var StyledListItemButton = styled(ListItemButton$1)({
-    backgroundColor: 'transparent',
-    textTransform: 'none',
-    padding: '8px 16px',
-    alignItems: 'flex-start',
-    position: 'relative',
-    zIndex: 0,
-    lineHeight: '1.25rem',
-    '&:hover .hide-on-hover': {
-        opacity: 0,
-    },
-    '&:hover .show-on-hover': {
-        opacity: 1,
-    },
-    '&:hover': {
-        backgroundColor: 'transparent',
     },
-    '& > *:nth-child(n+2)': {
-        marginLeft: 8,
+    '& .MuiButtonGroup-grouped': {
+        minWidth: 'unset',
     },
-    '& .MuiListItemAvatar-root': {
-        minWidth: 20,
-        marginRight: 0,
-        marginLeft: 0,
+    '& .MuiButtonGroup-firstButton:hover': {
+        borderRightColor: '#CADEF3',
     },
-    '& .MuiListItemText-root': {
-        marginTop: 0,
-        marginBottom: 0,
-        lineHeight: '1.25rem',
+});
+var RibbonCaratWrapperStyled = styled(Button$2)({
+    '& .MuiButtonGroup-grouped': {
+        minWidth: 'unset',
     },
-    '& .MuiTypography-root': {
-        lineHeight: '1.25rem',
+    '& .MuiSvgIcon-root': {
+        fontSize: '6px',
     },
-    '& .MuiTypography-root.MuiListItemText-secondary': {
-        lineHeight: '1rem',
+    '&.MuiButton-root': {
+        minWidth: 'unset',
+        width: '12px',
+        textTransform: 'capitalize',
+        border: '1px solid transparent',
+        padding: '0',
+        display: 'flex',
+        '&.carat': {
+            borderLeft: '1px solid transparent',
+        },
+        '&:hover': {
+            backgroundColor: '#DDE7F3',
+        },
+        '&:active': {
+            backgroundColor: '#C7DEF3',
+            '& .carat': {
+                borderLeftColor: '#9DC9F4',
+                backgroundColor: '#C7DEF3',
+            },
+        },
     },
 });
-var ShowOnHover = styled('div')({
-    opacity: 0,
-    position: 'absolute',
-    right: 16,
-    zIndex: 99,
-});
-var HideOnHover = styled('div')({
-    opacity: 1,
-    position: 'absolute',
-    right: 16,
-});
-var HoverContentWrapper = styled('div', {
-    shouldForwardProp: function (prop) { return prop !== 'width'; },
-})(function (_a) {
-    var width = _a.width;
-    return ({
-        width: width,
-    });
+var RibbonButtonStyled = styled(RibbonButton)({
+    '&.MuiButton-root': {
+        border: 'none',
+    },
 });
 
-var TabListItem = function (_a) {
-    var children = _a.children, hideOnHover = _a.hideOnHover, showOnHover = _a.showOnHover, props = __rest(_a, ["children", "hideOnHover", "showOnHover"]);
-    /**
-     * As child divs are absolute positioning, the parent container doesn't have a width.
-     * It can lead to sibling list text truncate incorrectly and text overlapping.
-     * The following code uses refs to get the widths of the contents,
-     * and set the bigger one as parent's width.
-     */
-    var contentRef1 = useRef(null);
-    var contentRef2 = useRef(null);
-    var _b = useState(24), width = _b[0], setWidth = _b[1];
-    useEffect(function () {
-        if (!contentRef1.current || !contentRef2.current)
-            return;
-        var width1 = contentRef1.current.clientWidth;
-        var width2 = contentRef2.current.clientWidth;
-        setWidth(width1 > width2 ? width1 : width2);
-    }, [contentRef1, contentRef2]);
-    return (jsx(StyledListItemButton, __assign({ disableGutters: true }, props, { children: jsxs(Fragment, { children: [children, jsxs(HoverContentWrapper, __assign({ width: width }, { children: [jsx(HideOnHover, __assign({ ref: contentRef1, className: "hide-on-hover" }, { children: hideOnHover })), jsx(ShowOnHover, __assign({ ref: contentRef2, className: "show-on-hover" }, { children: showOnHover }))] }))] }) })));
-};
-
-var Table = function (props) {
-    return jsx(Table$1, __assign({}, props));
-};
+function AvatarBusinessIcon(props) {
+    return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 48 48" }, { children: [jsx("path", { d: "M17.407 12.025h-3.472v-1.869c0-.227.158-.406.344-.406h2.777c.193 0 .344.187.344.406v1.869h.007zm17.215 0h-5.81v-1.869c0-.227.159-.406.344-.406h5.115c.193 0 .344.187.344.406v1.869h.007z", fill: "#B8BDC5" }), jsx("path", { d: "M32.622 13.187H15.749a2 2 0 00-2 2V46.75a2 2 0 002 2h16.873a2 2 0 002-2V15.187a2 2 0 00-2-2z", fill: "#fff" }), jsx("path", { d: "M34.622 13.187H13.749v.877h20.873v-.877z", fill: "#9DA4AF" }), jsx("path", { d: "M35.096 13.187h-21.82c-.31 0-.558-.293-.558-.658v-1.382c0-.365.248-.658.557-.658h21.821c.31 0 .557.293.557.658v1.373c0 .366-.247.667-.557.667zM20.02 20.419h-2.73c-.254 0-.46-.244-.46-.545v-3.217c0-.3.206-.545.46-.545h2.73c.254 0 .46.244.46.545v3.225c0 .3-.206.537-.46.537zm5.534 0h-2.73c-.254 0-.46-.244-.46-.545v-3.217c0-.3.206-.545.46-.545h2.73c.254 0 .46.244.46.545v3.225c-.006.3-.206.537-.46.537zm5.527 0h-2.73c-.254 0-.46-.244-.46-.545v-3.217c0-.3.206-.545.46-.545h2.73c.255 0 .46.244.46.545v3.225c0 .3-.206.537-.46.537zM20.02 26.78h-2.73c-.254 0-.46-.244-.46-.544V23.01c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zm5.534 0h-2.73c-.254 0-.46-.244-.46-.544V23.01c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c-.006.3-.206.544-.46.544zm5.527 0h-2.73c-.254 0-.46-.244-.46-.544V23.01c0-.3.206-.544.46-.544h2.73c.255 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zM20.02 33.142h-2.73c-.254 0-.46-.244-.46-.545v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zm5.534 0h-2.73c-.254 0-.46-.244-.46-.545v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c-.006.3-.206.544-.46.544zm5.527 0h-2.73c-.254 0-.46-.244-.46-.545v-3.226c0-.3.206-.544.46-.544h2.73c.255 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zM20.02 39.496h-2.73c-.254 0-.46-.244-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.243.46.544v3.226c0 .3-.206.544-.46.544zm5.534 0h-2.73c-.254 0-.46-.244-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.243.46.544v3.226c-.006.3-.206.544-.46.544zm5.527 0h-2.73c-.254 0-.46-.244-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.255 0 .46.243.46.544v3.226c0 .3-.206.544-.46.544zM20.02 45.857h-2.73c-.254 0-.46-.243-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544z", fill: "#B8BDC5" }), jsx("path", { d: "M25.554 45.857h-2.73c-.254 0-.46-.243-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c-.006.3-.206.544-.46.544z", fill: "#fff" }), jsx("path", { d: "M31.081 45.857h-2.73c-.254 0-.46-.243-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.255 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zm-5.369-5.102h-3.046c-.281 0-.508.268-.508.601v7.394h4.07v-7.386c-.007-.333-.234-.61-.516-.61z", fill: "#B8BDC5" }), jsx("path", { d: "M27.513 47.808h-6.648v.942h6.648v-.942z", fill: "#9DA4AF" })] })));
+}
 
-var TableBody = function (props) {
-    return jsx(TableBody$1, __assign({}, props));
-};
+function AvatarCompanyIcon(props) {
+    return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 48 48" }, { children: [jsx("path", { d: "M39.782 40.45h-5.334V29.075c0-.275.191-.5.425-.5h4.483c.234 0 .425.225.425.5V40.45zM9.125 26.075H7v-6.008c0-.192.135-.35.298-.35h1.53c.162 0 .297.158.297.35v6.008z", fill: "#B8BDC5" }), jsx("path", { d: "M11.073 46.016H7V23.241h3.386c.382 0 .687.367.687.808v21.967z", fill: "#B8BDC5" }), jsx("path", { d: "M14.77 25.208H7v22.775h7.77V25.208zM23.653 9.9l-6.432 4.367c-.212.142-.347.408-.347.7v19.516c0 .45.305.809.687.809h12.863c.383 0 .688-.358.688-.809V14.968c0-.292-.135-.559-.348-.7L24.333 9.9a.597.597 0 00-.68 0z", fill: "#B8BDC5" }), jsx("path", { d: "M23.653 15.008l-8.543 5.8c-.212.142-.347.408-.347.7V48h18.46V21.508c0-.292-.135-.558-.348-.7l-8.528-5.8a.592.592 0 00-.694 0z", fill: "#fff" }), jsx("path", { d: "M25.063 14.35h-2.125v-6c0-.192.134-.35.297-.35h1.53c.163 0 .297.158.297.35v6zM38.18 32.425h-2.124v-6.009c0-.191.134-.35.297-.35h1.53c.163 0 .298.159.298.35v6.009zM18.843 25.5h-.779c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.141.276.325v1.958c-.007.183-.128.325-.277.325zM21.613 25.5h-.78c-.148 0-.268-.142-.268-.325v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.141.276.325v1.958c0 .183-.12.325-.276.325zM24.39 25.5h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.141.276.325v1.958c-.007.183-.128.325-.277.325zM27.159 25.5h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.141.276.325v1.958c0 .183-.12.325-.276.325zM29.936 25.5h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.141.276.325v1.958c-.007.183-.128.325-.276.325zM18.843 30.066h-.779c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM21.613 30.066h-.78c-.148 0-.268-.141-.268-.325v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM24.39 30.066h-.78c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM27.159 30.066h-.78c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM29.936 30.066h-.78c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.276.325zM18.843 34.634h-.779c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.183-.128.325-.277.325zM21.613 34.634h-.78c-.148 0-.268-.142-.268-.325V32.35c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.959c0 .183-.12.325-.276.325zM24.39 34.634h-.78c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.183-.128.325-.277.325zM27.159 34.634h-.78c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.959c0 .183-.12.325-.276.325zM29.936 34.634h-.78c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.959c-.007.183-.128.325-.276.325zM18.843 39.2h-.779c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM21.613 39.2h-.78c-.148 0-.268-.142-.268-.325v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM24.39 39.2h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM27.159 39.2h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM29.936 39.2h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.276.325zM18.843 43.767h-.779c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.175-.128.325-.277.325zM21.613 43.767h-.78c-.148 0-.268-.142-.268-.326v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.959c0 .175-.12.325-.276.325zM24.39 43.767h-.78c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.175-.128.325-.277.325zM27.159 43.767h-.78c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.959c0 .175-.12.325-.276.325zM29.936 43.767h-.78c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.959c-.007.175-.128.325-.276.325zM19.112 48v-1.95c0-.175-.12-.325-.276-.325h-.779c-.149 0-.276.141-.276.325V48h1.331zM21.889 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.268.141-.268.325V48h1.324zM24.659 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.276.141-.276.325V48h1.332zM27.435 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.276.141-.276.325V48h1.332zM30.205 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.276.141-.276.325V48h1.332z", fill: "#B8BDC5" }), jsx("path", { d: "M13.056 29.091H8.714c-.134 0-.248-.125-.248-.292v-.516c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .167-.106.292-.24.292zM13.056 31.8H8.714c-.134 0-.248-.125-.248-.292V31c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .159-.106.284-.24.284zM13.056 34.508H8.714c-.134 0-.248-.125-.248-.291V33.7c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.517c0 .166-.106.291-.24.291zM13.056 37.217H8.714c-.134 0-.248-.125-.248-.292v-.508c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .159-.106.284-.24.284zM13.056 39.925H8.714c-.134 0-.248-.125-.248-.291v-.517c0-.158.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.517c0 .166-.106.291-.24.291zM13.056 42.634H8.714c-.134 0-.248-.125-.248-.292v-.508c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .159-.106.284-.24.284zM13.056 45.341H8.714c-.134 0-.248-.125-.248-.291v-.517c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.517c0 .166-.106.291-.24.291z", fill: "#fff" }), jsx("path", { d: "M41 30.708h-7.77V48H41V30.708z", fill: "#B8BDC5" }), jsx("path", { d: "M35.447 34.267h-.737c-.142 0-.255-.134-.255-.3V33.1c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 34.267h-.737c-.142 0-.255-.134-.255-.3V33.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 34.267h-.737c-.142 0-.255-.134-.255-.3V33.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 36.767h-.737c-.142 0-.255-.134-.255-.3V35.6c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 36.767h-.737c-.142 0-.255-.134-.255-.3V35.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 36.767h-.737c-.142 0-.255-.134-.255-.3V35.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 39.267h-.737c-.142 0-.255-.134-.255-.3V38.1c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 39.267h-.737c-.142 0-.255-.134-.255-.3V38.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 39.267h-.737c-.142 0-.255-.134-.255-.3V38.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 41.767h-.737c-.142 0-.255-.134-.255-.3V40.6c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 41.767h-.737c-.142 0-.255-.134-.255-.3V40.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 41.767h-.737c-.142 0-.255-.134-.255-.3V40.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 44.267h-.737c-.142 0-.255-.134-.255-.3V43.1c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 44.267h-.737c-.142 0-.255-.134-.255-.3V43.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 44.267h-.737c-.142 0-.255-.134-.255-.3V43.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 46.767h-.737c-.142 0-.255-.134-.255-.3V45.6c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 46.767h-.737c-.142 0-.255-.134-.255-.3V45.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 46.767h-.737c-.142 0-.255-.134-.255-.3V45.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3z", fill: "#fff" })] })));
+}
 
-var TableCell = function (props) {
-    var variant = props.variant, width = props.width, sx = props.sx, rest = __rest(props, ["variant", "width", "sx"]);
-    return (jsx(TableCell$1, __assign({ className: "".concat(variant === 'footer' ? 'tc-footer' : '') }, rest, { sx: __assign({ width: width }, sx) })));
-};
-
-var TableCellIconContainer = styled$1('div')(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
-var TableCellIcon = function (props) {
-    var align = props.align, rest = __rest(props, ["align"]);
-    return (jsx(TableCellIconContainer, __assign({ sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: align === 'center'
-                ? 'center'
-                : align === 'right'
-                    ? 'flex-end'
-                    : 'flex-start',
-        } }, rest, { children: props.children })));
-};
-var templateObject_1$2;
-
-var TableContainer = React.forwardRef(function TableContainer(props, ref) {
-    return jsx(TableContainer$1, __assign({ ref: ref }, props));
-});
-
-var TableFooter = function (props) {
-    var children = props.children, rest = __rest(props, ["children"]);
-    return jsx(TableFooter$1, __assign({}, rest, { children: children }));
-};
-
-var TableHead = function (props) {
-    return jsx(TableHead$1, __assign({}, props));
-};
-
-var TableRow = React.forwardRef(function TableRow(props, ref) {
-    return jsx(TableRow$1, __assign({ ref: ref }, props));
-});
-
-var Tabs = function (props) {
-    var isVertical = props.orientation === 'vertical' ? { maxWidth: '16.5rem' } : {};
-    return (jsx(Tabs$1, __assign({ sx: isVertical }, props, { children: props.children })));
-};
-
-var TagWrapper = styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid #C0D7EE;\n  background-color: #EBF2F9;\n  overflow: hidden;\n  border-radius: 2px;\n  height: 24px;\n  margin-right: 3px; \n  align-items: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid #C0D7EE;\n  background-color: #EBF2F9;\n  overflow: hidden;\n  border-radius: 2px;\n  height: 24px;\n  margin-right: 3px; \n  align-items: center;\n"])));
-var TagLabel = styled('div')(function (_a) {
-    var theme = _a.theme;
-    return "\n  padding-left: 5px;\n  padding-right: 5px;\n  align-items: center;\n  color:".concat(theme.palette.text.primary, "; \n");
-});
-var TagStartIcon = styled('div')(function () { return "\n  display: flex;\n  padding: 0 5px;\n  .MuiSvgIcon-root {\n    font-size: 16px;\n  }\n"; });
-var TagEndIcon = styled('div')(function () { return "\n  display: flex;\n  .MuiSvgIcon-root {\n    font-size: 16px;\n  }\n  .MuiIconButton-root {\n    padding-left: 5px;\n    padding-right: 5px;\n  }\n  .MuiButtonBase-root{\n    color: inherit;\n  }\n"; });
-var TagDelete = styled('div')(function () { return "\n  display: flex;\n  border-left: 1px solid #C0D7EE;\n  .MuiButtonBase-root{\n    color: inherit;\n  }\n  '& > *:last-of-type': {\n    .MuiSvgIcon-root {\n      font-size: 24px;\n    }  \n  }\n"; });
-var MuiIconButton = styled(IconButton$1)(function (_a) {
-    var theme = _a.theme;
-    return "\n    height: 24px;\n    width: 24px;\n    border-radius: 0 ".concat(theme.shapes.tag, " ").concat(theme.shapes.tag, " 0;\n");
-});
-var MuiTypography = styled(Typography)(function () { return "\n  line-height: 1;\n"; });
-var templateObject_1$1;
-
-var Tag = function (props) {
-    var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, tooltipDelete = props.tooltipDelete, tooltipDeletePlacement = props.tooltipDeletePlacement, tooltipLabelPlacement = props.tooltipLabelPlacement, tooltipLabel = props.tooltipLabel, disabled = props.disabled; props.platformWeb; var rest = __rest(props, ["tooltip", "tooltipPlacement", "tooltipDelete", "tooltipDeletePlacement", "tooltipLabelPlacement", "tooltipLabel", "disabled", "platformWeb"]);
-    var placement = tooltipPlacement !== undefined ? tooltipPlacement : 'top';
-    var placementLabel = tooltipLabelPlacement !== undefined ? tooltipLabelPlacement : 'top';
-    var placementDelete = tooltipDeletePlacement !== undefined ? tooltipDeletePlacement : 'top';
-    return (jsxs(TagWrapper, { children: [rest.startIcon ? jsx(TagStartIcon, { children: rest.startIcon }) : null, jsx(TagLabel, { children: tooltipLabel ? (jsx(Tooltip$2, __assign({ title: tooltipLabel, placement: placementLabel, TransitionProps: { timeout: 0 } }, { children: jsx(MuiTypography, __assign({ variant: "body2" }, { children: rest.label })) }))) : (jsx(MuiTypography, __assign({ variant: "body2" }, { children: rest.label }))) }), rest.endIcon ? (jsx(TagEndIcon, { children: tooltip ? (jsx(Tooltip$2, __assign({ title: tooltip, placement: placement, TransitionProps: { timeout: 0 } }, { children: jsx(MuiIconButton, __assign({ disabled: disabled, onClick: rest.onClick }, { children: rest.endIcon })) }))) : (jsx(MuiIconButton, __assign({ disabled: disabled, onClick: rest.onClick }, { children: rest.endIcon }))) })) : null, rest.onDelete ? (jsx(TagDelete, { children: tooltipDelete ? (jsx(Tooltip$2, __assign({ title: tooltipDelete, placement: placementDelete, TransitionProps: { timeout: 0 } }, { children: jsx(MuiIconButton, __assign({ onClick: rest.onDelete }, { children: rest.deleteIcon ? rest.deleteIcon : jsx(Icon, { name: SvgCross }) })) }))) : (jsx(MuiIconButton, __assign({ onClick: rest.onDelete }, { children: rest.deleteIcon ? rest.deleteIcon : jsx(Icon, { name: SvgCross }) }))) })) : null] }));
-};
-
-var TextField = function (props) {
-    var defaultProps = __rest(props, []);
-    return (jsx(TextField$2, __assign({ variant: "outlined", color: "secondary" }, defaultProps, { children: props.children })));
-};
-
-var Toolbar = function (props) {
-    return jsx(Toolbar$1, __assign({}, props));
-};
-
-var StyledToolbarButton = styled(Button$2)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({}, (theme.platform.name === 'leap_desktop' && __assign(__assign({ height: 'auto', maxWidth: 70, minWidth: 'unset', margin: '0 15px', border: '1px solid transparent', backgroundColor: 'transparent', flexDirection: 'column', padding: '0 4px', whiteSpace: 'normal' }, theme.typography.body2), { lineHeight: '1rem', '&:hover': {
-            backgroundColor: '#DDE7F3',
-            borderColor: '#CADEF3',
-        }, '.MuiSvgIcon-root': {
-            width: 32,
-            height: 32,
-            marginBottom: 6,
-        }, '.MuiButton-startIcon': {
-            margin: 0,
-        } }))), (theme.platform.name === 'leap_web' && {
-        '.MuiButton-startIcon': {
-            display: 'none',
-        },
-    })));
-});
-
-var ToolbarButton = function (_a) {
-    var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
-    return (jsx(StyledToolbarButton, __assign({ variant: "outlined", startIcon: icon }, props, { children: label })));
-};
-
-var FullHeightGridContainer = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var FullHeightGridItem = styled(Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var templateObject_1, templateObject_2;
-
-var Left = function () { return null; };
-var Right = function () { return null; };
-var TwoColumnLayout = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var left = children.find(function (el) { return el.type === Left; });
-    var right = children.find(function (el) { return el.type === Right; });
-    return (jsxs(FullHeightGridContainer, __assign({ container: true, direction: "row", alignItems: "stretch" }, props, { children: [jsx(FullHeightGridItem, __assign({ item: true, xs: 12, sm: 6, container: true, direction: "column", display: "block" }, { children: left && left.props.children })), jsx(FullHeightGridItem, __assign({ item: true, xs: 12, sm: 6, container: true, direction: "column" }, { children: right && right.props.children }))] })));
-};
-TwoColumnLayout.Left = Left;
-TwoColumnLayout.Right = Right;
-
-function AvatarBusinessIcon(props) {
-    return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 48 48" }, { children: [jsx("path", { d: "M17.407 12.025h-3.472v-1.869c0-.227.158-.406.344-.406h2.777c.193 0 .344.187.344.406v1.869h.007zm17.215 0h-5.81v-1.869c0-.227.159-.406.344-.406h5.115c.193 0 .344.187.344.406v1.869h.007z", fill: "#B8BDC5" }), jsx("path", { d: "M32.622 13.187H15.749a2 2 0 00-2 2V46.75a2 2 0 002 2h16.873a2 2 0 002-2V15.187a2 2 0 00-2-2z", fill: "#fff" }), jsx("path", { d: "M34.622 13.187H13.749v.877h20.873v-.877z", fill: "#9DA4AF" }), jsx("path", { d: "M35.096 13.187h-21.82c-.31 0-.558-.293-.558-.658v-1.382c0-.365.248-.658.557-.658h21.821c.31 0 .557.293.557.658v1.373c0 .366-.247.667-.557.667zM20.02 20.419h-2.73c-.254 0-.46-.244-.46-.545v-3.217c0-.3.206-.545.46-.545h2.73c.254 0 .46.244.46.545v3.225c0 .3-.206.537-.46.537zm5.534 0h-2.73c-.254 0-.46-.244-.46-.545v-3.217c0-.3.206-.545.46-.545h2.73c.254 0 .46.244.46.545v3.225c-.006.3-.206.537-.46.537zm5.527 0h-2.73c-.254 0-.46-.244-.46-.545v-3.217c0-.3.206-.545.46-.545h2.73c.255 0 .46.244.46.545v3.225c0 .3-.206.537-.46.537zM20.02 26.78h-2.73c-.254 0-.46-.244-.46-.544V23.01c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zm5.534 0h-2.73c-.254 0-.46-.244-.46-.544V23.01c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c-.006.3-.206.544-.46.544zm5.527 0h-2.73c-.254 0-.46-.244-.46-.544V23.01c0-.3.206-.544.46-.544h2.73c.255 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zM20.02 33.142h-2.73c-.254 0-.46-.244-.46-.545v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zm5.534 0h-2.73c-.254 0-.46-.244-.46-.545v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c-.006.3-.206.544-.46.544zm5.527 0h-2.73c-.254 0-.46-.244-.46-.545v-3.226c0-.3.206-.544.46-.544h2.73c.255 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zM20.02 39.496h-2.73c-.254 0-.46-.244-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.243.46.544v3.226c0 .3-.206.544-.46.544zm5.534 0h-2.73c-.254 0-.46-.244-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.243.46.544v3.226c-.006.3-.206.544-.46.544zm5.527 0h-2.73c-.254 0-.46-.244-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.255 0 .46.243.46.544v3.226c0 .3-.206.544-.46.544zM20.02 45.857h-2.73c-.254 0-.46-.243-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544z", fill: "#B8BDC5" }), jsx("path", { d: "M25.554 45.857h-2.73c-.254 0-.46-.243-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.254 0 .46.244.46.544v3.226c-.006.3-.206.544-.46.544z", fill: "#fff" }), jsx("path", { d: "M31.081 45.857h-2.73c-.254 0-.46-.243-.46-.544v-3.226c0-.3.206-.544.46-.544h2.73c.255 0 .46.244.46.544v3.226c0 .3-.206.544-.46.544zm-5.369-5.102h-3.046c-.281 0-.508.268-.508.601v7.394h4.07v-7.386c-.007-.333-.234-.61-.516-.61z", fill: "#B8BDC5" }), jsx("path", { d: "M27.513 47.808h-6.648v.942h6.648v-.942z", fill: "#9DA4AF" })] })));
-}
-
-function AvatarCompanyIcon(props) {
-    return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 48 48" }, { children: [jsx("path", { d: "M39.782 40.45h-5.334V29.075c0-.275.191-.5.425-.5h4.483c.234 0 .425.225.425.5V40.45zM9.125 26.075H7v-6.008c0-.192.135-.35.298-.35h1.53c.162 0 .297.158.297.35v6.008z", fill: "#B8BDC5" }), jsx("path", { d: "M11.073 46.016H7V23.241h3.386c.382 0 .687.367.687.808v21.967z", fill: "#B8BDC5" }), jsx("path", { d: "M14.77 25.208H7v22.775h7.77V25.208zM23.653 9.9l-6.432 4.367c-.212.142-.347.408-.347.7v19.516c0 .45.305.809.687.809h12.863c.383 0 .688-.358.688-.809V14.968c0-.292-.135-.559-.348-.7L24.333 9.9a.597.597 0 00-.68 0z", fill: "#B8BDC5" }), jsx("path", { d: "M23.653 15.008l-8.543 5.8c-.212.142-.347.408-.347.7V48h18.46V21.508c0-.292-.135-.558-.348-.7l-8.528-5.8a.592.592 0 00-.694 0z", fill: "#fff" }), jsx("path", { d: "M25.063 14.35h-2.125v-6c0-.192.134-.35.297-.35h1.53c.163 0 .297.158.297.35v6zM38.18 32.425h-2.124v-6.009c0-.191.134-.35.297-.35h1.53c.163 0 .298.159.298.35v6.009zM18.843 25.5h-.779c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.141.276.325v1.958c-.007.183-.128.325-.277.325zM21.613 25.5h-.78c-.148 0-.268-.142-.268-.325v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.141.276.325v1.958c0 .183-.12.325-.276.325zM24.39 25.5h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.141.276.325v1.958c-.007.183-.128.325-.277.325zM27.159 25.5h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.141.276.325v1.958c0 .183-.12.325-.276.325zM29.936 25.5h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.141.276.325v1.958c-.007.183-.128.325-.276.325zM18.843 30.066h-.779c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM21.613 30.066h-.78c-.148 0-.268-.141-.268-.325v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM24.39 30.066h-.78c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM27.159 30.066h-.78c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM29.936 30.066h-.78c-.148 0-.276-.141-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.276.325zM18.843 34.634h-.779c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.183-.128.325-.277.325zM21.613 34.634h-.78c-.148 0-.268-.142-.268-.325V32.35c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.959c0 .183-.12.325-.276.325zM24.39 34.634h-.78c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.183-.128.325-.277.325zM27.159 34.634h-.78c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.959c0 .183-.12.325-.276.325zM29.936 34.634h-.78c-.148 0-.276-.142-.276-.325V32.35c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.959c-.007.183-.128.325-.276.325zM18.843 39.2h-.779c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM21.613 39.2h-.78c-.148 0-.268-.142-.268-.325v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM24.39 39.2h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.277.325zM27.159 39.2h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.958c0 .184-.12.325-.276.325zM29.936 39.2h-.78c-.148 0-.276-.142-.276-.325v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.958c-.007.184-.128.325-.276.325zM18.843 43.767h-.779c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.175-.128.325-.277.325zM21.613 43.767h-.78c-.148 0-.268-.142-.268-.326v-1.958c0-.175.12-.325.269-.325h.779c.149 0 .276.142.276.325v1.959c0 .175-.12.325-.276.325zM24.39 43.767h-.78c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.276-.325h.78c.148 0 .276.142.276.325v1.959c-.007.175-.128.325-.277.325zM27.159 43.767h-.78c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.277-.325h.779c.149 0 .276.142.276.325v1.959c0 .175-.12.325-.276.325zM29.936 43.767h-.78c-.148 0-.276-.142-.276-.326v-1.958c0-.175.12-.325.277-.325h.779c.148 0 .276.142.276.325v1.959c-.007.175-.128.325-.276.325zM19.112 48v-1.95c0-.175-.12-.325-.276-.325h-.779c-.149 0-.276.141-.276.325V48h1.331zM21.889 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.268.141-.268.325V48h1.324zM24.659 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.276.141-.276.325V48h1.332zM27.435 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.276.141-.276.325V48h1.332zM30.205 48v-1.95c0-.175-.12-.325-.276-.325h-.78c-.148 0-.276.141-.276.325V48h1.332z", fill: "#B8BDC5" }), jsx("path", { d: "M13.056 29.091H8.714c-.134 0-.248-.125-.248-.292v-.516c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .167-.106.292-.24.292zM13.056 31.8H8.714c-.134 0-.248-.125-.248-.292V31c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .159-.106.284-.24.284zM13.056 34.508H8.714c-.134 0-.248-.125-.248-.291V33.7c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.517c0 .166-.106.291-.24.291zM13.056 37.217H8.714c-.134 0-.248-.125-.248-.292v-.508c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .159-.106.284-.24.284zM13.056 39.925H8.714c-.134 0-.248-.125-.248-.291v-.517c0-.158.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.517c0 .166-.106.291-.24.291zM13.056 42.634H8.714c-.134 0-.248-.125-.248-.292v-.508c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.516c0 .159-.106.284-.24.284zM13.056 45.341H8.714c-.134 0-.248-.125-.248-.291v-.517c0-.159.107-.292.248-.292h4.335c.135 0 .248.125.248.292v.517c0 .166-.106.291-.24.291z", fill: "#fff" }), jsx("path", { d: "M41 30.708h-7.77V48H41V30.708z", fill: "#B8BDC5" }), jsx("path", { d: "M35.447 34.267h-.737c-.142 0-.255-.134-.255-.3V33.1c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 34.267h-.737c-.142 0-.255-.134-.255-.3V33.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 34.267h-.737c-.142 0-.255-.134-.255-.3V33.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 36.767h-.737c-.142 0-.255-.134-.255-.3V35.6c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 36.767h-.737c-.142 0-.255-.134-.255-.3V35.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 36.767h-.737c-.142 0-.255-.134-.255-.3V35.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 39.267h-.737c-.142 0-.255-.134-.255-.3V38.1c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 39.267h-.737c-.142 0-.255-.134-.255-.3V38.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 39.267h-.737c-.142 0-.255-.134-.255-.3V38.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 41.767h-.737c-.142 0-.255-.134-.255-.3V40.6c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 41.767h-.737c-.142 0-.255-.134-.255-.3V40.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 41.767h-.737c-.142 0-.255-.134-.255-.3V40.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 44.267h-.737c-.142 0-.255-.134-.255-.3V43.1c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 44.267h-.737c-.142 0-.255-.134-.255-.3V43.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 44.267h-.737c-.142 0-.255-.134-.255-.3V43.1c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM35.447 46.767h-.737c-.142 0-.255-.134-.255-.3V45.6c0-.167.113-.3.255-.3h.737c.141 0 .255.133.255.3v.867c0 .166-.114.3-.255.3zM37.487 46.767h-.737c-.142 0-.255-.134-.255-.3V45.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3zM39.527 46.767h-.737c-.142 0-.255-.134-.255-.3V45.6c0-.167.114-.3.255-.3h.737c.142 0 .255.133.255.3v.867c0 .166-.113.3-.255.3z", fill: "#fff" })] })));
-}
-
-function AvatarGovernmentIcon(props) {
-    return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 48 48" }, { children: [jsx("path", { d: "M45.496 48H2.495C2.22 48 2 47.82 2 47.595V32.032C2 30.909 3.109 30 4.484 30h39.032c1.366 0 2.484.907 2.484 2.032v15.57c-.01.218-.23.398-.504.398z", fill: "#fff" }), jsx("path", { d: "M23.13 18.877l-9.517 5.498c-.54.315-.87.885-.87 1.515v11.985h22.515V25.882c0-.622-.33-1.2-.87-1.515l-9.518-5.49a1.756 1.756 0 00-1.74 0z", fill: "#fff" }), jsx("path", { d: "M24.683 28.688h-1.365a.656.656 0 01-.66-.66v-1.365c0-.368.292-.66.66-.66h1.365c.367 0 .66.292.66.66v1.365c0 .367-.293.66-.66.66zM12.758 40.342h-1.373a.656.656 0 01-.66-.66v-1.365c0-.367.293-.66.66-.66h1.365c.368 0 .66.293.66.66v1.365a.65.65 0 01-.652.66zM36.615 40.342H35.25a.656.656 0 01-.66-.66v-1.365c0-.367.292-.66.66-.66h1.365c.367 0 .66.293.66.66v1.365c0 .368-.3.66-.66.66zM28.733 48h-9.465v-7.545a4.732 4.732 0 119.465 0V48z", fill: "#B8BDC5" }), jsx("path", { d: "M24.952 21h-1.905v-8.047a.954.954 0 011.905 0V21z", fill: "#fff" }), jsx("path", { opacity: ".3", d: "M30.533 17.715h-5.58v-4.68h5.58a.97.97 0 01.967.968v2.76a.962.962 0 01-.967.952z", fill: "#fff" })] })));
-}
+function AvatarGovernmentIcon(props) {
+    return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 48 48" }, { children: [jsx("path", { d: "M45.496 48H2.495C2.22 48 2 47.82 2 47.595V32.032C2 30.909 3.109 30 4.484 30h39.032c1.366 0 2.484.907 2.484 2.032v15.57c-.01.218-.23.398-.504.398z", fill: "#fff" }), jsx("path", { d: "M23.13 18.877l-9.517 5.498c-.54.315-.87.885-.87 1.515v11.985h22.515V25.882c0-.622-.33-1.2-.87-1.515l-9.518-5.49a1.756 1.756 0 00-1.74 0z", fill: "#fff" }), jsx("path", { d: "M24.683 28.688h-1.365a.656.656 0 01-.66-.66v-1.365c0-.368.292-.66.66-.66h1.365c.367 0 .66.292.66.66v1.365c0 .367-.293.66-.66.66zM12.758 40.342h-1.373a.656.656 0 01-.66-.66v-1.365c0-.367.293-.66.66-.66h1.365c.368 0 .66.293.66.66v1.365a.65.65 0 01-.652.66zM36.615 40.342H35.25a.656.656 0 01-.66-.66v-1.365c0-.367.292-.66.66-.66h1.365c.367 0 .66.293.66.66v1.365c0 .368-.3.66-.66.66zM28.733 48h-9.465v-7.545a4.732 4.732 0 119.465 0V48z", fill: "#B8BDC5" }), jsx("path", { d: "M24.952 21h-1.905v-8.047a.954.954 0 011.905 0V21z", fill: "#fff" }), jsx("path", { opacity: ".3", d: "M30.533 17.715h-5.58v-4.68h5.58a.97.97 0 01.967.968v2.76a.962.962 0 01-.967.952z", fill: "#fff" })] })));
+}
 
 function AvatarPeopleIcon(props) {
     return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 48 48" }, { children: [jsx("path", { d: "M17.838 21.94v-1.563a3.49 3.49 0 10-6.981 0v1.562a3.05 3.05 0 001.53 2.65c1.213.7 2.707.7 3.92 0a3.05 3.05 0 001.53-2.65z", fill: "#B8BDC5" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.894 32.57a1.677 1.677 0 01-.806 1.713 1.683 1.683 0 01-.842.227c.293 0 .582-.08.835-.227.6-.35.913-1.032.806-1.713a7.643 7.643 0 00-5.456-6.156 11.165 11.165 0 00-3.55 7.287 64.91 64.91 0 004.217.569 61.519 61.519 0 01-5.223-.744A3.516 3.516 0 019 30.07c0-1.294.7-2.506 1.85-3.106a7.642 7.642 0 0111.044 5.606z", fill: "#B8BDC5" }), jsx("path", { d: "M37.144 21.94v-1.563a3.488 3.488 0 00-5.238-3.025 3.488 3.488 0 00-1.743 3.025v1.562a3.05 3.05 0 001.53 2.65c1.213.7 2.707.7 3.92 0a3.05 3.05 0 001.53-2.65z", fill: "#B8BDC5" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.227 33.153zm1.98 1.337a2.024 2.024 0 01-.007 0 63.216 63.216 0 00.006 0zm1.108-.077c2.37-.182 4.65-.48 6.798-.88A3.523 3.523 0 0039 30.071c0-1.294-.7-2.507-1.85-3.1a7.552 7.552 0 00-3.493-.844c-.724 0-1.424.1-2.087.289a11.144 11.144 0 013.543 7.286c-1.853.312-3.791.556-5.798.711z", fill: "#B8BDC5" }), jsx("path", { d: "M28.412 19.677v-1.975a4.433 4.433 0 00-2.206-3.825 4.416 4.416 0 00-4.412 0 4.417 4.417 0 00-2.207 3.825v1.975c0 1.381.738 2.662 1.938 3.35a4.946 4.946 0 004.956 0 3.861 3.861 0 001.931-3.35zM24 24.964c-5.106 0-9.269 3.962-9.619 8.975 3.025.444 6.257.681 9.62.681 3.362 0 6.593-.237 9.618-.675-.35-5.012-4.513-8.981-9.619-8.981z", fill: "#fff" })] })));
@@ -17169,6 +16966,353 @@ function NewEntryRibbonIcons() {
     return (jsxs("svg", __assign({ width: "32", height: "40", viewBox: "0 0 32 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { width: "32", height: "40", transform: "translate(0.5 0.5)" }), jsx("path", { d: "M29 17.5V12.5C29 10.906 27.593 10 26 10H7C5.407 10 4 11.406 4 13V18C4 19.594 5.907 21 7.5 21H17.5", stroke: "#1E365E", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M31 25C31 28.313 28.313 31 25 31C21.686 31 19 28.313 19 25C19 21.686 21.686 19 25 19C28.313 19 31 21.686 31 25V25Z", stroke: "#3FAF2A", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M22 25H28", stroke: "#3FAF2A", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M25 22V28", stroke: "#3FAF2A", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12 10.5V20", stroke: "#1E365E", strokeLinecap: "square", strokeLinejoin: "round" }), jsx("path", { d: "M21 10.5V16.5", stroke: "#1E365E", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 }
 
+var RibbonButtonGroup = forwardRef(function RibbonButtonGroup(props, ref) {
+    var icon = props.icon, label = props.label, isWrapped = props.isWrapped, onToggle = props.onToggle, onClick = props.onClick, rest = __rest(props, ["icon", "label", "isWrapped", "onToggle", "onClick"]);
+    return (jsxs(RibbonButtonGroupStyled, __assign({ variant: "outlined", disableRipple: true, ref: ref }, rest, { children: [jsx(RibbonButtonStyled, { variant: "outlined", icon: icon, label: label, isWrapped: isWrapped, onClick: function (event) {
+                    event.stopPropagation();
+                    onClick && onClick();
+                } }), jsx(RibbonCaratWrapperStyled, __assign({ className: "carat", onClick: function (event) {
+                    event.stopPropagation();
+                    onToggle && onToggle();
+                } }, { children: jsx(CaratIcon, {}) }))] })));
+});
+
+var RadioGroup = function (props) {
+    var label = props.label, rest = __rest(props, ["label"]);
+    return (jsxs(FormControl, __assign({ component: "fieldset" }, { children: [label ? jsx(FormLabel, { children: label }) : '', jsx(RadioGroup$1, __assign({ "aria-label": label }, rest, { children: props.children }))] })));
+};
+
+var SelectStyled = styled(Select$1)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        borderRadius: theme.shapes.card,
+        height: 40,
+        select: {
+            padding: '0 16px',
+            height: 40,
+            lineHeight: '40px',
+            display: 'flex',
+            alignItems: 'center',
+            '& .MuiTypography-root': {
+                fontWeight: 'inherit',
+            },
+            '&.MuiInputBase-input, &.MuiOutlinedInput-input': {
+                paddingRight: '44px',
+                paddingTop: 0,
+            },
+            '&.MuiInputBase-input.MuiFilledInput-input': {},
+            '&.MuiInputBase-input': {
+                '&.MuiFilledInput-input': {
+                    '&:focus': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+            },
+        },
+        '& .MuiFilledInput-input': {
+            paddingTop: '8px',
+            '&:focus': {
+                backgroundColor: 'transparent',
+            },
+        },
+        legend: {
+            display: 'none',
+        },
+    });
+});
+
+var Select = function (props) {
+    return jsx(SelectStyled, __assign({ IconComponent: SvgChevronDownLg }, props));
+};
+
+var SidebarWrapper = styled(Box)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var SidebarMain = styled(Box)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  flex: auto;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"], ["\n  flex: auto;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
+var SidebarSide = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"], ["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
+var templateObject_1$3, templateObject_2$1, templateObject_3;
+
+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;
+    var sidebar = children.find(function (el) { return el.type === Sidebar; });
+    var main = children.find(function (el) { return el.type === Main; });
+    return (jsxs(SidebarWrapper, __assign({ display: "flex" }, { children: [jsx(SidebarSide, __assign({ bgcolor: sidebarBgColor, width: sidebarWidth }, { children: sidebar && sidebar.props.children })), jsx(SidebarMain, { children: main && main.props.children })] })));
+};
+SidebarLayout.Sidebar = Sidebar;
+SidebarLayout.Main = Main;
+
+var StepsContainer = styled('div')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: 4,
+        width: '100%',
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.default,
+        display: 'flex',
+    });
+});
+var StepBar = styled('div')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: 4,
+        width: '100%',
+        '&:first-of-type': {
+            borderRadius: theme.shape.borderRadius,
+            borderBottomRightRadius: 0,
+            borderTopRightRadius: 0,
+        },
+        '&:last-of-type': {
+            borderRadius: theme.shape.borderRadius,
+            borderBottomLeftRadius: 0,
+            borderTopLeftRadius: 0,
+        },
+        '&.active': {
+            backgroundColor: theme.palette.text.primary,
+            borderRadius: theme.shape.borderRadius,
+            '&:not(:first-of-type)': {
+                borderBottomLeftRadius: 0,
+                borderTopLeftRadius: 0,
+            },
+        },
+        '&.completed': {
+            backgroundColor: theme.palette.text.secondary,
+        },
+    });
+});
+var LabelsContainer = styled('div')(function () { return ({
+    marginTop: 8,
+    display: 'flex',
+}); });
+var StepLabel = styled(Typography)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.text.disabled,
+        '&.active': {
+            color: theme.palette.text.primary,
+        },
+        '&.completed': {
+            color: theme.palette.text.secondary,
+        },
+    });
+});
+
+var StepNavigation = function (props) {
+    var ref = props.ref, steps = props.steps, activeStep = props.activeStep;
+    return (jsxs(Fragment, { children: [jsx(StepsContainer, __assign({ ref: ref }, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (_a, index) {
+                    var label = _a.label;
+                    return (jsx(StepBar, { className: clsx(activeStep === index ? 'active' : '', activeStep > index ? 'completed' : '') }, label));
+                }) })), jsx(LabelsContainer, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (_a, index) {
+                    var label = _a.label;
+                    return (jsx(StepLabel, __assign({ className: clsx(activeStep === index ? 'active' : '', activeStep > index ? 'completed' : ''), variant: 'subtitle2', width: 100 / steps.length + '%' }, { children: label }), label));
+                }) })] }));
+};
+
+var Switch = function (props) {
+    return jsx(Switch$1, __assign({ color: "default" }, props));
+};
+
+var Tab = function (props) {
+    return jsx(Tab$1, __assign({}, props, { children: props.children }));
+};
+
+var StyledListItemButton = styled(ListItemButton$1)({
+    backgroundColor: 'transparent',
+    textTransform: 'none',
+    padding: '8px 16px',
+    alignItems: 'flex-start',
+    position: 'relative',
+    zIndex: 0,
+    lineHeight: '1.25rem',
+    '&:hover .hide-on-hover': {
+        opacity: 0,
+    },
+    '&:hover .show-on-hover': {
+        opacity: 1,
+    },
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+    '& > *:nth-child(n+2)': {
+        marginLeft: 8,
+    },
+    '& .MuiListItemAvatar-root': {
+        minWidth: 20,
+        marginRight: 0,
+        marginLeft: 0,
+    },
+    '& .MuiListItemText-root': {
+        marginTop: 0,
+        marginBottom: 0,
+        lineHeight: '1.25rem',
+    },
+    '& .MuiTypography-root': {
+        lineHeight: '1.25rem',
+    },
+    '& .MuiTypography-root.MuiListItemText-secondary': {
+        lineHeight: '1rem',
+    },
+});
+var ShowOnHover = styled('div')({
+    opacity: 0,
+    position: 'absolute',
+    right: 16,
+    zIndex: 99,
+});
+var HideOnHover = styled('div')({
+    opacity: 1,
+    position: 'absolute',
+    right: 16,
+});
+var HoverContentWrapper = styled('div', {
+    shouldForwardProp: function (prop) { return prop !== 'width'; },
+})(function (_a) {
+    var width = _a.width;
+    return ({
+        width: width,
+    });
+});
+
+var TabListItem = function (_a) {
+    var children = _a.children, hideOnHover = _a.hideOnHover, showOnHover = _a.showOnHover, props = __rest(_a, ["children", "hideOnHover", "showOnHover"]);
+    /**
+     * As child divs are absolute positioning, the parent container doesn't have a width.
+     * It can lead to sibling list text truncate incorrectly and text overlapping.
+     * The following code uses refs to get the widths of the contents,
+     * and set the bigger one as parent's width.
+     */
+    var contentRef1 = useRef(null);
+    var contentRef2 = useRef(null);
+    var _b = useState(24), width = _b[0], setWidth = _b[1];
+    useEffect(function () {
+        if (!contentRef1.current || !contentRef2.current)
+            return;
+        var width1 = contentRef1.current.clientWidth;
+        var width2 = contentRef2.current.clientWidth;
+        setWidth(width1 > width2 ? width1 : width2);
+    }, [contentRef1, contentRef2]);
+    return (jsx(StyledListItemButton, __assign({ disableGutters: true }, props, { children: jsxs(Fragment, { children: [children, jsxs(HoverContentWrapper, __assign({ width: width }, { children: [jsx(HideOnHover, __assign({ ref: contentRef1, className: "hide-on-hover" }, { children: hideOnHover })), jsx(ShowOnHover, __assign({ ref: contentRef2, className: "show-on-hover" }, { children: showOnHover }))] }))] }) })));
+};
+
+var Table = function (props) {
+    return jsx(Table$1, __assign({}, props));
+};
+
+var TableBody = function (props) {
+    return jsx(TableBody$1, __assign({}, props));
+};
+
+var TableCell = function (props) {
+    var variant = props.variant, width = props.width, sx = props.sx, rest = __rest(props, ["variant", "width", "sx"]);
+    return (jsx(TableCell$1, __assign({ className: "".concat(variant === 'footer' ? 'tc-footer' : '') }, rest, { sx: __assign({ width: width }, sx) })));
+};
+
+var TableCellIconContainer = styled$1('div')(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
+var TableCellIcon = function (props) {
+    var align = props.align, rest = __rest(props, ["align"]);
+    return (jsx(TableCellIconContainer, __assign({ sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: align === 'center'
+                ? 'center'
+                : align === 'right'
+                    ? 'flex-end'
+                    : 'flex-start',
+        } }, rest, { children: props.children })));
+};
+var templateObject_1$2;
+
+var TableContainer = React.forwardRef(function TableContainer(props, ref) {
+    return jsx(TableContainer$1, __assign({ ref: ref }, props));
+});
+
+var TableFooter = function (props) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    return jsx(TableFooter$1, __assign({}, rest, { children: children }));
+};
+
+var TableHead = function (props) {
+    return jsx(TableHead$1, __assign({}, props));
+};
+
+var TableRow = React.forwardRef(function TableRow(props, ref) {
+    return jsx(TableRow$1, __assign({ ref: ref }, props));
+});
+
+var Tabs = function (props) {
+    var isVertical = props.orientation === 'vertical' ? { maxWidth: '16.5rem' } : {};
+    return (jsx(Tabs$1, __assign({ sx: isVertical }, props, { children: props.children })));
+};
+
+var TagWrapper = styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid #C0D7EE;\n  background-color: #EBF2F9;\n  overflow: hidden;\n  border-radius: 2px;\n  height: 24px;\n  margin-right: 3px; \n  align-items: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid #C0D7EE;\n  background-color: #EBF2F9;\n  overflow: hidden;\n  border-radius: 2px;\n  height: 24px;\n  margin-right: 3px; \n  align-items: center;\n"])));
+var TagLabel = styled('div')(function (_a) {
+    var theme = _a.theme;
+    return "\n  padding-left: 5px;\n  padding-right: 5px;\n  align-items: center;\n  color:".concat(theme.palette.text.primary, "; \n");
+});
+var TagStartIcon = styled('div')(function () { return "\n  display: flex;\n  padding: 0 5px;\n  .MuiSvgIcon-root {\n    font-size: 16px;\n  }\n"; });
+var TagEndIcon = styled('div')(function () { return "\n  display: flex;\n  .MuiSvgIcon-root {\n    font-size: 16px;\n  }\n  .MuiIconButton-root {\n    padding-left: 5px;\n    padding-right: 5px;\n  }\n  .MuiButtonBase-root{\n    color: inherit;\n  }\n"; });
+var TagDelete = styled('div')(function () { return "\n  display: flex;\n  border-left: 1px solid #C0D7EE;\n  .MuiButtonBase-root{\n    color: inherit;\n  }\n  '& > *:last-of-type': {\n    .MuiSvgIcon-root {\n      font-size: 24px;\n    }  \n  }\n"; });
+var MuiIconButton = styled(IconButton$1)(function (_a) {
+    var theme = _a.theme;
+    return "\n    height: 24px;\n    width: 24px;\n    border-radius: 0 ".concat(theme.shapes.tag, " ").concat(theme.shapes.tag, " 0;\n");
+});
+var MuiTypography = styled(Typography)(function () { return "\n  line-height: 1;\n"; });
+var templateObject_1$1;
+
+var Tag = function (props) {
+    var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, tooltipDelete = props.tooltipDelete, tooltipDeletePlacement = props.tooltipDeletePlacement, tooltipLabelPlacement = props.tooltipLabelPlacement, tooltipLabel = props.tooltipLabel, disabled = props.disabled; props.platformWeb; var rest = __rest(props, ["tooltip", "tooltipPlacement", "tooltipDelete", "tooltipDeletePlacement", "tooltipLabelPlacement", "tooltipLabel", "disabled", "platformWeb"]);
+    var placement = tooltipPlacement !== undefined ? tooltipPlacement : 'top';
+    var placementLabel = tooltipLabelPlacement !== undefined ? tooltipLabelPlacement : 'top';
+    var placementDelete = tooltipDeletePlacement !== undefined ? tooltipDeletePlacement : 'top';
+    return (jsxs(TagWrapper, { children: [rest.startIcon ? jsx(TagStartIcon, { children: rest.startIcon }) : null, jsx(TagLabel, { children: tooltipLabel ? (jsx(Tooltip$2, __assign({ title: tooltipLabel, placement: placementLabel, TransitionProps: { timeout: 0 } }, { children: jsx(MuiTypography, __assign({ variant: "body2" }, { children: rest.label })) }))) : (jsx(MuiTypography, __assign({ variant: "body2" }, { children: rest.label }))) }), rest.endIcon ? (jsx(TagEndIcon, { children: tooltip ? (jsx(Tooltip$2, __assign({ title: tooltip, placement: placement, TransitionProps: { timeout: 0 } }, { children: jsx(MuiIconButton, __assign({ disabled: disabled, onClick: rest.onClick }, { children: rest.endIcon })) }))) : (jsx(MuiIconButton, __assign({ disabled: disabled, onClick: rest.onClick }, { children: rest.endIcon }))) })) : null, rest.onDelete ? (jsx(TagDelete, { children: tooltipDelete ? (jsx(Tooltip$2, __assign({ title: tooltipDelete, placement: placementDelete, TransitionProps: { timeout: 0 } }, { children: jsx(MuiIconButton, __assign({ onClick: rest.onDelete }, { children: rest.deleteIcon ? rest.deleteIcon : jsx(Icon, { name: SvgCross }) })) }))) : (jsx(MuiIconButton, __assign({ onClick: rest.onDelete }, { children: rest.deleteIcon ? rest.deleteIcon : jsx(Icon, { name: SvgCross }) }))) })) : null] }));
+};
+
+var TextField = function (props) {
+    var defaultProps = __rest(props, []);
+    return (jsx(TextField$2, __assign({ variant: "outlined", color: "secondary" }, defaultProps, { children: props.children })));
+};
+
+var Toolbar = function (props) {
+    return jsx(Toolbar$1, __assign({}, props));
+};
+
+var StyledToolbarButton = styled(Button$2)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, (theme.platform.name === 'leap_desktop' && __assign(__assign({ height: 'auto', maxWidth: 70, minWidth: 'unset', margin: '0 15px', border: '1px solid transparent', backgroundColor: 'transparent', flexDirection: 'column', padding: '0 4px', whiteSpace: 'normal' }, theme.typography.body2), { lineHeight: '1rem', '&:hover': {
+            backgroundColor: '#DDE7F3',
+            borderColor: '#CADEF3',
+        }, '.MuiSvgIcon-root': {
+            width: 32,
+            height: 32,
+            marginBottom: 6,
+        }, '.MuiButton-startIcon': {
+            margin: 0,
+        } }))), (theme.platform.name === 'leap_web' && {
+        '.MuiButton-startIcon': {
+            display: 'none',
+        },
+    })));
+});
+
+var ToolbarButton = function (_a) {
+    var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
+    return (jsx(StyledToolbarButton, __assign({ variant: "outlined", startIcon: icon }, props, { children: label })));
+};
+
+var FullHeightGridContainer = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var FullHeightGridItem = styled(Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var templateObject_1, templateObject_2;
+
+var Left = function () { return null; };
+var Right = function () { return null; };
+var TwoColumnLayout = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var left = children.find(function (el) { return el.type === Left; });
+    var right = children.find(function (el) { return el.type === Right; });
+    return (jsxs(FullHeightGridContainer, __assign({ container: true, direction: "row", alignItems: "stretch" }, props, { children: [jsx(FullHeightGridItem, __assign({ item: true, xs: 12, sm: 6, container: true, direction: "column", display: "block" }, { children: left && left.props.children })), jsx(FullHeightGridItem, __assign({ item: true, xs: 12, sm: 6, container: true, direction: "column" }, { children: right && right.props.children }))] })));
+};
+TwoColumnLayout.Left = Left;
+TwoColumnLayout.Right = Right;
+
 function LawconnectIcon(props) {
     return (jsx("svg", __assign({ fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 141 140" }, props, { children: jsx("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" }) })));
 }
@@ -17184,5 +17328,5 @@ function PoweredByLawconnectLogo(props) {
 // Themes
 var IconsPath = '../Icons/lawconnect/';
 
-export { AccessIcon, Accordion, AccordionDetails, AccordionPanel, AccordionSummary, AccountingIcon, ActivityDefault16Icon, ActivityLog, AppBar, Appointment16Icon, AssignCurvedIcon, AttachmentIcon, AutoTimer24Icon, AutoTimerFilled24Icon, Autocomplete, Avatar, AvatarBusinessIcon, AvatarCompanyIcon, AvatarGovernmentIcon, AvatarGroup, AvatarPeopleIcon, AvatarPersonIcon, AvatarTrustIcon, BlankLetter16Icon, BottomListButton, Box, Breadcrumbs, Browse2Icon, BrowseIcon, Button, ButtonCaretIcon, ButtonFilterIcon, Bylawyers16Icon as BylawyersIcon, CalendarIcon, CalendarRibbonIcon, CaratIcon, Card, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Chip, Clause16Icon, CoinEuroIcon$1 as CoinEuroIcon, CoinIcon, CoinPoundIcon, CostRecoveryExceeded16Icon, Cross16Icon, CrossIcon, CssBaseline, CoinEuroIcon as CurrencyEuroIcon, CurrencyIcon, CurrencyPoundIcon, DatePicker, DateRangePicker, DeleteRibbonIcon, Dialog, Divider, Drawer, DrawerMenu, Dropdown, EmailSentIcon, EmptyState, Fax16Icon, FooterActions, FormBody, FormContainer, FormGroup, FormHeader, Grid, HeaderToolbar, HomeIcon, HyperLink16Icon, Icon, IconButton, IconsPath, Input, InputLabel, InsertLinkIcon, LawconnectIcon, LeapLegsLogo, LeapLogo, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, ListSubheader, Loader, LoaderIcon, ManualEntry24Icon, ManualEntryFilled24Icon, MatterFolderRibbonIcon, Memo16Icon, Menu, MenuHeader, MenuIcon, MenuItem, Modal, ModalActions, ModalContent, ModalTitle, MoreVerticalIcon, NewAppointmentIcon, NewEntryRibbonIcons as NewEntryRibbonIcon, Pagination, PhoneCall16Icon, PowerIcon, PoweredByLawconnectLogo, PrecedentNotification16Icon, PreviewIcon, ProgressBar, Radio, RadioGroup, ReportingIcon, ResponseIcon, RevokeAccessIcon, ScannedDoc16Icon, SearchIcon, Select, SelectFilterEmptyIcon, SelectFilterFilledIcon, SelectFilterIcon, SharedFolder16Icon, SidebarLayout, Sms16Icon, SpinnerIcon, StepNavigation, SvgCheckboxChecked, SvgCheckboxIndeterminate, SvgCheckboxUncontrolled, SvgFormSearch, SvgNewAppointment, SvgRadioChecked, SvgRadioDefault, Switch, Tab, TabListItem, Table, TableBody, TableCell, TableCellIcon, TableContainer, TableFooter, TableHead, TableRow, Tabs, Tag, TaxInvoice162Icon, TaxInvoice16Icon, TextField, ThemeProvider, TickIcon, TimedEntry16Icon, Timer24Icon, TimerFilled24Icon, Toolbar, ToolbarButton, Tooltip, TrustStatement16Icon, TwoColumnLayout, Typography, UnkwownType16Icon as UnknownType16Icon, UserLinkIcon, UserLockIcon, UsersIcon, Video16Icon, VideoCall16Icon, VoiceMemo16Icon, Zyphta16Icon, createFilterOptions, theme$3 as themeDesktop, theme$1 as themeWeb };
+export { AccessIcon, Accordion, AccordionDetails, AccordionPanel, AccordionSummary, AccountingIcon, ActivityDefault16Icon, ActivityLog, AppBar, Appointment16Icon, AssignCurvedIcon, AttachmentIcon, AutoTimer24Icon, AutoTimerFilled24Icon, Autocomplete, Avatar, AvatarBusinessIcon, AvatarCompanyIcon, AvatarGovernmentIcon, AvatarGroup, AvatarPeopleIcon, AvatarPersonIcon, AvatarTrustIcon, BlankLetter16Icon, BottomListButton, Box, Breadcrumbs, Browse2Icon, BrowseIcon, Button, ButtonCaretIcon, ButtonFilterIcon, Bylawyers16Icon as BylawyersIcon, CalendarIcon, CalendarRibbonIcon, CaratIcon, Card, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Chip, Clause16Icon, CoinEuroIcon$1 as CoinEuroIcon, CoinIcon, CoinPoundIcon, CostRecoveryExceeded16Icon, Cross16Icon, CrossIcon, CssBaseline, CoinEuroIcon as CurrencyEuroIcon, CurrencyIcon, CurrencyPoundIcon, DatePicker, DateRangePicker, DeleteRibbonIcon, Dialog, Divider, Drawer, DrawerMenu, Dropdown, EmailSentIcon, EmptyState, Fax16Icon, FooterActions, FormBody, FormContainer, FormGroup, FormHeader, Grid, HeaderToolbar, HomeIcon, HyperLink16Icon, Icon, IconButton, IconsPath, Input, InputLabel, InsertLinkIcon, LawconnectIcon, LeapLegsLogo, LeapLogo, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, ListSubheader, Loader, LoaderIcon, ManualEntry24Icon, ManualEntryFilled24Icon, MatterFolderRibbonIcon, Memo16Icon, Menu, MenuHeader, MenuIcon, MenuItem, Modal, ModalActions, ModalContent, ModalTitle, MoreVerticalIcon, NewAppointmentIcon, NewEntryRibbonIcons as NewEntryRibbonIcon, Pagination, PhoneCall16Icon, Popover, PowerIcon, PoweredByLawconnectLogo, PrecedentNotification16Icon, PreviewIcon, ProgressBar, Radio, RadioGroup, ReportingIcon, ResponseIcon, RevokeAccessIcon, RibbonButton, RibbonButtonGroup, ScannedDoc16Icon, SearchIcon, Select, SelectFilterEmptyIcon, SelectFilterFilledIcon, SelectFilterIcon, SharedFolder16Icon, SidebarLayout, Sms16Icon, SpinnerIcon, StepNavigation, SvgCheckboxChecked, SvgCheckboxIndeterminate, SvgCheckboxUncontrolled, SvgFormSearch, SvgNewAppointment, SvgRadioChecked, SvgRadioDefault, Switch, Tab, TabListItem, Table, TableBody, TableCell, TableCellIcon, TableContainer, TableFooter, TableHead, TableRow, Tabs, Tag, TaxInvoice162Icon, TaxInvoice16Icon, TextField, ThemeProvider, TickIcon, TimedEntry16Icon, Timer24Icon, TimerFilled24Icon, Toolbar, ToolbarButton, Tooltip, TrustStatement16Icon, TwoColumnLayout, Typography, UnkwownType16Icon as UnknownType16Icon, UserLinkIcon, UserLockIcon, UsersIcon, Video16Icon, VideoCall16Icon, VoiceMemo16Icon, Zyphta16Icon, createFilterOptions, theme$3 as themeDesktop, theme$1 as themeWeb };
 //# sourceMappingURL=index.esm.js.map