import { E as compilerRuntimeExports, j as jsxRuntimeExports } from "./vendor-react-DYNCg6N5.js";
import { c as createStyles, b as Box } from "./vendor-mantine-h0WlM2Mj.js";
const useStyles = createStyles((theme) => ({
  root: {
    height: "100%",
    width: "100%",
    marginBottom: theme.spacing.sm,
    backgroundColor: theme.white,
    borderRadius: theme.spacing.xs,
    padding: theme.spacing.md,
    position: "relative"
  },
  form: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "center"
  },
  title: {
    fontSize: "16px",
    marginBottom: theme.spacing.md,
    fontWeight: 600
  }
}));
const CommonSectionTemplate = (t0) => {
  const $ = compilerRuntimeExports.c(11);
  const {
    title,
    children,
    dataSection
  } = t0;
  const {
    classes
  } = useStyles();
  let t1;
  if ($[0] !== classes.title || $[1] !== title) {
    t1 = title && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.title, children: title });
    $[0] = classes.title;
    $[1] = title;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] !== children || $[4] !== classes.form) {
    t2 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: classes.form, children });
    $[3] = children;
    $[4] = classes.form;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  let t3;
  if ($[6] !== classes.root || $[7] !== dataSection || $[8] !== t1 || $[9] !== t2) {
    t3 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: classes.root, "data-section": dataSection, children: [
      t1,
      t2
    ] });
    $[6] = classes.root;
    $[7] = dataSection;
    $[8] = t1;
    $[9] = t2;
    $[10] = t3;
  } else {
    t3 = $[10];
  }
  return t3;
};
export {
  CommonSectionTemplate as C
};
//# sourceMappingURL=index-BRmgVx8q.js.map
