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

// src/components/Fieldset/Fieldset.tsx
import classNames from "classnames/dedupe";
import { cloneElement, useId } from "react";
import "@simplybusiness/mobius/src/components/Fieldset/Fieldset.css";
import { jsx, jsxs } from "react/jsx-runtime";
var useFieldset = (props) => {
  const { legend } = props;
  let legendProps = {};
  let containerProps = {
    role: "group"
  };
  const legendId = useId();
  if (legend) {
    legendProps = {
      ...legendProps,
      id: legendId
    };
    containerProps = {
      ...containerProps,
      "aria-labelledby": legendId
    };
  }
  return {
    legendProps,
    containerProps
  };
};
var Fieldset = ({ ref: _ref, ...props }) => {
  const {
    children,
    legend,
    legendComponent = /* @__PURE__ */ jsx("legend", {}),
    ...otherProps
  } = props;
  const { legendProps, containerProps } = useFieldset(props);
  const classes = classNames("mobius", "mobius-fieldset", props.className);
  legendProps.className = "mobius-fieldset__legend";
  return /* @__PURE__ */ jsxs(Flex, { ...containerProps, ...otherProps, className: classes, children: [
    legend && cloneElement(legendComponent, { ...legendProps }, [legend]),
    children
  ] });
};
Fieldset.displayName = "Fieldset";

export {
  Fieldset
};
//# sourceMappingURL=chunk-IYPNHW47.js.map
