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

package/build/sections/Detail/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["useTranslation","useMediaQuery","Tab","styled","MuiTabs"],"sources":["../../../src/sections/Detail/Tabs.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Tab from '@mui/material/Tab';\nimport { default as MuiTabs } from '@mui/material/Tabs';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\n\ninterface Props {\n  onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;\n  tabPosition: number;\n  showUplinks?: boolean;\n}\n\nconst DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange, showUplinks }) => {\n  const { t } = useTranslation();\n  const isMobile = useMediaQuery('(max-width:599px)');\n\n  return (\n    <Tabs\n      allowScrollButtonsMobile={true}\n      onChange={onChange}\n      scrollButtons={isMobile ? 'auto' : false}\n      value={tabPosition}\n      variant={isMobile ? 'scrollable' : 'fullWidth'}\n    >\n      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />\n      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />\n      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />\n      {showUplinks && (\n        <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />\n      )}\n    </Tabs>\n  );\n};\n\nexport default DetailContainerTabs;\n\nconst Tabs = styled(MuiTabs)<{ theme?: Theme }>({\n  marginBottom: 16,\n});\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAM,uBAAwC,EAAE,aAAa,UAAU,kBAAkB;CACvF,MAAM,EAAE,OAAA,GAAMA,cAAAA,eAAAA,CAAe;CAC7B,MAAM,YAAA,GAAWC,4BAAAA,QAAAA,CAAc,mBAAmB;CAElD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;EACE,0BAA0B;EAChB;EACV,eAAe,WAAW,SAAS;EACnC,OAAO;EACP,SAAS,WAAW,eAAe;EALrC,UAAA;GAOE,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,SAAD;IAAK,eAAa;IAAc,IAAI;IAAc,OAAO,EAAE,YAAY;GAAI,CAAA;GAC3E,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,SAAD;IAAK,eAAa;IAAoB,IAAI;IAAoB,OAAO,EAAE,kBAAkB;GAAI,CAAA;GAC7F,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,SAAD;IAAK,eAAa;IAAgB,IAAI;IAAgB,OAAO,EAAE,cAAc;GAAI,CAAA;GAChF,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,SAAD;IAAK,eAAa;IAAe,IAAI;IAAe,OAAO,EAAE,aAAa;GAAI,CAAA;EAE5E;;AAEV;AAIA,IAAM,QAAA,GAAOC,gBAAAA,QAAAA,CAAOC,mBAAAA,OAAO,CAAC,CAAoB,EAC9C,cAAc,GAChB,CAAC"}
+{"version":3,"file":"Tabs.js","names":["useTranslation","useMediaQuery","Tab","TabPosition","styled","MuiTabs"],"sources":["../../../src/sections/Detail/Tabs.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Tab from '@mui/material/Tab';\nimport { default as MuiTabs } from '@mui/material/Tabs';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { TabPosition } from './ContainerContent';\n\ninterface Props {\n  onChange: (event: React.SyntheticEvent, newValue: TabPosition) => void;\n  tabPosition: TabPosition;\n  showUplinks?: boolean;\n}\n\nconst DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange, showUplinks }) => {\n  const { t } = useTranslation();\n  const isMobile = useMediaQuery('(max-width:599px)');\n\n  return (\n    <Tabs\n      allowScrollButtonsMobile={true}\n      onChange={onChange}\n      scrollButtons={isMobile ? 'auto' : false}\n      value={tabPosition}\n      variant={isMobile ? 'scrollable' : 'fullWidth'}\n    >\n      <Tab\n        data-testid={'readme-tab'}\n        id={'readme-tab'}\n        label={t('tab.readme')}\n        value={TabPosition.README}\n      />\n      <Tab\n        data-testid={'dependencies-tab'}\n        id={'dependencies-tab'}\n        label={t('tab.dependencies')}\n        value={TabPosition.DEPENDENCIES}\n      />\n      <Tab\n        data-testid={'versions-tab'}\n        id={'versions-tab'}\n        label={t('tab.versions')}\n        value={TabPosition.VERSIONS}\n      />\n      {showUplinks && (\n        <Tab\n          data-testid={'uplinks-tab'}\n          id={'uplinks-tab'}\n          label={t('tab.uplinks')}\n          value={TabPosition.UPLINKS}\n        />\n      )}\n    </Tabs>\n  );\n};\n\nexport default DetailContainerTabs;\n\nconst Tabs = styled(MuiTabs)<{ theme?: Theme }>({\n  marginBottom: 16,\n});\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,uBAAwC,EAAE,aAAa,UAAU,kBAAkB;CACvF,MAAM,EAAE,OAAA,GAAMA,cAAAA,eAAAA,CAAe;CAC7B,MAAM,YAAA,GAAWC,4BAAAA,QAAAA,CAAc,mBAAmB;CAElD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;EACE,0BAA0B;EAChB;EACV,eAAe,WAAW,SAAS;EACnC,OAAO;EACP,SAAS,WAAW,eAAe;EALrC,UAAA;GAOE,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,SAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,YAAY;IACrB,OAAOC,yBAAAA,YAAY;GACpB,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAACD,kBAAAA,SAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,kBAAkB;IAC3B,OAAOC,yBAAAA,YAAY;GACpB,CAAA;GACD,iBAAA,GAAA,kBAAA,IAAA,CAACD,kBAAAA,SAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,cAAc;IACvB,OAAOC,yBAAAA,YAAY;GACpB,CAAA;GACA,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACD,kBAAAA,SAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,aAAa;IACtB,OAAOC,yBAAAA,YAAY;GACpB,CAAA;EAEC;;AAEV;AAIA,IAAM,QAAA,GAAOC,gBAAAA,QAAAA,CAAOC,mBAAAA,OAAO,CAAC,CAAoB,EAC9C,cAAc,GAChB,CAAC"}

package/build/sections/Detail/Tabs.mjs

@@ -1,3 +1,4 @@
+import { TabPosition } from "./ContainerContent.mjs";
 import styled from "@emotion/styled";
 import "react";
 import { useTranslation } from "react-i18next";
@@ -19,22 +20,26 @@ var DetailContainerTabs = ({ tabPosition, onChange, showUplinks }) => {
 			/* @__PURE__ */ jsx(Tab, {
 				"data-testid": "readme-tab",
 				id: "readme-tab",
-				label: t("tab.readme")
+				label: t("tab.readme"),
+				value: TabPosition.README
 			}),
 			/* @__PURE__ */ jsx(Tab, {
 				"data-testid": "dependencies-tab",
 				id: "dependencies-tab",
-				label: t("tab.dependencies")
+				label: t("tab.dependencies"),
+				value: TabPosition.DEPENDENCIES
 			}),
 			/* @__PURE__ */ jsx(Tab, {
 				"data-testid": "versions-tab",
 				id: "versions-tab",
-				label: t("tab.versions")
+				label: t("tab.versions"),
+				value: TabPosition.VERSIONS
 			}),
 			showUplinks && /* @__PURE__ */ jsx(Tab, {
 				"data-testid": "uplinks-tab",
 				id: "uplinks-tab",
-				label: t("tab.uplinks")
+				label: t("tab.uplinks"),
+				value: TabPosition.UPLINKS
 			})
 		]
 	});

package/build/sections/Detail/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","names":["Tabs","MuiTabs"],"sources":["../../../src/sections/Detail/Tabs.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Tab from '@mui/material/Tab';\nimport { default as MuiTabs } from '@mui/material/Tabs';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\n\ninterface Props {\n  onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;\n  tabPosition: number;\n  showUplinks?: boolean;\n}\n\nconst DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange, showUplinks }) => {\n  const { t } = useTranslation();\n  const isMobile = useMediaQuery('(max-width:599px)');\n\n  return (\n    <Tabs\n      allowScrollButtonsMobile={true}\n      onChange={onChange}\n      scrollButtons={isMobile ? 'auto' : false}\n      value={tabPosition}\n      variant={isMobile ? 'scrollable' : 'fullWidth'}\n    >\n      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />\n      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />\n      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />\n      {showUplinks && (\n        <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />\n      )}\n    </Tabs>\n  );\n};\n\nexport default DetailContainerTabs;\n\nconst Tabs = styled(MuiTabs)<{ theme?: Theme }>({\n  marginBottom: 16,\n});\n"],"mappings":";;;;;;;;AAeA,IAAM,uBAAwC,EAAE,aAAa,UAAU,kBAAkB;CACvF,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,cAAc,mBAAmB;CAElD,OACE,qBAACA,QAAD;EACE,0BAA0B;EAChB;EACV,eAAe,WAAW,SAAS;EACnC,OAAO;EACP,SAAS,WAAW,eAAe;EALrC,UAAA;GAOE,oBAAC,KAAD;IAAK,eAAa;IAAc,IAAI;IAAc,OAAO,EAAE,YAAY;GAAI,CAAA;GAC3E,oBAAC,KAAD;IAAK,eAAa;IAAoB,IAAI;IAAoB,OAAO,EAAE,kBAAkB;GAAI,CAAA;GAC7F,oBAAC,KAAD;IAAK,eAAa;IAAgB,IAAI;IAAgB,OAAO,EAAE,cAAc;GAAI,CAAA;GAChF,eACC,oBAAC,KAAD;IAAK,eAAa;IAAe,IAAI;IAAe,OAAO,EAAE,aAAa;GAAI,CAAA;EAE5E;;AAEV;AAIA,IAAMA,SAAO,OAAOC,IAAO,CAAC,CAAoB,EAC9C,cAAc,GAChB,CAAC"}
+{"version":3,"file":"Tabs.mjs","names":["Tabs","MuiTabs"],"sources":["../../../src/sections/Detail/Tabs.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Tab from '@mui/material/Tab';\nimport { default as MuiTabs } from '@mui/material/Tabs';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { TabPosition } from './ContainerContent';\n\ninterface Props {\n  onChange: (event: React.SyntheticEvent, newValue: TabPosition) => void;\n  tabPosition: TabPosition;\n  showUplinks?: boolean;\n}\n\nconst DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange, showUplinks }) => {\n  const { t } = useTranslation();\n  const isMobile = useMediaQuery('(max-width:599px)');\n\n  return (\n    <Tabs\n      allowScrollButtonsMobile={true}\n      onChange={onChange}\n      scrollButtons={isMobile ? 'auto' : false}\n      value={tabPosition}\n      variant={isMobile ? 'scrollable' : 'fullWidth'}\n    >\n      <Tab\n        data-testid={'readme-tab'}\n        id={'readme-tab'}\n        label={t('tab.readme')}\n        value={TabPosition.README}\n      />\n      <Tab\n        data-testid={'dependencies-tab'}\n        id={'dependencies-tab'}\n        label={t('tab.dependencies')}\n        value={TabPosition.DEPENDENCIES}\n      />\n      <Tab\n        data-testid={'versions-tab'}\n        id={'versions-tab'}\n        label={t('tab.versions')}\n        value={TabPosition.VERSIONS}\n      />\n      {showUplinks && (\n        <Tab\n          data-testid={'uplinks-tab'}\n          id={'uplinks-tab'}\n          label={t('tab.uplinks')}\n          value={TabPosition.UPLINKS}\n        />\n      )}\n    </Tabs>\n  );\n};\n\nexport default DetailContainerTabs;\n\nconst Tabs = styled(MuiTabs)<{ theme?: Theme }>({\n  marginBottom: 16,\n});\n"],"mappings":";;;;;;;;;AAgBA,IAAM,uBAAwC,EAAE,aAAa,UAAU,kBAAkB;CACvF,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,cAAc,mBAAmB;CAElD,OACE,qBAACA,QAAD;EACE,0BAA0B;EAChB;EACV,eAAe,WAAW,SAAS;EACnC,OAAO;EACP,SAAS,WAAW,eAAe;EALrC,UAAA;GAOE,oBAAC,KAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,YAAY;IACrB,OAAO,YAAY;GACpB,CAAA;GACD,oBAAC,KAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,kBAAkB;IAC3B,OAAO,YAAY;GACpB,CAAA;GACD,oBAAC,KAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,cAAc;IACvB,OAAO,YAAY;GACpB,CAAA;GACA,eACC,oBAAC,KAAD;IACE,eAAa;IACb,IAAI;IACJ,OAAO,EAAE,aAAa;IACtB,OAAO,YAAY;GACpB,CAAA;EAEC;;AAEV;AAIA,IAAMA,SAAO,OAAOC,IAAO,CAAC,CAAoB,EAC9C,cAAc,GAChB,CAAC"}

package/build/sections/Footer/Footer.js

@@ -3,6 +3,7 @@ const require_AppConfigurationProvider = require("../../providers/AppConfigurati
 const require_Earth = require("../../components/Icons/Earth.js");
 require("../../components/Icons/index.js");
 const require_Logo = require("../../components/Logo/Logo.js");
+const require_markdown = require("../../utils/markdown.js");
 const require_styles = require("./styles.js");
 require("../../index.js");
 let _emotion_styled = require("@emotion/styled");
@@ -11,6 +12,8 @@ let react = require("react");
 react = require_runtime.__toESM(react);
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_markdown = require("react-markdown");
+react_markdown = require_runtime.__toESM(react_markdown);
 let country_flag_icons_react_3x2 = require("country-flag-icons/react/3x2");
 country_flag_icons_react_3x2 = require_runtime.__toESM(country_flag_icons_react_3x2);
 //#region src/sections/Footer/Footer.tsx
@@ -20,9 +23,18 @@ function goToVerdaccioWebsite() {
 var Footer = () => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { configOptions } = require_AppConfigurationProvider.useConfig();
+	const customFooter = configOptions?.footer?.trim();
+	const poweredBy = configOptions?.poweredBy;
+	const customPoweredBy = typeof poweredBy === "string" ? poweredBy.trim() : "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.Wrapper, {
 		"data-testid": "footer",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.Inner, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.Left, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_i18next.Trans, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.Inner, { children: [customFooter ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.CustomContent, {
+			"data-testid": "footer-custom",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+				components: require_markdown.externalLinkComponents,
+				children: customFooter
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.Left, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_i18next.Trans, {
 			components: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.Love, {}, "love")],
 			i18nKey: "footer.made-with-love-on"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolTip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEarth, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Flags, {
@@ -39,7 +51,13 @@ var Footer = () => {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(country_flag_icons_react_3x2.AT, { title: t("flag.austria") }) }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(country_flag_icons_react_3x2.CA, { title: t("flag.canada") }) })
 			]
-		})] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.Right, { children: configOptions?.version && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PoweredBy, {
+		})] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.Right, { children: customPoweredBy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.CustomContent, {
+			"data-testid": "footer-powered-by-custom",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+				components: require_markdown.externalLinkComponents,
+				children: customPoweredBy
+			})
+		}) : poweredBy !== false && configOptions?.version && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PoweredBy, {
 			"data-testid": "version-footer",
 			children: t("footer.powered-by")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Logo.default, {
@@ -50,7 +68,10 @@ var Footer = () => {
 		})] }) })] })
 	});
 };
-var PoweredBy = (0, _emotion_styled.default)("span")(() => ({ paddingRight: "5px" }));
+var PoweredBy = (0, _emotion_styled.default)("span")(() => ({
+	paddingRight: "5px",
+	whiteSpace: "nowrap"
+}));
 var StyledEarth = (0, _emotion_styled.default)(require_Earth.Earth)(({ theme }) => ({ margin: theme.spacing(0, 1) }));
 var Flags = (0, _emotion_styled.default)("span")(({ theme }) => ({
 	display: "inline-grid",

package/build/sections/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["useTranslation","useConfig","Wrapper","Inner","Left","Trans","Love","FlagsIcon","Right","_Fragment","Logo","styled","Earth"],"sources":["../../../src/sections/Footer/Footer.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport * as FlagsIcon from 'country-flag-icons/react/3x2';\nimport React from 'react';\nimport { Trans, useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { Logo, useConfig } from '../../';\nimport { Earth } from '../../components/Icons';\nimport { Inner, Left, Love, Right, Wrapper } from './styles';\n\nfunction goToVerdaccioWebsite(): void {\n  window.open('https://verdaccio.org', '_blank');\n}\n\nconst Footer = () => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  return (\n    <Wrapper data-testid=\"footer\">\n      <Inner>\n        <Left>\n          <Trans components={[<Love key=\"love\" />]} i18nKey=\"footer.made-with-love-on\" />\n          <ToolTip>\n            <StyledEarth />\n            <Flags data-flags=\"true\">\n              <Icon>\n                <FlagsIcon.ES title={t('flag.spain')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.NI title={t('flag.nicaragua')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.IN title={t('flag.india')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.BR title={t('flag.brazil')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.CN title={t('flag.china')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.AU title={t('flag.australia')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.DE title={t('flag.germany')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.TW title={t('flag.taiwan')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.AT title={t('flag.austria')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.CA title={t('flag.canada')} />\n              </Icon>\n            </Flags>\n          </ToolTip>\n        </Left>\n        <Right>\n          {configOptions?.version && (\n            <>\n              <PoweredBy data-testid=\"version-footer\">{t('footer.powered-by')}</PoweredBy>\n              <Logo\n                isDefault={true}\n                onClick={goToVerdaccioWebsite}\n                size=\"x-small\"\n                title={configOptions.version}\n              />\n            </>\n          )}\n        </Right>\n      </Inner>\n    </Wrapper>\n  );\n};\n\nexport default Footer;\n\nconst PoweredBy = styled('span')(() => ({\n  paddingRight: '5px',\n}));\n\nconst StyledEarth = styled(Earth)<{ theme?: Theme }>(({ theme }) => ({\n  margin: theme.spacing(0, 1),\n}));\n\nconst Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-grid',\n  gridTemplateColumns: 'repeat(10, max-content)',\n  gridGap: theme.spacing(0, 1),\n  position: 'absolute',\n  background: theme.palette.greyAthens,\n  padding: '1px 4px',\n  borderRadius: 3,\n  height: 20,\n  alignItems: 'center',\n  visibility: 'hidden',\n  top: -2,\n  ':before': {\n    content: \"''\",\n    position: 'absolute',\n    top: '29%',\n    left: -4,\n    marginLeft: -5,\n    border: '5px solid',\n    borderColor: `${theme.palette.greyAthens} transparent transparent transparent`,\n    transform: 'rotate(90deg)',\n  },\n}));\n\nconst Icon = styled('div')({\n  width: '10px',\n});\n\nconst ToolTip = styled('span')({\n  position: 'relative',\n  height: '18px',\n  ':hover': {\n    '& [data-flags=\"true\"]': {\n      visibility: 'visible',\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"Footer.js","names":["useTranslation","useConfig","Wrapper","Inner","CustomContent","ReactMarkdown","externalLinkComponents","Left","Trans","Love","FlagsIcon","Right","_Fragment","Logo","styled","Earth"],"sources":["../../../src/sections/Footer/Footer.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport * as FlagsIcon from 'country-flag-icons/react/3x2';\nimport React from 'react';\nimport { Trans, useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport type { Theme } from '../../';\nimport { Logo, useConfig } from '../../';\nimport { Earth } from '../../components/Icons';\nimport { externalLinkComponents } from '../../utils/markdown';\nimport { CustomContent, Inner, Left, Love, Right, Wrapper } from './styles';\n\nfunction goToVerdaccioWebsite(): void {\n  window.open('https://verdaccio.org', '_blank');\n}\n\nconst Footer = () => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const customFooter = configOptions?.footer?.trim();\n  const poweredBy = configOptions?.poweredBy;\n  const customPoweredBy = typeof poweredBy === 'string' ? poweredBy.trim() : '';\n  return (\n    <Wrapper data-testid=\"footer\">\n      <Inner>\n        {customFooter ? (\n          <CustomContent data-testid=\"footer-custom\">\n            <ReactMarkdown components={externalLinkComponents}>{customFooter}</ReactMarkdown>\n          </CustomContent>\n        ) : (\n          <Left>\n            <Trans components={[<Love key=\"love\" />]} i18nKey=\"footer.made-with-love-on\" />\n            <ToolTip>\n              <StyledEarth />\n              <Flags data-flags=\"true\">\n                <Icon>\n                  <FlagsIcon.ES title={t('flag.spain')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.NI title={t('flag.nicaragua')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.IN title={t('flag.india')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.BR title={t('flag.brazil')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.CN title={t('flag.china')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.AU title={t('flag.australia')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.DE title={t('flag.germany')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.TW title={t('flag.taiwan')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.AT title={t('flag.austria')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.CA title={t('flag.canada')} />\n                </Icon>\n              </Flags>\n            </ToolTip>\n          </Left>\n        )}\n        <Right>\n          {customPoweredBy ? (\n            <CustomContent data-testid=\"footer-powered-by-custom\">\n              <ReactMarkdown components={externalLinkComponents}>{customPoweredBy}</ReactMarkdown>\n            </CustomContent>\n          ) : (\n            poweredBy !== false &&\n            configOptions?.version && (\n              <>\n                <PoweredBy data-testid=\"version-footer\">{t('footer.powered-by')}</PoweredBy>\n                <Logo\n                  isDefault={true}\n                  onClick={goToVerdaccioWebsite}\n                  size=\"x-small\"\n                  title={configOptions.version}\n                />\n              </>\n            )\n          )}\n        </Right>\n      </Inner>\n    </Wrapper>\n  );\n};\n\nexport default Footer;\n\nconst PoweredBy = styled('span')(() => ({\n  paddingRight: '5px',\n  whiteSpace: 'nowrap',\n}));\n\nconst StyledEarth = styled(Earth)<{ theme?: Theme }>(({ theme }) => ({\n  margin: theme.spacing(0, 1),\n}));\n\nconst Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-grid',\n  gridTemplateColumns: 'repeat(10, max-content)',\n  gridGap: theme.spacing(0, 1),\n  position: 'absolute',\n  background: theme.palette.greyAthens,\n  padding: '1px 4px',\n  borderRadius: 3,\n  height: 20,\n  alignItems: 'center',\n  visibility: 'hidden',\n  top: -2,\n  ':before': {\n    content: \"''\",\n    position: 'absolute',\n    top: '29%',\n    left: -4,\n    marginLeft: -5,\n    border: '5px solid',\n    borderColor: `${theme.palette.greyAthens} transparent transparent transparent`,\n    transform: 'rotate(90deg)',\n  },\n}));\n\nconst Icon = styled('div')({\n  width: '10px',\n});\n\nconst ToolTip = styled('span')({\n  position: 'relative',\n  height: '18px',\n  ':hover': {\n    '& [data-flags=\"true\"]': {\n      visibility: 'visible',\n    },\n  },\n});\n"],"mappings":"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"}

package/build/sections/Footer/Footer.mjs

@@ -2,12 +2,14 @@ import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigura
 import { Earth } from "../../components/Icons/Earth.mjs";
 import "../../components/Icons/index.mjs";
 import Logo from "../../components/Logo/Logo.mjs";
-import { Inner, Left, Love, Right, Wrapper } from "./styles.mjs";
+import { externalLinkComponents } from "../../utils/markdown.mjs";
+import { CustomContent, Inner, Left, Love, Right, Wrapper } from "./styles.mjs";
 import "../../index.mjs";
 import styled from "@emotion/styled";
 import "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
 import * as FlagsIcon from "country-flag-icons/react/3x2";
 //#region src/sections/Footer/Footer.tsx
 function goToVerdaccioWebsite() {
@@ -16,9 +18,18 @@ function goToVerdaccioWebsite() {
 var Footer = () => {
 	const { t } = useTranslation();
 	const { configOptions } = useConfig();
+	const customFooter = configOptions?.footer?.trim();
+	const poweredBy = configOptions?.poweredBy;
+	const customPoweredBy = typeof poweredBy === "string" ? poweredBy.trim() : "";
 	return /* @__PURE__ */ jsx(Wrapper, {
 		"data-testid": "footer",
-		children: /* @__PURE__ */ jsxs(Inner, { children: [/* @__PURE__ */ jsxs(Left, { children: [/* @__PURE__ */ jsx(Trans, {
+		children: /* @__PURE__ */ jsxs(Inner, { children: [customFooter ? /* @__PURE__ */ jsx(CustomContent, {
+			"data-testid": "footer-custom",
+			children: /* @__PURE__ */ jsx(ReactMarkdown, {
+				components: externalLinkComponents,
+				children: customFooter
+			})
+		}) : /* @__PURE__ */ jsxs(Left, { children: [/* @__PURE__ */ jsx(Trans, {
 			components: [/* @__PURE__ */ jsx(Love, {}, "love")],
 			i18nKey: "footer.made-with-love-on"
 		}), /* @__PURE__ */ jsxs(ToolTip, { children: [/* @__PURE__ */ jsx(StyledEarth, {}), /* @__PURE__ */ jsxs(Flags, {
@@ -35,7 +46,13 @@ var Footer = () => {
 				/* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(FlagsIcon.AT, { title: t("flag.austria") }) }),
 				/* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(FlagsIcon.CA, { title: t("flag.canada") }) })
 			]
-		})] })] }), /* @__PURE__ */ jsx(Right, { children: configOptions?.version && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PoweredBy, {
+		})] })] }), /* @__PURE__ */ jsx(Right, { children: customPoweredBy ? /* @__PURE__ */ jsx(CustomContent, {
+			"data-testid": "footer-powered-by-custom",
+			children: /* @__PURE__ */ jsx(ReactMarkdown, {
+				components: externalLinkComponents,
+				children: customPoweredBy
+			})
+		}) : poweredBy !== false && configOptions?.version && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PoweredBy, {
 			"data-testid": "version-footer",
 			children: t("footer.powered-by")
 		}), /* @__PURE__ */ jsx(Logo, {
@@ -46,7 +63,10 @@ var Footer = () => {
 		})] }) })] })
 	});
 };
-var PoweredBy = styled("span")(() => ({ paddingRight: "5px" }));
+var PoweredBy = styled("span")(() => ({
+	paddingRight: "5px",
+	whiteSpace: "nowrap"
+}));
 var StyledEarth = styled(Earth)(({ theme }) => ({ margin: theme.spacing(0, 1) }));
 var Flags = styled("span")(({ theme }) => ({
 	display: "inline-grid",

package/build/sections/Footer/Footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.mjs","names":["_Fragment"],"sources":["../../../src/sections/Footer/Footer.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport * as FlagsIcon from 'country-flag-icons/react/3x2';\nimport React from 'react';\nimport { Trans, useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { Logo, useConfig } from '../../';\nimport { Earth } from '../../components/Icons';\nimport { Inner, Left, Love, Right, Wrapper } from './styles';\n\nfunction goToVerdaccioWebsite(): void {\n  window.open('https://verdaccio.org', '_blank');\n}\n\nconst Footer = () => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  return (\n    <Wrapper data-testid=\"footer\">\n      <Inner>\n        <Left>\n          <Trans components={[<Love key=\"love\" />]} i18nKey=\"footer.made-with-love-on\" />\n          <ToolTip>\n            <StyledEarth />\n            <Flags data-flags=\"true\">\n              <Icon>\n                <FlagsIcon.ES title={t('flag.spain')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.NI title={t('flag.nicaragua')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.IN title={t('flag.india')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.BR title={t('flag.brazil')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.CN title={t('flag.china')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.AU title={t('flag.australia')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.DE title={t('flag.germany')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.TW title={t('flag.taiwan')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.AT title={t('flag.austria')} />\n              </Icon>\n              <Icon>\n                <FlagsIcon.CA title={t('flag.canada')} />\n              </Icon>\n            </Flags>\n          </ToolTip>\n        </Left>\n        <Right>\n          {configOptions?.version && (\n            <>\n              <PoweredBy data-testid=\"version-footer\">{t('footer.powered-by')}</PoweredBy>\n              <Logo\n                isDefault={true}\n                onClick={goToVerdaccioWebsite}\n                size=\"x-small\"\n                title={configOptions.version}\n              />\n            </>\n          )}\n        </Right>\n      </Inner>\n    </Wrapper>\n  );\n};\n\nexport default Footer;\n\nconst PoweredBy = styled('span')(() => ({\n  paddingRight: '5px',\n}));\n\nconst StyledEarth = styled(Earth)<{ theme?: Theme }>(({ theme }) => ({\n  margin: theme.spacing(0, 1),\n}));\n\nconst Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-grid',\n  gridTemplateColumns: 'repeat(10, max-content)',\n  gridGap: theme.spacing(0, 1),\n  position: 'absolute',\n  background: theme.palette.greyAthens,\n  padding: '1px 4px',\n  borderRadius: 3,\n  height: 20,\n  alignItems: 'center',\n  visibility: 'hidden',\n  top: -2,\n  ':before': {\n    content: \"''\",\n    position: 'absolute',\n    top: '29%',\n    left: -4,\n    marginLeft: -5,\n    border: '5px solid',\n    borderColor: `${theme.palette.greyAthens} transparent transparent transparent`,\n    transform: 'rotate(90deg)',\n  },\n}));\n\nconst Icon = styled('div')({\n  width: '10px',\n});\n\nconst ToolTip = styled('span')({\n  position: 'relative',\n  height: '18px',\n  ':hover': {\n    '& [data-flags=\"true\"]': {\n      visibility: 'visible',\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"Footer.mjs","names":["_Fragment"],"sources":["../../../src/sections/Footer/Footer.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport * as FlagsIcon from 'country-flag-icons/react/3x2';\nimport React from 'react';\nimport { Trans, useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport type { Theme } from '../../';\nimport { Logo, useConfig } from '../../';\nimport { Earth } from '../../components/Icons';\nimport { externalLinkComponents } from '../../utils/markdown';\nimport { CustomContent, Inner, Left, Love, Right, Wrapper } from './styles';\n\nfunction goToVerdaccioWebsite(): void {\n  window.open('https://verdaccio.org', '_blank');\n}\n\nconst Footer = () => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const customFooter = configOptions?.footer?.trim();\n  const poweredBy = configOptions?.poweredBy;\n  const customPoweredBy = typeof poweredBy === 'string' ? poweredBy.trim() : '';\n  return (\n    <Wrapper data-testid=\"footer\">\n      <Inner>\n        {customFooter ? (\n          <CustomContent data-testid=\"footer-custom\">\n            <ReactMarkdown components={externalLinkComponents}>{customFooter}</ReactMarkdown>\n          </CustomContent>\n        ) : (\n          <Left>\n            <Trans components={[<Love key=\"love\" />]} i18nKey=\"footer.made-with-love-on\" />\n            <ToolTip>\n              <StyledEarth />\n              <Flags data-flags=\"true\">\n                <Icon>\n                  <FlagsIcon.ES title={t('flag.spain')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.NI title={t('flag.nicaragua')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.IN title={t('flag.india')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.BR title={t('flag.brazil')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.CN title={t('flag.china')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.AU title={t('flag.australia')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.DE title={t('flag.germany')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.TW title={t('flag.taiwan')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.AT title={t('flag.austria')} />\n                </Icon>\n                <Icon>\n                  <FlagsIcon.CA title={t('flag.canada')} />\n                </Icon>\n              </Flags>\n            </ToolTip>\n          </Left>\n        )}\n        <Right>\n          {customPoweredBy ? (\n            <CustomContent data-testid=\"footer-powered-by-custom\">\n              <ReactMarkdown components={externalLinkComponents}>{customPoweredBy}</ReactMarkdown>\n            </CustomContent>\n          ) : (\n            poweredBy !== false &&\n            configOptions?.version && (\n              <>\n                <PoweredBy data-testid=\"version-footer\">{t('footer.powered-by')}</PoweredBy>\n                <Logo\n                  isDefault={true}\n                  onClick={goToVerdaccioWebsite}\n                  size=\"x-small\"\n                  title={configOptions.version}\n                />\n              </>\n            )\n          )}\n        </Right>\n      </Inner>\n    </Wrapper>\n  );\n};\n\nexport default Footer;\n\nconst PoweredBy = styled('span')(() => ({\n  paddingRight: '5px',\n  whiteSpace: 'nowrap',\n}));\n\nconst StyledEarth = styled(Earth)<{ theme?: Theme }>(({ theme }) => ({\n  margin: theme.spacing(0, 1),\n}));\n\nconst Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-grid',\n  gridTemplateColumns: 'repeat(10, max-content)',\n  gridGap: theme.spacing(0, 1),\n  position: 'absolute',\n  background: theme.palette.greyAthens,\n  padding: '1px 4px',\n  borderRadius: 3,\n  height: 20,\n  alignItems: 'center',\n  visibility: 'hidden',\n  top: -2,\n  ':before': {\n    content: \"''\",\n    position: 'absolute',\n    top: '29%',\n    left: -4,\n    marginLeft: -5,\n    border: '5px solid',\n    borderColor: `${theme.palette.greyAthens} transparent transparent transparent`,\n    transform: 'rotate(90deg)',\n  },\n}));\n\nconst Icon = styled('div')({\n  width: '10px',\n});\n\nconst ToolTip = styled('span')({\n  position: 'relative',\n  height: '18px',\n  ':hover': {\n    '& [data-flags=\"true\"]': {\n      visibility: 'visible',\n    },\n  },\n});\n"],"mappings":"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"}

package/build/sections/Footer/styles.d.ts

@@ -31,3 +31,9 @@ export declare const Love: import("@emotion/styled").StyledComponent<{
 } & {
     theme?: Theme;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CustomContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/sections/Footer/styles.js

@@ -13,11 +13,13 @@ var Wrapper = (0, _emotion_styled.default)("div")(({ theme }) => ({
 var Inner = (0, _emotion_styled.default)("div")(({ theme }) => ({
 	display: "flex",
 	alignItems: "center",
+	flexWrap: "wrap",
+	gap: theme.spacing(1, 2),
 	justifyContent: "flex-end",
-	paddingLeft: 16,
-	paddingRight: 16,
 	width: "100%",
 	[`@media (min-width: ${theme.breakPoints.medium}px)`]: {
+		paddingLeft: 16,
+		paddingRight: 16,
 		minWidth: 400,
 		maxWidth: 800,
 		margin: "auto",
@@ -39,7 +41,24 @@ var Love = (0, _emotion_styled.default)("span")(({ theme }) => ({
 	color: theme.palette.love,
 	padding: "0 5px"
 }));
+var CustomContent = (0, _emotion_styled.default)("div")(({ theme }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: theme.spacing(1),
+	minWidth: 0,
+	marginRight: "auto",
+	p: { margin: 0 },
+	img: {
+		maxHeight: 32,
+		maxWidth: 200,
+		verticalAlign: "middle",
+		marginRight: theme.spacing(1)
+	},
+	a: { color: theme.palette.mode === "dark" ? _mui_material_colors.common.white : theme.palette.primary.main }
+}));
 //#endregion
+exports.CustomContent = CustomContent;
 exports.Inner = Inner;
 exports.Left = Left;
 exports.Love = Love;

package/build/sections/Footer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","common"],"sources":["../../../src/sections/Footer/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { common } from '@mui/material/colors';\n\nimport type { Theme } from '../../';\n\nexport const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  background: theme.palette.mode === 'light' ? theme.palette.snow : theme.palette.cyanBlue,\n  borderTop: `1px solid ${theme.palette.greyGainsboro}`,\n  color: theme.palette.mode === 'dark' ? common.white : theme.palette.nobel01,\n  fontSize: '14px',\n  padding: '20px',\n}));\n\nexport const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  paddingLeft: 16,\n  paddingRight: 16,\n  width: '100%',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    minWidth: 400,\n    maxWidth: 800,\n    margin: 'auto',\n    justifyContent: 'space-between',\n  },\n  [`@media (min-width: ${theme.breakPoints.large}px)`]: {\n    maxWidth: 1240,\n  },\n}));\n\nexport const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  alignItems: 'center',\n  display: 'none',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    display: 'flex',\n  },\n  marginLeft: 1,\n}));\n\nexport const Right = styled(Left)({\n  display: 'flex',\n  marginRight: 1,\n});\n\nexport const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.love,\n  padding: '0 5px',\n}));\n"],"mappings":";;;;;AAKA,IAAa,WAAA,GAAUA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACtE,YAAY,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,OAAO,MAAM,QAAQ;CAChF,WAAW,aAAa,MAAM,QAAQ;CACtC,OAAO,MAAM,QAAQ,SAAS,SAASC,qBAAAA,OAAO,QAAQ,MAAM,QAAQ;CACpE,UAAU;CACV,SAAS;AACX,EAAE;AAEF,IAAa,SAAA,GAAQD,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACpE,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,OAAO;EACN,sBAAsB,MAAM,YAAY,OAAO,OAAO;EACrD,UAAU;EACV,UAAU;EACV,QAAQ;EACR,gBAAgB;CAClB;EACC,sBAAsB,MAAM,YAAY,MAAM,OAAO,EACpD,UAAU,KACZ;AACF,EAAE;AAEF,IAAa,QAAA,GAAOA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACnE,YAAY;CACZ,SAAS;EACR,sBAAsB,MAAM,YAAY,OAAO,OAAO,EACrD,SAAS,OACX;CACA,YAAY;AACd,EAAE;AAEF,IAAa,SAAA,GAAQA,gBAAAA,QAAAA,CAAO,IAAI,CAAC,CAAC;CAChC,SAAS;CACT,aAAa;AACf,CAAC;AAED,IAAa,QAAA,GAAOA,gBAAAA,QAAAA,CAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CACpE,OAAO,MAAM,QAAQ;CACrB,SAAS;AACX,EAAE"}
+{"version":3,"file":"styles.js","names":["styled","common"],"sources":["../../../src/sections/Footer/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { common } from '@mui/material/colors';\n\nimport type { Theme } from '../../';\n\nexport const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  background: theme.palette.mode === 'light' ? theme.palette.snow : theme.palette.cyanBlue,\n  borderTop: `1px solid ${theme.palette.greyGainsboro}`,\n  color: theme.palette.mode === 'dark' ? common.white : theme.palette.nobel01,\n  fontSize: '14px',\n  padding: '20px',\n}));\n\nexport const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: theme.spacing(1, 2),\n  justifyContent: 'flex-end',\n  width: '100%',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    paddingLeft: 16,\n    paddingRight: 16,\n    minWidth: 400,\n    maxWidth: 800,\n    margin: 'auto',\n    justifyContent: 'space-between',\n  },\n  [`@media (min-width: ${theme.breakPoints.large}px)`]: {\n    maxWidth: 1240,\n  },\n}));\n\nexport const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  alignItems: 'center',\n  display: 'none',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    display: 'flex',\n  },\n  marginLeft: 1,\n}));\n\nexport const Right = styled(Left)({\n  display: 'flex',\n  marginRight: 1,\n});\n\nexport const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.love,\n  padding: '0 5px',\n}));\n\nexport const CustomContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  minWidth: 0,\n  // keeps it on the left also when the powered-by wraps below it\n  marginRight: 'auto',\n  p: {\n    margin: 0,\n  },\n  img: {\n    maxHeight: 32,\n    maxWidth: 200,\n    verticalAlign: 'middle',\n    marginRight: theme.spacing(1),\n  },\n  a: {\n    color: theme.palette.mode === 'dark' ? common.white : theme.palette.primary.main,\n  },\n}));\n"],"mappings":";;;;;AAKA,IAAa,WAAA,GAAUA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACtE,YAAY,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,OAAO,MAAM,QAAQ;CAChF,WAAW,aAAa,MAAM,QAAQ;CACtC,OAAO,MAAM,QAAQ,SAAS,SAASC,qBAAAA,OAAO,QAAQ,MAAM,QAAQ;CACpE,UAAU;CACV,SAAS;AACX,EAAE;AAEF,IAAa,SAAA,GAAQD,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACpE,SAAS;CACT,YAAY;CACZ,UAAU;CACV,KAAK,MAAM,QAAQ,GAAG,CAAC;CACvB,gBAAgB;CAChB,OAAO;EACN,sBAAsB,MAAM,YAAY,OAAO,OAAO;EACrD,aAAa;EACb,cAAc;EACd,UAAU;EACV,UAAU;EACV,QAAQ;EACR,gBAAgB;CAClB;EACC,sBAAsB,MAAM,YAAY,MAAM,OAAO,EACpD,UAAU,KACZ;AACF,EAAE;AAEF,IAAa,QAAA,GAAOA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACnE,YAAY;CACZ,SAAS;EACR,sBAAsB,MAAM,YAAY,OAAO,OAAO,EACrD,SAAS,OACX;CACA,YAAY;AACd,EAAE;AAEF,IAAa,SAAA,GAAQA,gBAAAA,QAAAA,CAAO,IAAI,CAAC,CAAC;CAChC,SAAS;CACT,aAAa;AACf,CAAC;AAED,IAAa,QAAA,GAAOA,gBAAAA,QAAAA,CAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CACpE,OAAO,MAAM,QAAQ;CACrB,SAAS;AACX,EAAE;AAEF,IAAa,iBAAA,GAAgBA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CAC5E,SAAS;CACT,UAAU;CACV,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,UAAU;CAEV,aAAa;CACb,GAAG,EACD,QAAQ,EACV;CACA,KAAK;EACH,WAAW;EACX,UAAU;EACV,eAAe;EACf,aAAa,MAAM,QAAQ,CAAC;CAC9B;CACA,GAAG,EACD,OAAO,MAAM,QAAQ,SAAS,SAASC,qBAAAA,OAAO,QAAQ,MAAM,QAAQ,QAAQ,KAC9E;AACF,EAAE"}

package/build/sections/Footer/styles.mjs

@@ -11,11 +11,13 @@ var Wrapper = styled("div")(({ theme }) => ({
 var Inner = styled("div")(({ theme }) => ({
 	display: "flex",
 	alignItems: "center",
+	flexWrap: "wrap",
+	gap: theme.spacing(1, 2),
 	justifyContent: "flex-end",
-	paddingLeft: 16,
-	paddingRight: 16,
 	width: "100%",
 	[`@media (min-width: ${theme.breakPoints.medium}px)`]: {
+		paddingLeft: 16,
+		paddingRight: 16,
 		minWidth: 400,
 		maxWidth: 800,
 		margin: "auto",
@@ -37,7 +39,23 @@ var Love = styled("span")(({ theme }) => ({
 	color: theme.palette.love,
 	padding: "0 5px"
 }));
+var CustomContent = styled("div")(({ theme }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: theme.spacing(1),
+	minWidth: 0,
+	marginRight: "auto",
+	p: { margin: 0 },
+	img: {
+		maxHeight: 32,
+		maxWidth: 200,
+		verticalAlign: "middle",
+		marginRight: theme.spacing(1)
+	},
+	a: { color: theme.palette.mode === "dark" ? common.white : theme.palette.primary.main }
+}));
 //#endregion
-export { Inner, Left, Love, Right, Wrapper };
+export { CustomContent, Inner, Left, Love, Right, Wrapper };
 
 //# sourceMappingURL=styles.mjs.map

package/build/sections/Footer/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/sections/Footer/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { common } from '@mui/material/colors';\n\nimport type { Theme } from '../../';\n\nexport const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  background: theme.palette.mode === 'light' ? theme.palette.snow : theme.palette.cyanBlue,\n  borderTop: `1px solid ${theme.palette.greyGainsboro}`,\n  color: theme.palette.mode === 'dark' ? common.white : theme.palette.nobel01,\n  fontSize: '14px',\n  padding: '20px',\n}));\n\nexport const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  paddingLeft: 16,\n  paddingRight: 16,\n  width: '100%',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    minWidth: 400,\n    maxWidth: 800,\n    margin: 'auto',\n    justifyContent: 'space-between',\n  },\n  [`@media (min-width: ${theme.breakPoints.large}px)`]: {\n    maxWidth: 1240,\n  },\n}));\n\nexport const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  alignItems: 'center',\n  display: 'none',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    display: 'flex',\n  },\n  marginLeft: 1,\n}));\n\nexport const Right = styled(Left)({\n  display: 'flex',\n  marginRight: 1,\n});\n\nexport const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.love,\n  padding: '0 5px',\n}));\n"],"mappings":";;;AAKA,IAAa,UAAU,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACtE,YAAY,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,OAAO,MAAM,QAAQ;CAChF,WAAW,aAAa,MAAM,QAAQ;CACtC,OAAO,MAAM,QAAQ,SAAS,SAAS,OAAO,QAAQ,MAAM,QAAQ;CACpE,UAAU;CACV,SAAS;AACX,EAAE;AAEF,IAAa,QAAQ,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACpE,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,OAAO;EACN,sBAAsB,MAAM,YAAY,OAAO,OAAO;EACrD,UAAU;EACV,UAAU;EACV,QAAQ;EACR,gBAAgB;CAClB;EACC,sBAAsB,MAAM,YAAY,MAAM,OAAO,EACpD,UAAU,KACZ;AACF,EAAE;AAEF,IAAa,OAAO,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACnE,YAAY;CACZ,SAAS;EACR,sBAAsB,MAAM,YAAY,OAAO,OAAO,EACrD,SAAS,OACX;CACA,YAAY;AACd,EAAE;AAEF,IAAa,QAAQ,OAAO,IAAI,CAAC,CAAC;CAChC,SAAS;CACT,aAAa;AACf,CAAC;AAED,IAAa,OAAO,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CACpE,OAAO,MAAM,QAAQ;CACrB,SAAS;AACX,EAAE"}
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../../src/sections/Footer/styles.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { common } from '@mui/material/colors';\n\nimport type { Theme } from '../../';\n\nexport const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  background: theme.palette.mode === 'light' ? theme.palette.snow : theme.palette.cyanBlue,\n  borderTop: `1px solid ${theme.palette.greyGainsboro}`,\n  color: theme.palette.mode === 'dark' ? common.white : theme.palette.nobel01,\n  fontSize: '14px',\n  padding: '20px',\n}));\n\nexport const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: theme.spacing(1, 2),\n  justifyContent: 'flex-end',\n  width: '100%',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    paddingLeft: 16,\n    paddingRight: 16,\n    minWidth: 400,\n    maxWidth: 800,\n    margin: 'auto',\n    justifyContent: 'space-between',\n  },\n  [`@media (min-width: ${theme.breakPoints.large}px)`]: {\n    maxWidth: 1240,\n  },\n}));\n\nexport const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  alignItems: 'center',\n  display: 'none',\n  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {\n    display: 'flex',\n  },\n  marginLeft: 1,\n}));\n\nexport const Right = styled(Left)({\n  display: 'flex',\n  marginRight: 1,\n});\n\nexport const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  color: theme.palette.love,\n  padding: '0 5px',\n}));\n\nexport const CustomContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  minWidth: 0,\n  // keeps it on the left also when the powered-by wraps below it\n  marginRight: 'auto',\n  p: {\n    margin: 0,\n  },\n  img: {\n    maxHeight: 32,\n    maxWidth: 200,\n    verticalAlign: 'middle',\n    marginRight: theme.spacing(1),\n  },\n  a: {\n    color: theme.palette.mode === 'dark' ? common.white : theme.palette.primary.main,\n  },\n}));\n"],"mappings":";;;AAKA,IAAa,UAAU,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACtE,YAAY,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,OAAO,MAAM,QAAQ;CAChF,WAAW,aAAa,MAAM,QAAQ;CACtC,OAAO,MAAM,QAAQ,SAAS,SAAS,OAAO,QAAQ,MAAM,QAAQ;CACpE,UAAU;CACV,SAAS;AACX,EAAE;AAEF,IAAa,QAAQ,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACpE,SAAS;CACT,YAAY;CACZ,UAAU;CACV,KAAK,MAAM,QAAQ,GAAG,CAAC;CACvB,gBAAgB;CAChB,OAAO;EACN,sBAAsB,MAAM,YAAY,OAAO,OAAO;EACrD,aAAa;EACb,cAAc;EACd,UAAU;EACV,UAAU;EACV,QAAQ;EACR,gBAAgB;CAClB;EACC,sBAAsB,MAAM,YAAY,MAAM,OAAO,EACpD,UAAU,KACZ;AACF,EAAE;AAEF,IAAa,OAAO,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACnE,YAAY;CACZ,SAAS;EACR,sBAAsB,MAAM,YAAY,OAAO,OAAO,EACrD,SAAS,OACX;CACA,YAAY;AACd,EAAE;AAEF,IAAa,QAAQ,OAAO,IAAI,CAAC,CAAC;CAChC,SAAS;CACT,aAAa;AACf,CAAC;AAED,IAAa,OAAO,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CACpE,OAAO,MAAM,QAAQ;CACrB,SAAS;AACX,EAAE;AAEF,IAAa,gBAAgB,OAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CAC5E,SAAS;CACT,UAAU;CACV,YAAY;CACZ,KAAK,MAAM,QAAQ,CAAC;CACpB,UAAU;CAEV,aAAa;CACb,GAAG,EACD,QAAQ,EACV;CACA,KAAK;EACH,WAAW;EACX,UAAU;EACV,eAAe;EACf,aAAa,MAAM,QAAQ,CAAC;CAC9B;CACA,GAAG,EACD,OAAO,MAAM,QAAQ,SAAS,SAAS,OAAO,QAAQ,MAAM,QAAQ,QAAQ,KAC9E;AACF,EAAE"}

package/build/sections/Header/HeaderSettingsDialog.js

@@ -1,7 +1,13 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_AppConfigurationProvider = require("../../providers/AppConfigurationProvider/AppConfigurationProvider.js");
 const require_configuration = require("../../configuration.js");
+require("../../providers/index.js");
+const require_DocsLink = require("../../components/DocsLink/DocsLink.js");
+require("../../components/DocsLink/index.js");
 const require_RegistryInfoDialog = require("../../components/RegistryInfoDialog/RegistryInfoDialog.js");
 require("../../components/RegistryInfoDialog/index.js");
+const require_markdown = require("../../utils/markdown.js");
+const require_Help = require("../../components/Help/Help.js");
 const require_LanguageSwitch = require("./LanguageSwitch.js");
 const require_RegistryInfoContent = require("./RegistryInfoContent/RegistryInfoContent.js");
 require("./RegistryInfoContent/index.js");
@@ -35,7 +41,10 @@ function TabPanel(props) {
 		role: "tabpanel",
 		...other,
 		children: value === index && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
-			sx: { paddingTop: 3 },
+			sx: {
+				paddingTop: 3,
+				paddingBottom: 3
+			},
 			children
 		})
 	});
@@ -51,7 +60,10 @@ var HeaderSettingsDialog = ({ onCloseDialog, isOpen }) => {
 	};
 	const { scope, base } = require_configuration.getConfiguration();
 	const { t } = (0, react_i18next.useTranslation)();
+	const { configOptions } = require_AppConfigurationProvider.useConfig();
+	const customHelp = configOptions.help?.trim();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RegistryInfoDialog.default, {
+		docsUrl: require_DocsLink.VERDACCIO_DOCS_URL,
 		onClose: onCloseDialog,
 		open: isOpen,
 		title: t("dialog.settings.title"),
@@ -67,13 +79,21 @@ var HeaderSettingsDialog = ({ onCloseDialog, isOpen }) => {
 						"aria-label": "basic tabs example",
 						onChange: handleChange,
 						value,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
-							label: t("packageManagers.title"),
-							...a11yProps(0)
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
-							label: t("language.title"),
-							...a11yProps(1)
-						})]
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
+								label: t("packageManagers.title"),
+								...a11yProps(0)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
+								"data-testid": "settings-publish-tab",
+								label: t("help.settings-tab"),
+								...a11yProps(1)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tab.default, {
+								label: t("language.title"),
+								...a11yProps(2)
+							})
+						]
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabPanel, {
@@ -84,13 +104,22 @@ var HeaderSettingsDialog = ({ onCloseDialog, isOpen }) => {
 						scope
 					})
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabPanel, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabPanel, {
+					"data-testid": "settings-publish",
 					index: 1,
 					value,
+					children: customHelp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Help.CustomHelp, { markdown: customHelp }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Help.HelpGuide, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabPanel, {
+					index: 2,
+					value,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextContent, { children: t("language.description") }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LanguageSwitch.default, {}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, { children: t("language.contribute") })
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+							components: require_markdown.externalLinkComponents,
+							children: t("language.contribute")
+						})
 					]
 				})
 			]

package/build/sections/Header/HeaderSettingsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderSettingsDialog.js","names":["Box","styled","React","getConfiguration","useTranslation","RegistryInfoDialog","Tabs","Tab","RegistryInfoContent","LanguageSwitch","ReactMarkdown"],"sources":["../../../src/sections/Header/HeaderSettingsDialog.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport type { Theme } from '../../';\nimport RegistryInfoDialog from '../../components/RegistryInfoDialog';\nimport { getConfiguration } from '../../configuration';\nimport LanguageSwitch from './LanguageSwitch';\nimport RegistryInfoContent from './RegistryInfoContent';\n\ninterface Props {\n  isOpen: boolean;\n  onCloseDialog: () => void;\n}\n\nfunction a11yProps(index) {\n  return {\n    id: `simple-tab-${index}`,\n    'aria-controls': `simple-tabpanel-${index}`,\n  };\n}\n\nfunction TabPanel(props) {\n  const { children, value, index, ...other } = props;\n\n  return (\n    <div\n      aria-labelledby={`simple-tab-${index}`}\n      hidden={value !== index}\n      id={`simple-tabpanel-${index}`}\n      role=\"tabpanel\"\n      {...other}\n    >\n      {value === index && <Box sx={{ paddingTop: 3 }}>{children}</Box>}\n    </div>\n  );\n}\n\nconst TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  padding: '10px 0',\n  backgroundColor: theme.palette.background.default,\n}));\n\nconst HeaderSettingsDialog: React.FC<Props> = ({ onCloseDialog, isOpen }) => {\n  const [value, setValue] = React.useState(0);\n\n  const handleChange = (_event, newValue) => {\n    setValue(newValue);\n  };\n  const configStore = getConfiguration();\n  const { scope, base } = configStore;\n  const { t } = useTranslation();\n  return (\n    <RegistryInfoDialog onClose={onCloseDialog} open={isOpen} title={t('dialog.settings.title')}>\n      <Box sx={{ width: '100%' }}>\n        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n          <Tabs aria-label=\"basic tabs example\" onChange={handleChange} value={value}>\n            <Tab label={t('packageManagers.title')} {...a11yProps(0)} />\n            <Tab label={t('language.title')} {...a11yProps(1)} />\n          </Tabs>\n        </Box>\n        <TabPanel index={0} value={value}>\n          <RegistryInfoContent registryUrl={base} scope={scope} />\n        </TabPanel>\n        <TabPanel index={1} value={value}>\n          <TextContent>{t('language.description')}</TextContent>\n          <LanguageSwitch />\n          <ReactMarkdown>{t('language.contribute')}</ReactMarkdown>\n        </TabPanel>\n      </Box>\n    </RegistryInfoDialog>\n  );\n};\n\nexport default HeaderSettingsDialog;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,SAAS,UAAU,OAAO;CACxB,OAAO;EACL,IAAI,cAAc;EAClB,iBAAiB,mBAAmB;CACtC;AACF;AAEA,SAAS,SAAS,OAAO;CACvB,MAAM,EAAE,UAAU,OAAO,OAAO,GAAG,UAAU;CAE7C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,mBAAiB,cAAc;EAC/B,QAAQ,UAAU;EAClB,IAAI,mBAAmB;EACvB,MAAK;EACL,GAAI;EAEH,UAAA,UAAU,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,SAAD;GAAK,IAAI,EAAE,YAAY,EAAE;GAAI;EAAc,CAAA;CAC5D,CAAA;AAET;AAEA,IAAM,eAAA,GAAcC,gBAAAA,QAAAA,CAAO,KAAK,CAAC,EAAqB,EAAE,aAAa;CACnE,SAAS;CACT,iBAAiB,MAAM,QAAQ,WAAW;AAC5C,EAAE;AAEF,IAAM,wBAAyC,EAAE,eAAe,aAAa;CAC3E,MAAM,CAAC,OAAO,YAAYC,MAAAA,QAAM,SAAS,CAAC;CAE1C,MAAM,gBAAgB,QAAQ,aAAa;EACzC,SAAS,QAAQ;CACnB;CAEA,MAAM,EAAE,OAAO,SADKC,sBAAAA,iBACI;CACxB,MAAM,EAAE,OAAA,GAAMC,cAAAA,eAAAA,CAAe;CAC7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,SAAD;EAAoB,SAAS;EAAe,MAAM;EAAQ,OAAO,EAAE,uBAAuB;EACxF,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACL,kBAAAA,SAAD;GAAK,IAAI,EAAE,OAAO,OAAO;GAAzB,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,SAAD;KAAK,IAAI;MAAE,cAAc;MAAG,aAAa;KAAU;KACjD,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACM,mBAAAA,SAAD;MAAM,cAAW;MAAqB,UAAU;MAAqB;MAArE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,SAAD;OAAK,OAAO,EAAE,uBAAuB;OAAG,GAAI,UAAU,CAAC;MAAI,CAAA,GAC3D,iBAAA,GAAA,kBAAA,IAAA,CAACA,kBAAAA,SAAD;OAAK,OAAO,EAAE,gBAAgB;OAAG,GAAI,UAAU,CAAC;MAAI,CAAA,CAChD;;IACH,CAAA;IACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KAAU,OAAO;KAAU;KACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,SAAD;MAAqB,aAAa;MAAa;KAAQ,CAAA;IAC/C,CAAA;IACV,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;KAAU,OAAO;KAAU;KAA3B,UAAA;MACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD,EAAA,UAAc,EAAE,sBAAsB,EAAe,CAAA;MACrD,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,SAAD,CAAiB,CAAA;MACjB,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,SAAD,EAAA,UAAgB,EAAE,qBAAqB,EAAiB,CAAA;KAChD;;GACP;;CACa,CAAA;AAExB"}
+{"version":3,"file":"HeaderSettingsDialog.js","names":["Box","styled","React","getConfiguration","useTranslation","useConfig","RegistryInfoDialog","VERDACCIO_DOCS_URL","Tabs","Tab","RegistryInfoContent","CustomHelp","HelpGuide","LanguageSwitch","ReactMarkdown","externalLinkComponents"],"sources":["../../../src/sections/Header/HeaderSettingsDialog.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Box from '@mui/material/Box';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport type { Theme } from '../../';\nimport { VERDACCIO_DOCS_URL } from '../../components/DocsLink';\nimport { CustomHelp, HelpGuide } from '../../components/Help/Help';\nimport RegistryInfoDialog from '../../components/RegistryInfoDialog';\nimport { getConfiguration } from '../../configuration';\nimport { useConfig } from '../../providers';\nimport { externalLinkComponents } from '../../utils/markdown';\nimport LanguageSwitch from './LanguageSwitch';\nimport RegistryInfoContent from './RegistryInfoContent';\n\ninterface Props {\n  isOpen: boolean;\n  onCloseDialog: () => void;\n}\n\nfunction a11yProps(index) {\n  return {\n    id: `simple-tab-${index}`,\n    'aria-controls': `simple-tabpanel-${index}`,\n  };\n}\n\nfunction TabPanel(props) {\n  const { children, value, index, ...other } = props;\n\n  return (\n    <div\n      aria-labelledby={`simple-tab-${index}`}\n      hidden={value !== index}\n      id={`simple-tabpanel-${index}`}\n      role=\"tabpanel\"\n      {...other}\n    >\n      {value === index && <Box sx={{ paddingTop: 3, paddingBottom: 3 }}>{children}</Box>}\n    </div>\n  );\n}\n\nconst TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({\n  padding: '10px 0',\n  backgroundColor: theme.palette.background.default,\n}));\n\nconst HeaderSettingsDialog: React.FC<Props> = ({ onCloseDialog, isOpen }) => {\n  const [value, setValue] = React.useState(0);\n\n  const handleChange = (_event, newValue) => {\n    setValue(newValue);\n  };\n  const configStore = getConfiguration();\n  const { scope, base } = configStore;\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n  const customHelp = configOptions.help?.trim();\n  return (\n    <RegistryInfoDialog\n      docsUrl={VERDACCIO_DOCS_URL}\n      onClose={onCloseDialog}\n      open={isOpen}\n      title={t('dialog.settings.title')}\n    >\n      <Box sx={{ width: '100%' }}>\n        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n          <Tabs aria-label=\"basic tabs example\" onChange={handleChange} value={value}>\n            <Tab label={t('packageManagers.title')} {...a11yProps(0)} />\n            <Tab\n              data-testid=\"settings-publish-tab\"\n              label={t('help.settings-tab')}\n              {...a11yProps(1)}\n            />\n            <Tab label={t('language.title')} {...a11yProps(2)} />\n          </Tabs>\n        </Box>\n        <TabPanel index={0} value={value}>\n          <RegistryInfoContent registryUrl={base} scope={scope} />\n        </TabPanel>\n        {/* the welcome guide stays reachable once the registry has packages */}\n        <TabPanel data-testid=\"settings-publish\" index={1} value={value}>\n          {customHelp ? <CustomHelp markdown={customHelp} /> : <HelpGuide />}\n        </TabPanel>\n        <TabPanel index={2} value={value}>\n          <TextContent>{t('language.description')}</TextContent>\n          <LanguageSwitch />\n          <ReactMarkdown components={externalLinkComponents}>\n            {t('language.contribute')}\n          </ReactMarkdown>\n        </TabPanel>\n      </Box>\n    </RegistryInfoDialog>\n  );\n};\n\nexport default HeaderSettingsDialog;\n"],"mappings":"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"}

package/build/sections/Header/HeaderSettingsDialog.mjs

@@ -1,6 +1,12 @@
+import { useConfig } from "../../providers/AppConfigurationProvider/AppConfigurationProvider.mjs";
 import { getConfiguration } from "../../configuration.mjs";
+import "../../providers/index.mjs";
+import { VERDACCIO_DOCS_URL } from "../../components/DocsLink/DocsLink.mjs";
+import "../../components/DocsLink/index.mjs";
 import RegistryInfoDialog from "../../components/RegistryInfoDialog/RegistryInfoDialog.mjs";
 import "../../components/RegistryInfoDialog/index.mjs";
+import { externalLinkComponents } from "../../utils/markdown.mjs";
+import { CustomHelp, HelpGuide } from "../../components/Help/Help.mjs";
 import LanguageSwitch from "./LanguageSwitch.mjs";
 import RegistryInfoContent from "./RegistryInfoContent/RegistryInfoContent.mjs";
 import "./RegistryInfoContent/index.mjs";
@@ -28,7 +34,10 @@ function TabPanel(props) {
 		role: "tabpanel",
 		...other,
 		children: value === index && /* @__PURE__ */ jsx(Box, {
-			sx: { paddingTop: 3 },
+			sx: {
+				paddingTop: 3,
+				paddingBottom: 3
+			},
 			children
 		})
 	});
@@ -44,7 +53,10 @@ var HeaderSettingsDialog = ({ onCloseDialog, isOpen }) => {
 	};
 	const { scope, base } = getConfiguration();
 	const { t } = useTranslation();
+	const { configOptions } = useConfig();
+	const customHelp = configOptions.help?.trim();
 	return /* @__PURE__ */ jsx(RegistryInfoDialog, {
+		docsUrl: VERDACCIO_DOCS_URL,
 		onClose: onCloseDialog,
 		open: isOpen,
 		title: t("dialog.settings.title"),
@@ -60,13 +72,21 @@ var HeaderSettingsDialog = ({ onCloseDialog, isOpen }) => {
 						"aria-label": "basic tabs example",
 						onChange: handleChange,
 						value,
-						children: [/* @__PURE__ */ jsx(Tab, {
-							label: t("packageManagers.title"),
-							...a11yProps(0)
-						}), /* @__PURE__ */ jsx(Tab, {
-							label: t("language.title"),
-							...a11yProps(1)
-						})]
+						children: [
+							/* @__PURE__ */ jsx(Tab, {
+								label: t("packageManagers.title"),
+								...a11yProps(0)
+							}),
+							/* @__PURE__ */ jsx(Tab, {
+								"data-testid": "settings-publish-tab",
+								label: t("help.settings-tab"),
+								...a11yProps(1)
+							}),
+							/* @__PURE__ */ jsx(Tab, {
+								label: t("language.title"),
+								...a11yProps(2)
+							})
+						]
 					})
 				}),
 				/* @__PURE__ */ jsx(TabPanel, {
@@ -77,13 +97,22 @@ var HeaderSettingsDialog = ({ onCloseDialog, isOpen }) => {
 						scope
 					})
 				}),
-				/* @__PURE__ */ jsxs(TabPanel, {
+				/* @__PURE__ */ jsx(TabPanel, {
+					"data-testid": "settings-publish",
 					index: 1,
 					value,
+					children: customHelp ? /* @__PURE__ */ jsx(CustomHelp, { markdown: customHelp }) : /* @__PURE__ */ jsx(HelpGuide, {})
+				}),
+				/* @__PURE__ */ jsxs(TabPanel, {
+					index: 2,
+					value,
 					children: [
 						/* @__PURE__ */ jsx(TextContent, { children: t("language.description") }),
 						/* @__PURE__ */ jsx(LanguageSwitch, {}),
-						/* @__PURE__ */ jsx(ReactMarkdown, { children: t("language.contribute") })
+						/* @__PURE__ */ jsx(ReactMarkdown, {
+							components: externalLinkComponents,
+							children: t("language.contribute")
+						})
 					]
 				})
 			]