@adyen/kyc-components
Version:
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.
106 lines (105 loc) • 4.61 kB
JavaScript
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] = "c4ed4b8d-607d-4587-9755-9fe7e13ca357", e._sentryDebugIdIdentifier = "sentry-dbid-c4ed4b8d-607d-4587-9755-9fe7e13ca357");
} 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": "_stack-layout_18zj6_1",
stackLayout: "_stack-layout_18zj6_1",
"stack-layout-gap-xs": "_stack-layout-gap-xs_18zj6_6",
stackLayoutGapXs: "_stack-layout-gap-xs_18zj6_6",
"stack-layout-gap-s": "_stack-layout-gap-s_18zj6_10",
stackLayoutGapS: "_stack-layout-gap-s_18zj6_10",
"stack-layout-gap-m": "_stack-layout-gap-m_18zj6_14",
stackLayoutGapM: "_stack-layout-gap-m_18zj6_14",
"stack-layout-gap-l": "_stack-layout-gap-l_18zj6_18",
stackLayoutGapL: "_stack-layout-gap-l_18zj6_18",
"stack-layout-gap-xl": "_stack-layout-gap-xl_18zj6_22",
stackLayoutGapXl: "_stack-layout-gap-xl_18zj6_22",
"stack-layout-left": "_stack-layout-left_18zj6_26",
stackLayoutLeft: "_stack-layout-left_18zj6_26",
"stack-layout-center": "_stack-layout-center_18zj6_30",
stackLayoutCenter: "_stack-layout-center_18zj6_30",
"stack-layout-right": "_stack-layout-right_18zj6_34",
stackLayoutRight: "_stack-layout-right_18zj6_34",
"stack-layout-item": "_stack-layout-item_18zj6_38",
stackLayoutItem: "_stack-layout-item_18zj6_38",
"stack-layout-horizontal": "_stack-layout-horizontal_18zj6_44",
stackLayoutHorizontal: "_stack-layout-horizontal_18zj6_44",
"stack-layout-left-horizontal": "_stack-layout-left-horizontal_18zj6_49",
stackLayoutLeftHorizontal: "_stack-layout-left-horizontal_18zj6_49",
"stack-layout-center-horizontal": "_stack-layout-center-horizontal_18zj6_53",
stackLayoutCenterHorizontal: "_stack-layout-center-horizontal_18zj6_53",
"stack-layout-right-horizontal": "_stack-layout-right-horizontal_18zj6_57",
stackLayoutRightHorizontal: "_stack-layout-right-horizontal_18zj6_57"
};
//#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 };