import { jsxs as e, jsx as t } from "@emotion/react/jsx-runtime";
import { useStepper as i } from "../../hooks/useStepper/index.js";
import { useInitialStepKey as p } from "../../hooks/useInitialStepKey/index.js";
import { ContentAreaStyled as d, ContentAreaHeaderStyled as s, ContentAreaBodyStyled as m } from "../../slots/StepperSlot.js";
import { WrapperIcon as c } from "./subcomponents/WrapperIcon/index.js";
import { WrapperTitle as l } from "./subcomponents/WrapperTitle/index.js";
function x(r) {
  const { children: o } = r, { orientation: n } = i((a) => ({
    orientation: a.orientation
  }));
  return p(), /* @__PURE__ */ e(
    d,
    {
      ownerState: {
        orientation: n
      },
      "data-testid": "stepper-content-area",
      children: [
        /* @__PURE__ */ e(s, { "data-testid": "stepper-content-area-header", children: [
          /* @__PURE__ */ t(c, {}),
          /* @__PURE__ */ t(l, {})
        ] }),
        /* @__PURE__ */ t(m, { "data-testid": "stepper-content-area-body", children: o })
      ]
    }
  );
}
export {
  x as ContentArea
};
