@dfx.swiss/react-components 1.0.1 → 1.0.2-beta.2

package/dist/stories/form/StyledDropdown.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import DfxIcon, { IconColor, IconSize, IconVariant } from '../DfxIcon';
+import { Controller } from 'react-hook-form';
+import DfxAssetIcon from '../DfxAssetIcon';
+export default function StyledDropdown(_a) {
+    var label = _a.label, labelIcon = _a.labelIcon, control = _a.control, name = _a.name, rules = _a.rules, disabled = _a.disabled, items = _a.items, placeholder = _a.placeholder, full = _a.full, smallLabel = _a.smallLabel, labelFunc = _a.labelFunc, balanceFunc = _a.balanceFunc, descriptionFunc = _a.descriptionFunc, priceFunc = _a.priceFunc, assetIconFunc = _a.assetIconFunc, props = __rest(_a, ["label", "labelIcon", "control", "name", "rules", "disabled", "items", "placeholder", "full", "smallLabel", "labelFunc", "balanceFunc", "descriptionFunc", "priceFunc", "assetIconFunc"]);
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var buttonClasses = 'flex justify-between border border-dfxGray-500 px-4 py-3 shadow-sm w-full';
+    isOpen ? (buttonClasses += ' rounded-x rounded-t bg-dfxGray-400/50') : (buttonClasses += ' rounded');
+    var isDisabled = disabled || items.length <= 1;
+    return (_jsx(Controller, { control: control, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, onBlur = _b.onBlur, value = _b.value;
+            return (_jsxs("div", __assign({ className: "relative ".concat(full ? 'w-full' : '') }, { children: [_jsxs("div", __assign({ className: "flex items-center ml-3.5 mb-2.5" }, { children: [labelIcon !== undefined && _jsx(DfxIcon, { icon: labelIcon, size: IconSize.SM, color: IconColor.BLUE }), _jsx("label", __assign({ className: "text-dfxBlue-800 ".concat(smallLabel ? 'text-sm' : 'text-base', " font-semibold ").concat(labelIcon ? 'pl-3.5' : '') }, { children: label }))] })), _jsxs("button", __assign({ id: "dropDownButton", type: "button", onClick: function () { return setIsOpen(!isOpen); }, className: buttonClasses, onBlur: onBlur, disabled: isDisabled }, props, { children: [_jsxs("div", __assign({ className: "flex flex-row gap-2 items-center w-full" }, { children: [value && assetIconFunc && _jsx(DfxAssetIcon, { asset: assetIconFunc(value) }), _jsx("div", __assign({ className: "flex flex-col gap-1 justify-between text-left w-full" }, { children: value === undefined ? (_jsx("p", __assign({ className: "text-dfxGray-600 drop-shadow-none py-[0.25rem]" }, { children: placeholder }))) : (_jsxs(_Fragment, { children: [_jsxs("span", __assign({ className: "text-dfxBlue-800 leading-none font-semibold flex justify-between ".concat(!descriptionFunc && !assetIconFunc ? 'py-[0.25rem]' : '') }, { children: [labelFunc(value), balanceFunc && _jsx("p", { children: balanceFunc(value) })] })), descriptionFunc && (_jsxs("span", __assign({ className: "text-dfxGray-800 text-xs h-min leading-none flex justify-between" }, { children: [descriptionFunc(value), priceFunc && _jsx("p", { children: priceFunc(value) })] })))] })) }))] })), !isDisabled && (_jsx("div", __assign({ className: "place-self-center" }, { children: _jsx(DfxIcon, { icon: isOpen ? IconVariant.EXPAND_LESS : IconVariant.EXPAND_MORE, size: IconSize.LG }) })))] })), isOpen && (_jsx("div", __assign({ className: "absolute bg-white rounded-b w-full z-10" }, { children: items.map(function (item, index) { return (_jsx("button", __assign({ onClick: function () {
+                                onChange(item);
+                                setIsOpen(false);
+                            }, className: "flex flex-col gap-2 justify-between text-left border-x border-dfxGray-500 w-full hover:bg-dfxGray-400/50 last:border-b last:rounded-b px-3.5 py-2.5" }, { children: _jsxs("div", __assign({ className: "flex flex-row gap-2 items-center w-full" }, { children: [assetIconFunc && _jsx(DfxAssetIcon, { asset: assetIconFunc(item) }), _jsxs("div", __assign({ className: "flex flex-col gap-1 justify-between text-left w-full" }, { children: [_jsxs("span", __assign({ className: "text-dfxBlue-800 leading-none font-semibold flex justify-between ".concat(!descriptionFunc && !assetIconFunc ? 'py-[0.25rem]' : '') }, { children: [labelFunc(item), balanceFunc && _jsx("p", { children: balanceFunc(item) })] })), descriptionFunc && (_jsxs("span", __assign({ className: "text-dfxGray-800 text-xs h-min leading-none flex justify-between" }, { children: [descriptionFunc(item), priceFunc && _jsx("p", { children: priceFunc(item) })] })))] }))] })) }), index)); }) })))] })));
+        }, name: name, rules: rules }));
+}
+//# sourceMappingURL=StyledDropdown.js.map

package/dist/stories/form/StyledDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDropdown.js","sourceRoot":"","sources":["../../../src/stories/form/StyledDropdown.tsx"],"names":[],"mappings":"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"}

package/dist/stories/form/StyledInput.d.ts

@@ -0,0 +1,18 @@
+import { HTMLInputTypeAttribute } from 'react';
+import { ControlProps } from './Form';
+interface StyledInputProps extends ControlProps {
+    type?: HTMLInputTypeAttribute;
+    placeholder?: string;
+    prefix?: string;
+    forceError?: boolean;
+    forceErrorMessage?: string;
+    hideLabel?: boolean;
+    darkTheme?: boolean;
+    full?: boolean;
+    loading?: boolean;
+    small?: boolean;
+    smallLabel?: boolean;
+}
+declare const StyledInput: import("react").ForwardRefExoticComponent<StyledInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default StyledInput;
+//# sourceMappingURL=StyledInput.d.ts.map

package/dist/stories/form/StyledInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledInput.d.ts","sourceRoot":"","sources":["../../../src/stories/form/StyledInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,UAAU,gBAAiB,SAAQ,YAAY;IAC7C,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAmBD,QAAA,MAAM,WAAW,+GAwFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/stories/form/StyledInput.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Controller } from 'react-hook-form';
+import StyledVerticalStack from '../layout-helpers/StyledVerticalStack';
+import StyledLoadingSpinner from '../StyledLoadingSpinner';
+function getLeftMargin(prefix) {
+    switch (prefix.length) {
+        case 1:
+            return 'pl-7';
+        case 2:
+            return 'pl-9';
+        case 3:
+            return 'pl-12';
+        case 4:
+            return 'pl-15';
+        case 5:
+            return 'pl-16';
+        default:
+            return '';
+    }
+}
+var StyledInput = forwardRef(function (_a, ref) {
+    var control = _a.control, name = _a.name, label = _a.label, rules = _a.rules, _b = _a.disabled, disabled = _b === void 0 ? false : _b, error = _a.error, _c = _a.type, type = _c === void 0 ? 'text' : _c, placeholder = _a.placeholder, prefix = _a.prefix, _d = _a.forceError, forceError = _d === void 0 ? false : _d, forceErrorMessage = _a.forceErrorMessage, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, _f = _a.darkTheme, darkTheme = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, _h = _a.full, full = _h === void 0 ? false : _h, _j = _a.small, small = _j === void 0 ? false : _j, _k = _a.smallLabel, smallLabel = _k === void 0 ? false : _k, props = __rest(_a, ["control", "name", "label", "rules", "disabled", "error", "type", "placeholder", "prefix", "forceError", "forceErrorMessage", "hideLabel", "darkTheme", "loading", "full", "small", "smallLabel"]);
+    var textColor = darkTheme ? 'text-white' : 'text-dfxBlue-800';
+    var backgroundColor = darkTheme ? 'bg-white bg-opacity-5' : 'bg-white';
+    var placeholderColor = darkTheme ? 'placeholder:text-dfxGray-800' : 'placeholder:text-dfxGray-600';
+    var borderColor = darkTheme ? 'border-none' : 'border border-dfxGray-500';
+    var outlineColor = darkTheme ? 'outline-none' : 'outline-2 outline-dfxBlue-400';
+    var leftMargin = prefix ? getLeftMargin(prefix) : '';
+    var textOrErrorColor = forceError ? 'text-dfxRed-100' : textColor;
+    return (_jsx(Controller, { control: control, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, onBlur = _b.onBlur, value = _b.value;
+            return (_jsxs(StyledVerticalStack, __assign({ gap: 1, full: full }, { children: [_jsx("label", __assign({ hidden: hideLabel, className: "text-start ".concat(smallLabel ? 'text-sm' : 'text-base', " font-semibold pl-3 pl- ") + [textColor].join(' ') }, { children: label })), _jsxs("div", __assign({ className: "relative" }, { children: [prefix && (_jsx("div", __assign({ className: "text-dfxGray-800 absolute h-[50px] ".concat(prefix.length > 0 ? 'left-3' : '', " flex justify-center items-center") }, { children: _jsx("p", { children: prefix }) }))), loading && (_jsx("div", __assign({ className: "absolute right-3 h-[50px] w-8 flex justify-center items-center pl-" }, { children: _jsx(StyledLoadingSpinner, {}) }))), _jsx("input", __assign({ className: "text-base font-normal rounded-md p-3 ".concat(small ? 'w-24' : 'w-full', " ") +
+                                    [textOrErrorColor, backgroundColor, placeholderColor, borderColor, outlineColor, leftMargin].join(' '), type: type, inputMode: type === 'number' ? 'decimal' : undefined, onBlur: onBlur, onChange: function (value) { return onChange(value.target.value); }, placeholder: placeholder, value: value !== null && value !== void 0 ? value : '', disabled: disabled, ref: ref, onWheel: function (e) { return type === 'number' && e.currentTarget.blur(); } }, props))] })), (forceErrorMessage || error) && (_jsx("p", __assign({ className: "text-start text-sm text-dfxRed-100 pl-3" }, { children: forceErrorMessage !== null && forceErrorMessage !== void 0 ? forceErrorMessage : error === null || error === void 0 ? void 0 : error.message })))] })));
+        }, name: name, rules: rules }));
+});
+export default StyledInput;
+//# sourceMappingURL=StyledInput.js.map

package/dist/stories/form/StyledInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledInput.js","sourceRoot":"","sources":["../../../src/stories/form/StyledInput.tsx"],"names":[],"mappings":"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"}

package/dist/stories/form/StyledModalDropdown.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ControlProps } from './Form';
+interface StyledModalDropdownProps<T> extends ControlProps {
+    placeholder: string;
+    labelFunc: (item: T) => string;
+    descriptionFunc?: (item: T) => string | undefined;
+    modal: {
+        heading: string;
+        items: T[];
+        itemContent: (item: T) => JSX.Element;
+        form?: (onFormSubmit: (item: T) => void) => JSX.Element;
+    };
+}
+export default function StyledModalDropdown<T>({ control, name, label, rules, modal, placeholder, labelFunc, descriptionFunc, ...props }: StyledModalDropdownProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=StyledModalDropdown.d.ts.map

package/dist/stories/form/StyledModalDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledModalDropdown.d.ts","sourceRoot":"","sources":["../../../src/stories/form/StyledModalDropdown.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,UAAU,wBAAwB,CAAC,CAAC,CAAE,SAAQ,YAAY;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,KAAK,EAAE;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,CAAC,EAAE,CAAC;QACX,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,OAAO,CAAC;KACzD,CAAC;CACH;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,CAAC,EAAE,EAC7C,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA8E3C"}

package/dist/stories/form/StyledModalDropdown.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Controller } from 'react-hook-form';
+import DfxIcon, { IconSize, IconVariant } from '../DfxIcon';
+import StyledVerticalStack from '../layout-helpers/StyledVerticalStack';
+import StyledModal, { StyledModalColor } from '../StyledModal';
+export default function StyledModalDropdown(_a) {
+    var control = _a.control, name = _a.name, label = _a.label, rules = _a.rules, modal = _a.modal, placeholder = _a.placeholder, labelFunc = _a.labelFunc, descriptionFunc = _a.descriptionFunc, props = __rest(_a, ["control", "name", "label", "rules", "modal", "placeholder", "labelFunc", "descriptionFunc"]);
+    var _b = useState(false), showModal = _b[0], setShowModal = _b[1];
+    return (_jsx(Controller, { control: control, render: function (_a) {
+            var _b = _a.field, onChange = _b.onChange, onBlur = _b.onBlur, value = _b.value;
+            return (_jsxs(_Fragment, { children: [_jsxs(StyledModal, __assign({ isVisible: showModal, onClose: setShowModal, heading: modal.heading, color: StyledModalColor.WHITE }, { children: [modal.items.length > 0 && (_jsx(StyledVerticalStack, __assign({ gap: 4 }, { children: modal.items
+                                    .map(function (item) { return ({ item: item, content: modal.itemContent(item) }); })
+                                    .map(function (obj, index) { return (_jsx("button", __assign({ className: "text-start", onClick: function () {
+                                        onChange(obj.item);
+                                        setShowModal(false);
+                                    } }, { children: obj.content }), index)); }) }))), modal.form && (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-[1px] bg-dfxGray-400 -mx-14 my-6" }), modal.form(function (item) {
+                                        onChange(item);
+                                        setShowModal(false);
+                                    })] }))] })), _jsxs(StyledVerticalStack, __assign({ gap: 1, marginY: 4 }, { children: [_jsx("label", __assign({ className: "text-dfxBlue-800 text-base font-semibold pl-4" }, { children: label })), _jsxs("button", __assign({ className: "flex justify-between border border-dfxGray-400 text-base font-normal rounded-md px-4 py-2 shadow-sm w-full", onClick: function () { return setShowModal(true); }, onBlur: onBlur }, props, { children: [_jsx("div", __assign({ className: "flex flex-col justify-between text-left gap-1" }, { children: value ? (_jsxs(_Fragment, { children: [(descriptionFunc === null || descriptionFunc === void 0 ? void 0 : descriptionFunc(value)) && (_jsx("span", __assign({ className: "text-dfxGray-800 text-xs h-min leading-none" }, { children: descriptionFunc(value) }))), _jsx("span", __assign({ className: 'text-dfxBlue-800 leading-none font-base'.concat((descriptionFunc === null || descriptionFunc === void 0 ? void 0 : descriptionFunc(value)) ? '' : ' py-2') }, { children: labelFunc(value) }))] })) : (_jsx("span", __assign({ className: "text-dfxGray-600 py-1" }, { children: placeholder }))) })), _jsx("div", __assign({ className: "place-self-center" }, { children: _jsx(DfxIcon, { icon: IconVariant.UNFOLD_MORE, size: IconSize.LG }) }))] }))] }))] }));
+        }, name: name, rules: rules }));
+}
+//# sourceMappingURL=StyledModalDropdown.js.map

package/dist/stories/form/StyledModalDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledModalDropdown.js","sourceRoot":"","sources":["../../../src/stories/form/StyledModalDropdown.tsx"],"names":[],"mappings":"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"}

package/dist/stories/layout-helpers/LayoutFunctions.d.ts

@@ -0,0 +1,2 @@
+export declare function convertToRem(value: number): string;
+//# sourceMappingURL=LayoutFunctions.d.ts.map

package/dist/stories/layout-helpers/LayoutFunctions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutFunctions.d.ts","sourceRoot":"","sources":["../../../src/stories/layout-helpers/LayoutFunctions.tsx"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD"}

package/dist/stories/layout-helpers/LayoutFunctions.js

@@ -0,0 +1,4 @@
+export function convertToRem(value) {
+    return "".concat(value / 4, "rem");
+}
+//# sourceMappingURL=LayoutFunctions.js.map

package/dist/stories/layout-helpers/LayoutFunctions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutFunctions.js","sourceRoot":"","sources":["../../../src/stories/layout-helpers/LayoutFunctions.tsx"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY,CAAC,KAAa;IACxC,OAAO,UAAG,KAAK,GAAG,CAAC,QAAK,CAAC;AAC3B,CAAC"}

package/dist/stories/layout-helpers/StyledHorizontalStack.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export interface StyledHorizontalStackProps extends PropsWithChildren {
+    gap?: number;
+    spanAcross?: boolean;
+    center?: boolean;
+    marginX?: number;
+    marginY?: number;
+}
+export default function StyledHorizontalStack({ children, gap, spanAcross, marginY, marginX, center, }: StyledHorizontalStackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledHorizontalStack.d.ts.map

package/dist/stories/layout-helpers/StyledHorizontalStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledHorizontalStack.d.ts","sourceRoot":"","sources":["../../../src/stories/layout-helpers/StyledHorizontalStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB;IACnE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAQ,EACR,GAAO,EACP,UAAU,EACV,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE,0BAA0B,2CAc5B"}

package/dist/stories/layout-helpers/StyledHorizontalStack.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { convertToRem } from './LayoutFunctions';
+export default function StyledHorizontalStack(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 0 : _b, spanAcross = _a.spanAcross, marginY = _a.marginY, marginX = _a.marginX, center = _a.center;
+    var spacing = convertToRem(gap);
+    var mY = marginY != undefined ? convertToRem(marginY) : '0';
+    var mX = marginX != undefined ? convertToRem(marginX) : '0';
+    var classNames = 'flex ';
+    center && (classNames += 'justify-center ');
+    spanAcross && (classNames += 'justify-between ');
+    return (_jsx("div", __assign({ style: { gap: spacing, margin: mY + ' ' + mX }, className: classNames }, { children: children })));
+}
+//# sourceMappingURL=StyledHorizontalStack.js.map

package/dist/stories/layout-helpers/StyledHorizontalStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledHorizontalStack.js","sourceRoot":"","sources":["../../../src/stories/layout-helpers/StyledHorizontalStack.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUjD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAOjB;QAN3B,QAAQ,cAAA,EACR,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA,EACP,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,OAAO,aAAA,EACP,MAAM,YAAA;IAEN,IAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,IAAM,EAAE,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9D,IAAM,EAAE,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE9D,IAAI,UAAU,GAAG,OAAO,CAAC;IACzB,MAAM,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAC,CAAC;IAC5C,UAAU,IAAI,CAAC,UAAU,IAAI,kBAAkB,CAAC,CAAC;IAEjD,OAAO,CACL,uBAAK,KAAK,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,GAAG,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,gBACvE,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/layout-helpers/StyledSpacer.d.ts

@@ -0,0 +1,6 @@
+export interface StyledSpacerProps {
+    showLine?: boolean;
+    spacing: number;
+}
+export default function StyledSpacer({ showLine, spacing }: StyledSpacerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledSpacer.d.ts.map

package/dist/stories/layout-helpers/StyledSpacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledSpacer.d.ts","sourceRoot":"","sources":["../../../src/stories/layout-helpers/StyledSpacer.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAM5E"}

package/dist/stories/layout-helpers/StyledSpacer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { convertToRem } from './LayoutFunctions';
+export default function StyledSpacer(_a) {
+    var showLine = _a.showLine, spacing = _a.spacing;
+    var spacerClasses = showLine ? 'border-t border-dfxGray-400' : '';
+    var margin = convertToRem(spacing);
+    return _jsx("div", { style: { margin: margin + ' 0' }, className: spacerClasses });
+}
+//# sourceMappingURL=StyledSpacer.js.map

package/dist/stories/layout-helpers/StyledSpacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledSpacer.js","sourceRoot":"","sources":["../../../src/stories/layout-helpers/StyledSpacer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAwC;QAAtC,QAAQ,cAAA,EAAE,OAAO,aAAA;IACtD,IAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,IAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAErC,OAAO,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,SAAS,EAAE,aAAa,GAAQ,CAAC;AACjF,CAAC"}

package/dist/stories/layout-helpers/StyledVerticalStack.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export interface StyledVerticalStackProps extends PropsWithChildren {
+    gap?: number;
+    marginY?: number;
+    marginX?: number;
+    center?: boolean;
+    full?: boolean;
+}
+export default function StyledVerticalStack({ children, gap, marginY, marginX, center, full, }: StyledVerticalStackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledVerticalStack.d.ts.map

package/dist/stories/layout-helpers/StyledVerticalStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledVerticalStack.d.ts","sourceRoot":"","sources":["../../../src/stories/layout-helpers/StyledVerticalStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,GAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,IAAI,GACL,EAAE,wBAAwB,2CAa1B"}

package/dist/stories/layout-helpers/StyledVerticalStack.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { convertToRem } from './LayoutFunctions';
+export default function StyledVerticalStack(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 0 : _b, marginY = _a.marginY, marginX = _a.marginX, center = _a.center, full = _a.full;
+    var spacing = convertToRem(gap);
+    var mY = marginY != undefined ? convertToRem(marginY) : '0';
+    var mX = marginX != undefined ? convertToRem(marginX) : '0';
+    var classNames = 'flex flex-col ';
+    center && (classNames += 'items-center ');
+    full && (classNames += 'w-full ');
+    return (_jsx("div", __assign({ style: { gap: spacing, margin: mY + ' ' + mX }, className: classNames }, { children: children })));
+}
+//# sourceMappingURL=StyledVerticalStack.js.map

package/dist/stories/layout-helpers/StyledVerticalStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledVerticalStack.js","sourceRoot":"","sources":["../../../src/stories/layout-helpers/StyledVerticalStack.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUjD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAOjB;QANzB,QAAQ,cAAA,EACR,WAAO,EAAP,GAAG,mBAAG,CAAC,KAAA,EACP,OAAO,aAAA,EACP,OAAO,aAAA,EACP,MAAM,YAAA,EACN,IAAI,UAAA;IAEJ,IAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,IAAM,EAAE,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9D,IAAM,EAAE,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9D,IAAI,UAAU,GAAG,gBAAgB,CAAC;IAClC,MAAM,IAAI,CAAC,UAAU,IAAI,eAAe,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAElC,OAAO,CACL,uBAAK,KAAK,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,GAAG,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,gBACvE,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+export declare class Utils {
+    static formatIban(iban?: string): string | null;
+}
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,qBAAa,KAAK;IAChB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;CAGhD"}

package/dist/utils.js

@@ -0,0 +1,11 @@
+import * as IbanTools from 'ibantools';
+var Utils = /** @class */ (function () {
+    function Utils() {
+    }
+    Utils.formatIban = function (iban) {
+        return IbanTools.friendlyFormatIBAN(iban);
+    };
+    return Utils;
+}());
+export { Utils };
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAEvC;IAAA;IAIA,CAAC;IAHQ,gBAAU,GAAjB,UAAkB,IAAa;QAC7B,OAAO,SAAS,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IACH,YAAC;AAAD,CAAC,AAJD,IAIC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@dfx.swiss/react-components",
-  "version": "1.0.1",
+  "version": "1.0.2-beta.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -87,5 +87,5 @@
     "tailwindcss": "^3.2.4",
     "webpack": "^5.75.0"
   },
-  "gitHead": "d693586268687b453fc9a42f0cad82f0f7f4cdc8"
+  "gitHead": "db7059e98a46f09f7a1e73d9a2577ffc7130151f"
 }