import { jsx, jsxs } from 'react/jsx-runtime';
import { createContext, forwardRef, useContext, useId, useState, useMemo } from 'react';
import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
import { I as Icon } from './Icon-BMMbp40n.js';
import { c as cx } from './index-De1g9FRV.js';
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
import { useTrackingId } from './useTrackingId.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';

import './Details.css';const DetailsContext = createContext({
  id: "",
  isExpanded: false,
  expanded: () => void 0,
  close: () => void 0,
  toggle: () => void 0
});

const details = "_details_10ce6_1";
const summary = "_summary_10ce6_17";
const arrow = "_arrow_10ce6_85";
const content = "_content_10ce6_101";
const expanded = "_expanded_10ce6_144";
const styles = {
	details: details,
	summary: summary,
	arrow: arrow,
	"is-expanded": "_is-expanded_10ce6_97",
	"content-wrapper": "_content-wrapper_10ce6_101",
	content: content,
	expanded: expanded
};

const DetailsArrow = forwardRef(
  function DetailsArrow2({ className: classNameProp, ...rest }, ref) {
    const { isExpanded } = useContext(DetailsContext);
    const className = cx(
      styles.arrow,
      { [styles["is-expanded"]]: isExpanded },
      classNameProp
    );
    return /* @__PURE__ */ jsx("span", { className, ref, ...rest, children: /* @__PURE__ */ jsx(Icon, { size: "large", svg: SvgChevronRight }) });
  }
);

const DetailsSummary = forwardRef(function DetailsSummary2({ children, onClick: onClickProp, className: classNameProp, ...rest }, ref) {
  const { id, isExpanded, toggle } = useContext(DetailsContext);
  const handleClick = (...args) => {
    onClickProp?.(...args);
    toggle();
  };
  const data = {
    children: childrenToString(children)
  };
  const trackingId = useTrackingId({
    name: "DetailsSummary",
    data,
    hasOverride: !!rest["data-tracking-id"]
  });
  const className = cx(styles.summary, classNameProp);
  return /* @__PURE__ */ jsxs(
    "button",
    {
      "data-tracking-id": trackingId,
      "data-anv": "details-summary",
      "aria-controls": id,
      "aria-expanded": isExpanded,
      className,
      onClick: handleClick,
      ref,
      ...rest,
      children: [
        /* @__PURE__ */ jsx(DetailsArrow, {}),
        children
      ]
    }
  );
});

const DetailsContent = forwardRef(
  function DetailsContent2({
    className: classNameProp,
    children,
    height,
    maxHeight,
    style: styleProp,
    ...rest
  }, ref) {
    const { id, isExpanded } = useContext(DetailsContext);
    const style = {
      height,
      maxHeight,
      ...height || maxHeight ? { overflow: "auto" } : {},
      ...styleProp
    };
    return /* @__PURE__ */ jsx(
      "div",
      {
        "data-anv": "details-content",
        id,
        className: cx(styles["content-wrapper"], {
          [styles.expanded]: isExpanded
        }),
        ref,
        children: /* @__PURE__ */ jsx("div", { className: styles.content, children: /* @__PURE__ */ jsx("div", { className: classNameProp, style, ...rest, children }) })
      }
    );
  }
);

const Details = Object.assign(
  forwardRef(function DetailsInner(props, ref) {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      children,
      id: idProp,
      expanded: expandedControlled,
      defaultExpanded = false,
      style,
      className,
      ...rest
    } = componentProps;
    const id = useId();
    const [isExpanded, setIsOpen] = useState(defaultExpanded);
    function expanded() {
      setIsOpen(true);
    }
    function close() {
      setIsOpen(false);
    }
    function toggle() {
      setIsOpen((prevIsOpen) => !prevIsOpen);
    }
    const value = useMemo(
      () => ({
        id: idProp != null ? idProp : id,
        isExpanded: expandedControlled != null ? expandedControlled : isExpanded,
        expanded,
        close,
        toggle
      }),
      [id, idProp, isExpanded, expandedControlled]
    );
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    return /* @__PURE__ */ jsx(DetailsContext.Provider, { value, children: /* @__PURE__ */ jsx(
      "div",
      {
        "data-anv": "details",
        ref,
        className: cx(styles.details, className),
        style: styleCombined,
        ...rest,
        children
      }
    ) });
  }),
  {
    Summary: DetailsSummary,
    Content: DetailsContent
  }
);
Details.displayName = "Details";

export { Details as D };
//# sourceMappingURL=Details-DYRJcLWL.js.map
