@verdaccio/ui-components 5.0.0-next-9.6 → 5.0.0-next-9.8

package/build/components/ActionBar/ActionBarAction.mjs

@@ -9,7 +9,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import BugReport from "@mui/icons-material/BugReport";
+import BugReportIcon from "@mui/icons-material/BugReport";
 import DownloadIcon from "@mui/icons-material/CloudDownload";
 import HomeIcon from "@mui/icons-material/Home";
 import RawOnIcon from "@mui/icons-material/RawOn";
@@ -52,7 +52,7 @@ var ActionBarAction = ({ type, link, action }) => {
 				variant: "button",
 				children: /* @__PURE__ */ jsx(Fab, {
 					size: "small",
-					children: /* @__PURE__ */ jsx(BugReport, {})
+					children: /* @__PURE__ */ jsx(BugReportIcon, {})
 				})
 			})
 		});

package/build/components/ActionBar/ActionBarAction.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarAction.mjs","names":[],"sources":["../../../src/components/ActionBar/ActionBarAction.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport BugReportIcon from '@mui/icons-material/BugReport';\nimport DownloadIcon from '@mui/icons-material/CloudDownload';\nimport HomeIcon from '@mui/icons-material/Home';\nimport RawOnIcon from '@mui/icons-material/RawOn';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport FabMUI from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport { common } from '@mui/material/colors';\nimport React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { greyMedium } from '../../Theme/colors';\nimport { useDownload, useVersion } from '../../providers';\nimport LinkExternal from '../LinkExternal';\n\nexport const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({\n  backgroundColor:\n    theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.primary.main,\n  '&:hover': {\n    backgroundColor: theme.palette.mode === 'dark' ? greyMedium : undefined,\n    color: theme.palette.mode === 'light' ? theme.palette.primary.main : common.white,\n  },\n  color: common.white,\n}));\n\ntype ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';\n\nexport interface ActionBarActionProps {\n  type: ActionType;\n  link?: string;\n  action?: () => void;\n}\n\nconst ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action }) => {\n  const { t } = useTranslation();\n  const { isLoading } = useVersion();\n  const { downloadTarball } = useDownload();\n\n  const handleDownload = useCallback(async () => {\n    downloadTarball?.({ link: link as string });\n  }, [link, downloadTarball]);\n\n  switch (type) {\n    case 'VISIT_HOMEPAGE':\n      return (\n        <Tooltip title={t('action-bar-action.visit-home-page') as string}>\n          <LinkExternal to={link} variant=\"button\">\n            <Fab color=\"primary\" size=\"small\">\n              <HomeIcon />\n            </Fab>\n          </LinkExternal>\n        </Tooltip>\n      );\n    case 'OPEN_AN_ISSUE':\n      return (\n        <Tooltip title={t('action-bar-action.open-an-issue') as string}>\n          <LinkExternal to={link} variant=\"button\">\n            <Fab size=\"small\">\n              <BugReportIcon />\n            </Fab>\n          </LinkExternal>\n        </Tooltip>\n      );\n    case 'DOWNLOAD_TARBALL':\n      return (\n        <Tooltip title={t('action-bar-action.download-tarball') as string}>\n          {isLoading ? (\n            <CircularProgress sx={{ marginX: 0 }} />\n          ) : (\n            <Fab data-testid=\"download-tarball-btn\" onClick={handleDownload} size=\"small\">\n              <DownloadIcon />\n            </Fab>\n          )}\n        </Tooltip>\n      );\n    case 'RAW_DATA':\n      return (\n        <Tooltip title={t('action-bar-action.raw') as string}>\n          <Fab data-testid=\"raw-btn\" onClick={action} size=\"small\">\n            <RawOnIcon />\n          </Fab>\n        </Tooltip>\n      );\n  }\n};\n\nexport default ActionBarAction;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,IAAa,MAAM,OAAO,OAAO,EAAqB,EAAE,aAAa;CACnE,iBACE,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,UAAU,OAAO,MAAM,QAAQ,QAAQ;CACvF,WAAW;EACT,iBAAiB,MAAM,QAAQ,SAAS,SAAS,aAAa,KAAA;EAC9D,OAAO,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,QAAQ,OAAO,OAAO;EAC7E;CACD,OAAO,OAAO;CACf,EAAE;AAUH,IAAM,mBAAmD,EAAE,MAAM,MAAM,aAAa;CAClF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,cAAc,YAAY;CAClC,MAAM,EAAE,oBAAoB,aAAa;CAEzC,MAAM,iBAAiB,YAAY,YAAY;AAC7C,oBAAkB,EAAQ,MAAgB,CAAC;IAC1C,CAAC,MAAM,gBAAgB,CAAC;AAE3B,SAAQ,MAAR;EACE,KAAK,iBACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,oCAAoC;aACpD,oBAAC,cAAD;IAAc,IAAI;IAAM,SAAQ;cAC9B,oBAAC,KAAD;KAAK,OAAM;KAAU,MAAK;eACxB,oBAAC,UAAD,EAAY,CAAA;KACR,CAAA;IACO,CAAA;GACP,CAAA;EAEd,KAAK,gBACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,kCAAkC;aAClD,oBAAC,cAAD;IAAc,IAAI;IAAM,SAAQ;cAC9B,oBAAC,KAAD;KAAK,MAAK;eACR,oBAAC,WAAD,EAAiB,CAAA;KACb,CAAA;IACO,CAAA;GACP,CAAA;EAEd,KAAK,mBACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,qCAAqC;aACpD,YACC,oBAAC,kBAAD,EAAkB,IAAI,EAAE,SAAS,GAAG,EAAI,CAAA,GAExC,oBAAC,KAAD;IAAK,eAAY;IAAuB,SAAS;IAAgB,MAAK;cACpE,oBAAC,cAAD,EAAgB,CAAA;IACZ,CAAA;GAEA,CAAA;EAEd,KAAK,WACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,wBAAwB;aACxC,oBAAC,KAAD;IAAK,eAAY;IAAU,SAAS;IAAQ,MAAK;cAC/C,oBAAC,WAAD,EAAa,CAAA;IACT,CAAA;GACE,CAAA"}
+{"version":3,"file":"ActionBarAction.mjs","names":[],"sources":["../../../src/components/ActionBar/ActionBarAction.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport BugReportIcon from '@mui/icons-material/BugReport';\nimport DownloadIcon from '@mui/icons-material/CloudDownload';\nimport HomeIcon from '@mui/icons-material/Home';\nimport RawOnIcon from '@mui/icons-material/RawOn';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport FabMUI from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport { common } from '@mui/material/colors';\nimport React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { greyMedium } from '../../Theme/colors';\nimport { useDownload, useVersion } from '../../providers';\nimport LinkExternal from '../LinkExternal';\n\nexport const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({\n  backgroundColor:\n    theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.primary.main,\n  '&:hover': {\n    backgroundColor: theme.palette.mode === 'dark' ? greyMedium : undefined,\n    color: theme.palette.mode === 'light' ? theme.palette.primary.main : common.white,\n  },\n  color: common.white,\n}));\n\ntype ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';\n\nexport interface ActionBarActionProps {\n  type: ActionType;\n  link?: string;\n  action?: () => void;\n}\n\nconst ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action }) => {\n  const { t } = useTranslation();\n  const { isLoading } = useVersion();\n  const { downloadTarball } = useDownload();\n\n  const handleDownload = useCallback(async () => {\n    downloadTarball?.({ link: link as string });\n  }, [link, downloadTarball]);\n\n  switch (type) {\n    case 'VISIT_HOMEPAGE':\n      return (\n        <Tooltip title={t('action-bar-action.visit-home-page') as string}>\n          <LinkExternal to={link} variant=\"button\">\n            <Fab color=\"primary\" size=\"small\">\n              <HomeIcon />\n            </Fab>\n          </LinkExternal>\n        </Tooltip>\n      );\n    case 'OPEN_AN_ISSUE':\n      return (\n        <Tooltip title={t('action-bar-action.open-an-issue') as string}>\n          <LinkExternal to={link} variant=\"button\">\n            <Fab size=\"small\">\n              <BugReportIcon />\n            </Fab>\n          </LinkExternal>\n        </Tooltip>\n      );\n    case 'DOWNLOAD_TARBALL':\n      return (\n        <Tooltip title={t('action-bar-action.download-tarball') as string}>\n          {isLoading ? (\n            <CircularProgress sx={{ marginX: 0 }} />\n          ) : (\n            <Fab data-testid=\"download-tarball-btn\" onClick={handleDownload} size=\"small\">\n              <DownloadIcon />\n            </Fab>\n          )}\n        </Tooltip>\n      );\n    case 'RAW_DATA':\n      return (\n        <Tooltip title={t('action-bar-action.raw') as string}>\n          <Fab data-testid=\"raw-btn\" onClick={action} size=\"small\">\n            <RawOnIcon />\n          </Fab>\n        </Tooltip>\n      );\n  }\n};\n\nexport default ActionBarAction;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,IAAa,MAAM,OAAO,OAAO,EAAqB,EAAE,aAAa;CACnE,iBACE,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,UAAU,OAAO,MAAM,QAAQ,QAAQ;CACvF,WAAW;EACT,iBAAiB,MAAM,QAAQ,SAAS,SAAS,aAAa,KAAA;EAC9D,OAAO,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,QAAQ,OAAO,OAAO;EAC7E;CACD,OAAO,OAAO;CACf,EAAE;AAUH,IAAM,mBAAmD,EAAE,MAAM,MAAM,aAAa;CAClF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,cAAc,YAAY;CAClC,MAAM,EAAE,oBAAoB,aAAa;CAEzC,MAAM,iBAAiB,YAAY,YAAY;AAC7C,oBAAkB,EAAQ,MAAgB,CAAC;IAC1C,CAAC,MAAM,gBAAgB,CAAC;AAE3B,SAAQ,MAAR;EACE,KAAK,iBACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,oCAAoC;aACpD,oBAAC,cAAD;IAAc,IAAI;IAAM,SAAQ;cAC9B,oBAAC,KAAD;KAAK,OAAM;KAAU,MAAK;eACxB,oBAAC,UAAD,EAAY,CAAA;KACR,CAAA;IACO,CAAA;GACP,CAAA;EAEd,KAAK,gBACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,kCAAkC;aAClD,oBAAC,cAAD;IAAc,IAAI;IAAM,SAAQ;cAC9B,oBAAC,KAAD;KAAK,MAAK;eACR,oBAAC,eAAD,EAAiB,CAAA;KACb,CAAA;IACO,CAAA;GACP,CAAA;EAEd,KAAK,mBACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,qCAAqC;aACpD,YACC,oBAAC,kBAAD,EAAkB,IAAI,EAAE,SAAS,GAAG,EAAI,CAAA,GAExC,oBAAC,KAAD;IAAK,eAAY;IAAuB,SAAS;IAAgB,MAAK;cACpE,oBAAC,cAAD,EAAgB,CAAA;IACZ,CAAA;GAEA,CAAA;EAEd,KAAK,WACH,QACE,oBAAC,SAAD;GAAS,OAAO,EAAE,wBAAwB;aACxC,oBAAC,KAAD;IAAK,eAAY;IAAU,SAAS;IAAQ,MAAK;cAC/C,oBAAC,WAAD,EAAa,CAAA;IACT,CAAA;GACE,CAAA"}

package/build/components/Dependencies/DependencyBlock.mjs

@@ -6,10 +6,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import Chip from "@mui/material/Chip";
 //#region src/components/Dependencies/DependencyBlock.tsx
-var StyledText = styled(Typography)((props) => ({
+var StyledText = styled(MaterialUITypography)((props) => ({
 	fontWeight: props.theme.fontWeight.bold,
 	textTransform: "capitalize"
 }));

package/build/components/Dependencies/DependencyBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DependencyBlock.mjs","names":[],"sources":["../../../src/components/Dependencies/DependencyBlock.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageDependencies } from '../../types/packageMeta';\nimport { Route } from '../../utils';\n\ninterface DependencyBlockProps {\n  title: string;\n  dependencies: PackageDependencies;\n}\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nexport const Tags = styled('div')<{ theme?: Theme }>((props) => ({\n  display: 'flex',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  // force title to be on the same line as the title\n  // could be better to avoid margin on the first element\n  // but it is a bit tricky to do with flexbox\n  marginLeft: props.theme.spacing(-0.6),\n}));\n\nexport const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({\n  margin: props.theme.spacing(0.6),\n}));\n\nexport const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const deps = Object.entries(dependencies);\n\n  function handleClick(name: string): void {\n    navigate(`${Route.DETAIL}${name}`);\n  }\n\n  function labelText(title: string, name: string, version: string): string {\n    if (title === 'bundleDependencies') {\n      return t('dependencies.dependency-block-bundle', { package: name });\n    } else {\n      return t('dependencies.dependency-block', { package: name, version });\n    }\n  }\n\n  return (\n    <Box data-testid={title} sx={{ margin: 2 }}>\n      <StyledText sx={{ marginBottom: 1 }} variant=\"subtitle1\">\n        {`${title} (${deps.length})`}\n      </StyledText>\n      <Tags>\n        {deps.map(([name, version]: [string, string]) => {\n          // Bundle dependencies are stored as array, for example [ 0: \"semver\" ]\n          // so the package name arrives here in the version field\n          const packageName = title == 'bundleDependencies' ? version : name;\n          return (\n            <Tag\n              className={'dep-tag'}\n              clickable={true}\n              data-testid={packageName}\n              key={packageName}\n              label={labelText(title, packageName, version)}\n              onClick={() => {\n                handleClick(packageName);\n              }}\n            />\n          );\n        })}\n      </Tags>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,aAAa,OAAO,WAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAa,OAAO,OAAO,MAAM,EAAqB,WAAW;CAC/D,SAAS;CACT,gBAAgB;CAChB,UAAU;CAIV,YAAY,MAAM,MAAM,QAAQ,IAAK;CACtC,EAAE;AAEH,IAAa,MAAM,OAAO,KAAK,EAAqB,WAAW,EAC7D,QAAQ,MAAM,MAAM,QAAQ,GAAI,EACjC,EAAE;AAEH,IAAa,mBAAmD,EAAE,OAAO,mBAAmB;CAC1F,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,OAAO,OAAO,QAAQ,aAAa;CAEzC,SAAS,YAAY,MAAoB;AACvC,WAAS,GAAG,QAAM,SAAS,OAAO;;CAGpC,SAAS,UAAU,OAAe,MAAc,SAAyB;AACvE,MAAI,UAAU,qBACZ,QAAO,EAAE,wCAAwC,EAAE,SAAS,MAAM,CAAC;MAEnE,QAAO,EAAE,iCAAiC;GAAE,SAAS;GAAM;GAAS,CAAC;;AAIzE,QACE,qBAAC,KAAD;EAAK,eAAa;EAAO,IAAI,EAAE,QAAQ,GAAG;YAA1C,CACE,oBAAC,YAAD;GAAY,IAAI,EAAE,cAAc,GAAG;GAAE,SAAQ;aAC1C,GAAG,MAAM,IAAI,KAAK,OAAO;GACf,CAAA,EACb,oBAAC,MAAD,EAAA,UACG,KAAK,KAAK,CAAC,MAAM,aAA+B;GAG/C,MAAM,cAAc,SAAS,uBAAuB,UAAU;AAC9D,UACE,oBAAC,KAAD;IACE,WAAW;IACX,WAAW;IACX,eAAa;IAEb,OAAO,UAAU,OAAO,aAAa,QAAQ;IAC7C,eAAe;AACb,iBAAY,YAAY;;IAE1B,EALK,YAKL;IAEJ,EACG,CAAA,CACH"}
+{"version":3,"file":"DependencyBlock.mjs","names":[],"sources":["../../../src/components/Dependencies/DependencyBlock.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageDependencies } from '../../types/packageMeta';\nimport { Route } from '../../utils';\n\ninterface DependencyBlockProps {\n  title: string;\n  dependencies: PackageDependencies;\n}\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nexport const Tags = styled('div')<{ theme?: Theme }>((props) => ({\n  display: 'flex',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  // force title to be on the same line as the title\n  // could be better to avoid margin on the first element\n  // but it is a bit tricky to do with flexbox\n  marginLeft: props.theme.spacing(-0.6),\n}));\n\nexport const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({\n  margin: props.theme.spacing(0.6),\n}));\n\nexport const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const deps = Object.entries(dependencies);\n\n  function handleClick(name: string): void {\n    navigate(`${Route.DETAIL}${name}`);\n  }\n\n  function labelText(title: string, name: string, version: string): string {\n    if (title === 'bundleDependencies') {\n      return t('dependencies.dependency-block-bundle', { package: name });\n    } else {\n      return t('dependencies.dependency-block', { package: name, version });\n    }\n  }\n\n  return (\n    <Box data-testid={title} sx={{ margin: 2 }}>\n      <StyledText sx={{ marginBottom: 1 }} variant=\"subtitle1\">\n        {`${title} (${deps.length})`}\n      </StyledText>\n      <Tags>\n        {deps.map(([name, version]: [string, string]) => {\n          // Bundle dependencies are stored as array, for example [ 0: \"semver\" ]\n          // so the package name arrives here in the version field\n          const packageName = title == 'bundleDependencies' ? version : name;\n          return (\n            <Tag\n              className={'dep-tag'}\n              clickable={true}\n              data-testid={packageName}\n              key={packageName}\n              label={labelText(title, packageName, version)}\n              onClick={() => {\n                handleClick(packageName);\n              }}\n            />\n          );\n        })}\n      </Tags>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,aAAa,OAAO,qBAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAa,OAAO,OAAO,MAAM,EAAqB,WAAW;CAC/D,SAAS;CACT,gBAAgB;CAChB,UAAU;CAIV,YAAY,MAAM,MAAM,QAAQ,IAAK;CACtC,EAAE;AAEH,IAAa,MAAM,OAAO,KAAK,EAAqB,WAAW,EAC7D,QAAQ,MAAM,MAAM,QAAQ,GAAI,EACjC,EAAE;AAEH,IAAa,mBAAmD,EAAE,OAAO,mBAAmB;CAC1F,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,OAAO,OAAO,QAAQ,aAAa;CAEzC,SAAS,YAAY,MAAoB;AACvC,WAAS,GAAG,QAAM,SAAS,OAAO;;CAGpC,SAAS,UAAU,OAAe,MAAc,SAAyB;AACvE,MAAI,UAAU,qBACZ,QAAO,EAAE,wCAAwC,EAAE,SAAS,MAAM,CAAC;MAEnE,QAAO,EAAE,iCAAiC;GAAE,SAAS;GAAM;GAAS,CAAC;;AAIzE,QACE,qBAAC,KAAD;EAAK,eAAa;EAAO,IAAI,EAAE,QAAQ,GAAG;YAA1C,CACE,oBAAC,YAAD;GAAY,IAAI,EAAE,cAAc,GAAG;GAAE,SAAQ;aAC1C,GAAG,MAAM,IAAI,KAAK,OAAO;GACf,CAAA,EACb,oBAAC,MAAD,EAAA,UACG,KAAK,KAAK,CAAC,MAAM,aAA+B;GAG/C,MAAM,cAAc,SAAS,uBAAuB,UAAU;AAC9D,UACE,oBAAC,KAAD;IACE,WAAW;IACX,WAAW;IACX,eAAa;IAEb,OAAO,UAAU,OAAO,aAAa,QAAQ;IAC7C,eAAe;AACb,iBAAY,YAAY;;IAE1B,EALK,YAKL;IAEJ,EACG,CAAA,CACH"}

package/build/components/Developers/Title.mjs

@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 //#region src/components/Developers/Title.tsx
 var Title = ({ type }) => {
 	const { t } = useTranslation();
@@ -19,7 +19,7 @@ var Title = ({ type }) => {
 		});
 	}
 };
-var StyledText = styled(Typography)(({ theme }) => ({
+var StyledText = styled(MaterialUITypography)(({ theme }) => ({
 	fontWeight: theme.fontWeight.bold,
 	marginBottom: "10px"
 }));

package/build/components/Developers/Title.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.mjs","names":[],"sources":["../../../src/components/Developers/Title.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { DeveloperType } from './';\n\ninterface Props {\n  type: DeveloperType;\n}\n\nconst Title: React.FC<Props> = ({ type }) => {\n  const { t } = useTranslation();\n  switch (type) {\n    case DeveloperType.CONTRIBUTORS:\n      return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;\n    case DeveloperType.MAINTAINERS:\n      return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;\n  }\n};\n\nexport default Title;\n\nconst StyledText = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({\n  fontWeight: theme.fontWeight.bold,\n  marginBottom: '10px',\n}));\n"],"mappings":";;;;;;;;AAYA,IAAM,SAA0B,EAAE,WAAW;CAC3C,MAAM,EAAE,MAAM,gBAAgB;AAC9B,SAAQ,MAAR;EACE,KAAK,cAAc,aACjB,QAAO,oBAAC,YAAD;GAAY,SAAS;aAAc,EAAE,6BAA6B;GAAc,CAAA;EACzF,KAAK,cAAc,YACjB,QAAO,oBAAC,YAAD;GAAY,SAAS;aAAc,EAAE,4BAA4B;GAAc,CAAA;;;AAM5F,IAAM,aAAa,OAAO,WAAW,EAAqB,EAAE,aAAa;CACvE,YAAY,MAAM,WAAW;CAC7B,cAAc;CACf,EAAE"}
+{"version":3,"file":"Title.mjs","names":[],"sources":["../../../src/components/Developers/Title.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { DeveloperType } from './';\n\ninterface Props {\n  type: DeveloperType;\n}\n\nconst Title: React.FC<Props> = ({ type }) => {\n  const { t } = useTranslation();\n  switch (type) {\n    case DeveloperType.CONTRIBUTORS:\n      return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;\n    case DeveloperType.MAINTAINERS:\n      return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;\n  }\n};\n\nexport default Title;\n\nconst StyledText = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({\n  fontWeight: theme.fontWeight.bold,\n  marginBottom: '10px',\n}));\n"],"mappings":";;;;;;;;AAYA,IAAM,SAA0B,EAAE,WAAW;CAC3C,MAAM,EAAE,MAAM,gBAAgB;AAC9B,SAAQ,MAAR;EACE,KAAK,cAAc,aACjB,QAAO,oBAAC,YAAD;GAAY,SAAS;aAAc,EAAE,6BAA6B;GAAc,CAAA;EACzF,KAAK,cAAc,YACjB,QAAO,oBAAC,YAAD;GAAY,SAAS;aAAc,EAAE,4BAA4B;GAAc,CAAA;;;AAM5F,IAAM,aAAa,OAAO,qBAAW,EAAqB,EAAE,aAAa;CACvE,YAAY,MAAM,WAAW;CAC7B,cAAc;CACf,EAAE"}

package/build/components/Distribution/styles.mjs

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import ListItem from "@mui/material/ListItem";
 import Chip from "@mui/material/Chip";
 //#region src/components/Distribution/styles.ts
-var StyledText = styled(Typography)((props) => ({
+var StyledText = styled(MaterialUITypography)((props) => ({
 	fontWeight: props.theme.fontWeight.bold,
 	textTransform: "capitalize"
 }));

package/build/components/Distribution/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/Distribution/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport Chip from '@mui/material/Chip';\nimport ListItem from '@mui/material/ListItem';\nimport Typography from '@mui/material/Typography';\n\nimport type { Theme } from '../../Theme';\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nexport const DistListItem = styled(ListItem)({\n  paddingLeft: 0,\n  paddingRight: 0,\n  flexWrap: 'wrap',\n});\n\nexport const DistChips = styled(Chip)({\n  marginRight: 5,\n  textTransform: 'capitalize',\n  marginTop: 5,\n});\n"],"mappings":";;;;;AAOA,IAAa,aAAa,OAAO,WAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAa,eAAe,OAAO,SAAS,CAAC;CAC3C,aAAa;CACb,cAAc;CACd,UAAU;CACX,CAAC;AAEF,IAAa,YAAY,OAAO,KAAK,CAAC;CACpC,aAAa;CACb,eAAe;CACf,WAAW;CACZ,CAAC"}
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/Distribution/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport Chip from '@mui/material/Chip';\nimport ListItem from '@mui/material/ListItem';\nimport Typography from '@mui/material/Typography';\n\nimport type { Theme } from '../../Theme';\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nexport const DistListItem = styled(ListItem)({\n  paddingLeft: 0,\n  paddingRight: 0,\n  flexWrap: 'wrap',\n});\n\nexport const DistChips = styled(Chip)({\n  marginRight: 5,\n  textTransform: 'capitalize',\n  marginTop: 5,\n});\n"],"mappings":";;;;;AAOA,IAAa,aAAa,OAAO,qBAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAa,eAAe,OAAO,SAAS,CAAC;CAC3C,aAAa;CACb,cAAc;CACd,UAAU;CACX,CAAC;AAEF,IAAa,YAAY,OAAO,KAAK,CAAC;CACpC,aAAa;CACb,eAAe;CACf,WAAW;CACZ,CAAC"}

package/build/components/Engines/styles.mjs

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import ListItem from "@mui/material/ListItem";
 //#region src/components/Engines/styles.ts
-var StyledText = styled(Typography)((props) => ({
+var StyledText = styled(MaterialUITypography)((props) => ({
 	fontWeight: props.theme.fontWeight.bold,
 	textTransform: "capitalize"
 }));

package/build/components/Engines/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/Engines/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport ListItem from '@mui/material/ListItem';\nimport Typography from '@mui/material/Typography';\n\nimport type { Theme } from '../../Theme';\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nexport const EngineListItem = styled(ListItem)({\n  padding: 0,\n});\n"],"mappings":";;;;AAMA,IAAa,aAAa,OAAO,WAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAa,iBAAiB,OAAO,SAAS,CAAC,EAC7C,SAAS,GACV,CAAC"}
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/Engines/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport ListItem from '@mui/material/ListItem';\nimport Typography from '@mui/material/Typography';\n\nimport type { Theme } from '../../Theme';\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nexport const EngineListItem = styled(ListItem)({\n  padding: 0,\n});\n"],"mappings":";;;;AAMA,IAAa,aAAa,OAAO,qBAAW,EAAqB,WAAW;CAC1E,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAa,iBAAiB,OAAO,SAAS,CAAC,EAC7C,SAAS,GACV,CAAC"}

package/build/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -11,6 +11,6 @@ export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     state: ErrorBoundaryState;
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, info: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<ReactNode> | React.JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 }
 export {};

package/build/components/Heading/Heading.mjs

@@ -1,9 +1,9 @@
 import "react";
 import { jsx } from "react/jsx-runtime";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 //#region src/components/Heading/Heading.tsx
 var Heading = function Heading({ ref, variant = "h6", ...props }) {
-	return /* @__PURE__ */ jsx(Typography, {
+	return /* @__PURE__ */ jsx(MaterialUITypography, {
 		...props,
 		ref,
 		variant

package/build/components/Heading/Heading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { TypographyProps } from '@mui/material/Typography';\nimport { default as MaterialUITypography } from '@mui/material/Typography';\nimport React from 'react';\n\ntype HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\ntype HeadingRef = HTMLHeadingElement;\n\ninterface Props extends Omit<TypographyProps, 'variant'> {\n  variant?: HeadingType;\n}\n\nconst Heading = function Heading({\n  ref,\n  variant = 'h6',\n  ...props\n}: Props & { ref?: React.RefObject<HeadingRef | null> }) {\n  return <MaterialUITypography {...props} ref={ref} variant={variant} />;\n};\n\nexport default Heading;\n"],"mappings":";;;;AAWA,IAAM,UAAU,SAAS,QAAQ,EAC/B,KACA,UAAU,MACV,GAAG,SACoD;AACvD,QAAO,oBAAC,YAAD;EAAsB,GAAI;EAAY;EAAc;EAAW,CAAA"}
+{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { TypographyProps } from '@mui/material/Typography';\nimport { default as MaterialUITypography } from '@mui/material/Typography';\nimport React from 'react';\n\ntype HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\ntype HeadingRef = HTMLHeadingElement;\n\ninterface Props extends Omit<TypographyProps, 'variant'> {\n  variant?: HeadingType;\n}\n\nconst Heading = function Heading({\n  ref,\n  variant = 'h6',\n  ...props\n}: Props & { ref?: React.RefObject<HeadingRef | null> }) {\n  return <MaterialUITypography {...props} ref={ref} variant={variant} />;\n};\n\nexport default Heading;\n"],"mappings":";;;;AAWA,IAAM,UAAU,SAAS,QAAQ,EAC/B,KACA,UAAU,MACV,GAAG,SACoD;AACvD,QAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAY;EAAc;EAAW,CAAA"}

package/build/components/Help/Help.mjs

@@ -6,13 +6,13 @@ import "../../index.mjs";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import CardContent from "@mui/material/CardContent";
 import Button from "@mui/material/Button";
 import CardActions from "@mui/material/CardActions";
 //#region src/components/Help/Help.tsx
 function renderHeadingClipboardSegments(title, text) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MaterialUITypography, {
 		variant: "body1",
 		children: title
 	}), /* @__PURE__ */ jsx(CopyToClipBoard, {
@@ -42,7 +42,7 @@ var Help = () => {
 			}),
 			renderHeadingClipboardSegments(t("help.first-step"), t("help.first-step-command-line", { registryUrl })),
 			renderHeadingClipboardSegments(t("help.second-step"), t("help.second-step-command-line", { registryUrl })),
-			/* @__PURE__ */ jsx(Typography, {
+			/* @__PURE__ */ jsx(MaterialUITypography, {
 				variant: "body1",
 				children: t("help.third-step")
 			})

package/build/components/Help/Help.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Help.mjs","names":[],"sources":["../../../src/components/Help/Help.tsx"],"sourcesContent":["import Button from '@mui/material/Button';\nimport CardActions from '@mui/material/CardActions';\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport React, { Fragment } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { CopyClipboard, Heading, useConfig } from '../../';\nimport { CardStyled as Card } from './styles';\n\nfunction renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {\n  return (\n    <Fragment>\n      <Typography variant={'body1'}>{title}</Typography>\n      <CopyClipboard dataTestId=\"segments\" text={text} />\n    </Fragment>\n  );\n}\n\nconst Help: React.FC = () => {\n  const { configOptions } = useConfig();\n  const registryUrl = configOptions.base;\n  const { t } = useTranslation();\n\n  return (\n    <Card data-testid=\"help-card\" id=\"help-card\">\n      <CardContent>\n        <Heading gutterBottom={true} id=\"help-card__title\" variant=\"h5\">\n          {t('help.title')}\n        </Heading>\n        <Heading color=\"textSecondary\" gutterBottom={true} sx={{ marginBottom: 1 }}>\n          {t('help.sub-title')}\n        </Heading>\n        {renderHeadingClipboardSegments(\n          t('help.first-step'),\n          t('help.first-step-command-line', { registryUrl })\n        )}\n        {renderHeadingClipboardSegments(\n          t('help.second-step'),\n          t('help.second-step-command-line', { registryUrl })\n        )}\n        <Typography variant=\"body1\">{t('help.third-step')}</Typography>\n      </CardContent>\n      <CardActions>\n        <Button color=\"primary\" href=\"https://verdaccio.org/docs/cli-registry\" size=\"small\">\n          {t('button.learn-more')}\n        </Button>\n      </CardActions>\n    </Card>\n  );\n};\n\nexport default Help;\n"],"mappings":";;;;;;;;;;;;;AAUA,SAAS,+BAA+B,OAAe,MAA+B;AACpF,QACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EAAY,SAAS;YAAU;EAAmB,CAAA,EAClD,oBAAC,iBAAD;EAAe,YAAW;EAAiB;EAAQ,CAAA,CAC1C,EAAA,CAAA;;AAIf,IAAM,aAAuB;CAC3B,MAAM,EAAE,kBAAkB,WAAW;CACrC,MAAM,cAAc,cAAc;CAClC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,qBAAC,YAAD;EAAM,eAAY;EAAY,IAAG;YAAjC,CACE,qBAAC,aAAD,EAAA,UAAA;GACE,oBAAC,SAAD;IAAS,cAAc;IAAM,IAAG;IAAmB,SAAQ;cACxD,EAAE,aAAa;IACR,CAAA;GACV,oBAAC,SAAD;IAAS,OAAM;IAAgB,cAAc;IAAM,IAAI,EAAE,cAAc,GAAG;cACvE,EAAE,iBAAiB;IACZ,CAAA;GACT,+BACC,EAAE,kBAAkB,EACpB,EAAE,gCAAgC,EAAE,aAAa,CAAC,CACnD;GACA,+BACC,EAAE,mBAAmB,EACrB,EAAE,iCAAiC,EAAE,aAAa,CAAC,CACpD;GACD,oBAAC,YAAD;IAAY,SAAQ;cAAS,EAAE,kBAAkB;IAAc,CAAA;GACnD,EAAA,CAAA,EACd,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,MAAK;GAA0C,MAAK;aACzE,EAAE,oBAAoB;GAChB,CAAA,EACG,CAAA,CACT"}
+{"version":3,"file":"Help.mjs","names":[],"sources":["../../../src/components/Help/Help.tsx"],"sourcesContent":["import Button from '@mui/material/Button';\nimport CardActions from '@mui/material/CardActions';\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport React, { Fragment } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { CopyClipboard, Heading, useConfig } from '../../';\nimport { CardStyled as Card } from './styles';\n\nfunction renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {\n  return (\n    <Fragment>\n      <Typography variant={'body1'}>{title}</Typography>\n      <CopyClipboard dataTestId=\"segments\" text={text} />\n    </Fragment>\n  );\n}\n\nconst Help: React.FC = () => {\n  const { configOptions } = useConfig();\n  const registryUrl = configOptions.base;\n  const { t } = useTranslation();\n\n  return (\n    <Card data-testid=\"help-card\" id=\"help-card\">\n      <CardContent>\n        <Heading gutterBottom={true} id=\"help-card__title\" variant=\"h5\">\n          {t('help.title')}\n        </Heading>\n        <Heading color=\"textSecondary\" gutterBottom={true} sx={{ marginBottom: 1 }}>\n          {t('help.sub-title')}\n        </Heading>\n        {renderHeadingClipboardSegments(\n          t('help.first-step'),\n          t('help.first-step-command-line', { registryUrl })\n        )}\n        {renderHeadingClipboardSegments(\n          t('help.second-step'),\n          t('help.second-step-command-line', { registryUrl })\n        )}\n        <Typography variant=\"body1\">{t('help.third-step')}</Typography>\n      </CardContent>\n      <CardActions>\n        <Button color=\"primary\" href=\"https://verdaccio.org/docs/cli-registry\" size=\"small\">\n          {t('button.learn-more')}\n        </Button>\n      </CardActions>\n    </Card>\n  );\n};\n\nexport default Help;\n"],"mappings":";;;;;;;;;;;;;AAUA,SAAS,+BAA+B,OAAe,MAA+B;AACpF,QACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAY,SAAS;YAAU;EAAmB,CAAA,EAClD,oBAAC,iBAAD;EAAe,YAAW;EAAiB;EAAQ,CAAA,CAC1C,EAAA,CAAA;;AAIf,IAAM,aAAuB;CAC3B,MAAM,EAAE,kBAAkB,WAAW;CACrC,MAAM,cAAc,cAAc;CAClC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,qBAAC,YAAD;EAAM,eAAY;EAAY,IAAG;YAAjC,CACE,qBAAC,aAAD,EAAA,UAAA;GACE,oBAAC,SAAD;IAAS,cAAc;IAAM,IAAG;IAAmB,SAAQ;cACxD,EAAE,aAAa;IACR,CAAA;GACV,oBAAC,SAAD;IAAS,OAAM;IAAgB,cAAc;IAAM,IAAI,EAAE,cAAc,GAAG;cACvE,EAAE,iBAAiB;IACZ,CAAA;GACT,+BACC,EAAE,kBAAkB,EACpB,EAAE,gCAAgC,EAAE,aAAa,CAAC,CACnD;GACA,+BACC,EAAE,mBAAmB,EACrB,EAAE,iCAAiC,EAAE,aAAa,CAAC,CACpD;GACD,oBAAC,sBAAD;IAAY,SAAQ;cAAS,EAAE,kBAAkB;IAAc,CAAA;GACnD,EAAA,CAAA,EACd,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,MAAK;GAA0C,MAAK;aACzE,EAAE,oBAAoB;GAChB,CAAA,EACG,CAAA,CACT"}

package/build/components/Keywords/Keywords.mjs

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import List from "@mui/material/List";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 //#region src/components/Keywords/Keywords.tsx
 var Keywords = ({ packageMeta }) => {
 	const { t } = useTranslation();
@@ -12,7 +12,7 @@ var Keywords = ({ packageMeta }) => {
 	if (!packageMeta?.latest?.keywords) return null;
 	return /* @__PURE__ */ jsx(List, {
 		"data-testid": "keyword-list",
-		subheader: /* @__PURE__ */ jsx(Typography, {
+		subheader: /* @__PURE__ */ jsx(MaterialUITypography, {
 			sx: {
 				fontWeight: theme.fontWeight.bold,
 				textTransform: "capitalize"

package/build/components/Keywords/Keywords.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Keywords.mjs","names":[],"sources":["../../../src/components/Keywords/Keywords.tsx"],"sourcesContent":["import List from '@mui/material/List';\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageMetaInterface } from '../../types/packageMeta';\nimport KeywordListItems from './KeywordListItems';\n\nconst Keywords: React.FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {\n  const { t } = useTranslation();\n  const theme: Theme = useTheme();\n\n  if (!packageMeta?.latest?.keywords) {\n    return null;\n  }\n\n  return (\n    <List\n      data-testid=\"keyword-list\"\n      subheader={\n        <Typography\n          sx={{ fontWeight: theme.fontWeight.bold, textTransform: 'capitalize' }}\n          variant=\"subtitle1\"\n        >\n          {t('sidebar.keywords.title')}\n        </Typography>\n      }\n    >\n      <KeywordListItems keywords={packageMeta?.latest?.keywords} />\n    </List>\n  );\n};\n\nexport default Keywords;\n"],"mappings":";;;;;;;;AAUA,IAAM,YAA6D,EAAE,kBAAkB;CACrF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,QAAe,UAAU;AAE/B,KAAI,CAAC,aAAa,QAAQ,SACxB,QAAO;AAGT,QACE,oBAAC,MAAD;EACE,eAAY;EACZ,WACE,oBAAC,YAAD;GACE,IAAI;IAAE,YAAY,MAAM,WAAW;IAAM,eAAe;IAAc;GACtE,SAAQ;aAEP,EAAE,yBAAyB;GACjB,CAAA;YAGf,oBAAC,kBAAD,EAAkB,UAAU,aAAa,QAAQ,UAAY,CAAA;EACxD,CAAA"}
+{"version":3,"file":"Keywords.mjs","names":[],"sources":["../../../src/components/Keywords/Keywords.tsx"],"sourcesContent":["import List from '@mui/material/List';\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport type { PackageMetaInterface } from '../../types/packageMeta';\nimport KeywordListItems from './KeywordListItems';\n\nconst Keywords: React.FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {\n  const { t } = useTranslation();\n  const theme: Theme = useTheme();\n\n  if (!packageMeta?.latest?.keywords) {\n    return null;\n  }\n\n  return (\n    <List\n      data-testid=\"keyword-list\"\n      subheader={\n        <Typography\n          sx={{ fontWeight: theme.fontWeight.bold, textTransform: 'capitalize' }}\n          variant=\"subtitle1\"\n        >\n          {t('sidebar.keywords.title')}\n        </Typography>\n      }\n    >\n      <KeywordListItems keywords={packageMeta?.latest?.keywords} />\n    </List>\n  );\n};\n\nexport default Keywords;\n"],"mappings":";;;;;;;;AAUA,IAAM,YAA6D,EAAE,kBAAkB;CACrF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,QAAe,UAAU;AAE/B,KAAI,CAAC,aAAa,QAAQ,SACxB,QAAO;AAGT,QACE,oBAAC,MAAD;EACE,eAAY;EACZ,WACE,oBAAC,sBAAD;GACE,IAAI;IAAE,YAAY,MAAM,WAAW;IAAM,eAAe;IAAc;GACtE,SAAQ;aAEP,EAAE,yBAAyB;GACjB,CAAA;YAGf,oBAAC,kBAAD,EAAkB,UAAU,aAAa,QAAQ,UAAY,CAAA;EACxD,CAAA"}

package/build/components/Link/Link.mjs

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Link } from "react-router";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 //#region src/components/Link/Link.tsx
 var CustomRouterLink = styled(Link)`
   text-decoration: none;
@@ -17,7 +17,7 @@ var Link$1 = function LinkFunction({ ref, to, children, variant, className, onCl
 		onClick,
 		ref,
 		to,
-		children: /* @__PURE__ */ jsx(Typography, {
+		children: /* @__PURE__ */ jsx(MaterialUITypography, {
 			color: "primary",
 			variant,
 			children

package/build/components/Link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { Link as RouterLink } from 'react-router';\n\nconst CustomRouterLink = styled(RouterLink)`\n  text-decoration: none;\n  &:hover,\n  &:focus {\n    text-decoration: underline;\n  }\n`;\n\nconst Link = function LinkFunction({\n  ref,\n  to,\n  children,\n  variant,\n  className,\n  onClick,\n}: any & { ref?: React.RefObject<HTMLAnchorElement | null> }) {\n  return (\n    <CustomRouterLink className={className} onClick={onClick} ref={ref} to={to}>\n      <Typography color=\"primary\" variant={variant}>\n        {children}\n      </Typography>\n    </CustomRouterLink>\n  );\n};\n\nexport default Link;\n"],"mappings":";;;;;;AAKA,IAAM,mBAAmB,OAAO,KAAW;;;;;;;AAQ3C,IAAM,SAAO,SAAS,aAAa,EACjC,KACA,IACA,UACA,SACA,WACA,WAC4D;AAC5D,QACE,oBAAC,kBAAD;EAA6B;EAAoB;EAAc;EAAS;YACtE,oBAAC,YAAD;GAAY,OAAM;GAAmB;GAClC;GACU,CAAA;EACI,CAAA"}
+{"version":3,"file":"Link.mjs","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { Link as RouterLink } from 'react-router';\n\nconst CustomRouterLink = styled(RouterLink)`\n  text-decoration: none;\n  &:hover,\n  &:focus {\n    text-decoration: underline;\n  }\n`;\n\nconst Link = function LinkFunction({\n  ref,\n  to,\n  children,\n  variant,\n  className,\n  onClick,\n}: any & { ref?: React.RefObject<HTMLAnchorElement | null> }) {\n  return (\n    <CustomRouterLink className={className} onClick={onClick} ref={ref} to={to}>\n      <Typography color=\"primary\" variant={variant}>\n        {children}\n      </Typography>\n    </CustomRouterLink>\n  );\n};\n\nexport default Link;\n"],"mappings":";;;;;;AAKA,IAAM,mBAAmB,OAAO,KAAW;;;;;;;AAQ3C,IAAM,SAAO,SAAS,aAAa,EACjC,KACA,IACA,UACA,SACA,WACA,WAC4D;AAC5D,QACE,oBAAC,kBAAD;EAA6B;EAAoB;EAAc;EAAS;YACtE,oBAAC,sBAAD;GAAY,OAAM;GAAmB;GAClC;GACU,CAAA;EACI,CAAA"}

package/build/components/LoginForm/Login.mjs

@@ -9,7 +9,7 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 //#region src/components/LoginForm/Login.tsx
 var StyledForm = styled("form")(({ theme }) => ({ marginTop: theme.spacing(1) }));
@@ -41,7 +41,7 @@ var LoginForm = ({ register, handleSubmit, onSubmit, errors, isValid }) => {
 				variant: "contained",
 				children: t("button.login")
 			}),
-			changePasswordEnabled && /* @__PURE__ */ jsx(Typography, {
+			changePasswordEnabled && /* @__PURE__ */ jsx(MaterialUITypography, {
 				align: "center",
 				sx: {
 					mt: 2,

package/build/components/LoginForm/Login.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Login.mjs","names":[],"sources":["../../../src/components/LoginForm/Login.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Button from '@mui/material/Button';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport type { FC } from 'react';\nimport React from 'react';\nimport type { FieldErrors, UseFormHandleSubmit, UseFormRegister } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { getConfiguration } from '../../configuration';\nimport { Route } from '../../utils';\nimport LoginDialogFormError from '../LoginDialog/LoginDialogFormError';\nimport PasswordField from './PasswordField';\nimport UsernameField from './UsernameField';\n\nconst StyledForm = styled('form')<{ theme?: Theme }>(({ theme }) => ({\n  marginTop: theme.spacing(1),\n}));\n\nconst StyledButton = styled(Button)<{ theme?: Theme }>(({ theme }) => ({\n  margin: theme.spacing(3, 0, 2),\n}));\n\nexport interface LoginFormValues {\n  username: string;\n  password: string;\n}\n\ninterface Props {\n  register: UseFormRegister<LoginFormValues>;\n  handleSubmit: UseFormHandleSubmit<LoginFormValues>;\n  onSubmit: (data: LoginFormValues) => void;\n  errors: FieldErrors<LoginFormValues>;\n  isValid: boolean;\n}\n\nconst LoginForm: FC<Props> = ({ register, handleSubmit, onSubmit, errors, isValid }) => {\n  const { t } = useTranslation();\n  const configuration = getConfiguration();\n  const changePasswordEnabled = configuration?.flags?.changePassword;\n\n  return (\n    <StyledForm noValidate={true} onSubmit={handleSubmit(onSubmit)}>\n      <UsernameField errors={errors} register={register} />\n      <PasswordField errors={errors} register={register} />\n\n      {errors.root && <LoginDialogFormError error={errors.root} />}\n\n      <StyledButton\n        color=\"primary\"\n        data-testid=\"login-dialog-form-login-button\"\n        disabled={!isValid}\n        fullWidth={true}\n        id=\"login--dialog-button-submit\"\n        size=\"large\"\n        type=\"submit\"\n        variant=\"contained\"\n      >\n        {t('button.login')}\n      </StyledButton>\n      {changePasswordEnabled && (\n        <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n          <Link href={Route.CHANGE_PASSWORD} sx={{ ml: 1 }}>\n            {t('security.changePassword.title')}\n          </Link>\n        </Typography>\n      )}\n    </StyledForm>\n  );\n};\n\nexport default LoginForm;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,OAAO,EAAqB,EAAE,aAAa,EACnE,WAAW,MAAM,QAAQ,EAAE,EAC5B,EAAE;AAEH,IAAM,eAAe,OAAO,OAAO,EAAqB,EAAE,aAAa,EACrE,QAAQ,MAAM,QAAQ,GAAG,GAAG,EAAE,EAC/B,EAAE;AAeH,IAAM,aAAwB,EAAE,UAAU,cAAc,UAAU,QAAQ,cAAc;CACtF,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,wBADgB,kBAAkB,EACK,OAAO;AAEpD,QACE,qBAAC,YAAD;EAAY,YAAY;EAAM,UAAU,aAAa,SAAS;YAA9D;GACE,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GACrD,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GAEpD,OAAO,QAAQ,oBAAC,sBAAD,EAAsB,OAAO,OAAO,MAAQ,CAAA;GAE5D,oBAAC,cAAD;IACE,OAAM;IACN,eAAY;IACZ,UAAU,CAAC;IACX,WAAW;IACX,IAAG;IACH,MAAK;IACL,MAAK;IACL,SAAQ;cAEP,EAAE,eAAe;IACL,CAAA;GACd,yBACC,oBAAC,YAAD;IAAY,OAAM;IAAS,IAAI;KAAE,IAAI;KAAG,UAAU;KAAI;IAAE,SAAQ;cAC9D,oBAAC,MAAD;KAAM,MAAM,MAAM;KAAiB,IAAI,EAAE,IAAI,GAAG;eAC7C,EAAE,gCAAgC;KAC9B,CAAA;IACI,CAAA;GAEJ"}
+{"version":3,"file":"Login.mjs","names":[],"sources":["../../../src/components/LoginForm/Login.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Button from '@mui/material/Button';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport type { FC } from 'react';\nimport React from 'react';\nimport type { FieldErrors, UseFormHandleSubmit, UseFormRegister } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { getConfiguration } from '../../configuration';\nimport { Route } from '../../utils';\nimport LoginDialogFormError from '../LoginDialog/LoginDialogFormError';\nimport PasswordField from './PasswordField';\nimport UsernameField from './UsernameField';\n\nconst StyledForm = styled('form')<{ theme?: Theme }>(({ theme }) => ({\n  marginTop: theme.spacing(1),\n}));\n\nconst StyledButton = styled(Button)<{ theme?: Theme }>(({ theme }) => ({\n  margin: theme.spacing(3, 0, 2),\n}));\n\nexport interface LoginFormValues {\n  username: string;\n  password: string;\n}\n\ninterface Props {\n  register: UseFormRegister<LoginFormValues>;\n  handleSubmit: UseFormHandleSubmit<LoginFormValues>;\n  onSubmit: (data: LoginFormValues) => void;\n  errors: FieldErrors<LoginFormValues>;\n  isValid: boolean;\n}\n\nconst LoginForm: FC<Props> = ({ register, handleSubmit, onSubmit, errors, isValid }) => {\n  const { t } = useTranslation();\n  const configuration = getConfiguration();\n  const changePasswordEnabled = configuration?.flags?.changePassword;\n\n  return (\n    <StyledForm noValidate={true} onSubmit={handleSubmit(onSubmit)}>\n      <UsernameField errors={errors} register={register} />\n      <PasswordField errors={errors} register={register} />\n\n      {errors.root && <LoginDialogFormError error={errors.root} />}\n\n      <StyledButton\n        color=\"primary\"\n        data-testid=\"login-dialog-form-login-button\"\n        disabled={!isValid}\n        fullWidth={true}\n        id=\"login--dialog-button-submit\"\n        size=\"large\"\n        type=\"submit\"\n        variant=\"contained\"\n      >\n        {t('button.login')}\n      </StyledButton>\n      {changePasswordEnabled && (\n        <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n          <Link href={Route.CHANGE_PASSWORD} sx={{ ml: 1 }}>\n            {t('security.changePassword.title')}\n          </Link>\n        </Typography>\n      )}\n    </StyledForm>\n  );\n};\n\nexport default LoginForm;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,OAAO,EAAqB,EAAE,aAAa,EACnE,WAAW,MAAM,QAAQ,EAAE,EAC5B,EAAE;AAEH,IAAM,eAAe,OAAO,OAAO,EAAqB,EAAE,aAAa,EACrE,QAAQ,MAAM,QAAQ,GAAG,GAAG,EAAE,EAC/B,EAAE;AAeH,IAAM,aAAwB,EAAE,UAAU,cAAc,UAAU,QAAQ,cAAc;CACtF,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,wBADgB,kBAAkB,EACK,OAAO;AAEpD,QACE,qBAAC,YAAD;EAAY,YAAY;EAAM,UAAU,aAAa,SAAS;YAA9D;GACE,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GACrD,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GAEpD,OAAO,QAAQ,oBAAC,sBAAD,EAAsB,OAAO,OAAO,MAAQ,CAAA;GAE5D,oBAAC,cAAD;IACE,OAAM;IACN,eAAY;IACZ,UAAU,CAAC;IACX,WAAW;IACX,IAAG;IACH,MAAK;IACL,MAAK;IACL,SAAQ;cAEP,EAAE,eAAe;IACL,CAAA;GACd,yBACC,oBAAC,sBAAD;IAAY,OAAM;IAAS,IAAI;KAAE,IAAI;KAAG,UAAU;KAAI;IAAE,SAAQ;cAC9D,oBAAC,MAAD;KAAM,MAAM,MAAM;KAAiB,IAAI,EAAE,IAAI,GAAG;eAC7C,EAAE,gCAAgC;KAC9B,CAAA;IACI,CAAA;GAEJ"}

package/build/components/NoItems/NoItems.mjs

@@ -1,11 +1,11 @@
 import "react";
 import { jsx } from "react/jsx-runtime";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import Alert from "@mui/material/Alert";
 //#region src/components/NoItems/NoItems.tsx
 var NoItems = ({ text, ...props }) => /* @__PURE__ */ jsx(Alert, {
 	severity: "info",
-	children: /* @__PURE__ */ jsx(Typography, {
+	children: /* @__PURE__ */ jsx(MaterialUITypography, {
 		...props,
 		children: text
 	})

package/build/components/NoItems/NoItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NoItems.mjs","names":[],"sources":["../../../src/components/NoItems/NoItems.tsx"],"sourcesContent":["import Alert from '@mui/material/Alert';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\n\ninterface Props {\n  text: string;\n}\n\nconst NoItems: React.FC<Props> = ({ text, ...props }) => (\n  // @ts-ignore - Alert does accept children despite the type error\n  <Alert severity=\"info\">\n    <Typography {...props}>{text}</Typography>\n  </Alert>\n);\n\nexport default NoItems;\n"],"mappings":";;;;;AAQA,IAAM,WAA4B,EAAE,MAAM,GAAG,YAE3C,oBAAC,OAAD;CAAO,UAAS;WACd,oBAAC,YAAD;EAAY,GAAI;YAAQ;EAAkB,CAAA;CACpC,CAAA"}
+{"version":3,"file":"NoItems.mjs","names":[],"sources":["../../../src/components/NoItems/NoItems.tsx"],"sourcesContent":["import Alert from '@mui/material/Alert';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\n\ninterface Props {\n  text: string;\n}\n\nconst NoItems: React.FC<Props> = ({ text, ...props }) => (\n  // @ts-ignore - Alert does accept children despite the type error\n  <Alert severity=\"info\">\n    <Typography {...props}>{text}</Typography>\n  </Alert>\n);\n\nexport default NoItems;\n"],"mappings":";;;;;AAQA,IAAM,WAA4B,EAAE,MAAM,GAAG,YAE3C,oBAAC,OAAD;CAAO,UAAS;WACd,oBAAC,sBAAD;EAAY,GAAI;YAAQ;EAAkB,CAAA;CACpC,CAAA"}

package/build/components/Package/Package.mjs

@@ -20,7 +20,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import BugReport from "@mui/icons-material/BugReport";
+import BugReportIcon from "@mui/icons-material/BugReport";
 import DownloadIcon from "@mui/icons-material/CloudDownload";
 import HomeIcon from "@mui/icons-material/Home";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -75,7 +75,7 @@ var Package = ({ author: { name: authorName, avatar: authorAvatar }, bugs, descr
 				"aria-label": t("package.bugs"),
 				color: "primary",
 				size: "large",
-				children: /* @__PURE__ */ jsx(BugReport, {})
+				children: /* @__PURE__ */ jsx(BugReportIcon, {})
 			})
 		})
 	});

package/build/components/Package/Package.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Package.mjs","names":[],"sources":["../../../src/components/Package/Package.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport BugReport from '@mui/icons-material/BugReport';\nimport DownloadIcon from '@mui/icons-material/CloudDownload';\nimport HomeIcon from '@mui/icons-material/Home';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Grid from '@mui/material/Grid';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport { common, grey } from '@mui/material/colors';\nimport React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { Link, LinkExternal, useDownload, useManifests } from '../../';\nimport { FileBinary, Law, Time, Version } from '../../components/Icons';\nimport { getConfiguration } from '../../configuration';\nimport type { Author as PackageAuthor } from '../../providers/ManifestsProvider/ManifestsProvider';\nimport type { PackageMetaInterface } from '../../types/packageMeta';\nimport { Route, url, utils } from '../../utils';\nimport KeywordListItems from '../Keywords/KeywordListItems';\nimport {\n  Author,\n  Avatar,\n  Description,\n  Details,\n  GridRightAligned,\n  IconButton,\n  OverviewItem,\n  PackageListItemText,\n  PackageTitle,\n  Published,\n  Wrapper,\n  WrapperLink,\n} from './styles';\n\ninterface Bugs {\n  url: string;\n}\n\ninterface Dist {\n  unpackedSize: number;\n  tarball: string;\n}\n\nexport interface PackageInterface {\n  name: string;\n  version: string;\n  time?: number | string;\n  author: PackageAuthor;\n  description?: string;\n  keywords?: PackageMetaInterface['latest']['keywords'];\n  license?: PackageMetaInterface['latest']['license'];\n  homepage?: string;\n  bugs?: Bugs;\n  dist?: Dist;\n  showDownload?: boolean;\n}\n\nconst Package: React.FC<PackageInterface> = ({\n  author: { name: authorName, avatar: authorAvatar },\n  bugs,\n  description,\n  dist,\n  homepage,\n  keywords,\n  license,\n  name: packageName,\n  time,\n  showDownload = true,\n  version,\n}) => {\n  const config = getConfiguration();\n  const { t } = useTranslation();\n  const { isLoading } = useManifests();\n  const { downloadTarball } = useDownload();\n\n  const handleDownload = useCallback(\n    async (tarballDist: string) => {\n      // FIXME: check, the dist might be different thant npmjs\n      const link = tarballDist.replace(`https://registry.npmjs.org/`, config.base);\n      downloadTarball?.({ link });\n    },\n    [config, downloadTarball]\n  );\n\n  const renderVersionInfo = (): React.ReactNode =>\n    version && (\n      <OverviewItem>\n        <StyledVersion />\n        {t('package.version', { version })}\n      </OverviewItem>\n    );\n\n  const renderAuthorInfo = (): React.ReactNode => {\n    const name = utils.getAuthorName(authorName);\n    return (\n      <OverviewItem>\n        <Author>\n          <Avatar alt={name} src={authorAvatar} />\n          <Details>{name}</Details>\n        </Author>\n      </OverviewItem>\n    );\n  };\n\n  const renderFileSize = (): React.ReactNode =>\n    dist?.unpackedSize && (\n      <OverviewItem>\n        <StyledFileBinary />\n        {utils.fileSizeSI(dist.unpackedSize)}\n      </OverviewItem>\n    );\n\n  const renderLicenseInfo = (): React.ReactNode =>\n    license && (\n      <OverviewItem>\n        <StyledLaw />\n        {license as string}\n      </OverviewItem>\n    );\n\n  const renderPublishedInfo = (): React.ReactNode =>\n    time && (\n      <OverviewItem>\n        <StyledTime />\n        <Published title={utils.formatDate(time)}>\n          {t('package.published-on', { time: utils.formatDateDistance(time) })}\n        </Published>\n      </OverviewItem>\n    );\n\n  const renderHomePageLink = (): React.ReactNode =>\n    homepage &&\n    url.isURL(homepage) && (\n      <LinkExternal to={homepage}>\n        <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>\n          <IconButton aria-label={t('package.homepage')} color=\"primary\" size=\"large\">\n            <HomeIcon />\n          </IconButton>\n        </Tooltip>\n      </LinkExternal>\n    );\n\n  const renderBugsLink = (): React.ReactNode =>\n    bugs?.url &&\n    url.isURL(bugs.url) && (\n      <LinkExternal to={bugs.url}>\n        <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>\n          <IconButton aria-label={t('package.bugs')} color=\"primary\" size=\"large\">\n            <BugReport />\n          </IconButton>\n        </Tooltip>\n      </LinkExternal>\n    );\n\n  const renderDownloadLink = (): React.ReactNode =>\n    dist?.tarball &&\n    url.isURL(dist.tarball) && (\n      <Link\n        onClick={() => {\n          handleDownload(dist.tarball);\n        }}\n        to=\"#\"\n      >\n        <Tooltip\n          aria-label={t('package.download', { what: t('package.the-tar-file') })}\n          title={t('package.tarball')}\n        >\n          <IconButton\n            aria-label={t('package.download')}\n            color=\"primary\"\n            data-testid=\"download-tarball\"\n            size=\"large\"\n          >\n            {isLoading ? <CircularProgress size={13} /> : <DownloadIcon />}\n          </IconButton>\n        </Tooltip>\n      </Link>\n    );\n\n  const renderPrimaryComponent = (): React.ReactNode => {\n    return (\n      <Grid alignItems=\"center\" container={true} size={{ xs: 12 }} wrap=\"wrap\">\n        <Grid size=\"grow\">\n          <WrapperLink to={`${Route.DETAIL}${packageName}`}>\n            <PackageTitle className=\"package-title\" data-testid=\"package-title\">\n              {packageName}\n            </PackageTitle>\n          </WrapperLink>\n        </Grid>\n        <GridRightAligned size=\"auto\">\n          {renderHomePageLink()}\n          {renderBugsLink()}\n          {showDownload && renderDownloadLink()}\n        </GridRightAligned>\n      </Grid>\n    );\n  };\n\n  const renderSecondaryComponent = (): React.ReactNode => <Description>{description}</Description>;\n\n  const renderPackageListItemText = (): React.ReactNode => (\n    <PackageListItemText\n      primary={renderPrimaryComponent()}\n      secondary={renderSecondaryComponent()}\n    />\n  );\n\n  const renderKeywords = (): React.ReactNode => (\n    <ListItem alignItems={'flex-start'} sx={{ py: 0, my: 0 }}>\n      <List sx={{ p: 0, my: 0 }}>\n        <KeywordListItems keywords={keywords} />\n      </List>\n    </ListItem>\n  );\n\n  return (\n    <Wrapper className={'package'} data-testid=\"package-item-list\">\n      <ListItem alignItems={'flex-start'} sx={{ mb: 0 }}>\n        {renderPackageListItemText()}\n      </ListItem>\n      {keywords && keywords?.length > 0 ? renderKeywords() : null}\n      <ListItem alignItems={'flex-start'} sx={{ mt: 0 }}>\n        {renderAuthorInfo()}\n        {renderVersionInfo()}\n        {renderPublishedInfo()}\n        {renderFileSize()}\n        {renderLicenseInfo()}\n      </ListItem>\n    </Wrapper>\n  );\n};\n\nexport default Package;\n\nconst iconStyle = ({ theme }: { theme: Theme }) => css`\n  margin: 0 10px 0 0;\n  fill: ${theme.palette.mode === 'light' ? grey[900] : common.white};\n`;\n\nconst StyledVersion = styled(Version)`\n  ${iconStyle};\n`;\n\nconst StyledFileBinary = styled(FileBinary)`\n  ${iconStyle};\n`;\n\nconst StyledLaw = styled(Law)`\n  ${iconStyle};\n`;\n\nconst StyledTime = styled(Time)`\n  ${iconStyle};\n`;\n"],"mappings":"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"}
+{"version":3,"file":"Package.mjs","names":[],"sources":["../../../src/components/Package/Package.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport BugReport from '@mui/icons-material/BugReport';\nimport DownloadIcon from '@mui/icons-material/CloudDownload';\nimport HomeIcon from '@mui/icons-material/Home';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Grid from '@mui/material/Grid';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport { common, grey } from '@mui/material/colors';\nimport React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { Link, LinkExternal, useDownload, useManifests } from '../../';\nimport { FileBinary, Law, Time, Version } from '../../components/Icons';\nimport { getConfiguration } from '../../configuration';\nimport type { Author as PackageAuthor } from '../../providers/ManifestsProvider/ManifestsProvider';\nimport type { PackageMetaInterface } from '../../types/packageMeta';\nimport { Route, url, utils } from '../../utils';\nimport KeywordListItems from '../Keywords/KeywordListItems';\nimport {\n  Author,\n  Avatar,\n  Description,\n  Details,\n  GridRightAligned,\n  IconButton,\n  OverviewItem,\n  PackageListItemText,\n  PackageTitle,\n  Published,\n  Wrapper,\n  WrapperLink,\n} from './styles';\n\ninterface Bugs {\n  url: string;\n}\n\ninterface Dist {\n  unpackedSize: number;\n  tarball: string;\n}\n\nexport interface PackageInterface {\n  name: string;\n  version: string;\n  time?: number | string;\n  author: PackageAuthor;\n  description?: string;\n  keywords?: PackageMetaInterface['latest']['keywords'];\n  license?: PackageMetaInterface['latest']['license'];\n  homepage?: string;\n  bugs?: Bugs;\n  dist?: Dist;\n  showDownload?: boolean;\n}\n\nconst Package: React.FC<PackageInterface> = ({\n  author: { name: authorName, avatar: authorAvatar },\n  bugs,\n  description,\n  dist,\n  homepage,\n  keywords,\n  license,\n  name: packageName,\n  time,\n  showDownload = true,\n  version,\n}) => {\n  const config = getConfiguration();\n  const { t } = useTranslation();\n  const { isLoading } = useManifests();\n  const { downloadTarball } = useDownload();\n\n  const handleDownload = useCallback(\n    async (tarballDist: string) => {\n      // FIXME: check, the dist might be different thant npmjs\n      const link = tarballDist.replace(`https://registry.npmjs.org/`, config.base);\n      downloadTarball?.({ link });\n    },\n    [config, downloadTarball]\n  );\n\n  const renderVersionInfo = (): React.ReactNode =>\n    version && (\n      <OverviewItem>\n        <StyledVersion />\n        {t('package.version', { version })}\n      </OverviewItem>\n    );\n\n  const renderAuthorInfo = (): React.ReactNode => {\n    const name = utils.getAuthorName(authorName);\n    return (\n      <OverviewItem>\n        <Author>\n          <Avatar alt={name} src={authorAvatar} />\n          <Details>{name}</Details>\n        </Author>\n      </OverviewItem>\n    );\n  };\n\n  const renderFileSize = (): React.ReactNode =>\n    dist?.unpackedSize && (\n      <OverviewItem>\n        <StyledFileBinary />\n        {utils.fileSizeSI(dist.unpackedSize)}\n      </OverviewItem>\n    );\n\n  const renderLicenseInfo = (): React.ReactNode =>\n    license && (\n      <OverviewItem>\n        <StyledLaw />\n        {license as string}\n      </OverviewItem>\n    );\n\n  const renderPublishedInfo = (): React.ReactNode =>\n    time && (\n      <OverviewItem>\n        <StyledTime />\n        <Published title={utils.formatDate(time)}>\n          {t('package.published-on', { time: utils.formatDateDistance(time) })}\n        </Published>\n      </OverviewItem>\n    );\n\n  const renderHomePageLink = (): React.ReactNode =>\n    homepage &&\n    url.isURL(homepage) && (\n      <LinkExternal to={homepage}>\n        <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>\n          <IconButton aria-label={t('package.homepage')} color=\"primary\" size=\"large\">\n            <HomeIcon />\n          </IconButton>\n        </Tooltip>\n      </LinkExternal>\n    );\n\n  const renderBugsLink = (): React.ReactNode =>\n    bugs?.url &&\n    url.isURL(bugs.url) && (\n      <LinkExternal to={bugs.url}>\n        <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>\n          <IconButton aria-label={t('package.bugs')} color=\"primary\" size=\"large\">\n            <BugReport />\n          </IconButton>\n        </Tooltip>\n      </LinkExternal>\n    );\n\n  const renderDownloadLink = (): React.ReactNode =>\n    dist?.tarball &&\n    url.isURL(dist.tarball) && (\n      <Link\n        onClick={() => {\n          handleDownload(dist.tarball);\n        }}\n        to=\"#\"\n      >\n        <Tooltip\n          aria-label={t('package.download', { what: t('package.the-tar-file') })}\n          title={t('package.tarball')}\n        >\n          <IconButton\n            aria-label={t('package.download')}\n            color=\"primary\"\n            data-testid=\"download-tarball\"\n            size=\"large\"\n          >\n            {isLoading ? <CircularProgress size={13} /> : <DownloadIcon />}\n          </IconButton>\n        </Tooltip>\n      </Link>\n    );\n\n  const renderPrimaryComponent = (): React.ReactNode => {\n    return (\n      <Grid alignItems=\"center\" container={true} size={{ xs: 12 }} wrap=\"wrap\">\n        <Grid size=\"grow\">\n          <WrapperLink to={`${Route.DETAIL}${packageName}`}>\n            <PackageTitle className=\"package-title\" data-testid=\"package-title\">\n              {packageName}\n            </PackageTitle>\n          </WrapperLink>\n        </Grid>\n        <GridRightAligned size=\"auto\">\n          {renderHomePageLink()}\n          {renderBugsLink()}\n          {showDownload && renderDownloadLink()}\n        </GridRightAligned>\n      </Grid>\n    );\n  };\n\n  const renderSecondaryComponent = (): React.ReactNode => <Description>{description}</Description>;\n\n  const renderPackageListItemText = (): React.ReactNode => (\n    <PackageListItemText\n      primary={renderPrimaryComponent()}\n      secondary={renderSecondaryComponent()}\n    />\n  );\n\n  const renderKeywords = (): React.ReactNode => (\n    <ListItem alignItems={'flex-start'} sx={{ py: 0, my: 0 }}>\n      <List sx={{ p: 0, my: 0 }}>\n        <KeywordListItems keywords={keywords} />\n      </List>\n    </ListItem>\n  );\n\n  return (\n    <Wrapper className={'package'} data-testid=\"package-item-list\">\n      <ListItem alignItems={'flex-start'} sx={{ mb: 0 }}>\n        {renderPackageListItemText()}\n      </ListItem>\n      {keywords && keywords?.length > 0 ? renderKeywords() : null}\n      <ListItem alignItems={'flex-start'} sx={{ mt: 0 }}>\n        {renderAuthorInfo()}\n        {renderVersionInfo()}\n        {renderPublishedInfo()}\n        {renderFileSize()}\n        {renderLicenseInfo()}\n      </ListItem>\n    </Wrapper>\n  );\n};\n\nexport default Package;\n\nconst iconStyle = ({ theme }: { theme: Theme }) => css`\n  margin: 0 10px 0 0;\n  fill: ${theme.palette.mode === 'light' ? grey[900] : common.white};\n`;\n\nconst StyledVersion = styled(Version)`\n  ${iconStyle};\n`;\n\nconst StyledFileBinary = styled(FileBinary)`\n  ${iconStyle};\n`;\n\nconst StyledLaw = styled(Law)`\n  ${iconStyle};\n`;\n\nconst StyledTime = styled(Time)`\n  ${iconStyle};\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,IAAM,WAAuC,EAC3C,QAAQ,EAAE,MAAM,YAAY,QAAQ,gBACpC,MACA,aACA,MACA,UACA,UACA,SACA,MAAM,aACN,MACA,eAAe,MACf,cACI;CACJ,MAAM,SAAS,kBAAkB;CACjC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,cAAc,cAAc;CACpC,MAAM,EAAE,oBAAoB,aAAa;CAEzC,MAAM,iBAAiB,YACrB,OAAO,gBAAwB;EAE7B,MAAM,OAAO,YAAY,QAAQ,+BAA+B,OAAO,KAAK;AAC5E,oBAAkB,EAAE,MAAM,CAAC;IAE7B,CAAC,QAAQ,gBAAgB,CAC1B;CAED,MAAM,0BACJ,WACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EAChB,EAAE,mBAAmB,EAAE,SAAS,CAAC,CACrB,EAAA,CAAA;CAGnB,MAAM,yBAA0C;EAC9C,MAAM,OAAO,cAAoB,WAAW;AAC5C,SACE,oBAAC,cAAD,EAAA,UACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD;GAAQ,KAAK;GAAM,KAAK;GAAgB,CAAA,EACxC,oBAAC,SAAD,EAAA,UAAU,MAAe,CAAA,CAClB,EAAA,CAAA,EACI,CAAA;;CAInB,MAAM,uBACJ,MAAM,gBACJ,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAoB,CAAA,EACnB,WAAiB,KAAK,aAAa,CACvB,EAAA,CAAA;CAGnB,MAAM,0BACJ,WACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,WAAD,EAAa,CAAA,EACZ,QACY,EAAA,CAAA;CAGnB,MAAM,4BACJ,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,YAAD,EAAc,CAAA,EACd,oBAAC,WAAD;EAAW,OAAO,WAAiB,KAAK;YACrC,EAAE,wBAAwB,EAAE,MAAM,mBAAyB,KAAK,EAAE,CAAC;EAC1D,CAAA,CACC,EAAA,CAAA;CAGnB,MAAM,2BACJ,YACA,MAAU,SAAS,IACjB,oBAAC,cAAD;EAAc,IAAI;YAChB,oBAAC,SAAD;GAAS,cAAY,EAAE,mBAAmB;GAAE,OAAO,EAAE,0BAA0B;aAC7E,oBAAC,YAAD;IAAY,cAAY,EAAE,mBAAmB;IAAE,OAAM;IAAU,MAAK;cAClE,oBAAC,UAAD,EAAY,CAAA;IACD,CAAA;GACL,CAAA;EACG,CAAA;CAGnB,MAAM,uBACJ,MAAM,OACN,MAAU,KAAK,IAAI,IACjB,oBAAC,cAAD;EAAc,IAAI,KAAK;YACrB,oBAAC,SAAD;GAAS,cAAY,EAAE,eAAe;GAAE,OAAO,EAAE,wBAAwB;aACvE,oBAAC,YAAD;IAAY,cAAY,EAAE,eAAe;IAAE,OAAM;IAAU,MAAK;cAC9D,oBAAC,eAAD,EAAa,CAAA;IACF,CAAA;GACL,CAAA;EACG,CAAA;CAGnB,MAAM,2BACJ,MAAM,WACN,MAAU,KAAK,QAAQ,IACrB,oBAAC,MAAD;EACE,eAAe;AACb,kBAAe,KAAK,QAAQ;;EAE9B,IAAG;YAEH,oBAAC,SAAD;GACE,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;GACtE,OAAO,EAAE,kBAAkB;aAE3B,oBAAC,YAAD;IACE,cAAY,EAAE,mBAAmB;IACjC,OAAM;IACN,eAAY;IACZ,MAAK;cAEJ,YAAY,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,GAAG,oBAAC,cAAD,EAAgB,CAAA;IACnD,CAAA;GACL,CAAA;EACL,CAAA;CAGX,MAAM,+BAAgD;AACpD,SACE,qBAAC,MAAD;GAAM,YAAW;GAAS,WAAW;GAAM,MAAM,EAAE,IAAI,IAAI;GAAE,MAAK;aAAlE,CACE,oBAAC,MAAD;IAAM,MAAK;cACT,oBAAC,aAAD;KAAa,IAAI,GAAG,MAAM,SAAS;eACjC,oBAAC,cAAD;MAAc,WAAU;MAAgB,eAAY;gBACjD;MACY,CAAA;KACH,CAAA;IACT,CAAA,EACP,qBAAC,kBAAD;IAAkB,MAAK;cAAvB;KACG,oBAAoB;KACpB,gBAAgB;KAChB,gBAAgB,oBAAoB;KACpB;MACd;;;CAIX,MAAM,iCAAkD,oBAAC,aAAD,EAAA,UAAc,aAA0B,CAAA;CAEhG,MAAM,kCACJ,oBAAC,qBAAD;EACE,SAAS,wBAAwB;EACjC,WAAW,0BAA0B;EACrC,CAAA;CAGJ,MAAM,uBACJ,oBAAC,UAAD;EAAU,YAAY;EAAc,IAAI;GAAE,IAAI;GAAG,IAAI;GAAG;YACtD,oBAAC,MAAD;GAAM,IAAI;IAAE,GAAG;IAAG,IAAI;IAAG;aACvB,oBAAC,kBAAD,EAA4B,UAAY,CAAA;GACnC,CAAA;EACE,CAAA;AAGb,QACE,qBAAC,SAAD;EAAS,WAAW;EAAW,eAAY;YAA3C;GACE,oBAAC,UAAD;IAAU,YAAY;IAAc,IAAI,EAAE,IAAI,GAAG;cAC9C,2BAA2B;IACnB,CAAA;GACV,YAAY,UAAU,SAAS,IAAI,gBAAgB,GAAG;GACvD,qBAAC,UAAD;IAAU,YAAY;IAAc,IAAI,EAAE,IAAI,GAAG;cAAjD;KACG,kBAAkB;KAClB,mBAAmB;KACnB,qBAAqB;KACrB,gBAAgB;KAChB,mBAAmB;KACX;;GACH;;;AAMd,IAAM,aAAa,EAAE,YAA8B,GAAG;;UAE5C,MAAM,QAAQ,SAAS,UAAU,KAAK,OAAO,OAAO,MAAM;;AAGpE,IAAM,gBAAgB,OAAO,QAAQ;IACjC,UAAU;;AAGd,IAAM,mBAAmB,OAAO,WAAW;IACvC,UAAU;;AAGd,IAAM,YAAY,OAAO,IAAI;IACzB,UAAU;;AAGd,IAAM,aAAa,OAAO,KAAK;IAC3B,UAAU"}

package/build/components/Person/PersonTooltip.mjs

@@ -4,9 +4,9 @@ import LinkExternal from "../LinkExternal/LinkExternal.mjs";
 import "../LinkExternal/index.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 //#region src/components/Person/PersonTooltip.tsx
-var PersonTooltip = ({ person }) => /* @__PURE__ */ jsxs(Typography, {
+var PersonTooltip = ({ person }) => /* @__PURE__ */ jsxs(MaterialUITypography, {
 	"data-testid": person.name + "-tooltip",
 	children: [
 		person.name,

package/build/components/Person/PersonTooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PersonTooltip.mjs","names":[],"sources":["../../../src/components/Person/PersonTooltip.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography';\nimport React from 'react';\n\nimport type { Developer } from '../../types/packageMeta';\nimport { url } from '../../utils';\nimport LinkExternal from '../LinkExternal';\n\nconst PersonTooltip: React.FC<{ person: Developer }> = ({ person }) => (\n  <Typography data-testid={person.name + '-tooltip'}>\n    {person.name}\n    {person.email && url.isEmail(person.email) && (\n      <LinkExternal to={`mailto:${person.email}`}>\n        <br />\n        {person.email}\n      </LinkExternal>\n    )}\n    {person.url && url.isURL(person.url) && (\n      <LinkExternal to={person.url}>\n        <br />\n        {person.url}\n      </LinkExternal>\n    )}\n  </Typography>\n);\n\nexport default PersonTooltip;\n"],"mappings":";;;;;;;;AAOA,IAAM,iBAAkD,EAAE,aACxD,qBAAC,YAAD;CAAY,eAAa,OAAO,OAAO;WAAvC;EACG,OAAO;EACP,OAAO,SAAS,QAAY,OAAO,MAAM,IACxC,qBAAC,cAAD;GAAc,IAAI,UAAU,OAAO;aAAnC,CACE,oBAAC,MAAD,EAAM,CAAA,EACL,OAAO,MACK;;EAEhB,OAAO,OAAO,MAAU,OAAO,IAAI,IAClC,qBAAC,cAAD;GAAc,IAAI,OAAO;aAAzB,CACE,oBAAC,MAAD,EAAM,CAAA,EACL,OAAO,IACK;;EAEN"}
+{"version":3,"file":"PersonTooltip.mjs","names":[],"sources":["../../../src/components/Person/PersonTooltip.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography';\nimport React from 'react';\n\nimport type { Developer } from '../../types/packageMeta';\nimport { url } from '../../utils';\nimport LinkExternal from '../LinkExternal';\n\nconst PersonTooltip: React.FC<{ person: Developer }> = ({ person }) => (\n  <Typography data-testid={person.name + '-tooltip'}>\n    {person.name}\n    {person.email && url.isEmail(person.email) && (\n      <LinkExternal to={`mailto:${person.email}`}>\n        <br />\n        {person.email}\n      </LinkExternal>\n    )}\n    {person.url && url.isURL(person.url) && (\n      <LinkExternal to={person.url}>\n        <br />\n        {person.url}\n      </LinkExternal>\n    )}\n  </Typography>\n);\n\nexport default PersonTooltip;\n"],"mappings":";;;;;;;;AAOA,IAAM,iBAAkD,EAAE,aACxD,qBAAC,sBAAD;CAAY,eAAa,OAAO,OAAO;WAAvC;EACG,OAAO;EACP,OAAO,SAAS,QAAY,OAAO,MAAM,IACxC,qBAAC,cAAD;GAAc,IAAI,UAAU,OAAO;aAAnC,CACE,oBAAC,MAAD,EAAM,CAAA,EACL,OAAO,MACK;;EAEhB,OAAO,OAAO,MAAU,OAAO,IAAI,IAClC,qBAAC,cAAD;GAAc,IAAI,OAAO;aAAzB,CACE,oBAAC,MAAD,EAAM,CAAA,EACL,OAAO,IACK;;EAEN"}

package/build/components/Repository/Repository.mjs

@@ -13,11 +13,11 @@ import { useTranslation } from "react-i18next";
 import { common } from "@mui/material/colors";
 import List from "@mui/material/List";
 import Avatar from "@mui/material/Avatar";
-import Typography from "@mui/material/Typography";
+import MaterialUITypography from "@mui/material/Typography";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 //#region src/components/Repository/Repository.tsx
-var StyledText = styled(Typography)((props) => ({
+var StyledText = styled(MaterialUITypography)((props) => ({
 	fontWeight: props.theme.fontWeight.bold,
 	textTransform: "capitalize"
 }));

package/build/components/Repository/Repository.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Repository.mjs","names":[],"sources":["../../../src/components/Repository/Repository.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Avatar from '@mui/material/Avatar';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemText from '@mui/material/ListItemText';\nimport Typography from '@mui/material/Typography';\nimport { common } from '@mui/material/colors';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { url as urlUtils } from '../../utils';\nimport CopyClipboard from '../CopyClipboard';\nimport { Git } from '../Icons';\nimport LinkExternal from '../LinkExternal';\n\nconst StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst RepositoryListItem = styled(ListItem)({\n  padding: 0,\n  ':hover': {\n    backgroundColor: 'transparent',\n  },\n});\n\nconst RepositoryListItemText = styled(ListItemText)({\n  padding: '0 0 0 10px',\n  margin: 0,\n});\n\nconst RepositoryAvatar = styled(Avatar)({\n  padding: 0,\n  marginLeft: 0,\n  backgroundColor: 'transparent',\n});\n\nconst Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {\n  const { t } = useTranslation();\n  const url = packageMeta?.latest?.repository?.url;\n  if (!url || !urlUtils.isURL(url)) {\n    return null;\n  }\n\n  const getCorrectRepositoryURL = (): string => {\n    if (!url.includes('git+')) {\n      return url;\n    }\n\n    return url.split('git+')[1];\n  };\n\n  const repositoryURL = getCorrectRepositoryURL();\n\n  return (\n    <List\n      dense={true}\n      subheader={<StyledText variant=\"subtitle1\">{t('sidebar.repository.title')}</StyledText>}\n    >\n      <RepositoryListItem>\n        <RepositoryAvatar sx={{ bgcolor: common.white }}>\n          <Git />\n        </RepositoryAvatar>\n        <RepositoryListItemText\n          primary={\n            <CopyClipboard dataTestId=\"repositoryID\" text={repositoryURL} title={repositoryURL}>\n              <LinkExternal to={repositoryURL} variant=\"outline\">\n                {repositoryURL}\n              </LinkExternal>\n            </CopyClipboard>\n          }\n        />\n      </RepositoryListItem>\n    </List>\n  );\n};\n\nexport default Repository;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,WAAW,EAAqB,WAAW;CACnE,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAM,qBAAqB,OAAO,SAAS,CAAC;CAC1C,SAAS;CACT,UAAU,EACR,iBAAiB,eAClB;CACF,CAAC;AAEF,IAAM,yBAAyB,OAAO,aAAa,CAAC;CAClD,SAAS;CACT,QAAQ;CACT,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO,CAAC;CACtC,SAAS;CACT,YAAY;CACZ,iBAAiB;CAClB,CAAC;AAEF,IAAM,cAA8C,EAAE,kBAAkB;CACtE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,MAAM,aAAa,QAAQ,YAAY;AAC7C,KAAI,CAAC,OAAO,CAAC,MAAe,IAAI,CAC9B,QAAO;CAGT,MAAM,gCAAwC;AAC5C,MAAI,CAAC,IAAI,SAAS,OAAO,CACvB,QAAO;AAGT,SAAO,IAAI,MAAM,OAAO,CAAC;;CAG3B,MAAM,gBAAgB,yBAAyB;AAE/C,QACE,oBAAC,MAAD;EACE,OAAO;EACP,WAAW,oBAAC,YAAD;GAAY,SAAQ;aAAa,EAAE,2BAA2B;GAAc,CAAA;YAEvF,qBAAC,oBAAD,EAAA,UAAA,CACE,oBAAC,kBAAD;GAAkB,IAAI,EAAE,SAAS,OAAO,OAAO;aAC7C,oBAAC,KAAD,EAAO,CAAA;GACU,CAAA,EACnB,oBAAC,wBAAD,EACE,SACE,oBAAC,iBAAD;GAAe,YAAW;GAAe,MAAM;GAAe,OAAO;aACnE,oBAAC,cAAD;IAAc,IAAI;IAAe,SAAQ;cACtC;IACY,CAAA;GACD,CAAA,EAElB,CAAA,CACiB,EAAA,CAAA;EAChB,CAAA"}
+{"version":3,"file":"Repository.mjs","names":[],"sources":["../../../src/components/Repository/Repository.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Avatar from '@mui/material/Avatar';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemText from '@mui/material/ListItemText';\nimport Typography from '@mui/material/Typography';\nimport { common } from '@mui/material/colors';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { url as urlUtils } from '../../utils';\nimport CopyClipboard from '../CopyClipboard';\nimport { Git } from '../Icons';\nimport LinkExternal from '../LinkExternal';\n\nconst StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst RepositoryListItem = styled(ListItem)({\n  padding: 0,\n  ':hover': {\n    backgroundColor: 'transparent',\n  },\n});\n\nconst RepositoryListItemText = styled(ListItemText)({\n  padding: '0 0 0 10px',\n  margin: 0,\n});\n\nconst RepositoryAvatar = styled(Avatar)({\n  padding: 0,\n  marginLeft: 0,\n  backgroundColor: 'transparent',\n});\n\nconst Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {\n  const { t } = useTranslation();\n  const url = packageMeta?.latest?.repository?.url;\n  if (!url || !urlUtils.isURL(url)) {\n    return null;\n  }\n\n  const getCorrectRepositoryURL = (): string => {\n    if (!url.includes('git+')) {\n      return url;\n    }\n\n    return url.split('git+')[1];\n  };\n\n  const repositoryURL = getCorrectRepositoryURL();\n\n  return (\n    <List\n      dense={true}\n      subheader={<StyledText variant=\"subtitle1\">{t('sidebar.repository.title')}</StyledText>}\n    >\n      <RepositoryListItem>\n        <RepositoryAvatar sx={{ bgcolor: common.white }}>\n          <Git />\n        </RepositoryAvatar>\n        <RepositoryListItemText\n          primary={\n            <CopyClipboard dataTestId=\"repositoryID\" text={repositoryURL} title={repositoryURL}>\n              <LinkExternal to={repositoryURL} variant=\"outline\">\n                {repositoryURL}\n              </LinkExternal>\n            </CopyClipboard>\n          }\n        />\n      </RepositoryListItem>\n    </List>\n  );\n};\n\nexport default Repository;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,qBAAW,EAAqB,WAAW;CACnE,YAAY,MAAM,MAAM,WAAW;CACnC,eAAe;CAChB,EAAE;AAEH,IAAM,qBAAqB,OAAO,SAAS,CAAC;CAC1C,SAAS;CACT,UAAU,EACR,iBAAiB,eAClB;CACF,CAAC;AAEF,IAAM,yBAAyB,OAAO,aAAa,CAAC;CAClD,SAAS;CACT,QAAQ;CACT,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO,CAAC;CACtC,SAAS;CACT,YAAY;CACZ,iBAAiB;CAClB,CAAC;AAEF,IAAM,cAA8C,EAAE,kBAAkB;CACtE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,MAAM,aAAa,QAAQ,YAAY;AAC7C,KAAI,CAAC,OAAO,CAAC,MAAe,IAAI,CAC9B,QAAO;CAGT,MAAM,gCAAwC;AAC5C,MAAI,CAAC,IAAI,SAAS,OAAO,CACvB,QAAO;AAGT,SAAO,IAAI,MAAM,OAAO,CAAC;;CAG3B,MAAM,gBAAgB,yBAAyB;AAE/C,QACE,oBAAC,MAAD;EACE,OAAO;EACP,WAAW,oBAAC,YAAD;GAAY,SAAQ;aAAa,EAAE,2BAA2B;GAAc,CAAA;YAEvF,qBAAC,oBAAD,EAAA,UAAA,CACE,oBAAC,kBAAD;GAAkB,IAAI,EAAE,SAAS,OAAO,OAAO;aAC7C,oBAAC,KAAD,EAAO,CAAA;GACU,CAAA,EACnB,oBAAC,wBAAD,EACE,SACE,oBAAC,iBAAD;GAAe,YAAW;GAAe,MAAM;GAAe,OAAO;aACnE,oBAAC,cAAD;IAAc,IAAI;IAAe,SAAQ;cACtC;IACY,CAAA;GACD,CAAA,EAElB,CAAA,CACiB,EAAA,CAAA;EAChB,CAAA"}

package/build/components/Search/Search.js

@@ -1,20 +1,19 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_routes = require("../../utils/routes.js");
 require("../../utils/index.js");
-const require_AppConfigurationProvider = require("../../providers/AppConfigurationProvider/AppConfigurationProvider.js");
 const require_SearchProvider = require("../../providers/SearchProvider/SearchProvider.js");
 const require_AutoComplete = require("./AutoComplete/AutoComplete.js");
 require("./AutoComplete/index.js");
+const require_utils = require("./utils.js");
 const require_SearchItem = require("./SearchItem.js");
 const require_styles = require("./styles.js");
 require("../../index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_es = require("lodash-es");
 let react_i18next = require("react-i18next");
 let react_router = require("react-router");
-let lodash_debounce = require("lodash/debounce");
-lodash_debounce = require_runtime.__toESM(lodash_debounce);
 let _mui_icons_material_Search = require("@mui/icons-material/Search");
 _mui_icons_material_Search = require_runtime.__toESM(_mui_icons_material_Search);
 //#region src/components/Search/Search.tsx
@@ -26,8 +25,6 @@ var Search = () => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const navigate = (0, react_router.useNavigate)();
 	const { searchResults, isLoading, doSearch } = require_SearchProvider.useSearch();
-	const { configOptions: { flags } } = require_AppConfigurationProvider.useConfig();
-	const searchRemote = flags?.searchRemote ?? false;
 	const abortControllerRef = (0, react.useRef)(null);
 	const cancelAllSearchRequests = (0, react.useCallback)(() => {
 		if (abortControllerRef.current) {
@@ -42,10 +39,10 @@ var Search = () => {
 	const handleClickSearch = (0, react.useCallback)((event, value, reason) => {
 		event.stopPropagation();
 		if (reason === "selectOption") {
-			const pkgName = value["package"]?.name ?? value.name;
-			navigate(`${require_routes.Route.DETAIL}${pkgName}`);
+			const { name } = require_utils.normalizeSearchOption(value);
+			if (name) navigate(`${require_routes.Route.DETAIL}${name}`);
 		}
-	}, [navigate, searchRemote]);
+	}, [navigate]);
 	const doSearchRef = (0, react.useRef)(doSearch);
 	doSearchRef.current = doSearch;
 	/**
@@ -68,7 +65,7 @@ var Search = () => {
 			}
 		}
 	}, [cancelAllSearchRequests]);
-	const debouncedFetch = (0, react.useMemo)(() => (0, lodash_debounce.default)(handleFetchPackages, CONSTANTS.API_DELAY), [handleFetchPackages]);
+	const debouncedFetch = (0, react.useMemo)(() => (0, lodash_es.debounce)(handleFetchPackages, CONSTANTS.API_DELAY), [handleFetchPackages]);
 	(0, react.useEffect)(() => {
 		return () => {
 			debouncedFetch.cancel?.();
@@ -77,29 +74,16 @@ var Search = () => {
 	}, [debouncedFetch, cancelAllSearchRequests]);
 	const renderOption = (props, option) => {
 		const { key, ...otherProps } = props;
-		if (searchRemote) {
-			const item = option.package;
-			const isPrivate = option?.verdaccioPrivate;
-			const isCached = option?.verdaccioPkgCached;
-			const isRemote = !isCached && !isPrivate;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchItem.default, {
-				...otherProps,
-				description: item?.description,
-				isCached,
-				isPrivate,
-				isRemote,
-				name: item?.name,
-				version: item?.version
-			}, key);
-		} else {
-			const item = option.package;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchItem.default, {
-				...otherProps,
-				description: item?.description,
-				name: item?.name,
-				version: item?.version
-			}, key);
-		}
+		const { name, version, description, isPrivate, isCached, isRemote } = require_utils.normalizeSearchOption(option);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchItem.default, {
+			...otherProps,
+			description,
+			isCached,
+			isPrivate,
+			isRemote,
+			name,
+			version
+		}, key);
 	};
 	const renderInput = (params) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.StyledTextField, {
@@ -117,7 +101,7 @@ var Search = () => {
 		});
 	};
 	const getOptionLabel = (option) => {
-		return option?.package?.name;
+		return require_utils.normalizeSearchOption(option).name;
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AutoComplete.default, {
 		getOptionLabel,