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] = "734fc6bd-b9ac-47f1-81b4-c5438965f76d", e._sentryDebugIdIdentifier = "sentry-dbid-734fc6bd-b9ac-47f1-81b4-c5438965f76d");
} catch (e) {}
import cx from "classnames";
import { jsx } from "preact/jsx-runtime";
import { Fragment as Fragment$1, toChildArray } from "preact";
var StackLayout_module_default = {
	"stack-layout": "adyen-kyc-stack-layout",
	stackLayout: "adyen-kyc-stack-layout",
	"stack-layout-gap-xs": "adyen-kyc-stack-layout-gap-xs",
	stackLayoutGapXs: "adyen-kyc-stack-layout-gap-xs",
	"stack-layout-gap-s": "adyen-kyc-stack-layout-gap-s",
	stackLayoutGapS: "adyen-kyc-stack-layout-gap-s",
	"stack-layout-gap-m": "adyen-kyc-stack-layout-gap-m",
	stackLayoutGapM: "adyen-kyc-stack-layout-gap-m",
	"stack-layout-gap-l": "adyen-kyc-stack-layout-gap-l",
	stackLayoutGapL: "adyen-kyc-stack-layout-gap-l",
	"stack-layout-gap-xl": "adyen-kyc-stack-layout-gap-xl",
	stackLayoutGapXl: "adyen-kyc-stack-layout-gap-xl",
	"stack-layout-left": "adyen-kyc-stack-layout-left",
	stackLayoutLeft: "adyen-kyc-stack-layout-left",
	"stack-layout-center": "adyen-kyc-stack-layout-center",
	stackLayoutCenter: "adyen-kyc-stack-layout-center",
	"stack-layout-right": "adyen-kyc-stack-layout-right",
	stackLayoutRight: "adyen-kyc-stack-layout-right",
	"stack-layout-item": "adyen-kyc-stack-layout-item",
	stackLayoutItem: "adyen-kyc-stack-layout-item",
	"stack-layout-horizontal": "adyen-kyc-stack-layout-horizontal",
	stackLayoutHorizontal: "adyen-kyc-stack-layout-horizontal",
	"stack-layout-left-horizontal": "adyen-kyc-stack-layout-left-horizontal",
	stackLayoutLeftHorizontal: "adyen-kyc-stack-layout-left-horizontal",
	"stack-layout-center-horizontal": "adyen-kyc-stack-layout-center-horizontal",
	stackLayoutCenterHorizontal: "adyen-kyc-stack-layout-center-horizontal",
	"stack-layout-right-horizontal": "adyen-kyc-stack-layout-right-horizontal",
	stackLayoutRightHorizontal: "adyen-kyc-stack-layout-right-horizontal"
};
//#endregion
//#region src/components/ui/layout/StackLayout/StackLayout.tsx
var gapStyles = {
	xSmall: StackLayout_module_default.stackLayoutGapXs,
	small: StackLayout_module_default.stackLayoutGapS,
	medium: StackLayout_module_default.stackLayoutGapM,
	large: StackLayout_module_default.stackLayoutGapL,
	xLarge: StackLayout_module_default.stackLayoutGapXl,
	none: null
};
var alignStyles = {
	left: StackLayout_module_default.stackLayoutLeft,
	center: StackLayout_module_default.stackLayoutCenter,
	right: StackLayout_module_default.stackLayoutRight,
	auto: null
};
var horizontalAlignStyles = {
	left: StackLayout_module_default.stackLayoutLeftHorizontal,
	center: StackLayout_module_default.stackLayoutCenterHorizontal,
	right: StackLayout_module_default.stackLayoutRightHorizontal,
	auto: ""
};
var flattenChildren = (children) => {
	return toChildArray(children).flatMap((child) => {
		if (typeof child === "object" && child.type === Fragment$1) return flattenChildren(child.props.children);
		return child;
	});
};
/**
* Layout helper to easily boostrap form and page layouts.
*
* It can be used to render children as a column or row. When rendered as a row, responsiveness is handle automatically. On small devices, children rendered as a row will be rendered as a column.
*  *
* @example
* ```jsx
* <StackLayout align="center" gap="large">
*   <div />
*   <div />
* </StackLayout>
*
* <StackLayout align="center" gap="large" horizontal>
*   <div />
*   <div />
* </StackLayout>
* ```
*
* @param align Specify how content should be rendered. Default: 'auto'.
* @param gap Specify spacing between children. Default: 'medium'.
* @param horizontal Specify if children are rendered as a row. Responsiveness is handled automatically.
*/
var StackLayout = ({ align = "auto", children, gap = "medium", horizontal = false }) => {
	const flattenedChildren = flattenChildren(children);
	return /* @__PURE__ */ jsx("div", {
		className: cx(StackLayout_module_default.stackLayout, gapStyles[gap], alignStyles[align], {
			[horizontalAlignStyles[align]]: horizontal,
			[StackLayout_module_default.stackLayoutHorizontal]: horizontal
		}),
		children: flattenedChildren.map((item, i) => {
			if (align === "auto") return /* @__PURE__ */ jsx("div", {
				className: StackLayout_module_default.stackLayoutItem,
				children: item
			}, item.key ?? i);
			return item;
		})
	});
};
//#endregion
export { StackLayout as t };
