@adyen/kyc-components/dist/RadioGroup-7g7Xv9rl.js

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

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] = "b4b070c0-2552-4ec9-9674-a023c3928da4", e._sentryDebugIdIdentifier = "sentry-dbid-b4b070c0-2552-4ec9-9674-a023c3928da4");
} catch (e) {}
import { r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as useId } from "./useId-eJSYfA6i.js";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/ui/atoms/Radio/Radio.tsx
var Radio = ({ id, value, groupName, checked = false, disabled = false, onClick, className, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }) => /* @__PURE__ */ jsx("input", {
	"aria-labelledby": ariaLabelledBy,
	"aria-describedby": ariaDescribedBy,
	className: cx(["adyen-kyc-input-radio__input", className]),
	id,
	type: "radio",
	checked,
	name: groupName,
	onClick,
	value,
	disabled
});
//#endregion
//#region src/components/ui/atoms/RadioWithLabel/RadioWithLabel.tsx
var RadioWithLabel = ({ value, label, content, groupName, checked = false, disabled = false, onClick }) => {
	const id = useId("radio");
	return /* @__PURE__ */ jsxs("label", {
		htmlFor: id,
		className: "adyen-kyc-input-radio",
		children: [/* @__PURE__ */ jsx(Radio, {
			id,
			checked,
			groupName,
			onClick,
			value,
			disabled
		}), /* @__PURE__ */ jsxs("div", {
			className: "adyen-kyc-input-radio__content",
			children: [/* @__PURE__ */ jsx("span", {
				className: "adyen-kyc-input-radio__label adyen-kyc-label__text",
				children: label
			}), content]
		})]
	});
};
//#endregion
//#region src/components/ui/atoms/RadioGroup/RadioGroup.tsx
function RadioGroup({ items, name, onChange, value, disabled = false, horizontal = false, showContentOnlyOnSelected = false, className, enableTracking = false }) {
	const { t, i18n } = useTranslation("common");
	const userEvents = useAnalyticsContext();
	const handleChange = (id) => {
		if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
			actionType: "input",
			field: name,
			returnValue: value
		});
		onChange(id);
	};
	return /* @__PURE__ */ jsx("div", {
		className: cx([
			"adyen-kyc-radio-group",
			{ "adyen-kyc-radio-group--horizontal": horizontal },
			className
		]),
		children: items.map((item) => {
			const isSelected = item.id === value;
			const visibleContent = isSelected || !showContentOnlyOnSelected ? item.content : void 0;
			const keyExists = i18n.exists(item.name, { ns: "common" });
			return /* @__PURE__ */ jsx(RadioWithLabel, {
				value: item.id,
				label: keyExists ? t(($) => $[item.name]) : item.name,
				content: visibleContent,
				groupName: name,
				checked: isSelected,
				disabled,
				onClick: () => {
					handleChange(item.id);
				}
			}, item.id);
		})
	});
}
//#endregion
export { RadioWithLabel as n, RadioGroup as t };