@rws-aoa/react-library/dist/components/atoms/section-header/SectionHeader.js

RWS AOA Design System

import { jsxs as e, jsx as o } from "react/jsx-runtime";
import { Box as s, Typography as a, Divider as m, typographyClasses as l } from "@mui/material";
import { l as x } from "../../../chunks/lodash.CA_K01A9.js";
function f({
  title: i,
  subtitle: t = "",
  children: n,
  ...r
}) {
  return /* @__PURE__ */ e(s, { ...r, sx: x.merge({
    marginRight: 0,
    marginBottom: 2,
    'breakpoints.down("sm")': {
      flexBasis: "100%",
      width: "100%",
      marginRight: 0,
      "&:not(:first-of-type)": {
        marginTop: 3
      }
    },
    [`.${l.root}`]: {
      fontFamily: "var(--font-text)"
    }
  }, r.sx), children: [
    /* @__PURE__ */ o(a, { color: "textPrimary", component: "h1", "data-qa": "section-title", sx: {
      fontSize: "var(--font-size-h1)"
    }, variant: "h5", children: i }),
    !!t && /* @__PURE__ */ o(a, { color: "textSecondary", component: "span", "data-qa": "section-subtitle", sx: {
      fontSize: "var(--font-size-text)"
    }, variant: "subtitle1", children: t }),
    /* @__PURE__ */ o(m, { sx: {
      backgroundColor: "var(--color-rijks-skyblue)",
      marginBottom: 3,
      paddingBottom: 0.25
    } }),
    n
  ] });
}
export {
  f as AoaSectionHeader
};
//# sourceMappingURL=SectionHeader.js.map