import {
  useDrawer
} from "./chunk-GZFZXQRU.js";
import {
  Button
} from "./chunk-FD3JTY5L.js";
import {
  Icon
} from "./chunk-TKIP5Q5H.js";

// src/components/Drawer/Header.tsx
import { cross } from "@simplybusiness/icons";
import { jsx, jsxs } from "react/jsx-runtime";
var Header = ({ ref, children, ...otherProps }) => {
  const { onClose, closeLabel, headerId } = useDrawer();
  return /* @__PURE__ */ jsxs("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
    /* @__PURE__ */ jsx("h2", { id: headerId, children }),
    /* @__PURE__ */ jsxs(
      Button,
      {
        "aria-label": "Close",
        variant: "basic",
        onPress: onClose,
        className: "mobius-drawer__close",
        size: "sm",
        children: [
          /* @__PURE__ */ jsx(Icon, { icon: cross }),
          " ",
          closeLabel
        ]
      }
    )
  ] });
};
Header.displayName = "Header";

export {
  Header
};
//# sourceMappingURL=chunk-UZV5PZ7R.js.map
