;
{
  try {
    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "e8ad0e32-177b-4016-a8aa-3edcde6a16e5", e._sentryDebugIdIdentifier = "sentry-dbid-e8ad0e32-177b-4016-a8aa-3edcde6a16e5");
  } catch (e) {
  }
}
;
import { jsxs, jsx } from "preact/jsx-runtime";
import cx from "classnames";
import { defineSlots } from "named-slots";
import { r as Icon, z as Typography, a1 as Skeleton } from "./StoreProvider-CqQrndhS.js";
const accordion = "adyen-kyc-accordion";
const accordionSummary = "adyen-kyc-accordion-summary";
const accordionBasic = "adyen-kyc-accordion-basic";
const accordionInfo = "adyen-kyc-accordion-info";
const accordionError = "adyen-kyc-accordion-error";
const accordionWarning = "adyen-kyc-accordion-warning";
const accordionSuccess = "adyen-kyc-accordion-success";
const accordionNarrow = "adyen-kyc-accordion-narrow";
const accordionContent = "adyen-kyc-accordion-content";
const accordionWithIcon = "adyen-kyc-accordion-with-icon";
const accordionArrow = "adyen-kyc-accordion-arrow";
const accordionArrowRight = "adyen-kyc-accordion-arrow-right";
const styles = {
  accordion,
  accordionSummary,
  accordionBasic,
  accordionInfo,
  accordionError,
  accordionWarning,
  accordionSuccess,
  accordionNarrow,
  accordionContent,
  accordionWithIcon,
  accordionArrow,
  accordionArrowRight
};
const Accordion = ({
  children,
  expandOnLeft = false,
  onToggle,
  className,
  variant = "basic",
  narrow = false
}) => {
  const { Slot } = defineSlots(children, ["title", "content", "icon"]);
  const handleToggle = (e) => {
    if (!onToggle) return;
    onToggle(e.newState === "closed" ? "close" : "open");
  };
  const variantMap = {
    basic: styles.accordionBasic,
    info: styles.accordionInfo,
    error: styles.accordionError,
    warning: styles.accordionWarning,
    success: styles.accordionSuccess
  };
  return /* @__PURE__ */ jsxs(
    "details",
    {
      onToggle: handleToggle,
      className: cx(className, styles.accordion, variantMap[variant], {
        [styles.accordionWithIcon]: expandOnLeft,
        [styles.accordionNarrow]: narrow
      }),
      children: [
        /* @__PURE__ */ jsxs("summary", { className: styles.accordionSummary, children: [
          expandOnLeft && /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: styles.accordionArrow }),
          /* @__PURE__ */ jsx(Slot, { name: "icon" }),
          /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", children: /* @__PURE__ */ jsx(Slot, { name: "title", children: /* @__PURE__ */ jsx(Skeleton, {}) }) }),
          !expandOnLeft && /* @__PURE__ */ jsx(
            Icon,
            {
              name: "chevron-down",
              className: cx(styles.accordionArrow, styles.accordionArrowRight)
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: styles.accordionContent, children: /* @__PURE__ */ jsx(Slot, { name: "content", children: /* @__PURE__ */ jsx(Skeleton, {}) }) })
      ]
    }
  );
};
export {
  Accordion as A
};
