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

package/build/components/Help/Help.mjs

@@ -1,60 +1,295 @@
 import CopyToClipBoard from "../CopyClipboard/CopyToClipBoard.mjs";
+import { getBunfigRegistry, getCLISBerryYamlRegistry, getCLISetConfigRegistry, getCLISetRegistry, getNpmrcRegistry } from "../../utils/cli-utils.mjs";
 import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigurationProvider.mjs";
 import Heading from "../Heading/Heading.mjs";
-import { CardStyled } from "./styles.mjs";
+import DocsLink from "../DocsLink/DocsLink.mjs";
+import "../DocsLink/index.mjs";
+import { externalLinkComponents } from "../../utils/markdown.mjs";
+import { CardStyled, CommandBox, CustomHelpContent, Step, StepList, StepNumber } from "./styles.mjs";
 import "../../index.mjs";
-import { Fragment } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import CardContent from "@mui/material/CardContent";
-import Button from "@mui/material/Button";
+import Inventory2Outlined from "@mui/icons-material/Inventory2Outlined";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
 import CardActions from "@mui/material/CardActions";
+import ReactMarkdown from "react-markdown";
 //#region src/components/Help/Help.tsx
-function renderHeadingClipboardSegments(title, text) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
-		variant: "body1",
-		children: title
-	}), /* @__PURE__ */ jsx(CopyToClipBoard, {
-		dataTestId: "segments",
-		text
-	})] });
+var NPMRC = ".npmrc";
+var SETUP_TABS = [
+	"npm",
+	"pnpm",
+	"yarn",
+	"bun",
+	NPMRC
+];
+var DOCS_UPLINKS_URL = "https://verdaccio.org/docs/uplinks";
+var YARN_PLUGIN_NPM_URL = "https://github.com/verdaccio/yarn-plugin-npm";
+var YARN_PLUGIN_INSTALL = "yarn dlx @verdaccio/yarn-import npm-login";
+/** The one-time command that makes a client use this registry, honouring `web.scope`. */
+function getSetupCommand(tab, scope, registryUrl) {
+	switch (tab) {
+		case "npm": return getCLISetConfigRegistry("npm config set", scope, registryUrl);
+		case "pnpm": return getCLISetConfigRegistry("pnpm config set", scope, registryUrl);
+		case "yarn": return getCLISBerryYamlRegistry(scope, registryUrl).trim();
+		case "bun": return getBunfigRegistry(scope, registryUrl);
+		default: return getNpmrcRegistry(scope, registryUrl);
+	}
 }
-var Help = () => {
+var Command = ({ dataTestId, text }) => /* @__PURE__ */ jsx(CommandBox, { children: /* @__PURE__ */ jsx(CopyToClipBoard, {
+	dataTestId,
+	text,
+	children: /* @__PURE__ */ jsx("code", { children: text })
+}) });
+var HelpStep = ({ index, title, description, children }) => /* @__PURE__ */ jsxs(Step, { children: [/* @__PURE__ */ jsx(StepNumber, {
+	"aria-hidden": true,
+	children: index
+}), /* @__PURE__ */ jsxs(Box, {
+	sx: {
+		minWidth: 0,
+		flex: 1
+	},
+	children: [
+		/* @__PURE__ */ jsx(Typography, {
+			component: "h3",
+			sx: { fontWeight: 600 },
+			variant: "subtitle1",
+			children: title
+		}),
+		description && /* @__PURE__ */ jsx(Typography, {
+			color: "text.secondary",
+			variant: "body2",
+			children: description
+		}),
+		children
+	]
+})] });
+/** The markdown that `web.help` sets, with `{{registryUrl}}` filled in. */
+var CustomHelp = ({ markdown }) => {
+	const { configOptions } = useConfig();
+	return /* @__PURE__ */ jsx(CustomHelpContent, {
+		"data-testid": "help-custom",
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			components: externalLinkComponents,
+			children: markdown.replaceAll("{{registryUrl}}", configOptions.base)
+		})
+	});
+};
+/** The steps to point a client at the registry, log in and publish; shared by the welcome card and the settings. */
+var HelpGuide = ({ withWaitStep = false, labelledBy }) => {
 	const { configOptions } = useConfig();
+	const { t } = useTranslation();
 	const registryUrl = configOptions.base;
+	const scope = configOptions.scope || void 0;
+	const setupTabs = SETUP_TABS.filter((tab) => tab === NPMRC || configOptions.pkgManagers?.includes(tab));
+	const [setupTab, setSetupTab] = useState(setupTabs[0]);
+	const isBun = setupTab === "bun";
+	const steps = [{
+		key: "configure",
+		title: t("help.steps.configure.title"),
+		description: t("help.steps.configure.description"),
+		body: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tabs, {
+			allowScrollButtonsMobile: true,
+			"aria-label": t("help.steps.configure.title"),
+			onChange: (_event, value) => setSetupTab(value),
+			sx: {
+				minHeight: 36,
+				mt: 1
+			},
+			scrollButtons: "auto",
+			value: setupTab,
+			variant: "scrollable",
+			children: setupTabs.map((tab) => /* @__PURE__ */ jsx(Tab, {
+				"data-testid": `help-setup-${tab}`,
+				label: tab,
+				sx: {
+					minHeight: 36,
+					minWidth: 0,
+					px: 1.5,
+					py: 0,
+					textTransform: "none"
+				},
+				value: tab
+			}, tab))
+		}), /* @__PURE__ */ jsx(Command, {
+			dataTestId: "help-setup-command",
+			text: getSetupCommand(setupTab, scope, registryUrl)
+		})] })
+	}];
+	if (configOptions.login) steps.push({
+		key: "login",
+		title: t("help.steps.login.title"),
+		description: t("help.steps.login.description"),
+		body: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Command, {
+				dataTestId: "help-login-command",
+				text: t("help.first-step-command-line", { registryUrl })
+			}),
+			isBun && /* @__PURE__ */ jsx(Typography, {
+				color: "text.secondary",
+				sx: { mt: 1 },
+				variant: "body2",
+				children: t("help.steps.login.bun-note")
+			}),
+			setupTab === "yarn" && /* @__PURE__ */ jsxs(Box, {
+				"data-testid": "help-login-yarn-plugin",
+				sx: { mt: 2 },
+				children: [
+					/* @__PURE__ */ jsxs(Typography, {
+						color: "text.secondary",
+						variant: "body2",
+						children: [
+							t("help.steps.login.yarn-note"),
+							" ",
+							/* @__PURE__ */ jsx(Link, {
+								href: YARN_PLUGIN_NPM_URL,
+								rel: "noopener noreferrer",
+								target: "_blank",
+								children: t("help.steps.login.yarn-plugin-link")
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Command, {
+						dataTestId: "help-login-yarn-plugin-install",
+						text: YARN_PLUGIN_INSTALL
+					}),
+					/* @__PURE__ */ jsx(Command, {
+						dataTestId: "help-login-yarn-command",
+						text: getCLISetRegistry("yarn npm login", registryUrl)
+					})
+				]
+			})
+		] })
+	});
+	steps.push({
+		key: "publish",
+		title: t("help.steps.publish.title"),
+		description: t("help.steps.publish.description"),
+		body: isBun ? /* @__PURE__ */ jsx(Command, {
+			dataTestId: "help-publish-command-bun",
+			text: getCLISetRegistry("bun publish", registryUrl)
+		}) : /* @__PURE__ */ jsx(Command, {
+			dataTestId: "help-publish-command",
+			text: t("help.second-step-command-line", { registryUrl })
+		})
+	});
+	if (withWaitStep) steps.push({
+		key: "wait",
+		title: t("help.steps.wait.title"),
+		description: t("help.steps.wait.description")
+	});
+	return /* @__PURE__ */ jsx(StepList, {
+		"aria-labelledby": labelledBy,
+		"data-testid": "help-guide",
+		children: steps.map((step, index) => /* @__PURE__ */ jsx(HelpStep, {
+			description: step.description,
+			index: index + 1,
+			title: step.title,
+			children: step.body
+		}, step.key))
+	});
+};
+var Help = () => {
+	const { configOptions } = useConfig();
 	const { t } = useTranslation();
+	const customHelp = configOptions.help?.trim();
+	if (customHelp) return /* @__PURE__ */ jsx(CardStyled, {
+		"data-testid": "help-card",
+		id: "help-card",
+		children: /* @__PURE__ */ jsx(CardContent, {
+			sx: { p: {
+				xs: 2,
+				sm: 4
+			} },
+			children: /* @__PURE__ */ jsx(CustomHelp, { markdown: customHelp })
+		})
+	});
 	return /* @__PURE__ */ jsxs(CardStyled, {
 		"data-testid": "help-card",
 		id: "help-card",
-		children: [/* @__PURE__ */ jsxs(CardContent, { children: [
-			/* @__PURE__ */ jsx(Heading, {
-				gutterBottom: true,
-				id: "help-card__title",
-				variant: "h5",
-				children: t("help.title")
-			}),
-			/* @__PURE__ */ jsx(Heading, {
-				color: "textSecondary",
-				gutterBottom: true,
-				sx: { marginBottom: 1 },
-				children: t("help.sub-title")
-			}),
-			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, {
-				variant: "body1",
-				children: t("help.third-step")
-			})
-		] }), /* @__PURE__ */ jsx(CardActions, { children: /* @__PURE__ */ jsx(Button, {
-			color: "primary",
-			href: "https://verdaccio.org/docs/cli-registry",
-			size: "small",
-			children: t("button.learn-more")
-		}) })]
+		children: [/* @__PURE__ */ jsxs(CardContent, {
+			sx: { p: {
+				xs: 2,
+				sm: 4
+			} },
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						alignItems: {
+							xs: "flex-start",
+							sm: "center"
+						},
+						gap: 2,
+						mb: 3
+					},
+					children: [/* @__PURE__ */ jsx(Inventory2Outlined, {
+						color: "primary",
+						sx: {
+							fontSize: {
+								xs: 32,
+								sm: 48
+							},
+							flexShrink: 0
+						}
+					}), /* @__PURE__ */ jsxs(Box, {
+						sx: { minWidth: 0 },
+						children: [/* @__PURE__ */ jsx(Heading, {
+							id: "help-card__title",
+							sx: {
+								fontSize: {
+									xs: "1.25rem",
+									sm: "1.5rem"
+								},
+								lineHeight: 1.3
+							},
+							variant: "h5",
+							children: t("help.title")
+						}), /* @__PURE__ */ jsx(Typography, {
+							color: "text.secondary",
+							children: t("help.welcome", { title: configOptions.title })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(HelpGuide, {
+					labelledBy: "help-card__title",
+					withWaitStep: true
+				}),
+				/* @__PURE__ */ jsxs(Alert, {
+					"data-testid": "help-uplinks-note",
+					severity: "info",
+					sx: { mt: 3 },
+					children: [
+						t("help.uplinks-note"),
+						" ",
+						/* @__PURE__ */ jsx(Link, {
+							href: DOCS_UPLINKS_URL,
+							rel: "noopener noreferrer",
+							target: "_blank",
+							children: t("help.uplinks-link")
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx(CardActions, {
+			sx: {
+				px: {
+					xs: 2,
+					sm: 4
+				},
+				pb: 3
+			},
+			children: /* @__PURE__ */ jsx(DocsLink, { dataTestId: "help-docs-link" })
+		})]
 	});
 };
 //#endregion
-export { Help as default };
+export { CustomHelp, HelpGuide, Help as default, getSetupCommand };
 
 //# sourceMappingURL=Help.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Help.mjs","names":["CopyClipboard","Card"],"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;CACpF,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EAAY,SAAS;EAAU,UAAA;CAAkB,CAAA,GACjD,oBAACA,iBAAD;EAAe,YAAW;EAAiB;CAAO,CAAA,CAC1C,EAAA,CAAA;AAEd;AAEA,IAAM,aAAuB;CAC3B,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,cAAc,cAAc;CAClC,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,qBAACC,YAAD;EAAM,eAAY;EAAY,IAAG;EAAjC,UAAA,CACE,qBAAC,aAAD,EAAA,UAAA;GACE,oBAAC,SAAD;IAAS,cAAc;IAAM,IAAG;IAAmB,SAAQ;IACxD,UAAA,EAAE,YAAY;GACR,CAAA;GACT,oBAAC,SAAD;IAAS,OAAM;IAAgB,cAAc;IAAM,IAAI,EAAE,cAAc,EAAE;IACtE,UAAA,EAAE,gBAAgB;GACZ,CAAA;GACR,+BACC,EAAE,iBAAiB,GACnB,EAAE,gCAAgC,EAAE,YAAY,CAAC,CACnD;GACC,+BACC,EAAE,kBAAkB,GACpB,EAAE,iCAAiC,EAAE,YAAY,CAAC,CACpD;GACA,oBAAC,YAAD;IAAY,SAAQ;IAAS,UAAA,EAAE,iBAAiB;GAAc,CAAA;EACnD,EAAA,CAAA,GACb,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,MAAK;GAA0C,MAAK;GACzE,UAAA,EAAE,mBAAmB;EAChB,CAAA,EACG,CAAA,CACT;;AAEV"}
+{"version":3,"file":"Help.mjs","names":["CopyClipboard","_Fragment","Card"],"sources":["../../../src/components/Help/Help.tsx"],"sourcesContent":["import Inventory2Outlined from '@mui/icons-material/Inventory2Outlined';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport CardActions from '@mui/material/CardActions';\nimport CardContent from '@mui/material/CardContent';\nimport Link from '@mui/material/Link';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport Typography from '@mui/material/Typography';\nimport React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport { CopyClipboard, Heading, useConfig } from '../../';\nimport DocsLink from '../DocsLink';\nimport {\n  getBunfigRegistry,\n  getCLISBerryYamlRegistry,\n  getCLISetConfigRegistry,\n  getCLISetRegistry,\n  getNpmrcRegistry,\n} from '../../utils/cli-utils';\nimport { externalLinkComponents } from '../../utils/markdown';\nimport {\n  CardStyled as Card,\n  CommandBox,\n  CustomHelpContent,\n  Step,\n  StepList,\n  StepNumber,\n} from './styles';\n\nconst NPMRC = '.npmrc';\nconst SETUP_TABS = ['npm', 'pnpm', 'yarn', 'bun', NPMRC] as const;\ntype SetupTab = (typeof SETUP_TABS)[number];\n\nconst DOCS_UPLINKS_URL = 'https://verdaccio.org/docs/uplinks';\nconst YARN_PLUGIN_NPM_URL = 'https://github.com/verdaccio/yarn-plugin-npm';\nconst YARN_PLUGIN_INSTALL = 'yarn dlx @verdaccio/yarn-import npm-login';\n\n/** The one-time command that makes a client use this registry, honouring `web.scope`. */\nexport function getSetupCommand(tab: SetupTab, scope: string | undefined, registryUrl: string) {\n  switch (tab) {\n    case 'npm':\n      return getCLISetConfigRegistry('npm config set', scope, registryUrl);\n    case 'pnpm':\n      return getCLISetConfigRegistry('pnpm config set', scope, registryUrl);\n    case 'yarn':\n      return getCLISBerryYamlRegistry(scope, registryUrl).trim();\n    case 'bun':\n      return getBunfigRegistry(scope, registryUrl);\n    default:\n      return getNpmrcRegistry(scope, registryUrl);\n  }\n}\n\nconst Command: React.FC<{ dataTestId: string; text: string }> = ({ dataTestId, text }) => (\n  <CommandBox>\n    <CopyClipboard dataTestId={dataTestId} text={text}>\n      <code>{text}</code>\n    </CopyClipboard>\n  </CommandBox>\n);\n\nconst HelpStep: React.FC<{\n  index: number;\n  title: string;\n  description?: string;\n  children?: React.ReactNode;\n}> = ({ index, title, description, children }) => (\n  <Step>\n    <StepNumber aria-hidden={true}>{index}</StepNumber>\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Typography component=\"h3\" sx={{ fontWeight: 600 }} variant=\"subtitle1\">\n        {title}\n      </Typography>\n      {description && (\n        <Typography color=\"text.secondary\" variant=\"body2\">\n          {description}\n        </Typography>\n      )}\n      {children}\n    </Box>\n  </Step>\n);\n\n/** The markdown that `web.help` sets, with `{{registryUrl}}` filled in. */\nexport const CustomHelp: React.FC<{ markdown: string }> = ({ markdown }) => {\n  const { configOptions } = useConfig();\n  return (\n    <CustomHelpContent data-testid=\"help-custom\">\n      <ReactMarkdown components={externalLinkComponents}>\n        {markdown.replaceAll('{{registryUrl}}', configOptions.base)}\n      </ReactMarkdown>\n    </CustomHelpContent>\n  );\n};\n\n/** The steps to point a client at the registry, log in and publish; shared by the welcome card and the settings. */\nexport const HelpGuide: React.FC<{ withWaitStep?: boolean; labelledBy?: string }> = ({\n  withWaitStep = false,\n  labelledBy,\n}) => {\n  const { configOptions } = useConfig();\n  const { t } = useTranslation();\n  const registryUrl = configOptions.base;\n  const scope = configOptions.scope || undefined;\n  const setupTabs = SETUP_TABS.filter(\n    (tab) => tab === NPMRC || configOptions.pkgManagers?.includes(tab)\n  );\n  const [setupTab, setSetupTab] = useState<SetupTab>(setupTabs[0]);\n  const isBun = setupTab === 'bun';\n  const steps: { key: string; title: string; description?: string; body?: React.ReactNode }[] = [\n    {\n      key: 'configure',\n      title: t('help.steps.configure.title'),\n      description: t('help.steps.configure.description'),\n      body: (\n        <>\n          <Tabs\n            allowScrollButtonsMobile={true}\n            aria-label={t('help.steps.configure.title')}\n            onChange={(_event, value: SetupTab) => setSetupTab(value)}\n            sx={{ minHeight: 36, mt: 1 }}\n            scrollButtons=\"auto\"\n            value={setupTab}\n            variant=\"scrollable\"\n          >\n            {setupTabs.map((tab) => (\n              <Tab\n                data-testid={`help-setup-${tab}`}\n                key={tab}\n                label={tab}\n                sx={{ minHeight: 36, minWidth: 0, px: 1.5, py: 0, textTransform: 'none' }}\n                value={tab}\n              />\n            ))}\n          </Tabs>\n          <Command\n            dataTestId=\"help-setup-command\"\n            text={getSetupCommand(setupTab, scope, registryUrl)}\n          />\n        </>\n      ),\n    },\n  ];\n  if (configOptions.login) {\n    steps.push({\n      key: 'login',\n      title: t('help.steps.login.title'),\n      description: t('help.steps.login.description'),\n      body: (\n        <>\n          <Command\n            dataTestId=\"help-login-command\"\n            text={t('help.first-step-command-line', { registryUrl })}\n          />\n          {isBun && (\n            <Typography color=\"text.secondary\" sx={{ mt: 1 }} variant=\"body2\">\n              {t('help.steps.login.bun-note')}\n            </Typography>\n          )}\n          {setupTab === 'yarn' && (\n            <Box data-testid=\"help-login-yarn-plugin\" sx={{ mt: 2 }}>\n              <Typography color=\"text.secondary\" variant=\"body2\">\n                {t('help.steps.login.yarn-note')}{' '}\n                <Link href={YARN_PLUGIN_NPM_URL} rel=\"noopener noreferrer\" target=\"_blank\">\n                  {t('help.steps.login.yarn-plugin-link')}\n                </Link>\n              </Typography>\n              <Command dataTestId=\"help-login-yarn-plugin-install\" text={YARN_PLUGIN_INSTALL} />\n              <Command\n                dataTestId=\"help-login-yarn-command\"\n                text={getCLISetRegistry('yarn npm login', registryUrl)}\n              />\n            </Box>\n          )}\n        </>\n      ),\n    });\n  }\n  steps.push({\n    key: 'publish',\n    title: t('help.steps.publish.title'),\n    description: t('help.steps.publish.description'),\n    body: isBun ? (\n      <Command\n        dataTestId=\"help-publish-command-bun\"\n        text={getCLISetRegistry('bun publish', registryUrl)}\n      />\n    ) : (\n      <Command\n        dataTestId=\"help-publish-command\"\n        text={t('help.second-step-command-line', { registryUrl })}\n      />\n    ),\n  });\n  if (withWaitStep) {\n    steps.push({\n      key: 'wait',\n      title: t('help.steps.wait.title'),\n      description: t('help.steps.wait.description'),\n    });\n  }\n\n  return (\n    <StepList aria-labelledby={labelledBy} data-testid=\"help-guide\">\n      {steps.map((step, index) => (\n        <HelpStep\n          description={step.description}\n          index={index + 1}\n          key={step.key}\n          title={step.title}\n        >\n          {step.body}\n        </HelpStep>\n      ))}\n    </StepList>\n  );\n};\n\nconst Help: React.FC = () => {\n  const { configOptions } = useConfig();\n  const { t } = useTranslation();\n  const customHelp = configOptions.help?.trim();\n  if (customHelp) {\n    return (\n      <Card data-testid=\"help-card\" id=\"help-card\">\n        <CardContent sx={{ p: { xs: 2, sm: 4 } }}>\n          <CustomHelp markdown={customHelp} />\n        </CardContent>\n      </Card>\n    );\n  }\n  return (\n    <Card data-testid=\"help-card\" id=\"help-card\">\n      <CardContent sx={{ p: { xs: 2, sm: 4 } }}>\n        <Box\n          sx={{ display: 'flex', alignItems: { xs: 'flex-start', sm: 'center' }, gap: 2, mb: 3 }}\n        >\n          <Inventory2Outlined\n            color=\"primary\"\n            sx={{ fontSize: { xs: 32, sm: 48 }, flexShrink: 0 }}\n          />\n          <Box sx={{ minWidth: 0 }}>\n            <Heading\n              id=\"help-card__title\"\n              sx={{ fontSize: { xs: '1.25rem', sm: '1.5rem' }, lineHeight: 1.3 }}\n              variant=\"h5\"\n            >\n              {t('help.title')}\n            </Heading>\n            <Typography color=\"text.secondary\">\n              {t('help.welcome', { title: configOptions.title })}\n            </Typography>\n          </Box>\n        </Box>\n        <HelpGuide labelledBy=\"help-card__title\" withWaitStep={true} />\n        {/* @ts-ignore - Alert does accept children despite the type error */}\n        <Alert data-testid=\"help-uplinks-note\" severity=\"info\" sx={{ mt: 3 }}>\n          {t('help.uplinks-note')}{' '}\n          <Link href={DOCS_UPLINKS_URL} rel=\"noopener noreferrer\" target=\"_blank\">\n            {t('help.uplinks-link')}\n          </Link>\n        </Alert>\n      </CardContent>\n      <CardActions sx={{ px: { xs: 2, sm: 4 }, pb: 3 }}>\n        <DocsLink dataTestId=\"help-docs-link\" />\n      </CardActions>\n    </Card>\n  );\n};\n\nexport default Help;\n"],"mappings":"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"}

package/build/components/Help/styles.d.ts

@@ -1 +1,30 @@
+import type { Theme } from '../../Theme';
 export declare const CardStyled: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const StepList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
+export declare const Step: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: Theme;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const StepNumber: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CommandBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CustomHelpContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/components/Help/styles.js

@@ -5,10 +5,95 @@ let _mui_material_Card = require("@mui/material/Card");
 _mui_material_Card = require_runtime.__toESM(_mui_material_Card);
 //#region src/components/Help/styles.ts
 var CardStyled = (0, _emotion_styled.default)(_mui_material_Card.default)({
-	maxWidth: 600,
+	maxWidth: 760,
 	margin: "auto"
 });
+var StepList = (0, _emotion_styled.default)("ol")({
+	display: "flex",
+	flexDirection: "column",
+	gap: 24,
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+});
+var Step = (0, _emotion_styled.default)("li")(({ theme }) => ({
+	display: "flex",
+	gap: 12,
+	alignItems: "flex-start",
+	[`@media (min-width: ${theme.breakPoints.small}px)`]: { gap: 16 }
+}));
+var StepNumber = (0, _emotion_styled.default)("span")(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	width: 28,
+	height: 28,
+	borderRadius: "50%",
+	fontSize: theme.fontSize.sm,
+	fontWeight: theme.fontWeight.bold,
+	color: theme.palette.primary.contrastText,
+	backgroundColor: theme.palette.primary.main
+}));
+var CommandBox = (0, _emotion_styled.default)("div")(({ theme }) => ({
+	marginTop: 8,
+	padding: "6px 8px 6px 12px",
+	borderRadius: 6,
+	fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+	backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900],
+	border: `1px solid ${theme.palette.divider}`,
+	overflowX: "auto",
+	"& span, & code": { fontFamily: "inherit" }
+}));
+var CustomHelpContent = (0, _emotion_styled.default)("div")(({ theme }) => ({
+	overflowWrap: "anywhere",
+	"h1, h2, h3": { marginTop: 0 },
+	img: {
+		maxWidth: "100%",
+		maxHeight: "2.5em",
+		verticalAlign: "middle",
+		marginRight: 8
+	},
+	"p > img:only-child": {
+		maxHeight: "none",
+		marginRight: 0
+	},
+	ul: {
+		paddingLeft: 24,
+		listStyle: "disc"
+	},
+	ol: {
+		paddingLeft: 24,
+		listStyle: "decimal"
+	},
+	li: { marginBottom: 4 },
+	blockquote: {
+		margin: "16px 0",
+		padding: "4px 16px",
+		borderLeft: `4px solid ${theme.palette.primary.main}`,
+		color: theme.palette.text.secondary
+	},
+	hr: {
+		border: 0,
+		borderTop: `1px solid ${theme.palette.divider}`,
+		margin: "24px 0"
+	},
+	a: { color: theme.palette.primary.main },
+	"pre, code": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+	pre: {
+		padding: "8px 12px",
+		borderRadius: 6,
+		overflowX: "auto",
+		border: `1px solid ${theme.palette.divider}`,
+		backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900]
+	}
+}));
 //#endregion
 exports.CardStyled = CardStyled;
+exports.CommandBox = CommandBox;
+exports.CustomHelpContent = CustomHelpContent;
+exports.Step = Step;
+exports.StepList = StepList;
+exports.StepNumber = StepNumber;
 
 //# sourceMappingURL=styles.js.map

package/build/components/Help/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","Card"],"sources":["../../../src/components/Help/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\n\nexport const CardStyled = styled(Card)({\n  maxWidth: 600,\n  margin: 'auto',\n});\n"],"mappings":";;;;;;AAGA,IAAa,cAAA,GAAaA,gBAAAA,QAAAA,CAAOC,mBAAAA,OAAI,CAAC,CAAC;CACrC,UAAU;CACV,QAAQ;AACV,CAAC"}
+{"version":3,"file":"styles.js","names":["styled","Card"],"sources":["../../../src/components/Help/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\n\nimport type { Theme } from '../../Theme';\n\nexport const CardStyled = styled(Card)({\n  maxWidth: 760,\n  margin: 'auto',\n});\n\nexport const StepList = styled('ol')({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 24,\n  margin: 0,\n  padding: 0,\n  listStyle: 'none',\n});\n\nexport const Step = styled('li')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  gap: 12,\n  alignItems: 'flex-start',\n  [`@media (min-width: ${theme.breakPoints.small}px)`]: {\n    gap: 16,\n  },\n}));\n\nexport const StepNumber = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n  width: 28,\n  height: 28,\n  borderRadius: '50%',\n  fontSize: theme.fontSize.sm,\n  fontWeight: theme.fontWeight.bold,\n  color: theme.palette.primary.contrastText,\n  backgroundColor: theme.palette.primary.main,\n}));\n\nexport const CommandBox = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  marginTop: 8,\n  padding: '6px 8px 6px 12px',\n  borderRadius: 6,\n  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n  backgroundColor:\n    theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],\n  border: `1px solid ${theme.palette.divider}`,\n  overflowX: 'auto',\n  // the global reset forces the UI font on span and code\n  '& span, & code': {\n    fontFamily: 'inherit',\n  },\n}));\n\nexport const CustomHelpContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  overflowWrap: 'anywhere',\n  'h1, h2, h3': { marginTop: 0 },\n  // an image next to text is a logo or badge; an image alone in a paragraph keeps its size\n  img: { maxWidth: '100%', maxHeight: '2.5em', verticalAlign: 'middle', marginRight: 8 },\n  'p > img:only-child': { maxHeight: 'none', marginRight: 0 },\n  ul: { paddingLeft: 24, listStyle: 'disc' },\n  ol: { paddingLeft: 24, listStyle: 'decimal' },\n  li: { marginBottom: 4 },\n  blockquote: {\n    margin: '16px 0',\n    padding: '4px 16px',\n    borderLeft: `4px solid ${theme.palette.primary.main}`,\n    color: theme.palette.text.secondary,\n  },\n  hr: { border: 0, borderTop: `1px solid ${theme.palette.divider}`, margin: '24px 0' },\n  a: { color: theme.palette.primary.main },\n  'pre, code': {\n    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n  },\n  pre: {\n    padding: '8px 12px',\n    borderRadius: 6,\n    overflowX: 'auto',\n    border: `1px solid ${theme.palette.divider}`,\n    backgroundColor:\n      theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],\n  },\n}));\n"],"mappings":";;;;;;AAKA,IAAa,cAAA,GAAaA,gBAAAA,QAAAA,CAAOC,mBAAAA,OAAI,CAAC,CAAC;CACrC,UAAU;CACV,QAAQ;AACV,CAAC;AAED,IAAa,YAAA,GAAWD,gBAAAA,QAAAA,CAAO,IAAI,CAAC,CAAC;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACL,QAAQ;CACR,SAAS;CACT,WAAW;AACb,CAAC;AAED,IAAa,QAAA,GAAOA,gBAAAA,QAAAA,CAAO,IAAI,CAAC,EAAqB,EAAE,aAAa;CAClE,SAAS;CACT,KAAK;CACL,YAAY;EACX,sBAAsB,MAAM,YAAY,MAAM,OAAO,EACpD,KAAK,GACP;AACF,EAAE;AAEF,IAAa,cAAA,GAAaA,gBAAAA,QAAAA,CAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAC1E,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,cAAc;CACd,UAAU,MAAM,SAAS;CACzB,YAAY,MAAM,WAAW;CAC7B,OAAO,MAAM,QAAQ,QAAQ;CAC7B,iBAAiB,MAAM,QAAQ,QAAQ;AACzC,EAAE;AAEF,IAAa,cAAA,GAAaA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACzE,WAAW;CACX,SAAS;CACT,cAAc;CACd,YAAY;CACZ,iBACE,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,KAAK,OAAO,MAAM,QAAQ,KAAK;CAChF,QAAQ,aAAa,MAAM,QAAQ;CACnC,WAAW;CAEX,kBAAkB,EAChB,YAAY,UACd;AACF,EAAE;AAEF,IAAa,qBAAA,GAAoBA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CAChF,cAAc;CACd,cAAc,EAAE,WAAW,EAAE;CAE7B,KAAK;EAAE,UAAU;EAAQ,WAAW;EAAS,eAAe;EAAU,aAAa;CAAE;CACrF,sBAAsB;EAAE,WAAW;EAAQ,aAAa;CAAE;CAC1D,IAAI;EAAE,aAAa;EAAI,WAAW;CAAO;CACzC,IAAI;EAAE,aAAa;EAAI,WAAW;CAAU;CAC5C,IAAI,EAAE,cAAc,EAAE;CACtB,YAAY;EACV,QAAQ;EACR,SAAS;EACT,YAAY,aAAa,MAAM,QAAQ,QAAQ;EAC/C,OAAO,MAAM,QAAQ,KAAK;CAC5B;CACA,IAAI;EAAE,QAAQ;EAAG,WAAW,aAAa,MAAM,QAAQ;EAAW,QAAQ;CAAS;CACnF,GAAG,EAAE,OAAO,MAAM,QAAQ,QAAQ,KAAK;CACvC,aAAa,EACX,YAAY,2DACd;CACA,KAAK;EACH,SAAS;EACT,cAAc;EACd,WAAW;EACX,QAAQ,aAAa,MAAM,QAAQ;EACnC,iBACE,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,KAAK,OAAO,MAAM,QAAQ,KAAK;CAClF;AACF,EAAE"}

package/build/components/Help/styles.mjs

@@ -2,10 +2,90 @@ import styled from "@emotion/styled";
 import Card from "@mui/material/Card";
 //#region src/components/Help/styles.ts
 var CardStyled = styled(Card)({
-	maxWidth: 600,
+	maxWidth: 760,
 	margin: "auto"
 });
+var StepList = styled("ol")({
+	display: "flex",
+	flexDirection: "column",
+	gap: 24,
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+});
+var Step = styled("li")(({ theme }) => ({
+	display: "flex",
+	gap: 12,
+	alignItems: "flex-start",
+	[`@media (min-width: ${theme.breakPoints.small}px)`]: { gap: 16 }
+}));
+var StepNumber = styled("span")(({ theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	width: 28,
+	height: 28,
+	borderRadius: "50%",
+	fontSize: theme.fontSize.sm,
+	fontWeight: theme.fontWeight.bold,
+	color: theme.palette.primary.contrastText,
+	backgroundColor: theme.palette.primary.main
+}));
+var CommandBox = styled("div")(({ theme }) => ({
+	marginTop: 8,
+	padding: "6px 8px 6px 12px",
+	borderRadius: 6,
+	fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+	backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900],
+	border: `1px solid ${theme.palette.divider}`,
+	overflowX: "auto",
+	"& span, & code": { fontFamily: "inherit" }
+}));
+var CustomHelpContent = styled("div")(({ theme }) => ({
+	overflowWrap: "anywhere",
+	"h1, h2, h3": { marginTop: 0 },
+	img: {
+		maxWidth: "100%",
+		maxHeight: "2.5em",
+		verticalAlign: "middle",
+		marginRight: 8
+	},
+	"p > img:only-child": {
+		maxHeight: "none",
+		marginRight: 0
+	},
+	ul: {
+		paddingLeft: 24,
+		listStyle: "disc"
+	},
+	ol: {
+		paddingLeft: 24,
+		listStyle: "decimal"
+	},
+	li: { marginBottom: 4 },
+	blockquote: {
+		margin: "16px 0",
+		padding: "4px 16px",
+		borderLeft: `4px solid ${theme.palette.primary.main}`,
+		color: theme.palette.text.secondary
+	},
+	hr: {
+		border: 0,
+		borderTop: `1px solid ${theme.palette.divider}`,
+		margin: "24px 0"
+	},
+	a: { color: theme.palette.primary.main },
+	"pre, code": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
+	pre: {
+		padding: "8px 12px",
+		borderRadius: 6,
+		overflowX: "auto",
+		border: `1px solid ${theme.palette.divider}`,
+		backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[900]
+	}
+}));
 //#endregion
-export { CardStyled };
+export { CardStyled, CommandBox, CustomHelpContent, Step, StepList, StepNumber };
 
 //# sourceMappingURL=styles.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/Help/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\n\nexport const CardStyled = styled(Card)({\n  maxWidth: 600,\n  margin: 'auto',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,OAAO,IAAI,CAAC,CAAC;CACrC,UAAU;CACV,QAAQ;AACV,CAAC"}
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/components/Help/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\n\nimport type { Theme } from '../../Theme';\n\nexport const CardStyled = styled(Card)({\n  maxWidth: 760,\n  margin: 'auto',\n});\n\nexport const StepList = styled('ol')({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 24,\n  margin: 0,\n  padding: 0,\n  listStyle: 'none',\n});\n\nexport const Step = styled('li')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  gap: 12,\n  alignItems: 'flex-start',\n  [`@media (min-width: ${theme.breakPoints.small}px)`]: {\n    gap: 16,\n  },\n}));\n\nexport const StepNumber = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n  width: 28,\n  height: 28,\n  borderRadius: '50%',\n  fontSize: theme.fontSize.sm,\n  fontWeight: theme.fontWeight.bold,\n  color: theme.palette.primary.contrastText,\n  backgroundColor: theme.palette.primary.main,\n}));\n\nexport const CommandBox = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  marginTop: 8,\n  padding: '6px 8px 6px 12px',\n  borderRadius: 6,\n  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n  backgroundColor:\n    theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],\n  border: `1px solid ${theme.palette.divider}`,\n  overflowX: 'auto',\n  // the global reset forces the UI font on span and code\n  '& span, & code': {\n    fontFamily: 'inherit',\n  },\n}));\n\nexport const CustomHelpContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  overflowWrap: 'anywhere',\n  'h1, h2, h3': { marginTop: 0 },\n  // an image next to text is a logo or badge; an image alone in a paragraph keeps its size\n  img: { maxWidth: '100%', maxHeight: '2.5em', verticalAlign: 'middle', marginRight: 8 },\n  'p > img:only-child': { maxHeight: 'none', marginRight: 0 },\n  ul: { paddingLeft: 24, listStyle: 'disc' },\n  ol: { paddingLeft: 24, listStyle: 'decimal' },\n  li: { marginBottom: 4 },\n  blockquote: {\n    margin: '16px 0',\n    padding: '4px 16px',\n    borderLeft: `4px solid ${theme.palette.primary.main}`,\n    color: theme.palette.text.secondary,\n  },\n  hr: { border: 0, borderTop: `1px solid ${theme.palette.divider}`, margin: '24px 0' },\n  a: { color: theme.palette.primary.main },\n  'pre, code': {\n    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n  },\n  pre: {\n    padding: '8px 12px',\n    borderRadius: 6,\n    overflowX: 'auto',\n    border: `1px solid ${theme.palette.divider}`,\n    backgroundColor:\n      theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],\n  },\n}));\n"],"mappings":";;;AAKA,IAAa,aAAa,OAAO,IAAI,CAAC,CAAC;CACrC,UAAU;CACV,QAAQ;AACV,CAAC;AAED,IAAa,WAAW,OAAO,IAAI,CAAC,CAAC;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACL,QAAQ;CACR,SAAS;CACT,WAAW;AACb,CAAC;AAED,IAAa,OAAO,OAAO,IAAI,CAAC,EAAqB,EAAE,aAAa;CAClE,SAAS;CACT,KAAK;CACL,YAAY;EACX,sBAAsB,MAAM,YAAY,MAAM,OAAO,EACpD,KAAK,GACP;AACF,EAAE;AAEF,IAAa,aAAa,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAC1E,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,cAAc;CACd,UAAU,MAAM,SAAS;CACzB,YAAY,MAAM,WAAW;CAC7B,OAAO,MAAM,QAAQ,QAAQ;CAC7B,iBAAiB,MAAM,QAAQ,QAAQ;AACzC,EAAE;AAEF,IAAa,aAAa,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACzE,WAAW;CACX,SAAS;CACT,cAAc;CACd,YAAY;CACZ,iBACE,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,KAAK,OAAO,MAAM,QAAQ,KAAK;CAChF,QAAQ,aAAa,MAAM,QAAQ;CACnC,WAAW;CAEX,kBAAkB,EAChB,YAAY,UACd;AACF,EAAE;AAEF,IAAa,oBAAoB,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CAChF,cAAc;CACd,cAAc,EAAE,WAAW,EAAE;CAE7B,KAAK;EAAE,UAAU;EAAQ,WAAW;EAAS,eAAe;EAAU,aAAa;CAAE;CACrF,sBAAsB;EAAE,WAAW;EAAQ,aAAa;CAAE;CAC1D,IAAI;EAAE,aAAa;EAAI,WAAW;CAAO;CACzC,IAAI;EAAE,aAAa;EAAI,WAAW;CAAU;CAC5C,IAAI,EAAE,cAAc,EAAE;CACtB,YAAY;EACV,QAAQ;EACR,SAAS;EACT,YAAY,aAAa,MAAM,QAAQ,QAAQ;EAC/C,OAAO,MAAM,QAAQ,KAAK;CAC5B;CACA,IAAI;EAAE,QAAQ;EAAG,WAAW,aAAa,MAAM,QAAQ;EAAW,QAAQ;CAAS;CACnF,GAAG,EAAE,OAAO,MAAM,QAAQ,QAAQ,KAAK;CACvC,aAAa,EACX,YAAY,2DACd;CACA,KAAK;EACH,SAAS;EACT,cAAc;EACd,WAAW;EACX,QAAQ,aAAa,MAAM,QAAQ;EACnC,iBACE,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,KAAK,OAAO,MAAM,QAAQ,KAAK;CAClF;AACF,EAAE"}

package/build/components/Icons/Managers/Bun.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function Bun(): React.JSX.Element;

package/build/components/Icons/Managers/Bun2.js

@@ -0,0 +1,18 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_bun = require("./bun.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Icons/Managers/Bun.tsx
+function Bun() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		alt: "bun package manager",
+		height: "20",
+		src: require_bun.default,
+		width: "20"
+	});
+}
+//#endregion
+exports.Bun = Bun;
+
+//# sourceMappingURL=Bun2.js.map

package/build/components/Icons/Managers/Bun2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bun2.js","names":["icon"],"sources":["../../../../src/components/Icons/Managers/Bun.tsx"],"sourcesContent":["import React from 'react';\n\nimport icon from './bun.svg';\n\nexport function Bun() {\n  return <img alt=\"bun package manager\" height=\"20\" src={icon} width=\"20\" />;\n}\n"],"mappings":";;;;;;AAIA,SAAgB,MAAM;CACpB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,KAAI;EAAsB,QAAO;EAAK,KAAKA,YAAAA;EAAM,OAAM;CAAM,CAAA;AAC3E"}