@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.10.6 → 1.11.0

package/dist/components/OnboardingSection/OnboardingCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingCard.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 type { FC } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\n\nimport Box from '@mui/material/Box';\nimport CardContent from '@mui/material/CardContent';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\ninterface OnboardingCardProps {\n  title: string;\n  description: string;\n  buttonText: string;\n  buttonLink: string;\n  target?: string;\n  ariaLabel?: string;\n  endIcon: React.ReactNode;\n}\n\nconst OnboardingCard: FC<OnboardingCardProps> = ({\n  title,\n  description,\n  buttonText,\n  buttonLink,\n  target,\n  ariaLabel,\n  endIcon,\n}) => {\n  return (\n    <Box>\n      <CardContent sx={{ backgroundColor: 'transparent' }}>\n        <Typography\n          sx={{\n            fontSize: '1.75rem',\n            fontWeight: 500,\n            m: 0,\n          }}\n        >\n          {title}\n        </Typography>\n        <Typography\n          sx={{\n            fontSize: '1rem',\n            fontWeight: 500,\n            p: '16px',\n            pt: '8px',\n            pl: '0px',\n            display: '-webkit-box',\n            webkitBoxOrient: 'vertical',\n            maxWidth: '240px',\n            webkitLineClamp: 2,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {description}\n        </Typography>\n        <Button\n          component={RouterLink}\n          variant=\"outlined\"\n          color=\"primary\"\n          to={buttonLink}\n          target={target}\n          aria-label={ariaLabel}\n          sx={{\n            padding: theme => theme.spacing(1, 1.5),\n            fontSize: '16px',\n            '& .v5-MuiButton-endIcon': {\n              marginRight: 0,\n            },\n          }}\n          endIcon={endIcon}\n        >\n          {buttonText}{' '}\n        </Button>\n      </CardContent>\n    </Box>\n  );\n};\n\nexport default OnboardingCard;\n"],"names":["RouterLink"],"mappings":";;;;;;;AAiCA,MAAM,iBAA0C,CAAC;AAAA,EAC/C,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA,CAAC,OACC,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,IAAI,EAAE,eAAA,EAAiB,eAClC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,SAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,MAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA,MAAA;AAAA,UACH,EAAI,EAAA,KAAA;AAAA,UACJ,EAAI,EAAA,KAAA;AAAA,UACJ,OAAS,EAAA,aAAA;AAAA,UACT,eAAiB,EAAA,UAAA;AAAA,UACjB,QAAU,EAAA,OAAA;AAAA,UACV,eAAiB,EAAA,CAAA;AAAA,UACjB,QAAU,EAAA,QAAA;AAAA,UACV,YAAc,EAAA;AAAA,SAChB;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAA,IAAA;AAAA,QACX,OAAQ,EAAA,UAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,EAAI,EAAA,UAAA;AAAA,QACJ,MAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACZ,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,GAAG,GAAG,CAAA;AAAA,UACtC,QAAU,EAAA,MAAA;AAAA,UACV,yBAA2B,EAAA;AAAA,YACzB,WAAa,EAAA;AAAA;AACf,SACF;AAAA,QACA,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,UAAY;AAAA;AAAA;AAAA;AACf,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OnboardingCard.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 type { FC } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\n\nimport Box from '@mui/material/Box';\nimport CardContent from '@mui/material/CardContent';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\ninterface OnboardingCardProps {\n  title: string;\n  description: string;\n  buttonText: string;\n  buttonLink: string;\n  target?: string;\n  ariaLabel?: string;\n  endIcon: React.ReactNode;\n}\n\nconst OnboardingCard: FC<OnboardingCardProps> = ({\n  title,\n  description,\n  buttonText,\n  buttonLink,\n  target,\n  ariaLabel,\n  endIcon,\n}) => {\n  return (\n    <Box>\n      <CardContent sx={{ backgroundColor: 'transparent' }}>\n        <Typography\n          variant=\"h3\"\n          sx={{\n            fontSize: '1.75rem',\n            fontWeight: 500,\n            m: 0,\n          }}\n        >\n          {title}\n        </Typography>\n        <Typography\n          sx={{\n            fontSize: '1rem',\n            fontWeight: 500,\n            p: '16px',\n            pt: '8px',\n            pl: '0px',\n            display: '-webkit-box',\n            webkitBoxOrient: 'vertical',\n            maxWidth: '240px',\n            webkitLineClamp: 2,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {description}\n        </Typography>\n        <Button\n          component={RouterLink}\n          variant=\"outlined\"\n          color=\"primary\"\n          to={buttonLink}\n          target={target}\n          aria-label={ariaLabel}\n          sx={{\n            width: 220,\n            minWidth: 220,\n            padding: theme => theme.spacing(1, 1.5),\n            fontSize: '16px',\n            '& .v5-MuiButton-endIcon': {\n              marginRight: 0,\n            },\n          }}\n          endIcon={endIcon}\n        >\n          {buttonText}{' '}\n        </Button>\n      </CardContent>\n    </Box>\n  );\n};\n\nexport default OnboardingCard;\n"],"names":["RouterLink"],"mappings":";;;;;;;AAiCA,MAAM,iBAA0C,CAAC;AAAA,EAC/C,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA,CAAC,OACC,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,IAAI,EAAE,eAAA,EAAiB,eAClC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,IAAA;AAAA,QACR,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,SAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,MAAA;AAAA,UACV,UAAY,EAAA,GAAA;AAAA,UACZ,CAAG,EAAA,MAAA;AAAA,UACH,EAAI,EAAA,KAAA;AAAA,UACJ,EAAI,EAAA,KAAA;AAAA,UACJ,OAAS,EAAA,aAAA;AAAA,UACT,eAAiB,EAAA,UAAA;AAAA,UACjB,QAAU,EAAA,OAAA;AAAA,UACV,eAAiB,EAAA,CAAA;AAAA,UACjB,QAAU,EAAA,QAAA;AAAA,UACV,YAAc,EAAA;AAAA,SAChB;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAA,IAAA;AAAA,QACX,OAAQ,EAAA,UAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,EAAI,EAAA,UAAA;AAAA,QACJ,MAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACZ,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,GAAA;AAAA,UACP,QAAU,EAAA,GAAA;AAAA,UACV,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,GAAG,GAAG,CAAA;AAAA,UACtC,QAAU,EAAA,MAAA;AAAA,UACV,yBAA2B,EAAA;AAAA,YACzB,WAAa,EAAA;AAAA;AACf,SACF;AAAA,QACA,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,UAAY;AAAA;AAAA;AAAA;AACf,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/OnboardingSection/OnboardingSection.esm.js

@@ -14,6 +14,7 @@ import HomePageIllustrationLight from '../../images/homepage-illustration-light.
 import { getLearningItems } from '../../utils/constants.esm.js';
 import useGreeting from '../../hooks/useGreeting.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { containerGridItemSx } from '../../utils/GridItem.esm.js';
 
 const OnboardingSection = () => {
   const [user, setUser] = useState();
@@ -53,17 +54,17 @@ const OnboardingSection = () => {
     }
     return name;
   };
-  const content = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid, { container: true, margin: "auto", children: [
+  const content = /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
     /* @__PURE__ */ jsx(
       Grid,
       {
         item: true,
-        xs: 12,
-        md: 6,
-        lg: 3,
-        display: "flex",
-        justifyContent: "left",
-        alignItems: "center",
+        sx: {
+          ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),
+          display: "flex",
+          justifyContent: "left",
+          alignItems: "center"
+        },
         children: /* @__PURE__ */ jsx(
           Box,
           {
@@ -71,7 +72,8 @@ const OnboardingSection = () => {
             src: isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight,
             alt: "",
             sx: {
-              width: "clamp(200px, 20vw, 264px)"
+              width: "clamp(200px, 20vw, 264px)",
+              height: "auto"
             }
           }
         )
@@ -81,12 +83,12 @@ const OnboardingSection = () => {
       Grid,
       {
         item: true,
-        xs: 12,
-        md: 6,
-        lg: 3,
-        display: "flex",
-        justifyContent: "left",
-        alignItems: "center",
+        sx: {
+          ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),
+          display: "flex",
+          justifyContent: "left",
+          alignItems: "center"
+        },
         children: /* @__PURE__ */ jsx(
           OnboardingCard,
           {
@@ -110,7 +112,9 @@ const OnboardingSection = () => {
       sx: {
         padding: "24px",
         border: (muiTheme) => `1px solid ${muiTheme.palette.grey[300]}`,
-        overflow: "auto"
+        containerType: "inline-size",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
         !profileLoading && /* @__PURE__ */ jsx(
@@ -121,12 +125,24 @@ const OnboardingSection = () => {
               display: "flex",
               alignItems: "center",
               fontWeight: "500",
-              fontSize: "1.5rem"
+              fontSize: "1.5rem",
+              flexShrink: 0
             },
             children: `${greeting}, ${profileDisplayName() || t("onboarding.guest")}!`
           }
         ),
-        content
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              mt: 1
+            },
+            children: content
+          }
+        )
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"OnboardingSection.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { useState, useEffect } from 'react';\n\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserEntity } from '@backstage/catalog-model';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\nimport { useTheme } from '@mui/material/styles';\n\nimport OnboardingCard from './OnboardingCard';\nimport HomePageIllustrationDark from '../../images/homepage-illustration-dark.svg';\nimport HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';\nimport { getLearningItems } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\nimport { LearningSectionItem } from '../../types';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport const OnboardingSection = () => {\n  const [user, setUser] = useState<string | null>();\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const greeting = useGreeting();\n  const { t } = useTranslation();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      if (!backstageIdentity?.userEntityRef) {\n        return;\n      }\n      try {\n        const userEntity = (await catalogApi.getEntityByRef(\n          backstageIdentity.userEntityRef,\n        )) as unknown as UserEntity;\n        setUser(\n          userEntity?.spec?.profile?.displayName ?? userEntity?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  const content = (\n    <Box>\n      <Grid container margin=\"auto\">\n        <Grid\n          item\n          xs={12}\n          md={6}\n          lg={3}\n          display=\"flex\"\n          justifyContent=\"left\"\n          alignItems=\"center\"\n        >\n          <Box\n            component=\"img\"\n            src={\n              isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight\n            }\n            alt=\"\"\n            sx={{\n              width: 'clamp(200px, 20vw, 264px)',\n            }}\n          />\n        </Grid>\n        {getLearningItems(t).map((item: LearningSectionItem) => (\n          <Grid\n            item\n            xs={12}\n            md={6}\n            lg={3}\n            key={item.title}\n            display=\"flex\"\n            justifyContent=\"left\"\n            alignItems=\"center\"\n          >\n            <OnboardingCard\n              title={item.title}\n              description={item.description}\n              buttonText={item.buttonText}\n              buttonLink={item.buttonLink}\n              target={item.target}\n              ariaLabel={item.ariaLabel}\n              endIcon={<item.endIcon />}\n            />\n          </Grid>\n        ))}\n      </Grid>\n    </Box>\n  );\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      {!profileLoading && (\n        <Typography\n          variant=\"h3\"\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            fontWeight: '500',\n            fontSize: '1.5rem',\n          }}\n        >\n          {`${greeting}, ${profileDisplayName() || t('onboarding.guest')}!`}\n        </Typography>\n      )}\n      {content}\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OnboardingSection.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { useState, useEffect } from 'react';\n\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserEntity } from '@backstage/catalog-model';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Card from '@mui/material/Card';\nimport { useTheme } from '@mui/material/styles';\n\nimport OnboardingCard from './OnboardingCard';\nimport HomePageIllustrationDark from '../../images/homepage-illustration-dark.svg';\nimport HomePageIllustrationLight from '../../images/homepage-illustration-light.svg';\nimport { getLearningItems } from '../../utils/constants';\nimport useGreeting from '../../hooks/useGreeting';\nimport { LearningSectionItem } from '../../types';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { containerGridItemSx } from '../../utils/GridItem';\n\nexport const OnboardingSection = () => {\n  const [user, setUser] = useState<string | null>();\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const greeting = useGreeting();\n  const { t } = useTranslation();\n  const {\n    displayName,\n    backstageIdentity,\n    loading: profileLoading,\n  } = useUserProfile();\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    const fetchUserEntity = async () => {\n      if (!backstageIdentity?.userEntityRef) {\n        return;\n      }\n      try {\n        const userEntity = (await catalogApi.getEntityByRef(\n          backstageIdentity.userEntityRef,\n        )) as unknown as UserEntity;\n        setUser(\n          userEntity?.spec?.profile?.displayName ?? userEntity?.metadata?.title,\n        );\n      } catch (_err) {\n        setUser(null);\n      }\n    };\n\n    fetchUserEntity();\n  }, [backstageIdentity, catalogApi]);\n\n  const profileDisplayName = () => {\n    const name = user ?? displayName;\n    const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n    if (regex.test(name)) {\n      return name\n        .charAt(name.indexOf('/') + 1)\n        .toLocaleUpperCase('en-US')\n        .concat(name.substring(name.indexOf('/') + 2));\n    }\n    return name;\n  };\n\n  const content = (\n    <Box sx={{ mt: 2 }}>\n      <Grid container spacing={2}>\n        <Grid\n          item\n          sx={{\n            ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),\n            display: 'flex',\n            justifyContent: 'left',\n            alignItems: 'center',\n          }}\n        >\n          <Box\n            component=\"img\"\n            src={\n              isDarkMode ? HomePageIllustrationDark : HomePageIllustrationLight\n            }\n            alt=\"\"\n            sx={{\n              width: 'clamp(200px, 20vw, 264px)',\n              height: 'auto',\n            }}\n          />\n        </Grid>\n        {getLearningItems(t).map((item: LearningSectionItem) => (\n          <Grid\n            item\n            key={item.title}\n            sx={{\n              ...containerGridItemSx({ xs: 12, sm: 6, md: 3 }),\n              display: 'flex',\n              justifyContent: 'left',\n              alignItems: 'center',\n            }}\n          >\n            <OnboardingCard\n              title={item.title}\n              description={item.description}\n              buttonText={item.buttonText}\n              buttonLink={item.buttonLink}\n              target={item.target}\n              ariaLabel={item.ariaLabel}\n              endIcon={<item.endIcon />}\n            />\n          </Grid>\n        ))}\n      </Grid>\n    </Box>\n  );\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        containerType: 'inline-size',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {!profileLoading && (\n        <Typography\n          variant=\"h3\"\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            fontWeight: '500',\n            fontSize: '1.5rem',\n            flexShrink: 0,\n          }}\n        >\n          {`${greeting}, ${profileDisplayName() || t('onboarding.guest')}!`}\n        </Typography>\n      )}\n      <Box\n        sx={{\n          flex: 1,\n          minHeight: 0,\n          overflowY: 'auto',\n          mt: 1,\n        }}\n      >\n        {content}\n      </Box>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TemplateSection/TemplateSection.esm.js

@@ -13,6 +13,7 @@ import { useEntities } from '../../hooks/useEntities.esm.js';
 import { ViewMoreLink } from './ViewMoreLink.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { Trans } from '../Trans.esm.js';
+import { containerGridItemSx } from '../../utils/GridItem.esm.js';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   textDecoration: "none",
@@ -58,53 +59,76 @@ const TemplateSection = () => {
     ) });
   } else {
     content = /* @__PURE__ */ jsx(Box, { sx: { padding: "8px 8px 8px 0" }, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", children: [
-      templates?.items.map((item) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: /* @__PURE__ */ jsx(
-        TemplateCard,
+      templates?.items.map((item) => /* @__PURE__ */ jsx(
+        Grid,
         {
-          link: `/create/templates/${item.metadata.namespace}/${item.metadata.name}`,
-          title: item.metadata.title,
-          description: item.metadata.description,
-          kind: item.kind,
-          type: item.spec?.type
-        }
-      ) }, item.title)),
-      templates?.items.length === 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(
-        Box,
+          item: true,
+          sx: containerGridItemSx({
+            xs: 12,
+            sm: 6,
+            md: 3
+          }),
+          children: /* @__PURE__ */ jsx(
+            TemplateCard,
+            {
+              link: `/create/templates/${item.metadata.namespace}/${item.metadata.name}`,
+              title: item.metadata.title,
+              description: item.metadata.description,
+              kind: item.kind,
+              type: item.spec?.type
+            }
+          )
+        },
+        item.title
+      )),
+      templates?.items.length === 0 && /* @__PURE__ */ jsx(
+        Grid,
         {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
-            borderRadius: 3,
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsxs(
-            CardContent,
+          item: true,
+          sx: containerGridItemSx({
+            xs: 12
+          }),
+          children: /* @__PURE__ */ jsx(
+            Box,
             {
               sx: {
-                margin: "1rem"
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minHeight: 250,
+                border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
+                borderRadius: 3,
+                overflow: "hidden"
               },
-              children: [
-                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("templates.empty") }),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    sx: {
-                      fontSize: "0.875rem",
-                      fontWeight: 400,
-                      mt: "20px",
-                      mb: "16px"
-                    },
-                    children: t("templates.emptyDescription")
-                  }
-                ),
-                /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("templates.register") })
-              ]
+              children: /* @__PURE__ */ jsxs(
+                CardContent,
+                {
+                  sx: {
+                    margin: "1rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("templates.empty") }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        sx: {
+                          fontSize: "0.875rem",
+                          fontWeight: 400,
+                          mt: "20px",
+                          mb: "16px"
+                        },
+                        children: t("templates.emptyDescription")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("templates.register") })
+                  ]
+                }
+              )
             }
           )
         }
-      ) })
+      )
     ] }) }) });
   }
   return /* @__PURE__ */ jsxs(
@@ -114,7 +138,9 @@ const TemplateSection = () => {
       sx: {
         padding: "24px",
         border: (muiTheme) => `1px solid ${muiTheme.palette.grey[300]}`,
-        overflow: "auto"
+        containerType: "inline-size",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -125,19 +151,33 @@ const TemplateSection = () => {
               display: "flex",
               alignItems: "center",
               fontWeight: "500",
-              fontSize: "1.5rem"
+              fontSize: "1.5rem",
+              flexShrink: 0
             },
             children: t("templates.title")
           }
         ),
-        content,
-        templates?.items && templates?.items.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: catalogTemplatesLink, underline: "always", children: /* @__PURE__ */ jsx(
-          Trans,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            message: "templates.viewAll",
-            params: { count: templates?.totalItems?.toString() || "" }
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              mt: 1
+            },
+            children: [
+              content,
+              templates?.items && templates?.items.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: catalogTemplatesLink, underline: "always", children: /* @__PURE__ */ jsx(
+                Trans,
+                {
+                  message: "templates.viewAll",
+                  params: { count: templates?.totalItems?.toString() || "" }
+                }
+              ) }) })
+            ]
           }
-        ) }) })
+        )
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateSection.esm.js","sources":["../../../src/components/TemplateSection/TemplateSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 type { ReactNode } from 'react';\n\nimport { Fragment } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport TemplateCard from './TemplateCard';\nimport { useEntities } from '../../hooks/useEntities';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { Trans } from '../Trans';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const TemplateSection = () => {\n  const { t } = useTranslation();\n  const {\n    data: templates,\n    error,\n    isLoading,\n  } = useEntities({ kind: 'Template' });\n\n  const params = new URLSearchParams({\n    'filters[kind]': 'template',\n    limit: '20',\n  });\n  const catalogTemplatesLink = `/catalog?${params.toString()}`;\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!templates) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('templates.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('templates.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {templates?.items.map((item: any) => (\n              <Grid item xs={12} md={6} lg={3} key={item.title}>\n                <TemplateCard\n                  link={`/create/templates/${item.metadata.namespace}/${item.metadata.name}`}\n                  title={item.metadata.title}\n                  description={item.metadata.description}\n                  kind={item.kind}\n                  type={item.spec?.type}\n                />\n              </Grid>\n            ))}\n            {templates?.items.length === 0 && (\n              <Grid item xs={12} md={12}>\n                <Box\n                  sx={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent\n                    sx={{\n                      margin: '1rem',\n                    }}\n                  >\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      {t('templates.empty')}\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      {t('templates.emptyDescription')}\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      {t('templates.register')}\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        overflow: 'auto',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n        }}\n      >\n        {t('templates.title')}\n      </Typography>\n      {content}\n      {templates?.items && templates?.items.length > 0 && (\n        <Box sx={{ pt: 2 }}>\n          <ViewMoreLink to={catalogTemplatesLink} underline=\"always\">\n            <Trans\n              message=\"templates.viewAll\"\n              params={{ count: templates?.totalItems?.toString() || '' }}\n            />\n          </ViewMoreLink>\n        </Box>\n      )}\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":"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"}
+{"version":3,"file":"TemplateSection.esm.js","sources":["../../../src/components/TemplateSection/TemplateSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 type { ReactNode } from 'react';\n\nimport { Fragment } from 'react';\n\nimport {\n  CodeSnippet,\n  WarningPanel,\n  Link as BackstageLink,\n} from '@backstage/core-components';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport TemplateCard from './TemplateCard';\nimport { useEntities } from '../../hooks/useEntities';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { Trans } from '../Trans';\nimport { containerGridItemSx } from '../../utils/GridItem';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: theme.spacing(1, 1.5),\n  fontSize: '16px',\n  display: 'inline-flex',\n  border: `1px solid ${theme.palette.primary.main}`,\n  borderRadius: 4,\n}));\n\nexport const TemplateSection = () => {\n  const { t } = useTranslation();\n  const {\n    data: templates,\n    error,\n    isLoading,\n  } = useEntities({ kind: 'Template' });\n\n  const params = new URLSearchParams({\n    'filters[kind]': 'template',\n    limit: '20',\n  });\n  const catalogTemplatesLink = `/catalog?${params.toString()}`;\n\n  let content: ReactNode;\n\n  if (isLoading) {\n    content = (\n      <Box\n        sx={{\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  } else if (!templates) {\n    content = (\n      <WarningPanel severity=\"error\" title={t('templates.fetchError')}>\n        <CodeSnippet\n          language=\"text\"\n          text={error?.toString() ?? t('templates.error')}\n        />\n      </WarningPanel>\n    );\n  } else {\n    content = (\n      <Box sx={{ padding: '8px 8px 8px 0' }}>\n        <Fragment>\n          <Grid container spacing={1} alignItems=\"stretch\">\n            {templates?.items.map((item: any) => (\n              <Grid\n                item\n                sx={containerGridItemSx({\n                  xs: 12,\n                  sm: 6,\n                  md: 3,\n                })}\n                key={item.title}\n              >\n                <TemplateCard\n                  link={`/create/templates/${item.metadata.namespace}/${item.metadata.name}`}\n                  title={item.metadata.title}\n                  description={item.metadata.description}\n                  kind={item.kind}\n                  type={item.spec?.type}\n                />\n              </Grid>\n            ))}\n            {templates?.items.length === 0 && (\n              <Grid\n                item\n                sx={containerGridItemSx({\n                  xs: 12,\n                })}\n              >\n                <Box\n                  sx={{\n                    height: '100%',\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    minHeight: 250,\n                    border: muiTheme =>\n                      `1px solid ${muiTheme.palette.grey[400]}`,\n                    borderRadius: 3,\n                    overflow: 'hidden',\n                  }}\n                >\n                  <CardContent\n                    sx={{\n                      margin: '1rem',\n                    }}\n                  >\n                    <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n                      {t('templates.empty')}\n                    </Typography>\n                    <Typography\n                      sx={{\n                        fontSize: '0.875rem',\n                        fontWeight: 400,\n                        mt: '20px',\n                        mb: '16px',\n                      }}\n                    >\n                      {t('templates.emptyDescription')}\n                    </Typography>\n                    <StyledLink to=\"/catalog-import\" underline=\"none\">\n                      {t('templates.register')}\n                    </StyledLink>\n                  </CardContent>\n                </Box>\n              </Grid>\n            )}\n          </Grid>\n        </Fragment>\n      </Box>\n    );\n  }\n\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        padding: '24px',\n        border: muiTheme => `1px solid ${muiTheme.palette.grey[300]}`,\n        containerType: 'inline-size',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontWeight: '500',\n          fontSize: '1.5rem',\n          flexShrink: 0,\n        }}\n      >\n        {t('templates.title')}\n      </Typography>\n      <Box\n        sx={{\n          flex: 1,\n          minHeight: 0,\n          overflowY: 'auto',\n          mt: 1,\n        }}\n      >\n        {content}\n        {templates?.items && templates?.items.length > 0 && (\n          <Box sx={{ pt: 2 }}>\n            <ViewMoreLink to={catalogTemplatesLink} underline=\"always\">\n              <Trans\n                message=\"templates.viewAll\"\n                params={{ count: templates?.totalItems?.toString() || '' }}\n              />\n            </ViewMoreLink>\n          </Box>\n        )}\n      </Box>\n    </Card>\n  );\n};\n"],"names":["BackstageLink"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,MAAM,aAAa,MAAO,CAAAA,IAAa,EAAE,CAAC,EAAE,OAAa,MAAA;AAAA,EACvD,cAAgB,EAAA,MAAA;AAAA,EAChB,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,GAAG,CAAA;AAAA,EAC7B,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,aAAA;AAAA,EACT,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAAA,EAC/C,YAAc,EAAA;AAChB,CAAE,CAAA,CAAA;AAEK,MAAM,kBAAkB,MAAM;AACnC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,SAAA;AAAA,IACN,KAAA;AAAA,IACA;AAAA,GACE,GAAA,WAAA,CAAY,EAAE,IAAA,EAAM,YAAY,CAAA;AAEpC,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,CAAA;AAAA,IACjC,eAAiB,EAAA,UAAA;AAAA,IACjB,KAAO,EAAA;AAAA,GACR,CAAA;AACD,EAAA,MAAM,oBAAuB,GAAA,CAAA,SAAA,EAAY,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA;AAE1D,EAAI,IAAA,OAAA;AAEJ,EAAA,IAAI,SAAW,EAAA;AACb,IACE,OAAA,mBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,MAAQ,EAAA,MAAA;AAAA,UACR,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA;AAAA,SAClB;AAAA,QAEA,8BAAC,gBAAiB,EAAA,EAAA;AAAA;AAAA,KACpB;AAAA,GAEJ,MAAA,IAAW,CAAC,SAAW,EAAA;AACrB,IAAA,OAAA,uBACG,YAAa,EAAA,EAAA,QAAA,EAAS,SAAQ,KAAO,EAAA,CAAA,CAAE,sBAAsB,CAC5D,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,MAAA;AAAA,QACT,IAAM,EAAA,KAAA,EAAO,QAAS,EAAA,IAAK,EAAE,iBAAiB;AAAA;AAAA,KAElD,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,uBACG,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,iBAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA;AAAA,MAAW,SAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IACrB,qBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,IAAI,EAAA,IAAA;AAAA,UACJ,IAAI,mBAAoB,CAAA;AAAA,YACtB,EAAI,EAAA,EAAA;AAAA,YACJ,EAAI,EAAA,CAAA;AAAA,YACJ,EAAI,EAAA;AAAA,WACL,CAAA;AAAA,UAGD,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,qBAAqB,IAAK,CAAA,QAAA,CAAS,SAAS,CAAI,CAAA,EAAA,IAAA,CAAK,SAAS,IAAI,CAAA,CAAA;AAAA,cACxE,KAAA,EAAO,KAAK,QAAS,CAAA,KAAA;AAAA,cACrB,WAAA,EAAa,KAAK,QAAS,CAAA,WAAA;AAAA,cAC3B,MAAM,IAAK,CAAA,IAAA;AAAA,cACX,IAAA,EAAM,KAAK,IAAM,EAAA;AAAA;AAAA;AACnB,SAAA;AAAA,QARK,IAAK,CAAA;AAAA,OAUb,CAAA;AAAA,MACA,SAAA,EAAW,KAAM,CAAA,MAAA,KAAW,CAC3B,oBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,IAAI,EAAA,IAAA;AAAA,UACJ,IAAI,mBAAoB,CAAA;AAAA,YACtB,EAAI,EAAA;AAAA,WACL,CAAA;AAAA,UAED,QAAA,kBAAA,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,EAAI,EAAA;AAAA,gBACF,MAAQ,EAAA,MAAA;AAAA,gBACR,OAAS,EAAA,MAAA;AAAA,gBACT,UAAY,EAAA,QAAA;AAAA,gBACZ,cAAgB,EAAA,QAAA;AAAA,gBAChB,SAAW,EAAA,GAAA;AAAA,gBACX,QAAQ,CACN,QAAA,KAAA,CAAA,UAAA,EAAa,SAAS,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,gBACzC,YAAc,EAAA,CAAA;AAAA,gBACd,QAAU,EAAA;AAAA,eACZ;AAAA,cAEA,QAAA,kBAAA,IAAA;AAAA,gBAAC,WAAA;AAAA,gBAAA;AAAA,kBACC,EAAI,EAAA;AAAA,oBACF,MAAQ,EAAA;AAAA,mBACV;AAAA,kBAEA,QAAA,EAAA;AAAA,oCAAC,GAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,QAAU,EAAA,UAAA,EAAY,YAAY,GAAI,EAAA,EACrD,QAAE,EAAA,CAAA,CAAA,iBAAiB,CACtB,EAAA,CAAA;AAAA,oCACA,GAAA;AAAA,sBAAC,UAAA;AAAA,sBAAA;AAAA,wBACC,EAAI,EAAA;AAAA,0BACF,QAAU,EAAA,UAAA;AAAA,0BACV,UAAY,EAAA,GAAA;AAAA,0BACZ,EAAI,EAAA,MAAA;AAAA,0BACJ,EAAI,EAAA;AAAA,yBACN;AAAA,wBAEC,YAAE,4BAA4B;AAAA;AAAA,qBACjC;AAAA,oCACA,GAAA,CAAC,cAAW,EAAG,EAAA,iBAAA,EAAkB,WAAU,MACxC,EAAA,QAAA,EAAA,CAAA,CAAE,oBAAoB,CACzB,EAAA;AAAA;AAAA;AAAA;AACF;AAAA;AACF;AAAA;AACF,KAAA,EAEJ,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,MAAA;AAAA,QACT,QAAQ,CAAY,QAAA,KAAA,CAAA,UAAA,EAAa,SAAS,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,QAC3D,aAAe,EAAA,aAAA;AAAA,QACf,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,IAAA;AAAA,YACR,EAAI,EAAA;AAAA,cACF,OAAS,EAAA,MAAA;AAAA,cACT,UAAY,EAAA,QAAA;AAAA,cACZ,UAAY,EAAA,KAAA;AAAA,cACZ,QAAU,EAAA,QAAA;AAAA,cACV,UAAY,EAAA;AAAA,aACd;AAAA,YAEC,YAAE,iBAAiB;AAAA;AAAA,SACtB;AAAA,wBACA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,IAAM,EAAA,CAAA;AAAA,cACN,SAAW,EAAA,CAAA;AAAA,cACX,SAAW,EAAA,MAAA;AAAA,cACX,EAAI,EAAA;AAAA,aACN;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,OAAA;AAAA,cACA,WAAW,KAAS,IAAA,SAAA,EAAW,MAAM,MAAS,GAAA,CAAA,wBAC5C,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,GACb,EAAA,QAAA,kBAAA,GAAA,CAAC,gBAAa,EAAI,EAAA,oBAAA,EAAsB,WAAU,QAChD,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,mBAAA;AAAA,kBACR,QAAQ,EAAE,KAAA,EAAO,WAAW,UAAY,EAAA,QAAA,MAAc,EAAG;AAAA;AAAA,iBAE7D,CACF,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/hooks/useContainerQuery.esm.js

@@ -0,0 +1,43 @@
+import { useState, useLayoutEffect } from 'react';
+
+const CONTAINER_BREAKPOINTS = {
+  xs: 0,
+  // <600
+  sm: 600,
+  // ≥600
+  md: 900,
+  // ≥900
+  lg: 1200,
+  // ≥1200
+  xl: 1536
+  // ≥1536
+};
+const resolveContainerSize = (width) => {
+  if (width >= CONTAINER_BREAKPOINTS.xl) return "xl";
+  if (width >= CONTAINER_BREAKPOINTS.lg) return "lg";
+  if (width >= CONTAINER_BREAKPOINTS.md) return "md";
+  if (width >= CONTAINER_BREAKPOINTS.sm) return "sm";
+  return "xs";
+};
+const useContainerQuery = (ref) => {
+  const [containerSize, setContainerSize] = useState("lg");
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return undefined;
+    const updateSize = (width) => {
+      const next = resolveContainerSize(width);
+      setContainerSize((prev) => prev === next ? prev : next);
+    };
+    updateSize(el.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      if (!entries.length) return;
+      updateSize(entries[0].contentRect.width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return containerSize;
+};
+
+export { CONTAINER_BREAKPOINTS, useContainerQuery };
+//# sourceMappingURL=useContainerQuery.esm.js.map

package/dist/hooks/useContainerQuery.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerQuery.esm.js","sources":["../../src/hooks/useContainerQuery.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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\n/*\n * A React hook that observes the width of a DOM element and\n * returns a responsive \"container size\" (`xs | sm | md | lg | xl`)\n * based on predefined breakpoints.\n *\n * Unlike window-based media queries, this hook is **container-based**:\n * the returned size depends on the element's own width, not the viewport.\n *\n * Internally, it:\n * - Reads the element's initial layout width on mount\n * - Uses ResizeObserver to track width changes\n * - Maps the width to MUI-like breakpoints\n * - Updates state only when the breakpoint actually changes\n * */\n\nimport { useLayoutEffect, useState, RefObject } from 'react';\n\n// Container Breakpoints (MUI-like, but container-based)\nexport type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport const CONTAINER_BREAKPOINTS = {\n  xs: 0, // <600\n  sm: 600, // ≥600\n  md: 900, // ≥900\n  lg: 1200, // ≥1200\n  xl: 1536, // ≥1536\n} as const;\n\n// Width → containerSize mapper\nconst resolveContainerSize = (width: number): ContainerSize => {\n  if (width >= CONTAINER_BREAKPOINTS.xl) return 'xl';\n  if (width >= CONTAINER_BREAKPOINTS.lg) return 'lg';\n  if (width >= CONTAINER_BREAKPOINTS.md) return 'md';\n  if (width >= CONTAINER_BREAKPOINTS.sm) return 'sm';\n  return 'xs';\n};\n\n// Hook: useContainerQuery\n\nexport const useContainerQuery = (\n  ref: RefObject<HTMLElement>,\n): ContainerSize => {\n  const [containerSize, setContainerSize] = useState<ContainerSize>('lg');\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return undefined;\n\n    const updateSize = (width: number) => {\n      const next = resolveContainerSize(width);\n      setContainerSize(prev => (prev === next ? prev : next));\n    };\n\n    // Initial read\n    updateSize(el.getBoundingClientRect().width);\n\n    const observer = new ResizeObserver(entries => {\n      if (!entries.length) return;\n      updateSize(entries[0].contentRect.width);\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return containerSize;\n};\n"],"names":[],"mappings":";;AAoCO,MAAM,qBAAwB,GAAA;AAAA,EACnC,EAAI,EAAA,CAAA;AAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA;AAAA,EACJ,EAAI,EAAA,IAAA;AAAA;AAAA,EACJ,EAAI,EAAA;AAAA;AACN;AAGA,MAAM,oBAAA,GAAuB,CAAC,KAAiC,KAAA;AAC7D,EAAI,IAAA,KAAA,IAAS,qBAAsB,CAAA,EAAA,EAAW,OAAA,IAAA;AAC9C,EAAI,IAAA,KAAA,IAAS,qBAAsB,CAAA,EAAA,EAAW,OAAA,IAAA;AAC9C,EAAI,IAAA,KAAA,IAAS,qBAAsB,CAAA,EAAA,EAAW,OAAA,IAAA;AAC9C,EAAI,IAAA,KAAA,IAAS,qBAAsB,CAAA,EAAA,EAAW,OAAA,IAAA;AAC9C,EAAO,OAAA,IAAA;AACT,CAAA;AAIa,MAAA,iBAAA,GAAoB,CAC/B,GACkB,KAAA;AAClB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAwB,IAAI,CAAA;AAEtE,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,KAAK,GAAI,CAAA,OAAA;AACf,IAAI,IAAA,CAAC,IAAW,OAAA,SAAA;AAEhB,IAAM,MAAA,UAAA,GAAa,CAAC,KAAkB,KAAA;AACpC,MAAM,MAAA,IAAA,GAAO,qBAAqB,KAAK,CAAA;AACvC,MAAA,gBAAA,CAAiB,CAAS,IAAA,KAAA,IAAA,KAAS,IAAO,GAAA,IAAA,GAAO,IAAK,CAAA;AAAA,KACxD;AAGA,IAAW,UAAA,CAAA,EAAA,CAAG,qBAAsB,EAAA,CAAE,KAAK,CAAA;AAE3C,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,CAAW,OAAA,KAAA;AAC7C,MAAI,IAAA,CAAC,QAAQ,MAAQ,EAAA;AACrB,MAAA,UAAA,CAAW,OAAQ,CAAA,CAAC,CAAE,CAAA,WAAA,CAAY,KAAK,CAAA;AAAA,KACxC,CAAA;AAED,IAAA,QAAA,CAAS,QAAQ,EAAE,CAAA;AACnB,IAAO,OAAA,MAAM,SAAS,UAAW,EAAA;AAAA,GACnC,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAO,OAAA,aAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import { ClockConfig, StarredEntitiesProps, VisitedByTypeProps, FeaturedDocsCard
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { ComponentType } from 'react';
-import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/alpha';
 import { CardLayout, CardSettings } from '@backstage/plugin-home-react';
 
 /**
@@ -242,59 +241,4 @@ declare const EntitySection: () => react_jsx_runtime.JSX.Element;
  */
 declare const TemplateSection: () => react_jsx_runtime.JSX.Element;
 
-/**
- * Reference translation for Homepage.
- * Defines all the translation keys used in the plugin.
- * @public
- */
-declare const homepageTranslationRef: _backstage_core_plugin_api_alpha.TranslationRef<"plugin.homepage", {
-    readonly "header.local": string;
-    readonly "header.welcome": string;
-    readonly "header.welcomePersonalized": string;
-    readonly "search.placeholder": string;
-    readonly "homePage.empty": string;
-    readonly "quickAccess.title": string;
-    readonly "quickAccess.error": string;
-    readonly "quickAccess.fetchError": string;
-    readonly "featuredDocs.learnMore": string;
-    readonly "templates.title": string;
-    readonly "templates.error": string;
-    readonly "templates.empty": string;
-    readonly "templates.fetchError": string;
-    readonly "templates.emptyDescription": string;
-    readonly "templates.register": string;
-    readonly "templates.viewAll": string;
-    readonly "onboarding.greeting.goodMorning": string;
-    readonly "onboarding.greeting.goodAfternoon": string;
-    readonly "onboarding.greeting.goodEvening": string;
-    readonly "onboarding.guest": string;
-    readonly "onboarding.getStarted.title": string;
-    readonly "onboarding.getStarted.description": string;
-    readonly "onboarding.getStarted.buttonText": string;
-    readonly "onboarding.getStarted.ariaLabel": string;
-    readonly "onboarding.explore.title": string;
-    readonly "onboarding.explore.description": string;
-    readonly "onboarding.explore.buttonText": string;
-    readonly "onboarding.explore.ariaLabel": string;
-    readonly "onboarding.learn.title": string;
-    readonly "onboarding.learn.description": string;
-    readonly "onboarding.learn.buttonText": string;
-    readonly "onboarding.learn.ariaLabel": string;
-    readonly "entities.title": string;
-    readonly "entities.description": string;
-    readonly "entities.error": string;
-    readonly "entities.close": string;
-    readonly "entities.empty": string;
-    readonly "entities.fetchError": string;
-    readonly "entities.emptyDescription": string;
-    readonly "entities.register": string;
-    readonly "entities.viewAll": string;
-}>;
-
-/**
- * The translation resource for the Homepage plugin.
- * @public
- */
-declare const homepageTranslations: _backstage_core_plugin_api_alpha.TranslationResource<"plugin.homepage">;
-
-export { Breakpoint, CatalogStarredEntitiesCard, DynamicCustomizableHomePage, type DynamicCustomizableHomePageProps, DynamicHomePage, type DynamicHomePageProps, EntitySection, FeaturedDocsCard, Headline, type HeadlineProps, type HomePageCardMountPoint, type HomePageCardMountPointConfig, JokeCard, type Layout, type LocalClockProps, Markdown, MarkdownCard, type MarkdownCardProps, type MarkdownProps, OnboardingSection, Placeholder, type PlaceholderProps, QuickAccessCard, type QuickAccessCardProps, RecentlyVisitedCard, SearchBar, type SearchBarProps, TemplateSection, TopVisitedCard, VisitListener, WorldClock, type WorldClockProps, dynamicHomePagePlugin, homepageTranslationRef, homepageTranslations };
+export { Breakpoint, CatalogStarredEntitiesCard, DynamicCustomizableHomePage, type DynamicCustomizableHomePageProps, DynamicHomePage, type DynamicHomePageProps, EntitySection, FeaturedDocsCard, Headline, type HeadlineProps, type HomePageCardMountPoint, type HomePageCardMountPointConfig, JokeCard, type Layout, type LocalClockProps, Markdown, MarkdownCard, type MarkdownCardProps, type MarkdownProps, OnboardingSection, Placeholder, type PlaceholderProps, QuickAccessCard, type QuickAccessCardProps, RecentlyVisitedCard, SearchBar, type SearchBarProps, TemplateSection, TopVisitedCard, VisitListener, WorldClock, type WorldClockProps, dynamicHomePagePlugin };

package/dist/index.esm.js

@@ -1,4 +1,2 @@
 export { CatalogStarredEntitiesCard, DynamicCustomizableHomePage, DynamicHomePage, EntitySection, FeaturedDocsCard, Headline, JokeCard, Markdown, MarkdownCard, OnboardingSection, Placeholder, QuickAccessCard, RecentlyVisitedCard, SearchBar, TemplateSection, TopVisitedCard, VisitListener, WorldClock, dynamicHomePagePlugin } from './plugin.esm.js';
-export { homepageTranslations } from './translations/index.esm.js';
-export { homepageTranslationRef } from './translations/ref.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/translations/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../src/translations/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { createTranslationResource } from '@backstage/core-plugin-api/alpha';\n\nimport { homepageTranslationRef } from './ref';\n\n/**\n * The translation resource for the Homepage plugin.\n * @public\n */\nexport const homepageTranslations = createTranslationResource({\n  ref: homepageTranslationRef,\n  translations: {\n    de: () => import('./de'),\n    es: () => import('./es'),\n    fr: () => import('./fr'),\n    it: () => import('./it'),\n    ja: () => import('./ja'),\n  },\n});\n\nexport { homepageTranslationRef };\n"],"names":[],"mappings":";;;AAwBO,MAAM,uBAAuB,yBAA0B,CAAA;AAAA,EAC5D,GAAK,EAAA,sBAAA;AAAA,EACL,YAAc,EAAA;AAAA,IACZ,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM;AAAA;AAE3B,CAAC;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../src/translations/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { createTranslationResource } from '@backstage/core-plugin-api/alpha';\n\nimport { homepageTranslationRef } from './ref';\n\n/**\n * Translation resource for the Dynamic Home Page plugin (en, de, es, fr, it, ja).\n *\n * @public\n */\nexport const homepageTranslations = createTranslationResource({\n  ref: homepageTranslationRef,\n  translations: {\n    de: () => import('./de'),\n    es: () => import('./es'),\n    fr: () => import('./fr'),\n    it: () => import('./it'),\n    ja: () => import('./ja'),\n  },\n});\n\nexport { homepageTranslationRef };\n"],"names":[],"mappings":";;;AAyBO,MAAM,uBAAuB,yBAA0B,CAAA;AAAA,EAC5D,GAAK,EAAA,sBAAA;AAAA,EACL,YAAc,EAAA;AAAA,IACZ,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM;AAAA;AAE3B,CAAC;;;;"}

package/dist/translations/ref.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref.esm.js","sources":["../../src/translations/ref.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * Messages object containing all English translations.\n * This is our single source of truth for translations.\n * @public\n */\nexport const homepageMessages = {\n  header: {\n    welcome: 'Welcome back!',\n    welcomePersonalized: 'Welcome back, {{name}}!',\n    local: 'Local',\n  },\n  homePage: {\n    empty: 'No home page cards (mount points) configured or found.',\n  },\n  search: {\n    placeholder: 'Search',\n  },\n  quickAccess: {\n    title: 'Quick Access',\n    fetchError: 'Could not fetch data.',\n    error: 'Unknown error',\n  },\n  featuredDocs: {\n    learnMore: ' Learn more',\n  },\n  templates: {\n    title: 'Explore Templates',\n    fetchError: 'Could not fetch data.',\n    error: 'Unknown error',\n    empty: 'No templates added yet',\n    emptyDescription:\n      'Once templates are added, this space will showcase relevant content tailored to your experience.',\n    register: 'Register a template',\n    viewAll: 'View all {{count}} templates',\n  },\n  onboarding: {\n    greeting: {\n      goodMorning: 'Good morning',\n      goodAfternoon: 'Good afternoon',\n      goodEvening: 'Good evening',\n    },\n    guest: 'Guest',\n    getStarted: {\n      title: 'Get started',\n      description: 'Learn about Red Hat Developer Hub.',\n      buttonText: 'Read documentation',\n      ariaLabel: 'Read documentation (opens in a new tab)',\n    },\n    explore: {\n      title: 'Explore',\n      description: 'Explore components, APIs and templates.',\n      buttonText: 'Go to Catalog',\n      ariaLabel: 'Go to Catalog',\n    },\n    learn: {\n      title: 'Learn',\n      description: 'Explore and develop new skills.',\n      buttonText: 'Go to Learning Paths',\n      ariaLabel: 'Go to Learning Paths',\n    },\n  },\n  entities: {\n    title: 'Explore Your Software Catalog',\n    fetchError: 'Could not fetch data.',\n    error: 'Unknown error',\n    description:\n      'Browse the Systems, Components, Resources, and APIs that are available in your organization.',\n    close: 'close',\n    empty: 'No software catalog added yet',\n    emptyDescription:\n      'Once software catalogs are added, this space will showcase relevant content tailored to your experience.',\n    register: 'Register a component',\n    viewAll: 'View all {{count}} catalog entities',\n  },\n};\n\n/**\n * Reference translation for Homepage.\n * Defines all the translation keys used in the plugin.\n * @public\n */\nexport const homepageTranslationRef = createTranslationRef({\n  id: 'plugin.homepage',\n  messages: homepageMessages,\n});\n"],"names":[],"mappings":";;AAuBO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,eAAA;AAAA,IACT,mBAAqB,EAAA,yBAAA;AAAA,IACrB,KAAO,EAAA;AAAA,GACT;AAAA,EACA,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,WAAa,EAAA;AAAA,GACf;AAAA,EACA,WAAa,EAAA;AAAA,IACX,KAAO,EAAA,cAAA;AAAA,IACP,UAAY,EAAA,uBAAA;AAAA,IACZ,KAAO,EAAA;AAAA,GACT;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,SAAW,EAAA;AAAA,GACb;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAO,EAAA,mBAAA;AAAA,IACP,UAAY,EAAA,uBAAA;AAAA,IACZ,KAAO,EAAA,eAAA;AAAA,IACP,KAAO,EAAA,wBAAA;AAAA,IACP,gBACE,EAAA,kGAAA;AAAA,IACF,QAAU,EAAA,qBAAA;AAAA,IACV,OAAS,EAAA;AAAA,GACX;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA;AAAA,MACR,WAAa,EAAA,cAAA;AAAA,MACb,aAAe,EAAA,gBAAA;AAAA,MACf,WAAa,EAAA;AAAA,KACf;AAAA,IACA,KAAO,EAAA,OAAA;AAAA,IACP,UAAY,EAAA;AAAA,MACV,KAAO,EAAA,aAAA;AAAA,MACP,WAAa,EAAA,oCAAA;AAAA,MACb,UAAY,EAAA,oBAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,OAAS,EAAA;AAAA,MACP,KAAO,EAAA,SAAA;AAAA,MACP,WAAa,EAAA,yCAAA;AAAA,MACb,UAAY,EAAA,eAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,KAAO,EAAA;AAAA,MACL,KAAO,EAAA,OAAA;AAAA,MACP,WAAa,EAAA,iCAAA;AAAA,MACb,UAAY,EAAA,sBAAA;AAAA,MACZ,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,KAAO,EAAA,+BAAA;AAAA,IACP,UAAY,EAAA,uBAAA;AAAA,IACZ,KAAO,EAAA,eAAA;AAAA,IACP,WACE,EAAA,8FAAA;AAAA,IACF,KAAO,EAAA,OAAA;AAAA,IACP,KAAO,EAAA,+BAAA;AAAA,IACP,gBACE,EAAA,0GAAA;AAAA,IACF,QAAU,EAAA,sBAAA;AAAA,IACV,OAAS,EAAA;AAAA;AAEb;AAOO,MAAM,yBAAyB,oBAAqB,CAAA;AAAA,EACzD,EAAI,EAAA,iBAAA;AAAA,EACJ,QAAU,EAAA;AACZ,CAAC;;;;"}
+{"version":3,"file":"ref.esm.js","sources":["../../src/translations/ref.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * Messages object containing all English translations.\n * This is our single source of truth for translations.\n *\n * @public\n */\nexport const homepageMessages = {\n  header: {\n    welcome: 'Welcome back!',\n    welcomePersonalized: 'Welcome back, {{name}}!',\n    local: 'Local',\n  },\n  homePage: {\n    empty: 'No home page cards (mount points) configured or found.',\n  },\n  search: {\n    placeholder: 'Search',\n  },\n  quickAccess: {\n    title: 'Quick Access',\n    fetchError: 'Could not fetch data.',\n    error: 'Unknown error',\n  },\n  featuredDocs: {\n    learnMore: ' Learn more',\n  },\n  templates: {\n    title: 'Explore Templates',\n    fetchError: 'Could not fetch data.',\n    error: 'Unknown error',\n    empty: 'No templates added yet',\n    emptyDescription:\n      'Once templates are added, this space will showcase relevant content tailored to your experience.',\n    register: 'Register a template',\n    viewAll: 'View all {{count}} templates',\n  },\n  onboarding: {\n    greeting: {\n      goodMorning: 'Good morning',\n      goodAfternoon: 'Good afternoon',\n      goodEvening: 'Good evening',\n    },\n    guest: 'Guest',\n    getStarted: {\n      title: 'Get started',\n      description: 'Learn about Red Hat Developer Hub.',\n      buttonText: 'Read documentation',\n      ariaLabel: 'Read documentation (opens in a new tab)',\n    },\n    explore: {\n      title: 'Explore',\n      description: 'Explore components, APIs and templates.',\n      buttonText: 'Go to Catalog',\n      ariaLabel: 'Go to Catalog',\n    },\n    learn: {\n      title: 'Learn',\n      description: 'Explore and develop new skills.',\n      buttonText: 'Go to Learning Paths',\n      ariaLabel: 'Go to Learning Paths',\n    },\n  },\n  entities: {\n    title: 'Explore Your Software Catalog',\n    fetchError: 'Could not fetch data.',\n    error: 'Unknown error',\n    description:\n      'Browse the Systems, Components, Resources, and APIs that are available in your organization.',\n    close: 'close',\n    empty: 'No software catalog added yet',\n    emptyDescription:\n      'Once software catalogs are added, this space will showcase relevant content tailored to your experience.',\n    register: 'Register a component',\n    viewAll: 'View all {{count}} catalog entities',\n  },\n};\n\n/**\n * Translation ref for the Dynamic Home Page plugin.\n * Defines all translation keys used in the plugin.\n *\n * @public\n */\nexport const homepageTranslationRef = createTranslationRef({\n  id: 'plugin.homepage',\n  messages: homepageMessages,\n});\n"],"names":[],"mappings":";;AAwBO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,eAAA;AAAA,IACT,mBAAqB,EAAA,yBAAA;AAAA,IACrB,KAAO,EAAA;AAAA,GACT;AAAA,EACA,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,WAAa,EAAA;AAAA,GACf;AAAA,EACA,WAAa,EAAA;AAAA,IACX,KAAO,EAAA,cAAA;AAAA,IACP,UAAY,EAAA,uBAAA;AAAA,IACZ,KAAO,EAAA;AAAA,GACT;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,SAAW,EAAA;AAAA,GACb;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAO,EAAA,mBAAA;AAAA,IACP,UAAY,EAAA,uBAAA;AAAA,IACZ,KAAO,EAAA,eAAA;AAAA,IACP,KAAO,EAAA,wBAAA;AAAA,IACP,gBACE,EAAA,kGAAA;AAAA,IACF,QAAU,EAAA,qBAAA;AAAA,IACV,OAAS,EAAA;AAAA,GACX;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA;AAAA,MACR,WAAa,EAAA,cAAA;AAAA,MACb,aAAe,EAAA,gBAAA;AAAA,MACf,WAAa,EAAA;AAAA,KACf;AAAA,IACA,KAAO,EAAA,OAAA;AAAA,IACP,UAAY,EAAA;AAAA,MACV,KAAO,EAAA,aAAA;AAAA,MACP,WAAa,EAAA,oCAAA;AAAA,MACb,UAAY,EAAA,oBAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,OAAS,EAAA;AAAA,MACP,KAAO,EAAA,SAAA;AAAA,MACP,WAAa,EAAA,yCAAA;AAAA,MACb,UAAY,EAAA,eAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,KAAO,EAAA;AAAA,MACL,KAAO,EAAA,OAAA;AAAA,MACP,WAAa,EAAA,iCAAA;AAAA,MACb,UAAY,EAAA,sBAAA;AAAA,MACZ,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,KAAO,EAAA,+BAAA;AAAA,IACP,UAAY,EAAA,uBAAA;AAAA,IACZ,KAAO,EAAA,eAAA;AAAA,IACP,WACE,EAAA,8FAAA;AAAA,IACF,KAAO,EAAA,OAAA;AAAA,IACP,KAAO,EAAA,+BAAA;AAAA,IACP,gBACE,EAAA,0GAAA;AAAA,IACF,QAAU,EAAA,sBAAA;AAAA,IACV,OAAS,EAAA;AAAA;AAEb;AAQO,MAAM,yBAAyB,oBAAqB,CAAA;AAAA,EACzD,EAAI,EAAA,iBAAA;AAAA,EACJ,QAAU,EAAA;AACZ,CAAC;;;;"}

package/dist/utils/GridItem.esm.js

@@ -0,0 +1,31 @@
+const col = (n) => {
+  if (!n) return undefined;
+  return `${n / 12 * 100}%`;
+};
+const resolveCol = (current, fallback) => {
+  return col(current ?? fallback);
+};
+const containerGridItemSx = ({
+  xs = 12,
+  sm,
+  md,
+  lg,
+  xl
+}) => ({
+  width: col(xs),
+  "@container (min-width: 600px)": {
+    width: resolveCol(sm, xs)
+  },
+  "@container (min-width: 900px)": {
+    width: resolveCol(md, sm ?? xs)
+  },
+  "@container (min-width: 1200px)": {
+    width: resolveCol(lg, md ?? sm ?? xs)
+  },
+  "@container (min-width: 1536px)": {
+    width: resolveCol(xl, lg ?? md ?? sm ?? xs)
+  }
+});
+
+export { containerGridItemSx };
+//# sourceMappingURL=GridItem.esm.js.map

package/dist/utils/GridItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.esm.js","sources":["../../src/utils/GridItem.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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\n/*\n* Generates an MUI `sx` object for a Grid **item** that supports\n* container-based responsive columns (`xs | sm | md | lg | xl`).\n*\n* This utility mimics MUI Grid's breakpoint inheritance behavior,\n* but uses **CSS Container Queries** instead of viewport media queries.\n*\n* How it works:\n* - Accepts column counts (1–12) per breakpoint\n* - Converts columns into percentage widths\n* - Falls back to the nearest smaller breakpoint if a value is missing\n* - Applies widths using `@container (min-width: ...)` rules\n*\n* Breakpoint mapping:\n* - xs  → base width\n* - sm  → ≥600px\n* - md  → ≥900px\n* - lg  → ≥1200px\n* - xl  → ≥1536px\n*\n* Example:\n* containerGridItemSx({ xs: 12, sm: 6, md: 4 })\n\n*/\n\n// Breakpoint props (xs / sm / md / lg / xl)\nexport type ContainerGridCols = {\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\n// Convert column count to percentage width\nconst col = (n?: number): string | undefined => {\n  if (!n) return undefined;\n  return `${(n / 12) * 100}%`;\n};\n\n// Resolve breakpoint value with fallback (MUI-style inheritance)\nconst resolveCol = (\n  current?: number,\n  fallback?: number,\n): string | undefined => {\n  return col(current ?? fallback);\n};\n\n// SX generator for MUI Grid Item using container queries\nexport const containerGridItemSx = ({\n  xs = 12,\n  sm,\n  md,\n  lg,\n  xl,\n}: ContainerGridCols) => ({\n  width: col(xs),\n\n  '@container (min-width: 600px)': {\n    width: resolveCol(sm, xs),\n  },\n\n  '@container (min-width: 900px)': {\n    width: resolveCol(md, sm ?? xs),\n  },\n\n  '@container (min-width: 1200px)': {\n    width: resolveCol(lg, md ?? sm ?? xs),\n  },\n\n  '@container (min-width: 1536px)': {\n    width: resolveCol(xl, lg ?? md ?? sm ?? xs),\n  },\n});\n"],"names":[],"mappings":"AAmDA,MAAM,GAAA,GAAM,CAAC,CAAmC,KAAA;AAC9C,EAAI,IAAA,CAAC,GAAU,OAAA,SAAA;AACf,EAAO,OAAA,CAAA,EAAI,CAAI,GAAA,EAAA,GAAM,GAAG,CAAA,CAAA,CAAA;AAC1B,CAAA;AAGA,MAAM,UAAA,GAAa,CACjB,OAAA,EACA,QACuB,KAAA;AACvB,EAAO,OAAA,GAAA,CAAI,WAAW,QAAQ,CAAA;AAChC,CAAA;AAGO,MAAM,sBAAsB,CAAC;AAAA,EAClC,EAAK,GAAA,EAAA;AAAA,EACL,EAAA;AAAA,EACA,EAAA;AAAA,EACA,EAAA;AAAA,EACA;AACF,CAA0B,MAAA;AAAA,EACxB,KAAA,EAAO,IAAI,EAAE,CAAA;AAAA,EAEb,+BAAiC,EAAA;AAAA,IAC/B,KAAA,EAAO,UAAW,CAAA,EAAA,EAAI,EAAE;AAAA,GAC1B;AAAA,EAEA,+BAAiC,EAAA;AAAA,IAC/B,KAAO,EAAA,UAAA,CAAW,EAAI,EAAA,EAAA,IAAM,EAAE;AAAA,GAChC;AAAA,EAEA,gCAAkC,EAAA;AAAA,IAChC,KAAO,EAAA,UAAA,CAAW,EAAI,EAAA,EAAA,IAAM,MAAM,EAAE;AAAA,GACtC;AAAA,EAEA,gCAAkC,EAAA;AAAA,IAChC,OAAO,UAAW,CAAA,EAAA,EAAI,EAAM,IAAA,EAAA,IAAM,MAAM,EAAE;AAAA;AAE9C,CAAA;;;;"}