@backstage/core-components 0.18.10-next.0 → 0.18.10-next.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @backstage/core-components
 
+## 0.18.10-next.1
+
+### Patch Changes
+
+- 021b368: Added stable DOM markers to the legacy Page and Header so adjacent layout components can coordinate spacing without relying on generated class names.
+
 ## 0.18.10-next.0
 
 ### Patch Changes

package/dist/layout/Header/Header.esm.js

@@ -155,29 +155,37 @@ function Header(props) {
   const defaultTitle = `${documentTitle} | ${appTitle}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Helmet, { titleTemplate, defaultTitle }),
-    /* @__PURE__ */ jsxs("header", { style, className: classes.header, children: [
-      /* @__PURE__ */ jsxs(Box, { className: classes.leftItemsBox, children: [
-        /* @__PURE__ */ jsx(
-          TypeFragment,
-          {
-            classes,
-            type,
-            typeLink,
-            pageTitle
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TitleFragment,
-          {
-            classes,
-            pageTitle,
-            tooltip
-          }
-        ),
-        /* @__PURE__ */ jsx(SubtitleFragment, { classes, subtitle })
-      ] }),
-      /* @__PURE__ */ jsx(Grid, { container: true, className: classes.rightItemsBox, spacing: 4, children })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        style,
+        className: classes.header,
+        "data-backstage-core-header": "",
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: classes.leftItemsBox, children: [
+            /* @__PURE__ */ jsx(
+              TypeFragment,
+              {
+                classes,
+                type,
+                typeLink,
+                pageTitle
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TitleFragment,
+              {
+                classes,
+                pageTitle,
+                tooltip
+              }
+            ),
+            /* @__PURE__ */ jsx(SubtitleFragment, { classes, subtitle })
+          ] }),
+          /* @__PURE__ */ jsx(Grid, { container: true, className: classes.rightItemsBox, spacing: 4, children })
+        ]
+      }
+    )
   ] });
 }
 

package/dist/layout/Header/Header.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.esm.js","sources":["../../../src/layout/Header/Header.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 { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport { CSSProperties, PropsWithChildren, ReactNode } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { Link } from '../../components/Link';\nimport { Breadcrumbs } from '../Breadcrumbs';\nimport { useContent } from '../Sidebar';\n\n/** @public */\nexport type HeaderClassKey =\n  | 'header'\n  | 'leftItemsBox'\n  | 'rightItemsBox'\n  | 'title'\n  | 'subtitle'\n  | 'type'\n  | 'breadcrumb'\n  | 'breadcrumbType'\n  | 'breadcrumbTitle';\n\nconst useStyles = makeStyles(\n  theme => ({\n    header: {\n      gridArea: 'pageHeader',\n      padding: theme.spacing(3),\n      width: '100%',\n      boxShadow: theme.shadows[4],\n      position: 'relative',\n      zIndex: 100,\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      backgroundImage: theme.page.backgroundImage,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      [theme.breakpoints.down('sm')]: {\n        flexWrap: 'wrap',\n      },\n    },\n    leftItemsBox: {\n      maxWidth: '100%',\n      flexGrow: 1,\n    },\n    rightItemsBox: {\n      width: 'auto',\n      alignItems: 'center',\n    },\n    title: {\n      color: theme.page.fontColor,\n      wordBreak: 'break-word',\n      fontSize: theme.typography.h3.fontSize,\n      marginBottom: 0,\n    },\n    subtitle: {\n      color: theme.page.fontColor,\n      opacity: 0.8,\n      display: 'inline-block', // prevents margin collapse of adjacent siblings\n      marginTop: theme.spacing(1),\n      maxWidth: '75ch',\n    },\n    type: {\n      textTransform: 'uppercase',\n      fontSize: 11,\n      opacity: 0.8,\n      marginBottom: theme.spacing(1),\n      color: theme.page.fontColor,\n    },\n    breadcrumb: {\n      color: theme.page.fontColor,\n    },\n    breadcrumbType: {\n      fontSize: 'inherit',\n      opacity: 0.7,\n      marginRight: -theme.spacing(0.3),\n      marginBottom: theme.spacing(0.3),\n    },\n    breadcrumbTitle: {\n      fontSize: 'inherit',\n      marginLeft: -theme.spacing(0.3),\n      marginBottom: theme.spacing(0.3),\n    },\n  }),\n  { name: 'BackstageHeader' },\n);\n\ntype HeaderStyles = ReturnType<typeof useStyles>;\n\ntype Props = {\n  component?: ReactNode;\n  pageTitleOverride?: string;\n  style?: CSSProperties;\n  subtitle?: ReactNode;\n  title: ReactNode;\n  tooltip?: string;\n  type?: string;\n  typeLink?: string;\n};\n\ntype TypeFragmentProps = {\n  classes: HeaderStyles;\n  pageTitle: string | ReactNode;\n  type?: Props['type'];\n  typeLink?: Props['typeLink'];\n};\n\ntype TitleFragmentProps = {\n  classes: HeaderStyles;\n  pageTitle: string | ReactNode;\n  tooltip?: Props['tooltip'];\n};\n\ntype SubtitleFragmentProps = {\n  classes: HeaderStyles;\n  subtitle?: Props['subtitle'];\n};\n\nconst TypeFragment = ({\n  type,\n  typeLink,\n  classes,\n  pageTitle,\n}: TypeFragmentProps) => {\n  if (!type) {\n    return null;\n  }\n\n  if (!typeLink) {\n    return <Typography className={classes.type}>{type}</Typography>;\n  }\n\n  return (\n    <Breadcrumbs className={classes.breadcrumb}>\n      <Link to={typeLink}>{type}</Link>\n      <Typography>{pageTitle}</Typography>\n    </Breadcrumbs>\n  );\n};\n\nconst TitleFragment = ({ pageTitle, classes, tooltip }: TitleFragmentProps) => {\n  const { contentRef } = useContent();\n\n  const FinalTitle = (\n    <Typography\n      ref={contentRef}\n      tabIndex={-1}\n      className={classes.title}\n      variant=\"h1\"\n    >\n      {pageTitle}\n    </Typography>\n  );\n\n  if (!tooltip) {\n    return FinalTitle;\n  }\n\n  return (\n    <Tooltip title={tooltip} placement=\"top-start\">\n      {FinalTitle}\n    </Tooltip>\n  );\n};\n\nconst SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {\n  if (!subtitle) {\n    return null;\n  }\n\n  if (typeof subtitle !== 'string') {\n    return <>{subtitle}</>;\n  }\n\n  return (\n    <Typography\n      className={classes.subtitle}\n      variant=\"subtitle2\"\n      component=\"span\"\n    >\n      {subtitle}\n    </Typography>\n  );\n};\n/**\n * Backstage main header with abstract color background in multiple variants\n *\n * @public\n *\n */\nexport function Header(props: PropsWithChildren<Props>) {\n  const {\n    children,\n    pageTitleOverride,\n    style,\n    subtitle,\n    title,\n    tooltip,\n    type,\n    typeLink,\n  } = props;\n  const classes = useStyles();\n  const configApi = useApi(configApiRef);\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n  const documentTitle = pageTitleOverride || title;\n  const pageTitle = title || pageTitleOverride;\n  const titleTemplate = `${documentTitle} | %s | ${appTitle}`;\n  const defaultTitle = `${documentTitle} | ${appTitle}`;\n\n  return (\n    <>\n      <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle} />\n      <header style={style} className={classes.header}>\n        <Box className={classes.leftItemsBox}>\n          <TypeFragment\n            classes={classes}\n            type={type}\n            typeLink={typeLink}\n            pageTitle={pageTitle}\n          />\n          <TitleFragment\n            classes={classes}\n            pageTitle={pageTitle}\n            tooltip={tooltip}\n          />\n          <SubtitleFragment classes={classes} subtitle={subtitle} />\n        </Box>\n        <Grid container className={classes.rightItemsBox} spacing={4}>\n          {children}\n        </Grid>\n      </header>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Header.esm.js","sources":["../../../src/layout/Header/Header.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 { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport { CSSProperties, PropsWithChildren, ReactNode } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { Link } from '../../components/Link';\nimport { Breadcrumbs } from '../Breadcrumbs';\nimport { useContent } from '../Sidebar';\n\n/** @public */\nexport type HeaderClassKey =\n  | 'header'\n  | 'leftItemsBox'\n  | 'rightItemsBox'\n  | 'title'\n  | 'subtitle'\n  | 'type'\n  | 'breadcrumb'\n  | 'breadcrumbType'\n  | 'breadcrumbTitle';\n\nconst useStyles = makeStyles(\n  theme => ({\n    header: {\n      gridArea: 'pageHeader',\n      padding: theme.spacing(3),\n      width: '100%',\n      boxShadow: theme.shadows[4],\n      position: 'relative',\n      zIndex: 100,\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      backgroundImage: theme.page.backgroundImage,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      [theme.breakpoints.down('sm')]: {\n        flexWrap: 'wrap',\n      },\n    },\n    leftItemsBox: {\n      maxWidth: '100%',\n      flexGrow: 1,\n    },\n    rightItemsBox: {\n      width: 'auto',\n      alignItems: 'center',\n    },\n    title: {\n      color: theme.page.fontColor,\n      wordBreak: 'break-word',\n      fontSize: theme.typography.h3.fontSize,\n      marginBottom: 0,\n    },\n    subtitle: {\n      color: theme.page.fontColor,\n      opacity: 0.8,\n      display: 'inline-block', // prevents margin collapse of adjacent siblings\n      marginTop: theme.spacing(1),\n      maxWidth: '75ch',\n    },\n    type: {\n      textTransform: 'uppercase',\n      fontSize: 11,\n      opacity: 0.8,\n      marginBottom: theme.spacing(1),\n      color: theme.page.fontColor,\n    },\n    breadcrumb: {\n      color: theme.page.fontColor,\n    },\n    breadcrumbType: {\n      fontSize: 'inherit',\n      opacity: 0.7,\n      marginRight: -theme.spacing(0.3),\n      marginBottom: theme.spacing(0.3),\n    },\n    breadcrumbTitle: {\n      fontSize: 'inherit',\n      marginLeft: -theme.spacing(0.3),\n      marginBottom: theme.spacing(0.3),\n    },\n  }),\n  { name: 'BackstageHeader' },\n);\n\ntype HeaderStyles = ReturnType<typeof useStyles>;\n\ntype Props = {\n  component?: ReactNode;\n  pageTitleOverride?: string;\n  style?: CSSProperties;\n  subtitle?: ReactNode;\n  title: ReactNode;\n  tooltip?: string;\n  type?: string;\n  typeLink?: string;\n};\n\ntype TypeFragmentProps = {\n  classes: HeaderStyles;\n  pageTitle: string | ReactNode;\n  type?: Props['type'];\n  typeLink?: Props['typeLink'];\n};\n\ntype TitleFragmentProps = {\n  classes: HeaderStyles;\n  pageTitle: string | ReactNode;\n  tooltip?: Props['tooltip'];\n};\n\ntype SubtitleFragmentProps = {\n  classes: HeaderStyles;\n  subtitle?: Props['subtitle'];\n};\n\nconst TypeFragment = ({\n  type,\n  typeLink,\n  classes,\n  pageTitle,\n}: TypeFragmentProps) => {\n  if (!type) {\n    return null;\n  }\n\n  if (!typeLink) {\n    return <Typography className={classes.type}>{type}</Typography>;\n  }\n\n  return (\n    <Breadcrumbs className={classes.breadcrumb}>\n      <Link to={typeLink}>{type}</Link>\n      <Typography>{pageTitle}</Typography>\n    </Breadcrumbs>\n  );\n};\n\nconst TitleFragment = ({ pageTitle, classes, tooltip }: TitleFragmentProps) => {\n  const { contentRef } = useContent();\n\n  const FinalTitle = (\n    <Typography\n      ref={contentRef}\n      tabIndex={-1}\n      className={classes.title}\n      variant=\"h1\"\n    >\n      {pageTitle}\n    </Typography>\n  );\n\n  if (!tooltip) {\n    return FinalTitle;\n  }\n\n  return (\n    <Tooltip title={tooltip} placement=\"top-start\">\n      {FinalTitle}\n    </Tooltip>\n  );\n};\n\nconst SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {\n  if (!subtitle) {\n    return null;\n  }\n\n  if (typeof subtitle !== 'string') {\n    return <>{subtitle}</>;\n  }\n\n  return (\n    <Typography\n      className={classes.subtitle}\n      variant=\"subtitle2\"\n      component=\"span\"\n    >\n      {subtitle}\n    </Typography>\n  );\n};\n/**\n * Backstage main header with abstract color background in multiple variants\n *\n * @public\n *\n */\nexport function Header(props: PropsWithChildren<Props>) {\n  const {\n    children,\n    pageTitleOverride,\n    style,\n    subtitle,\n    title,\n    tooltip,\n    type,\n    typeLink,\n  } = props;\n  const classes = useStyles();\n  const configApi = useApi(configApiRef);\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n  const documentTitle = pageTitleOverride || title;\n  const pageTitle = title || pageTitleOverride;\n  const titleTemplate = `${documentTitle} | %s | ${appTitle}`;\n  const defaultTitle = `${documentTitle} | ${appTitle}`;\n\n  return (\n    <>\n      <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle} />\n      <header\n        style={style}\n        className={classes.header}\n        data-backstage-core-header=\"\"\n      >\n        <Box className={classes.leftItemsBox}>\n          <TypeFragment\n            classes={classes}\n            type={type}\n            typeLink={typeLink}\n            pageTitle={pageTitle}\n          />\n          <TitleFragment\n            classes={classes}\n            pageTitle={pageTitle}\n            tooltip={tooltip}\n          />\n          <SubtitleFragment classes={classes} subtitle={subtitle} />\n        </Box>\n        <Grid container className={classes.rightItemsBox} spacing={4}>\n          {children}\n        </Grid>\n      </header>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/layout/Page/Page.esm.js

@@ -33,7 +33,14 @@ function Page(props) {
         ...baseTheme,
         page: baseTheme.getPageTheme({ themeId })
       }),
-      children: /* @__PURE__ */ jsx("main", { className: classNames(classes.root, className), children })
+      children: /* @__PURE__ */ jsx(
+        "main",
+        {
+          className: classNames(classes.root, className),
+          "data-backstage-core-page": "",
+          children
+        }
+      )
     }
   );
 }

package/dist/layout/Page/Page.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.esm.js","sources":["../../../src/layout/Page/Page.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 { ReactNode } from 'react';\nimport { makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport type PageClassKey = 'root';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      display: 'grid',\n      gridTemplateAreas:\n        \"'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'\",\n      gridTemplateRows: 'max-content auto 1fr',\n      gridTemplateColumns: 'auto 1fr auto',\n      overflowY: 'auto',\n      height: '100vh',\n      [theme.breakpoints.down('xs')]: {\n        height: '100%',\n      },\n      '@media print': {\n        display: 'block',\n        height: 'auto',\n        overflowY: 'inherit',\n      },\n    },\n  }),\n  { name: 'BackstagePage' },\n);\n\ntype Props = {\n  themeId: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport function Page(props: Props) {\n  const { themeId, className, children } = props;\n  const classes = useStyles();\n  return (\n    <ThemeProvider\n      theme={(baseTheme: Theme) => ({\n        ...baseTheme,\n        page: baseTheme.getPageTheme({ themeId }),\n      })}\n    >\n      <main className={classNames(classes.root, className)}>{children}</main>\n    </ThemeProvider>\n  );\n}\n"],"names":[],"mappings":";;;;AAsBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,MAAA;AAAA,MACT,iBAAA,EACE,kHAAA;AAAA,MACF,gBAAA,EAAkB,sBAAA;AAAA,MAClB,mBAAA,EAAqB,eAAA;AAAA,MACrB,SAAA,EAAW,MAAA;AAAA,MACX,MAAA,EAAQ,OAAA;AAAA,MACR,CAAC,KAAA,CAAM,WAAA,CAAY,IAAA,CAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,cAAA,EAAgB;AAAA,QACd,OAAA,EAAS,OAAA;AAAA,QACT,MAAA,EAAQ,MAAA;AAAA,QACR,SAAA,EAAW;AAAA;AACb;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,eAAA;AACV,CAAA;AAQO,SAAS,KAAK,KAAA,EAAc;AACjC,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AACzC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAC,SAAA,MAAsB;AAAA,QAC5B,GAAG,SAAA;AAAA,QACH,IAAA,EAAM,SAAA,CAAU,YAAA,CAAa,EAAE,SAAS;AAAA,OAC1C,CAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,UAAA,CAAW,QAAQ,IAAA,EAAM,SAAS,GAAI,QAAA,EAAS;AAAA;AAAA,GAClE;AAEJ;;;;"}
+{"version":3,"file":"Page.esm.js","sources":["../../../src/layout/Page/Page.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 { ReactNode } from 'react';\nimport { makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport type PageClassKey = 'root';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      display: 'grid',\n      gridTemplateAreas:\n        \"'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'\",\n      gridTemplateRows: 'max-content auto 1fr',\n      gridTemplateColumns: 'auto 1fr auto',\n      overflowY: 'auto',\n      height: '100vh',\n      [theme.breakpoints.down('xs')]: {\n        height: '100%',\n      },\n      '@media print': {\n        display: 'block',\n        height: 'auto',\n        overflowY: 'inherit',\n      },\n    },\n  }),\n  { name: 'BackstagePage' },\n);\n\ntype Props = {\n  themeId: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport function Page(props: Props) {\n  const { themeId, className, children } = props;\n  const classes = useStyles();\n  return (\n    <ThemeProvider\n      theme={(baseTheme: Theme) => ({\n        ...baseTheme,\n        page: baseTheme.getPageTheme({ themeId }),\n      })}\n    >\n      <main\n        className={classNames(classes.root, className)}\n        data-backstage-core-page=\"\"\n      >\n        {children}\n      </main>\n    </ThemeProvider>\n  );\n}\n"],"names":[],"mappings":";;;;AAsBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,MAAA;AAAA,MACT,iBAAA,EACE,kHAAA;AAAA,MACF,gBAAA,EAAkB,sBAAA;AAAA,MAClB,mBAAA,EAAqB,eAAA;AAAA,MACrB,SAAA,EAAW,MAAA;AAAA,MACX,MAAA,EAAQ,OAAA;AAAA,MACR,CAAC,KAAA,CAAM,WAAA,CAAY,IAAA,CAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,cAAA,EAAgB;AAAA,QACd,OAAA,EAAS,OAAA;AAAA,QACT,MAAA,EAAQ,MAAA;AAAA,QACR,SAAA,EAAW;AAAA;AACb;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,eAAA;AACV,CAAA;AAQO,SAAS,KAAK,KAAA,EAAc;AACjC,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AACzC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAC,SAAA,MAAsB;AAAA,QAC5B,GAAG,SAAA;AAAA,QACH,IAAA,EAAM,SAAA,CAAU,YAAA,CAAa,EAAE,SAAS;AAAA,OAC1C,CAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,UAAA,CAAW,OAAA,CAAQ,IAAA,EAAM,SAAS,CAAA;AAAA,UAC7C,0BAAA,EAAyB,EAAA;AAAA,UAExB;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.18.10-next.0",
+  "version": "0.18.10-next.1",
   "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@backstage/config": "1.3.8-next.0",
-    "@backstage/core-plugin-api": "1.12.6-next.0",
+    "@backstage/core-plugin-api": "1.12.6-next.1",
     "@backstage/errors": "1.3.1-next.0",
     "@backstage/theme": "0.7.3",
     "@backstage/version-bridge": "1.0.12",
@@ -111,7 +111,7 @@
   },
   "devDependencies": {
     "@backstage/app-defaults": "1.7.8-next.0",
-    "@backstage/cli": "0.36.2-next.0",
+    "@backstage/cli": "0.36.2-next.1",
     "@backstage/core-app-api": "1.20.1-next.0",
     "@backstage/test-utils": "1.7.18-next.0",
     "@testing-library/dom": "^10.0.0",