@coder/backstage-plugin-coder/dist/components/A11yInfoCard/A11yInfoCard.esm.js

Create and manage Coder workspaces from Backstage

import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    color: theme.palette.type,
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(2),
    borderRadius: theme.shape.borderRadius,
    boxShadow: theme.shadows[1]
  },
  headerContent: {
    // Ideally wouldn't be using hard-coded font sizes, but couldn't figure out
    // how to use the theme.typography property, especially since not all
    // sub-properties have font sizes defined
    fontSize: "1.5rem",
    color: theme.palette.text.primary,
    fontWeight: 700,
    borderBottom: `1px solid ${theme.palette.divider}`,
    // Margins and padding are a bit wonky to support full-bleed layouts
    marginLeft: `-${theme.spacing(2)}px`,
    marginRight: `-${theme.spacing(2)}px`,
    padding: `0 ${theme.spacing(2)}px ${theme.spacing(2)}px`
  }
}));
const A11yInfoCard = forwardRef(
  (props, ref) => {
    const { className, children, headerContent, ...delegatedProps } = props;
    const styles = useStyles();
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: `${styles.root} ${className ?? ""}`,
        ...delegatedProps,
        children: [
          headerContent !== void 0 && /* @__PURE__ */ jsx("div", { className: styles.headerContent, children: headerContent }),
          children
        ]
      }
    );
  }
);

export { A11yInfoCard };
//# sourceMappingURL=A11yInfoCard.esm.js.map