@verdaccio/ui-components 5.0.0-next-9.24 → 5.0.0-next-9.26

package/build/components/Search/SearchItem.mjs

@@ -1,90 +1,74 @@
 import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigurationProvider.mjs";
-import { cleanDescription } from "./utils.mjs";
+import { SearchOrigin, cleanDescription } from "./utils.mjs";
 import "../../index.mjs";
 import styled from "@emotion/styled";
 import "react";
 import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Stack from "@mui/material/Stack";
-import Chip from "@mui/material/Chip";
-import Cached from "@mui/icons-material/Cached";
-import HttpsIcon from "@mui/icons-material/Https";
-import SyncAlt from "@mui/icons-material/SyncAlt";
+import LockOutlined from "@mui/icons-material/LockOutlined";
+import CloudOutlined from "@mui/icons-material/CloudOutlined";
+import Inventory2Outlined from "@mui/icons-material/Inventory2Outlined";
 //#region src/components/Search/SearchItem.tsx
-var Wrapper = styled.div({
+var ORIGIN_ICONS = {
+	[SearchOrigin.PRIVATE]: LockOutlined,
+	[SearchOrigin.CACHED]: Inventory2Outlined,
+	[SearchOrigin.REMOTE]: CloudOutlined
+};
+var Row = styled("div")({
 	display: "flex",
 	alignItems: "center",
-	width: "100%"
+	gap: 12,
+	width: "100%",
+	minWidth: 0
 });
-var Description = styled("div")(({ theme }) => ({
-	display: "none",
-	color: theme.palette.greyLight2,
-	lineHeight: "1.5rem",
-	whiteSpace: "nowrap",
-	textOverflow: "ellipsis",
-	alignItems: "center",
-	overflow: "hidden",
-	paddingLeft: theme.spacing(),
-	fontSize: theme.fontSize.ssm,
-	[`@media (min-width: ${theme.breakPoints.medium}px)`]: {
-		display: "block",
-		width: "300px"
-	},
-	[`@media (min-width: ${theme.breakPoints.large}px)`]: {
-		display: "block",
-		width: "500px"
-	},
-	[`@media (min-width: 1440px)`]: {
-		display: "block",
-		width: "600px"
-	}
-}));
-var NameGroup = styled.span({
+var Text = styled("div")({
+	display: "flex",
+	flexDirection: "column",
+	flex: 1,
+	minWidth: 0
+});
+var TitleLine = styled("div")({
 	display: "flex",
-	flex: "1"
+	alignItems: "baseline",
+	gap: 8
 });
 var Name = styled("span")(({ theme }) => ({
-	fontWeight: "700",
-	fontSize: theme.fontSize.sm
+	fontWeight: 700,
+	fontSize: theme.fontSize.sm,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+}));
+var Version = styled("span")(({ theme }) => ({
+	marginLeft: "auto",
+	flexShrink: 0,
+	fontSize: theme.fontSize.ssm,
+	color: theme.palette.text.secondary
+}));
+var Description = styled("span")(({ theme }) => ({
+	color: theme.palette.text.secondary,
+	fontSize: theme.fontSize.ssm,
+	lineHeight: 1.5,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
 }));
-var Version = styled("span")(({ theme }) => ({ fontSize: theme.fontSize.ssm }));
 var SearchItem = ({ name, description, isPrivate = false, isRemote = false, isCached = false, version, ...props }) => {
 	const { t } = useTranslation();
 	const { configOptions } = useConfig();
-	const handleDelete = () => {};
-	return /* @__PURE__ */ jsxs("li", {
+	const origin = isPrivate ? SearchOrigin.PRIVATE : isCached ? SearchOrigin.CACHED : isRemote ? SearchOrigin.REMOTE : void 0;
+	const OriginIcon = configOptions?.showUplinks && origin ? ORIGIN_ICONS[origin] : void 0;
+	return /* @__PURE__ */ jsx("li", {
 		...props,
-		style: { flexDirection: "column" },
-		children: [/* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(NameGroup, { children: [/* @__PURE__ */ jsx(Name, { children: name }), description && /* @__PURE__ */ jsx(Description, { children: cleanDescription(description) })] }), version && /* @__PURE__ */ jsx(Version, { children: version })] }), configOptions?.showUplinks && /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			spacing: 1,
-			children: [
-				isPrivate && /* @__PURE__ */ jsx(Chip, {
-					color: "primary",
-					deleteIcon: /* @__PURE__ */ jsx(HttpsIcon, {}),
-					label: t("search.isPrivate"),
-					onDelete: handleDelete,
-					size: "small"
-				}),
-				isRemote && !isPrivate && /* @__PURE__ */ jsx(Chip, {
-					deleteIcon: /* @__PURE__ */ jsx(SyncAlt, {}),
-					label: t("search.isRemote"),
-					onDelete: handleDelete,
-					size: "small",
-					variant: "outlined"
-				}),
-				isCached && /* @__PURE__ */ jsx(Chip, {
-					deleteIcon: /* @__PURE__ */ jsx(Cached, {}),
-					label: t("search.isCached"),
-					onDelete: handleDelete,
-					size: "small",
-					variant: "outlined"
-				})
-			]
-		}) })]
+		children: /* @__PURE__ */ jsxs(Row, { children: [OriginIcon && /* @__PURE__ */ jsx(OriginIcon, {
+			color: origin === SearchOrigin.PRIVATE ? "primary" : "action",
+			"data-testid": `search-origin-${origin}`,
+			fontSize: "small",
+			titleAccess: t(`search.origin.${origin}`)
+		}), /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsxs(TitleLine, { children: [/* @__PURE__ */ jsx(Name, { children: name }), version && /* @__PURE__ */ jsx(Version, { children: version })] }), description && /* @__PURE__ */ jsx(Description, { children: cleanDescription(description) })] })] })
 	});
 };
 //#endregion
-export { Description, SearchItem as default };
+export { Description, ORIGIN_ICONS, SearchItem as default };
 
 //# sourceMappingURL=SearchItem.mjs.map

package/build/components/Search/SearchItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItem.mjs","names":[],"sources":["../../../src/components/Search/SearchItem.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Cached from '@mui/icons-material/Cached';\nimport HttpsIcon from '@mui/icons-material/Https';\nimport SyncAlt from '@mui/icons-material/SyncAlt';\nimport type { Theme } from '@mui/material';\nimport Chip from '@mui/material/Chip';\nimport Stack from '@mui/material/Stack';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useConfig } from '../../';\nimport { cleanDescription } from './utils';\n\ntype SearchItemProps = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate?: boolean;\n  isCached?: boolean;\n  isRemote?: boolean;\n};\n\nconst Wrapper = styled.div({\n  display: 'flex',\n  alignItems: 'center',\n  width: '100%',\n});\n\nexport const Description = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'none',\n  color: theme.palette.greyLight2,\n  lineHeight: '1.5rem',\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  alignItems: 'center',\n  overflow: 'hidden',\n  paddingLeft: theme.spacing(),\n  fontSize: theme.fontSize.ssm,\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    display: 'block',\n    width: '300px',\n  },\n  [`@media (min-width: ${theme.breakPoints.large}px)`]: {\n    display: 'block',\n    width: '500px',\n  },\n  [`@media (min-width: 1440px)`]: {\n    display: 'block',\n    width: '600px',\n  },\n}));\n\nconst NameGroup = styled.span({\n  display: 'flex',\n  flex: '1',\n});\n\nconst Name = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  fontWeight: '700',\n  fontSize: theme.fontSize.sm,\n}));\n\nconst Version = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  fontSize: theme.fontSize.ssm,\n}));\n\nconst SearchItem: React.FC<SearchItemProps> = ({\n  name,\n  description,\n  isPrivate = false,\n  isRemote = false,\n  isCached = false,\n  version,\n  ...props\n}) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const handleDelete = () => {\n    // no action assigned by default\n  };\n  return (\n    <li {...props} style={{ flexDirection: 'column' }}>\n      <Wrapper>\n        <NameGroup>\n          <Name>{name}</Name>\n          {description && <Description>{cleanDescription(description)}</Description>}\n        </NameGroup>\n        {version && <Version>{version}</Version>}\n      </Wrapper>\n      {configOptions?.showUplinks && (\n        <Wrapper>\n          <Stack direction=\"row\" spacing={1}>\n            {isPrivate && (\n              <Chip\n                color=\"primary\"\n                deleteIcon={<HttpsIcon />}\n                label={t('search.isPrivate')}\n                onDelete={handleDelete}\n                size=\"small\"\n              />\n            )}\n            {isRemote && !isPrivate && (\n              <Chip\n                deleteIcon={<SyncAlt />}\n                label={t('search.isRemote')}\n                onDelete={handleDelete}\n                size=\"small\"\n                variant=\"outlined\"\n              />\n            )}\n            {isCached && (\n              <Chip\n                deleteIcon={<Cached />}\n                label={t('search.isCached')}\n                onDelete={handleDelete}\n                size=\"small\"\n                variant=\"outlined\"\n              />\n            )}\n          </Stack>\n        </Wrapper>\n      )}\n    </li>\n  );\n};\n\nexport default SearchItem;\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAM,UAAU,OAAO,IAAI;CACzB,SAAS;CACT,YAAY;CACZ,OAAO;AACT,CAAC;AAED,IAAa,cAAc,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CAC1E,SAAS;CACT,OAAO,MAAM,QAAQ;CACrB,YAAY;CACZ,YAAY;CACZ,cAAc;CACd,YAAY;CACZ,UAAU;CACV,aAAa,MAAM,QAAQ;CAC3B,UAAU,MAAM,SAAS;EACxB,sBAAsB,MAAM,YAAY,OAAO,OAAO;EACrD,SAAS;EACT,OAAO;CACT;EACC,sBAAsB,MAAM,YAAY,MAAM,OAAO;EACpD,SAAS;EACT,OAAO;CACT;EACC,+BAA+B;EAC9B,SAAS;EACT,OAAO;CACT;AACF,EAAE;AAEF,IAAM,YAAY,OAAO,KAAK;CAC5B,SAAS;CACT,MAAM;AACR,CAAC;AAED,IAAM,OAAO,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAC7D,YAAY;CACZ,UAAU,MAAM,SAAS;AAC3B,EAAE;AAEF,IAAM,UAAU,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa,EAChE,UAAU,MAAM,SAAS,IAC3B,EAAE;AAEF,IAAM,cAAyC,EAC7C,MACA,aACA,YAAY,OACZ,WAAW,OACX,WAAW,OACX,SACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,qBAAqB,CAE3B;CACA,OACE,qBAAC,MAAD;EAAI,GAAI;EAAO,OAAO,EAAE,eAAe,SAAS;EAAhD,UAAA,CACE,qBAAC,SAAD,EAAA,UAAA,CACE,qBAAC,WAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UAAO,KAAW,CAAA,GACjB,eAAe,oBAAC,aAAD,EAAA,UAAc,iBAAiB,WAAW,EAAe,CAAA,CAChE,EAAA,CAAA,GACV,WAAW,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CAChC,EAAA,CAAA,GACR,eAAe,eACd,oBAAC,SAAD,EAAA,UACE,qBAAC,OAAD;GAAO,WAAU;GAAM,SAAS;GAAhC,UAAA;IACG,aACC,oBAAC,MAAD;KACE,OAAM;KACN,YAAY,oBAAC,WAAD,CAAY,CAAA;KACxB,OAAO,EAAE,kBAAkB;KAC3B,UAAU;KACV,MAAK;IACN,CAAA;IAEF,YAAY,CAAC,aACZ,oBAAC,MAAD;KACE,YAAY,oBAAC,SAAD,CAAU,CAAA;KACtB,OAAO,EAAE,iBAAiB;KAC1B,UAAU;KACV,MAAK;KACL,SAAQ;IACT,CAAA;IAEF,YACC,oBAAC,MAAD;KACE,YAAY,oBAAC,QAAD,CAAS,CAAA;KACrB,OAAO,EAAE,iBAAiB;KAC1B,UAAU;KACV,MAAK;KACL,SAAQ;IACT,CAAA;GAEE;EACA,CAAA,EAAA,CAAA,CAET;;AAER"}
+{"version":3,"file":"SearchItem.mjs","names":[],"sources":["../../../src/components/Search/SearchItem.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport CloudOutlined from '@mui/icons-material/CloudOutlined';\nimport Inventory2Outlined from '@mui/icons-material/Inventory2Outlined';\nimport LockOutlined from '@mui/icons-material/LockOutlined';\nimport type { Theme } from '@mui/material';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useConfig } from '../../';\nimport { SearchOrigin, cleanDescription } from './utils';\n\ntype SearchItemProps = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate?: boolean;\n  isCached?: boolean;\n  isRemote?: boolean;\n};\n\nexport const ORIGIN_ICONS = {\n  [SearchOrigin.PRIVATE]: LockOutlined,\n  [SearchOrigin.CACHED]: Inventory2Outlined,\n  [SearchOrigin.REMOTE]: CloudOutlined,\n};\n\nconst Row = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 12,\n  width: '100%',\n  minWidth: 0,\n});\n\nconst Text = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n  minWidth: 0,\n});\n\nconst TitleLine = styled('div')({\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 8,\n});\n\nconst Name = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  fontWeight: 700,\n  fontSize: theme.fontSize.sm,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Version = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  marginLeft: 'auto',\n  flexShrink: 0,\n  fontSize: theme.fontSize.ssm,\n  color: theme.palette.text.secondary,\n}));\n\nexport const Description = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: theme.fontSize.ssm,\n  lineHeight: 1.5,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst SearchItem: React.FC<SearchItemProps> = ({\n  name,\n  description,\n  isPrivate = false,\n  isRemote = false,\n  isCached = false,\n  version,\n  ...props\n}) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const origin = isPrivate\n    ? SearchOrigin.PRIVATE\n    : isCached\n      ? SearchOrigin.CACHED\n      : isRemote\n        ? SearchOrigin.REMOTE\n        : undefined;\n  const OriginIcon = configOptions?.showUplinks && origin ? ORIGIN_ICONS[origin] : undefined;\n\n  return (\n    <li {...props}>\n      <Row>\n        {OriginIcon && (\n          <OriginIcon\n            color={origin === SearchOrigin.PRIVATE ? 'primary' : 'action'}\n            data-testid={`search-origin-${origin}`}\n            fontSize=\"small\"\n            titleAccess={t(`search.origin.${origin}`)}\n          />\n        )}\n        <Text>\n          <TitleLine>\n            <Name>{name}</Name>\n            {version && <Version>{version}</Version>}\n          </TitleLine>\n          {description && <Description>{cleanDescription(description)}</Description>}\n        </Text>\n      </Row>\n    </li>\n  );\n};\n\nexport default SearchItem;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,eAAe;EACzB,aAAa,UAAU;EACvB,aAAa,SAAS;EACtB,aAAa,SAAS;AACzB;AAEA,IAAM,MAAM,OAAO,KAAK,CAAC,CAAC;CACxB,SAAS;CACT,YAAY;CACZ,KAAK;CACL,OAAO;CACP,UAAU;AACZ,CAAC;AAED,IAAM,OAAO,OAAO,KAAK,CAAC,CAAC;CACzB,SAAS;CACT,eAAe;CACf,MAAM;CACN,UAAU;AACZ,CAAC;AAED,IAAM,YAAY,OAAO,KAAK,CAAC,CAAC;CAC9B,SAAS;CACT,YAAY;CACZ,KAAK;AACP,CAAC;AAED,IAAM,OAAO,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAC7D,YAAY;CACZ,UAAU,MAAM,SAAS;CACzB,UAAU;CACV,cAAc;CACd,YAAY;AACd,EAAE;AAEF,IAAM,UAAU,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAChE,YAAY;CACZ,YAAY;CACZ,UAAU,MAAM,SAAS;CACzB,OAAO,MAAM,QAAQ,KAAK;AAC5B,EAAE;AAEF,IAAa,cAAc,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAC3E,OAAO,MAAM,QAAQ,KAAK;CAC1B,UAAU,MAAM,SAAS;CACzB,YAAY;CACZ,UAAU;CACV,cAAc;CACd,YAAY;AACd,EAAE;AAEF,IAAM,cAAyC,EAC7C,MACA,aACA,YAAY,OACZ,WAAW,OACX,WAAW,OACX,SACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,SAAS,YACX,aAAa,UACb,WACE,aAAa,SACb,WACE,aAAa,SACb,KAAA;CACR,MAAM,aAAa,eAAe,eAAe,SAAS,aAAa,UAAU,KAAA;CAEjF,OACE,oBAAC,MAAD;EAAI,GAAI;EACN,UAAA,qBAAC,KAAD,EAAA,UAAA,CACG,cACC,oBAAC,YAAD;GACE,OAAO,WAAW,aAAa,UAAU,YAAY;GACrD,eAAa,iBAAiB;GAC9B,UAAS;GACT,aAAa,EAAE,iBAAiB,QAAQ;EACzC,CAAA,GAEH,qBAAC,MAAD,EAAA,UAAA,CACE,qBAAC,WAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UAAO,KAAW,CAAA,GACjB,WAAW,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CAC9B,EAAA,CAAA,GACV,eAAe,oBAAC,aAAD,EAAA,UAAc,iBAAiB,WAAW,EAAe,CAAA,CACrE,EAAA,CAAA,CACH,EAAA,CAAA;CACH,CAAA;AAER"}

package/build/components/Search/utils.d.ts

@@ -1,3 +1,10 @@
+/** Where a search result lives: published here, cached from an uplink, or only on an uplink. */
+export declare enum SearchOrigin {
+    PRIVATE = "private",
+    CACHED = "cached",
+    REMOTE = "remote"
+}
+export declare const SEARCH_ORIGIN_ORDER: SearchOrigin[];
 export type NormalizedSearchOption = {
     name: string;
     version?: string;
@@ -5,6 +12,7 @@ export type NormalizedSearchOption = {
     isPrivate: boolean;
     isCached: boolean;
     isRemote: boolean;
+    origin?: SearchOrigin;
 };
 /**
  * Normalize a raw search result into a unified shape the UI can render,
@@ -19,4 +27,6 @@ export type NormalizedSearchOption = {
  * default to `false` and the UI simply omits the corresponding badges.
  */
 export declare function normalizeSearchOption(option: any): NormalizedSearchOption;
+/** Orders results private, cached, remote (stable inside each group), as grouping requires. */
+export declare function sortByOrigin<T>(options: T[]): T[];
 export declare function cleanDescription(description: string): string;

package/build/components/Search/utils.js

@@ -1,4 +1,16 @@
 //#region src/components/Search/utils.ts
+/** Where a search result lives: published here, cached from an uplink, or only on an uplink. */
+var SearchOrigin = /* @__PURE__ */ function(SearchOrigin) {
+	SearchOrigin["PRIVATE"] = "private";
+	SearchOrigin["CACHED"] = "cached";
+	SearchOrigin["REMOTE"] = "remote";
+	return SearchOrigin;
+}({});
+var SEARCH_ORIGIN_ORDER = [
+	"private",
+	"cached",
+	"remote"
+];
 /**
 * Normalize a raw search result into a unified shape the UI can render,
 * regardless of which backend response format was returned:
@@ -22,7 +34,8 @@ function normalizeSearchOption(option) {
 			description: pkg.description,
 			isPrivate,
 			isCached,
-			isRemote: !isCached && !isPrivate
+			isRemote: !isCached && !isPrivate,
+			origin: isPrivate ? "private" : isCached ? "cached" : "remote"
 		};
 	}
 	const flat = option ?? {};
@@ -35,6 +48,17 @@ function normalizeSearchOption(option) {
 		isRemote: false
 	};
 }
+/** Orders results private, cached, remote (stable inside each group), as grouping requires. */
+function sortByOrigin(options) {
+	const rank = (option) => {
+		const origin = normalizeSearchOption(option).origin;
+		return origin ? SEARCH_ORIGIN_ORDER.indexOf(origin) : SEARCH_ORIGIN_ORDER.length;
+	};
+	return options.map((option, index) => ({
+		option,
+		index
+	})).sort((a, b) => rank(a.option) - rank(b.option) || a.index - b.index).map(({ option }) => option);
+}
 function removeHtmlTags(input) {
 	let previous;
 	do {
@@ -50,7 +74,10 @@ function cleanDescription(description) {
 	return output;
 }
 //#endregion
+exports.SEARCH_ORIGIN_ORDER = SEARCH_ORIGIN_ORDER;
+exports.SearchOrigin = SearchOrigin;
 exports.cleanDescription = cleanDescription;
 exports.normalizeSearchOption = normalizeSearchOption;
+exports.sortByOrigin = sortByOrigin;
 
 //# sourceMappingURL=utils.js.map

package/build/components/Search/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["export type NormalizedSearchOption = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate: boolean;\n  isCached: boolean;\n  isRemote: boolean;\n};\n\n/**\n * Normalize a raw search result into a unified shape the UI can render,\n * regardless of which backend response format was returned:\n *\n * 1) npm-style \"search objects\" response where each entry is wrapped in\n *    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.\n * 2) Flat packument-style response where each entry exposes `name`, `version`,\n *    `description`, `dist`, etc. directly at the top level.\n *\n * The second shape carries no uplink metadata, so private/remote/cached flags\n * default to `false` and the UI simply omits the corresponding badges.\n */\nexport function normalizeSearchOption(option: any): NormalizedSearchOption {\n  if (option && typeof option === 'object' && option.package) {\n    const pkg = option.package ?? {};\n    const isPrivate = Boolean(option.verdaccioPrivate);\n    const isCached = Boolean(option.verdaccioPkgCached);\n    return {\n      name: pkg.name,\n      version: pkg.version,\n      description: pkg.description,\n      isPrivate,\n      isCached,\n      isRemote: !isCached && !isPrivate,\n    };\n  }\n\n  const flat = option ?? {};\n  return {\n    name: flat.name,\n    version: flat.version,\n    description: flat.description,\n    isPrivate: false,\n    isCached: false,\n    isRemote: false,\n  };\n}\n\nfunction removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,sBAAsB,QAAqC;CACzE,IAAI,UAAU,OAAO,WAAW,YAAY,OAAO,SAAS;EAC1D,MAAM,MAAM,OAAO,WAAW,CAAC;EAC/B,MAAM,YAAY,QAAQ,OAAO,gBAAgB;EACjD,MAAM,WAAW,QAAQ,OAAO,kBAAkB;EAClD,OAAO;GACL,MAAM,IAAI;GACV,SAAS,IAAI;GACb,aAAa,IAAI;GACjB;GACA;GACA,UAAU,CAAC,YAAY,CAAC;EAC1B;CACF;CAEA,MAAM,OAAO,UAAU,CAAC;CACxB,OAAO;EACL,MAAM,KAAK;EACX,SAAS,KAAK;EACd,aAAa,KAAK;EAClB,WAAW;EACX,UAAU;EACV,UAAU;CACZ;AACF;AAEA,SAAS,eAAe,OAAuB;CAC7C,IAAI;CACJ,GAAG;EACD,WAAW;EACX,QAAQ,MAAM,QAAQ,cAAc,EAAE;CACxC,SAAS,UAAU;CACnB,OAAO;AACT;AAEA,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;CAEb,SAAS,eAAe,MAAM;CAE9B,SAAS,OAAO,QAAQ,aAAa,EAAE,CAAC,CAAC,QAAQ,eAAe,EAAE;CAClE,OAAO;AACT"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["/** Where a search result lives: published here, cached from an uplink, or only on an uplink. */\nexport enum SearchOrigin {\n  PRIVATE = 'private',\n  CACHED = 'cached',\n  REMOTE = 'remote',\n}\n\nexport const SEARCH_ORIGIN_ORDER = [SearchOrigin.PRIVATE, SearchOrigin.CACHED, SearchOrigin.REMOTE];\n\nexport type NormalizedSearchOption = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate: boolean;\n  isCached: boolean;\n  isRemote: boolean;\n  origin?: SearchOrigin;\n};\n\n/**\n * Normalize a raw search result into a unified shape the UI can render,\n * regardless of which backend response format was returned:\n *\n * 1) npm-style \"search objects\" response where each entry is wrapped in\n *    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.\n * 2) Flat packument-style response where each entry exposes `name`, `version`,\n *    `description`, `dist`, etc. directly at the top level.\n *\n * The second shape carries no uplink metadata, so private/remote/cached flags\n * default to `false` and the UI simply omits the corresponding badges.\n */\nexport function normalizeSearchOption(option: any): NormalizedSearchOption {\n  if (option && typeof option === 'object' && option.package) {\n    const pkg = option.package ?? {};\n    const isPrivate = Boolean(option.verdaccioPrivate);\n    const isCached = Boolean(option.verdaccioPkgCached);\n    return {\n      name: pkg.name,\n      version: pkg.version,\n      description: pkg.description,\n      isPrivate,\n      isCached,\n      isRemote: !isCached && !isPrivate,\n      origin: isPrivate\n        ? SearchOrigin.PRIVATE\n        : isCached\n          ? SearchOrigin.CACHED\n          : SearchOrigin.REMOTE,\n    };\n  }\n\n  const flat = option ?? {};\n  return {\n    name: flat.name,\n    version: flat.version,\n    description: flat.description,\n    isPrivate: false,\n    isCached: false,\n    isRemote: false,\n  };\n}\n\n/** Orders results private, cached, remote (stable inside each group), as grouping requires. */\nexport function sortByOrigin<T>(options: T[]): T[] {\n  const rank = (option: T) => {\n    const origin = normalizeSearchOption(option).origin;\n    return origin ? SEARCH_ORIGIN_ORDER.indexOf(origin) : SEARCH_ORIGIN_ORDER.length;\n  };\n  return options\n    .map((option, index) => ({ option, index }))\n    .sort((a, b) => rank(a.option) - rank(b.option) || a.index - b.index)\n    .map(({ option }) => option);\n}\n\nfunction removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";;AACA,IAAY,eAAL,yBAAA,cAAA;CACL,aAAA,aAAA;CACA,aAAA,YAAA;CACA,aAAA,YAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAa,sBAAsB;;;;AAA+D;;;;;;;;;;;;;AAwBlG,SAAgB,sBAAsB,QAAqC;CACzE,IAAI,UAAU,OAAO,WAAW,YAAY,OAAO,SAAS;EAC1D,MAAM,MAAM,OAAO,WAAW,CAAC;EAC/B,MAAM,YAAY,QAAQ,OAAO,gBAAgB;EACjD,MAAM,WAAW,QAAQ,OAAO,kBAAkB;EAClD,OAAO;GACL,MAAM,IAAI;GACV,SAAS,IAAI;GACb,aAAa,IAAI;GACjB;GACA;GACA,UAAU,CAAC,YAAY,CAAC;GACxB,QAAQ,YAAA,YAEJ,WAAA,WAAA;EAGN;CACF;CAEA,MAAM,OAAO,UAAU,CAAC;CACxB,OAAO;EACL,MAAM,KAAK;EACX,SAAS,KAAK;EACd,aAAa,KAAK;EAClB,WAAW;EACX,UAAU;EACV,UAAU;CACZ;AACF;;AAGA,SAAgB,aAAgB,SAAmB;CACjD,MAAM,QAAQ,WAAc;EAC1B,MAAM,SAAS,sBAAsB,MAAM,CAAC,CAAC;EAC7C,OAAO,SAAS,oBAAoB,QAAQ,MAAM,IAAI,oBAAoB;CAC5E;CACA,OAAO,QACJ,KAAK,QAAQ,WAAW;EAAE;EAAQ;CAAM,EAAE,CAAC,CAC3C,MAAM,GAAG,MAAM,KAAK,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CACpE,KAAK,EAAE,aAAa,MAAM;AAC/B;AAEA,SAAS,eAAe,OAAuB;CAC7C,IAAI;CACJ,GAAG;EACD,WAAW;EACX,QAAQ,MAAM,QAAQ,cAAc,EAAE;CACxC,SAAS,UAAU;CACnB,OAAO;AACT;AAEA,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;CAEb,SAAS,eAAe,MAAM;CAE9B,SAAS,OAAO,QAAQ,aAAa,EAAE,CAAC,CAAC,QAAQ,eAAe,EAAE;CAClE,OAAO;AACT"}

package/build/components/Search/utils.mjs

@@ -1,4 +1,16 @@
 //#region src/components/Search/utils.ts
+/** Where a search result lives: published here, cached from an uplink, or only on an uplink. */
+var SearchOrigin = /* @__PURE__ */ function(SearchOrigin) {
+	SearchOrigin["PRIVATE"] = "private";
+	SearchOrigin["CACHED"] = "cached";
+	SearchOrigin["REMOTE"] = "remote";
+	return SearchOrigin;
+}({});
+var SEARCH_ORIGIN_ORDER = [
+	"private",
+	"cached",
+	"remote"
+];
 /**
 * Normalize a raw search result into a unified shape the UI can render,
 * regardless of which backend response format was returned:
@@ -22,7 +34,8 @@ function normalizeSearchOption(option) {
 			description: pkg.description,
 			isPrivate,
 			isCached,
-			isRemote: !isCached && !isPrivate
+			isRemote: !isCached && !isPrivate,
+			origin: isPrivate ? "private" : isCached ? "cached" : "remote"
 		};
 	}
 	const flat = option ?? {};
@@ -35,6 +48,17 @@ function normalizeSearchOption(option) {
 		isRemote: false
 	};
 }
+/** Orders results private, cached, remote (stable inside each group), as grouping requires. */
+function sortByOrigin(options) {
+	const rank = (option) => {
+		const origin = normalizeSearchOption(option).origin;
+		return origin ? SEARCH_ORIGIN_ORDER.indexOf(origin) : SEARCH_ORIGIN_ORDER.length;
+	};
+	return options.map((option, index) => ({
+		option,
+		index
+	})).sort((a, b) => rank(a.option) - rank(b.option) || a.index - b.index).map(({ option }) => option);
+}
 function removeHtmlTags(input) {
 	let previous;
 	do {
@@ -50,6 +74,6 @@ function cleanDescription(description) {
 	return output;
 }
 //#endregion
-export { cleanDescription, normalizeSearchOption };
+export { SEARCH_ORIGIN_ORDER, SearchOrigin, cleanDescription, normalizeSearchOption, sortByOrigin };
 
 //# sourceMappingURL=utils.mjs.map

package/build/components/Search/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["export type NormalizedSearchOption = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate: boolean;\n  isCached: boolean;\n  isRemote: boolean;\n};\n\n/**\n * Normalize a raw search result into a unified shape the UI can render,\n * regardless of which backend response format was returned:\n *\n * 1) npm-style \"search objects\" response where each entry is wrapped in\n *    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.\n * 2) Flat packument-style response where each entry exposes `name`, `version`,\n *    `description`, `dist`, etc. directly at the top level.\n *\n * The second shape carries no uplink metadata, so private/remote/cached flags\n * default to `false` and the UI simply omits the corresponding badges.\n */\nexport function normalizeSearchOption(option: any): NormalizedSearchOption {\n  if (option && typeof option === 'object' && option.package) {\n    const pkg = option.package ?? {};\n    const isPrivate = Boolean(option.verdaccioPrivate);\n    const isCached = Boolean(option.verdaccioPkgCached);\n    return {\n      name: pkg.name,\n      version: pkg.version,\n      description: pkg.description,\n      isPrivate,\n      isCached,\n      isRemote: !isCached && !isPrivate,\n    };\n  }\n\n  const flat = option ?? {};\n  return {\n    name: flat.name,\n    version: flat.version,\n    description: flat.description,\n    isPrivate: false,\n    isCached: false,\n    isRemote: false,\n  };\n}\n\nfunction removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,sBAAsB,QAAqC;CACzE,IAAI,UAAU,OAAO,WAAW,YAAY,OAAO,SAAS;EAC1D,MAAM,MAAM,OAAO,WAAW,CAAC;EAC/B,MAAM,YAAY,QAAQ,OAAO,gBAAgB;EACjD,MAAM,WAAW,QAAQ,OAAO,kBAAkB;EAClD,OAAO;GACL,MAAM,IAAI;GACV,SAAS,IAAI;GACb,aAAa,IAAI;GACjB;GACA;GACA,UAAU,CAAC,YAAY,CAAC;EAC1B;CACF;CAEA,MAAM,OAAO,UAAU,CAAC;CACxB,OAAO;EACL,MAAM,KAAK;EACX,SAAS,KAAK;EACd,aAAa,KAAK;EAClB,WAAW;EACX,UAAU;EACV,UAAU;CACZ;AACF;AAEA,SAAS,eAAe,OAAuB;CAC7C,IAAI;CACJ,GAAG;EACD,WAAW;EACX,QAAQ,MAAM,QAAQ,cAAc,EAAE;CACxC,SAAS,UAAU;CACnB,OAAO;AACT;AAEA,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;CAEb,SAAS,eAAe,MAAM;CAE9B,SAAS,OAAO,QAAQ,aAAa,EAAE,CAAC,CAAC,QAAQ,eAAe,EAAE;CAClE,OAAO;AACT"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/components/Search/utils.ts"],"sourcesContent":["/** Where a search result lives: published here, cached from an uplink, or only on an uplink. */\nexport enum SearchOrigin {\n  PRIVATE = 'private',\n  CACHED = 'cached',\n  REMOTE = 'remote',\n}\n\nexport const SEARCH_ORIGIN_ORDER = [SearchOrigin.PRIVATE, SearchOrigin.CACHED, SearchOrigin.REMOTE];\n\nexport type NormalizedSearchOption = {\n  name: string;\n  version?: string;\n  description?: string;\n  isPrivate: boolean;\n  isCached: boolean;\n  isRemote: boolean;\n  origin?: SearchOrigin;\n};\n\n/**\n * Normalize a raw search result into a unified shape the UI can render,\n * regardless of which backend response format was returned:\n *\n * 1) npm-style \"search objects\" response where each entry is wrapped in\n *    `{ package: { name, version, description, ... }, verdaccioPrivate, verdaccioPkgCached }`.\n * 2) Flat packument-style response where each entry exposes `name`, `version`,\n *    `description`, `dist`, etc. directly at the top level.\n *\n * The second shape carries no uplink metadata, so private/remote/cached flags\n * default to `false` and the UI simply omits the corresponding badges.\n */\nexport function normalizeSearchOption(option: any): NormalizedSearchOption {\n  if (option && typeof option === 'object' && option.package) {\n    const pkg = option.package ?? {};\n    const isPrivate = Boolean(option.verdaccioPrivate);\n    const isCached = Boolean(option.verdaccioPkgCached);\n    return {\n      name: pkg.name,\n      version: pkg.version,\n      description: pkg.description,\n      isPrivate,\n      isCached,\n      isRemote: !isCached && !isPrivate,\n      origin: isPrivate\n        ? SearchOrigin.PRIVATE\n        : isCached\n          ? SearchOrigin.CACHED\n          : SearchOrigin.REMOTE,\n    };\n  }\n\n  const flat = option ?? {};\n  return {\n    name: flat.name,\n    version: flat.version,\n    description: flat.description,\n    isPrivate: false,\n    isCached: false,\n    isRemote: false,\n  };\n}\n\n/** Orders results private, cached, remote (stable inside each group), as grouping requires. */\nexport function sortByOrigin<T>(options: T[]): T[] {\n  const rank = (option: T) => {\n    const origin = normalizeSearchOption(option).origin;\n    return origin ? SEARCH_ORIGIN_ORDER.indexOf(origin) : SEARCH_ORIGIN_ORDER.length;\n  };\n  return options\n    .map((option, index) => ({ option, index }))\n    .sort((a, b) => rank(a.option) - rank(b.option) || a.index - b.index)\n    .map(({ option }) => option);\n}\n\nfunction removeHtmlTags(input: string): string {\n  let previous;\n  do {\n    previous = input;\n    input = input.replace(/<[^>]*>?/gm, '');\n  } while (input !== previous);\n  return input;\n}\n\nexport function cleanDescription(description: string): string {\n  let output = description;\n  // remove html tags from description (e.g. <h1...>)\n  output = removeHtmlTags(output);\n  // remove markdown links from description (e.g. [link](url))\n  output = output.replace(/\\(.*?\\)/gm, '').replace(/(\\[!?|\\])/gm, '');\n  return output;\n}\n"],"mappings":";;AACA,IAAY,eAAL,yBAAA,cAAA;CACL,aAAA,aAAA;CACA,aAAA,YAAA;CACA,aAAA,YAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAa,sBAAsB;;;;AAA+D;;;;;;;;;;;;;AAwBlG,SAAgB,sBAAsB,QAAqC;CACzE,IAAI,UAAU,OAAO,WAAW,YAAY,OAAO,SAAS;EAC1D,MAAM,MAAM,OAAO,WAAW,CAAC;EAC/B,MAAM,YAAY,QAAQ,OAAO,gBAAgB;EACjD,MAAM,WAAW,QAAQ,OAAO,kBAAkB;EAClD,OAAO;GACL,MAAM,IAAI;GACV,SAAS,IAAI;GACb,aAAa,IAAI;GACjB;GACA;GACA,UAAU,CAAC,YAAY,CAAC;GACxB,QAAQ,YAAA,YAEJ,WAAA,WAAA;EAGN;CACF;CAEA,MAAM,OAAO,UAAU,CAAC;CACxB,OAAO;EACL,MAAM,KAAK;EACX,SAAS,KAAK;EACd,aAAa,KAAK;EAClB,WAAW;EACX,UAAU;EACV,UAAU;CACZ;AACF;;AAGA,SAAgB,aAAgB,SAAmB;CACjD,MAAM,QAAQ,WAAc;EAC1B,MAAM,SAAS,sBAAsB,MAAM,CAAC,CAAC;EAC7C,OAAO,SAAS,oBAAoB,QAAQ,MAAM,IAAI,oBAAoB;CAC5E;CACA,OAAO,QACJ,KAAK,QAAQ,WAAW;EAAE;EAAQ;CAAM,EAAE,CAAC,CAC3C,MAAM,GAAG,MAAM,KAAK,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CACpE,KAAK,EAAE,aAAa,MAAM;AAC/B;AAEA,SAAS,eAAe,OAAuB;CAC7C,IAAI;CACJ,GAAG;EACD,WAAW;EACX,QAAQ,MAAM,QAAQ,cAAc,EAAE;CACxC,SAAS,UAAU;CACnB,OAAO;AACT;AAEA,SAAgB,iBAAiB,aAA6B;CAC5D,IAAI,SAAS;CAEb,SAAS,eAAe,MAAM;CAE9B,SAAS,OAAO,QAAQ,aAAa,EAAE,CAAC,CAAC,QAAQ,eAAe,EAAE;CAClE,OAAO;AACT"}

package/build/components/SettingsMenu/SettingsMenu.js

@@ -3,14 +3,14 @@ const require_AppConfigurationProvider = require("../../providers/AppConfigurati
 const require_PersistenceSettingProvider = require("../../providers/PersistenceSettingProvider/PersistenceSettingProvider.js");
 require("../../providers/PersistenceSettingProvider/index.js");
 require("../../providers/index.js");
+let _mui_icons_material_Check = require("@mui/icons-material/Check");
+_mui_icons_material_Check = require_runtime.__toESM(_mui_icons_material_Check);
 let _mui_material_IconButton = require("@mui/material/IconButton");
 _mui_material_IconButton = require_runtime.__toESM(_mui_material_IconButton);
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _mui_icons_material_Check = require("@mui/icons-material/Check");
-_mui_icons_material_Check = require_runtime.__toESM(_mui_icons_material_Check);
 let _mui_icons_material_Settings = require("@mui/icons-material/Settings");
 _mui_icons_material_Settings = require_runtime.__toESM(_mui_icons_material_Settings);
 let _mui_material_ListItemIcon = require("@mui/material/ListItemIcon");

package/build/components/SettingsMenu/SettingsMenu.mjs

@@ -2,11 +2,11 @@ import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigura
 import { useSettings } from "../../providers/PersistenceSettingProvider/PersistenceSettingProvider.mjs";
 import "../../providers/PersistenceSettingProvider/index.mjs";
 import "../../providers/index.mjs";
+import Check from "@mui/icons-material/Check";
 import IconButton from "@mui/material/IconButton";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import Check from "@mui/icons-material/Check";
 import Settings from "@mui/icons-material/Settings";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";

package/build/components/Versions/Versions.js

@@ -57,7 +57,10 @@ var Versions = ({ packageMeta, packageName }) => {
 		sx: { mb: 2 },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_CardContent.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
 			"data-testid": "versions",
-			sx: { m: 2 },
+			sx: { m: {
+				xs: 0,
+				sm: 2
+			} },
 			children: [
 				hasDistTags ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledText, {
 					variant: "subtitle1",
@@ -77,7 +80,10 @@ var Versions = ({ packageMeta, packageName }) => {
 					}, 200),
 					size: "small",
 					variant: "standard",
-					sx: { width: "50%" }
+					sx: { width: {
+						xs: "100%",
+						sm: "50%"
+					} }
 				}, packageName)] }),
 				hasVersionHistory ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [hideDeprecatedVersions === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Alert.default, {
 					severity: "info",

package/build/components/Versions/Versions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Versions.js","names":["styled","Typography","useTranslation","useConfig","useState","useMemo","Card","CardContent","Box","_Fragment","VersionsTagList","TextField","debounce","Alert","VersionsHistoryList"],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport { debounce } from 'lodash-es';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta ?? {};\n\n  const [textSearch, setTextSearch] = useState('');\n  // the detail routes reuse this mounted component across packages: reset the\n  // filter so the previous package's text does not apply to the next one\n  useEffect(() => {\n    setTextSearch('');\n  }, [packageName]);\n  const packageVersions = useMemo(() => {\n    if (textSearch === '') {\n      return versions;\n    }\n    return Object.keys(versions).reduce((acc, version) => {\n      if (typeof versions[version] !== 'undefined') {\n        if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n          acc[version] = versions[version];\n        }\n      }\n      return acc;\n    }, {});\n  }, [versions, textSearch]);\n\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: 2 }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              // uncontrolled input: remount on navigation to clear its text\n              key={packageName}\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                setTextSearch(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: '50%' }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":"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"}
+{"version":3,"file":"Versions.js","names":["styled","Typography","useTranslation","useConfig","useState","useMemo","Card","CardContent","Box","_Fragment","VersionsTagList","TextField","debounce","Alert","VersionsHistoryList"],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport { debounce } from 'lodash-es';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta ?? {};\n\n  const [textSearch, setTextSearch] = useState('');\n  // the detail routes reuse this mounted component across packages: reset the\n  // filter so the previous package's text does not apply to the next one\n  useEffect(() => {\n    setTextSearch('');\n  }, [packageName]);\n  const packageVersions = useMemo(() => {\n    if (textSearch === '') {\n      return versions;\n    }\n    return Object.keys(versions).reduce((acc, version) => {\n      if (typeof versions[version] !== 'undefined') {\n        if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n          acc[version] = versions[version];\n        }\n      }\n      return acc;\n    }, {});\n  }, [versions, textSearch]);\n\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: { xs: 0, sm: 2 } }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              // uncontrolled input: remount on navigation to clear its text\n              key={packageName}\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                setTextSearch(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: { xs: '100%', sm: '50%' } }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":"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"}

package/build/components/Versions/Versions.mjs

@@ -47,7 +47,10 @@ var Versions = ({ packageMeta, packageName }) => {
 		sx: { mb: 2 },
 		children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Box, {
 			"data-testid": "versions",
-			sx: { m: 2 },
+			sx: { m: {
+				xs: 0,
+				sm: 2
+			} },
 			children: [
 				hasDistTags ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(StyledText, {
 					variant: "subtitle1",
@@ -67,7 +70,10 @@ var Versions = ({ packageMeta, packageName }) => {
 					}, 200),
 					size: "small",
 					variant: "standard",
-					sx: { width: "50%" }
+					sx: { width: {
+						xs: "100%",
+						sm: "50%"
+					} }
 				}, packageName)] }),
 				hasVersionHistory ? /* @__PURE__ */ jsxs(Fragment$1, { children: [hideDeprecatedVersions === true && /* @__PURE__ */ jsx(Alert, {
 					severity: "info",

package/build/components/Versions/Versions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Versions.mjs","names":["_Fragment"],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport { debounce } from 'lodash-es';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta ?? {};\n\n  const [textSearch, setTextSearch] = useState('');\n  // the detail routes reuse this mounted component across packages: reset the\n  // filter so the previous package's text does not apply to the next one\n  useEffect(() => {\n    setTextSearch('');\n  }, [packageName]);\n  const packageVersions = useMemo(() => {\n    if (textSearch === '') {\n      return versions;\n    }\n    return Object.keys(versions).reduce((acc, version) => {\n      if (typeof versions[version] !== 'undefined') {\n        if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n          acc[version] = versions[version];\n        }\n      }\n      return acc;\n    }, {});\n  }, [versions, textSearch]);\n\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: 2 }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              // uncontrolled input: remount on navigation to clear its text\n              key={packageName}\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                setTextSearch(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: '50%' }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,aAAa,OAAO,UAAU,CAAC,EAAqB,WAAW;CAC1E,YAAY,MAAM,SAAS,MAAM,MAAM,WAAW;CAClD,eAAe;AACjB,EAAE;AAEF,IAAM,YAA6B,EAAE,aAAa,kBAAkB;CAClE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,EAAE,WAAW,CAAC,GAAG,OAAO,CAAC,IAAI,cAAc,WAAW,CAAC,MAAM,eAAe,CAAC;CAEnF,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAG/C,gBAAgB;EACd,cAAc,EAAE;CAClB,GAAG,CAAC,WAAW,CAAC;CAChB,MAAM,kBAAkB,cAAc;EACpC,IAAI,eAAe,IACjB,OAAO;EAET,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,QAAQ,KAAK,YAAY;GACpD,IAAI,OAAO,SAAS,aAAa,aAC3B;QAAA,OAAO,UAAU,SAAS,YAAY;KAAE,mBAAmB;KAAM,OAAO;IAAK,CAAC,GAChF,IAAI,WAAW,SAAS;GAAA;GAG5B,OAAO;EACT,GAAG,CAAC,CAAC;CACP,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,IAAI,CAAC,eAAe,OAAO,KAAK,WAAW,CAAC,CAAC,WAAW,GACtD,OAAO;CAET,MAAM,yBAAyB,cAAc;CAC7C,MAAM,cAAc,YAAY,OAAO,KAAK,QAAQ,CAAC,CAAC,SAAS,KAAK;CACpE,MAAM,oBACJ,mBAAmB,OAAO,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK;CAEhE,OACE,oBAAC,MAAD;EAAM,IAAI,EAAE,IAAI,EAAE;EAChB,UAAA,oBAAC,aAAD,EAAA,UACE,qBAAC,KAAD;GAAK,eAAY;GAAW,IAAI,EAAE,GAAG,EAAE;GAAvC,UAAA;IACG,cACC,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;KAApB,UAAA,CACG,EAAE,uBAAuB,GAC1B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,QAAQ,CAAC,CAAC,OAAO,GAAS,CAAA,CACxC;IACZ,CAAA,GAAA,oBAAC,iBAAD;KAA8B;KAAa,MAAM;KAAgB;IAAO,CAAA,CACxE,EAAA,CAAA,IACA;IACJ,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;KAApB,UAAA,CACG,EAAE,0BAA0B,GAC7B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,eAAe,CAAC,CAAC,OAAO,GAAS,CAAA,CAC/C;IACZ,CAAA,GAAA,oBAAC,WAAD;KAGE,YAAY,EAAE,6BAA6B;KAC3C,UAAU,UAAU,MAAM;MACxB,cAAc,EAAE,OAAO,KAAK;KAC9B,GAAG,GAAG;KACN,MAAK;KACL,SAAQ;KACR,IAAI,EAAE,OAAO,MAAM;IACpB,GARM,WAQN,CACD,EAAA,CAAA;IACD,oBACC,qBAAAA,YAAA,EAAA,UAAA,CACG,2BAA2B,QAE1B,oBAAC,OAAD;KAAO,UAAS;KAAO,IAAI;MAAE,WAAW;MAAG,cAAc;KAAE;KACxD,UAAA,EAAE,0BAA0B;IACxB,CAAA,GAET,oBAAC,qBAAD;KACe;KACP;KACN,UAAU;IACX,CAAA,CACD,EAAA,CAAA,IACA;GACD;EACM,CAAA,EAAA,CAAA;CACT,CAAA;AAEV"}
+{"version":3,"file":"Versions.mjs","names":["_Fragment"],"sources":["../../../src/components/Versions/Versions.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport { debounce } from 'lodash-es';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport semver from 'semver';\n\nimport type { Theme } from '../../Theme';\nimport { useConfig } from '../../providers';\nimport VersionsHistoryList from './HistoryList';\nimport VersionsTagList from './TagList';\n\nexport type Props = { packageMeta: any; packageName: string };\n\nexport const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({\n  fontWeight: props.theme && props.theme.fontWeight.bold,\n  textTransform: 'capitalize',\n}));\n\nconst Versions: React.FC<Props> = ({ packageMeta, packageName }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta ?? {};\n\n  const [textSearch, setTextSearch] = useState('');\n  // the detail routes reuse this mounted component across packages: reset the\n  // filter so the previous package's text does not apply to the next one\n  useEffect(() => {\n    setTextSearch('');\n  }, [packageName]);\n  const packageVersions = useMemo(() => {\n    if (textSearch === '') {\n      return versions;\n    }\n    return Object.keys(versions).reduce((acc, version) => {\n      if (typeof versions[version] !== 'undefined') {\n        if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {\n          acc[version] = versions[version];\n        }\n      }\n      return acc;\n    }, {});\n  }, [versions, textSearch]);\n\n  if (!packageMeta || Object.keys(packageMeta).length === 0) {\n    return null;\n  }\n  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;\n  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;\n  const hasVersionHistory =\n    packageVersions && Object.keys(packageVersions).length > 0 && packageName;\n\n  return (\n    <Card sx={{ mb: 2 }}>\n      <CardContent>\n        <Box data-testid=\"versions\" sx={{ m: { xs: 0, sm: 2 } }}>\n          {hasDistTags ? (\n            <>\n              <StyledText variant=\"subtitle1\">\n                {t('versions.current-tags')}\n                <span>{` (${Object.keys(distTags).length})`}</span>\n              </StyledText>\n              <VersionsTagList packageName={packageName} tags={distTags} time={time} />\n            </>\n          ) : null}\n          <>\n            <StyledText variant=\"subtitle1\">\n              {t('versions.version-history')}\n              <span>{` (${Object.keys(packageVersions).length})`}</span>\n            </StyledText>\n            <TextField\n              // uncontrolled input: remount on navigation to clear its text\n              key={packageName}\n              helperText={t('versions.search.placeholder')}\n              onChange={debounce((e) => {\n                setTextSearch(e.target.value);\n              }, 200)}\n              size=\"small\"\n              variant=\"standard\"\n              sx={{ width: { xs: '100%', sm: '50%' } }}\n            />\n          </>\n          {hasVersionHistory ? (\n            <>\n              {hideDeprecatedVersions === true && (\n                // @ts-ignore - Alert does accept children despite the type error\n                <Alert severity=\"info\" sx={{ marginTop: 1, marginBottom: 1 }}>\n                  {t('versions.hide-deprecated')}\n                </Alert>\n              )}\n              <VersionsHistoryList\n                packageName={packageName}\n                time={time}\n                versions={packageVersions}\n              />\n            </>\n          ) : null}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Versions;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,aAAa,OAAO,UAAU,CAAC,EAAqB,WAAW;CAC1E,YAAY,MAAM,SAAS,MAAM,MAAM,WAAW;CAClD,eAAe;AACjB,EAAE;AAEF,IAAM,YAA6B,EAAE,aAAa,kBAAkB;CAClE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,EAAE,WAAW,CAAC,GAAG,OAAO,CAAC,IAAI,cAAc,WAAW,CAAC,MAAM,eAAe,CAAC;CAEnF,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAG/C,gBAAgB;EACd,cAAc,EAAE;CAClB,GAAG,CAAC,WAAW,CAAC;CAChB,MAAM,kBAAkB,cAAc;EACpC,IAAI,eAAe,IACjB,OAAO;EAET,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,QAAQ,KAAK,YAAY;GACpD,IAAI,OAAO,SAAS,aAAa,aAC3B;QAAA,OAAO,UAAU,SAAS,YAAY;KAAE,mBAAmB;KAAM,OAAO;IAAK,CAAC,GAChF,IAAI,WAAW,SAAS;GAAA;GAG5B,OAAO;EACT,GAAG,CAAC,CAAC;CACP,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,IAAI,CAAC,eAAe,OAAO,KAAK,WAAW,CAAC,CAAC,WAAW,GACtD,OAAO;CAET,MAAM,yBAAyB,cAAc;CAC7C,MAAM,cAAc,YAAY,OAAO,KAAK,QAAQ,CAAC,CAAC,SAAS,KAAK;CACpE,MAAM,oBACJ,mBAAmB,OAAO,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK;CAEhE,OACE,oBAAC,MAAD;EAAM,IAAI,EAAE,IAAI,EAAE;EAChB,UAAA,oBAAC,aAAD,EAAA,UACE,qBAAC,KAAD;GAAK,eAAY;GAAW,IAAI,EAAE,GAAG;IAAE,IAAI;IAAG,IAAI;GAAE,EAAE;GAAtD,UAAA;IACG,cACC,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;KAApB,UAAA,CACG,EAAE,uBAAuB,GAC1B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,QAAQ,CAAC,CAAC,OAAO,GAAS,CAAA,CACxC;IACZ,CAAA,GAAA,oBAAC,iBAAD;KAA8B;KAAa,MAAM;KAAgB;IAAO,CAAA,CACxE,EAAA,CAAA,IACA;IACJ,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,YAAD;KAAY,SAAQ;KAApB,UAAA,CACG,EAAE,0BAA0B,GAC7B,oBAAC,QAAD,EAAA,UAAO,KAAK,OAAO,KAAK,eAAe,CAAC,CAAC,OAAO,GAAS,CAAA,CAC/C;IACZ,CAAA,GAAA,oBAAC,WAAD;KAGE,YAAY,EAAE,6BAA6B;KAC3C,UAAU,UAAU,MAAM;MACxB,cAAc,EAAE,OAAO,KAAK;KAC9B,GAAG,GAAG;KACN,MAAK;KACL,SAAQ;KACR,IAAI,EAAE,OAAO;MAAE,IAAI;MAAQ,IAAI;KAAM,EAAE;IACxC,GARM,WAQN,CACD,EAAA,CAAA;IACD,oBACC,qBAAAA,YAAA,EAAA,UAAA,CACG,2BAA2B,QAE1B,oBAAC,OAAD;KAAO,UAAS;KAAO,IAAI;MAAE,WAAW;MAAG,cAAc;KAAE;KACxD,UAAA,EAAE,0BAA0B;IACxB,CAAA,GAET,oBAAC,qBAAD;KACe;KACP;KACN,UAAU;IACX,CAAA,CACD,EAAA,CAAA,IACA;GACD;EACM,CAAA,EAAA,CAAA;CACT,CAAA;AAEV"}

package/build/components/VisuallyHidden/index.d.ts

@@ -0,0 +1,5 @@
+/** Text for screen readers only. */
+export declare const VisuallyHidden: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/VisuallyHidden/index.js

@@ -0,0 +1,17 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+//#region src/components/VisuallyHidden/index.ts
+/** Text for screen readers only. */
+var VisuallyHidden = (0, _emotion_styled.default)("span")({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+});
+//#endregion
+exports.VisuallyHidden = VisuallyHidden;
+
+//# sourceMappingURL=index.js.map

package/build/components/VisuallyHidden/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["styled"],"sources":["../../../src/components/VisuallyHidden/index.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\n/** Text for screen readers only. */\nexport const VisuallyHidden = styled('span')({\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  whiteSpace: 'nowrap',\n});\n"],"mappings":";;;;;AAGA,IAAa,kBAAA,GAAiBA,gBAAAA,QAAAA,CAAO,MAAM,CAAC,CAAC;CAC3C,UAAU;CACV,OAAO;CACP,QAAQ;CACR,UAAU;CACV,MAAM;CACN,YAAY;AACd,CAAC"}

package/build/components/VisuallyHidden/index.mjs

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+//#region src/components/VisuallyHidden/index.ts
+/** Text for screen readers only. */
+var VisuallyHidden = styled("span")({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+});
+//#endregion
+export { VisuallyHidden };
+
+//# sourceMappingURL=index.mjs.map

package/build/components/VisuallyHidden/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/VisuallyHidden/index.ts"],"sourcesContent":["import styled from '@emotion/styled';\n\n/** Text for screen readers only. */\nexport const VisuallyHidden = styled('span')({\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  whiteSpace: 'nowrap',\n});\n"],"mappings":";;;AAGA,IAAa,iBAAiB,OAAO,MAAM,CAAC,CAAC;CAC3C,UAAU;CACV,OAAO;CACP,QAAQ;CACR,UAAU;CACV,MAAM;CACN,YAAY;AACd,CAAC"}

package/build/configuration.js

@@ -5,7 +5,8 @@ var defaultValues = {
 	pkgManagers: [
 		"yarn",
 		"pnpm",
-		"npm"
+		"npm",
+		"bun"
 	],
 	scope: "",
 	base: "",

package/build/configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"configuration.js","names":[],"sources":["../src/configuration.ts"],"sourcesContent":["import type { TemplateUIOptions } from '@verdaccio/types';\n\nconst defaultValues: TemplateUIOptions = {\n  primaryColor: '#ffffff',\n  darkMode: false,\n  pkgManagers: ['yarn', 'pnpm', 'npm'],\n  scope: '',\n  base: '',\n  login: true,\n  flags: {},\n  url_prefix: '',\n  title: 'Verdaccio',\n};\n\nexport function getConfiguration() {\n  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues;\n  return uiConfiguration;\n}\n"],"mappings":";AAEA,IAAM,gBAAmC;CACvC,cAAc;CACd,UAAU;CACV,aAAa;EAAC;EAAQ;EAAQ;CAAK;CACnC,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO,CAAC;CACR,YAAY;CACZ,OAAO;AACT;AAEA,SAAgB,mBAAmB;CAEjC,OADwB,QAAQ,mCAAmC;AAErE"}
+{"version":3,"file":"configuration.js","names":[],"sources":["../src/configuration.ts"],"sourcesContent":["import type { TemplateUIOptions } from '@verdaccio/types';\n\nconst defaultValues: TemplateUIOptions = {\n  primaryColor: '#ffffff',\n  darkMode: false,\n  pkgManagers: ['yarn', 'pnpm', 'npm', 'bun'],\n  scope: '',\n  base: '',\n  login: true,\n  flags: {},\n  url_prefix: '',\n  title: 'Verdaccio',\n};\n\nexport function getConfiguration() {\n  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues;\n  return uiConfiguration;\n}\n"],"mappings":";AAEA,IAAM,gBAAmC;CACvC,cAAc;CACd,UAAU;CACV,aAAa;EAAC;EAAQ;EAAQ;EAAO;CAAK;CAC1C,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO,CAAC;CACR,YAAY;CACZ,OAAO;AACT;AAEA,SAAgB,mBAAmB;CAEjC,OADwB,QAAQ,mCAAmC;AAErE"}

package/build/configuration.mjs

@@ -5,7 +5,8 @@ var defaultValues = {
 	pkgManagers: [
 		"yarn",
 		"pnpm",
-		"npm"
+		"npm",
+		"bun"
 	],
 	scope: "",
 	base: "",

package/build/configuration.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"configuration.mjs","names":[],"sources":["../src/configuration.ts"],"sourcesContent":["import type { TemplateUIOptions } from '@verdaccio/types';\n\nconst defaultValues: TemplateUIOptions = {\n  primaryColor: '#ffffff',\n  darkMode: false,\n  pkgManagers: ['yarn', 'pnpm', 'npm'],\n  scope: '',\n  base: '',\n  login: true,\n  flags: {},\n  url_prefix: '',\n  title: 'Verdaccio',\n};\n\nexport function getConfiguration() {\n  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues;\n  return uiConfiguration;\n}\n"],"mappings":";AAEA,IAAM,gBAAmC;CACvC,cAAc;CACd,UAAU;CACV,aAAa;EAAC;EAAQ;EAAQ;CAAK;CACnC,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO,CAAC;CACR,YAAY;CACZ,OAAO;AACT;AAEA,SAAgB,mBAAmB;CAEjC,OADwB,QAAQ,mCAAmC;AAErE"}
+{"version":3,"file":"configuration.mjs","names":[],"sources":["../src/configuration.ts"],"sourcesContent":["import type { TemplateUIOptions } from '@verdaccio/types';\n\nconst defaultValues: TemplateUIOptions = {\n  primaryColor: '#ffffff',\n  darkMode: false,\n  pkgManagers: ['yarn', 'pnpm', 'npm', 'bun'],\n  scope: '',\n  base: '',\n  login: true,\n  flags: {},\n  url_prefix: '',\n  title: 'Verdaccio',\n};\n\nexport function getConfiguration() {\n  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues;\n  return uiConfiguration;\n}\n"],"mappings":";AAEA,IAAM,gBAAmC;CACvC,cAAc;CACd,UAAU;CACV,aAAa;EAAC;EAAQ;EAAQ;EAAO;CAAK;CAC1C,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO,CAAC;CACR,YAAY;CACZ,OAAO;AACT;AAEA,SAAgB,mBAAmB;CAEjC,OADwB,QAAQ,mCAAmC;AAErE"}