synapse-react-client/dist/components/ComponentCollapse.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { spreadSx as s } from "../theme/spreadSx.js";
import { KeyboardArrowUpTwoTone as w, KeyboardArrowDownTwoTone as y } from "@mui/icons-material";
import { Box as i, Collapse as h } from "@mui/material";
import { useState as C, useId as b } from "react";
function j({
  component: p,
  defaultVisible: c,
  componentContainerSx: d,
  collapseBoxSx: x,
  iconSx: m,
  children: f
}) {
  const [o, r] = C(c), t = b(), a = {
    color: "grey.700",
    marginBottom: "-5px !important",
    height: "18px",
    ...m
  }, u = {
    display: "flex",
    textAlign: "left",
    justifyContent: "space-between",
    backgroundColor: "grey.200",
    padding: "15px",
    "&:hover": {
      cursor: "pointer"
    }
  }, g = {
    backgroundColor: "grey.100",
    padding: "25px"
  };
  return /* @__PURE__ */ l("div", { className: "MarkdownCollapse", children: [
    /* @__PURE__ */ l(
      i,
      {
        component: "button",
        sx: s(u, d),
        onClick: () => r(!o),
        onKeyDown: (n) => {
          (n.key === "Enter" || n.key === " ") && (n.preventDefault(), r(!o));
        },
        "aria-controls": t,
        "aria-expanded": o,
        children: [
          p,
          o ? /* @__PURE__ */ e(w, { sx: a }) : /* @__PURE__ */ e(y, { sx: a })
        ]
      }
    ),
    /* @__PURE__ */ e(h, { in: o, children: /* @__PURE__ */ e(i, { sx: s(g, x), children: /* @__PURE__ */ e("div", { id: t, children: f }) }) })
  ] });
}
export {
  j as default
};
//# sourceMappingURL=ComponentCollapse.js.map