udp-react-enterprise-component-library 25.18.1-beta.1 → 25.18.1-beta.11

package/dist/Shell-DxRVAjoc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shell-DxRVAjoc.js","names":["menus","SiteHeader","NavigationSidebar","FUIAppSwitcher"],"sources":["../src/shell/Shell.jsx"],"sourcesContent":["import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { makeStyles, Drawer, useMediaQuery, useTheme } from '@material-ui/core';\nimport NavigationSidebar from './ui/NavigationSidebar';\nimport SiteHeader from './ui/SiteHeader';\nimport { UtilityBar } from '../UI/utilityDisplay/UtilityBar';\nimport { useTranslation } from 'react-i18next';\nimport FUIAppSwitcher from './ui/appSwitcher/FUIAppSwitcher';\nimport { getMenuItemsRecursively } from '../utilities/menus/menuUtilities';\nimport clsx from 'clsx';\nimport { UtilitySideBar } from '../UI/utilityDisplay/UtilitySideBar';\nimport PropTypes from 'prop-types';\nimport { useUser } from '../utilities/auth/useUser';\nimport { ActionProvider } from '../utilities/provider/ActionProvider';\nimport { PageActionWrapper } from '../actions/PageActionWrapper';\nimport { useInquiryStore } from '../stores/inquiryStore';\nimport {\n  useSetInitialShellVisibility,\n  useShellStore\n} from '../stores/shellStore';\n\nimport { useBuildEnvironment, APP_RIBBON_SPACE } from './ui/useBuildEnvironment';\nimport { ChatBotProvider } from '../utilities/chatBot/ChatBotProvider';\n//import { usePreloadPages } from '../hooks/usePreloadPages';\n\n// load the page container module so its loaded when we need it\nvoid import('../page/PageContainer');\nconst MenuTypeEnums = {\n  Left_Menu: 1,\n  Application_Menu: 2,\n  Builders_Menu: 3,\n  Favorites_Menu: 4\n};\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    '@global': {\n      html: {\n        minHeight: '100%'\n      },\n      'html, body, #root': {\n        display: 'flex',\n        flexDirection: 'column'\n      },\n      'body, #root': {\n        flex: 1\n      }\n    },\n    root: {\n      flex: 1,\n      minHeight: '100vh',\n      display: 'grid',\n      gridTemplateAreas: ['sidebar header', 'sidebar content']\n        .map((line) => `\"${line}\"`)\n        .join(' '),\n      gridTemplateColumns: 'auto 1fr',\n      gridTemplateRows: 'auto 1fr'\n    },\n    header: {\n      gridArea: 'header'\n    },\n    sidebar: {\n      gridArea: 'sidebar'\n    },\n    content: {\n      gridArea: 'content',\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'relative',\n      zIndex: 1,\n      height: ({ appRibbonSpace }) => `calc(100vh - ${56 + appRibbonSpace}px)`,\n      overflowY: 'auto'\n    },\n    paper: {\n      width: '100%',\n      [theme.breakpoints.up('sm')]: {\n        width: (props) => props.drawerWidth || 520\n      }\n    }\n  }),\n  { name: 'Layout' }\n);\n\n/**\n * Core site layout common to all pages\n */\nexport const Shell = (props) => {\n\n  const buildEnv = useBuildEnvironment();\n  const classes = useStyles({\n    ...props,\n    ribbonSpace: buildEnv ? APP_RIBBON_SPACE : 0\n  });\n  const {\n    children,\n    userAvatar,\n    appContent,\n    leftMenu,\n    appSelectorMenus,\n    siteName,\n    className,\n    navRoot,\n    hideToggle,\n    useMockData,\n    mockMenus,\n    user: passedInUser,\n    unityUrl,\n    expander,\n    sidebarTitle,\n    navMenuHoverOn = true,\n    secondExtended,\n    toggleOne,\n    toggleTwo,\n    closePrimary,\n    closeSecondary,\n    panelExpanded,\n    panelExpandedSecondary,\n    setPanelExpanded = false,\n    setPanelExpandedSecondary = false,\n    breadCrumbAltLabelList = [],\n    currentLocation,\n    utilitySidebarResizable,\n    utilitySidebarToggleOverride,\n    onUtilitySidebarToggleExpandClick,\n    hideLayout = false,\n    getAccessToken,\n    switcherData,\n    selectedItem,\n    switcherWidth,\n    languages,\n    utilityBarHasTabsOpen,\n    projectSwitcherColor,\n    getWidget,\n    isValidWidget,\n    appSwitcherHeader,\n    hamburgerMenuAccessRole\n  } = props;\n  const contextUser = useUser();\n  const user = passedInUser ?? contextUser;\n  const { setGetWidget, setIsValidWidget, shellHidden } = useShellStore();\n  const [appSwitcherMobile, setAppSwitcherMobile] = useState(false);\n  const [appSwitcherDesktop, setAppSwitcherDesktop] = useState(false);\n  const { i18n } = useTranslation();\n  const inquiryTitle = useInquiryStore((state) => state.title);\n  useSetInitialShellVisibility();\n\n  //usePreloadPages();\n\n  useEffect(() => {\n    setGetWidget(getWidget);\n    return () => setGetWidget(null);\n  }, [getWidget, setGetWidget]);\n\n  useEffect(() => {\n    setIsValidWidget(isValidWidget);\n    return () => setIsValidWidget(null);\n  }, [isValidWidget, setIsValidWidget]);\n\n  const getMenuItems = useCallback(\n    (menuTypeId, menus) => {\n      if (!menus && !useMockData) {\n        return [];\n      }\n      const menusToFilter = useMockData ? mockMenus : menus;\n\n      const foundMenus = menusToFilter.filter(\n        (menu) => menu.menuTypeId === menuTypeId && menu.active\n      );\n\n      if (foundMenus) {\n        return foundMenus.reduce((menuItemInstanceStructureViews, menu) => {\n          return [\n            ...menuItemInstanceStructureViews,\n            ...menu.menuItemInstanceStructureViews\n          ];\n        }, []);\n      } else {\n        return [];\n      }\n    },\n    [useMockData, mockMenus]\n  );\n\n  const menus = useMemo(() => {\n    const menuItems = getMenuItems(1, leftMenu);\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, leftMenu, getAccessToken]);\n\n  const theme = useTheme();\n  const mobile = useMediaQuery(theme.breakpoints.up('sm'));\n\n  const handleAppSwitcher = (type, bool) => {\n    if (type === 'mobile') {\n      setAppSwitcherMobile(bool);\n    } else {\n      setAppSwitcherDesktop(bool);\n    }\n  };\n\n  const builderMenu = useMemo(() => {\n    const menuItems = getMenuItems(\n      MenuTypeEnums.Builders_Menu,\n      appSelectorMenus\n    );\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, appSelectorMenus, getAccessToken]);\n\n  const favoriteMenu = useMemo(() => {\n    const menuItems = getMenuItems(\n      MenuTypeEnums.Favorites_Menu,\n      appSelectorMenus\n    );\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, appSelectorMenus, getAccessToken]);\n\n  const appMenu = useMemo(() => {\n    const menuItems = getMenuItems(\n      MenuTypeEnums.Application_Menu,\n      appSelectorMenus\n    );\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, appSelectorMenus, getAccessToken]);\n\n  const hideAppMenu = useMemo(\n    () =>\n      !appSelectorMenus ||\n      (hamburgerMenuAccessRole &&\n        !user?.roleNames.includes(hamburgerMenuAccessRole)),\n    [user, appSelectorMenus, hamburgerMenuAccessRole]\n  );\n\n  useEffect(() => {\n    i18n.changeLanguage('en-US');\n  }, [i18n]);\n\n  if (hideLayout) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <ChatBotProvider>\n      <ActionProvider>\n        <div className={classes.root}>\n          {!shellHidden && (\n            <SiteHeader\n              className={classes.header}\n              siteName={siteName}\n              appContent={appContent}\n              userAvatar={userAvatar}\n              breadCrumbRoot={navRoot}\n              setAppSwitcherOpen={(type, bool) => handleAppSwitcher(type, bool)}\n              breadCrumbAltLabelList={breadCrumbAltLabelList}\n              currentLocation={currentLocation}\n              switcherData={switcherData}\n              selectedItem={selectedItem}\n              switcherWidth={switcherWidth}\n              hideAppLaunch={hideAppMenu}\n              languages={languages}\n              backgroundColor={projectSwitcherColor}\n            />\n          )}\n\n          <div style={{ display: 'flex' }} className={classes.sidebar}>\n            {!shellHidden && mobile && (\n              <NavigationSidebar\n                className={classes.sidebar}\n                data={menus}\n                navMenuHoverOn={navMenuHoverOn}\n                user={user}\n                useGlobalState={true}\n              />\n            )}\n            {expander && (\n              <div>\n                <UtilitySideBar\n                  title={inquiryTitle || sidebarTitle}\n                  resizable={utilitySidebarResizable}\n                  utilitySidebarToggleOverride={utilitySidebarToggleOverride}\n                  onUtilitySidebarToggleExpandClick={\n                    onUtilitySidebarToggleExpandClick\n                  }\n                  sidebarHidden={shellHidden}\n                  {...props}\n                />\n              </div>\n            )}\n          </div>\n\n          <div className={classes.content}>\n            <UtilityBar\n              className={clsx(className)}\n              gutters={false}\n              hideToggle={hideToggle}\n              expander={expander}\n              secondExtended={secondExtended}\n              toggleOne={toggleOne}\n              toggleTwo={toggleTwo}\n              closePrimary={closePrimary}\n              closeSecondary={closeSecondary}\n              expanded={panelExpanded}\n              expandedSecondary={panelExpandedSecondary}\n              setExpanded={setPanelExpanded}\n              setExpandedSecondary={setPanelExpandedSecondary}\n            />\n            <PageActionWrapper>{children}</PageActionWrapper>\n          </div>\n          <Drawer\n            variant='temporary'\n            anchor='left'\n            open={appSwitcherDesktop}\n            classes={\n              !mobile ? {} : !appSelectorMenus ? {} : { paper: classes.paper }\n            }\n            onClose={() => handleAppSwitcher('desktop', false)}\n          >\n            {mobile && appSelectorMenus && (\n              <FUIAppSwitcher\n                onClose={() => handleAppSwitcher('desktop', false)}\n                favoriteMenu={favoriteMenu}\n                builderMenu={builderMenu}\n                appMenu={appMenu}\n                unityUrl={unityUrl}\n                user={user}\n                header={appSwitcherHeader}\n              />\n            )}\n            {(!mobile || (mobile && !appSelectorMenus)) && (\n              <NavigationSidebar\n                toggle={false}\n                className={classes.sidebar}\n                data={menus}\n                navMenuHoverOn={navMenuHoverOn}\n                user={user}\n                useGlobalState={true}\n              />\n            )}\n          </Drawer>\n\n          <Drawer\n            variant='temporary'\n            anchor='right'\n            open={appSwitcherMobile}\n            classes={{ paper: classes.paper }}\n            onClose={() => handleAppSwitcher('mobile', false)}\n          >\n            <FUIAppSwitcher\n              onClose={() => handleAppSwitcher('mobile', false)}\n              favoriteMenu={favoriteMenu}\n              builderMenu={builderMenu}\n              appMenu={appMenu}\n              unityUrl={unityUrl}\n              user={user}\n              header={appSwitcherHeader}\n            />\n          </Drawer>\n        </div>\n      </ActionProvider>\n    </ChatBotProvider>\n  );\n};\n\nShell.propTypes = {\n  /**\n   * The newest propTypes have been added but older ones are missing @todo: add missing propTypes for Shell.\n   */\n\n  /**\n   * The array used to map for label and functions to list items.\n   */\n  switcherData: PropTypes.array,\n  /**\n   * The active label displayed.\n   */\n  selectedItem: PropTypes.string,\n  /**\n   *  Provides a method set the selector width. Default is 100.\n   */\n  switcherWidth: PropTypes.number,\n  /**\n   * Children nodes\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node\n  ]).isRequired,\n\n  /**\n   * Name of site\n   */\n  siteName: PropTypes.string,\n\n  /**\n   * Component to render for the user Avatar\n   */\n  userAvatar: PropTypes.element,\n\n  appContent: PropTypes.element,\n\n  leftMenu: PropTypes.array,\n\n  appSelectorMenus: PropTypes.array,\n\n  className: PropTypes.object,\n\n  navRoot: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),\n\n  /**\n   * Should the shell use mock data\n   */\n  useMockData: PropTypes.bool,\n\n  mockMenus: PropTypes.array,\n\n  unityUrl: PropTypes.string,\n\n  expander: PropTypes.bool,\n\n  sidebarTitle: PropTypes.string,\n\n  navMenuHoverOn: PropTypes.bool,\n\n  toggleOne: PropTypes.bool,\n\n  toggleTwo: PropTypes.bool,\n\n  closePrimary: PropTypes.bool,\n\n  closeSecondary: PropTypes.bool,\n\n  panelExpanded: PropTypes.bool,\n\n  panelExpandedSecondary: PropTypes.bool,\n\n  setPanelExpanded: PropTypes.func,\n\n  setPanelExpandedSecondary: PropTypes.func,\n\n  breadCrumbAltLabelList: PropTypes.array,\n\n  currentLocation: PropTypes.object,\n\n  utilitySidebarResizable: PropTypes.bool,\n\n  utilitySidebarToggleOverride: PropTypes.bool,\n\n  onUtilitySidebarToggleExpandClick: PropTypes.func,\n\n  hideLayout: PropTypes.bool,\n\n  languages: PropTypes.arrayOf(PropTypes.object),\n\n  utilityBarHasTabsOpen: PropTypes.bool,\n  /**\n   * Passes the background color on the project switcher (default: theme secondary)\n   */\n  projectSwitcherColor: PropTypes.string,\n  getWidget: PropTypes.func,\n  isValidWidget: PropTypes.func,\n  currentTenant: PropTypes.object,\n  hamburgerMenuAccessRole: PropTypes.string\n};\n"],"mappings":"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"}

package/dist/SideBarTemplate-CzgsdxLb.js

@@ -0,0 +1,128 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as AmbientCard } from "./AmbientCard-DK9abODq.js";
+import { n as GridUnit, r as getRatio, t as GridRow } from "./GridRow-CPfKPnRD.js";
+import React, { Children, useState } from "react";
+import { Box, Fade, makeStyles, useTheme } from "@material-ui/core";
+import { ChevronLeftIcon, ChevronRightIcon } from "@fluentui/react-icons";
+
+//#region src/layout/GridGroup.jsx
+const GridGroup = ({ col1, col2, col3, col4, col5, col6, ratio, highlight }) => {
+	const theme = useTheme();
+	const cnt = Children.toArray(col1).length;
+	const cnt2 = Children.toArray(col2).length;
+	const cnt3 = Children.toArray(col3).length;
+	const cnt4 = Children.toArray(col4).length;
+	const cnt5 = Children.toArray(col5).length;
+	const cnt6 = Children.toArray(col6).length;
+	const number = cnt + cnt2 + cnt3 + cnt4 + cnt5 + cnt6;
+	const width = theme.spacing(154) / number / 8;
+	const ratioArr = getRatio(ratio);
+	const staticDisplay = /* @__PURE__ */ React.createElement(GridRow, { highlight }, number >= 1 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col1), number >= 2 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col2), number >= 3 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col3), number >= 4 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col4), number >= 5 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col5), number >= 6 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col6));
+	return /* @__PURE__ */ React.createElement("div", null, " ", staticDisplay, " ");
+};
+
+//#endregion
+//#region src/layout/HeaderLayout.jsx
+const HeaderLayout = ({ children }) => {
+	return /* @__PURE__ */ React.createElement(AmbientCard, {
+		style: {
+			marginTop: 0,
+			padding: 0
+		},
+		fullWidth: true
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column"
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		style: { padding: "0px" }
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		style: {
+			padding: "0px",
+			width: "100%",
+			gap: "10px"
+		}
+	}, children))));
+};
+
+//#endregion
+//#region src/layout/templates/SideBarTemplate.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		width: "100%",
+		position: "relative"
+	},
+	column: {
+		display: "flex",
+		flexDirection: "row",
+		flex: 1
+	},
+	content: { flex: 1 },
+	sideBar: {
+		height: "100vh",
+		background: theme.palette.primary.light
+	}
+}));
+const SideBarTemplate = ({ children, sidebar }) => {
+	const classes = useStyles();
+	const [open, setOpen] = useState(true);
+	const toggleSidebar = () => {
+		setOpen(!open);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, children), /* @__PURE__ */ React.createElement("div", { style: {
+		position: "absolute",
+		top: 0,
+		right: open ? 300 : 0
+	} }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: open ? ChevronRightIcon : ChevronLeftIcon,
+		onClick: toggleSidebar
+	})), open && /* @__PURE__ */ React.createElement(Fade, {
+		in: open,
+		timeout: {
+			enter: 1e3,
+			exit: 1e3
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.sideBar }, sidebar))));
+};
+
+//#endregion
+export { HeaderLayout as n, GridGroup as r, SideBarTemplate as t };
+//# sourceMappingURL=SideBarTemplate-CzgsdxLb.js.map

package/dist/SideBarTemplate-CzgsdxLb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarTemplate-CzgsdxLb.js","names":[],"sources":["../src/layout/GridGroup.jsx","../src/layout/HeaderLayout.jsx","../src/layout/templates/SideBarTemplate.jsx"],"sourcesContent":["import React, { Children } from 'react';\nimport { useTheme } from '@material-ui/core';\nimport { GridUnit } from './GridUnit';\nimport { GridRow } from './GridRow';\nimport { getRatio } from './getRatio';\n\nexport const GridGroup = ({\n  col1,\n  col2,\n  col3,\n  col4,\n  col5,\n  col6,\n  ratio,\n  highlight\n}) => {\n  const theme = useTheme();\n\n  const cnt = Children.toArray(col1).length;\n  const cnt2 = Children.toArray(col2).length;\n  const cnt3 = Children.toArray(col3).length;\n  const cnt4 = Children.toArray(col4).length;\n  const cnt5 = Children.toArray(col5).length;\n  const cnt6 = Children.toArray(col6).length;\n\n  const number = cnt + cnt2 + cnt3 + cnt4 + cnt5 + cnt6;\n  const width = theme.spacing(154) / number / 8;\n\n  const ratioArr = getRatio(ratio);\n  const staticDisplay = (\n    <GridRow highlight={highlight}>\n      {number >= 1 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col1}\n        </GridUnit>\n      )}\n\n      {number >= 2 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col2}\n        </GridUnit>\n      )}\n      {number >= 3 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col3}\n        </GridUnit>\n      )}\n      {number >= 4 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col4}\n        </GridUnit>\n      )}\n      {number >= 5 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col5}\n        </GridUnit>\n      )}\n      {number >= 6 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col6}\n        </GridUnit>\n      )}\n    </GridRow>\n  );\n\n  return <div> {staticDisplay} </div>;\n};\n","import React from 'react';\nimport { AmbientCard } from '../UI/surfaces/cards/AmbientCard';\nimport { Box } from '@material-ui/core';\n\nexport const HeaderLayout = ({ children }) => {\n  return (\n    <AmbientCard style={{ marginTop: 0, padding: 0 }} fullWidth>\n      <Box display=\"flex\" flexDirection=\"column\">\n        <Box\n          display=\"flex\"\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          style={{\n            padding: '0px',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            style={{\n              padding: '0px',\n              width: '100%',\n              gap: '10px',\n            }}\n          >\n            {children}\n          </Box>\n        </Box>\n      </Box>\n    </AmbientCard>\n  );\n};\n","import React, { useState } from 'react'\nimport { makeStyles, Fade } from '@material-ui/core'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: '100%',\n    position: 'relative'\n  },\n  column: {\n    display: 'flex',\n    flexDirection: 'row',\n    flex: 1\n  },\n  content: {\n    flex: 1\n  },\n  sideBar: {\n    height: '100vh',\n    background: theme.palette.primary.light\n  }\n}))\n\nexport const SideBarTemplate = ({ children, sidebar }) => {\n  const classes = useStyles()\n\n  const [open, setOpen] = useState(true)\n\n  const toggleSidebar = () => {\n    setOpen(!open)\n  }\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.column}>\n        <div className={classes.content}>{children}</div>\n\n        <div style={{ position: 'absolute', top: 0, right: open ? 300 : 0 }}>\n          <FluentIconButton\n            color='primary'\n            icon={open ? ChevronRightIcon : ChevronLeftIcon}\n            onClick={toggleSidebar}\n          />\n        </div>\n\n        {open && (\n          <Fade in={open} timeout={{ enter: 1000, exit: 1000 }}>\n            <div className={classes.sideBar}>{sidebar}</div>\n          </Fade>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/SideSheet-C-rILQqR.js

@@ -0,0 +1,82 @@
+import { t as SideSheetHeader } from "./SideSheetHeader-DgnkLGmv.js";
+import React from "react";
+import { CardContent, Drawer, LinearProgress, makeStyles } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/surfaces/SideSheet.jsx
+const useStyles = makeStyles((theme) => ({
+	paper: {
+		width: "100%",
+		[theme.breakpoints.up("sm")]: { width: (props) => props.width || 320 },
+		background: theme?.getThemeData()?.mode === "dark" ? theme.palette.grey[700] : "#f4f4f4"
+	},
+	container: {
+		height: (props) => props.contentHeight ? props.contentHeight : "",
+		overflowY: (props) => props.contentHeight ? "auto" : "",
+		padding: (props) => props.noPadding ? 0 : ""
+	}
+}));
+/**
+* Base right hand side sheet with no contents
+*/
+const BaseSideSheet = (props) => {
+	const classes = useStyles(props);
+	const { anchor = "right", width, children, onClose, noBackdrop, buttonLabel, ...drawerProps } = props;
+	return /* @__PURE__ */ React.createElement(Drawer, {
+		classes: { paper: classes.paper },
+		variant: "temporary",
+		anchor,
+		onClose,
+		...drawerProps,
+		BackdropProps: { invisible: noBackdrop }
+	}, children);
+};
+/**
+* A right hand material side sheet
+*/
+const SideSheet = (props) => {
+	const classes = useStyles(props);
+	const { children, title, progress, progressColor, buttonLabel, noPadding, onSubmit, variant = "determinate", buttonTwoLabel, buttonTwoIcon, buttonTwoAction, buttonTwoProgress, buttonOneDisabled, buttonTwoDisabled, id, udprecordid, ...otherProps } = props;
+	const { onClose } = props;
+	return /* @__PURE__ */ React.createElement(BaseSideSheet, otherProps, /* @__PURE__ */ React.createElement(SideSheetHeader, {
+		id,
+		udprecordid,
+		onClose,
+		title,
+		buttonLabel,
+		onSubmit,
+		buttonTwoLabel,
+		buttonTwoIcon,
+		buttonTwoAction,
+		buttonTwoProgress,
+		isSticky: true,
+		buttonOneDisabled,
+		buttonTwoDisabled,
+		...otherProps
+	}), progress && /* @__PURE__ */ React.createElement(LinearProgress, {
+		variant,
+		color: progressColor,
+		value: progress
+	}), /* @__PURE__ */ React.createElement(CardContent, { classes: { root: classes.container } }, children));
+};
+SideSheet.propTypes = {
+	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+	title: PropTypes.string.isRequired,
+	onClose: PropTypes.func,
+	open: PropTypes.bool,
+	progress: PropTypes.any,
+	progressColor: PropTypes.string,
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	anchor: PropTypes.string,
+	buttonLabel: PropTypes.string,
+	noPadding: PropTypes.string,
+	contentHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+SideSheet.defaultProps = {
+	anchor: "right",
+	progressColor: "secondary"
+};
+
+//#endregion
+export { SideSheet as n, BaseSideSheet as t };
+//# sourceMappingURL=SideSheet-C-rILQqR.js.map

package/dist/SideSheet-C-rILQqR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheet-C-rILQqR.js","names":[],"sources":["../src/UI/surfaces/SideSheet.jsx"],"sourcesContent":["import React from 'react';\nimport {\n  makeStyles,\n  Drawer,\n  LinearProgress,\n  CardContent\n} from '@material-ui/core';\nimport { SideSheetHeader } from '../dataDisplay/typography/SideSheetHeader';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  paper: {\n    // width: (props) => props.width || 320,\n    width: '100%',\n    [theme.breakpoints.up('sm')]: {\n      width: (props) => props.width || 320\n    },\n    background:\n      theme?.getThemeData()?.mode === 'dark'\n        ? theme.palette.grey[700]\n        : '#f4f4f4'\n  },\n  container: {\n    height: (props) => (props.contentHeight ? props.contentHeight : ''),\n    overflowY: (props) => (props.contentHeight ? 'auto' : ''),\n    padding: (props) => (props.noPadding ? 0 : '')\n  }\n}));\n\n/**\n * Base right hand side sheet with no contents\n */\nexport const BaseSideSheet = (props) => {\n  const classes = useStyles(props);\n  const {\n    anchor = 'right',\n    width,\n    children,\n    onClose,\n    noBackdrop,\n    buttonLabel,\n    ...drawerProps\n  } = props;\n\n  return (\n    <Drawer\n      classes={{ paper: classes.paper }}\n      variant='temporary'\n      anchor={anchor}\n      onClose={onClose}\n      {...drawerProps}\n      BackdropProps={{ invisible: noBackdrop }}\n    >\n      {children}\n    </Drawer>\n  );\n};\n\n/**\n * A right hand material side sheet\n */\nexport const SideSheet = (props) => {\n  const classes = useStyles(props);\n  const {\n    children,\n    title,\n    progress,\n    progressColor,\n    buttonLabel,\n    noPadding,\n    onSubmit,\n    variant = 'determinate',\n    buttonTwoLabel,\n    buttonTwoIcon,\n    buttonTwoAction,\n    buttonTwoProgress,\n    buttonOneDisabled,\n    buttonTwoDisabled,\n    id,\n    udprecordid,\n    ...otherProps\n  } = props;\n  const { onClose } = props;\n  return (\n    <BaseSideSheet {...otherProps}>\n      <SideSheetHeader\n        id={id}\n        udprecordid={udprecordid}\n        onClose={onClose}\n        title={title}\n        buttonLabel={buttonLabel}\n        onSubmit={onSubmit}\n        buttonTwoLabel={buttonTwoLabel}\n        buttonTwoIcon={buttonTwoIcon}\n        buttonTwoAction={buttonTwoAction}\n        buttonTwoProgress={buttonTwoProgress}\n        isSticky={true}\n        buttonOneDisabled={buttonOneDisabled}\n        buttonTwoDisabled={buttonTwoDisabled}\n        {...otherProps}\n      />\n      {progress && (\n        <LinearProgress\n          variant={variant}\n          color={progressColor}\n          value={progress}\n        />\n      )}\n      <CardContent classes={{ root: classes.container }}>\n        {children}\n      </CardContent>\n    </BaseSideSheet>\n  );\n};\n\nSideSheet.propTypes = {\n  /**\n   * Main content for the modal view\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node\n  ]),\n  /**\n   * SideSheet title\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Function to close SideSheet\n   */\n  onClose: PropTypes.func,\n  /**\n   * Determins the open or closed state of the SideSheet\n   */\n  open: PropTypes.bool,\n  /**\n   * Value for progress loading\n   */\n  progress: PropTypes.any, // ToDo: add fix for hiding 0 progress\n  /**\n   * Progress loading color\n   */\n  progressColor: PropTypes.string,\n  /**\n   * Width of the SideSheet\n   */\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /**\n   * Anchor orgin of card (right, left, top, bottom)\n   */\n  anchor: PropTypes.string,\n  /**\n   * Label for top action button (global only)\n   */\n  buttonLabel: PropTypes.string,\n  /**\n   * Option to override container padding\n   */\n  noPadding: PropTypes.string,\n  /**\n   * Progress loading color\n   */\n  contentHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n};\n\nSideSheet.defaultProps = {\n  anchor: 'right',\n  progressColor: 'secondary'\n};\n"],"mappings":";;;;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,OAAO;EAEL,OAAO;GACN,MAAM,YAAY,GAAG,KAAK,GAAG,EAC5B,QAAQ,UAAU,MAAM,SAAS,KAClC;EACD,YACE,OAAO,cAAc,EAAE,SAAS,SAC5B,MAAM,QAAQ,KAAK,OACnB;EACP;CACD,WAAW;EACT,SAAS,UAAW,MAAM,gBAAgB,MAAM,gBAAgB;EAChE,YAAY,UAAW,MAAM,gBAAgB,SAAS;EACtD,UAAU,UAAW,MAAM,YAAY,IAAI;EAC5C;CACF,EAAE;;;;AAKH,MAAa,iBAAiB,UAAU;CACtC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,SAAS,SACT,OACA,UACA,SACA,YACA,aACA,GAAG,gBACD;AAEJ,QACE,oCAAC;EACC,SAAS,EAAE,OAAO,QAAQ,OAAO;EACjC,SAAQ;EACA;EACC;EACT,GAAI;EACJ,eAAe,EAAE,WAAW,YAAY;IAEvC,SACM;;;;;AAOb,MAAa,aAAa,UAAU;CAClC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,UACA,OACA,UACA,eACA,aACA,WACA,UACA,UAAU,eACV,gBACA,eACA,iBACA,mBACA,mBACA,mBACA,IACA,aACA,GAAG,eACD;CACJ,MAAM,EAAE,YAAY;AACpB,QACE,oCAAC,eAAkB,YACjB,oCAAC;EACK;EACS;EACJ;EACF;EACM;EACH;EACM;EACD;EACE;EACE;EACnB,UAAU;EACS;EACA;EACnB,GAAI;GACJ,EACD,YACC,oCAAC;EACU;EACT,OAAO;EACP,OAAO;GACP,EAEJ,oCAAC,eAAY,SAAS,EAAE,MAAM,QAAQ,WAAW,IAC9C,SACW,CACA;;AAIpB,UAAU,YAAY;CAIpB,UAAU,UAAU,UAAU,CAC5B,UAAU,QAAQ,UAAU,KAAK,EACjC,UAAU,KACX,CAAC;CAIF,OAAO,UAAU,OAAO;CAIxB,SAAS,UAAU;CAInB,MAAM,UAAU;CAIhB,UAAU,UAAU;CAIpB,eAAe,UAAU;CAIzB,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC;CAIhE,QAAQ,UAAU;CAIlB,aAAa,UAAU;CAIvB,WAAW,UAAU;CAIrB,eAAe,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC;CACzE;AAED,UAAU,eAAe;CACvB,QAAQ;CACR,eAAe;CAChB"}

package/dist/SideSheetHeader-DgnkLGmv.js

@@ -0,0 +1,79 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as StandardTitle } from "./StandardTitle-DJ9zcNBA.js";
+import React from "react";
+import { CircularProgress, makeStyles } from "@material-ui/core";
+import { ChromeCloseIcon } from "@fluentui/react-icons";
+
+//#region src/UI/dataDisplay/typography/SideSheetHeader.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(1),
+		paddingLeft: 0,
+		background: theme?.getThemeData()?.mode === "dark" ? theme.palette.grey[800] : theme.palette.common.white,
+		position: ({ isSticky }) => isSticky ? "sticky" : "relative",
+		top: ({ isSticky }) => isSticky ? 0 : "auto",
+		zIndex: ({ isSticky }) => isSticky ? 1200 : "auto"
+	},
+	title: {
+		display: "flex",
+		flex: 1,
+		alignItems: "center",
+		marginLeft: theme.spacing(1.5)
+	},
+	actionButton: {
+		marginRight: theme.spacing(1),
+		position: "relative"
+	},
+	fabProgress: {
+		position: "absolute",
+		top: 4,
+		left: "35%",
+		zIndex: 1
+	}
+}));
+const SideSheetHeader = ({ isSticky = false, ...props }) => {
+	const classes = useStyles({ isSticky });
+	const { title, onClose, buttonLabel, onSubmit, buttonProgress, buttonTwoLabel, buttonTwoIcon, buttonTwoAction, buttonTwoProgress, id, udprecordid = "", buttonOneDisabled, buttonTwoDisabled, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		id: id + "-Close",
+		udprecordid: udprecordid + "-Close",
+		icon: ChromeCloseIcon,
+		onClick: onClose,
+		"aria-label": "Close Panel"
+	}), /* @__PURE__ */ React.createElement(StandardTitle, { className: classes.title }, title)), buttonTwoLabel && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentButton, {
+		color: "secondary",
+		onClick: buttonTwoAction,
+		disabled: buttonTwoDisabled,
+		...otherProps
+	}, buttonTwoProgress && /* @__PURE__ */ React.createElement(CircularProgress, {
+		size: 24,
+		color: "secondary",
+		className: classes.fabProgress
+	}), buttonTwoIcon && /* @__PURE__ */ React.createElement(FluentIcon, {
+		size: "small",
+		component: buttonTwoIcon,
+		style: { marginRight: 8 }
+	}), buttonTwoLabel)), buttonLabel && /* @__PURE__ */ React.createElement("div", { className: classes.actionButton }, /* @__PURE__ */ React.createElement(FluentButton, {
+		id: id + "-CreateView",
+		udprecordid: udprecordid + "-CreateView",
+		variant: "contained",
+		color: "secondary",
+		onClick: onSubmit,
+		disabled: buttonOneDisabled,
+		...otherProps
+	}, buttonProgress && /* @__PURE__ */ React.createElement(CircularProgress, {
+		id: id + "-ButtonProgress",
+		udprecordid: udprecordid + "-ButtonProgress",
+		size: 24,
+		color: "secondary",
+		className: classes.fabProgress
+	}), buttonLabel)));
+};
+
+//#endregion
+export { SideSheetHeader as t };
+//# sourceMappingURL=SideSheetHeader-DgnkLGmv.js.map

package/dist/SideSheetHeader-DgnkLGmv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheetHeader-DgnkLGmv.js","names":[],"sources":["../src/UI/dataDisplay/typography/SideSheetHeader.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, CircularProgress } from '@material-ui/core';\nimport { StandardTitle } from './StandardTitle';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { FluentButton } from '../../inputs/buttons/FluentButton';\nimport { ChromeCloseIcon } from '@fluentui/react-icons';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    padding: theme.spacing(1),\n    paddingLeft: 0,\n    background:\n      theme?.getThemeData()?.mode === 'dark'\n        ? theme.palette.grey[800]\n        : theme.palette.common.white,\n    position: ({ isSticky }) => (isSticky ? 'sticky' : 'relative'),\n    top: ({ isSticky }) => (isSticky ? 0 : 'auto'),\n    zIndex: ({ isSticky }) => (isSticky ? 1200 : 'auto')\n  },\n  title: {\n    display: 'flex',\n    flex: 1,\n    alignItems: 'center',\n    marginLeft: theme.spacing(1.5)\n  },\n  actionButton: {\n    marginRight: theme.spacing(1),\n    position: 'relative'\n  },\n  fabProgress: {\n    position: 'absolute',\n    top: 4,\n    left: '35%',\n    zIndex: 1\n  }\n}));\n\nexport const SideSheetHeader = ({ isSticky = false, ...props }) => {\n  const classes = useStyles({ isSticky });\n  const {\n    title,\n    onClose,\n    buttonLabel,\n    onSubmit,\n    buttonProgress,\n    buttonTwoLabel,\n    buttonTwoIcon,\n    buttonTwoAction,\n    buttonTwoProgress,\n    id,\n    udprecordid = '',\n    buttonOneDisabled,\n    buttonTwoDisabled,\n    ...otherProps\n  } = props;\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.title}>\n        <FluentIconButton\n          id={id + '-Close'}\n          udprecordid={udprecordid + '-Close'}\n          icon={ChromeCloseIcon}\n          onClick={onClose}\n          aria-label='Close Panel'\n        />\n        <StandardTitle className={classes.title}>{title}</StandardTitle>\n      </div>\n      {buttonTwoLabel && (\n        <div>\n          <FluentButton\n            // variant='contained'\n            color='secondary'\n            onClick={buttonTwoAction}\n            disabled={buttonTwoDisabled}\n            {...otherProps}\n          >\n            {buttonTwoProgress && (\n              <CircularProgress\n                size={24}\n                color='secondary'\n                className={classes.fabProgress}\n              />\n            )}\n            {buttonTwoIcon && (\n              <FluentIcon\n                size='small'\n                component={buttonTwoIcon}\n                style={{ marginRight: 8 }}\n              />\n            )}\n            {buttonTwoLabel}\n          </FluentButton>\n        </div>\n      )}\n      {buttonLabel && (\n        <div className={classes.actionButton}>\n          <FluentButton\n            id={id + '-CreateView'}\n            udprecordid={udprecordid + '-CreateView'}\n            variant='contained'\n            color='secondary'\n            onClick={onSubmit}\n            disabled={buttonOneDisabled}\n            {...otherProps}\n          >\n            {buttonProgress && (\n              <CircularProgress\n                id={id + '-ButtonProgress'}\n                udprecordid={udprecordid + '-ButtonProgress'}\n                size={24}\n                color='secondary'\n                className={classes.fabProgress}\n              />\n            )}\n            {buttonLabel}\n          </FluentButton>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,SAAS,MAAM,QAAQ,EAAE;EACzB,aAAa;EACb,YACE,OAAO,cAAc,EAAE,SAAS,SAC5B,MAAM,QAAQ,KAAK,OACnB,MAAM,QAAQ,OAAO;EAC3B,WAAW,EAAE,eAAgB,WAAW,WAAW;EACnD,MAAM,EAAE,eAAgB,WAAW,IAAI;EACvC,SAAS,EAAE,eAAgB,WAAW,OAAO;EAC9C;CACD,OAAO;EACL,SAAS;EACT,MAAM;EACN,YAAY;EACZ,YAAY,MAAM,QAAQ,IAAI;EAC/B;CACD,cAAc;EACZ,aAAa,MAAM,QAAQ,EAAE;EAC7B,UAAU;EACX;CACD,aAAa;EACX,UAAU;EACV,KAAK;EACL,MAAM;EACN,QAAQ;EACT;CACF,EAAE;AAEH,MAAa,mBAAmB,EAAE,WAAW,OAAO,GAAG,YAAY;CACjE,MAAM,UAAU,UAAU,EAAE,UAAU,CAAC;CACvC,MAAM,EACJ,OACA,SACA,aACA,UACA,gBACA,gBACA,eACA,iBACA,mBACA,IACA,cAAc,IACd,mBACA,mBACA,GAAG,eACD;AAEJ,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC;EACC,IAAI,KAAK;EACT,aAAa,cAAc;EAC3B,MAAM;EACN,SAAS;EACT,cAAW;GACX,EACF,oCAAC,iBAAc,WAAW,QAAQ,SAAQ,MAAsB,CAC5D,EACL,kBACC,oCAAC,aACC,oCAAC;EAEC,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;IAEH,qBACC,oCAAC;EACC,MAAM;EACN,OAAM;EACN,WAAW,QAAQ;GACnB,EAEH,iBACC,oCAAC;EACC,MAAK;EACL,WAAW;EACX,OAAO,EAAE,aAAa,GAAG;GACzB,EAEH,eACY,CACX,EAEP,eACC,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,IAAI,KAAK;EACT,aAAa,cAAc;EAC3B,SAAQ;EACR,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;IAEH,kBACC,oCAAC;EACC,IAAI,KAAK;EACT,aAAa,cAAc;EAC3B,MAAM;EACN,OAAM;EACN,WAAW,QAAQ;GACnB,EAEH,YACY,CACX,CAEJ"}

package/dist/SidebarCollapseButton-pxq7unTx.js

@@ -0,0 +1,64 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronRightIcon } from "@fluentui/react-icons";
+import { useTranslation } from "react-i18next";
+
+//#region src/shell/ui/SidebarCollapseButton.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		justifyContent: "flex-start",
+		height: 48,
+		width: "100%",
+		paddingLeft: 0
+	},
+	iconButton: {
+		width: 48,
+		height: 48,
+		marginLeft: 16 - 24 / 2
+	},
+	expanded: {},
+	icon: {
+		width: 14,
+		height: 14,
+		margin: 8 / 2,
+		transition: theme?.transitions?.create("transform", {
+			easing: theme?.transitions?.easing?.sharp,
+			duration: theme?.transitions?.duration?.shortest
+		}),
+		"$expanded &": { transform: "scaleX(-1)" }
+	},
+	switch: {
+		margin: 8 / 2,
+		transition: theme?.transitions?.create("transform", {
+			easing: theme?.transitions?.easing?.sharp,
+			duration: theme?.transitions?.duration?.shortest
+		}),
+		"$expanded &": { transform: "scaleX(-1)" }
+	}
+}), { name: "SidebarCollapseButton" });
+/**
+* Custom styled button used for expanding/collapsing sidebars
+*/
+const SidebarCollapseButton = (props) => {
+	const classes = useStyles(props);
+	const { expanded, className, id, udprecordid, ...other } = props;
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement("div", {
+		...other,
+		className: clsx(className, classes.root, { [classes.expanded]: expanded })
+	}, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		id,
+		udprecordid,
+		color: "inherit",
+		className: clsx(classes.iconButton, classes.switch),
+		"aria-label": expanded ? t("mainMenuAria.collapseNavigation") : t("mainMenuAria.expandNavigation"),
+		icon: ChevronRightIcon
+	}));
+};
+
+//#endregion
+export { SidebarCollapseButton as t };
+//# sourceMappingURL=SidebarCollapseButton-pxq7unTx.js.map

package/dist/SidebarCollapseButton-pxq7unTx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarCollapseButton-pxq7unTx.js","names":[],"sources":["../src/shell/ui/SidebarCollapseButton.jsx"],"sourcesContent":["import { makeStyles } from '@material-ui/core'\nimport clsx from 'clsx'\nimport React from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChevronRightIcon } from '@fluentui/react-icons'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\n\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      display: 'flex',\n      justifyContent: 'flex-start',\n      height: 48,\n      width: '100%',\n      paddingLeft: 0,\n    },\n    iconButton: {\n      width: 48,\n      height: 48,\n      marginLeft: 16 - (48 - 24) / 2\n    },\n    expanded: {},\n    icon: {\n      width: 14,\n      height: 14,\n      margin: (24 - 16) / 2,\n      transition: theme?.transitions?.create('transform', {\n        easing: theme?.transitions?.easing?.sharp,\n        duration: theme?.transitions?.duration?.shortest\n      }),\n      '$expanded &': {\n        transform: 'scaleX(-1)'\n      }\n    },\n    switch: {\n      margin: (24 - 16) / 2,\n      transition: theme?.transitions?.create('transform', {\n        easing: theme?.transitions?.easing?.sharp,\n        duration: theme?.transitions?.duration?.shortest\n      }),\n      '$expanded &': {\n        transform: 'scaleX(-1)'\n      }\n    }\n  }),\n  { name: 'SidebarCollapseButton' }\n)\n\n/**\n * Custom styled button used for expanding/collapsing sidebars\n */\nexport const SidebarCollapseButton = (props) => {\n  const classes = useStyles(props)\n  const { expanded, className, id, udprecordid, ...other } = props\n  const { t } = useTranslation()\n\n  return (\n    <div\n      {...other}\n      className={clsx(className, classes.root, {\n        [classes.expanded]: expanded\n      })}\n    >\n      <FluentIconButton\n        id={id}\n        udprecordid={udprecordid}\n        color='inherit'\n        className={clsx(classes.iconButton, classes.switch)}\n        aria-label={\n          expanded\n            ? t('mainMenuAria.collapseNavigation')\n            : t('mainMenuAria.expandNavigation')\n        }\n        icon={ChevronRightIcon}\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,QAAQ;EACR,OAAO;EACP,aAAa;EACd;CACD,YAAY;EACV,OAAO;EACP,QAAQ;EACR,YAAY,KAAM,KAAW;EAC9B;CACD,UAAU,EAAE;CACZ,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,QAAS,IAAW;EACpB,YAAY,OAAO,aAAa,OAAO,aAAa;GAClD,QAAQ,OAAO,aAAa,QAAQ;GACpC,UAAU,OAAO,aAAa,UAAU;GACzC,CAAC;EACF,eAAe,EACb,WAAW,cACZ;EACF;CACD,QAAQ;EACN,QAAS,IAAW;EACpB,YAAY,OAAO,aAAa,OAAO,aAAa;GAClD,QAAQ,OAAO,aAAa,QAAQ;GACpC,UAAU,OAAO,aAAa,UAAU;GACzC,CAAC;EACF,eAAe,EACb,WAAW,cACZ;EACF;CACF,GACD,EAAE,MAAM,yBAAyB,CAClC;;;;AAKD,MAAa,yBAAyB,UAAU;CAC9C,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,UAAU,WAAW,IAAI,aAAa,GAAG,UAAU;CAC3D,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC,GAAI;EACJ,WAAW,KAAK,WAAW,QAAQ,MAAM,GACtC,QAAQ,WAAW,UACrB,CAAC;IAEF,oCAAC;EACK;EACS;EACb,OAAM;EACN,WAAW,KAAK,QAAQ,YAAY,QAAQ,OAAO;EACnD,cACE,WACI,EAAE,kCAAkC,GACpC,EAAE,gCAAgC;EAExC,MAAM;GACN,CACE"}

package/dist/SidebarHeader-DU68JdgW.js

@@ -0,0 +1,82 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as StandardTitle } from "./StandardTitle-DJ9zcNBA.js";
+import React from "react";
+import { CircularProgress, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { ChromeCloseIcon } from "@fluentui/react-icons";
+
+//#region src/UI/dataDisplay/typography/SidebarHeader.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(1),
+		paddingLeft: 0,
+		background: theme?.getThemeData()?.mode === "dark" ? theme.palette.grey[800] : theme.palette.common.white
+	},
+	title: {
+		display: "flex",
+		flex: 1,
+		alignItems: "center",
+		marginLeft: theme.spacing(1.5)
+	},
+	actionButton: {
+		marginRight: theme.spacing(1),
+		position: "relative"
+	},
+	fabProgress: {
+		position: "absolute",
+		top: 4,
+		left: "35%",
+		zIndex: 1
+	}
+}));
+const SidebarHeader = (props) => {
+	const { title, onClose, buttonLabel, buttonProgress, buttonVariant = "contained", buttonIcon = null, onSubmit, secondaryButtonLabel, secondaryButtonProgress, secondaryButtonVariant = "contained", secondaryButtonIcon = "", secondaryOnSubmit = () => {}, additionalInputs, classes: classProps, hideCloseButton, ...otherProps } = props;
+	const classes = useStyles(props);
+	const { root, actionButton } = classProps || {};
+	const theme = useTheme();
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, root) }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, !hideCloseButton && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		id: "udpRecord-SidebarHeader-ClosePanel",
+		udprecordid: "udpRecord-SidebarHeader-ClosePanel",
+		icon: ChromeCloseIcon,
+		onClick: onClose,
+		"aria-label": "Close Panel"
+	}), /* @__PURE__ */ React.createElement(StandardTitle, { className: classes.title }, title)), additionalInputs, secondaryButtonLabel && /* @__PURE__ */ React.createElement("div", { className: clsx(classes.actionButton, actionButton) }, /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: secondaryButtonVariant,
+		color: "secondary",
+		onClick: secondaryOnSubmit,
+		height: theme.spacing(5.25),
+		...otherProps
+	}, secondaryButtonProgress && /* @__PURE__ */ React.createElement(CircularProgress, {
+		size: theme.spacing(3),
+		color: "secondary",
+		className: classes.fabProgress
+	}), secondaryButtonIcon && /* @__PURE__ */ React.createElement(FluentIcon, {
+		size: "small",
+		component: secondaryButtonIcon,
+		color: "primary",
+		style: { marginRight: theme.spacing(1) }
+	}), /* @__PURE__ */ React.createElement(Typography, null, secondaryButtonLabel))), buttonLabel && /* @__PURE__ */ React.createElement("div", { className: clsx(classes.actionButton, actionButton) }, /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: buttonVariant,
+		color: "secondary",
+		onClick: onSubmit,
+		height: theme.spacing(5.25),
+		...otherProps
+	}, buttonProgress && /* @__PURE__ */ React.createElement(CircularProgress, {
+		size: theme.spacing(3),
+		color: "secondary",
+		className: classes.fabProgress
+	}), buttonIcon && /* @__PURE__ */ React.createElement(FluentIcon, {
+		size: "small",
+		component: buttonIcon,
+		color: "primary",
+		style: { marginRight: theme.spacing(1) }
+	}), /* @__PURE__ */ React.createElement(Typography, null, buttonLabel))));
+};
+
+//#endregion
+export { SidebarHeader as t };
+//# sourceMappingURL=SidebarHeader-DU68JdgW.js.map

package/dist/SidebarHeader-DU68JdgW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarHeader-DU68JdgW.js","names":[],"sources":["../src/UI/dataDisplay/typography/SidebarHeader.jsx"],"sourcesContent":["import React from 'react';\nimport {\n  makeStyles,\n  CircularProgress,\n  useTheme,\n  Typography,\n  lighten\n} from '@material-ui/core';\nimport { StandardTitle } from './StandardTitle';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { FluentButton } from '../../inputs/buttons/FluentButton';\nimport { ChromeCloseIcon } from '@fluentui/react-icons';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\n\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    padding: theme.spacing(1),\n    paddingLeft: 0,\n    background:\n      theme?.getThemeData()?.mode === 'dark'\n        ? theme.palette.grey[800]\n        : theme.palette.common.white\n  },\n  title: {\n    display: 'flex',\n    flex: 1,\n    alignItems: 'center',\n    marginLeft: theme.spacing(1.5)\n  },\n  actionButton: {\n    marginRight: theme.spacing(1),\n    position: 'relative'\n  },\n  fabProgress: {\n    position: 'absolute',\n    top: 4,\n    left: '35%',\n    zIndex: 1\n  }\n}));\n\nexport const SidebarHeader = (props) => {\n  const {\n    title,\n    onClose,\n    buttonLabel,\n    buttonProgress,\n    buttonVariant = 'contained',\n    buttonIcon = null,\n    onSubmit,\n    secondaryButtonLabel,\n    secondaryButtonProgress,\n    secondaryButtonVariant = 'contained',\n    secondaryButtonIcon = '',\n    secondaryOnSubmit = () => {},\n    additionalInputs,\n    classes: classProps,\n    hideCloseButton,\n    ...otherProps\n  } = props;\n  const classes = useStyles(props);\n  const { root, actionButton } = classProps || {};\n  const theme = useTheme();\n\n  return (\n    <div className={clsx(classes.root, root)}>\n      <div className={classes.title}>\n        {!hideCloseButton && (\n          <FluentIconButton\n            id='udpRecord-SidebarHeader-ClosePanel'\n            udprecordid='udpRecord-SidebarHeader-ClosePanel'\n            icon={ChromeCloseIcon}\n            onClick={onClose}\n            aria-label='Close Panel'\n          />\n        )}\n        <StandardTitle className={classes.title}>{title}</StandardTitle>\n      </div>\n      {additionalInputs}\n      {secondaryButtonLabel && (\n        <div className={clsx(classes.actionButton, actionButton)}>\n          <FluentButton\n            variant={secondaryButtonVariant}\n            color='secondary'\n            onClick={secondaryOnSubmit}\n            height={theme.spacing(5.25)}\n            {...otherProps}\n          >\n            {secondaryButtonProgress && (\n              <CircularProgress\n                size={theme.spacing(3)}\n                color='secondary'\n                className={classes.fabProgress}\n              />\n            )}\n            {secondaryButtonIcon && (\n              <FluentIcon\n                size='small'\n                component={secondaryButtonIcon}\n                color='primary'\n                style={{\n                  marginRight: theme.spacing(1)\n                }}\n              />\n            )}\n            <Typography>{secondaryButtonLabel}</Typography>\n          </FluentButton>\n        </div>\n      )}\n      {buttonLabel && (\n        <div className={clsx(classes.actionButton, actionButton)}>\n          <FluentButton\n            variant={buttonVariant}\n            color='secondary'\n            onClick={onSubmit}\n            height={theme.spacing(5.25)}\n            {...otherProps}\n          >\n            {buttonProgress && (\n              <CircularProgress\n                size={theme.spacing(3)}\n                color='secondary'\n                className={classes.fabProgress}\n              />\n            )}\n            {buttonIcon && (\n              <FluentIcon\n                size='small'\n                component={buttonIcon}\n                color='primary'\n                style={{\n                  marginRight: theme.spacing(1)\n                }}\n              />\n            )}\n            <Typography>{buttonLabel}</Typography>\n          </FluentButton>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,SAAS,MAAM,QAAQ,EAAE;EACzB,aAAa;EACb,YACE,OAAO,cAAc,EAAE,SAAS,SAC5B,MAAM,QAAQ,KAAK,OACnB,MAAM,QAAQ,OAAO;EAC5B;CACD,OAAO;EACL,SAAS;EACT,MAAM;EACN,YAAY;EACZ,YAAY,MAAM,QAAQ,IAAI;EAC/B;CACD,cAAc;EACZ,aAAa,MAAM,QAAQ,EAAE;EAC7B,UAAU;EACX;CACD,aAAa;EACX,UAAU;EACV,KAAK;EACL,MAAM;EACN,QAAQ;EACT;CACF,EAAE;AAEH,MAAa,iBAAiB,UAAU;CACtC,MAAM,EACJ,OACA,SACA,aACA,gBACA,gBAAgB,aAChB,aAAa,MACb,UACA,sBACA,yBACA,yBAAyB,aACzB,sBAAsB,IACtB,0BAA0B,IAC1B,kBACA,SAAS,YACT,iBACA,GAAG,eACD;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,iBAAiB,cAAc,EAAE;CAC/C,MAAM,QAAQ,UAAU;AAExB,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,KAAK,IACtC,oCAAC,SAAI,WAAW,QAAQ,SACrB,CAAC,mBACA,oCAAC;EACC,IAAG;EACH,aAAY;EACZ,MAAM;EACN,SAAS;EACT,cAAW;GACX,EAEJ,oCAAC,iBAAc,WAAW,QAAQ,SAAQ,MAAsB,CAC5D,EACL,kBACA,wBACC,oCAAC,SAAI,WAAW,KAAK,QAAQ,cAAc,aAAa,IACtD,oCAAC;EACC,SAAS;EACT,OAAM;EACN,SAAS;EACT,QAAQ,MAAM,QAAQ,KAAK;EAC3B,GAAI;IAEH,2BACC,oCAAC;EACC,MAAM,MAAM,QAAQ,EAAE;EACtB,OAAM;EACN,WAAW,QAAQ;GACnB,EAEH,uBACC,oCAAC;EACC,MAAK;EACL,WAAW;EACX,OAAM;EACN,OAAO,EACL,aAAa,MAAM,QAAQ,EAAE,EAC9B;GACD,EAEJ,oCAAC,kBAAY,qBAAkC,CAClC,CACX,EAEP,eACC,oCAAC,SAAI,WAAW,KAAK,QAAQ,cAAc,aAAa,IACtD,oCAAC;EACC,SAAS;EACT,OAAM;EACN,SAAS;EACT,QAAQ,MAAM,QAAQ,KAAK;EAC3B,GAAI;IAEH,kBACC,oCAAC;EACC,MAAM,MAAM,QAAQ,EAAE;EACtB,OAAM;EACN,WAAW,QAAQ;GACnB,EAEH,cACC,oCAAC;EACC,MAAK;EACL,WAAW;EACX,OAAM;EACN,OAAO,EACL,aAAa,MAAM,QAAQ,EAAE,EAC9B;GACD,EAEJ,oCAAC,kBAAY,YAAyB,CACzB,CACX,CAEJ"}

package/dist/SparklineWidget-CQtdgO_B.js

@@ -0,0 +1,65 @@
+import { t as __export } from "./chunk-Bp6m_JJh.js";
+import { t as WidgetCard_default } from "./WidgetCard-CDqYxK5O.js";
+import { t as FluentStatsSnippet_default } from "./FluentStatsSnippet-BuDlbH0Q.js";
+import { t as convertISODate } from "./ConvertISODate-TfG2U4Iu.js";
+import React, { Fragment, forwardRef } from "react";
+import { Grid, Typography, makeStyles } from "@material-ui/core";
+import { Sparklines, SparklinesLine } from "react-sparklines";
+
+//#region src/UI/widgets/library/SparklineWidget/SparklineWidget.jsx
+const layout = {
+	w: {
+		default: 2,
+		min: 0,
+		max: 4
+	},
+	h: {
+		default: 2,
+		min: 0,
+		max: 4
+	}
+};
+const useStyles = makeStyles((theme) => ({ statList: {
+	display: "flex",
+	flexDirection: "row",
+	justifyContent: "space-between"
+} }));
+const SparklineWidget = (props, ref) => {
+	const classes = useStyles();
+	const { children, params, setParam, ...other } = props;
+	const { mockData, apiUrl, theme, dateRange } = params;
+	return /* @__PURE__ */ React.createElement(WidgetCard_default, {
+		className: classes.root,
+		theme,
+		ref,
+		...other,
+		title: mockData?.title
+	}, mockData ? /* @__PURE__ */ React.createElement(Fragment, null, dateRange && /* @__PURE__ */ React.createElement(Typography, {
+		gutterBottom: true,
+		variant: "caption",
+		component: "h3"
+	}, "From: ", convertISODate(dateRange.from), " to:", " ", convertISODate(dateRange.to)), /* @__PURE__ */ React.createElement("div", { className: classes.statList }, mockData?.stats?.map((stat) => /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		key: stat.label
+	}, /* @__PURE__ */ React.createElement(FluentStatsSnippet_default, {
+		label: stat.label,
+		amount: stat.amount,
+		percent: stat.percent && stat.percent,
+		trend: stat.trend
+	})))), /* @__PURE__ */ React.createElement(Sparklines, {
+		data: mockData?.data,
+		strokeWidth: .5
+	}, /* @__PURE__ */ React.createElement(SparklinesLine, { color: "#067e7e" })), children) : /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "Could not retrieve widget data. Please contact support."));
+};
+var SparklineWidget_default = forwardRef(SparklineWidget);
+
+//#endregion
+//#region src/UI/widgets/library/SparklineWidget/index.ts
+var SparklineWidget_exports = /* @__PURE__ */ __export({
+	default: () => SparklineWidget_default,
+	layout: () => layout
+});
+
+//#endregion
+export { SparklineWidget_default as n, layout as r, SparklineWidget_exports as t };
+//# sourceMappingURL=SparklineWidget-CQtdgO_B.js.map

package/dist/SparklineWidget-CQtdgO_B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineWidget-CQtdgO_B.js","names":["WidgetCard","FluentStatsSnippet"],"sources":["../src/UI/widgets/library/SparklineWidget/SparklineWidget.jsx","../src/UI/widgets/library/SparklineWidget/index.ts"],"sourcesContent":["import React, { forwardRef, Fragment } from 'react'\nimport { Grid, Typography, makeStyles } from '@material-ui/core'\nimport WidgetCard from '../../WidgetCard'\nimport { Sparklines, SparklinesLine } from 'react-sparklines'\nimport FluentStatsSnippet from '../../FluentComponents/atoms/FluentStatsSnippet'\nimport { convertISODate } from '../../utils/ConvertISODate'\n\nexport const layout = {\n  w: { default: 2, min: 0, max: 4 },\n  h: { default: 2, min: 0, max: 4 }\n}\n\nconst useStyles = makeStyles((theme) => ({\n  statList: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between'\n  }\n}))\n\nconst SparklineWidget = (props, ref) => {\n  const classes = useStyles()\n  const { children, params, setParam, ...other } = props\n  const { mockData, apiUrl, theme, dateRange } = params\n\n  return (\n    <WidgetCard\n      className={classes.root}\n      theme={theme}\n      ref={ref}\n      {...other}\n      title={mockData?.title}\n    >\n      {mockData ? (\n        <Fragment>\n          {dateRange && (\n            <Typography gutterBottom variant='caption' component='h3'>\n              From: {convertISODate(dateRange.from)} to:{' '}\n              {convertISODate(dateRange.to)}\n            </Typography>\n          )}\n          <div className={classes.statList}>\n            {mockData?.stats?.map((stat) => (\n              <Grid item key={stat.label}>\n                <FluentStatsSnippet\n                  label={stat.label}\n                  amount={stat.amount}\n                  percent={stat.percent && stat.percent}\n                  trend={stat.trend}\n                />\n              </Grid>\n            ))}\n          </div>\n\n          <Sparklines data={mockData?.data} strokeWidth={0.5}>\n            <SparklinesLine color='#067e7e' />\n          </Sparklines>\n          {children}\n        </Fragment>\n      ) : (\n        <Typography variant='subtitle2'>\n          Could not retrieve widget data. Please contact support.\n        </Typography>\n      )}\n    </WidgetCard>\n  )\n}\n\nexport default forwardRef(SparklineWidget)\n","export * from './SparklineWidget';\nexport {default} from './SparklineWidget';\n"],"mappings":";;;;;;;;;AAOA,MAAa,SAAS;CACpB,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CACjC,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CAClC;AAED,MAAM,YAAY,YAAY,WAAW,EACvC,UAAU;CACR,SAAS;CACT,eAAe;CACf,gBAAgB;CACjB,EACF,EAAE;AAEH,MAAM,mBAAmB,OAAO,QAAQ;CACtC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,UAAU,QAAQ,UAAU,GAAG,UAAU;CACjD,MAAM,EAAE,UAAU,QAAQ,OAAO,cAAc;AAE/C,QACE,oCAACA;EACC,WAAW,QAAQ;EACZ;EACF;EACL,GAAI;EACJ,OAAO,UAAU;IAEhB,WACC,oCAAC,gBACE,aACC,oCAAC;EAAW;EAAa,SAAQ;EAAU,WAAU;IAAK,UACjD,eAAe,UAAU,KAAK,EAAC,QAAK,KAC1C,eAAe,UAAU,GAAG,CAClB,EAEf,oCAAC,SAAI,WAAW,QAAQ,YACrB,UAAU,OAAO,KAAK,SACrB,oCAAC;EAAK;EAAK,KAAK,KAAK;IACnB,oCAACC;EACC,OAAO,KAAK;EACZ,QAAQ,KAAK;EACb,SAAS,KAAK,WAAW,KAAK;EAC9B,OAAO,KAAK;GACZ,CACG,CACP,CACE,EAEN,oCAAC;EAAW,MAAM,UAAU;EAAM,aAAa;IAC7C,oCAAC,kBAAe,OAAM,YAAY,CACvB,EACZ,SACQ,GAEX,oCAAC,cAAW,SAAQ,eAAY,0DAEnB,CAEJ;;AAIjB,8BAAe,WAAW,gBAAgB"}