@backstage/plugin-user-settings 0.8.21-next.0 → 0.8.21-next.2

package/dist/components/General/UserSettingsMenu.esm.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Menu from '@material-ui/core/Menu';
@@ -10,10 +11,8 @@ import { useApi, errorApiRef, identityApiRef } from '@backstage/core-plugin-api'
 const UserSettingsMenu = () => {
   const errorApi = useApi(errorApiRef);
   const identityApi = useApi(identityApiRef);
-  const [open, setOpen] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(
-    void 0
-  );
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(void 0);
   const handleOpen = (event) => {
     setAnchorEl(event.currentTarget);
     setOpen(true);
@@ -22,23 +21,28 @@ const UserSettingsMenu = () => {
     setAnchorEl(void 0);
     setOpen(false);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      "data-testid": "user-settings-menu",
-      "aria-label": "more",
-      onClick: handleOpen
-    },
-    /* @__PURE__ */ React.createElement(MoreVertIcon, null)
-  ), /* @__PURE__ */ React.createElement(Menu, { anchorEl, open, onClose: handleClose }, /* @__PURE__ */ React.createElement(
-    MenuItem,
-    {
-      "data-testid": "sign-out",
-      onClick: () => identityApi.signOut().catch((error) => errorApi.post(error))
-    },
-    /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(SignOutIcon, null)),
-    "Sign Out"
-  )));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        "data-testid": "user-settings-menu",
+        "aria-label": "more",
+        onClick: handleOpen,
+        children: /* @__PURE__ */ jsx(MoreVertIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open, onClose: handleClose, children: /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        "data-testid": "sign-out",
+        onClick: () => identityApi.signOut().catch((error) => errorApi.post(error)),
+        children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(SignOutIcon, {}) }),
+          "Sign Out"
+        ]
+      }
+    ) })
+  ] });
 };
 
 export { UserSettingsMenu };

package/dist/components/General/UserSettingsMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsMenu.esm.js","sources":["../../../src/components/General/UserSettingsMenu.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport SignOutIcon from '@material-ui/icons/MeetingRoom';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport {\n  identityApiRef,\n  errorApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n\n/** @public */\nexport const UserSettingsMenu = () => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n  const [open, setOpen] = React.useState(false);\n  const [anchorEl, setAnchorEl] = React.useState<undefined | HTMLElement>(\n    undefined,\n  );\n\n  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(undefined);\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <IconButton\n        data-testid=\"user-settings-menu\"\n        aria-label=\"more\"\n        onClick={handleOpen}\n      >\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem\n          data-testid=\"sign-out\"\n          onClick={() =>\n            identityApi.signOut().catch(error => errorApi.post(error))\n          }\n        >\n          <ListItemIcon>\n            <SignOutIcon />\n          </ListItemIcon>\n          Sign Out\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8BO,MAAM,mBAAmB,MAAM;AACpC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IACpC,KAAA;AAAA,GACF;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAA+C,KAAA;AACjE,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAC/B,IAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,KAAS,CAAA,CAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,oBAAA;AAAA,MACZ,YAAW,EAAA,MAAA;AAAA,MACX,OAAS,EAAA;AAAA,KAAA;AAAA,wCAER,YAAa,EAAA,IAAA;AAAA,qBAEf,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,QAAoB,EAAA,IAAA,EAAY,SAAS,WAC7C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,UAAA;AAAA,MACZ,OAAA,EAAS,MACP,WAAA,CAAY,OAAQ,EAAA,CAAE,MAAM,CAAS,KAAA,KAAA,QAAA,CAAS,IAAK,CAAA,KAAK,CAAC;AAAA,KAAA;AAAA,oBAG1D,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAY,CACf,CAAA;AAAA,IAAe;AAAA,GAGnB,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsMenu.esm.js","sources":["../../../src/components/General/UserSettingsMenu.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { MouseEvent, useState } from 'react';\nimport IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport SignOutIcon from '@material-ui/icons/MeetingRoom';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport {\n  identityApiRef,\n  errorApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n\n/** @public */\nexport const UserSettingsMenu = () => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n  const [open, setOpen] = useState(false);\n  const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>(undefined);\n\n  const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(undefined);\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <IconButton\n        data-testid=\"user-settings-menu\"\n        aria-label=\"more\"\n        onClick={handleOpen}\n      >\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem\n          data-testid=\"sign-out\"\n          onClick={() =>\n            identityApi.signOut().catch(error => errorApi.post(error))\n          }\n        >\n          <ListItemIcon>\n            <SignOutIcon />\n          </ListItemIcon>\n          Sign Out\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8BO,MAAM,mBAAmB,MAAM;AACpC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAkC,KAAS,CAAA,CAAA;AAE3E,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyC,KAAA;AAC3D,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAC/B,IAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,KAAS,CAAA,CAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,oBAAA;AAAA,QACZ,YAAW,EAAA,MAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QAET,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,KAChB;AAAA,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,QAAoB,EAAA,IAAA,EAAY,SAAS,WAC7C,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,UAAA;AAAA,QACZ,OAAA,EAAS,MACP,WAAA,CAAY,OAAQ,EAAA,CAAE,MAAM,CAAS,KAAA,KAAA,QAAA,CAAS,IAAK,CAAA,KAAK,CAAC,CAAA;AAAA,QAG3D,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,CACf,EAAA,CAAA;AAAA,UAAe;AAAA;AAAA;AAAA,KAGnB,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/General/UserSettingsPinToggle.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -8,30 +8,33 @@ import { useSidebarPinState } from '@backstage/core-components';
 
 const UserSettingsPinToggle = () => {
   const { isPinned, toggleSidebarPinState } = useSidebarPinState();
-  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(
-    ListItemText,
-    {
-      primary: "Pin Sidebar",
-      secondary: "Prevent the sidebar from collapsing"
-    }
-  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      placement: "top",
-      arrow: true,
-      title: `${isPinned ? "Unpin" : "Pin"} Sidebar`
-    },
-    /* @__PURE__ */ React.createElement(
-      Switch,
+  return /* @__PURE__ */ jsxs(ListItem, { children: [
+    /* @__PURE__ */ jsx(
+      ListItemText,
       {
-        color: "primary",
-        checked: isPinned,
-        onChange: () => toggleSidebarPinState(),
-        name: "pin",
-        inputProps: { "aria-label": "Pin Sidebar Switch" }
+        primary: "Pin Sidebar",
+        secondary: "Prevent the sidebar from collapsing"
       }
-    )
-  )));
+    ),
+    /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        placement: "top",
+        arrow: true,
+        title: `${isPinned ? "Unpin" : "Pin"} Sidebar`,
+        children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            color: "primary",
+            checked: isPinned,
+            onChange: () => toggleSidebarPinState(),
+            name: "pin",
+            inputProps: { "aria-label": "Pin Sidebar Switch" }
+          }
+        )
+      }
+    ) })
+  ] });
 };
 
 export { UserSettingsPinToggle };

package/dist/components/General/UserSettingsPinToggle.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsPinToggle.esm.js","sources":["../../../src/components/General/UserSettingsPinToggle.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { useSidebarPinState } from '@backstage/core-components';\n\n/** @public */\nexport const UserSettingsPinToggle = () => {\n  const { isPinned, toggleSidebarPinState } = useSidebarPinState();\n\n  return (\n    <ListItem>\n      <ListItemText\n        primary=\"Pin Sidebar\"\n        secondary=\"Prevent the sidebar from collapsing\"\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}\n        >\n          <Switch\n            color=\"primary\"\n            checked={isPinned}\n            onChange={() => toggleSidebarPinState()}\n            name=\"pin\"\n            inputProps={{ 'aria-label': 'Pin Sidebar Switch' }}\n          />\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,EAAE,QAAA,EAAU,qBAAsB,EAAA,GAAI,kBAAmB,EAAA;AAE/D,EAAA,2CACG,QACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,aAAA;AAAA,MACR,SAAU,EAAA;AAAA;AAAA,GACZ,sCACC,uBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,KAAK,EAAA,IAAA;AAAA,MACL,KAAO,EAAA,CAAA,EAAG,QAAW,GAAA,OAAA,GAAU,KAAK,CAAA,QAAA;AAAA,KAAA;AAAA,oBAEpC,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,OAAS,EAAA,QAAA;AAAA,QACT,QAAA,EAAU,MAAM,qBAAsB,EAAA;AAAA,QACtC,IAAK,EAAA,KAAA;AAAA,QACL,UAAA,EAAY,EAAE,YAAA,EAAc,oBAAqB;AAAA;AAAA;AACnD,GAEJ,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsPinToggle.esm.js","sources":["../../../src/components/General/UserSettingsPinToggle.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { useSidebarPinState } from '@backstage/core-components';\n\n/** @public */\nexport const UserSettingsPinToggle = () => {\n  const { isPinned, toggleSidebarPinState } = useSidebarPinState();\n\n  return (\n    <ListItem>\n      <ListItemText\n        primary=\"Pin Sidebar\"\n        secondary=\"Prevent the sidebar from collapsing\"\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}\n        >\n          <Switch\n            color=\"primary\"\n            checked={isPinned}\n            onChange={() => toggleSidebarPinState()}\n            name=\"pin\"\n            inputProps={{ 'aria-label': 'Pin Sidebar Switch' }}\n          />\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,EAAE,QAAA,EAAU,qBAAsB,EAAA,GAAI,kBAAmB,EAAA;AAE/D,EAAA,4BACG,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,aAAA;AAAA,QACR,SAAU,EAAA;AAAA;AAAA,KACZ;AAAA,wBACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,KAAK,EAAA,IAAA;AAAA,QACL,KAAO,EAAA,CAAA,EAAG,QAAW,GAAA,OAAA,GAAU,KAAK,CAAA,QAAA,CAAA;AAAA,QAEpC,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,SAAA;AAAA,YACN,OAAS,EAAA,QAAA;AAAA,YACT,QAAA,EAAU,MAAM,qBAAsB,EAAA;AAAA,YACtC,IAAK,EAAA,KAAA;AAAA,YACL,UAAA,EAAY,EAAE,YAAA,EAAc,oBAAqB;AAAA;AAAA;AACnD;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/General/UserSettingsProfileCard.esm.js

@@ -1,6 +1,6 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import React from 'react';
 import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar.esm.js';
 import { UserSettingsMenu } from './UserSettingsMenu.esm.js';
 import { useUserProfile } from '../useUserProfileInfo.esm.js';
@@ -8,7 +8,16 @@ import { InfoCard } from '@backstage/core-components';
 
 const UserSettingsProfileCard = () => {
   const { profile, displayName } = useUserProfile();
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: "Profile", variant: "gridItem" }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 6 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(UserSettingsSignInAvatar, { size: 96 })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: true, container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, container: true, direction: "column", spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", gutterBottom: true }, displayName), profile.email && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, profile.email))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(UserSettingsMenu, null)))));
+  return /* @__PURE__ */ jsx(InfoCard, { title: "Profile", variant: "gridItem", children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 6, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(UserSettingsSignInAvatar, { size: 96 }) }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, sm: true, container: true, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, container: true, direction: "column", spacing: 2, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: true, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: displayName }),
+        profile.email && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: profile.email })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(UserSettingsMenu, {}) })
+    ] })
+  ] }) });
 };
 
 export { UserSettingsProfileCard };

package/dist/components/General/UserSettingsProfileCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsProfileCard.esm.js","sources":["../../../src/components/General/UserSettingsProfileCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport React from 'react';\nimport { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';\nimport { UserSettingsMenu } from './UserSettingsMenu';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { InfoCard } from '@backstage/core-components';\n\n/** @public */\nexport const UserSettingsProfileCard = () => {\n  const { profile, displayName } = useUserProfile();\n\n  return (\n    <InfoCard title=\"Profile\" variant=\"gridItem\">\n      <Grid container spacing={6}>\n        <Grid item>\n          <UserSettingsSignInAvatar size={96} />\n        </Grid>\n        <Grid item xs={12} sm container>\n          <Grid item xs container direction=\"column\" spacing={2}>\n            <Grid item xs>\n              <Typography variant=\"subtitle1\" gutterBottom>\n                {displayName}\n              </Typography>\n              {profile.email && (\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  {profile.email}\n                </Typography>\n              )}\n            </Grid>\n          </Grid>\n          <Grid item>\n            <UserSettingsMenu />\n          </Grid>\n        </Grid>\n      </Grid>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,MAAM,EAAE,OAAA,EAAS,WAAY,EAAA,GAAI,cAAe,EAAA;AAEhD,EAAA,2CACG,QAAS,EAAA,EAAA,KAAA,EAAM,SAAU,EAAA,OAAA,EAAQ,8BAC/B,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAA,sCACP,wBAAyB,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA,CACtC,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAE,IAAC,EAAA,SAAA,EAAS,wBAC5B,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAE,MAAC,SAAS,EAAA,IAAA,EAAC,SAAU,EAAA,QAAA,EAAS,SAAS,CAClD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAE,EAAA,IAAA,EAAA,kBACV,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,WAAY,EAAA,YAAA,EAAY,QACzC,WACH,CAAA,EACC,QAAQ,KACP,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,eAAA,EAAA,EAC/B,OAAQ,CAAA,KACX,CAEJ,CACF,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,sBAAiB,CACpB,CACF,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsProfileCard.esm.js","sources":["../../../src/components/General/UserSettingsProfileCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';\nimport { UserSettingsMenu } from './UserSettingsMenu';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { InfoCard } from '@backstage/core-components';\n\n/** @public */\nexport const UserSettingsProfileCard = () => {\n  const { profile, displayName } = useUserProfile();\n\n  return (\n    <InfoCard title=\"Profile\" variant=\"gridItem\">\n      <Grid container spacing={6}>\n        <Grid item>\n          <UserSettingsSignInAvatar size={96} />\n        </Grid>\n        <Grid item xs={12} sm container>\n          <Grid item xs container direction=\"column\" spacing={2}>\n            <Grid item xs>\n              <Typography variant=\"subtitle1\" gutterBottom>\n                {displayName}\n              </Typography>\n              {profile.email && (\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  {profile.email}\n                </Typography>\n              )}\n            </Grid>\n          </Grid>\n          <Grid item>\n            <UserSettingsMenu />\n          </Grid>\n        </Grid>\n      </Grid>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,MAAM,EAAE,OAAA,EAAS,WAAY,EAAA,GAAI,cAAe,EAAA;AAEhD,EACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAM,SAAU,EAAA,OAAA,EAAQ,UAChC,EAAA,QAAA,kBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,OAAA,EAAS,CACvB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EACR,8BAAC,wBAAyB,EAAA,EAAA,IAAA,EAAM,IAAI,CACtC,EAAA,CAAA;AAAA,oBACA,IAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAE,IAAC,EAAA,SAAA,EAAS,IAC7B,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,EAAE,EAAA,IAAA,EAAC,WAAS,IAAC,EAAA,SAAA,EAAU,QAAS,EAAA,OAAA,EAAS,GAClD,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAE,IACX,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAY,EAAA,YAAA,EAAY,MACzC,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,QACC,OAAA,CAAQ,yBACN,GAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,OAAQ,EAAA,KAAA,EAAM,eAC/B,EAAA,QAAA,EAAA,OAAA,CAAQ,KACX,EAAA;AAAA,OAAA,EAEJ,CACF,EAAA,CAAA;AAAA,0BACC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAiB,CACpB,EAAA;AAAA,KACF,EAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/General/UserSettingsSignInAvatar.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
 import { useUserProfile } from '../useUserProfileInfo.esm.js';
@@ -17,7 +17,7 @@ const UserSettingsSignInAvatar = (props) => {
   const { iconSize } = sidebarConfig;
   const classes = useStyles(size ? { size } : { size: iconSize });
   const { profile } = useUserProfile();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Avatar,
     {
       src: profile.picture,

package/dist/components/General/UserSettingsSignInAvatar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsSignInAvatar.esm.js","sources":["../../../src/components/General/UserSettingsSignInAvatar.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Avatar from '@material-ui/core/Avatar';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { sidebarConfig } from '@backstage/core-components';\n\nconst useStyles = makeStyles<Theme, { size: number }>(theme => ({\n  avatar: {\n    width: ({ size }) => size,\n    height: ({ size }) => size,\n    fontSize: ({ size }) => size * 0.7,\n    border: `1px solid ${theme.palette.textSubtle}`,\n  },\n}));\n\n/** @public */\nexport const UserSettingsSignInAvatar = (props: { size?: number }) => {\n  const { size } = props;\n\n  const { iconSize } = sidebarConfig;\n  const classes = useStyles(size ? { size } : { size: iconSize });\n  const { profile } = useUserProfile();\n\n  return (\n    <Avatar\n      src={profile.picture}\n      className={classes.avatar}\n      alt=\"Profile picture\"\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,SAAA,GAAY,WAAoC,CAAU,KAAA,MAAA;AAAA,EAC9D,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA,IAAA;AAAA,IACrB,MAAQ,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA,IAAA;AAAA,IACtB,QAAU,EAAA,CAAC,EAAE,IAAA,OAAW,IAAO,GAAA,GAAA;AAAA,IAC/B,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,UAAU,CAAA;AAAA;AAEjD,CAAE,CAAA,CAAA;AAGW,MAAA,wBAAA,GAA2B,CAAC,KAA6B,KAAA;AACpE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAM,MAAA,EAAE,UAAa,GAAA,aAAA;AACrB,EAAM,MAAA,OAAA,GAAU,UAAU,IAAO,GAAA,EAAE,MAAS,GAAA,EAAE,IAAM,EAAA,QAAA,EAAU,CAAA;AAC9D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,cAAe,EAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAK,OAAQ,CAAA,OAAA;AAAA,MACb,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,GAAI,EAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsSignInAvatar.esm.js","sources":["../../../src/components/General/UserSettingsSignInAvatar.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Avatar from '@material-ui/core/Avatar';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { sidebarConfig } from '@backstage/core-components';\n\nconst useStyles = makeStyles<Theme, { size: number }>(theme => ({\n  avatar: {\n    width: ({ size }) => size,\n    height: ({ size }) => size,\n    fontSize: ({ size }) => size * 0.7,\n    border: `1px solid ${theme.palette.textSubtle}`,\n  },\n}));\n\n/** @public */\nexport const UserSettingsSignInAvatar = (props: { size?: number }) => {\n  const { size } = props;\n\n  const { iconSize } = sidebarConfig;\n  const classes = useStyles(size ? { size } : { size: iconSize });\n  const { profile } = useUserProfile();\n\n  return (\n    <Avatar\n      src={profile.picture}\n      className={classes.avatar}\n      alt=\"Profile picture\"\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqBA,MAAM,SAAA,GAAY,WAAoC,CAAU,KAAA,MAAA;AAAA,EAC9D,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA,IAAA;AAAA,IACrB,MAAQ,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA,IAAA;AAAA,IACtB,QAAU,EAAA,CAAC,EAAE,IAAA,OAAW,IAAO,GAAA,GAAA;AAAA,IAC/B,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,UAAU,CAAA;AAAA;AAEjD,CAAE,CAAA,CAAA;AAGW,MAAA,wBAAA,GAA2B,CAAC,KAA6B,KAAA;AACpE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAM,MAAA,EAAE,UAAa,GAAA,aAAA;AACrB,EAAM,MAAA,OAAA,GAAU,UAAU,IAAO,GAAA,EAAE,MAAS,GAAA,EAAE,IAAM,EAAA,QAAA,EAAU,CAAA;AAC9D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,cAAe,EAAA;AAEnC,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAK,OAAQ,CAAA,OAAA;AAAA,MACb,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,GAAI,EAAA;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/General/UserSettingsThemeToggle.esm.js

@@ -1,4 +1,5 @@
-import React, { cloneElement } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cloneElement } from 'react';
 import useObservable from 'react-use/esm/useObservable';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
 import ToggleButton from '@material-ui/lab/ToggleButton';
@@ -14,7 +15,7 @@ import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const ThemeIcon = ({ id, activeId, icon }) => icon ? cloneElement(icon, {
   color: activeId === id ? "primary" : void 0
-}) : /* @__PURE__ */ React.createElement(AutoIcon, { color: activeId === id ? "primary" : void 0 });
+}) : /* @__PURE__ */ jsx(AutoIcon, { color: activeId === id ? "primary" : void 0 });
 const useStyles = makeStyles((theme) => ({
   container: {
     display: "flex",
@@ -52,7 +53,7 @@ const TooltipToggleButton = ({
   title,
   value,
   ...props
-}) => /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title }, /* @__PURE__ */ React.createElement(ToggleButton, { value, ...props }, children));
+}) => /* @__PURE__ */ jsx(Tooltip, { placement: "top", arrow: true, title, children: /* @__PURE__ */ jsx(ToggleButton, { value, ...props, children }) });
 const UserSettingsThemeToggle = () => {
   const classes = useStyles();
   const appThemeApi = useApi(appThemeApiRef);
@@ -69,56 +70,68 @@ const UserSettingsThemeToggle = () => {
       appThemeApi.setActiveThemeId(void 0);
     }
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     ListItem,
     {
       className: classes.list,
-      classes: { container: classes.container }
-    },
-    /* @__PURE__ */ React.createElement(
-      ListItemText,
-      {
-        className: classes.listItemText,
-        primary: t("themeToggle.title"),
-        secondary: t("themeToggle.description")
-      }
-    ),
-    /* @__PURE__ */ React.createElement(ListItemSecondaryAction, { className: classes.listItemSecondaryAction }, /* @__PURE__ */ React.createElement(
-      ToggleButtonGroup,
-      {
-        exclusive: true,
-        size: "small",
-        value: activeThemeId ?? "auto",
-        onChange: handleSetTheme
-      },
-      themeIds.map((theme) => {
-        const themeId = theme.id;
-        const themeIcon = theme.icon;
-        const themeTitle = theme.title || (themeId === "light" || themeId === "dark" ? t(`themeToggle.names.${themeId}`) : themeId);
-        return /* @__PURE__ */ React.createElement(
-          TooltipToggleButton,
+      classes: { container: classes.container },
+      children: [
+        /* @__PURE__ */ jsx(
+          ListItemText,
           {
-            key: themeId,
-            title: t("themeToggle.select", { theme: themeTitle }),
-            value: themeId
-          },
-          /* @__PURE__ */ React.createElement(React.Fragment, null, themeTitle, "\xA0", /* @__PURE__ */ React.createElement(
-            ThemeIcon,
-            {
-              id: themeId,
-              icon: themeIcon,
-              activeId: activeThemeId
-            }
-          ))
-        );
-      }),
-      /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title: t("themeToggle.selectAuto") }, /* @__PURE__ */ React.createElement(ToggleButton, { value: "auto", selected: activeThemeId === void 0 }, t("themeToggle.names.auto"), "\xA0", /* @__PURE__ */ React.createElement(
-        AutoIcon,
-        {
-          color: activeThemeId === void 0 ? "primary" : void 0
-        }
-      )))
-    ))
+            className: classes.listItemText,
+            primary: t("themeToggle.title"),
+            secondary: t("themeToggle.description")
+          }
+        ),
+        /* @__PURE__ */ jsx(ListItemSecondaryAction, { className: classes.listItemSecondaryAction, children: /* @__PURE__ */ jsxs(
+          ToggleButtonGroup,
+          {
+            exclusive: true,
+            size: "small",
+            value: activeThemeId ?? "auto",
+            onChange: handleSetTheme,
+            children: [
+              themeIds.map((theme) => {
+                const themeId = theme.id;
+                const themeIcon = theme.icon;
+                const themeTitle = theme.title || (themeId === "light" || themeId === "dark" ? t(`themeToggle.names.${themeId}`) : themeId);
+                return /* @__PURE__ */ jsx(
+                  TooltipToggleButton,
+                  {
+                    title: t("themeToggle.select", { theme: themeTitle }),
+                    value: themeId,
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      themeTitle,
+                      "\xA0",
+                      /* @__PURE__ */ jsx(
+                        ThemeIcon,
+                        {
+                          id: themeId,
+                          icon: themeIcon,
+                          activeId: activeThemeId
+                        }
+                      )
+                    ] })
+                  },
+                  themeId
+                );
+              }),
+              /* @__PURE__ */ jsx(Tooltip, { placement: "top", arrow: true, title: t("themeToggle.selectAuto"), children: /* @__PURE__ */ jsxs(ToggleButton, { value: "auto", selected: activeThemeId === void 0, children: [
+                t("themeToggle.names.auto"),
+                "\xA0",
+                /* @__PURE__ */ jsx(
+                  AutoIcon,
+                  {
+                    color: activeThemeId === void 0 ? "primary" : void 0
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ) })
+      ]
+    }
   );
 };
 

package/dist/components/General/UserSettingsThemeToggle.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsThemeToggle.esm.js","sources":["../../../src/components/General/UserSettingsThemeToggle.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { cloneElement } from 'react';\nimport useObservable from 'react-use/esm/useObservable';\nimport AutoIcon from '@material-ui/icons/BrightnessAuto';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { appThemeApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { userSettingsTranslationRef } from '../../translation';\n\ntype ThemeIconProps = {\n  id: string;\n  activeId: string | undefined;\n  icon: JSX.Element | undefined;\n};\n\nconst ThemeIcon = ({ id, activeId, icon }: ThemeIconProps) =>\n  icon ? (\n    cloneElement(icon, {\n      color: activeId === id ? 'primary' : undefined,\n    })\n  ) : (\n    <AutoIcon color={activeId === id ? 'primary' : undefined} />\n  );\n\ntype TooltipToggleButtonProps = {\n  children: JSX.Element;\n  title: string;\n  value: string;\n};\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    paddingBottom: 8,\n    paddingRight: 16,\n  },\n  list: {\n    width: 'initial',\n    [theme.breakpoints.down('xs')]: {\n      width: '100%',\n      padding: `0 0 12px`,\n    },\n  },\n  listItemText: {\n    paddingRight: 0,\n    paddingLeft: 0,\n  },\n  listItemSecondaryAction: {\n    position: 'relative',\n    transform: 'unset',\n    top: 'auto',\n    right: 'auto',\n    paddingLeft: 16,\n    [theme.breakpoints.down('xs')]: {\n      paddingLeft: 0,\n    },\n  },\n}));\n\n// ToggleButtonGroup uses React.children.map instead of context\n// so wrapping with Tooltip breaks ToggleButton functionality.\nconst TooltipToggleButton = ({\n  children,\n  title,\n  value,\n  ...props\n}: TooltipToggleButtonProps) => (\n  <Tooltip placement=\"top\" arrow title={title}>\n    <ToggleButton value={value} {...props}>\n      {children}\n    </ToggleButton>\n  </Tooltip>\n);\n\n/** @public */\nexport const UserSettingsThemeToggle = () => {\n  const classes = useStyles();\n  const appThemeApi = useApi(appThemeApiRef);\n  const activeThemeId = useObservable(\n    appThemeApi.activeThemeId$(),\n    appThemeApi.getActiveThemeId(),\n  );\n\n  const themeIds = appThemeApi.getInstalledThemes();\n\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  const handleSetTheme = (\n    _event: React.MouseEvent<HTMLElement>,\n    newThemeId: string | undefined,\n  ) => {\n    if (themeIds.some(it => it.id === newThemeId)) {\n      appThemeApi.setActiveThemeId(newThemeId);\n    } else {\n      appThemeApi.setActiveThemeId(undefined);\n    }\n  };\n\n  return (\n    <ListItem\n      className={classes.list}\n      classes={{ container: classes.container }}\n    >\n      <ListItemText\n        className={classes.listItemText}\n        primary={t('themeToggle.title')}\n        secondary={t('themeToggle.description')}\n      />\n      <ListItemSecondaryAction className={classes.listItemSecondaryAction}>\n        <ToggleButtonGroup\n          exclusive\n          size=\"small\"\n          value={activeThemeId ?? 'auto'}\n          onChange={handleSetTheme}\n        >\n          {themeIds.map(theme => {\n            const themeId = theme.id;\n            const themeIcon = theme.icon;\n            const themeTitle =\n              theme.title ||\n              (themeId === 'light' || themeId === 'dark'\n                ? t(`themeToggle.names.${themeId}`)\n                : themeId);\n            return (\n              <TooltipToggleButton\n                key={themeId}\n                title={t('themeToggle.select', { theme: themeTitle })}\n                value={themeId}\n              >\n                <>\n                  {themeTitle}&nbsp;\n                  <ThemeIcon\n                    id={themeId}\n                    icon={themeIcon}\n                    activeId={activeThemeId}\n                  />\n                </>\n              </TooltipToggleButton>\n            );\n          })}\n          <Tooltip placement=\"top\" arrow title={t('themeToggle.selectAuto')}>\n            <ToggleButton value=\"auto\" selected={activeThemeId === undefined}>\n              {t('themeToggle.names.auto')}&nbsp;\n              <AutoIcon\n                color={activeThemeId === undefined ? 'primary' : undefined}\n              />\n            </ToggleButton>\n          </Tooltip>\n        </ToggleButtonGroup>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserSettingsThemeToggle.esm.js","sources":["../../../src/components/General/UserSettingsThemeToggle.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { MouseEvent, cloneElement } from 'react';\nimport useObservable from 'react-use/esm/useObservable';\nimport AutoIcon from '@material-ui/icons/BrightnessAuto';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { appThemeApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { userSettingsTranslationRef } from '../../translation';\n\ntype ThemeIconProps = {\n  id: string;\n  activeId: string | undefined;\n  icon: JSX.Element | undefined;\n};\n\nconst ThemeIcon = ({ id, activeId, icon }: ThemeIconProps) =>\n  icon ? (\n    cloneElement(icon, {\n      color: activeId === id ? 'primary' : undefined,\n    })\n  ) : (\n    <AutoIcon color={activeId === id ? 'primary' : undefined} />\n  );\n\ntype TooltipToggleButtonProps = {\n  children: JSX.Element;\n  title: string;\n  value: string;\n};\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    paddingBottom: 8,\n    paddingRight: 16,\n  },\n  list: {\n    width: 'initial',\n    [theme.breakpoints.down('xs')]: {\n      width: '100%',\n      padding: `0 0 12px`,\n    },\n  },\n  listItemText: {\n    paddingRight: 0,\n    paddingLeft: 0,\n  },\n  listItemSecondaryAction: {\n    position: 'relative',\n    transform: 'unset',\n    top: 'auto',\n    right: 'auto',\n    paddingLeft: 16,\n    [theme.breakpoints.down('xs')]: {\n      paddingLeft: 0,\n    },\n  },\n}));\n\n// ToggleButtonGroup uses React.children.map instead of context\n// so wrapping with Tooltip breaks ToggleButton functionality.\nconst TooltipToggleButton = ({\n  children,\n  title,\n  value,\n  ...props\n}: TooltipToggleButtonProps) => (\n  <Tooltip placement=\"top\" arrow title={title}>\n    <ToggleButton value={value} {...props}>\n      {children}\n    </ToggleButton>\n  </Tooltip>\n);\n\n/** @public */\nexport const UserSettingsThemeToggle = () => {\n  const classes = useStyles();\n  const appThemeApi = useApi(appThemeApiRef);\n  const activeThemeId = useObservable(\n    appThemeApi.activeThemeId$(),\n    appThemeApi.getActiveThemeId(),\n  );\n\n  const themeIds = appThemeApi.getInstalledThemes();\n\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  const handleSetTheme = (\n    _event: MouseEvent<HTMLElement>,\n    newThemeId: string | undefined,\n  ) => {\n    if (themeIds.some(it => it.id === newThemeId)) {\n      appThemeApi.setActiveThemeId(newThemeId);\n    } else {\n      appThemeApi.setActiveThemeId(undefined);\n    }\n  };\n\n  return (\n    <ListItem\n      className={classes.list}\n      classes={{ container: classes.container }}\n    >\n      <ListItemText\n        className={classes.listItemText}\n        primary={t('themeToggle.title')}\n        secondary={t('themeToggle.description')}\n      />\n      <ListItemSecondaryAction className={classes.listItemSecondaryAction}>\n        <ToggleButtonGroup\n          exclusive\n          size=\"small\"\n          value={activeThemeId ?? 'auto'}\n          onChange={handleSetTheme}\n        >\n          {themeIds.map(theme => {\n            const themeId = theme.id;\n            const themeIcon = theme.icon;\n            const themeTitle =\n              theme.title ||\n              (themeId === 'light' || themeId === 'dark'\n                ? t(`themeToggle.names.${themeId}`)\n                : themeId);\n            return (\n              <TooltipToggleButton\n                key={themeId}\n                title={t('themeToggle.select', { theme: themeTitle })}\n                value={themeId}\n              >\n                <>\n                  {themeTitle}&nbsp;\n                  <ThemeIcon\n                    id={themeId}\n                    icon={themeIcon}\n                    activeId={activeThemeId}\n                  />\n                </>\n              </TooltipToggleButton>\n            );\n          })}\n          <Tooltip placement=\"top\" arrow title={t('themeToggle.selectAuto')}>\n            <ToggleButton value=\"auto\" selected={activeThemeId === undefined}>\n              {t('themeToggle.names.auto')}&nbsp;\n              <AutoIcon\n                color={activeThemeId === undefined ? 'primary' : undefined}\n              />\n            </ToggleButton>\n          </Tooltip>\n        </ToggleButtonGroup>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Settings.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { settingsRouteRef } from '../plugin.esm.js';
 import { SidebarItem } from '@backstage/core-components';
@@ -7,7 +7,7 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 const Settings = (props) => {
   const routePath = useRouteRef(settingsRouteRef);
   const Icon = props.icon ? props.icon : SettingsIcon;
-  return /* @__PURE__ */ React.createElement(SidebarItem, { text: "Settings", to: routePath(), icon: Icon });
+  return /* @__PURE__ */ jsx(SidebarItem, { text: "Settings", to: routePath(), icon: Icon });
 };
 
 export { Settings };

package/dist/components/Settings.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Settings.esm.js","sources":["../../src/components/Settings.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from '../plugin';\nimport { SidebarItem } from '@backstage/core-components';\nimport { useRouteRef, IconComponent } from '@backstage/core-plugin-api';\n\n/** @public */\nexport const Settings = (props: { icon?: IconComponent }) => {\n  const routePath = useRouteRef(settingsRouteRef);\n  const Icon = props.icon ? props.icon : SettingsIcon;\n  return <SidebarItem text=\"Settings\" to={routePath()} icon={Icon} />;\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,QAAA,GAAW,CAAC,KAAoC,KAAA;AAC3D,EAAM,MAAA,SAAA,GAAY,YAAY,gBAAgB,CAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,YAAA;AACvC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,IAAK,EAAA,UAAA,EAAW,IAAI,SAAU,EAAA,EAAG,MAAM,IAAM,EAAA,CAAA;AACnE;;;;"}
+{"version":3,"file":"Settings.esm.js","sources":["../../src/components/Settings.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from '../plugin';\nimport { SidebarItem } from '@backstage/core-components';\nimport { useRouteRef, IconComponent } from '@backstage/core-plugin-api';\n\n/** @public */\nexport const Settings = (props: { icon?: IconComponent }) => {\n  const routePath = useRouteRef(settingsRouteRef);\n  const Icon = props.icon ? props.icon : SettingsIcon;\n  return <SidebarItem text=\"Settings\" to={routePath()} icon={Icon} />;\n};\n"],"names":[],"mappings":";;;;;;AAsBa,MAAA,QAAA,GAAW,CAAC,KAAoC,KAAA;AAC3D,EAAM,MAAA,SAAA,GAAY,YAAY,gBAAgB,CAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,YAAA;AACvC,EAAO,uBAAA,GAAA,CAAC,eAAY,IAAK,EAAA,UAAA,EAAW,IAAI,SAAU,EAAA,EAAG,MAAM,IAAM,EAAA,CAAA;AACnE;;;;"}

package/dist/components/SettingsLayout/SettingsLayout.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useSidebarPinState, Page, Header, RoutedTabs } from '@backstage/core-components';
 import { attachComponentData, useElementFilter } from '@backstage/core-plugin-api';
 
@@ -17,7 +17,10 @@ const SettingsLayout = (props) => {
       withStrictError: "Child of SettingsLayout must be an SettingsLayout.Route"
     }).getElements().map((child) => child.props)
   );
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, !isMobile && /* @__PURE__ */ React.createElement(Header, { title: title ?? "Settings" }), /* @__PURE__ */ React.createElement(RoutedTabs, { routes }));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
+    !isMobile && /* @__PURE__ */ jsx(Header, { title: title ?? "Settings" }),
+    /* @__PURE__ */ jsx(RoutedTabs, { routes })
+  ] });
 };
 attachComponentData(SettingsLayout, LAYOUT_DATA_KEY, true);
 SettingsLayout.Route = Route;

package/dist/components/SettingsLayout/SettingsLayout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsLayout.esm.js","sources":["../../../src/components/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { TabProps } from '@material-ui/core/Tab';\nimport {\n  Header,\n  Page,\n  RoutedTabs,\n  useSidebarPinState,\n} from '@backstage/core-components';\nimport {\n  attachComponentData,\n  useElementFilter,\n} from '@backstage/core-plugin-api';\n\n/** @public */\nexport type SettingsLayoutRouteProps = {\n  path: string;\n  title: string;\n  children: JSX.Element;\n  tabProps?: TabProps<React.ElementType, { component?: React.ElementType }>;\n};\n\nexport const LAYOUT_DATA_KEY = 'plugin.user-settings.settingsLayout';\nexport const LAYOUT_ROUTE_DATA_KEY = 'plugin.user-settings.settingsLayoutRoute';\n\nconst Route: (props: SettingsLayoutRouteProps) => null = () => null;\nattachComponentData(Route, LAYOUT_ROUTE_DATA_KEY, true);\n\n// This causes all mount points that are discovered within this route to use the path of the route itself\nattachComponentData(Route, 'core.gatherMountPoints', true);\n\n/** @public */\nexport type SettingsLayoutProps = {\n  title?: string;\n  subtitle?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * @public\n */\nexport const SettingsLayout = (props: SettingsLayoutProps) => {\n  const { title, children } = props;\n  const { isMobile } = useSidebarPinState();\n\n  const routes = useElementFilter(children, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_ROUTE_DATA_KEY,\n        withStrictError:\n          'Child of SettingsLayout must be an SettingsLayout.Route',\n      })\n      .getElements<SettingsLayoutRouteProps>()\n      .map(child => child.props),\n  );\n\n  return (\n    <Page themeId=\"home\">\n      {!isMobile && <Header title={title ?? 'Settings'} />}\n      <RoutedTabs routes={routes} />\n    </Page>\n  );\n};\n\nattachComponentData(SettingsLayout, LAYOUT_DATA_KEY, true);\n\nSettingsLayout.Route = Route;\n"],"names":[],"mappings":";;;;AAqCO,MAAM,eAAkB,GAAA;AACxB,MAAM,qBAAwB,GAAA;AAErC,MAAM,QAAmD,MAAM,IAAA;AAC/D,mBAAoB,CAAA,KAAA,EAAO,uBAAuB,IAAI,CAAA;AAGtD,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA;AAY5C,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,QAAA;AAAA,IAAU,CAAA,QAAA,KACxC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,qBAAA;AAAA,MACL,eACE,EAAA;AAAA,KACH,CACA,CAAA,WAAA,GACA,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK;AAAA,GAC7B;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,EACX,CAAC,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAO,SAAS,UAAY,EAAA,CAAA,kBACjD,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,QAAgB,CAC9B,CAAA;AAEJ;AAEA,mBAAoB,CAAA,cAAA,EAAgB,iBAAiB,IAAI,CAAA;AAEzD,cAAA,CAAe,KAAQ,GAAA,KAAA;;;;"}
+{"version":3,"file":"SettingsLayout.esm.js","sources":["../../../src/components/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ElementType, ReactNode } from 'react';\nimport { TabProps } from '@material-ui/core/Tab';\nimport {\n  Header,\n  Page,\n  RoutedTabs,\n  useSidebarPinState,\n} from '@backstage/core-components';\nimport {\n  attachComponentData,\n  useElementFilter,\n} from '@backstage/core-plugin-api';\n\n/** @public */\nexport type SettingsLayoutRouteProps = {\n  path: string;\n  title: string;\n  children: JSX.Element;\n  tabProps?: TabProps<ElementType, { component?: ElementType }>;\n};\n\nexport const LAYOUT_DATA_KEY = 'plugin.user-settings.settingsLayout';\nexport const LAYOUT_ROUTE_DATA_KEY = 'plugin.user-settings.settingsLayoutRoute';\n\nconst Route: (props: SettingsLayoutRouteProps) => null = () => null;\nattachComponentData(Route, LAYOUT_ROUTE_DATA_KEY, true);\n\n// This causes all mount points that are discovered within this route to use the path of the route itself\nattachComponentData(Route, 'core.gatherMountPoints', true);\n\n/** @public */\nexport type SettingsLayoutProps = {\n  title?: string;\n  subtitle?: string;\n  children?: ReactNode;\n};\n\n/**\n * @public\n */\nexport const SettingsLayout = (props: SettingsLayoutProps) => {\n  const { title, children } = props;\n  const { isMobile } = useSidebarPinState();\n\n  const routes = useElementFilter(children, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_ROUTE_DATA_KEY,\n        withStrictError:\n          'Child of SettingsLayout must be an SettingsLayout.Route',\n      })\n      .getElements<SettingsLayoutRouteProps>()\n      .map(child => child.props),\n  );\n\n  return (\n    <Page themeId=\"home\">\n      {!isMobile && <Header title={title ?? 'Settings'} />}\n      <RoutedTabs routes={routes} />\n    </Page>\n  );\n};\n\nattachComponentData(SettingsLayout, LAYOUT_DATA_KEY, true);\n\nSettingsLayout.Route = Route;\n"],"names":[],"mappings":";;;;AAqCO,MAAM,eAAkB,GAAA;AACxB,MAAM,qBAAwB,GAAA;AAErC,MAAM,QAAmD,MAAM,IAAA;AAC/D,mBAAoB,CAAA,KAAA,EAAO,uBAAuB,IAAI,CAAA;AAGtD,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA;AAY5C,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,QAAA;AAAA,IAAU,CAAA,QAAA,KACxC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,qBAAA;AAAA,MACL,eACE,EAAA;AAAA,KACH,CACA,CAAA,WAAA,GACA,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK;AAAA,GAC7B;AAEA,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACX,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,QAAY,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAO,SAAS,UAAY,EAAA,CAAA;AAAA,oBAClD,GAAA,CAAC,cAAW,MAAgB,EAAA;AAAA,GAC9B,EAAA,CAAA;AAEJ;AAEA,mBAAoB,CAAA,cAAA,EAAgB,iBAAiB,IAAI,CAAA;AAEzD,cAAA,CAAe,KAAQ,GAAA,KAAA;;;;"}

package/dist/components/SettingsPage/SettingsPage.esm.js

@@ -1,5 +1,5 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useOutlet } from 'react-router-dom';
-import React from 'react';
 import { DefaultSettingsPage } from '../DefaultSettingsPage/DefaultSettingsPage.esm.js';
 import { useElementFilter } from '@backstage/core-plugin-api';
 import { LAYOUT_DATA_KEY, LAYOUT_ROUTE_DATA_KEY } from '../SettingsLayout/SettingsLayout.esm.js';
@@ -19,7 +19,7 @@ const SettingsPage = (props) => {
       key: LAYOUT_ROUTE_DATA_KEY
     }).getElements()
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, layout.length !== 0 && layout || /* @__PURE__ */ React.createElement(DefaultSettingsPage, { tabs, providerSettings }));
+  return /* @__PURE__ */ jsx(Fragment, { children: layout.length !== 0 && layout || /* @__PURE__ */ jsx(DefaultSettingsPage, { tabs, providerSettings }) });
 };
 
 export { SettingsPage };

package/dist/components/SettingsPage/SettingsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.esm.js","sources":["../../../src/components/SettingsPage/SettingsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useOutlet } from 'react-router-dom';\nimport React from 'react';\nimport { DefaultSettingsPage } from '../DefaultSettingsPage';\nimport { useElementFilter } from '@backstage/core-plugin-api';\nimport {\n  SettingsLayoutProps,\n  SettingsLayoutRouteProps,\n} from '../SettingsLayout';\nimport {\n  LAYOUT_DATA_KEY,\n  LAYOUT_ROUTE_DATA_KEY,\n} from '../SettingsLayout/SettingsLayout';\n\n/** @public */\nexport const SettingsPage = (props: { providerSettings?: JSX.Element }) => {\n  const { providerSettings } = props;\n  const outlet = useOutlet();\n  const layout = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_DATA_KEY,\n      })\n      .getElements<SettingsLayoutProps>(),\n  );\n  const tabs = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_ROUTE_DATA_KEY,\n      })\n      .getElements<SettingsLayoutRouteProps>(),\n  );\n\n  return (\n    <>\n      {(layout.length !== 0 && layout) || (\n        <DefaultSettingsPage tabs={tabs} providerSettings={providerSettings} />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6Ba,MAAA,YAAA,GAAe,CAAC,KAA8C,KAAA;AACzE,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA;AAC7B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KACtC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA;AAAA,KACN,EACA,WAAiC;AAAA,GACtC;AACA,EAAA,MAAM,IAAO,GAAA,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KACpC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA;AAAA,KACN,EACA,WAAsC;AAAA,GAC3C;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACI,OAAO,MAAW,KAAA,CAAA,IAAK,0BACtB,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,IAAY,EAAA,gBAAA,EAAoC,CAEzE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SettingsPage.esm.js","sources":["../../../src/components/SettingsPage/SettingsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useOutlet } from 'react-router-dom';\nimport { DefaultSettingsPage } from '../DefaultSettingsPage';\nimport { useElementFilter } from '@backstage/core-plugin-api';\nimport {\n  SettingsLayoutProps,\n  SettingsLayoutRouteProps,\n} from '../SettingsLayout';\nimport {\n  LAYOUT_DATA_KEY,\n  LAYOUT_ROUTE_DATA_KEY,\n} from '../SettingsLayout/SettingsLayout';\n\n/** @public */\nexport const SettingsPage = (props: { providerSettings?: JSX.Element }) => {\n  const { providerSettings } = props;\n  const outlet = useOutlet();\n  const layout = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_DATA_KEY,\n      })\n      .getElements<SettingsLayoutProps>(),\n  );\n  const tabs = useElementFilter(outlet, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_ROUTE_DATA_KEY,\n      })\n      .getElements<SettingsLayoutRouteProps>(),\n  );\n\n  return (\n    <>\n      {(layout.length !== 0 && layout) || (\n        <DefaultSettingsPage tabs={tabs} providerSettings={providerSettings} />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA4Ba,MAAA,YAAA,GAAe,CAAC,KAA8C,KAAA;AACzE,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA;AAC7B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KACtC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA;AAAA,KACN,EACA,WAAiC;AAAA,GACtC;AACA,EAAA,MAAM,IAAO,GAAA,gBAAA;AAAA,IAAiB,MAAA;AAAA,IAAQ,CAAA,QAAA,KACpC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA;AAAA,KACN,EACA,WAAsC;AAAA,GAC3C;AAEA,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACI,iBAAO,MAAW,KAAA,CAAA,IAAK,0BACtB,GAAA,CAAA,mBAAA,EAAA,EAAoB,IAAY,EAAA,gBAAA,EAAoC,CAEzE,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/UserSettingsTab/UserSettingsTab.esm.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { attachComponentData } from '@backstage/core-plugin-api';
 import { LAYOUT_ROUTE_DATA_KEY, SettingsLayout } from '../SettingsLayout/SettingsLayout.esm.js';
 
 const USER_SETTINGS_TAB_KEY = LAYOUT_ROUTE_DATA_KEY;
-const UserSettingsTab = (props) => /* @__PURE__ */ React.createElement(SettingsLayout.Route, { path: props.path, title: props.title }, /* @__PURE__ */ React.createElement(React.Fragment, null, "props.children"));
+const UserSettingsTab = (props) => /* @__PURE__ */ jsx(SettingsLayout.Route, { path: props.path, title: props.title, children: /* @__PURE__ */ jsx(Fragment, { children: "props.children" }) });
 attachComponentData(UserSettingsTab, USER_SETTINGS_TAB_KEY, "UserSettingsTab");
 
 export { USER_SETTINGS_TAB_KEY, UserSettingsTab };

package/dist/components/UserSettingsTab/UserSettingsTab.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsTab.esm.js","sources":["../../../src/components/UserSettingsTab/UserSettingsTab.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { PropsWithChildren } from 'react';\nimport { attachComponentData } from '@backstage/core-plugin-api';\nimport {\n  LAYOUT_ROUTE_DATA_KEY,\n  SettingsLayout,\n} from '../SettingsLayout/SettingsLayout';\n\n/** @public @deprecated Use SettingsLayout.Route approach instead */\nexport const USER_SETTINGS_TAB_KEY = LAYOUT_ROUTE_DATA_KEY;\n\n/** @public @deprecated Use SettingsLayoutRouteProps instead */\nexport type UserSettingsTabProps = PropsWithChildren<{\n  /**\n   * The path to the tab in the settings route\n   * @example `/settings/advanced`\n   */\n  path: string;\n  /** The title of the tab. It will also reflect in the document title when the tab is active */\n  title: string;\n}>;\n\n/**\n * Renders a tab inside the settings page\n * @param props - Component props\n * @public\n * @deprecated Use SettingsLayout.Route instead\n */\nexport const UserSettingsTab = (props: UserSettingsTabProps) => (\n  <SettingsLayout.Route path={props.path} title={props.title}>\n    <>props.children</>\n  </SettingsLayout.Route>\n);\n\nattachComponentData(UserSettingsTab, USER_SETTINGS_TAB_KEY, 'UserSettingsTab');\n"],"names":[],"mappings":";;;;AAuBO,MAAM,qBAAwB,GAAA;AAmB9B,MAAM,eAAkB,GAAA,CAAC,KAC9B,qBAAA,KAAA,CAAA,aAAA,CAAC,eAAe,KAAf,EAAA,EAAqB,IAAM,EAAA,KAAA,CAAM,MAAM,KAAO,EAAA,KAAA,CAAM,KACnD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAE,gBAAc,CAClB;AAGF,mBAAoB,CAAA,eAAA,EAAiB,uBAAuB,iBAAiB,CAAA;;;;"}
+{"version":3,"file":"UserSettingsTab.esm.js","sources":["../../../src/components/UserSettingsTab/UserSettingsTab.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { PropsWithChildren } from 'react';\nimport { attachComponentData } from '@backstage/core-plugin-api';\nimport {\n  LAYOUT_ROUTE_DATA_KEY,\n  SettingsLayout,\n} from '../SettingsLayout/SettingsLayout';\n\n/** @public @deprecated Use SettingsLayout.Route approach instead */\nexport const USER_SETTINGS_TAB_KEY = LAYOUT_ROUTE_DATA_KEY;\n\n/** @public @deprecated Use SettingsLayoutRouteProps instead */\nexport type UserSettingsTabProps = PropsWithChildren<{\n  /**\n   * The path to the tab in the settings route\n   * @example `/settings/advanced`\n   */\n  path: string;\n  /** The title of the tab. It will also reflect in the document title when the tab is active */\n  title: string;\n}>;\n\n/**\n * Renders a tab inside the settings page\n * @param props - Component props\n * @public\n * @deprecated Use SettingsLayout.Route instead\n */\nexport const UserSettingsTab = (props: UserSettingsTabProps) => (\n  <SettingsLayout.Route path={props.path} title={props.title}>\n    <>props.children</>\n  </SettingsLayout.Route>\n);\n\nattachComponentData(UserSettingsTab, USER_SETTINGS_TAB_KEY, 'UserSettingsTab');\n"],"names":[],"mappings":";;;;AAuBO,MAAM,qBAAwB,GAAA;AAmB9B,MAAM,eAAkB,GAAA,CAAC,KAC9B,qBAAA,GAAA,CAAC,eAAe,KAAf,EAAA,EAAqB,IAAM,EAAA,KAAA,CAAM,MAAM,KAAO,EAAA,KAAA,CAAM,KACnD,EAAA,QAAA,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAE,4BAAc,CAClB,EAAA;AAGF,mBAAoB,CAAA,eAAA,EAAiB,uBAAuB,iBAAiB,CAAA;;;;"}