@red-hat-developer-hub/backstage-plugin-global-header 0.0.2 → 0.0.4

package/dist/components/HeaderDropdownComponent/HeaderDropdownComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderDropdownComponent.esm.js","sources":["../../../src/components/HeaderDropdownComponent/HeaderDropdownComponent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\nimport { Link } from '@backstage/core-components';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport MenuSection, { MenuItemConfig, MenuSectionConfig } from './MenuSection';\n\ninterface HeaderDropdownProps {\n  buttonContent: React.ReactNode;\n  menuSections?: MenuSectionConfig[];\n  menuBottomItems?: MenuItemConfig[];\n  buttonProps?: React.ComponentProps<typeof Button>;\n  buttonClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nconst Listbox = styled('ul')(\n  ({ theme }) => `\n  font-size: 0.875rem;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  min-width: 160px;\n  border-radius: 3px;\n  text-decoration: none;\n  list-style: none;\n  overflow: auto;\n  outline: 1;\n  background: ${\n    theme.palette.mode === 'dark' ? theme.palette.background.default : '#fff'\n  };\n  border: 1px solid ${\n    theme.palette.mode === 'dark'\n      ? theme.palette.divider\n      : theme.palette.background.default\n  };\n  color: ${\n    theme.palette.mode === 'dark'\n      ? theme.palette.text.disabled\n      : theme.palette.text.primary\n  };\n  box-shadow: 0 4px 6px ${\n    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'\n  };\n  z-index: 1;\n  `,\n);\n\nconst HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({\n  buttonContent,\n  menuSections = [],\n  menuBottomItems = [],\n  buttonProps,\n  buttonClick,\n  anchorEl,\n  setAnchorEl,\n}) => {\n  const shouldHideDivider = (index: number) =>\n    menuSections.length === 1 &&\n    index === menuSections.length - 1 &&\n    menuBottomItems.length === 0;\n\n  return (\n    <Box>\n      <Button\n        disableRipple\n        disableTouchRipple\n        {...buttonProps}\n        onClick={buttonClick}\n      >\n        {buttonContent}\n      </Button>\n      <Menu\n        id=\"menu-appbar\"\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'center',\n        }}\n        sx={{\n          '& ul[class*=\"MuiMenu-list\"]': {\n            py: 0,\n          },\n        }}\n      >\n        <Listbox role=\"menu\">\n          {menuSections.map((section, index) => (\n            <MenuSection\n              key={`menu-section-${section.sectionKey}`}\n              {...{ hideDivider: shouldHideDivider(index), ...section }}\n              handleClose={section.handleClose}\n            />\n          ))}\n          {menuBottomItems.map(\n            ({ itemKey, icon: Icon, label, subLabel, link }) => (\n              <MenuItem\n                key={`menu-item-${itemKey}`}\n                sx={{ my: '8px', '&:hover': { background: 'transparent' } }}\n                onClick={() => setAnchorEl(null)}\n                disableRipple\n              >\n                {link && (\n                  <Link\n                    to={link}\n                    style={{\n                      display: 'flex',\n                      color: 'inherit',\n                      alignItems: 'center',\n                      textDecoration: 'none',\n                    }}\n                  >\n                    {Icon && (\n                      <Icon\n                        fontSize=\"small\"\n                        style={{\n                          marginRight: '0.5rem',\n                          flexShrink: 0,\n                          color: 'slategray',\n                        }}\n                      />\n                    )}\n                    <Box>\n                      <Typography variant=\"body2\">{label}</Typography>\n                      {subLabel && (\n                        <Typography variant=\"caption\" color=\"text.secondary\">\n                          {subLabel}\n                        </Typography>\n                      )}\n                    </Box>\n                  </Link>\n                )}\n              </MenuItem>\n            ),\n          )}\n        </Listbox>\n      </Menu>\n    </Box>\n  );\n};\n\nexport default HeaderDropdownComponent;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"HeaderDropdownComponent.esm.js","sources":["../../../src/components/HeaderDropdownComponent/HeaderDropdownComponent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Menu from '@mui/material/Menu';\nimport Button from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport { MenuItemConfig, MenuSectionConfig } from './MenuSection';\n\ninterface HeaderDropdownProps {\n  buttonContent: React.ReactNode;\n  children: React.ReactNode;\n  menuSections?: MenuSectionConfig[];\n  menuBottomItems?: MenuItemConfig[];\n  buttonProps?: React.ComponentProps<typeof Button>;\n  buttonClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nconst Listbox = styled('ul')(\n  ({ theme }) => `\n  font-size: 0.875rem;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  min-width: 160px;\n  border-radius: 3px;\n  text-decoration: none;\n  list-style: none;\n  overflow: auto;\n  outline: 1;\n  background: ${\n    theme.palette.mode === 'dark' ? theme.palette.background.default : '#fff'\n  };\n  border: 1px solid ${\n    theme.palette.mode === 'dark'\n      ? theme.palette.divider\n      : theme.palette.background.default\n  };\n  color: ${\n    theme.palette.mode === 'dark'\n      ? theme.palette.text.disabled\n      : theme.palette.text.primary\n  };\n  box-shadow: 0 4px 6px ${\n    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'\n  };\n  z-index: 1;\n  `,\n);\n\nconst HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({\n  buttonContent,\n  children,\n  buttonProps,\n  buttonClick,\n  anchorEl,\n  setAnchorEl,\n}) => {\n  return (\n    <Box>\n      <Button\n        disableRipple\n        disableTouchRipple\n        {...buttonProps}\n        onClick={buttonClick}\n      >\n        {buttonContent}\n      </Button>\n      <Menu\n        id=\"menu-appbar\"\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'center',\n        }}\n        sx={{\n          '& ul[class*=\"MuiMenu-list\"]': {\n            py: 0,\n          },\n        }}\n      >\n        <Listbox role=\"menu\">{children}</Listbox>\n      </Menu>\n    </Box>\n  );\n};\n\nexport default HeaderDropdownComponent;\n"],"names":[],"mappings":";;;;;;AAkCA,MAAM,OAAA,GAAU,OAAO,IAAI,CAAA;AAAA,EACzB,CAAC,EAAE,KAAA,EAAY,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAYb,EAAA,KAAA,CAAM,QAAQ,IAAS,KAAA,MAAA,GAAS,MAAM,OAAQ,CAAA,UAAA,CAAW,UAAU,MACrE,CAAA;AAAA,oBAEE,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,MACnB,GAAA,KAAA,CAAM,QAAQ,OACd,GAAA,KAAA,CAAM,OAAQ,CAAA,UAAA,CAAW,OAC/B,CAAA;AAAA,SAEE,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,MACnB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,QACnB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,OACzB,CAAA;AAAA,wBAAA,EAEE,KAAM,CAAA,OAAA,CAAQ,IAAS,KAAA,MAAA,GAAS,sBAAsB,mBACxD,CAAA;AAAA;AAAA,EAAA;AAGF,CAAA;AAEA,MAAM,0BAAyD,CAAC;AAAA,EAC9D,aAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,2CACG,GACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MACjB,GAAG,WAAA;AAAA,MACJ,OAAS,EAAA;AAAA,KAAA;AAAA,IAER;AAAA,GAEH,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,aAAA;AAAA,MACH,QAAA;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACX,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA;AAAA,MAC/B,YAAc,EAAA;AAAA,QACZ,QAAU,EAAA,QAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,QAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,EAAI,EAAA;AAAA,QACF,6BAA+B,EAAA;AAAA,UAC7B,EAAI,EAAA;AAAA;AACN;AACF,KAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAK,EAAA,MAAA,EAAA,EAAQ,QAAS;AAAA,GAEnC,CAAA;AAEJ;;;;"}

package/dist/components/HeaderDropdownComponent/MenuSection.esm.js

@@ -4,17 +4,15 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import MenuItem from '@mui/material/MenuItem';
 import { Link } from '@backstage/core-components';
-import MenuItemContent from './MenuItemContent.esm.js';
 
 const MenuSection = ({
-  sectionKey,
   sectionLabel,
   optionalLink,
   optionalLinkLabel,
   items,
   hideDivider = false,
   handleClose
-}) => /* @__PURE__ */ React.createElement(Box, null, sectionLabel && sectionKey && /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React.createElement(Box, null, sectionLabel && /* @__PURE__ */ React.createElement(
   Box,
   {
     sx: {
@@ -47,34 +45,25 @@ const MenuSection = ({
       optionalLinkLabel
     )
   )
-), /* @__PURE__ */ React.createElement("ul", { style: { padding: 0, listStyle: "none" } }, items.map(({ itemKey, icon: Icon, label, subLabel, link, onClick }) => /* @__PURE__ */ React.createElement(
+), /* @__PURE__ */ React.createElement("ul", { style: { padding: 0, listStyle: "none" } }, items.map(({ type, icon, label, subLabel, link, Component }, index) => /* @__PURE__ */ React.createElement(
   MenuItem,
   {
-    key: `menu-item-${itemKey}`,
+    key: `menu-item-${index.toString()}`,
     disableRipple: true,
     disableTouchRipple: true,
     onClick: handleClose,
     sx: { py: 0.5, "&:hover": { background: "transparent" } }
   },
-  link ? /* @__PURE__ */ React.createElement(
-    Link,
+  link && /* @__PURE__ */ React.createElement(
+    Component,
     {
+      icon,
       to: link,
-      style: {
-        color: "inherit",
-        textDecoration: "none",
-        width: "100%"
-      }
-    },
-    /* @__PURE__ */ React.createElement(MenuItemContent, { Icon, label, subLabel })
-  ) : /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      onClick,
-      sx: { cursor: "pointer", width: "100%", color: "inherit" }
-    },
-    /* @__PURE__ */ React.createElement(MenuItemContent, { Icon, label, subLabel })
-  )
+      title: label,
+      subTitle: subLabel
+    }
+  ),
+  type === "logout" && /* @__PURE__ */ React.createElement(Component, null)
 ))), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { margin: "8px 0" } }));
 
 export { MenuSection as default };

package/dist/components/HeaderDropdownComponent/MenuSection.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { SvgIconProps } from '@mui/material/SvgIcon';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport MenuItemContent from './MenuItemContent';\n\nexport interface MenuItemBase {\n  itemKey: string;\n  icon?: React.ElementType<SvgIconProps>;\n  label: string;\n  subLabel?: string;\n}\n\nexport interface MenuItemLink extends MenuItemBase {\n  link: string;\n  onClick?: never;\n}\n\nexport interface MenuItemAction extends MenuItemBase {\n  onClick: () => void;\n  link?: never;\n}\n\nexport type MenuItemConfig = MenuItemLink | MenuItemAction;\n\nexport interface MenuSectionConfig {\n  sectionKey: string;\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nconst MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionKey,\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && sectionKey && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography variant=\"body2\" sx={{ pl: 2, color: 'text.disabled' }}>\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ itemKey, icon: Icon, label, subLabel, link, onClick }) => (\n        <MenuItem\n          key={`menu-item-${itemKey}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          {link ? (\n            <Link\n              to={link}\n              style={{\n                color: 'inherit',\n                textDecoration: 'none',\n                width: '100%',\n              }}\n            >\n              <MenuItemContent Icon={Icon} label={label} subLabel={subLabel} />\n            </Link>\n          ) : (\n            <Box\n              onClick={onClick}\n              sx={{ cursor: 'pointer', width: '100%', color: 'inherit' }}\n            >\n              <MenuItemContent Icon={Icon} label={label} subLabel={subLabel} />\n            </Box>\n          )}\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ margin: '8px 0' }} />}\n  </Box>\n);\n\nexport default MenuSection;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { HeaderLinkProps } from '../HeaderLinkComponent/HeaderLink';\n\n/**\n * Menu item configuration\n *\n * @public\n */\nexport interface MenuItemConfig {\n  Component: React.ComponentType<HeaderLinkProps | {}>;\n  type: string;\n  label: string;\n  icon?: string;\n  subLabel?: string;\n  link?: string;\n}\n\nexport interface MenuSectionConfig {\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nconst MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography variant=\"body2\" sx={{ pl: 2, color: 'text.disabled' }}>\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ type, icon, label, subLabel, link, Component }, index) => (\n        <MenuItem\n          key={`menu-item-${index.toString()}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          {link && (\n            <Component\n              icon={icon}\n              to={link}\n              title={label}\n              subTitle={subLabel}\n            />\n          )}\n          {type === 'logout' && <Component />}\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ margin: '8px 0' }} />}\n  </Box>\n);\n\nexport default MenuSection;\n"],"names":[],"mappings":";;;;;;;AA+CA,MAAM,cAA2C,CAAC;AAAA,EAChD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,CACE,qBAAA,KAAA,CAAA,aAAA,CAAC,WACE,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,EAAI,EAAA;AAAA,MACF,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA,QAAA;AAAA,MACZ,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA,QAAA;AAAA,MACJ,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA;AACzC,GAAA;AAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,eAAgB,EAAA,EAAA,EAC7D,YACH,CAAA;AAAA,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA,OACzC;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,gBAAgB,iBACf,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,YAAA;AAAA,QACJ,SAAU,EAAA,MAAA;AAAA,QACV,KAAA,EAAO,EAAE,QAAA,EAAU,SAAU;AAAA,OAAA;AAAA,MAE5B;AAAA;AACH;AAGN,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAG,KAAO,EAAA,EAAE,SAAS,CAAG,EAAA,SAAA,EAAW,QACjC,EAAA,EAAA,KAAA,CAAM,IAAI,CAAC,EAAE,MAAM,IAAM,EAAA,KAAA,EAAO,UAAU,IAAM,EAAA,SAAA,IAAa,KAC5D,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAK,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,IAClC,aAAa,EAAA,IAAA;AAAA,IACb,kBAAkB,EAAA,IAAA;AAAA,IAClB,OAAS,EAAA,WAAA;AAAA,IACT,EAAA,EAAI,EAAE,EAAI,EAAA,GAAA,EAAK,WAAW,EAAE,UAAA,EAAY,eAAgB;AAAA,GAAA;AAAA,EAEvD,IACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,EAAI,EAAA,IAAA;AAAA,MACJ,KAAO,EAAA,KAAA;AAAA,MACP,QAAU,EAAA;AAAA;AAAA,GACZ;AAAA,EAED,IAAA,KAAS,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,IAAA;AACnC,CACD,CACH,CACC,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,MAAA,EAAQ,OAAQ,EAAA,EAAG,CACrD;;;;"}

package/dist/components/HeaderDropdownComponent/ProfileDropdown.esm.js

@@ -1,54 +1,42 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import HeaderDropdownComponent from './HeaderDropdownComponent.esm.js';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
-import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';
-import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import Typography from '@mui/material/Typography';
-import SmallIconWrapper from '../HeaderIconButton/SmallIconWrapper.esm.js';
-import { useApi, errorApiRef, identityApiRef } from '@backstage/core-plugin-api';
+import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+import { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints.esm.js';
+import { ComponentType } from '../../types.esm.js';
+import MenuSection from './MenuSection.esm.js';
 
 const ProfileDropdown = ({
   handleMenu,
   anchorEl,
   setAnchorEl
 }) => {
-  const errorApi = useApi(errorApiRef);
   const identityApi = useApi(identityApiRef);
-  const user = "Guest User";
-  const handleLogout = () => {
-    identityApi.signOut().catch((error) => errorApi.post(error));
-  };
-  const menuSections = [
-    {
-      sectionKey: "profile",
-      items: [
-        {
-          itemKey: "settings",
-          icon: ManageAccountsOutlinedIcon,
-          label: "Settings",
-          link: "/settings"
-        },
-        {
-          itemKey: "logout",
-          icon: LogoutOutlinedIcon,
-          label: "Log out",
-          onClick: handleLogout
-        }
-      ],
-      handleClose: () => setAnchorEl(null)
-    }
-  ];
+  const [user, setUser] = useState();
+  const profileDropdownMountPoints = useProfileDropdownMountPoints();
+  useEffect(() => {
+    const fetchUser = async () => {
+      const userProfile = await identityApi.getProfileInfo();
+      setUser(userProfile);
+    };
+    fetchUser();
+  }, [identityApi]);
+  const menuItems = useMemo(() => {
+    return (profileDropdownMountPoints ?? []).map((mp) => ({
+      Component: mp.Component,
+      type: mp.config?.type ?? ComponentType.LINK,
+      icon: mp.config?.props?.icon ?? "",
+      label: mp.config?.props?.title ?? "",
+      link: mp.config?.props?.link ?? "",
+      priority: mp.config?.priority ?? 0
+    })).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [profileDropdownMountPoints]);
   return /* @__PURE__ */ React.createElement(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        SmallIconWrapper,
-        {
-          IconComponent: AccountCircleOutlinedIcon,
-          sx: { mx: 1 }
-        }
-      ), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { fontWeight: 500, mx: 1 } }, user), /* @__PURE__ */ React.createElement(
+      buttonContent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mx: 1 } }), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { fontWeight: 500, mx: 1 } }, user?.displayName ?? "Guest"), /* @__PURE__ */ React.createElement(
         KeyboardArrowDownOutlinedIcon,
         {
           sx: {
@@ -58,21 +46,27 @@ const ProfileDropdown = ({
           }
         }
       )),
-      menuSections,
       buttonProps: {
         color: "inherit",
         sx: {
           display: "flex",
-          alignItems: "center",
-          ml: 1
+          alignItems: "center"
         }
       },
       buttonClick: handleMenu,
       anchorEl,
       setAnchorEl
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      MenuSection,
+      {
+        hideDivider: true,
+        items: menuItems,
+        handleClose: () => setAnchorEl(null)
+      }
+    )
   );
 };
 
-export { ProfileDropdown as default };
+export { ProfileDropdown, ProfileDropdown as default };
 //# sourceMappingURL=ProfileDropdown.esm.js.map

package/dist/components/HeaderDropdownComponent/ProfileDropdown.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport HeaderDropdownComponent from './HeaderDropdownComponent';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';\nimport LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport SmallIconWrapper from '../HeaderIconButton/SmallIconWrapper';\nimport {\n  identityApiRef,\n  errorApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n\ninterface ProfileDropdownProps {\n  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nconst ProfileDropdown: React.FC<ProfileDropdownProps> = ({\n  handleMenu,\n  anchorEl,\n  setAnchorEl,\n}) => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n  const user = 'Guest User';\n\n  const handleLogout = () => {\n    identityApi.signOut().catch(error => errorApi.post(error));\n  };\n  const menuSections = [\n    {\n      sectionKey: 'profile',\n      items: [\n        {\n          itemKey: 'settings',\n          icon: ManageAccountsOutlinedIcon,\n          label: 'Settings',\n          link: '/settings',\n        },\n        {\n          itemKey: 'logout',\n          icon: LogoutOutlinedIcon,\n          label: 'Log out',\n          onClick: handleLogout,\n        },\n      ],\n      handleClose: () => setAnchorEl(null),\n    },\n  ];\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          <SmallIconWrapper\n            IconComponent={AccountCircleOutlinedIcon}\n            sx={{ mx: 1 }}\n          />\n          <Typography variant=\"body2\" sx={{ fontWeight: 500, mx: 1 }}>\n            {user ?? 'Guest User'}\n          </Typography>\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              marginLeft: '1rem',\n              bgcolor: '#383838',\n              borderRadius: '25%',\n            }}\n          />\n        </>\n      }\n      menuSections={menuSections}\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n          ml: 1,\n        },\n      }}\n      buttonClick={handleMenu}\n      anchorEl={anchorEl}\n      setAnchorEl={setAnchorEl}\n    />\n  );\n};\n\nexport default ProfileDropdown;\n"],"names":[],"mappings":";;;;;;;;;;AAoCA,MAAM,kBAAkD,CAAC;AAAA,EACvD,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,IAAO,GAAA,YAAA;AAEb,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,WAAS,QAAS,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,GAC3D;AACA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,UAAY,EAAA,SAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL;AAAA,UACE,OAAS,EAAA,UAAA;AAAA,UACT,IAAM,EAAA,0BAAA;AAAA,UACN,KAAO,EAAA,UAAA;AAAA,UACP,IAAM,EAAA;AAAA,SACR;AAAA,QACA;AAAA,UACE,OAAS,EAAA,QAAA;AAAA,UACT,IAAM,EAAA,kBAAA;AAAA,UACN,KAAO,EAAA,SAAA;AAAA,UACP,OAAS,EAAA;AAAA;AACX,OACF;AAAA,MACA,WAAA,EAAa,MAAM,WAAA,CAAY,IAAI;AAAA;AACrC,GACF;AACA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,+BAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,aAAe,EAAA,yBAAA;AAAA,UACf,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE;AAAA;AAAA,OAEd,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,EAAI,EAAA,EAAE,UAAY,EAAA,GAAA,EAAK,EAAI,EAAA,CAAA,EACpD,EAAA,EAAA,IACH,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,6BAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,UAAY,EAAA,MAAA;AAAA,YACZ,OAAS,EAAA,SAAA;AAAA,YACT,YAAc,EAAA;AAAA;AAChB;AAAA,OAEJ,CAAA;AAAA,MAEF,YAAA;AAAA,MACA,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,EAAI,EAAA;AAAA;AACN,OACF;AAAA,MACA,WAAa,EAAA,UAAA;AAAA,MACb,QAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useEffect, useMemo, useState } from 'react';\nimport HeaderDropdownComponent from './HeaderDropdownComponent';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport {\n  identityApiRef,\n  useApi,\n  ProfileInfo,\n} from '@backstage/core-plugin-api';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { ComponentType } from '../../types';\nimport MenuSection from './MenuSection';\n\n/**\n * @public\n * ProfileDropdown component properties\n */\nexport interface ProfileDropdownProps {\n  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nexport const ProfileDropdown = ({\n  handleMenu,\n  anchorEl,\n  setAnchorEl,\n}: ProfileDropdownProps) => {\n  const identityApi = useApi(identityApiRef);\n  const [user, setUser] = useState<ProfileInfo>();\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      const userProfile = await identityApi.getProfileInfo();\n      setUser(userProfile);\n    };\n\n    fetchUser();\n  }, [identityApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        type: mp.config?.type ?? ComponentType.LINK,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mx: 1 }} />\n          <Typography variant=\"body2\" sx={{ fontWeight: 500, mx: 1 }}>\n            {user?.displayName ?? 'Guest'}\n          </Typography>\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              marginLeft: '1rem',\n              bgcolor: '#383838',\n              borderRadius: '25%',\n            }}\n          />\n        </>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      buttonClick={handleMenu}\n      anchorEl={anchorEl}\n      setAnchorEl={setAnchorEl}\n    >\n      <MenuSection\n        hideDivider\n        items={menuItems}\n        handleClose={() => setAnchorEl(null)}\n      />\n    </HeaderDropdownComponent>\n  );\n};\n\nexport default ProfileDropdown;\n"],"names":[],"mappings":";;;;;;;;;;AAwCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAsB,EAAA;AAC9C,EAAA,MAAM,6BAA6B,6BAA8B,EAAA;AAEjE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAY,YAAY;AAC5B,MAAM,MAAA,WAAA,GAAc,MAAM,WAAA,CAAY,cAAe,EAAA;AACrD,MAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,KACrB;AAEA,IAAU,SAAA,EAAA;AAAA,GACZ,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM;AAC9B,IAAA,OAAA,CAAQ,0BAA8B,IAAA,EACnC,EAAA,GAAA,CAAI,CAAO,EAAA,MAAA;AAAA,MACV,WAAW,EAAG,CAAA,SAAA;AAAA,MACd,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,IAAA,IAAQ,aAAc,CAAA,IAAA;AAAA,MACvC,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,KAAO,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,KAAS,IAAA,EAAA;AAAA,MAClC,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,QAAA,EAAU,EAAG,CAAA,MAAA,EAAQ,QAAY,IAAA;AAAA,KACnC,CAAE,CACD,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAAA,GACzD,EAAG,CAAC,0BAA0B,CAAC,CAAA;AAE/B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA,kBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,yBAA0B,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CAC3D,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,EAAI,EAAA,EAAE,UAAY,EAAA,GAAA,EAAK,EAAI,EAAA,CAAA,EACpD,EAAA,EAAA,IAAA,EAAM,WAAe,IAAA,OACxB,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,6BAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,UAAY,EAAA,MAAA;AAAA,YACZ,OAAS,EAAA,SAAA;AAAA,YACT,YAAc,EAAA;AAAA;AAChB;AAAA,OAEJ,CAAA;AAAA,MAEF,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA;AAAA;AACd,OACF;AAAA,MACA,WAAa,EAAA,UAAA;AAAA,MACb,QAAA;AAAA,MACA;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,EAAA,IAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,WAAA,EAAa,MAAM,WAAA,CAAY,IAAI;AAAA;AAAA;AACrC,GACF;AAEJ;;;;"}

package/dist/components/HeaderDropdownComponent/RegisterAComponentSection.esm.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import MenuSection from './MenuSection.esm.js';
+import { HeaderLink } from '../HeaderLinkComponent/HeaderLink.esm.js';
+import { ComponentType } from '../../types.esm.js';
+
+const RegisterAComponentSection = ({
+  hideDivider,
+  handleClose
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    MenuSection,
+    {
+      hideDivider,
+      items: [
+        {
+          type: ComponentType.LINK,
+          label: "Register a component",
+          link: "/catalog-import",
+          icon: "category",
+          Component: HeaderLink
+        }
+      ],
+      handleClose
+    }
+  );
+};
+
+export { RegisterAComponentSection };
+//# sourceMappingURL=RegisterAComponentSection.esm.js.map

package/dist/components/HeaderDropdownComponent/RegisterAComponentSection.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegisterAComponentSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/RegisterAComponentSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport MenuSection from './MenuSection';\nimport { HeaderLink } from '../HeaderLinkComponent/HeaderLink';\nimport { ComponentType } from '../../types';\n\n/**\n * Register A Component Section properties\n *\n * @public\n */\nexport type RegisterAComponentSectionProps = {\n  hideDivider: boolean;\n  handleClose: () => void;\n};\n\nexport const RegisterAComponentSection = ({\n  hideDivider,\n  handleClose,\n}: RegisterAComponentSectionProps) => {\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      items={[\n        {\n          type: ComponentType.LINK,\n          label: 'Register a component',\n          link: '/catalog-import',\n          icon: 'category',\n          Component: HeaderLink as React.ComponentType,\n        },\n      ]}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA+BO,MAAM,4BAA4B,CAAC;AAAA,EACxC,WAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL;AAAA,UACE,MAAM,aAAc,CAAA,IAAA;AAAA,UACpB,KAAO,EAAA,sBAAA;AAAA,UACP,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA;AAAA;AACb,OACF;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/HeaderDropdownComponent/SoftwareTemplatesSection.esm.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import MenuSection from './MenuSection.esm.js';
+
+const SoftwareTemplatesSection = ({
+  items,
+  handleClose,
+  hideDivider
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    MenuSection,
+    {
+      hideDivider,
+      sectionLabel: "Use a template",
+      optionalLink: "/create",
+      optionalLinkLabel: "All templates",
+      items,
+      handleClose
+    }
+  );
+};
+
+export { SoftwareTemplatesSection };
+//# sourceMappingURL=SoftwareTemplatesSection.esm.js.map

package/dist/components/HeaderDropdownComponent/SoftwareTemplatesSection.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SoftwareTemplatesSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/SoftwareTemplatesSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport MenuSection, { MenuItemConfig } from './MenuSection';\n\n/**\n * Software Templates Section properties\n *\n * @public\n */\nexport type SoftwareTemplatesSectionProps = {\n  items: MenuItemConfig[];\n  handleClose: () => void;\n  hideDivider?: boolean;\n};\n\nexport const SoftwareTemplatesSection = ({\n  items,\n  handleClose,\n  hideDivider,\n}: SoftwareTemplatesSectionProps) => {\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      sectionLabel=\"Use a template\"\n      optionalLink=\"/create\"\n      optionalLinkLabel=\"All templates\"\n      items={items}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AA8BO,MAAM,2BAA2B,CAAC;AAAA,EACvC,KAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,YAAa,EAAA,gBAAA;AAAA,MACb,YAAa,EAAA,SAAA;AAAA,MACb,iBAAkB,EAAA,eAAA;AAAA,MAClB,KAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/HeaderIconButtonComponent/HeaderIcon.esm.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useApp } from '@backstage/core-plugin-api';
+import MuiIcon from '@mui/material/Icon';
+import Box from '@mui/material/Box';
+
+const HeaderIcon = ({ icon, styles }) => {
+  const app = useApp();
+  if (!icon) {
+    return null;
+  }
+  const SystemIcon = app.getSystemIcon(icon);
+  if (SystemIcon) {
+    return /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...styles } }, /* @__PURE__ */ React.createElement(SystemIcon, { fontSize: "small" }));
+  }
+  if (icon.startsWith("<svg")) {
+    const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;
+    return /* @__PURE__ */ React.createElement(MuiIcon, { style: { fontSize: 20, ...styles } }, /* @__PURE__ */ React.createElement("img", { src: svgDataUri, alt: "" }));
+  }
+  if (icon.startsWith("https://") || icon.startsWith("http://") || icon.startsWith("/")) {
+    return /* @__PURE__ */ React.createElement(
+      MuiIcon,
+      {
+        style: { fontSize: 20, ...styles },
+        baseClassName: "material-icons-outlined"
+      },
+      /* @__PURE__ */ React.createElement("img", { src: icon, alt: "" })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(MuiIcon, { style: { fontSize: 20 }, baseClassName: "material-icons-outlined" }, icon);
+};
+
+export { HeaderIcon };
+//# sourceMappingURL=HeaderIcon.esm.js.map

package/dist/components/HeaderIconButtonComponent/HeaderIcon.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIcon.esm.js","sources":["../../../src/components/HeaderIconButtonComponent/HeaderIcon.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useApp } from '@backstage/core-plugin-api';\nimport MuiIcon from '@mui/material/Icon';\nimport Box from '@mui/material/Box';\n\ninterface HeaderIconProps {\n  icon: string;\n  styles?: React.CSSProperties;\n}\n\nexport const HeaderIcon = ({ icon, styles }: HeaderIconProps) => {\n  const app = useApp();\n  if (!icon) {\n    return null;\n  }\n\n  const SystemIcon = app.getSystemIcon(icon);\n\n  if (SystemIcon) {\n    return (\n      <Box sx={{ display: 'flex', alignItems: 'center', ...styles }}>\n        <SystemIcon fontSize=\"small\" />\n      </Box>\n    );\n  }\n\n  if (icon.startsWith('<svg')) {\n    const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;\n    return (\n      <MuiIcon style={{ fontSize: 20, ...styles }}>\n        <img src={svgDataUri} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  if (\n    icon.startsWith('https://') ||\n    icon.startsWith('http://') ||\n    icon.startsWith('/')\n  ) {\n    return (\n      <MuiIcon\n        style={{ fontSize: 20, ...styles }}\n        baseClassName=\"material-icons-outlined\"\n      >\n        <img src={icon} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  return (\n    <MuiIcon style={{ fontSize: 20 }} baseClassName=\"material-icons-outlined\">\n      {icon}\n    </MuiIcon>\n  );\n};\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,UAAa,GAAA,CAAC,EAAE,IAAA,EAAM,QAA8B,KAAA;AAC/D,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,UAAA,GAAa,GAAI,CAAA,aAAA,CAAc,IAAI,CAAA;AAEzC,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,QACnD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAS,SAAQ,CAC/B,CAAA;AAAA;AAIJ,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,MAAM,CAAG,EAAA;AAC3B,IAAA,MAAM,UAAa,GAAA,CAAA,0BAAA,EAA6B,IAAK,CAAA,IAAI,CAAC,CAAA,CAAA;AAC1D,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,EAAE,UAAU,EAAI,EAAA,GAAG,MAAO,EAAA,EAAA,sCACvC,KAAI,EAAA,EAAA,GAAA,EAAK,UAAY,EAAA,GAAA,EAAI,IAAG,CAC/B,CAAA;AAAA;AAIJ,EACE,IAAA,IAAA,CAAK,UAAW,CAAA,UAAU,CAC1B,IAAA,IAAA,CAAK,UAAW,CAAA,SAAS,CACzB,IAAA,IAAA,CAAK,UAAW,CAAA,GAAG,CACnB,EAAA;AACA,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,EAAE,QAAU,EAAA,EAAA,EAAI,GAAG,MAAO,EAAA;AAAA,QACjC,aAAc,EAAA;AAAA,OAAA;AAAA,sBAEb,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,IAAA,EAAM,KAAI,EAAG,EAAA;AAAA,KACzB;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,EAAE,UAAU,EAAG,EAAA,EAAG,aAAc,EAAA,yBAAA,EAAA,EAC7C,IACH,CAAA;AAEJ;;;;"}

package/dist/components/HeaderIconButtonComponent/HeaderIconButton.esm.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { HeaderIcon } from './HeaderIcon.esm.js';
+import { Link } from 'react-router-dom';
+
+const HeaderIconButton = ({
+  icon,
+  tooltip,
+  to
+}) => {
+  return /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip ?? icon }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      color: "inherit",
+      "aria-label": "help",
+      sx: { mr: 1.5 },
+      ...to ? { component: Link, to } : {}
+    },
+    tooltip !== "Support" && /* @__PURE__ */ React.createElement(HeaderIcon, { icon })
+  ));
+};
+
+export { HeaderIconButton };
+//# sourceMappingURL=HeaderIconButton.esm.js.map

package/dist/components/HeaderIconButtonComponent/HeaderIconButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconButton.esm.js","sources":["../../../src/components/HeaderIconButtonComponent/HeaderIconButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport { HeaderIcon } from './HeaderIcon';\nimport { Link } from 'react-router-dom';\n\n/**\n * Header Icon Button properties\n * @public\n */\nexport interface HeaderIconButtonProps {\n  icon: string;\n  to?: string;\n  tooltip?: string;\n}\n\nexport const HeaderIconButton = ({\n  icon,\n  tooltip,\n  to,\n}: HeaderIconButtonProps) => {\n  return (\n    <Tooltip title={tooltip ?? icon}>\n      <IconButton\n        color=\"inherit\"\n        aria-label=\"help\"\n        sx={{ mr: 1.5 }}\n        {...(to ? { component: Link, to } : {})}\n      >\n        {tooltip !== 'Support' && <HeaderIcon icon={icon} />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgCO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,OAAA,IAAW,IACzB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,YAAW,EAAA,MAAA;AAAA,MACX,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA;AAAA,MACb,GAAI,EAAK,GAAA,EAAE,WAAW,IAAM,EAAA,EAAA,KAAO;AAAC,KAAA;AAAA,IAEpC,OAAY,KAAA,SAAA,oBAAc,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,IAAY,EAAA;AAAA,GAEtD,CAAA;AAEJ;;;;"}

package/dist/components/HeaderLinkComponent/HeaderItemContent.esm.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { HeaderIcon } from '../HeaderIconButtonComponent/HeaderIcon.esm.js';
+
+const HeaderItemContent = ({
+  icon,
+  label,
+  subLabel
+}) => /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", margin: "8px 0" } }, icon && /* @__PURE__ */ React.createElement(
+  HeaderIcon,
+  {
+    icon,
+    styles: label ? { marginRight: "0.5rem", flexShrink: 0 } : {}
+  }
+), /* @__PURE__ */ React.createElement(Box, null, label && /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, label), subLabel && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "text.secondary" }, subLabel)));
+
+export { HeaderItemContent as default };
+//# sourceMappingURL=HeaderItemContent.esm.js.map

package/dist/components/HeaderLinkComponent/HeaderItemContent.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderItemContent.esm.js","sources":["../../../src/components/HeaderLinkComponent/HeaderItemContent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport { HeaderIcon } from '../HeaderIconButtonComponent/HeaderIcon';\n\ninterface HeaderItemContentProps {\n  icon?: string;\n  label?: string;\n  subLabel?: string;\n  // styles?: React.CSSProperties; // Allow styles to be passed in\n}\n\nconst HeaderItemContent: React.FC<HeaderItemContentProps> = ({\n  icon,\n  label,\n  subLabel,\n}) => (\n  <Box sx={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>\n    {icon && (\n      <HeaderIcon\n        icon={icon}\n        styles={label ? { marginRight: '0.5rem', flexShrink: 0 } : {}}\n      />\n    )}\n    <Box>\n      {label && <Typography variant=\"body2\">{label}</Typography>}\n      {subLabel && (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {subLabel}\n        </Typography>\n      )}\n    </Box>\n  </Box>\n);\n\nexport default HeaderItemContent;\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,oBAAsD,CAAC;AAAA,EAC3D,IAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CACE,qBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,MAAA,EAAQ,OAAQ,EAAA,EAAA,EAC/D,IACC,oBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,UAAA;AAAA,EAAA;AAAA,IACC,IAAA;AAAA,IACA,MAAA,EAAQ,QAAQ,EAAE,WAAA,EAAa,UAAU,UAAY,EAAA,CAAA,KAAM;AAAC;AAC9D,CAAA,sCAED,GACE,EAAA,IAAA,EAAA,KAAA,wCAAU,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAS,KAAM,CAAA,EAC5C,QACC,oBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,SAAA,EAAU,OAAM,gBACjC,EAAA,EAAA,QACH,CAEJ,CACF;;;;"}

package/dist/components/HeaderLinkComponent/HeaderLink.esm.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import { Link } from 'react-router-dom';
+import HeaderItemContent from './HeaderItemContent.esm.js';
+
+const HeaderLink = ({
+  to,
+  title,
+  subTitle,
+  icon,
+  tooltip
+}) => {
+  const headerLinkContent = () => /* @__PURE__ */ React.createElement(
+    Link,
+    {
+      to,
+      style: {
+        color: "inherit",
+        textDecoration: "none",
+        width: "100%"
+      }
+    },
+    /* @__PURE__ */ React.createElement(HeaderItemContent, { icon, label: title, subLabel: subTitle })
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, tooltip && /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, headerLinkContent()), !tooltip && headerLinkContent());
+};
+
+export { HeaderLink };
+//# sourceMappingURL=HeaderLink.esm.js.map

package/dist/components/HeaderLinkComponent/HeaderLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderLink.esm.js","sources":["../../../src/components/HeaderLinkComponent/HeaderLink.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Tooltip from '@mui/material/Tooltip';\nimport { Link } from 'react-router-dom';\nimport HeaderItemContent from './HeaderItemContent';\n\n/**\n * Header Icon Button properties\n * @public\n */\nexport interface HeaderLinkProps {\n  to: string;\n  title?: string;\n  subTitle?: string;\n  icon?: string;\n  tooltip?: string;\n}\n\nexport const HeaderLink = ({\n  to,\n  title,\n  subTitle,\n  icon,\n  tooltip,\n}: HeaderLinkProps) => {\n  const headerLinkContent = () => (\n    <Link\n      to={to}\n      style={{\n        color: 'inherit',\n        textDecoration: 'none',\n        width: '100%',\n      }}\n    >\n      <HeaderItemContent icon={icon} label={title} subLabel={subTitle} />\n    </Link>\n  );\n  return (\n    <>\n      {tooltip && <Tooltip title={tooltip}>{headerLinkContent()}</Tooltip>}\n      {!tooltip && headerLinkContent()}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCO,MAAM,aAAa,CAAC;AAAA,EACzB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,oBAAoB,sBACxB,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,SAAA;AAAA,QACP,cAAgB,EAAA,MAAA;AAAA,QAChB,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,wCAEC,iBAAkB,EAAA,EAAA,IAAA,EAAY,KAAO,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA;AAAA,GACnE;AAEF,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,OAAA,oBAAY,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,OAAA,EAAA,EAAU,iBAAkB,EAAE,CACzD,EAAA,CAAC,OAAW,IAAA,iBAAA,EACf,CAAA;AAEJ;;;;"}

package/dist/components/NotificationBanner.esm.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Alert from '@mui/material/Alert';
+import { MarkdownContent } from '@backstage/core-components';
+
+const NotificationBanner = (props) => {
+  const [dismissed, setDismissed] = React.useState(() => {
+    if (props.dismiss === "localstorage") {
+      try {
+        const dismissedString = localStorage.getItem("global-header/NotificationBanner") ?? "{}";
+        const dismissedObject = JSON.parse(dismissedString);
+        return dismissedObject[props.id ?? props.title] === "dismissed";
+      } catch (error) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  });
+  const onClose = React.useMemo(() => {
+    if (!props.dismiss || props.dismiss === "none") {
+      return void 0;
+    } else if (props.dismiss === "session") {
+      return () => setDismissed(true);
+    } else if (props.dismiss === "localstorage") {
+      return () => {
+        try {
+          const dismissedString = localStorage.getItem("global-header/NotificationBanner") ?? "{}";
+          const dismissedObject = JSON.parse(dismissedString);
+          dismissedObject[props.id ?? props.title] = "dismissed";
+          localStorage.setItem(
+            "global-header/NotificationBanner",
+            JSON.stringify(dismissedObject)
+          );
+        } catch (error) {
+        }
+        setDismissed(true);
+      };
+    }
+    console.warn(
+      `Unsupported dismiss option "${props.dismiss}", currently supported "none", "session" or "localstorage"!`
+    );
+    return void 0;
+  }, [props.id, props.title, props.dismiss]);
+  if (dismissed || !props.title) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      icon: false,
+      onClose,
+      sx: {
+        color: props.textColor ?? "text.primary",
+        backgroundColor: props.backgroundColor ?? "background.paper",
+        border: props.border,
+        borderRadius: props.borderRadius,
+        justifyContent: "center",
+        textAlign: "center"
+      }
+    },
+    props.markdown ? /* @__PURE__ */ React.createElement(MarkdownContent, { content: props.title, dialect: "gfm" }) : props.title
+  );
+};
+
+export { NotificationBanner };
+//# sourceMappingURL=NotificationBanner.esm.js.map

package/dist/components/NotificationBanner.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBanner.esm.js","sources":["../../src/components/NotificationBanner.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Alert from '@mui/material/Alert';\nimport { MarkdownContent } from '@backstage/core-components';\n\n// export type NotificationBannerColor = 'success' | 'info' | 'warning' | 'error';\n// export type NotificationBannerIcon = 'success' | 'info' | 'warning' | 'error';\n// export type NotificationBannerVariant = 'standard' | 'filled' | 'outlined';\n\n/**\n * @public\n */\nexport type NotificationBannerDismiss = 'none' | 'session' | 'localstorage';\n\n/**\n * @public\n */\nexport interface NotificationBannerProps {\n  id?: string;\n  title: string;\n  markdown?: boolean;\n\n  textColor?: string;\n  backgroundColor?: string;\n  border?: string;\n  borderRadius?: string;\n\n  // color?: NotificationBannerColor;\n  // icon?: NotificationBannerIcon;\n  // variant?: NotificationBannerVariant;\n\n  dismiss?: NotificationBannerDismiss;\n}\n\nexport const NotificationBanner = (props: NotificationBannerProps) => {\n  const [dismissed, setDismissed] = React.useState<boolean>(() => {\n    if (props.dismiss === 'localstorage') {\n      try {\n        const dismissedString =\n          localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n        const dismissedObject = JSON.parse(dismissedString);\n        return dismissedObject[props.id ?? props.title] === 'dismissed';\n      } catch (error) {\n        // nothing\n        return false;\n      }\n    } else {\n      return false;\n    }\n  });\n\n  const onClose = React.useMemo<(() => void) | undefined>(() => {\n    if (!props.dismiss || props.dismiss === 'none') {\n      return undefined;\n    } else if (props.dismiss === 'session') {\n      return () => setDismissed(true);\n    } else if (props.dismiss === 'localstorage') {\n      return () => {\n        try {\n          const dismissedString =\n            localStorage.getItem('global-header/NotificationBanner') ?? '{}';\n          const dismissedObject = JSON.parse(dismissedString);\n          dismissedObject[props.id ?? props.title] = 'dismissed';\n          localStorage.setItem(\n            'global-header/NotificationBanner',\n            JSON.stringify(dismissedObject),\n          );\n        } catch (error) {\n          // nothing\n        }\n        setDismissed(true);\n      };\n    }\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Unsupported dismiss option \"${props.dismiss}\", currently supported \"none\", \"session\" or \"localstorage\"!`,\n    );\n    return undefined;\n  }, [props.id, props.title, props.dismiss]);\n\n  if (dismissed || !props.title) {\n    return null;\n  }\n\n  return (\n    <Alert\n      // color={props.color}\n      // severity={props.icon}\n      icon={false}\n      // variant={props.variant}\n      onClose={onClose}\n      sx={{\n        color: props.textColor ?? 'text.primary',\n        backgroundColor: props.backgroundColor ?? 'background.paper',\n        border: props.border,\n        borderRadius: props.borderRadius,\n        justifyContent: 'center',\n        textAlign: 'center',\n      }}\n    >\n      {props.markdown ? (\n        <MarkdownContent content={props.title} dialect=\"gfm\" />\n      ) : (\n        props.title\n      )}\n    </Alert>\n  );\n};\n"],"names":[],"mappings":";;;;AAiDa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAkB,MAAM;AAC9D,IAAI,IAAA,KAAA,CAAM,YAAY,cAAgB,EAAA;AACpC,MAAI,IAAA;AACF,QAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,QAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,QAAA,OAAO,eAAgB,CAAA,KAAA,CAAM,EAAM,IAAA,KAAA,CAAM,KAAK,CAAM,KAAA,WAAA;AAAA,eAC7C,KAAO,EAAA;AAEd,QAAO,OAAA,KAAA;AAAA;AACT,KACK,MAAA;AACL,MAAO,OAAA,KAAA;AAAA;AACT,GACD,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,KAAM,CAAA,OAAA,CAAkC,MAAM;AAC5D,IAAA,IAAI,CAAC,KAAA,CAAM,OAAW,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC9C,MAAO,OAAA,KAAA,CAAA;AAAA,KACT,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,SAAW,EAAA;AACtC,MAAO,OAAA,MAAM,aAAa,IAAI,CAAA;AAAA,KAChC,MAAA,IAAW,KAAM,CAAA,OAAA,KAAY,cAAgB,EAAA;AAC3C,MAAA,OAAO,MAAM;AACX,QAAI,IAAA;AACF,UAAA,MAAM,eACJ,GAAA,YAAA,CAAa,OAAQ,CAAA,kCAAkC,CAAK,IAAA,IAAA;AAC9D,UAAM,MAAA,eAAA,GAAkB,IAAK,CAAA,KAAA,CAAM,eAAe,CAAA;AAClD,UAAA,eAAA,CAAgB,KAAM,CAAA,EAAA,IAAM,KAAM,CAAA,KAAK,CAAI,GAAA,WAAA;AAC3C,UAAa,YAAA,CAAA,OAAA;AAAA,YACX,kCAAA;AAAA,YACA,IAAA,CAAK,UAAU,eAAe;AAAA,WAChC;AAAA,iBACO,KAAO,EAAA;AAAA;AAGhB,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,OACnB;AAAA;AAGF,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,CAAA,4BAAA,EAA+B,MAAM,OAAO,CAAA,2DAAA;AAAA,KAC9C;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAM,CAAA,EAAA,EAAI,MAAM,KAAO,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA;AAEzC,EAAI,IAAA,SAAA,IAAa,CAAC,KAAA,CAAM,KAAO,EAAA;AAC7B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAGC,IAAM,EAAA,KAAA;AAAA,MAEN,OAAA;AAAA,MACA,EAAI,EAAA;AAAA,QACF,KAAA,EAAO,MAAM,SAAa,IAAA,cAAA;AAAA,QAC1B,eAAA,EAAiB,MAAM,eAAmB,IAAA,kBAAA;AAAA,QAC1C,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,cAAc,KAAM,CAAA,YAAA;AAAA,QACpB,cAAgB,EAAA,QAAA;AAAA,QAChB,SAAW,EAAA;AAAA;AACb,KAAA;AAAA,IAEC,KAAA,CAAM,QACL,mBAAA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,MAAM,KAAO,EAAA,OAAA,EAAQ,KAAM,EAAA,CAAA,GAErD,KAAM,CAAA;AAAA,GAEV;AAEJ;;;;"}

package/dist/components/SearchComponent/SearchBar.esm.js

@@ -14,7 +14,7 @@ const SearchBar = (props) => {
     let options = [];
     if (results.length > 0) {
       options = [
-        ...results.slice(0, 5).map((result) => result.document.title),
+        ...results.map((result) => result.document.title),
         `${query?.term}`
       ];
     } else if (query?.term) {

package/dist/components/SearchComponent/SearchBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (results.length > 0) {\n          options = [\n            ...results.slice(0, 5).map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        } else if (query?.term) {\n          options = ['No results found'];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={(_, inputValue) => setSearchTerm(inputValue)}\n            sx={{ width: '100%' }}\n            filterOptions={x => x}\n            getOptionDisabled={option => option === 'No results found'}\n            onKeyDown={event => {\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (query?.term) {\n                  navigate(searchLink);\n                }\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? 'Error fetching results' : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              style: { maxHeight: 600 },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA+Ba,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,EAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,KAAA;AACjC,EAAA,MAAM,WAAW,WAAY,EAAA;AAE7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,qBAAmB,GAAG,KAAA,EAAA,EACpB,CAAC,EAAE,OAAA,EAAS,KAAO,EAAA,KAAA,EAAY,KAAA;AAC9B,IAAA,MAAM,UAAU,KAAO,EAAA,IAAA,GAAO,OAAO,OAAW,IAAA,KAAK,EAAC;AACtD,IAAA,IAAI,UAAoB,EAAC;AACzB,IAAI,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AACtB,MAAU,OAAA,GAAA;AAAA,QACR,GAAG,OAAQ,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,EAAE,GAAI,CAAA,CAAA,MAAA,KAAU,MAAO,CAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAC1D,CAAA,EAAG,OAAO,IAAI,CAAA;AAAA,OAChB;AAAA,KACF,MAAA,IAAW,OAAO,IAAM,EAAA;AACtB,MAAA,OAAA,GAAU,CAAC,kBAAkB,CAAA;AAAA;AAE/B,IAAA,MAAM,UAAa,GAAA,gBAAA,CAAiB,KAAO,EAAA,IAAA,IAAQ,EAAE,CAAA;AAErD,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,OAAA;AAAA,QACA,OAAA;AAAA,QACA,cAAA,EAAgB,YAAU,MAAU,IAAA,EAAA;AAAA,QACpC,aAAe,EAAA,CAAC,CAAG,EAAA,UAAA,KAAe,cAAc,UAAU,CAAA;AAAA,QAC1D,EAAA,EAAI,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,QACpB,eAAe,CAAK,CAAA,KAAA,CAAA;AAAA,QACpB,iBAAA,EAAmB,YAAU,MAAW,KAAA,kBAAA;AAAA,QACxC,WAAW,CAAS,KAAA,KAAA;AAClB,UAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,YAAA,KAAA,CAAM,cAAe,EAAA;AACrB,YAAA,IAAI,OAAO,IAAM,EAAA;AACf,cAAA,QAAA,CAAS,UAAU,CAAA;AAAA;AACrB;AACF,SACF;AAAA,QACA,aAAa,CACX,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA,EAAO,CAAC,CAAC,KAAA;AAAA,YACT,UAAA,EAAY,QAAQ,wBAA2B,GAAA;AAAA;AAAA,SACjD;AAAA,QAEF,cAAc,CAAC,WAAA,EAAa,MAAQ,EAAA,EAAE,OACpC,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,WAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QAEF,YAAc,EAAA;AAAA,UACZ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAI;AAAA;AAC1B;AAAA,KACF;AAAA,GAGN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchComponent/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport {\n  SearchResultState,\n  SearchResultProps,\n} from '@backstage/plugin-search-react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport { createSearchLink } from '../../utils/stringUtils';\nimport { useNavigate } from 'react-router-dom';\nimport { SearchInput } from './SearchInput';\nimport { SearchOption } from './SearchOption';\n\ninterface SearchBarProps {\n  query: SearchResultProps['query'];\n  setSearchTerm: (term: string) => void;\n}\nexport const SearchBar = (props: SearchBarProps) => {\n  const { query, setSearchTerm } = props;\n  const navigate = useNavigate();\n\n  return (\n    <SearchResultState {...props}>\n      {({ loading, error, value }) => {\n        const results = query?.term ? value?.results ?? [] : [];\n        let options: string[] = [];\n        if (results.length > 0) {\n          options = [\n            ...results.map(result => result.document.title),\n            `${query?.term}`,\n          ];\n        } else if (query?.term) {\n          options = ['No results found'];\n        }\n        const searchLink = createSearchLink(query?.term ?? '');\n\n        return (\n          <Autocomplete\n            freeSolo\n            options={options}\n            loading={loading}\n            getOptionLabel={option => option ?? ''}\n            onInputChange={(_, inputValue) => setSearchTerm(inputValue)}\n            sx={{ width: '100%' }}\n            filterOptions={x => x}\n            getOptionDisabled={option => option === 'No results found'}\n            onKeyDown={event => {\n              if (event.key === 'Enter') {\n                event.preventDefault();\n                if (query?.term) {\n                  navigate(searchLink);\n                }\n              }\n            }}\n            renderInput={params => (\n              <SearchInput\n                params={params}\n                error={!!error}\n                helperText={error ? 'Error fetching results' : ''}\n              />\n            )}\n            renderOption={(renderProps, option, { index }) => (\n              <SearchOption\n                option={option}\n                index={index}\n                options={options}\n                query={query}\n                results={results}\n                renderProps={renderProps}\n                searchLink={searchLink}\n              />\n            )}\n            ListboxProps={{\n              style: { maxHeight: 600 },\n            }}\n          />\n        );\n      }}\n    </SearchResultState>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA+Ba,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,EAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,KAAA;AACjC,EAAA,MAAM,WAAW,WAAY,EAAA;AAE7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,qBAAmB,GAAG,KAAA,EAAA,EACpB,CAAC,EAAE,OAAA,EAAS,KAAO,EAAA,KAAA,EAAY,KAAA;AAC9B,IAAA,MAAM,UAAU,KAAO,EAAA,IAAA,GAAO,OAAO,OAAW,IAAA,KAAK,EAAC;AACtD,IAAA,IAAI,UAAoB,EAAC;AACzB,IAAI,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AACtB,MAAU,OAAA,GAAA;AAAA,QACR,GAAG,OAAQ,CAAA,GAAA,CAAI,CAAU,MAAA,KAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,QAC9C,CAAA,EAAG,OAAO,IAAI,CAAA;AAAA,OAChB;AAAA,KACF,MAAA,IAAW,OAAO,IAAM,EAAA;AACtB,MAAA,OAAA,GAAU,CAAC,kBAAkB,CAAA;AAAA;AAE/B,IAAA,MAAM,UAAa,GAAA,gBAAA,CAAiB,KAAO,EAAA,IAAA,IAAQ,EAAE,CAAA;AAErD,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,OAAA;AAAA,QACA,OAAA;AAAA,QACA,cAAA,EAAgB,YAAU,MAAU,IAAA,EAAA;AAAA,QACpC,aAAe,EAAA,CAAC,CAAG,EAAA,UAAA,KAAe,cAAc,UAAU,CAAA;AAAA,QAC1D,EAAA,EAAI,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,QACpB,eAAe,CAAK,CAAA,KAAA,CAAA;AAAA,QACpB,iBAAA,EAAmB,YAAU,MAAW,KAAA,kBAAA;AAAA,QACxC,WAAW,CAAS,KAAA,KAAA;AAClB,UAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,YAAA,KAAA,CAAM,cAAe,EAAA;AACrB,YAAA,IAAI,OAAO,IAAM,EAAA;AACf,cAAA,QAAA,CAAS,UAAU,CAAA;AAAA;AACrB;AACF,SACF;AAAA,QACA,aAAa,CACX,MAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA,EAAO,CAAC,CAAC,KAAA;AAAA,YACT,UAAA,EAAY,QAAQ,wBAA2B,GAAA;AAAA;AAAA,SACjD;AAAA,QAEF,cAAc,CAAC,WAAA,EAAa,MAAQ,EAAA,EAAE,OACpC,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,KAAA;AAAA,YACA,OAAA;AAAA,YACA,WAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QAEF,YAAc,EAAA;AAAA,UACZ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAI;AAAA;AAC1B;AAAA,KACF;AAAA,GAGN,CAAA;AAEJ;;;;"}