;
{
  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] = "96820dfb-e0e1-43b0-a329-42700f94a155", e._sentryDebugIdIdentifier = "sentry-dbid-96820dfb-e0e1-43b0-a329-42700f94a155");
  } catch (e) {
  }
}
;
import { jsxs, jsx } from "preact/jsx-runtime";
import { L as Loader, p as useAnalyticsContext } from "./StoreProvider-CqQrndhS.js";
import cx from "classnames";
import { a as useId } from "./useId-BZ0PA7jP.js";
import { R as Radio } from "./Radio-BMtxBpnn.js";
const RadioCard = ({
  optionId,
  optionName,
  optionDescription,
  optionSubtitle,
  name,
  isInvalid,
  isSelected,
  onSelect,
  classNames,
  disabled,
  loading,
  icon,
  body,
  footer,
  floatingRadio
}) => {
  const id = useId("radio");
  const elementIds = {
    label: `${id}-label`,
    description: `${id}-description`,
    subtitle: `${id}-subtitle`
  };
  const ariaDescribedBy = `${optionSubtitle ? elementIds.subtitle : ""} ${optionDescription || body ? elementIds.description : ""}`.trim();
  return /* @__PURE__ */ jsxs(
    "label",
    {
      "data-testId": optionId,
      className: cx([
        "adyen-kyc-radio-card",
        classNames?.label,
        { "adyen-kyc-radio-card--disabled": disabled }
      ]),
      children: [
        icon && /* @__PURE__ */ jsx("div", { className: cx("adyen-kyc-radio-card__icon", classNames?.icon), "aria-hidden": "true", children: icon }),
        /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-radio-card__content", children: [
          /* @__PURE__ */ jsx("div", { className: "adyen-kyc-radio-card__header adyen-kyc-u-display-flex adyen-kyc-u-align-items-center", children: /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx([
                "adyen-kyc-radio-group-card__label",
                classNames?.header,
                { "adyen-kyc-radio-group-card__label--invalid": isInvalid }
              ]),
              children: [
                optionSubtitle && /* @__PURE__ */ jsxs("div", { id: elementIds.subtitle, className: "adyen-kyc-radio-group-card__subtitle", children: [
                  optionSubtitle,
                  /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: "." })
                ] }),
                /* @__PURE__ */ jsx("span", { id: elementIds.label, children: optionName })
              ]
            }
          ) }),
          /* @__PURE__ */ jsx(
            "div",
            {
              id: elementIds.description,
              className: cx("adyen-kyc-radio-card__body", classNames?.body),
              children: body ?? optionDescription
            }
          ),
          footer && /* @__PURE__ */ jsx("div", { className: cx("adyen-kyc-radio-card__footer", classNames?.footer), children: footer })
        ] }),
        loading ? /* @__PURE__ */ jsx("span", { className: "adyen-kyc-radio-card__loading-icon", children: /* @__PURE__ */ jsx(Loader, { size: "small" }) }) : /* @__PURE__ */ jsx(
          Radio,
          {
            id,
            "aria-describedby": ariaDescribedBy,
            "aria-labelledby": elementIds.label,
            checked: isSelected,
            groupName: name,
            onClick: onSelect,
            value: optionId,
            disabled,
            className: cx({ "adyen-kyc-radio-group-card__radio--floating": floatingRadio })
          }
        )
      ]
    },
    optionId
  );
};
const RadioGroupCard = ({
  options,
  name,
  onSelect,
  selected,
  isInvalid,
  className,
  optionId,
  optionName,
  optionDescription,
  optionSubtitle,
  optionClassNames,
  renderOptionIcon,
  renderOptionBody,
  renderOptionFooter,
  isOptionDisabled,
  floatingRadio,
  enableTracking = false
}) => {
  const userEvents = useAnalyticsContext();
  const handleSelect = (option) => {
    if (enableTracking) {
      userEvents.addFieldEvent("Interacted with form field", {
        actionType: "input",
        field: name,
        returnValue: typeof option === "string" ? option : void 0
      });
    }
    onSelect(option);
  };
  return /* @__PURE__ */ jsx("div", { className: className ?? "adyen-kyc-radio-group-card", children: options.map((option) => /* @__PURE__ */ jsx(
    RadioCard,
    {
      optionId: optionId(option),
      optionName: optionName(option),
      optionDescription: optionDescription?.(option),
      optionSubtitle: optionSubtitle?.(option),
      isInvalid,
      isSelected: selected === option,
      onSelect: () => {
        handleSelect(option);
      },
      name,
      classNames: optionClassNames?.(option),
      icon: renderOptionIcon?.(option),
      body: renderOptionBody?.(option),
      footer: renderOptionFooter?.(option),
      disabled: isOptionDisabled?.(option),
      floatingRadio
    },
    optionId(option)
  )) });
};
export {
  RadioGroupCard as R
};
