@red-hat-developer-hub/backstage-plugin-mui5-test 0.0.0

package/README.md

@@ -0,0 +1,13 @@
+# mui5-test
+
+Welcome to the mui5-test plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/mui5-test](http://localhost:3000/mui5-test).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

package/dist/components/FormComponents.esm.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { InfoCard } from '@backstage/core-components';
+import Button from '@mui/material/Button';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Switch from '@mui/material/Switch';
+
+const Buttons = () => {
+  const colors = [
+    undefined,
+    "inherit",
+    "primary",
+    "secondary",
+    "success",
+    "error",
+    "info",
+    "warning"
+  ];
+  const variants = ["contained", "outlined", "text"];
+  return /* @__PURE__ */ jsxs("table", { style: { borderSpacing: 8 }, children: [
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "\xA0" }),
+      /* @__PURE__ */ jsx("th", { colSpan: 3, children: "enabled" }),
+      /* @__PURE__ */ jsx("th", { colSpan: 3, children: "disabled" })
+    ] }),
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "color" }),
+      variants.map((variant) => /* @__PURE__ */ jsx("th", { children: variant }, variant))
+    ] }),
+    colors.map((color) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: color ?? "no color" }),
+      variants.map((variant) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Button, { color, variant, children: "a button" }) }, variant)),
+      variants.map((variant) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Button, { color, variant, disabled: true, children: "a button" }) }, variant))
+    ] }, color))
+  ] });
+};
+const Checkboxes = () => {
+  const colors = [
+    undefined,
+    "primary",
+    "secondary",
+    "error",
+    "info",
+    "success",
+    "warning",
+    "default"
+  ];
+  return /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "color" }),
+      /* @__PURE__ */ jsx("th", { children: "enabled" }),
+      /* @__PURE__ */ jsx("th", { children: "disabled" })
+    ] }),
+    colors.map((color) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: color ?? "no color" }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Checkbox, { defaultChecked: true, color }),
+          label: "a checkbox"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Checkbox, { defaultChecked: true, color }),
+          label: "a checkbox",
+          disabled: true
+        }
+      ) })
+    ] }, color))
+  ] });
+};
+const Switches = () => {
+  const colors = [
+    undefined,
+    "primary",
+    "secondary",
+    "error",
+    "info",
+    "success",
+    "warning",
+    "default"
+  ];
+  return /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "color" }),
+      /* @__PURE__ */ jsx("th", { children: "enabled on" }),
+      /* @__PURE__ */ jsx("th", { children: "enabled off" }),
+      /* @__PURE__ */ jsx("th", { children: "disabled on" }),
+      /* @__PURE__ */ jsx("th", { children: "disabled off" })
+    ] }),
+    colors.map((color) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: color ?? "no color" }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Switch, { checked: true, color }),
+          label: "a switch"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Switch, { color }),
+          label: "a switch"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Switch, { color }),
+          label: "a switch",
+          disabled: true
+        }
+      ) }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Switch, { checked: true, color }),
+          label: "a switch",
+          disabled: true
+        }
+      ) })
+    ] }, color))
+  ] });
+};
+const FormComponents = () => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(InfoCard, { title: "Information card", children: [
+      /* @__PURE__ */ jsx(Buttons, {}),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx(Checkboxes, {})
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Buttons, {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Checkboxes, {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Switches, {})
+  ] });
+};
+
+export { FormComponents };
+//# sourceMappingURL=FormComponents.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormComponents.esm.js","sources":["../../src/components/FormComponents.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 */\n\nimport { InfoCard } from '@backstage/core-components';\nimport Button, { ButtonProps } from '@mui/material/Button';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Checkbox, { CheckboxProps } from '@mui/material/Checkbox';\nimport Switch, { SwitchProps } from '@mui/material/Switch';\n\nconst Buttons = () => {\n  const colors: ButtonProps['color'][] = [\n    undefined,\n    'inherit',\n    'primary',\n    'secondary',\n    'success',\n    'error',\n    'info',\n    'warning',\n  ];\n  const variants: ButtonProps['variant'][] = ['contained', 'outlined', 'text'];\n  return (\n    <table style={{ borderSpacing: 8 }}>\n      <tr>\n        <th>&nbsp;</th>\n        <th colSpan={3}>enabled</th>\n        <th colSpan={3}>disabled</th>\n      </tr>\n      <tr>\n        <th>color</th>\n        {variants.map(variant => (\n          <th key={variant}>{variant}</th>\n        ))}\n      </tr>\n      {colors.map(color => (\n        <tr key={color}>\n          <td>{color ?? 'no color'}</td>\n          {variants.map(variant => (\n            <td key={variant}>\n              <Button color={color} variant={variant}>\n                a button\n              </Button>\n            </td>\n          ))}\n          {variants.map(variant => (\n            <td key={variant}>\n              <Button color={color} variant={variant} disabled>\n                a button\n              </Button>\n            </td>\n          ))}\n        </tr>\n      ))}\n    </table>\n  );\n};\n\nconst Checkboxes = () => {\n  const colors: CheckboxProps['color'][] = [\n    undefined,\n    'primary',\n    'secondary',\n    'error',\n    'info',\n    'success',\n    'warning',\n    'default',\n  ];\n  return (\n    <table>\n      <tr>\n        <th>color</th>\n        <th>enabled</th>\n        <th>disabled</th>\n      </tr>\n      {colors.map(color => (\n        <tr key={color}>\n          <td>{color ?? 'no color'}</td>\n          <td>\n            <FormControlLabel\n              control={<Checkbox defaultChecked color={color} />}\n              label=\"a checkbox\"\n            />\n          </td>\n          <td>\n            <FormControlLabel\n              control={<Checkbox defaultChecked color={color} />}\n              label=\"a checkbox\"\n              disabled\n            />\n          </td>\n        </tr>\n      ))}\n    </table>\n  );\n};\n\nconst Switches = () => {\n  const colors: SwitchProps['color'][] = [\n    undefined,\n    'primary',\n    'secondary',\n    'error',\n    'info',\n    'success',\n    'warning',\n    'default',\n  ];\n  return (\n    <table>\n      <tr>\n        <th>color</th>\n        <th>enabled on</th>\n        <th>enabled off</th>\n        <th>disabled on</th>\n        <th>disabled off</th>\n      </tr>\n      {colors.map(color => (\n        <tr key={color}>\n          <td>{color ?? 'no color'}</td>\n          <td>\n            <FormControlLabel\n              control={<Switch checked color={color} />}\n              label=\"a switch\"\n            />\n          </td>\n          <td>\n            <FormControlLabel\n              control={<Switch color={color} />}\n              label=\"a switch\"\n            />\n          </td>\n          <td>\n            <FormControlLabel\n              control={<Switch color={color} />}\n              label=\"a switch\"\n              disabled\n            />\n          </td>\n          <td>\n            <FormControlLabel\n              control={<Switch checked color={color} />}\n              label=\"a switch\"\n              disabled\n            />\n          </td>\n        </tr>\n      ))}\n    </table>\n  );\n};\n\nexport const FormComponents = () => {\n  return (\n    <div>\n      <InfoCard title=\"Information card\">\n        <Buttons />\n        <br />\n        <Checkboxes />\n      </InfoCard>\n      <br />\n      <Buttons />\n      <br />\n      <Checkboxes />\n      <br />\n      <Switches />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/GridExamples.esm.js

@@ -0,0 +1,108 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Grid from '@mui/material/Grid';
+
+const GridContainer = (props) => /* @__PURE__ */ jsx(Grid, { container: true, ...props });
+const GridItem = (props) => /* @__PURE__ */ jsx(
+  Grid,
+  {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    xl: 2,
+    ...props
+  }
+);
+const CommonGridExamples = () => {
+  const cards = Array.from({ length: 8 }, (_, i) => i + 1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h1", { children: "Default: Grid container without spacing, an unstyled Grid item and an unstyled Card" }),
+    /* @__PURE__ */ jsx(GridContainer, { children: cards.map((cardContent) => /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Card, { children: cardContent }) }, cardContent)) }),
+    /* @__PURE__ */ jsx("h1", { children: "Grid container with spacing=2, an unstyled Grid item and an unstyled Card" }),
+    /* @__PURE__ */ jsx(GridContainer, { spacing: 2, children: cards.map((cardContent) => /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Card, { children: cardContent }) }, cardContent)) }),
+    /* @__PURE__ */ jsx("h1", { children: "Grid container with spacing=4, an unstyled Grid item and a Card with padding=2" }),
+    /* @__PURE__ */ jsx(GridContainer, { spacing: 4, children: cards.map((cardContent) => /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Card, { sx: { p: 2 }, children: cardContent }) }, cardContent)) })
+  ] });
+};
+const DebugGridExamples = () => {
+  const backgroundColors = [
+    "#600",
+    "#060",
+    "#800",
+    "#080",
+    "#a00",
+    "#0a0",
+    "#d00",
+    "#0d0"
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h1", { children: "Grid container without spacing, an unstyled Grid item and colorized Card" }),
+    /* @__PURE__ */ jsx(GridContainer, { children: backgroundColors.map((backgroundColor, index) => /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Card, { sx: { color: "#ffffff", backgroundColor }, children: index + 1 }) }, backgroundColor)) }),
+    /* @__PURE__ */ jsx("h1", { children: "Grid container with colorized Grid item to show one-sided padding, Card position is fine" }),
+    /* @__PURE__ */ jsx(GridContainer, { children: backgroundColors.map((backgroundColor, index) => /* @__PURE__ */ jsx(
+      GridItem,
+      {
+        sx: { color: "#ffffff", backgroundColor },
+        children: /* @__PURE__ */ jsx(Card, { children: index + 1 })
+      },
+      backgroundColor
+    )) }),
+    /* @__PURE__ */ jsx("h1", { children: "Grid container with spacing=4, an unstyled Grid item and a colorized Card with p=2" }),
+    /* @__PURE__ */ jsx(GridContainer, { spacing: 4, children: backgroundColors.map((backgroundColor, index) => /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Card, { sx: { color: "#ffffff", backgroundColor, p: 2 }, children: index + 1 }) }, backgroundColor)) }),
+    /* @__PURE__ */ jsx("h1", { children: "Grid container with spacing=4, an colorized Grid item to show one-sided padding, Card position is fine" }),
+    /* @__PURE__ */ jsx(GridContainer, { spacing: 4, children: backgroundColors.map((backgroundColor, index) => /* @__PURE__ */ jsx(
+      GridItem,
+      {
+        sx: { color: "#ffffff", backgroundColor },
+        children: /* @__PURE__ */ jsx(Card, { sx: { p: 2 }, children: index + 1 })
+      },
+      backgroundColor
+    )) }),
+    /* @__PURE__ */ jsx("h1", { children: "Grid container without spacing and Grid item with p=4 result in unaligned Cards! (Too much padding on the right side!)" }),
+    /* @__PURE__ */ jsx(GridContainer, { children: backgroundColors.map((backgroundColor, index) => /* @__PURE__ */ jsx(
+      GridItem,
+      {
+        sx: { color: "#ffffff", backgroundColor, p: 4 },
+        children: /* @__PURE__ */ jsx(Card, { children: index + 1 })
+      },
+      backgroundColor
+    )) }),
+    /* @__PURE__ */ jsx("h1", { children: "Grid container with spacing=4 and Grid item with p=4 result also in unaligned Cards! (Too much padding on the right side!)" }),
+    /* @__PURE__ */ jsx(GridContainer, { spacing: 4, children: backgroundColors.map((backgroundColor, index) => /* @__PURE__ */ jsx(
+      GridItem,
+      {
+        sx: { color: "#ffffff", backgroundColor, p: 4 },
+        children: /* @__PURE__ */ jsx(Card, { children: index + 1 })
+      },
+      backgroundColor
+    )) })
+  ] });
+};
+const GridExamples = () => {
+  const [showDebugExamples, setShowDebugExamples] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CommonGridExamples, {}),
+    /* @__PURE__ */ jsx(Box, { sx: { pt: 4, pb: 4 }, children: /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            onChange: (_, checked) => setShowDebugExamples(checked)
+          }
+        ),
+        label: "Show debug examples"
+      }
+    ) }),
+    showDebugExamples && /* @__PURE__ */ jsx(DebugGridExamples, {})
+  ] });
+};
+
+export { CommonGridExamples, GridExamples };
+//# sourceMappingURL=GridExamples.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridExamples.esm.js","sources":["../../src/components/GridExamples.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 */\n\nimport { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Grid, { GridProps } from '@mui/material/Grid';\n\nconst GridContainer = (props: GridProps) => <Grid container {...props} />;\n\nconst GridItem = (props: GridProps) => (\n  <Grid\n    item\n    xs={12} // show 1 item  per row on extra small screens\n    sm={6} // show 2 items per row on small screens\n    md={4} // show 3 items per row on medium screens\n    lg={3} // show 4 items per row on large screens\n    xl={2} // show 6 items per row on extra large screens\n    {...props}\n  />\n);\n\nexport const CommonGridExamples = () => {\n  const cards = Array.from({ length: 8 }, (_, i) => i + 1);\n  return (\n    <>\n      <h1>\n        Default: Grid container without spacing, an unstyled Grid item and an\n        unstyled Card\n      </h1>\n      <GridContainer>\n        {cards.map(cardContent => (\n          <GridItem key={cardContent}>\n            <Card>{cardContent}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n\n      <h1>\n        Grid container with spacing=2, an unstyled Grid item and an unstyled\n        Card\n      </h1>\n      <GridContainer spacing={2}>\n        {cards.map(cardContent => (\n          <GridItem key={cardContent}>\n            <Card>{cardContent}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n\n      <h1>\n        Grid container with spacing=4, an unstyled Grid item and a Card with\n        padding=2\n      </h1>\n      <GridContainer spacing={4}>\n        {cards.map(cardContent => (\n          <GridItem key={cardContent}>\n            <Card sx={{ p: 2 }}>{cardContent}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n    </>\n  );\n};\n\nconst DebugGridExamples = () => {\n  const backgroundColors = [\n    '#600',\n    '#060',\n    '#800',\n    '#080',\n    '#a00',\n    '#0a0',\n    '#d00',\n    '#0d0',\n  ];\n  return (\n    <>\n      <h1>\n        Grid container without spacing, an unstyled Grid item and colorized Card\n      </h1>\n      <GridContainer>\n        {backgroundColors.map((backgroundColor, index) => (\n          <GridItem key={backgroundColor}>\n            <Card sx={{ color: '#ffffff', backgroundColor }}>{index + 1}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n\n      <h1>\n        Grid container with colorized Grid item to show one-sided padding, Card\n        position is fine\n      </h1>\n      <GridContainer>\n        {backgroundColors.map((backgroundColor, index) => (\n          <GridItem\n            key={backgroundColor}\n            sx={{ color: '#ffffff', backgroundColor }}\n          >\n            <Card>{index + 1}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n\n      <h1>\n        Grid container with spacing=4, an unstyled Grid item and a colorized\n        Card with p=2\n      </h1>\n      <GridContainer spacing={4}>\n        {backgroundColors.map((backgroundColor, index) => (\n          <GridItem key={backgroundColor}>\n            <Card sx={{ color: '#ffffff', backgroundColor, p: 2 }}>\n              {index + 1}\n            </Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n\n      <h1>\n        Grid container with spacing=4, an colorized Grid item to show one-sided\n        padding, Card position is fine\n      </h1>\n      <GridContainer spacing={4}>\n        {backgroundColors.map((backgroundColor, index) => (\n          <GridItem\n            key={backgroundColor}\n            sx={{ color: '#ffffff', backgroundColor }}\n          >\n            <Card sx={{ p: 2 }}>{index + 1}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n\n      <h1>\n        Grid container without spacing and Grid item with p=4 result in\n        unaligned Cards! (Too much padding on the right side!)\n      </h1>\n      <GridContainer>\n        {backgroundColors.map((backgroundColor, index) => (\n          <GridItem\n            key={backgroundColor}\n            sx={{ color: '#ffffff', backgroundColor, p: 4 }}\n          >\n            <Card>{index + 1}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n\n      <h1>\n        Grid container with spacing=4 and Grid item with p=4 result also in\n        unaligned Cards! (Too much padding on the right side!)\n      </h1>\n      <GridContainer spacing={4}>\n        {backgroundColors.map((backgroundColor, index) => (\n          <GridItem\n            key={backgroundColor}\n            sx={{ color: '#ffffff', backgroundColor, p: 4 }}\n          >\n            <Card>{index + 1}</Card>\n          </GridItem>\n        ))}\n      </GridContainer>\n    </>\n  );\n};\n\nexport const GridExamples = () => {\n  const [showDebugExamples, setShowDebugExamples] = useState(false);\n  return (\n    <>\n      <CommonGridExamples />\n      <Box sx={{ pt: 4, pb: 4 }}>\n        <FormControlLabel\n          control={\n            <Checkbox\n              onChange={(_, checked) => setShowDebugExamples(checked)}\n            />\n          }\n          label=\"Show debug examples\"\n        />\n      </Box>\n      {showDebugExamples && <DebugGridExamples />}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/InlineStyles.esm.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { InfoCard } from '@backstage/core-components';
+import Button from '@mui/material/Button';
+
+const InlineStyles = () => {
+  return /* @__PURE__ */ jsxs(InfoCard, { title: "Inline styles", children: [
+    /* @__PURE__ */ jsx("h1", { children: "Default button" }),
+    /* @__PURE__ */ jsx(Button, { children: "a button" }),
+    /* @__PURE__ */ jsxs("h1", { children: [
+      "Default button with",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "style={{ padding: 32, backgroundColor: 'gray' }}" })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { style: { padding: 32, backgroundColor: "gray" }, children: "a button" }),
+    /* @__PURE__ */ jsxs("h1", { children: [
+      "Default button with",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "sx={{ padding: 4, backgroundColor: 'background.default' }}" })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { sx: { padding: 4, backgroundColor: "background.default" }, children: "a button" })
+  ] });
+};
+
+export { InlineStyles };
+//# sourceMappingURL=InlineStyles.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineStyles.esm.js","sources":["../../src/components/InlineStyles.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 */\n\nimport { InfoCard } from '@backstage/core-components';\nimport Button from '@mui/material/Button';\n\nexport const InlineStyles = () => {\n  return (\n    <InfoCard title=\"Inline styles\">\n      <h1>Default button</h1>\n      <Button>a button</Button>\n\n      <h1>\n        Default button with{' '}\n        <code>{\"style={{ padding: 32, backgroundColor: 'gray' }}\"}</code>\n      </h1>\n      <Button style={{ padding: 32, backgroundColor: 'gray' }}>a button</Button>\n\n      <h1>\n        Default button with{' '}\n        <code>\n          {\"sx={{ padding: 4, backgroundColor: 'background.default' }}\"}\n        </code>\n      </h1>\n      <Button sx={{ padding: 4, backgroundColor: 'background.default' }}>\n        a button\n      </Button>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;AAmBO,MAAM,eAAe,MAAM;AAChC,EACE,uBAAA,IAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAM,eACd,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAG,QAAc,EAAA,gBAAA,EAAA,CAAA;AAAA,oBAClB,GAAA,CAAC,UAAO,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,yBAEf,IAAG,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,qBAAA;AAAA,MACkB,GAAA;AAAA,sBACpB,GAAA,CAAC,UAAM,QAAmD,EAAA,kDAAA,EAAA;AAAA,KAC5D,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,UAAO,KAAO,EAAA,EAAE,SAAS,EAAI,EAAA,eAAA,EAAiB,MAAO,EAAA,EAAG,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,yBAEhE,IAAG,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,qBAAA;AAAA,MACkB,GAAA;AAAA,sBACpB,GAAA,CAAC,UACE,QACH,EAAA,4DAAA,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,UAAO,EAAI,EAAA,EAAE,SAAS,CAAG,EAAA,eAAA,EAAiB,oBAAqB,EAAA,EAAG,QAEnE,EAAA,UAAA,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/MUI5TestPage.esm.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Page, Header, TabbedLayout } from '@backstage/core-components';
+import { UserSettingsThemeToggle } from '@backstage/plugin-user-settings';
+import { FormComponents } from './FormComponents.esm.js';
+import { PaperExamples } from './PaperExamples.esm.js';
+import { TabExamples } from './TabExamples.esm.js';
+import { GridExamples } from './GridExamples.esm.js';
+import { InlineStyles } from './InlineStyles.esm.js';
+
+const MUI5TestPage = () => {
+  return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+    /* @__PURE__ */ jsx(Header, { title: "MUI v5 Test Page", children: /* @__PURE__ */ jsx(UserSettingsThemeToggle, {}) }),
+    /* @__PURE__ */ jsxs(TabbedLayout, { children: [
+      /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/form-components", title: "Form components", children: /* @__PURE__ */ jsx(FormComponents, {}) }),
+      /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/papers", title: "Papers", children: /* @__PURE__ */ jsx(PaperExamples, {}) }),
+      /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/tabs", title: "Tabs", children: /* @__PURE__ */ jsx(TabExamples, {}) }),
+      /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/grids", title: "Grids", children: /* @__PURE__ */ jsx(GridExamples, {}) }),
+      /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/inline-styles", title: "Inline styles", children: /* @__PURE__ */ jsx(InlineStyles, {}) })
+    ] })
+  ] });
+};
+
+export { MUI5TestPage };
+//# sourceMappingURL=MUI5TestPage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MUI5TestPage.esm.js","sources":["../../src/components/MUI5TestPage.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 */\n\nimport { Page, Header, TabbedLayout } from '@backstage/core-components';\nimport { UserSettingsThemeToggle } from '@backstage/plugin-user-settings';\n\nimport { FormComponents } from './FormComponents';\nimport { PaperExamples } from './PaperExamples';\nimport { TabExamples } from './TabExamples';\nimport { GridExamples } from './GridExamples';\nimport { InlineStyles } from './InlineStyles';\n\nexport const MUI5TestPage = () => {\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"MUI v5 Test Page\">\n        <UserSettingsThemeToggle />\n      </Header>\n      <TabbedLayout>\n        <TabbedLayout.Route path=\"/form-components\" title=\"Form components\">\n          <FormComponents />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route path=\"/papers\" title=\"Papers\">\n          <PaperExamples />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route path=\"/tabs\" title=\"Tabs\">\n          <TabExamples />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route path=\"/grids\" title=\"Grids\">\n          <GridExamples />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route path=\"/inline-styles\" title=\"Inline styles\">\n          <InlineStyles />\n        </TabbedLayout.Route>\n      </TabbedLayout>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBO,MAAM,eAAe,MAAM;AAChC,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAM,kBACZ,EAAA,QAAA,kBAAA,GAAA,CAAC,2BAAwB,CAC3B,EAAA,CAAA;AAAA,yBACC,YACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,YAAA,CAAa,OAAb,EAAmB,IAAA,EAAK,oBAAmB,KAAM,EAAA,iBAAA,EAChD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,CAClB,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,YAAa,CAAA,KAAA,EAAb,EAAmB,IAAA,EAAK,WAAU,KAAM,EAAA,QAAA,EACvC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,CACjB,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,YAAa,CAAA,KAAA,EAAb,EAAmB,IAAA,EAAK,SAAQ,KAAM,EAAA,MAAA,EACrC,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,CACf,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,YAAa,CAAA,KAAA,EAAb,EAAmB,IAAA,EAAK,UAAS,KAAM,EAAA,OAAA,EACtC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EAAa,CAChB,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,YAAa,CAAA,KAAA,EAAb,EAAmB,IAAA,EAAK,kBAAiB,KAAM,EAAA,eAAA,EAC9C,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EAAa,CAChB,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/PaperExamples.esm.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Paper from '@mui/material/Paper';
+
+const PaperExamples = () => {
+  const elevations = Array.from({ length: 25 }, (_, i) => i);
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap" }, children: elevations.map((elevation) => /* @__PURE__ */ jsx("div", { style: { margin: "20px" }, children: /* @__PURE__ */ jsx(Paper, { elevation, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        width: "200px",
+        height: "200px",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        "e=",
+        elevation
+      ]
+    }
+  ) }) }, elevation)) });
+};
+
+export { PaperExamples };
+//# sourceMappingURL=PaperExamples.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaperExamples.esm.js","sources":["../../src/components/PaperExamples.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 */\n\nimport Paper from '@mui/material/Paper';\n\nexport const PaperExamples = () => {\n  // elevations from 0 to 24\n  const elevations = Array.from({ length: 25 }, (_, i) => i);\n\n  return (\n    <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n      {elevations.map(elevation => (\n        <div key={elevation} style={{ margin: '20px' }}>\n          <Paper elevation={elevation}>\n            <div\n              style={{\n                display: 'flex',\n                width: '200px',\n                height: '200px',\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              e={elevation}\n            </div>\n          </Paper>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAkBO,MAAM,gBAAgB,MAAM;AAEjC,EAAM,MAAA,UAAA,GAAa,KAAM,CAAA,IAAA,CAAK,EAAE,MAAA,EAAQ,IAAM,EAAA,CAAC,CAAG,EAAA,CAAA,KAAM,CAAC,CAAA;AAEzD,EACE,uBAAA,GAAA,CAAC,SAAI,KAAO,EAAA,EAAE,SAAS,MAAQ,EAAA,QAAA,EAAU,QACtC,EAAA,QAAA,EAAA,UAAA,CAAW,IAAI,CACd,SAAA,qBAAA,GAAA,CAAC,SAAoB,KAAO,EAAA,EAAE,QAAQ,MAAO,EAAA,EAC3C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAM,SACL,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,KAAO,EAAA,OAAA;AAAA,QACP,MAAQ,EAAA,OAAA;AAAA,QACR,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA;AAAA,OAClB;AAAA,MACD,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACI;AAAA;AAAA;AAAA,GAEP,EAAA,CAAA,EAAA,EAbQ,SAcV,CACD,CACH,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/TabExamples.esm.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+const TabExamples = () => {
+  const colors = [
+    undefined,
+    "primary",
+    "secondary"
+  ];
+  const [selectedTab, setSelectedTab] = useState(0);
+  const handleChange = (_event, newValue) => {
+    setSelectedTab(newValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    colors.map((color) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: { padding: "20px 0" }, children: [
+        "color: ",
+        color ?? "undefined"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          value: selectedTab,
+          indicatorColor: color,
+          textColor: color,
+          onChange: handleChange,
+          children: [
+            /* @__PURE__ */ jsx(Tab, { label: "One" }),
+            /* @__PURE__ */ jsx(Tab, { label: "Two" }),
+            /* @__PURE__ */ jsx(Tab, { label: "Three" }),
+            /* @__PURE__ */ jsx(Tab, { label: "Disabled", disabled: true })
+          ]
+        }
+      )
+    ] }, color)),
+    /* @__PURE__ */ jsx("div", { style: { padding: "20px 0" }, children: "long titles and scroll buttons" }),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: selectedTab,
+        onChange: handleChange,
+        scrollButtons: true,
+        variant: "scrollable",
+        children: [
+          /* @__PURE__ */ jsx(Tab, { label: "Tab one with extra long title" }),
+          /* @__PURE__ */ jsx(Tab, { label: "Tab two with extra long title" }),
+          /* @__PURE__ */ jsx(Tab, { label: "Tab three with extra long title" }),
+          /* @__PURE__ */ jsx(Tab, { label: "Disabled tab with extra long title", disabled: true })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { padding: "20px 0" }, children: "Vertical test" }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          orientation: "vertical",
+          value: selectedTab,
+          indicatorColor: "primary",
+          textColor: "primary",
+          onChange: handleChange,
+          "aria-label": "disabled tabs example",
+          children: [
+            /* @__PURE__ */ jsx(Tab, { label: "One" }),
+            /* @__PURE__ */ jsx(Tab, { label: "Two" }),
+            /* @__PURE__ */ jsx(Tab, { label: "Extra long label Three" }),
+            /* @__PURE__ */ jsx(Tab, { label: "Disabled", disabled: true })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: { height: 200, width: "100%", border: "1px solid #ccc", m: 2 },
+          children: /* @__PURE__ */ jsx(Typography, { variant: "h6", p: 2, children: `selectedTab: ${selectedTab + 1}` })
+        }
+      )
+    ] })
+  ] });
+};
+
+export { TabExamples };
+//# sourceMappingURL=TabExamples.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabExamples.esm.js","sources":["../../src/components/TabExamples.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 */\n\nimport type { SyntheticEvent } from 'react';\n\nimport { useState } from 'react';\nimport Tabs, { TabsProps } from '@mui/material/Tabs';\nimport Tab from '@mui/material/Tab';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\n\nexport const TabExamples = () => {\n  const colors: TabsProps['indicatorColor'][] = [\n    undefined,\n    'primary',\n    'secondary',\n  ];\n\n  const [selectedTab, setSelectedTab] = useState(0);\n  const handleChange = (_event: SyntheticEvent, newValue: number) => {\n    setSelectedTab(newValue);\n  };\n\n  return (\n    <div>\n      {colors.map(color => (\n        <div key={color}>\n          <div style={{ padding: '20px 0' }}>color: {color ?? 'undefined'}</div>\n          <Tabs\n            value={selectedTab}\n            indicatorColor={color}\n            textColor={color}\n            onChange={handleChange}\n          >\n            <Tab label=\"One\" />\n            <Tab label=\"Two\" />\n            <Tab label=\"Three\" />\n            <Tab label=\"Disabled\" disabled />\n          </Tabs>\n        </div>\n      ))}\n\n      <div style={{ padding: '20px 0' }}>long titles and scroll buttons</div>\n      <Tabs\n        value={selectedTab}\n        onChange={handleChange}\n        scrollButtons\n        variant=\"scrollable\"\n      >\n        <Tab label=\"Tab one with extra long title\" />\n        <Tab label=\"Tab two with extra long title\" />\n        <Tab label=\"Tab three with extra long title\" />\n        <Tab label=\"Disabled tab with extra long title\" disabled />\n      </Tabs>\n\n      <div style={{ padding: '20px 0' }}>Vertical test</div>\n      <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>\n        <Box sx={{ p: 2 }}>\n          <Tabs\n            orientation=\"vertical\"\n            value={selectedTab}\n            indicatorColor=\"primary\"\n            textColor=\"primary\"\n            onChange={handleChange}\n            aria-label=\"disabled tabs example\"\n          >\n            <Tab label=\"One\" />\n            <Tab label=\"Two\" />\n            <Tab label=\"Extra long label Three\" />\n            <Tab label=\"Disabled\" disabled />\n          </Tabs>\n        </Box>\n        <Box\n          sx={{ height: 200, width: '100%', border: '1px solid #ccc', m: 2 }}\n        >\n          <Typography variant=\"h6\" p={2}>{`selectedTab: ${\n            selectedTab + 1\n          }`}</Typography>\n        </Box>\n      </Box>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+
+/**
+ * @public
+ */
+declare const mui5TestPlugin: _backstage_core_plugin_api.BackstagePlugin<{
+    root: _backstage_core_plugin_api.RouteRef<undefined>;
+}, {}, {}>;
+/**
+ * @public
+ */
+declare const MUI5TestPage: () => react_jsx_runtime.JSX.Element;
+
+export { MUI5TestPage, mui5TestPlugin };

package/dist/index.esm.js

@@ -0,0 +1,7 @@
+import { unstable_ClassNameGenerator } from '@mui/material/className';
+export { MUI5TestPage, mui5TestPlugin } from './plugin.esm.js';
+
+unstable_ClassNameGenerator.configure((componentName) => {
+  return componentName.startsWith("v5-") ? componentName : `v5-${componentName}`;
+});
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/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 */\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\nClassNameGenerator.configure(componentName => {\n  return componentName.startsWith('v5-')\n    ? componentName\n    : `v5-${componentName}`;\n});\n\nexport * from './plugin';\n"],"names":["ClassNameGenerator"],"mappings":";;;AAiBAA,2BAAA,CAAmB,UAAU,CAAiB,aAAA,KAAA;AAC5C,EAAA,OAAO,cAAc,UAAW,CAAA,KAAK,CACjC,GAAA,aAAA,GACA,MAAM,aAAa,CAAA,CAAA;AACzB,CAAC,CAAA"}

package/dist/plugin.esm.js

@@ -0,0 +1,19 @@
+import { createPlugin, createRoutableExtension } from '@backstage/core-plugin-api';
+import { rootRouteRef } from './routes.esm.js';
+
+const mui5TestPlugin = createPlugin({
+  id: "mui5-test",
+  routes: {
+    root: rootRouteRef
+  }
+});
+const MUI5TestPage = mui5TestPlugin.provide(
+  createRoutableExtension({
+    name: "MUI5TestPage",
+    component: () => import('./components/MUI5TestPage.esm.js').then((m) => m.MUI5TestPage),
+    mountPoint: rootRouteRef
+  })
+);
+
+export { MUI5TestPage, mui5TestPlugin };
+//# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.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 {\n  createPlugin,\n  createRoutableExtension,\n} from '@backstage/core-plugin-api';\n\nimport { rootRouteRef } from './routes';\n\n/**\n * @public\n */\nexport const mui5TestPlugin = createPlugin({\n  id: 'mui5-test',\n  routes: {\n    root: rootRouteRef,\n  },\n});\n\n/**\n * @public\n */\nexport const MUI5TestPage = mui5TestPlugin.provide(\n  createRoutableExtension({\n    name: 'MUI5TestPage',\n    component: () =>\n      import('./components/MUI5TestPage').then(m => m.MUI5TestPage),\n    mountPoint: rootRouteRef,\n  }),\n);\n"],"names":[],"mappings":";;;AA0BO,MAAM,iBAAiB,YAAa,CAAA;AAAA,EACzC,EAAI,EAAA,WAAA;AAAA,EACJ,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA;AAAA;AAEV,CAAC;AAKM,MAAM,eAAe,cAAe,CAAA,OAAA;AAAA,EACzC,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,cAAA;AAAA,IACN,SAAA,EAAW,MACT,OAAO,kCAA2B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,YAAY,CAAA;AAAA,IAC9D,UAAY,EAAA;AAAA,GACb;AACH;;;;"}

package/dist/routes.esm.js

@@ -0,0 +1,8 @@
+import { createRouteRef } from '@backstage/core-plugin-api';
+
+const rootRouteRef = createRouteRef({
+  id: "mui5-test"
+});
+
+export { rootRouteRef };
+//# sourceMappingURL=routes.esm.js.map

package/dist/routes.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.esm.js","sources":["../src/routes.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 { createRouteRef } from '@backstage/core-plugin-api';\n\nexport const rootRouteRef = createRouteRef({\n  id: 'mui5-test',\n});\n"],"names":[],"mappings":";;AAkBO,MAAM,eAAe,cAAe,CAAA;AAAA,EACzC,EAAI,EAAA;AACN,CAAC;;;;"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@red-hat-developer-hub/backstage-plugin-mui5-test",
+  "version": "0.0.0",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/redhat-developer/rhdh-plugins",
+    "directory": "workspaces/theme/plugins/mui5-test"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "mui5-test",
+    "pluginPackages": [
+      "@red-hat-developer-hub/backstage-plugin-mui5-test"
+    ]
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.17.5",
+    "@backstage/core-plugin-api": "^1.10.9",
+    "@backstage/plugin-user-settings": "^0.8.25",
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.34.1",
+    "@backstage/core-app-api": "^1.18.0",
+    "@backstage/dev-utils": "^1.1.13",
+    "@backstage/test-utils": "^1.7.11",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "msw": "^1.0.0",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
+  "module": "./dist/index.esm.js"
+}