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

package/dist/stories/StyledLoadingSpinner.js

@@ -0,0 +1,35 @@
+var _a, _b, _c;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpinnerCircular } from 'spinners-react';
+export var SpinnerVariant;
+(function (SpinnerVariant) {
+    SpinnerVariant["DARK_MODE"] = "DARK_MODE";
+    SpinnerVariant["LIGHT_MODE"] = "LIGHT_MODE";
+    SpinnerVariant["PALE"] = "PALE";
+})(SpinnerVariant || (SpinnerVariant = {}));
+export var SpinnerSize;
+(function (SpinnerSize) {
+    SpinnerSize["SM"] = "SMALL";
+    SpinnerSize["MD"] = "MEDIUM";
+    SpinnerSize["LG"] = "LARGE";
+})(SpinnerSize || (SpinnerSize = {}));
+var SIZE_MAPS = (_a = {},
+    _a[SpinnerSize.SM] = 10,
+    _a[SpinnerSize.MD] = 20,
+    _a[SpinnerSize.LG] = 30,
+    _a);
+var THICKNESS_MAPS = (_b = {},
+    _b[SpinnerSize.SM] = 350,
+    _b[SpinnerSize.MD] = 250,
+    _b[SpinnerSize.LG] = 200,
+    _b);
+var VARIANT_MAPS = (_c = {},
+    _c[SpinnerVariant.DARK_MODE] = { primaryColor: '#F5516C', secondaryColor: 'rgba(255,255,255,0.2)' },
+    _c[SpinnerVariant.LIGHT_MODE] = { primaryColor: '#F5516C', secondaryColor: 'rgba(7,36,64,0.2)' },
+    _c[SpinnerVariant.PALE] = { primaryColor: '#ffffff', secondaryColor: 'rgba(255,255,255,0.2)' },
+    _c);
+export default function StyledLoadingSpinner(_a) {
+    var _b = _a.variant, variant = _b === void 0 ? SpinnerVariant.DARK_MODE : _b, _c = _a.size, size = _c === void 0 ? SpinnerSize.MD : _c;
+    return (_jsx(SpinnerCircular, { size: SIZE_MAPS[size], thickness: THICKNESS_MAPS[size], speed: 105, color: VARIANT_MAPS[variant].primaryColor, secondaryColor: VARIANT_MAPS[variant].secondaryColor }));
+}
+//# sourceMappingURL=StyledLoadingSpinner.js.map

package/dist/stories/StyledLoadingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledLoadingSpinner.js","sourceRoot":"","sources":["../../src/stories/StyledLoadingSpinner.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAOjD,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,yCAAuB,CAAA;IACvB,2CAAyB,CAAA;IACzB,+BAAa,CAAA;AACf,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AAED,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,2BAAY,CAAA;IACZ,4BAAa,CAAA;IACb,2BAAY,CAAA;AACd,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED,IAAM,SAAS;IACb,GAAC,WAAW,CAAC,EAAE,IAAG,EAAE;IACpB,GAAC,WAAW,CAAC,EAAE,IAAG,EAAE;IACpB,GAAC,WAAW,CAAC,EAAE,IAAG,EAAE;OACrB,CAAC;AAEF,IAAM,cAAc;IAClB,GAAC,WAAW,CAAC,EAAE,IAAG,GAAG;IACrB,GAAC,WAAW,CAAC,EAAE,IAAG,GAAG;IACrB,GAAC,WAAW,CAAC,EAAE,IAAG,GAAG;OACtB,CAAC;AAOF,IAAM,YAAY;IAChB,GAAC,cAAc,CAAC,SAAS,IAAG,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,uBAAuB,EAAE;IAChG,GAAC,cAAc,CAAC,UAAU,IAAG,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,mBAAmB,EAAE;IAC7F,GAAC,cAAc,CAAC,IAAI,IAAG,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,uBAAuB,EAAE;OAC5F,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAGjB;QAF1B,eAAkC,EAAlC,OAAO,mBAAG,cAAc,CAAC,SAAS,KAAA,EAClC,YAAqB,EAArB,IAAI,mBAAG,WAAW,CAAC,EAAE,KAAA;IAErB,OAAO,CACL,KAAC,eAAe,IACd,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EACrB,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,EAC/B,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,EACzC,cAAc,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,cAAc,GACpD,CACH,CAAC;AACJ,CAAC"}

package/dist/stories/StyledModal.d.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+export declare enum StyledModalColor {
+    WHITE = "WHITE",
+    DFX_GRADIENT = "DFX_GRADIENT"
+}
+export declare enum StyledModalType {
+    REGULAR = "REGULAR",
+    ALERT = "ALERT"
+}
+export declare enum StyledModalWidth {
+    SMALL = "SMALL",
+    REGULAR = "REGULAR",
+    LARGE = "LARGE",
+    FULL_WIDTH = "FULL_WIDTH"
+}
+interface StyledModalProps extends PropsWithChildren {
+    isVisible: boolean;
+    onClose?: (showModal: boolean) => any;
+    closeWithX?: boolean;
+    heading?: string;
+    color?: StyledModalColor;
+    type?: StyledModalType;
+    width?: StyledModalWidth;
+}
+export default function StyledModal({ isVisible, type, color, onClose, heading, closeWithX, children, width, }: StyledModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StyledModal.d.ts.map

package/dist/stories/StyledModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledModal.d.ts","sourceRoot":"","sources":["../../src/stories/StyledModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,oBAAY,gBAAgB;IAC1B,KAAK,UAAU;IACf,YAAY,iBAAiB;CAC9B;AAED,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,UAAU,eAAe;CAC1B;AASD,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,GAAG,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,SAAS,EACT,IAA8B,EAC9B,KAAqC,EACrC,OAAO,EACP,OAAO,EACP,UAAiB,EACjB,QAAQ,EACR,KAAgC,GACjC,EAAE,gBAAgB,2CAiElB"}

package/dist/stories/StyledModal.js

@@ -0,0 +1,65 @@
+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 _a;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconColor, IconSize, IconVariant } from './DfxIcon';
+import StyledIconButton from './StyledIconButton';
+export var StyledModalColor;
+(function (StyledModalColor) {
+    StyledModalColor["WHITE"] = "WHITE";
+    StyledModalColor["DFX_GRADIENT"] = "DFX_GRADIENT";
+})(StyledModalColor || (StyledModalColor = {}));
+export var StyledModalType;
+(function (StyledModalType) {
+    StyledModalType["REGULAR"] = "REGULAR";
+    StyledModalType["ALERT"] = "ALERT";
+})(StyledModalType || (StyledModalType = {}));
+export var StyledModalWidth;
+(function (StyledModalWidth) {
+    StyledModalWidth["SMALL"] = "SMALL";
+    StyledModalWidth["REGULAR"] = "REGULAR";
+    StyledModalWidth["LARGE"] = "LARGE";
+    StyledModalWidth["FULL_WIDTH"] = "FULL_WIDTH";
+})(StyledModalWidth || (StyledModalWidth = {}));
+var WIDTH_MAPS = (_a = {},
+    _a[StyledModalWidth.SMALL] = 'min-w-[25rem] max-w-lg',
+    _a[StyledModalWidth.REGULAR] = 'min-w-[37.5rem] max-w-2xl',
+    _a[StyledModalWidth.LARGE] = 'w-[90%] max-w-4xl',
+    _a[StyledModalWidth.FULL_WIDTH] = 'w-[90%] max-w-7xl',
+    _a);
+export default function StyledModal(_a) {
+    var isVisible = _a.isVisible, _b = _a.type, type = _b === void 0 ? StyledModalType.REGULAR : _b, _c = _a.color, color = _c === void 0 ? StyledModalColor.DFX_GRADIENT : _c, onClose = _a.onClose, heading = _a.heading, _d = _a.closeWithX, closeWithX = _d === void 0 ? true : _d, children = _a.children, _e = _a.width, width = _e === void 0 ? StyledModalWidth.REGULAR : _e;
+    function setShowModal(modalState) {
+        onClose === null || onClose === void 0 ? void 0 : onClose(modalState);
+    }
+    var showHeader = heading !== undefined && heading !== '' && type === StyledModalType.REGULAR;
+    var parentClasses = 'relative my-6 mx-auto ' + WIDTH_MAPS[width];
+    var containerClasses = 'rounded-lg shadow-lg max-h-[80vh] relative flex flex-col w-full outline-none focus:outline-none overflow-auto';
+    var headingClasses = 'p-3 border-b rounded-t';
+    var bodyClasses = 'relative px-14 pb-10 flex-auto overflow-auto';
+    if (type !== StyledModalType.ALERT) {
+        containerClasses +=
+            color === StyledModalColor.DFX_GRADIENT
+                ? ' bg-dfxGradient text-white border border-white/20'
+                : ' bg-white text-dfxBlue-800';
+        headingClasses += color === StyledModalColor.DFX_GRADIENT ? ' border-white/20' : ' border-dfxGray-400';
+    }
+    else {
+        containerClasses +=
+            color === StyledModalColor.WHITE ? ' bg-white text-dfxBlue-800' : ' bg-dfxGray-400 text-dfxBlue-800';
+        bodyClasses += ' text-center';
+    }
+    showHeader ? (bodyClasses += ' pt-6') : (bodyClasses += ' pt-12');
+    var zIndex = type === StyledModalType.ALERT ? 'z-[100]' : 'z-40';
+    return (_jsx(_Fragment, { children: isVisible && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "justify-center  items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 ".concat(zIndex, " outline-none focus:outline-none") }, { children: _jsx("div", __assign({ className: parentClasses }, { children: _jsxs("div", __assign({ className: containerClasses }, { children: [closeWithX && type === StyledModalType.REGULAR && (_jsx("div", __assign({ className: "absolute right-4 top-4 z-50" }, { children: _jsx(StyledIconButton, { color: color === StyledModalColor.DFX_GRADIENT ? IconColor.WHITE : IconColor.BLUE, size: IconSize.LG, icon: IconVariant.CLOSE, onClick: function () { return setShowModal(false); } }) }))), showHeader && (_jsx("div", __assign({ className: headingClasses }, { children: _jsx("h3", __assign({ className: "text-lg font-bold text-center" }, { children: heading })) }))), _jsx("div", __assign({ className: bodyClasses }, { children: children }))] })) })) })), _jsx("div", { className: "opacity-30 fixed inset-0 z-30 bg-black" })] })) }));
+}
+//# sourceMappingURL=StyledModal.js.map

package/dist/stories/StyledModal.js.map

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

package/dist/stories/StyledNetworkChip.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface StyledNetworkChipProps {
+    network: string;
+    isActive: boolean;
+}
+export default function StyledNetworkChip({ network, isActive }: StyledNetworkChipProps): JSX.Element;
+export {};
+//# sourceMappingURL=StyledNetworkChip.d.ts.map

package/dist/stories/StyledNetworkChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledNetworkChip.d.ts","sourceRoot":"","sources":["../../src/stories/StyledNetworkChip.tsx"],"names":[],"mappings":";AAAA,UAAU,sBAAsB;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAapG"}

package/dist/stories/StyledNetworkChip.js

@@ -0,0 +1,17 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+export default function StyledNetworkChip(_a) {
+    var network = _a.network, isActive = _a.isActive;
+    return (_jsxs("div", __assign({ className: "flex flex-row flex-grow px-3 gap-1 rounded-full border border-dfxGray-400 ".concat(isActive ? 'bg-dfxGray-400' : 'bg-white', " items-center justify-center") }, { children: [isActive && (_jsx("div", { className: "bg-dfxGreen-100 h-2.5 w-2.5 rounded-full border-0.5 border-black border-opacity-30 -ml-1.5" })), _jsx("p", __assign({ className: "text-dfxBlue-800 text-sm font-normal" }, { children: network }))] })));
+}
+//# sourceMappingURL=StyledNetworkChip.js.map

package/dist/stories/StyledNetworkChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledNetworkChip.js","sourceRoot":"","sources":["../../src/stories/StyledNetworkChip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAKA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAA6C;QAA3C,OAAO,aAAA,EAAE,QAAQ,cAAA;IAC3D,OAAO,CACL,wBACE,SAAS,EAAE,oFACT,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,iCACZ,iBAE7B,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,4FAA4F,GAAG,CAC/G,EACD,qBAAG,SAAS,EAAC,sCAAsC,gBAAE,OAAO,IAAK,KAC7D,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledNetworkSelection.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface StyledNetworkSelectionProps {
+    networks: {
+        network: string;
+        isActive: boolean;
+    }[];
+    onNetworkChange: (network: string) => void;
+}
+export default function StyledNetworkSelection({ networks, onNetworkChange, }: StyledNetworkSelectionProps): JSX.Element;
+export {};
+//# sourceMappingURL=StyledNetworkSelection.d.ts.map

package/dist/stories/StyledNetworkSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledNetworkSelection.d.ts","sourceRoot":"","sources":["../../src/stories/StyledNetworkSelection.tsx"],"names":[],"mappings":";AAEA,UAAU,2BAA2B;IACnC,QAAQ,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IACnD,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,QAAQ,EACR,eAAe,GAChB,EAAE,2BAA2B,GAAG,GAAG,CAAC,OAAO,CAU3C"}

package/dist/stories/StyledNetworkSelection.js

@@ -0,0 +1,18 @@
+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 StyledNetworkChip from './StyledNetworkChip';
+export default function StyledNetworkSelection(_a) {
+    var networks = _a.networks, onNetworkChange = _a.onNetworkChange;
+    return (_jsx("div", __assign({ className: "flex flex-row gap-4 pb-5 border-b border-dfxGray-400" }, { children: networks.map(function (element) { return (_jsx("button", __assign({ onClick: function () { return onNetworkChange(element.network); } }, { children: _jsx(StyledNetworkChip, __assign({}, element)) }), element.network)); }) })));
+}
+//# sourceMappingURL=StyledNetworkSelection.js.map

package/dist/stories/StyledNetworkSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledNetworkSelection.js","sourceRoot":"","sources":["../../src/stories/StyledNetworkSelection.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAOpD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAGjB;QAF5B,QAAQ,cAAA,EACR,eAAe,qBAAA;IAEf,OAAO,CACL,uBAAK,SAAS,EAAC,sDAAsD,gBAClE,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,CACzB,0BAA8B,OAAO,EAAE,cAAM,OAAA,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,EAAhC,CAAgC,gBAC3E,KAAC,iBAAiB,eAAK,OAAO,EAAI,KADvB,OAAO,CAAC,OAAO,CAEnB,CACV,EAJ0B,CAI1B,CAAC,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledTab.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { IconVariant } from './DfxIcon';
+interface StyledTabProps extends PropsWithChildren {
+    setActive: () => any;
+    active: boolean;
+    deactivated?: boolean;
+    icon?: IconVariant;
+    flagWord1?: string;
+    flagWord2?: string;
+}
+export default function StyledTab({ children, active, setActive, deactivated, icon, flagWord1, flagWord2, }: StyledTabProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StyledTab.d.ts.map

package/dist/stories/StyledTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTab.d.ts","sourceRoot":"","sources":["../../src/stories/StyledTab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAgB,EAAuB,WAAW,EAAE,MAAM,WAAW,CAAC;AAEtE,UAAU,cAAe,SAAQ,iBAAiB;IAChD,SAAS,EAAE,MAAM,GAAG,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAmB,EACnB,IAAI,EACJ,SAAS,EACT,SAAS,GACV,EAAE,cAAc,2CA8BhB"}

package/dist/stories/StyledTab.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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DfxIcon, { IconColor, IconSize } from './DfxIcon';
+export default function StyledTab(_a) {
+    var children = _a.children, active = _a.active, setActive = _a.setActive, _b = _a.deactivated, deactivated = _b === void 0 ? false : _b, icon = _a.icon, flagWord1 = _a.flagWord1, flagWord2 = _a.flagWord2;
+    var tabClasses = 'text-2xl font-black px-12 py-2 rounded-t-lg block flex gap-2 ';
+    if (!deactivated) {
+        active ? (tabClasses += 'bg-white') : (tabClasses += 'hover:bg-white/10 focus:bg-white/10');
+    }
+    else {
+        tabClasses += 'cursor-default text-dfxBlue-800/70';
+    }
+    return (_jsx("li", __assign({ className: "flex-none text-center " }, { children: _jsxs("a", __assign({ className: tabClasses, onClick: function (e) {
+                e.preventDefault();
+                if (!deactivated) {
+                    setActive();
+                }
+            }, "data-toggle": "tab", href: "#", role: "tablist" }, { children: [children, icon !== undefined && _jsx(IconFlag, { icon: icon }), flagWord1 !== undefined && _jsx(TwoWordFlag, { word1: flagWord1, word2: flagWord2 })] })) })));
+}
+function TwoWordFlag(_a) {
+    var word1 = _a.word1, word2 = _a.word2;
+    var flagClasses = 'text-2xs uppercase font-normal text-left leading-tight ';
+    if (word2 !== undefined) {
+        flagClasses += ' place-self-center';
+    }
+    else {
+        flagClasses += ' place-self-start mt-2';
+    }
+    return (_jsxs("div", __assign({ className: flagClasses }, { children: [word1, word2 !== undefined ? _jsx("br", {}) : null, word2] })));
+}
+function IconFlag(_a) {
+    var icon = _a.icon;
+    return (_jsx("div", __assign({ className: "place-self-center ml-1" }, { children: _jsx(DfxIcon, { icon: icon, color: IconColor.BLUE, size: IconSize.LG }) })));
+}
+//# sourceMappingURL=StyledTab.js.map

package/dist/stories/StyledTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTab.js","sourceRoot":"","sources":["../../src/stories/StyledTab.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAe,MAAM,WAAW,CAAC;AAWtE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAQjB;QAPf,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,SAAS,eAAA,EACT,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,SAAS,eAAA;IAET,IAAI,UAAU,GAAG,+DAA+D,CAAC;IACjF,IAAI,CAAC,WAAW,EAAE;QAChB,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,qCAAqC,CAAC,CAAC;KAC7F;SAAM;QACL,UAAU,IAAI,oCAAoC,CAAC;KACpD;IAED,OAAO,CACL,sBAAI,SAAS,EAAC,wBAAwB,gBACpC,sBACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,UAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,EAAE;oBAChB,SAAS,EAAE,CAAC;iBACb;YACH,CAAC,iBACW,KAAK,EACjB,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,SAAS,iBAEb,QAAQ,EAER,IAAI,KAAK,SAAS,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,EAE9C,SAAS,KAAK,SAAS,IAAI,KAAC,WAAW,IAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,KAC7E,IACD,CACN,CAAC;AACJ,CAAC;AAOD,SAAS,WAAW,CAAC,EAAkC;QAAhC,KAAK,WAAA,EAAE,KAAK,WAAA;IACjC,IAAI,WAAW,GAAG,yDAAyD,CAAC;IAE5E,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,WAAW,IAAI,oBAAoB,CAAC;KACrC;SAAM;QACL,WAAW,IAAI,wBAAwB,CAAC;KACzC;IAED,OAAO,CACL,wBAAK,SAAS,EAAE,WAAW,iBACxB,KAAK,EACL,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,cAAM,CAAC,CAAC,CAAC,IAAI,EACnC,KAAK,KACF,CACP,CAAC;AACJ,CAAC;AAMD,SAAS,QAAQ,CAAC,EAAuB;QAArB,IAAI,UAAA;IACtB,OAAO,CACL,uBAAK,SAAS,EAAC,wBAAwB,gBACrC,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,IAC7D,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledTabContainer.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { IconVariant } from './DfxIcon';
+interface StyledTabContainerProps {
+    tabs: Array<StyledTabProps>;
+    activeTab?: number;
+}
+export interface StyledTabProps {
+    title: string;
+    deactivated?: boolean;
+    content: ReactNode | undefined;
+    icon?: IconVariant;
+    flagWord1?: string;
+    flagWord2?: string;
+    onActivate?: () => void;
+}
+export default function StyledTabContainer({ tabs, activeTab }: StyledTabContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StyledTabContainer.d.ts.map

package/dist/stories/StyledTabContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTabContainer.d.ts","sourceRoot":"","sources":["../../src/stories/StyledTabContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,UAAU,uBAAuB;IAC/B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,IAAI,EAAE,SAAa,EAAE,EAAE,uBAAuB,2CAoC1F"}

package/dist/stories/StyledTabContainer.js

@@ -0,0 +1,26 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import StyledTab from './StyledTab';
+export default function StyledTabContainer(_a) {
+    var tabs = _a.tabs, _b = _a.activeTab, activeTab = _b === void 0 ? 0 : _b;
+    var _c = useState(activeTab), active = _c[0], setActive = _c[1];
+    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "flex flex-wrap text-dfxBlue-800 mt-6" }, { children: _jsxs("div", __assign({ className: "w-full" }, { children: [_jsx("ul", __assign({ className: "flex mb-0 rounded-t-lg list-none bg-white/50 flex-wrap p-0 flex-row", role: "tablist" }, { children: tabs.map(function (tab, index) {
+                            return (_jsx(StyledTab, __assign({ setActive: function () {
+                                    var _a;
+                                    setActive(index);
+                                    (_a = tab.onActivate) === null || _a === void 0 ? void 0 : _a.call(tab);
+                                }, active: index === active, deactivated: tab.deactivated, icon: tab.icon, flagWord1: tab.flagWord1, flagWord2: tab.flagWord2 }, { children: tab.title }), index));
+                        }) })), _jsx("div", __assign({ className: "relative flex flex-col min-w-0 break-words bg-white w-full mb-6 rounded-b-lg" }, { children: _jsx("div", __assign({ className: "p-8 flex-auto" }, { children: _jsx("div", __assign({ className: "tab-content tab-space" }, { children: tabs[active].content })) })) }))] })) })) }));
+}
+//# sourceMappingURL=StyledTabContainer.js.map

package/dist/stories/StyledTabContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTabContainer.js","sourceRoot":"","sources":["../../src/stories/StyledTabContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,SAAS,MAAM,aAAa,CAAC;AAiBpC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAgD;QAA9C,IAAI,UAAA,EAAE,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA;IACxD,IAAA,KAAsB,QAAQ,CAAC,SAAS,CAAC,EAAxC,MAAM,QAAA,EAAE,SAAS,QAAuB,CAAC;IAEhD,OAAO,CACL,4BACE,uBAAK,SAAS,EAAC,sCAAsC,gBACnD,wBAAK,SAAS,EAAC,QAAQ,iBACrB,sBAAI,SAAS,EAAC,qEAAqE,EAAC,IAAI,EAAC,SAAS,gBAC/F,IAAI,CAAC,GAAG,CAAC,UAAC,GAAmB,EAAE,KAAa;4BAC3C,OAAO,CACL,KAAC,SAAS,aACR,SAAS,EAAE;;oCACT,SAAS,CAAC,KAAK,CAAC,CAAC;oCACjB,MAAA,GAAG,CAAC,UAAU,mDAAI,CAAC;gCACrB,CAAC,EACD,MAAM,EAAE,KAAK,KAAK,MAAM,EACxB,WAAW,EAAE,GAAG,CAAC,WAAW,EAE5B,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,SAAS,EAAE,GAAG,CAAC,SAAS,gBAEvB,GAAG,CAAC,KAAK,KALL,KAAK,CAMA,CACb,CAAC;wBACJ,CAAC,CAAC,IACC,EACL,uBAAK,SAAS,EAAC,8EAA8E,gBAC3F,uBAAK,SAAS,EAAC,eAAe,gBAC5B,uBAAK,SAAS,EAAC,uBAAuB,gBAAE,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,IAAO,IAC/D,IACF,KACF,IACF,GACL,CACJ,CAAC;AACJ,CAAC"}

package/dist/stories/StyledTabContentWrapper.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+export interface StyledTabContentWrapperProps extends PropsWithChildren {
+    showBackArrow?: boolean;
+    leftBorder?: boolean;
+    onBackClick?: () => void;
+}
+export default function StyledTabContentWrapper({ showBackArrow, leftBorder, children, onBackClick, }: StyledTabContentWrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledTabContentWrapper.d.ts.map

package/dist/stories/StyledTabContentWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTabContentWrapper.d.ts","sourceRoot":"","sources":["../../src/stories/StyledTabContentWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,4BAA6B,SAAQ,iBAAiB;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,aAAqB,EACrB,UAAkB,EAClB,QAAQ,EACR,WAAW,GACZ,EAAE,4BAA4B,2CAW9B"}

package/dist/stories/StyledTabContentWrapper.js

@@ -0,0 +1,19 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconVariant } from './DfxIcon';
+import StyledIconButton from './StyledIconButton';
+export default function StyledTabContentWrapper(_a) {
+    var _b = _a.showBackArrow, showBackArrow = _b === void 0 ? false : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? false : _c, children = _a.children, onBackClick = _a.onBackClick;
+    return (_jsxs("div", __assign({ className: "w-full ".concat(leftBorder ? 'border-l border-dfxGray-400' : '') }, { children: [showBackArrow && onBackClick && (_jsx("div", __assign({ className: "absolute" }, { children: _jsx(StyledIconButton, { icon: IconVariant.BACK, onClick: onBackClick }) }))), _jsx("div", __assign({ className: "m-auto max-w-lg" }, { children: children }))] })));
+}
+//# sourceMappingURL=StyledTabContentWrapper.js.map

package/dist/stories/StyledTabContentWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTabContentWrapper.js","sourceRoot":"","sources":["../../src/stories/StyledTabContentWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAQlD,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAKjB;QAJ7B,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,QAAQ,cAAA,EACR,WAAW,iBAAA;IAEX,OAAO,CACL,wBAAK,SAAS,EAAE,iBAAU,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,CAAE,iBACxE,aAAa,IAAI,WAAW,IAAI,CAC/B,uBAAK,SAAS,EAAC,UAAU,gBACvB,KAAC,gBAAgB,IAAC,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,IAC9D,CACP,EACD,uBAAK,SAAS,EAAC,iBAAiB,gBAAE,QAAQ,IAAO,KAC7C,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledVideoGrid.d.ts

@@ -0,0 +1,11 @@
+export type VideoSourcesProps = {
+    vidSrc: string;
+    thumbSrc: string;
+    title: string;
+};
+export interface StyledVideoGridProps {
+    videoSources: VideoSourcesProps[];
+    numCols?: number;
+}
+export default function StyledVideoGrid({ videoSources, numCols }: StyledVideoGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledVideoGrid.d.ts.map

package/dist/stories/StyledVideoGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledVideoGrid.d.ts","sourceRoot":"","sources":["../../src/stories/StyledVideoGrid.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,iBAAiB,EAAE,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,YAAY,EAAE,OAAW,EAAE,EAAE,oBAAoB,2CAiB1F"}

package/dist/stories/StyledVideoGrid.js

@@ -0,0 +1,18 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+export default function StyledVideoGrid(_a) {
+    var videoSources = _a.videoSources, _b = _a.numCols, numCols = _b === void 0 ? 3 : _b;
+    var gridFractal = '1fr ';
+    return (_jsx("div", __assign({ style: { gridTemplateColumns: gridFractal.repeat(numCols) }, className: "grid gap-6" }, { children: videoSources.map(function (video, index) { return (_jsxs("div", __assign({ className: "place-self-end" }, { children: [_jsx("h3", __assign({ className: "my-3 text-base font-bold" }, { children: video.title })), _jsx("video", { className: "rounded-lg border border-white/20", src: video.vidSrc, poster: video.thumbSrc, controls: true })] }), index)); }) })));
+}
+//# sourceMappingURL=StyledVideoGrid.js.map

package/dist/stories/StyledVideoGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledVideoGrid.js","sourceRoot":"","sources":["../../src/stories/StyledVideoGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAWA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAmD;QAAjD,YAAY,kBAAA,EAAE,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA;IACjE,IAAM,WAAW,GAAG,MAAM,CAAC;IAC3B,OAAO,CACL,uBAAK,KAAK,EAAE,EAAE,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,SAAS,EAAC,YAAY,gBACrF,YAAY,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CAClC,wBAAiB,SAAS,EAAC,gBAAgB,iBACzC,sBAAI,SAAS,EAAC,0BAA0B,gBAAE,KAAK,CAAC,KAAK,IAAM,EAC3D,gBACE,SAAS,EAAC,mCAAmC,EAC7C,GAAG,EAAE,KAAK,CAAC,MAAM,EACjB,MAAM,EAAE,KAAK,CAAC,QAAQ,EACtB,QAAQ,SACD,MAPD,KAAK,CAQT,CACP,EAVmC,CAUnC,CAAC,IACE,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/Typography.d.ts

@@ -0,0 +1,2 @@
+export default function Typography(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Typography.d.ts.map

package/dist/stories/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/stories/Typography.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAuCjC"}

package/dist/stories/Typography.js

@@ -0,0 +1,16 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Typography() {
+    return (_jsxs("div", { children: [_jsx("h1", { children: "Heading 1 / 28px / \"text-2xl font-black\"" }), _jsx("h2", { children: "Heading 2 / 20px / \"text-lg font-bold\"" }), _jsx("h3", { children: "Heading 3 / 20px / regular" }), _jsx("h4", __assign({ className: "uppercase tracking-widest" }, { children: "Sub \u2022 Top \u2022 Heading \"uppercase tracking-widest\" " })), _jsx("h5", { children: "Heading 5 (idle) " }), _jsx("h6", { children: "Heading 6 (idle) " }), _jsx("br", {}), _jsxs("p", { children: [_jsx("strong", { children: "Normal paragraph, text-base, 16px/22px, 1rem" }), " / Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."] }), _jsx("br", {}), _jsxs("p", __assign({ className: "text-sm" }, { children: [_jsx("strong", { children: "Small Text \"text-sm\", 14px / 0.875rem" }), " / Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."] })), _jsx("br", {}), _jsxs("p", __assign({ className: "text-xs" }, { children: [_jsx("strong", { children: "Very Small Text \"text-xs\", 12px / 0.75rem" }), " , used for Form Labels // Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."] })), _jsx("br", {}), _jsxs("p", __assign({ className: "text-2xs" }, { children: [_jsx("strong", { children: "Smallest Text, \"text-2xs\" 10px / 0.625rem" }), " , used for Form Labels // Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."] }))] }));
+}
+//# sourceMappingURL=Typography.js.map

package/dist/stories/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../src/stories/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,OAAO,CACL,0BACE,sEAAiD,EACjD,oEAA+C,EAC/C,sDAAmC,EACnC,sBAAI,SAAS,EAAC,2BAA2B,kFAAsD,EAC/F,6CAA0B,EAC1B,6CAA0B,EAC1B,cAAM,EACN,wBACE,4EAA6D,+UAI3D,EACJ,cAAM,EACN,sBAAG,SAAS,EAAC,SAAS,iBACpB,uEAAsD,gVAIpD,EACJ,cAAM,EACN,sBAAG,SAAS,EAAC,SAAS,iBACpB,2EAA0D,wWAIxD,EACJ,cAAM,EACN,sBAAG,SAAS,EAAC,UAAU,iBACrB,2EAA0D,wWAIxD,IACA,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { Control, FieldError } from 'react-hook-form';
+export interface ControlProps {
+    control?: Control<any>;
+    name: string;
+    label?: string;
+    rules?: any;
+    error?: FieldError;
+    disabled?: boolean;
+}
+interface Props {
+    children: ReactNode;
+    control: Control<any>;
+    rules?: any;
+    errors: any;
+    disabled?: boolean;
+    onSubmit?: () => void;
+}
+declare const Form: ({ children, control, rules, errors, disabled, onSubmit }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Form;
+//# sourceMappingURL=Form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/stories/form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAiB,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACtB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAGD,QAAA,MAAM,IAAI,6DAAsE,KAAK,4CAkCpF,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/stories/form/Form.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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from 'react';
+// TODO: auto focus on next input field?
+var Form = function (_a) {
+    var children = _a.children, control = _a.control, rules = _a.rules, errors = _a.errors, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onSubmit = _a.onSubmit;
+    var enrichElements = function (elements) {
+        if (!elements)
+            return undefined;
+        return (Array.isArray(elements) ? __spreadArray([], elements, true) : [elements]).map(function (element, i) {
+            return enrichElement(element, i);
+        });
+    };
+    var enrichElement = function (element, index) {
+        if (!(element === null || element === void 0 ? void 0 : element.props))
+            return element;
+        var props = __assign(__assign({}, element.props), { children: enrichElements(element.props.children), key: index });
+        if (element.props.name) {
+            props = __assign(__assign({}, props), { ref: element.ref, control: control, rules: rules ? rules[element.props.name] : undefined, error: errors[element.props.name], disabled: element.props.disabled || disabled, onSubmit: onSubmit });
+        }
+        return createElement(element.type, props);
+    };
+    return _jsx(_Fragment, { children: enrichElements(children) });
+};
+export default Form;
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/stories/form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAA0C,MAAM,OAAO,CAAC;AAqB9E,wCAAwC;AACxC,IAAM,IAAI,GAAG,UAAC,EAAuE;QAArE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA;IAC1E,IAAM,cAAc,GAAG,UAAC,QAAmB;QACzC,IAAI,CAAC,QAAQ;YAAE,OAAO,SAAS,CAAC;QAEhC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAK,QAAQ,QAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,CAAC;YAC3E,OAAA,aAAa,CAAC,OAAuB,EAAE,CAAC,CAAC;QAAzC,CAAyC,CAC1C,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG,UAAC,OAA0C,EAAE,KAAa;QAC9E,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAA;YAAE,OAAO,OAAO,CAAC;QAEpC,IAAI,KAAK,yBACJ,OAAO,CAAC,KAAK,KAChB,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAChD,GAAG,EAAE,KAAK,GACX,CAAC;QAEF,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE;YACtB,KAAK,yBACA,KAAK,KACR,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACpD,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EACjC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,EAC5C,QAAQ,EAAE,QAAQ,GACnB,CAAC;SACH;QAED,OAAO,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,4BAAG,cAAc,CAAC,QAAQ,CAAC,GAAI,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,6 @@
+import { BankAccount } from '../../definitions/bank-account';
+export interface StyledBankAccountListItemProps {
+    bankAccount: BankAccount;
+}
+export default function StyledBankAccountListItem({ bankAccount }: StyledBankAccountListItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledBankAccountListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledBankAccountListItem.d.ts","sourceRoot":"","sources":["../../../src/stories/form/StyledBankAccountListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAAE,WAAW,EAAE,EAAE,8BAA8B,2CAuBhG"}

package/dist/stories/form/StyledBankAccountListItem.js

@@ -0,0 +1,20 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Utils } from '../../utils';
+import DfxIcon, { IconVariant, IconColor } from '../DfxIcon';
+export default function StyledBankAccountListItem(_a) {
+    var bankAccount = _a.bankAccount;
+    var isLabelAvailable = bankAccount.label && bankAccount.label.length > 0;
+    return (_jsx("div", __assign({ className: "flex  mb-3 last:mb-0 group justify-between rounded py-1 px-3 hover:bg-dfxGray-400/50 " }, { children: _jsxs("div", __assign({ className: "flex gap-3" }, { children: [_jsx("div", __assign({ className: "place-self-center" }, { children: _jsx(DfxIcon, { icon: IconVariant.BANK, color: IconColor.BLACK }) })), _jsxs("div", __assign({ className: "flex flex-col justify-center h-[42px]" }, { children: [isLabelAvailable && _jsx("p", __assign({ className: "text-dfxGray-800 text-xs" }, { children: bankAccount.label })), _jsx("p", __assign({ className: "text-dfxBlue-800" }, { children: Utils.formatIban(bankAccount.iban) }))] }))] })) })));
+}
+//# sourceMappingURL=StyledBankAccountListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledBankAccountListItem.js","sourceRoot":"","sources":["../../../src/stories/form/StyledBankAccountListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,OAAO,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAM7D,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAA+C;QAA7C,WAAW,iBAAA;IAC7D,IAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3E,OAAO,CACL,uBAAK,SAAS,EAAC,uFAAuF,gBACpG,wBAAK,SAAS,EAAC,YAAY,iBACzB,uBAAK,SAAS,EAAC,mBAAmB,gBAChC,KAAC,OAAO,IAAC,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,GAAI,IACvD,EACN,wBAAK,SAAS,EAAC,uCAAuC,iBACnD,gBAAgB,IAAI,qBAAG,SAAS,EAAC,0BAA0B,gBAAE,WAAW,CAAC,KAAK,IAAK,EACpF,qBAAG,SAAS,EAAC,kBAAkB,gBAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,IAAK,KACpE,KACF,IASF,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,17 @@
+import { ControlProps } from './Form';
+import { IconVariant } from '../DfxIcon';
+import { AssetIconVariant } from '../DfxAssetIcon';
+export interface StyledDropdownProps<T> extends ControlProps {
+    labelIcon?: IconVariant;
+    placeholder?: string;
+    full?: boolean;
+    smallLabel?: boolean;
+    items: T[];
+    labelFunc: (item: T) => string;
+    balanceFunc?: (item: T) => string;
+    descriptionFunc?: (item: T) => string;
+    priceFunc?: (item: T) => string;
+    assetIconFunc?: (item: T) => AssetIconVariant;
+}
+export default function StyledDropdown<T>({ label, labelIcon, control, name, rules, disabled, items, placeholder, full, smallLabel, labelFunc, balanceFunc, descriptionFunc, priceFunc, assetIconFunc, ...props }: StyledDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDropdown.d.ts","sourceRoot":"","sources":["../../../src/stories/form/StyledDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAC;AAEvE,OAAqB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC1D,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,gBAAgB,CAAC;CAC/C;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EACxC,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,SAAS,EACT,WAAW,EACX,eAAe,EACf,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA0GxB"}