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

package/build/sections/Header/HeaderLeft.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface Props {
     showSearch?: boolean;
 }

package/build/sections/Header/HeaderMenu.d.ts

@@ -1,5 +1,4 @@
-import type { MouseEvent } from 'react';
-import React from 'react';
+import { MouseEvent, default as React } from 'react';
 interface Props {
     username: string;
     isMenuOpen: boolean;

package/build/sections/Header/HeaderMenu.js

@@ -13,6 +13,7 @@ _mui_material_Menu = require_runtime.__toESM(_mui_material_Menu);
 let _mui_icons_material_AccountCircle = require("@mui/icons-material/AccountCircle");
 _mui_icons_material_AccountCircle = require_runtime.__toESM(_mui_icons_material_AccountCircle);
 //#region src/sections/Header/HeaderMenu.tsx
+var TypedMenu = _mui_material_Menu.default;
 var HeaderMenu = ({ onLogout, username, isMenuOpen = false, anchorEl, onLoggedInMenu, onLoggedInMenuClose }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
@@ -22,20 +23,18 @@ var HeaderMenu = ({ onLogout, username, isMenuOpen = false, anchorEl, onLoggedIn
 		onClick: onLoggedInMenu,
 		size: "large",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_AccountCircle.default, {})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Menu.default, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TypedMenu, {
 		anchorEl,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
 		onClose: onLoggedInMenuClose,
 		open: isMenuOpen,
-		slotProps: { root: {
-			anchorOrigin: {
-				vertical: "bottom",
-				horizontal: "right"
-			},
-			transformOrigin: {
-				vertical: "top",
-				horizontal: "right"
-			}
-		} },
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HeaderGreetings.default, { username }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.default, {
 			"data-testid": "logOutDialogIcon",
 			id: "logOutDialogIcon",

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderMenu.js","names":[],"sources":["../../../src/sections/Header/HeaderMenu.tsx"],"sourcesContent":["import AccountCircle from '@mui/icons-material/AccountCircle';\nimport IconButton from '@mui/material/IconButton';\nimport Menu from '@mui/material/Menu';\nimport type { MouseEvent } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { MenuItem } from '../../';\nimport HeaderGreetings from './HeaderGreetings';\n\ninterface Props {\n  username: string;\n  isMenuOpen: boolean;\n  anchorEl?: Element | null | undefined;\n  onLogout: () => void;\n  onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;\n  onLoggedInMenuClose: () => void;\n}\n\nconst HeaderMenu: React.FC<Props> = ({\n  onLogout,\n  username,\n  isMenuOpen = false,\n  anchorEl,\n  onLoggedInMenu,\n  onLoggedInMenuClose,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <>\n      <IconButton\n        color=\"inherit\"\n        data-testid=\"logInDialogIcon\"\n        id=\"header--button-account\"\n        onClick={onLoggedInMenu}\n        size=\"large\"\n      >\n        <AccountCircle />\n      </IconButton>\n      <Menu\n        anchorEl={anchorEl}\n        onClose={onLoggedInMenuClose}\n        open={isMenuOpen}\n        slotProps={{\n          root: {\n            anchorOrigin: {\n              vertical: 'bottom',\n              horizontal: 'right',\n            },\n            transformOrigin: {\n              vertical: 'top',\n              horizontal: 'right',\n            },\n          } as any,\n        }}\n      >\n        <MenuItem>\n          <HeaderGreetings username={username} />\n        </MenuItem>\n        <MenuItem data-testid=\"logOutDialogIcon\" id=\"logOutDialogIcon\" onClick={onLogout}>\n          {t('button.logout')}\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n\nexport default HeaderMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,IAAM,cAA+B,EACnC,UACA,UACA,aAAa,OACb,UACA,gBACA,0BACI;CACJ,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,yBAAA,SAAD;EACE,OAAM;EACN,eAAY;EACZ,IAAG;EACH,SAAS;EACT,MAAK;YAEL,iBAAA,GAAA,kBAAA,KAAC,kCAAA,SAAD,EAAiB,CAAA;EACN,CAAA,EACb,iBAAA,GAAA,kBAAA,MAAC,mBAAA,SAAD;EACY;EACV,SAAS;EACT,MAAM;EACN,WAAW,EACT,MAAM;GACJ,cAAc;IACZ,UAAU;IACV,YAAY;IACb;GACD,iBAAiB;IACf,UAAU;IACV,YAAY;IACb;GACF,EACF;YAfH,CAiBE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,wBAAA,SAAD,EAA2B,UAAY,CAAA,EAC9B,CAAA,EACX,iBAAA,GAAA,kBAAA,KAAC,iBAAA,SAAD;GAAU,eAAY;GAAmB,IAAG;GAAmB,SAAS;aACrE,EAAE,gBAAgB;GACV,CAAA,CACN;IACN,EAAA,CAAA"}
+{"version":3,"file":"HeaderMenu.js","names":[],"sources":["../../../src/sections/Header/HeaderMenu.tsx"],"sourcesContent":["import AccountCircle from '@mui/icons-material/AccountCircle';\nimport IconButton from '@mui/material/IconButton';\nimport Menu from '@mui/material/Menu';\nimport type { MouseEvent } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { MenuItem } from '../../';\nimport HeaderGreetings from './HeaderGreetings';\n\n// Workaround: MUI v7 MenuProps type resolution breaks inherited PopoverProps.\nconst TypedMenu = Menu as React.FC<any>;\n\ninterface Props {\n  username: string;\n  isMenuOpen: boolean;\n  anchorEl?: Element | null | undefined;\n  onLogout: () => void;\n  onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;\n  onLoggedInMenuClose: () => void;\n}\n\nconst HeaderMenu: React.FC<Props> = ({\n  onLogout,\n  username,\n  isMenuOpen = false,\n  anchorEl,\n  onLoggedInMenu,\n  onLoggedInMenuClose,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <>\n      <IconButton\n        color=\"inherit\"\n        data-testid=\"logInDialogIcon\"\n        id=\"header--button-account\"\n        onClick={onLoggedInMenu}\n        size=\"large\"\n      >\n        <AccountCircle />\n      </IconButton>\n      <TypedMenu\n        anchorEl={anchorEl}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        onClose={onLoggedInMenuClose}\n        open={isMenuOpen}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <MenuItem>\n          <HeaderGreetings username={username} />\n        </MenuItem>\n        <MenuItem data-testid=\"logOutDialogIcon\" id=\"logOutDialogIcon\" onClick={onLogout}>\n          {t('button.logout')}\n        </MenuItem>\n      </TypedMenu>\n    </>\n  );\n};\n\nexport default HeaderMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAWA,IAAM,YAAY,mBAAA;AAWlB,IAAM,cAA+B,EACnC,UACA,UACA,aAAa,OACb,UACA,gBACA,0BACI;CACJ,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,yBAAA,SAAD;EACE,OAAM;EACN,eAAY;EACZ,IAAG;EACH,SAAS;EACT,MAAK;YAEL,iBAAA,GAAA,kBAAA,KAAC,kCAAA,SAAD,EAAiB,CAAA;EACN,CAAA,EACb,iBAAA,GAAA,kBAAA,MAAC,WAAD;EACY;EACV,cAAc;GACZ,UAAU;GACV,YAAY;GACb;EACD,SAAS;EACT,MAAM;EACN,iBAAiB;GACf,UAAU;GACV,YAAY;GACb;YAXH,CAaE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,wBAAA,SAAD,EAA2B,UAAY,CAAA,EAC9B,CAAA,EACX,iBAAA,GAAA,kBAAA,KAAC,iBAAA,SAAD;GAAU,eAAY;GAAmB,IAAG;GAAmB,SAAS;aACrE,EAAE,gBAAgB;GACV,CAAA,CACD;IACX,EAAA,CAAA"}

package/build/sections/Header/HeaderMenu.mjs

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import Menu from "@mui/material/Menu";
 import AccountCircle from "@mui/icons-material/AccountCircle";
 //#region src/sections/Header/HeaderMenu.tsx
+var TypedMenu = Menu;
 var HeaderMenu = ({ onLogout, username, isMenuOpen = false, anchorEl, onLoggedInMenu, onLoggedInMenuClose }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
@@ -17,20 +18,18 @@ var HeaderMenu = ({ onLogout, username, isMenuOpen = false, anchorEl, onLoggedIn
 		onClick: onLoggedInMenu,
 		size: "large",
 		children: /* @__PURE__ */ jsx(AccountCircle, {})
-	}), /* @__PURE__ */ jsxs(Menu, {
+	}), /* @__PURE__ */ jsxs(TypedMenu, {
 		anchorEl,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
 		onClose: onLoggedInMenuClose,
 		open: isMenuOpen,
-		slotProps: { root: {
-			anchorOrigin: {
-				vertical: "bottom",
-				horizontal: "right"
-			},
-			transformOrigin: {
-				vertical: "top",
-				horizontal: "right"
-			}
-		} },
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		},
 		children: [/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(HeaderGreetings, { username }) }), /* @__PURE__ */ jsx(MenuItem, {
 			"data-testid": "logOutDialogIcon",
 			id: "logOutDialogIcon",

package/build/sections/Header/HeaderMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderMenu.mjs","names":[],"sources":["../../../src/sections/Header/HeaderMenu.tsx"],"sourcesContent":["import AccountCircle from '@mui/icons-material/AccountCircle';\nimport IconButton from '@mui/material/IconButton';\nimport Menu from '@mui/material/Menu';\nimport type { MouseEvent } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { MenuItem } from '../../';\nimport HeaderGreetings from './HeaderGreetings';\n\ninterface Props {\n  username: string;\n  isMenuOpen: boolean;\n  anchorEl?: Element | null | undefined;\n  onLogout: () => void;\n  onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;\n  onLoggedInMenuClose: () => void;\n}\n\nconst HeaderMenu: React.FC<Props> = ({\n  onLogout,\n  username,\n  isMenuOpen = false,\n  anchorEl,\n  onLoggedInMenu,\n  onLoggedInMenuClose,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <>\n      <IconButton\n        color=\"inherit\"\n        data-testid=\"logInDialogIcon\"\n        id=\"header--button-account\"\n        onClick={onLoggedInMenu}\n        size=\"large\"\n      >\n        <AccountCircle />\n      </IconButton>\n      <Menu\n        anchorEl={anchorEl}\n        onClose={onLoggedInMenuClose}\n        open={isMenuOpen}\n        slotProps={{\n          root: {\n            anchorOrigin: {\n              vertical: 'bottom',\n              horizontal: 'right',\n            },\n            transformOrigin: {\n              vertical: 'top',\n              horizontal: 'right',\n            },\n          } as any,\n        }}\n      >\n        <MenuItem>\n          <HeaderGreetings username={username} />\n        </MenuItem>\n        <MenuItem data-testid=\"logOutDialogIcon\" id=\"logOutDialogIcon\" onClick={onLogout}>\n          {t('button.logout')}\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n\nexport default HeaderMenu;\n"],"mappings":";;;;;;;;;;AAmBA,IAAM,cAA+B,EACnC,UACA,UACA,aAAa,OACb,UACA,gBACA,0BACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,OAAM;EACN,eAAY;EACZ,IAAG;EACH,SAAS;EACT,MAAK;YAEL,oBAAC,eAAD,EAAiB,CAAA;EACN,CAAA,EACb,qBAAC,MAAD;EACY;EACV,SAAS;EACT,MAAM;EACN,WAAW,EACT,MAAM;GACJ,cAAc;IACZ,UAAU;IACV,YAAY;IACb;GACD,iBAAiB;IACf,UAAU;IACV,YAAY;IACb;GACF,EACF;YAfH,CAiBE,oBAAC,UAAD,EAAA,UACE,oBAAC,iBAAD,EAA2B,UAAY,CAAA,EAC9B,CAAA,EACX,oBAAC,UAAD;GAAU,eAAY;GAAmB,IAAG;GAAmB,SAAS;aACrE,EAAE,gBAAgB;GACV,CAAA,CACN;IACN,EAAA,CAAA"}
+{"version":3,"file":"HeaderMenu.mjs","names":[],"sources":["../../../src/sections/Header/HeaderMenu.tsx"],"sourcesContent":["import AccountCircle from '@mui/icons-material/AccountCircle';\nimport IconButton from '@mui/material/IconButton';\nimport Menu from '@mui/material/Menu';\nimport type { MouseEvent } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { MenuItem } from '../../';\nimport HeaderGreetings from './HeaderGreetings';\n\n// Workaround: MUI v7 MenuProps type resolution breaks inherited PopoverProps.\nconst TypedMenu = Menu as React.FC<any>;\n\ninterface Props {\n  username: string;\n  isMenuOpen: boolean;\n  anchorEl?: Element | null | undefined;\n  onLogout: () => void;\n  onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;\n  onLoggedInMenuClose: () => void;\n}\n\nconst HeaderMenu: React.FC<Props> = ({\n  onLogout,\n  username,\n  isMenuOpen = false,\n  anchorEl,\n  onLoggedInMenu,\n  onLoggedInMenuClose,\n}) => {\n  const { t } = useTranslation();\n  return (\n    <>\n      <IconButton\n        color=\"inherit\"\n        data-testid=\"logInDialogIcon\"\n        id=\"header--button-account\"\n        onClick={onLoggedInMenu}\n        size=\"large\"\n      >\n        <AccountCircle />\n      </IconButton>\n      <TypedMenu\n        anchorEl={anchorEl}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        onClose={onLoggedInMenuClose}\n        open={isMenuOpen}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <MenuItem>\n          <HeaderGreetings username={username} />\n        </MenuItem>\n        <MenuItem data-testid=\"logOutDialogIcon\" id=\"logOutDialogIcon\" onClick={onLogout}>\n          {t('button.logout')}\n        </MenuItem>\n      </TypedMenu>\n    </>\n  );\n};\n\nexport default HeaderMenu;\n"],"mappings":";;;;;;;;;;AAWA,IAAM,YAAY;AAWlB,IAAM,cAA+B,EACnC,UACA,UACA,aAAa,OACb,UACA,gBACA,0BACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,OAAM;EACN,eAAY;EACZ,IAAG;EACH,SAAS;EACT,MAAK;YAEL,oBAAC,eAAD,EAAiB,CAAA;EACN,CAAA,EACb,qBAAC,WAAD;EACY;EACV,cAAc;GACZ,UAAU;GACV,YAAY;GACb;EACD,SAAS;EACT,MAAM;EACN,iBAAiB;GACf,UAAU;GACV,YAAY;GACb;YAXH,CAaE,oBAAC,UAAD,EAAA,UACE,oBAAC,iBAAD,EAA2B,UAAY,CAAA,EAC9B,CAAA,EACX,oBAAC,UAAD;GAAU,eAAY;GAAmB,IAAG;GAAmB,SAAS;aACrE,EAAE,gBAAgB;GACV,CAAA,CACD;IACX,EAAA,CAAA"}

package/build/sections/Header/HeaderRight.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface Props {
     showSearch?: boolean;
     username?: string | null;

package/build/sections/Header/HeaderSettingsDialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface Props {
     isOpen: boolean;
     onCloseDialog: () => void;

package/build/sections/Header/HeaderToolTip.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { TooltipIconType } from './HeaderToolTipIcon';
+import { default as React } from 'react';
+import { TooltipIconType } from './HeaderToolTipIcon';
 interface Props {
     title: string;
     tooltipIconType: TooltipIconType;

package/build/sections/Header/HeaderToolTipIcon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TooltipIconType = 'search' | 'info' | 'dark-mode' | 'light-mode' | 'settings';
 interface Props {
     tooltipIconType: TooltipIconType;

package/build/sections/Header/LanguageSwitch.d.ts

@@ -1,5 +1,14 @@
-import React from 'react';
-export declare const CardSelected: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const CardUnSelected: import("@emotion/styled").StyledComponent<any, {}, {}>;
+import { default as React } from 'react';
+import { Theme } from '../../';
+export declare const CardSelected: import('@emotion/styled').StyledComponent<import('@mui/material/Card').CardOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style" | "elevation" | "className" | "classes" | "square" | "sx" | "variant" | "raised"> & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    theme?: Theme;
+}, {}, {}>;
+export declare const CardUnSelected: import('@emotion/styled').StyledComponent<import('@mui/material/Card').CardOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style" | "elevation" | "className" | "classes" | "square" | "sx" | "variant" | "raised"> & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    theme?: Theme;
+}, {}, {}>;
 declare const LanguageSwitch: () => React.JSX.Element;
 export default LanguageSwitch;

package/build/sections/Header/LanguageSwitch.mjs

@@ -5,7 +5,7 @@ import { useCallback, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import i18next from "i18next";
 import { useTranslation } from "react-i18next";
-import MaterialUITypography from "@mui/material/Typography";
+import Typography from "@mui/material/Typography";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Grid from "@mui/material/Grid";
@@ -24,7 +24,7 @@ var CardUnSelected = styled(Card)(({ theme }) => {
 		":hover": { backgroundColor: theme.palette.greyGainsboro }
 	};
 });
-var LanguageContent = ({ translation, icon }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(MaterialUITypography, {
+var LanguageContent = ({ translation, icon }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, {
 	display: "block",
 	gutterBottom: true,
 	variant: "caption",

package/build/sections/Header/LanguageSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageSwitch.mjs","names":[],"sources":["../../../src/sections/Header/LanguageSwitch.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport i18next from 'i18next';\nimport React, { useCallback, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { useLanguage } from '../../';\n\nexport const CardSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    backgroundColor: theme.palette.grey['600'],\n    opacity: '0.9',\n    color: theme.palette.error.contrastText,\n    fontWeight: 'bold',\n  };\n});\n\nexport const CardUnSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: theme.palette.greyGainsboro,\n    },\n  };\n});\n\nconst LanguageContent = ({ translation, icon }) => (\n  <>\n    <CardContent>\n      <Typography display=\"block\" gutterBottom={true} variant=\"caption\">\n        {translation}\n      </Typography>\n    </CardContent>\n    <CardContent>{icon}</CardContent>\n  </>\n);\n\nconst LanguageSwitch = () => {\n  const { language, setLanguage, listLanguages } = useLanguage();\n  const listConverted = listLanguages.reduce(\n    (prev, item) => {\n      prev[item.lng] = {\n        translation: item.menuKey,\n        icon: item.icon,\n      };\n      return prev;\n    },\n    {} as Record<string, { translation: string; icon: any }>\n  );\n\n  const [languages] = useState<string[]>(Object.keys(i18next.options?.resources || {}));\n  const { t } = useTranslation();\n  const currentLanguage = language;\n  const getCurrentLngDetails = useCallback(\n    (language: string) => {\n      const lng = listConverted[language] || listConverted['en-US'];\n      return {\n        icon: <lng.icon />,\n        translation: t(lng.translation),\n      };\n    },\n    [listConverted, t]\n  );\n  const handleChangeLanguage = useCallback(\n    (language: string) => {\n      setLanguage(language);\n    },\n    [setLanguage]\n  );\n\n  return (\n    <div>\n      <Grid columns={{ xs: 12, sm: 12, md: 12 }} container={true} spacing={{ xs: 1, md: 1 }}>\n        {languages.map((language, index) => {\n          const { icon, translation } = getCurrentLngDetails(language);\n          return (\n            <Grid key={index} size={{ sm: 2, xs: 6 }}>\n              {language === currentLanguage ? (\n                <CardSelected sx={{ maxWidth: 80 }}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardSelected>\n              ) : (\n                <CardUnSelected onClick={() => handleChangeLanguage(language)}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardUnSelected>\n              )}\n            </Grid>\n          );\n        })}\n      </Grid>\n    </div>\n  );\n};\n\nexport default LanguageSwitch;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,eAAe,OAAO,KAAK,EAAqB,EAAE,YAAY;AACzE,QAAO;EACL,iBAAiB,MAAM,QAAQ,KAAK;EACpC,SAAS;EACT,OAAO,MAAM,QAAQ,MAAM;EAC3B,YAAY;EACb;EACD;AAEF,IAAa,iBAAiB,OAAO,KAAK,EAAqB,EAAE,YAAY;AAC3E,QAAO;EACL,QAAQ;EACR,UAAU,EACR,iBAAiB,MAAM,QAAQ,eAChC;EACF;EACD;AAEF,IAAM,mBAAmB,EAAE,aAAa,WACtC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,sBAAD;CAAY,SAAQ;CAAQ,cAAc;CAAM,SAAQ;WACrD;CACU,CAAA,EACD,CAAA,EACd,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,CAChC,EAAA,CAAA;AAGL,IAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,aAAa,kBAAkB,aAAa;CAC9D,MAAM,gBAAgB,cAAc,QACjC,MAAM,SAAS;AACd,OAAK,KAAK,OAAO;GACf,aAAa,KAAK;GAClB,MAAM,KAAK;GACZ;AACD,SAAO;IAET,EAAE,CACH;CAED,MAAM,CAAC,aAAa,SAAmB,OAAO,KAAK,QAAQ,SAAS,aAAa,EAAE,CAAC,CAAC;CACrF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,kBAAkB;CACxB,MAAM,uBAAuB,aAC1B,aAAqB;EACpB,MAAM,MAAM,cAAc,aAAa,cAAc;AACrD,SAAO;GACL,MAAM,oBAAC,IAAI,MAAL,EAAY,CAAA;GAClB,aAAa,EAAE,IAAI,YAAY;GAChC;IAEH,CAAC,eAAe,EAAE,CACnB;CACD,MAAM,uBAAuB,aAC1B,aAAqB;AACpB,cAAY,SAAS;IAEvB,CAAC,YAAY,CACd;AAED,QACE,oBAAC,OAAD,EAAA,UACE,oBAAC,MAAD;EAAM,SAAS;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;GAAI;EAAE,WAAW;EAAM,SAAS;GAAE,IAAI;GAAG,IAAI;GAAG;YAClF,UAAU,KAAK,UAAU,UAAU;GAClC,MAAM,EAAE,MAAM,gBAAgB,qBAAqB,SAAS;AAC5D,UACE,oBAAC,MAAD;IAAkB,MAAM;KAAE,IAAI;KAAG,IAAI;KAAG;cACrC,aAAa,kBACZ,oBAAC,cAAD;KAAc,IAAI,EAAE,UAAU,IAAI;eAChC,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC5C,CAAA,GAEf,oBAAC,gBAAD;KAAgB,eAAe,qBAAqB,SAAS;eAC3D,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC1C,CAAA;IAEd,EAVI,MAUJ;IAET;EACG,CAAA,EACH,CAAA"}
+{"version":3,"file":"LanguageSwitch.mjs","names":[],"sources":["../../../src/sections/Header/LanguageSwitch.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport i18next from 'i18next';\nimport React, { useCallback, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../';\nimport { useLanguage } from '../../';\n\nexport const CardSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    backgroundColor: theme.palette.grey['600'],\n    opacity: '0.9',\n    color: theme.palette.error.contrastText,\n    fontWeight: 'bold',\n  };\n});\n\nexport const CardUnSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {\n  return {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: theme.palette.greyGainsboro,\n    },\n  };\n});\n\nconst LanguageContent = ({ translation, icon }) => (\n  <>\n    <CardContent>\n      <Typography display=\"block\" gutterBottom={true} variant=\"caption\">\n        {translation}\n      </Typography>\n    </CardContent>\n    <CardContent>{icon}</CardContent>\n  </>\n);\n\nconst LanguageSwitch = () => {\n  const { language, setLanguage, listLanguages } = useLanguage();\n  const listConverted = listLanguages.reduce(\n    (prev, item) => {\n      prev[item.lng] = {\n        translation: item.menuKey,\n        icon: item.icon,\n      };\n      return prev;\n    },\n    {} as Record<string, { translation: string; icon: any }>\n  );\n\n  const [languages] = useState<string[]>(Object.keys(i18next.options?.resources || {}));\n  const { t } = useTranslation();\n  const currentLanguage = language;\n  const getCurrentLngDetails = useCallback(\n    (language: string) => {\n      const lng = listConverted[language] || listConverted['en-US'];\n      return {\n        icon: <lng.icon />,\n        translation: t(lng.translation),\n      };\n    },\n    [listConverted, t]\n  );\n  const handleChangeLanguage = useCallback(\n    (language: string) => {\n      setLanguage(language);\n    },\n    [setLanguage]\n  );\n\n  return (\n    <div>\n      <Grid columns={{ xs: 12, sm: 12, md: 12 }} container={true} spacing={{ xs: 1, md: 1 }}>\n        {languages.map((language, index) => {\n          const { icon, translation } = getCurrentLngDetails(language);\n          return (\n            <Grid key={index} size={{ sm: 2, xs: 6 }}>\n              {language === currentLanguage ? (\n                <CardSelected sx={{ maxWidth: 80 }}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardSelected>\n              ) : (\n                <CardUnSelected onClick={() => handleChangeLanguage(language)}>\n                  <LanguageContent icon={icon} translation={translation} />\n                </CardUnSelected>\n              )}\n            </Grid>\n          );\n        })}\n      </Grid>\n    </div>\n  );\n};\n\nexport default LanguageSwitch;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,eAAe,OAAO,KAAK,EAAqB,EAAE,YAAY;AACzE,QAAO;EACL,iBAAiB,MAAM,QAAQ,KAAK;EACpC,SAAS;EACT,OAAO,MAAM,QAAQ,MAAM;EAC3B,YAAY;EACb;EACD;AAEF,IAAa,iBAAiB,OAAO,KAAK,EAAqB,EAAE,YAAY;AAC3E,QAAO;EACL,QAAQ;EACR,UAAU,EACR,iBAAiB,MAAM,QAAQ,eAChC;EACF;EACD;AAEF,IAAM,mBAAmB,EAAE,aAAa,WACtC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,YAAD;CAAY,SAAQ;CAAQ,cAAc;CAAM,SAAQ;WACrD;CACU,CAAA,EACD,CAAA,EACd,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,CAChC,EAAA,CAAA;AAGL,IAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,aAAa,kBAAkB,aAAa;CAC9D,MAAM,gBAAgB,cAAc,QACjC,MAAM,SAAS;AACd,OAAK,KAAK,OAAO;GACf,aAAa,KAAK;GAClB,MAAM,KAAK;GACZ;AACD,SAAO;IAET,EAAE,CACH;CAED,MAAM,CAAC,aAAa,SAAmB,OAAO,KAAK,QAAQ,SAAS,aAAa,EAAE,CAAC,CAAC;CACrF,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,kBAAkB;CACxB,MAAM,uBAAuB,aAC1B,aAAqB;EACpB,MAAM,MAAM,cAAc,aAAa,cAAc;AACrD,SAAO;GACL,MAAM,oBAAC,IAAI,MAAL,EAAY,CAAA;GAClB,aAAa,EAAE,IAAI,YAAY;GAChC;IAEH,CAAC,eAAe,EAAE,CACnB;CACD,MAAM,uBAAuB,aAC1B,aAAqB;AACpB,cAAY,SAAS;IAEvB,CAAC,YAAY,CACd;AAED,QACE,oBAAC,OAAD,EAAA,UACE,oBAAC,MAAD;EAAM,SAAS;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;GAAI;EAAE,WAAW;EAAM,SAAS;GAAE,IAAI;GAAG,IAAI;GAAG;YAClF,UAAU,KAAK,UAAU,UAAU;GAClC,MAAM,EAAE,MAAM,gBAAgB,qBAAqB,SAAS;AAC5D,UACE,oBAAC,MAAD;IAAkB,MAAM;KAAE,IAAI;KAAG,IAAI;KAAG;cACrC,aAAa,kBACZ,oBAAC,cAAD;KAAc,IAAI,EAAE,UAAU,IAAI;eAChC,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC5C,CAAA,GAEf,oBAAC,gBAAD;KAAgB,eAAe,qBAAqB,SAAS;eAC3D,oBAAC,iBAAD;MAAuB;MAAmB;MAAe,CAAA;KAC1C,CAAA;IAEd,EAVI,MAUJ;IAET;EACG,CAAA,EACH,CAAA"}

package/build/sections/Header/RegistryInfoContent/RegistryInfoContent.d.ts

@@ -1,20 +1,19 @@
-import type { FC } from 'react';
-import React from 'react';
+import { FC, default as React } from 'react';
 export declare const NODE_MANAGER: {
     npm: string;
     yarn: string;
     pnpm: string;
 };
-export declare const AccordionContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+export declare const AccordionContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CommandContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+export declare const CommandContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LinkContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+export declare const LinkContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export type Props = {

package/build/sections/Header/RegistryInfoContent/RegistryInfoContent.mjs

@@ -9,7 +9,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import { useTranslation } from "react-i18next";
 import Link from "@mui/material/Link";
-import MaterialUITypography from "@mui/material/Typography";
+import Typography from "@mui/material/Typography";
 import ReactMarkdown from "react-markdown";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import Accordion from "@mui/material/Accordion";
@@ -104,7 +104,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 				"aria-controls": "panel1a-content",
 				expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
 				id: "panel1a-header",
-				children: /* @__PURE__ */ jsx(MaterialUITypography, {
+				children: /* @__PURE__ */ jsx(Typography, {
 					sx: {
 						fontSize: "1rem",
 						fontWeight: "bold"
@@ -122,7 +122,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 				"aria-controls": "panel2a-content",
 				expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
 				id: "panel2a-header",
-				children: /* @__PURE__ */ jsx(MaterialUITypography, {
+				children: /* @__PURE__ */ jsx(Typography, {
 					sx: {
 						fontSize: "1rem",
 						fontWeight: "bold"
@@ -148,7 +148,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 				"aria-controls": "panel3a-content",
 				expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
 				id: "panel3a-header",
-				children: /* @__PURE__ */ jsx(MaterialUITypography, {
+				children: /* @__PURE__ */ jsx(Typography, {
 					sx: {
 						fontSize: "1rem",
 						fontWeight: "bold"
@@ -163,7 +163,7 @@ var RegistryInfoContent = ({ scope, registryUrl }) => {
 		/* @__PURE__ */ jsx(LinkContainer, { children: /* @__PURE__ */ jsx(Link, {
 			href: "https://verdaccio.org/docs/cli-registry",
 			target: "_blank",
-			children: /* @__PURE__ */ jsx(MaterialUITypography, { children: t("header.registry-info-link") })
+			children: /* @__PURE__ */ jsx(Typography, { children: t("header.registry-info-link") })
 		}) })
 	] })] });
 };

package/build/sections/Header/RegistryInfoContent/RegistryInfoContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RegistryInfoContent.mjs","names":[],"sources":["../../../../src/sections/Header/RegistryInfoContent/RegistryInfoContent.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport {\n  CopyClipboard,\n  getCLIChangePassword,\n  getCLISBerryYamlRegistry,\n  getCLISetConfigRegistry,\n  getCLISetRegistry,\n  useConfig,\n} from '../../../';\nimport { Description, TextContent } from './styles';\n\nexport const NODE_MANAGER = {\n  npm: 'npm',\n  yarn: 'yarn',\n  pnpm: 'pnpm',\n};\n\nconst renderNpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)}\n      />\n      <CopyClipboard dataTestId=\"copy\" text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />\n    </Box>\n  );\n};\n\nconst renderPnpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnBerryTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard dataTestId=\"copy\" text={getCLISBerryYamlRegistry(scope, registryUrl)} />\n    </Box>\n  );\n};\n\nexport const AccordionContainer = styled('div')({\n  padding: 0,\n  paddingLeft: 0,\n  paddingRight: 0,\n});\n\nexport const CommandContainer = styled('div')({\n  padding: 5,\n});\n\nexport const LinkContainer = styled('div')({\n  margin: 10,\n  marginLeft: 0,\n});\n\nexport type Props = {\n  registryUrl: string;\n  scope: string | undefined;\n};\n\nconst RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n\n  const hasNpm = configOptions?.pkgManagers?.includes('npm');\n  const hasYarn = configOptions?.pkgManagers?.includes('yarn');\n  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm');\n  // TODO: we can improve this logic, expanding only one accordion based on which package manager is enabled\n  // feel free to contribute here\n  return (\n    <>\n      <TextContent>{t('packageManagers.description')}</TextContent>\n      <AccordionContainer>\n        <Accordion disabled={!hasNpm}>\n          <AccordionSummary\n            aria-controls=\"panel1a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel1a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'npm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderNpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n        <Accordion disabled={!hasYarn}>\n          <AccordionSummary\n            aria-controls=\"panel2a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel2a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'yarn'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnclassicDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnTab(scope, registryUrl)}\n            </CommandContainer>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnBerryDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnBerryTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <Accordion disabled={!hasPnpm}>\n          <AccordionSummary\n            aria-controls=\"panel3a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel3a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'pnpm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderPnpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <LinkContainer>\n          <Link href=\"https://verdaccio.org/docs/cli-registry\" target=\"_blank\">\n            <Typography>{t('header.registry-info-link')}</Typography>\n          </Link>\n        </LinkContainer>\n      </AccordionContainer>\n    </>\n  );\n};\n\nexport default RegistryInfoContent;\n"],"mappings":"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"}
+{"version":3,"file":"RegistryInfoContent.mjs","names":[],"sources":["../../../../src/sections/Header/RegistryInfoContent/RegistryInfoContent.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport ReactMarkdown from 'react-markdown';\n\nimport {\n  CopyClipboard,\n  getCLIChangePassword,\n  getCLISBerryYamlRegistry,\n  getCLISetConfigRegistry,\n  getCLISetRegistry,\n  useConfig,\n} from '../../../';\nimport { Description, TextContent } from './styles';\n\nexport const NODE_MANAGER = {\n  npm: 'npm',\n  yarn: 'yarn',\n  pnpm: 'pnpm',\n};\n\nconst renderNpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)}\n      />\n      <CopyClipboard dataTestId=\"copy\" text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />\n    </Box>\n  );\n};\n\nconst renderPnpmTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)}\n      />\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard\n        dataTestId=\"copy\"\n        text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)}\n      />\n    </Box>\n  );\n};\n\nconst renderYarnBerryTab = (scope: string | undefined, registryUrl: string): React.JSX.Element => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <CopyClipboard dataTestId=\"copy\" text={getCLISBerryYamlRegistry(scope, registryUrl)} />\n    </Box>\n  );\n};\n\nexport const AccordionContainer = styled('div')({\n  padding: 0,\n  paddingLeft: 0,\n  paddingRight: 0,\n});\n\nexport const CommandContainer = styled('div')({\n  padding: 5,\n});\n\nexport const LinkContainer = styled('div')({\n  margin: 10,\n  marginLeft: 0,\n});\n\nexport type Props = {\n  registryUrl: string;\n  scope: string | undefined;\n};\n\nconst RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {\n  const { t } = useTranslation();\n  const { configOptions } = useConfig();\n\n  const hasNpm = configOptions?.pkgManagers?.includes('npm');\n  const hasYarn = configOptions?.pkgManagers?.includes('yarn');\n  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm');\n  // TODO: we can improve this logic, expanding only one accordion based on which package manager is enabled\n  // feel free to contribute here\n  return (\n    <>\n      <TextContent>{t('packageManagers.description')}</TextContent>\n      <AccordionContainer>\n        <Accordion disabled={!hasNpm}>\n          <AccordionSummary\n            aria-controls=\"panel1a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel1a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'npm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderNpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n        <Accordion disabled={!hasYarn}>\n          <AccordionSummary\n            aria-controls=\"panel2a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel2a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'yarn'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnclassicDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnTab(scope, registryUrl)}\n            </CommandContainer>\n            <Description>\n              <ReactMarkdown>{t('packageManagers.yarnBerryDetails')}</ReactMarkdown>\n            </Description>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderYarnBerryTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <Accordion disabled={!hasPnpm}>\n          <AccordionSummary\n            aria-controls=\"panel3a-content\"\n            expandIcon={<ExpandMoreIcon />}\n            id=\"panel3a-header\"\n          >\n            <Typography sx={{ fontSize: '1rem', fontWeight: 'bold' }}>{'pnpm'}</Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <CommandContainer data-testid={'tab-content'}>\n              {renderPnpmTab(scope, registryUrl)}\n            </CommandContainer>\n          </AccordionDetails>\n        </Accordion>\n\n        <LinkContainer>\n          <Link href=\"https://verdaccio.org/docs/cli-registry\" target=\"_blank\">\n            <Typography>{t('header.registry-info-link')}</Typography>\n          </Link>\n        </LinkContainer>\n      </AccordionContainer>\n    </>\n  );\n};\n\nexport default RegistryInfoContent;\n"],"mappings":"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"}

package/build/sections/Header/RegistryInfoContent/styles.d.ts

@@ -1,13 +1,13 @@
-import type { Theme } from '../../../';
-export declare const TextContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+import { Theme } from '../../../';
+export declare const TextContent: 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 Description: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Description: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     theme?: Theme;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,27 +1,41 @@
-import type { Theme } from '../../Theme';
-export declare const InnerNavBar: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const Greetings: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+import { Theme } from '../../Theme';
+export declare const InnerNavBar: import('@emotion/styled').StyledComponent<import('@mui/material/Toolbar').ToolbarOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style" | "className" | "classes" | "sx" | "variant" | "disableGutters"> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const Greetings: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const MobileNavBar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const MobileNavBar: 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 InnerMobileNavBar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InnerMobileNavBar: 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 IconSearchButton: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const InfoButton: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const SwitchThemeButton: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const SettingsButtom: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const SearchWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconSearchButton: import('@emotion/styled').StyledComponent<import('@mui/material/IconButton').IconButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "style" | "color" | "className" | "classes" | "sx" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator" | "size"> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const InfoButton: import('@emotion/styled').StyledComponent<import('@mui/material/IconButton').IconButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "style" | "color" | "className" | "classes" | "sx" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator" | "size"> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SwitchThemeButton: import('@emotion/styled').StyledComponent<import('@mui/material/IconButton').IconButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "style" | "color" | "className" | "classes" | "sx" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator" | "size"> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SettingsButtom: import('@emotion/styled').StyledComponent<import('@mui/material/IconButton').IconButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "style" | "color" | "className" | "classes" | "sx" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator" | "size"> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SearchWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const NavBar: import("@emotion/styled").StyledComponent<any, {}, {}>;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavBar: import('@emotion/styled').StyledComponent<import('@mui/material/AppBar').AppBarOwnProps & Omit<import('@mui/material').PaperOwnProps, "color" | "position" | "elevation" | "classes" | "square"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "children" | "style" | "color" | "position" | "elevation" | "className" | "classes" | "square" | "sx" | "variant" | "enableColorOnDark"> & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    theme?: Theme;
+}, {}, {}>;

package/build/sections/Home/Home.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { default as React } from 'react';
 declare const Home: React.FC;
 export default Home;

package/build/sections/Security/AddUser.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { default as React } from 'react';
 declare const AddUser: React.FC;
 export default AddUser;

package/build/sections/Security/AddUser.js

@@ -72,7 +72,6 @@ var AddUser = () => {
 		if (!createUserEnabled) navigate("/");
 	}, [createUserEnabled, navigate]);
 	return createUserEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.SecurityContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.SecurityForm, {
-		component: "form",
 		onSubmit: handleSubmit(onSubmit),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Typography, {

package/build/sections/Security/AddUser.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddUser.js","names":[],"sources":["../../../src/sections/Security/AddUser.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Link, Typography } from '@mui/material';\nimport React, { useCallback, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport PasswordField from '../../components/LoginForm/PasswordField';\nimport UsernameField from '../../components/LoginForm/UsernameField';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { normalizeAuthError } from '../../providers/AuthProvider/utils';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport type { AddUserFormValues } from '../../utils/schemas';\nimport { addUserSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\ntype AddUserBody = {\n  name: string;\n  password: string;\n  email?: string;\n};\n\nconst AddUser: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const { next, user } = getSecurityUrlParams(location);\n  const loginLink = Route.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : '');\n  const createUserEnabled = configuration?.flags?.createUser;\n  const form = useForm<AddUserFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: typeof user === 'string' ? user : '',\n      password: '',\n      email: '',\n    },\n    resolver: yupResolver(addUserSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    watch,\n    formState: { isValid, errors },\n  } = form;\n\n  const username = watch('username');\n\n  const addUserLink = `${Route.ADD_USER}:${encodeURIComponent(username)}`;\n\n  const { trigger } = useDataMutation<{ ok: string; token: string }>(basePath, addUserLink, 'PUT');\n\n  const handleAddUser = useCallback(\n    async (body: AddUserBody) => {\n      try {\n        await trigger(body);\n      } catch (err) {\n        throw normalizeAuthError(err);\n      }\n    },\n    [trigger]\n  );\n\n  const onSubmit = useCallback(\n    async (data: AddUserFormValues) => {\n      try {\n        await handleAddUser({\n          name: data.username,\n          password: data.password,\n          email: data.email,\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.AddUser}`);\n      } catch {\n        setError('root', {\n          type: 'server',\n          // TODO: add translation key\n          message: 'Failed to create user',\n        });\n      }\n    },\n    [handleAddUser, setError, navigate]\n  );\n\n  useEffect(() => {\n    if (!createUserEnabled) {\n      navigate('/');\n    }\n  }, [createUserEnabled, navigate]);\n\n  return createUserEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm component=\"form\" onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.addUser.title')}\n          </Typography>\n          <UsernameField errors={errors} register={register} />\n          <PasswordField errors={errors} register={register} />\n\n          <SecurityTextField\n            label={t('security.addUser.email')}\n            type=\"email\"\n            {...register('email')}\n          />\n\n          <Typography color=\"text.secondary\" paragraph={true} sx={{ fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.emailDescription')}\n          </Typography>\n          {errors.root && <LoginDialogFormError error={errors.root} />}\n          <Button\n            color=\"primary\"\n            disabled={!isValid}\n            fullWidth={true}\n            sx={{ mt: 2 }}\n            type=\"submit\"\n            variant=\"contained\"\n          >\n            {t('security.addUser.submit')}\n          </Button>\n          <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.alreadyUserQuestion')}\n            <Link href={loginLink} sx={{ ml: 1 }}>\n              {t('security.addUser.login')}\n            </Link>\n          </Typography>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default AddUser;\n"],"mappings":"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"}
+{"version":3,"file":"AddUser.js","names":[],"sources":["../../../src/sections/Security/AddUser.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Link, Typography } from '@mui/material';\nimport React, { useCallback, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport PasswordField from '../../components/LoginForm/PasswordField';\nimport UsernameField from '../../components/LoginForm/UsernameField';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { normalizeAuthError } from '../../providers/AuthProvider/utils';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport type { AddUserFormValues } from '../../utils/schemas';\nimport { addUserSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\ntype AddUserBody = {\n  name: string;\n  password: string;\n  email?: string;\n};\n\nconst AddUser: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const { next, user } = getSecurityUrlParams(location);\n  const loginLink = Route.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : '');\n  const createUserEnabled = configuration?.flags?.createUser;\n  const form = useForm<AddUserFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: typeof user === 'string' ? user : '',\n      password: '',\n      email: '',\n    },\n    resolver: yupResolver(addUserSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    watch,\n    formState: { isValid, errors },\n  } = form;\n\n  const username = watch('username');\n\n  const addUserLink = `${Route.ADD_USER}:${encodeURIComponent(username)}`;\n\n  const { trigger } = useDataMutation<{ ok: string; token: string }>(basePath, addUserLink, 'PUT');\n\n  const handleAddUser = useCallback(\n    async (body: AddUserBody) => {\n      try {\n        await trigger(body);\n      } catch (err) {\n        throw normalizeAuthError(err);\n      }\n    },\n    [trigger]\n  );\n\n  const onSubmit = useCallback(\n    async (data: AddUserFormValues) => {\n      try {\n        await handleAddUser({\n          name: data.username,\n          password: data.password,\n          email: data.email,\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.AddUser}`);\n      } catch {\n        setError('root', {\n          type: 'server',\n          // TODO: add translation key\n          message: 'Failed to create user',\n        });\n      }\n    },\n    [handleAddUser, setError, navigate]\n  );\n\n  useEffect(() => {\n    if (!createUserEnabled) {\n      navigate('/');\n    }\n  }, [createUserEnabled, navigate]);\n\n  return createUserEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.addUser.title')}\n          </Typography>\n          <UsernameField errors={errors} register={register} />\n          <PasswordField errors={errors} register={register} />\n\n          <SecurityTextField\n            label={t('security.addUser.email')}\n            type=\"email\"\n            {...register('email')}\n          />\n\n          <Typography color=\"text.secondary\" paragraph={true} sx={{ fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.emailDescription')}\n          </Typography>\n          {errors.root && <LoginDialogFormError error={errors.root} />}\n          <Button\n            color=\"primary\"\n            disabled={!isValid}\n            fullWidth={true}\n            sx={{ mt: 2 }}\n            type=\"submit\"\n            variant=\"contained\"\n          >\n            {t('security.addUser.submit')}\n          </Button>\n          <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.alreadyUserQuestion')}\n            <Link href={loginLink} sx={{ ml: 1 }}>\n              {t('security.addUser.login')}\n            </Link>\n          </Typography>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default AddUser;\n"],"mappings":"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"}

package/build/sections/Security/AddUser.mjs

@@ -70,7 +70,6 @@ var AddUser = () => {
 		if (!createUserEnabled) navigate("/");
 	}, [createUserEnabled, navigate]);
 	return createUserEnabled ? /* @__PURE__ */ jsx(SecurityLayout, { children: /* @__PURE__ */ jsx(SecurityContainer, { children: /* @__PURE__ */ jsxs(SecurityForm, {
-		component: "form",
 		onSubmit: handleSubmit(onSubmit),
 		children: [
 			/* @__PURE__ */ jsx(Typography, {

package/build/sections/Security/AddUser.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AddUser.mjs","names":[],"sources":["../../../src/sections/Security/AddUser.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Link, Typography } from '@mui/material';\nimport React, { useCallback, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport PasswordField from '../../components/LoginForm/PasswordField';\nimport UsernameField from '../../components/LoginForm/UsernameField';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { normalizeAuthError } from '../../providers/AuthProvider/utils';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport type { AddUserFormValues } from '../../utils/schemas';\nimport { addUserSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\ntype AddUserBody = {\n  name: string;\n  password: string;\n  email?: string;\n};\n\nconst AddUser: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const { next, user } = getSecurityUrlParams(location);\n  const loginLink = Route.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : '');\n  const createUserEnabled = configuration?.flags?.createUser;\n  const form = useForm<AddUserFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: typeof user === 'string' ? user : '',\n      password: '',\n      email: '',\n    },\n    resolver: yupResolver(addUserSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    watch,\n    formState: { isValid, errors },\n  } = form;\n\n  const username = watch('username');\n\n  const addUserLink = `${Route.ADD_USER}:${encodeURIComponent(username)}`;\n\n  const { trigger } = useDataMutation<{ ok: string; token: string }>(basePath, addUserLink, 'PUT');\n\n  const handleAddUser = useCallback(\n    async (body: AddUserBody) => {\n      try {\n        await trigger(body);\n      } catch (err) {\n        throw normalizeAuthError(err);\n      }\n    },\n    [trigger]\n  );\n\n  const onSubmit = useCallback(\n    async (data: AddUserFormValues) => {\n      try {\n        await handleAddUser({\n          name: data.username,\n          password: data.password,\n          email: data.email,\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.AddUser}`);\n      } catch {\n        setError('root', {\n          type: 'server',\n          // TODO: add translation key\n          message: 'Failed to create user',\n        });\n      }\n    },\n    [handleAddUser, setError, navigate]\n  );\n\n  useEffect(() => {\n    if (!createUserEnabled) {\n      navigate('/');\n    }\n  }, [createUserEnabled, navigate]);\n\n  return createUserEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm component=\"form\" onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.addUser.title')}\n          </Typography>\n          <UsernameField errors={errors} register={register} />\n          <PasswordField errors={errors} register={register} />\n\n          <SecurityTextField\n            label={t('security.addUser.email')}\n            type=\"email\"\n            {...register('email')}\n          />\n\n          <Typography color=\"text.secondary\" paragraph={true} sx={{ fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.emailDescription')}\n          </Typography>\n          {errors.root && <LoginDialogFormError error={errors.root} />}\n          <Button\n            color=\"primary\"\n            disabled={!isValid}\n            fullWidth={true}\n            sx={{ mt: 2 }}\n            type=\"submit\"\n            variant=\"contained\"\n          >\n            {t('security.addUser.submit')}\n          </Button>\n          <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.alreadyUserQuestion')}\n            <Link href={loginLink} sx={{ ml: 1 }}>\n              {t('security.addUser.login')}\n            </Link>\n          </Typography>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default AddUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAM,gBAA0B;CAC9B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,WAAW,mBAAmB,cAAc,KAAK;CACvD,MAAM,EAAE,MAAM,SAAS,qBAAqB,SAAS;CACrD,MAAM,YAAY,QAAM,SAAS,OAAO,SAAS,mBAAmB,KAAK,KAAK;CAC9E,MAAM,oBAAoB,eAAe,OAAO;CAWhD,MAAM,EACJ,UACA,cACA,UACA,OACA,WAAW,EAAE,SAAS,aAfX,QAA2B;EACtC,MAAM;EACN,eAAe;GACb,UAAU,OAAO,SAAS,WAAW,OAAO;GAC5C,UAAU;GACV,OAAO;GACR;EACD,UAAU,YAAY,cAAc;EACrC,CAAC;CAUF,MAAM,WAAW,MAAM,WAAW;CAIlC,MAAM,EAAE,YAAY,gBAA+C,UAF/C,GAAG,QAAM,SAAS,GAAG,mBAAmB,SAAS,IAEqB,MAAM;CAEhG,MAAM,gBAAgB,YACpB,OAAO,SAAsB;AAC3B,MAAI;AACF,SAAM,QAAQ,KAAK;WACZ,KAAK;AACZ,SAAM,mBAAmB,IAAI;;IAGjC,CAAC,QAAQ,CACV;CAED,MAAM,WAAW,YACf,OAAO,SAA4B;AACjC,MAAI;AACF,SAAM,cAAc;IAClB,MAAM,KAAK;IACX,UAAU,KAAK;IACf,OAAO,KAAK;IACb,CAAC;AACF,YAAS,GAAG,QAAM,QAAQ,eAAe,YAAY,UAAU;UACzD;AACN,YAAS,QAAQ;IACf,MAAM;IAEN,SAAS;IACV,CAAC;;IAGN;EAAC;EAAe;EAAU;EAAS,CACpC;AAED,iBAAgB;AACd,MAAI,CAAC,kBACH,UAAS,IAAI;IAEd,CAAC,mBAAmB,SAAS,CAAC;AAEjC,QAAO,oBACL,oBAAC,gBAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,cAAD;EAAc,WAAU;EAAO,UAAU,aAAa,SAAS;YAA/D;GACE,oBAAC,YAAD;IAAY,OAAM;IAAS,WAAU;IAAK,cAAc;IAAM,SAAQ;cACnE,EAAE,yBAAyB;IACjB,CAAA;GACb,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GACrD,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GAErD,oBAAC,mBAAD;IACE,OAAO,EAAE,yBAAyB;IAClC,MAAK;IACL,GAAI,SAAS,QAAQ;IACrB,CAAA;GAEF,oBAAC,YAAD;IAAY,OAAM;IAAiB,WAAW;IAAM,IAAI,EAAE,UAAU,IAAI;IAAE,SAAQ;cAC/E,EAAE,oCAAoC;IAC5B,CAAA;GACZ,OAAO,QAAQ,oBAAC,sBAAD,EAAsB,OAAO,OAAO,MAAQ,CAAA;GAC5D,oBAAC,QAAD;IACE,OAAM;IACN,UAAU,CAAC;IACX,WAAW;IACX,IAAI,EAAE,IAAI,GAAG;IACb,MAAK;IACL,SAAQ;cAEP,EAAE,0BAA0B;IACtB,CAAA;GACT,qBAAC,YAAD;IAAY,OAAM;IAAS,IAAI;KAAE,IAAI;KAAG,UAAU;KAAI;IAAE,SAAQ;cAAhE,CACG,EAAE,uCAAuC,EAC1C,oBAAC,QAAD;KAAM,MAAM;KAAW,IAAI,EAAE,IAAI,GAAG;eACjC,EAAE,yBAAyB;KACvB,CAAA,CACI;;GACA;KACG,CAAA,EACL,CAAA,GACf"}
+{"version":3,"file":"AddUser.mjs","names":[],"sources":["../../../src/sections/Security/AddUser.tsx"],"sourcesContent":["import { yupResolver } from '@hookform/resolvers/yup';\nimport { Button, Link, Typography } from '@mui/material';\nimport React, { useCallback, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useNavigate } from 'react-router';\n\nimport { useDataMutation } from '../../api/use-data-mutation';\nimport LoginDialogFormError from '../../components/LoginDialog/LoginDialogFormError';\nimport PasswordField from '../../components/LoginForm/PasswordField';\nimport UsernameField from '../../components/LoginForm/UsernameField';\nimport { getConfiguration } from '../../configuration';\nimport SecurityLayout from '../../layouts/Security/Dialog';\nimport { normalizeAuthError } from '../../providers/AuthProvider/utils';\nimport { stripTrailingSlash } from '../../store/utils';\nimport { Route } from '../../utils';\nimport type { AddUserFormValues } from '../../utils/schemas';\nimport { addUserSchema } from '../../utils/schemas';\nimport { MessageType } from './Success';\nimport { SecurityContainer, SecurityForm, SecurityTextField } from './styles';\nimport { getSecurityUrlParams } from './utils';\n\ntype AddUserBody = {\n  name: string;\n  password: string;\n  email?: string;\n};\n\nconst AddUser: React.FC = () => {\n  const { t } = useTranslation();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const configuration = getConfiguration();\n  const basePath = stripTrailingSlash(configuration.base);\n  const { next, user } = getSecurityUrlParams(location);\n  const loginLink = Route.LOGIN + (next ? `?next=${encodeURIComponent(next)}` : '');\n  const createUserEnabled = configuration?.flags?.createUser;\n  const form = useForm<AddUserFormValues>({\n    mode: 'onChange',\n    defaultValues: {\n      username: typeof user === 'string' ? user : '',\n      password: '',\n      email: '',\n    },\n    resolver: yupResolver(addUserSchema),\n  });\n\n  const {\n    setError,\n    handleSubmit,\n    register,\n    watch,\n    formState: { isValid, errors },\n  } = form;\n\n  const username = watch('username');\n\n  const addUserLink = `${Route.ADD_USER}:${encodeURIComponent(username)}`;\n\n  const { trigger } = useDataMutation<{ ok: string; token: string }>(basePath, addUserLink, 'PUT');\n\n  const handleAddUser = useCallback(\n    async (body: AddUserBody) => {\n      try {\n        await trigger(body);\n      } catch (err) {\n        throw normalizeAuthError(err);\n      }\n    },\n    [trigger]\n  );\n\n  const onSubmit = useCallback(\n    async (data: AddUserFormValues) => {\n      try {\n        await handleAddUser({\n          name: data.username,\n          password: data.password,\n          email: data.email,\n        });\n        navigate(`${Route.SUCCESS}?messageType=${MessageType.AddUser}`);\n      } catch {\n        setError('root', {\n          type: 'server',\n          // TODO: add translation key\n          message: 'Failed to create user',\n        });\n      }\n    },\n    [handleAddUser, setError, navigate]\n  );\n\n  useEffect(() => {\n    if (!createUserEnabled) {\n      navigate('/');\n    }\n  }, [createUserEnabled, navigate]);\n\n  return createUserEnabled ? (\n    <SecurityLayout>\n      <SecurityContainer>\n        <SecurityForm onSubmit={handleSubmit(onSubmit)}>\n          <Typography align=\"center\" component=\"h1\" gutterBottom={true} variant=\"h4\">\n            {t('security.addUser.title')}\n          </Typography>\n          <UsernameField errors={errors} register={register} />\n          <PasswordField errors={errors} register={register} />\n\n          <SecurityTextField\n            label={t('security.addUser.email')}\n            type=\"email\"\n            {...register('email')}\n          />\n\n          <Typography color=\"text.secondary\" paragraph={true} sx={{ fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.emailDescription')}\n          </Typography>\n          {errors.root && <LoginDialogFormError error={errors.root} />}\n          <Button\n            color=\"primary\"\n            disabled={!isValid}\n            fullWidth={true}\n            sx={{ mt: 2 }}\n            type=\"submit\"\n            variant=\"contained\"\n          >\n            {t('security.addUser.submit')}\n          </Button>\n          <Typography align=\"center\" sx={{ mt: 2, fontSize: 12 }} variant=\"body2\">\n            {t('security.addUser.alreadyUserQuestion')}\n            <Link href={loginLink} sx={{ ml: 1 }}>\n              {t('security.addUser.login')}\n            </Link>\n          </Typography>\n        </SecurityForm>\n      </SecurityContainer>\n    </SecurityLayout>\n  ) : null;\n};\n\nexport default AddUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAM,gBAA0B;CAC9B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,WAAW,mBAAmB,cAAc,KAAK;CACvD,MAAM,EAAE,MAAM,SAAS,qBAAqB,SAAS;CACrD,MAAM,YAAY,QAAM,SAAS,OAAO,SAAS,mBAAmB,KAAK,KAAK;CAC9E,MAAM,oBAAoB,eAAe,OAAO;CAWhD,MAAM,EACJ,UACA,cACA,UACA,OACA,WAAW,EAAE,SAAS,aAfX,QAA2B;EACtC,MAAM;EACN,eAAe;GACb,UAAU,OAAO,SAAS,WAAW,OAAO;GAC5C,UAAU;GACV,OAAO;GACR;EACD,UAAU,YAAY,cAAc;EACrC,CAAC;CAUF,MAAM,WAAW,MAAM,WAAW;CAIlC,MAAM,EAAE,YAAY,gBAA+C,UAF/C,GAAG,QAAM,SAAS,GAAG,mBAAmB,SAAS,IAEqB,MAAM;CAEhG,MAAM,gBAAgB,YACpB,OAAO,SAAsB;AAC3B,MAAI;AACF,SAAM,QAAQ,KAAK;WACZ,KAAK;AACZ,SAAM,mBAAmB,IAAI;;IAGjC,CAAC,QAAQ,CACV;CAED,MAAM,WAAW,YACf,OAAO,SAA4B;AACjC,MAAI;AACF,SAAM,cAAc;IAClB,MAAM,KAAK;IACX,UAAU,KAAK;IACf,OAAO,KAAK;IACb,CAAC;AACF,YAAS,GAAG,QAAM,QAAQ,eAAe,YAAY,UAAU;UACzD;AACN,YAAS,QAAQ;IACf,MAAM;IAEN,SAAS;IACV,CAAC;;IAGN;EAAC;EAAe;EAAU;EAAS,CACpC;AAED,iBAAgB;AACd,MAAI,CAAC,kBACH,UAAS,IAAI;IAEd,CAAC,mBAAmB,SAAS,CAAC;AAEjC,QAAO,oBACL,oBAAC,gBAAD,EAAA,UACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,cAAD;EAAc,UAAU,aAAa,SAAS;YAA9C;GACE,oBAAC,YAAD;IAAY,OAAM;IAAS,WAAU;IAAK,cAAc;IAAM,SAAQ;cACnE,EAAE,yBAAyB;IACjB,CAAA;GACb,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GACrD,oBAAC,eAAD;IAAuB;IAAkB;IAAY,CAAA;GAErD,oBAAC,mBAAD;IACE,OAAO,EAAE,yBAAyB;IAClC,MAAK;IACL,GAAI,SAAS,QAAQ;IACrB,CAAA;GAEF,oBAAC,YAAD;IAAY,OAAM;IAAiB,WAAW;IAAM,IAAI,EAAE,UAAU,IAAI;IAAE,SAAQ;cAC/E,EAAE,oCAAoC;IAC5B,CAAA;GACZ,OAAO,QAAQ,oBAAC,sBAAD,EAAsB,OAAO,OAAO,MAAQ,CAAA;GAC5D,oBAAC,QAAD;IACE,OAAM;IACN,UAAU,CAAC;IACX,WAAW;IACX,IAAI,EAAE,IAAI,GAAG;IACb,MAAK;IACL,SAAQ;cAEP,EAAE,0BAA0B;IACtB,CAAA;GACT,qBAAC,YAAD;IAAY,OAAM;IAAS,IAAI;KAAE,IAAI;KAAG,UAAU;KAAI;IAAE,SAAQ;cAAhE,CACG,EAAE,uCAAuC,EAC1C,oBAAC,QAAD;KAAM,MAAM;KAAW,IAAI,EAAE,IAAI,GAAG;eACjC,EAAE,yBAAyB;KACvB,CAAA,CACI;;GACA;KACG,CAAA,EACL,CAAA,GACf"}

package/build/sections/Security/ChangePassword.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { default as React } from 'react';
 declare const ChangePassword: React.FC;
 export default ChangePassword;

package/build/sections/Security/ChangePassword.js

@@ -65,7 +65,6 @@ var ChangePassword = () => {
 		if (!changePasswordEnabled) navigate("/");
 	}, [changePasswordEnabled, navigate]);
 	return changePasswordEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_styles.SecurityContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_styles.SecurityForm, {
-		component: "form",
 		onSubmit: handleSubmit(onSubmit),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material.Typography, {