import {
  Flex
} from "./chunk-TRY7VZOM.js";

// src/components/Title/Title.tsx
import classNames from "classnames/dedupe";
import "@simplybusiness/mobius/src/components/Title/Title.css";
import { jsx, jsxs } from "react/jsx-runtime";
var Title = ({ ref, ...props }) => {
  const {
    elementType: Element = "div",
    title,
    description,
    ...otherProps
  } = props;
  const classes = classNames("mobius", "mobius-title", otherProps.className);
  const headerClasses = classNames("mobius", "mobius-title__header");
  const contentClasses = classNames("mobius", "mobius-title__description");
  const containerClasses = classNames("mobius", "mobius-title__container");
  return /* @__PURE__ */ jsx(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", className: containerClasses, children: [
    /* @__PURE__ */ jsx("p", { className: headerClasses, children: title }),
    /* @__PURE__ */ jsx("p", { className: contentClasses, children: description })
  ] }) });
};
Title.displayName = "Title";

export {
  Title
};
//# sourceMappingURL=chunk-QQECBWD5.js.map
