@dfx.swiss/react-components 1.0.1-beta.6 → 1.0.1-beta.8

package/dist/stories/StyledBalance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledBalance.js","sourceRoot":"","sources":["../../src/stories/StyledBalance.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAYhE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAQjB;QAPnB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,OAAO,aAAA;IAEP,IAAI,cAAc,GAAG,6CAA6C,CAAC;IACnE,IAAM,aAAa,GAAG,wDAAwD,CAAC;IAE/E,IAAI,UAAU,EAAE;QACd,cAAc,IAAI,gBAAgB,CAAC;KACpC;SAAM;QACL,cAAc,IAAI,kCAAkC,CAAC;KACtD;IAED,OAAO,CACL,uBAAK,SAAS,EAAE,cAAc,gBAC5B,2BAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,iBAC9D,wBAAK,SAAS,EAAC,YAAY,iBACzB,uBAAK,SAAS,EAAC,aAAa,gBAC1B,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,IAAwB,GAAI,IACnD,EACN,wBAAK,SAAS,EAAC,WAAW,iBACxB,wBAAK,SAAS,EAAC,2CAA2C,iBACxD,sBAAI,SAAS,EAAC,cAAc,gBAAE,KAAK,CAAC,IAAI,IAAM,EAC7C,OAAO,IAAI,CACV,wBAAM,SAAS,EAAC,8DAA8D,gBAAE,QAAQ,IAAQ,CACjG,KACG,EACN,wBAAM,SAAS,EAAC,8CAA8C,gBAAE,KAAK,CAAC,WAAW,IAAQ,KACrF,KACF,EACN,wBAAK,SAAS,EAAC,eAAe,iBAC5B,sBAAI,SAAS,EAAC,gCAAgC,gBAAE,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAM,EACxF,YAAY,IAAI,CACf,yBAAM,SAAS,EAAC,+CAA+C,sBAC3D,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,KACrC,CACR,KACG,KACC,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledBalanceSelection.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Asset } from '../definitions/asset';
+import BigNumber from 'bignumber.js';
+interface StyledBalanceSelectionProps {
+    balances: {
+        asset: Asset;
+        isToken: boolean;
+        protocol: string;
+        balance: BigNumber;
+        balanceInUsd?: BigNumber;
+        isSelected: boolean;
+    }[];
+    onSelectionChanged: (asset: Asset) => void;
+}
+export default function StyledBalanceSelection({ balances, onSelectionChanged, }: StyledBalanceSelectionProps): JSX.Element;
+export {};
+//# sourceMappingURL=StyledBalanceSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledBalanceSelection.d.ts","sourceRoot":"","sources":["../../src/stories/StyledBalanceSelection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,SAAS,MAAM,cAAc,CAAC;AAKrC,UAAU,2BAA2B;IACnC,QAAQ,EAAE;QACR,KAAK,EAAE,KAAK,CAAC;QACb,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,SAAS,CAAC;QACnB,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,UAAU,EAAE,OAAO,CAAC;KACrB,EAAE,CAAC;IACJ,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,QAAQ,EACR,kBAAkB,GACnB,EAAE,2BAA2B,GAAG,GAAG,CAAC,OAAO,CAwB3C"}

package/dist/stories/StyledBalanceSelection.js

@@ -0,0 +1,23 @@
+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 StyledBalance from './StyledBalance';
+import { useState } from 'react';
+import DfxIcon, { IconColor, IconSize, IconVariant } from './DfxIcon';
+export default function StyledBalanceSelection(_a) {
+    var balances = _a.balances, onSelectionChanged = _a.onSelectionChanged;
+    var _b = useState(''), filter = _b[0], setFilter = _b[1];
+    return (_jsxs("div", __assign({ className: "flex flex-col gap-5 w-72 max-h-150 shrink-0" }, { children: [_jsxs("div", __assign({ className: "relative" }, { children: [_jsx("div", __assign({ className: "absolute left-2 top-[9px]" }, { children: _jsx(DfxIcon, { icon: IconVariant.SEARCH, color: IconColor.BLUE, size: IconSize.LG }) })), _jsx("input", { className: "text-base font-normal rounded-md pl-8 pr-3 py-2 w-full bg-white text-dfxBlue-800 placeholder:text-dfxGray-600 border border-dfxGray-400 outline-2 outline-dfxBlue-400", placeholder: "Search a token", onChange: function (value) { return setFilter(value.target.value); } })] })), _jsx("div", __assign({ className: "flex flex-col flex-grow gap-2 overflow-auto" }, { children: balances
+                    .filter(function (balance) { return balance.asset.name.toLowerCase().includes(filter.toLowerCase()); })
+                    .map(function (balance) { return (_jsx(StyledBalance, __assign({}, balance, { onClick: function () { return onSelectionChanged(balance.asset); } }), balance.asset.id)); }) }))] })));
+}
+//# sourceMappingURL=StyledBalanceSelection.js.map

package/dist/stories/StyledBalanceSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledBalanceSelection.js","sourceRoot":"","sources":["../../src/stories/StyledBalanceSelection.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AActE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAGjB;QAF5B,QAAQ,cAAA,EACR,kBAAkB,wBAAA;IAEZ,IAAA,KAAsB,QAAQ,CAAC,EAAE,CAAC,EAAjC,MAAM,QAAA,EAAE,SAAS,QAAgB,CAAC;IAEzC,OAAO,CACL,wBAAK,SAAS,EAAC,6CAA6C,iBAC1D,wBAAK,SAAS,EAAC,UAAU,iBACvB,uBAAK,SAAS,EAAC,2BAA2B,gBACxC,KAAC,OAAO,IAAC,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,IAC3E,EACN,gBACE,SAAS,EAAC,uKAAuK,EACjL,WAAW,EAAC,gBAAgB,EAC5B,QAAQ,EAAE,UAAC,KAAK,IAAK,OAAA,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAA7B,CAA6B,GAClD,KACE,EACN,uBAAK,SAAS,EAAC,6CAA6C,gBACzD,QAAQ;qBACN,MAAM,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAA/D,CAA+D,CAAC;qBACpF,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,CAChB,KAAC,aAAa,eAA4B,OAAO,IAAE,OAAO,EAAE,cAAM,OAAA,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAjC,CAAiC,KAA/E,OAAO,CAAC,KAAK,CAAC,EAAE,CAAmE,CACxG,EAFiB,CAEjB,CAAC,IACA,KACF,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledButton.d.ts

@@ -0,0 +1,34 @@
+import { IconVariant } from './DfxIcon';
+export declare enum StyledButtonSize {
+    BIG = "BIG",
+    SMALL = "SMALL"
+}
+export declare enum StyledButtonWidth {
+    MIN = "MIN",
+    SM = "SM",
+    MD = "MD",
+    FULL = "FULL"
+}
+export declare enum StyledButtonColor {
+    RED = "RED",
+    GRAY = "GRAY",
+    GRAY_OUTLINE = "GRAY_OUTLINE",
+    PALE_WHITE = "PALE_WHITE",
+    WHITE = "WHITE"
+}
+export interface StyledButtonProps {
+    label: string;
+    onClick: () => void;
+    size?: StyledButtonSize;
+    width?: StyledButtonWidth;
+    color?: StyledButtonColor;
+    caps?: boolean;
+    isLoading?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    deactivateMargin?: boolean;
+    icon?: IconVariant;
+    iconAfterLabel?: boolean;
+}
+export default function StyledButton({ label, onClick, size, width, color, caps, isLoading, disabled, hidden, deactivateMargin, icon, iconAfterLabel, }: StyledButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../src/stories/StyledButton.tsx"],"names":[],"mappings":"AACA,OAAgB,EAAuB,WAAW,EAAE,MAAM,WAAW,CAAC;AAEtE,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,oBAAY,iBAAiB;IAC3B,GAAG,QAAQ;IACX,EAAE,OAAO;IACT,EAAE,OAAO;IACT,IAAI,SAAS;CACd;AAED,oBAAY,iBAAiB;IAC3B,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AA2DD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,OAAO,EACP,IAA2B,EAC3B,KAA4B,EAC5B,KAA6B,EAC7B,IAAW,EACX,SAAiB,EACjB,QAAgB,EAChB,MAAc,EACd,gBAAwB,EACxB,IAAI,EACJ,cAAsB,GACvB,EAAE,iBAAiB,2CA+CnB"}

package/dist/stories/StyledButton.js

@@ -0,0 +1,102 @@
+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, _b, _c;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import StyledLoadingSpinner, { SpinnerSize, SpinnerVariant } from './StyledLoadingSpinner';
+import DfxIcon, { IconColor, IconSize } from './DfxIcon';
+export var StyledButtonSize;
+(function (StyledButtonSize) {
+    StyledButtonSize["BIG"] = "BIG";
+    StyledButtonSize["SMALL"] = "SMALL";
+})(StyledButtonSize || (StyledButtonSize = {}));
+export var StyledButtonWidth;
+(function (StyledButtonWidth) {
+    StyledButtonWidth["MIN"] = "MIN";
+    StyledButtonWidth["SM"] = "SM";
+    StyledButtonWidth["MD"] = "MD";
+    StyledButtonWidth["FULL"] = "FULL";
+})(StyledButtonWidth || (StyledButtonWidth = {}));
+export var StyledButtonColor;
+(function (StyledButtonColor) {
+    StyledButtonColor["RED"] = "RED";
+    StyledButtonColor["GRAY"] = "GRAY";
+    StyledButtonColor["GRAY_OUTLINE"] = "GRAY_OUTLINE";
+    StyledButtonColor["PALE_WHITE"] = "PALE_WHITE";
+    StyledButtonColor["WHITE"] = "WHITE";
+})(StyledButtonColor || (StyledButtonColor = {}));
+var SIZE_MAPS = (_a = {},
+    _a[StyledButtonSize.BIG] = {
+        buttonClasses: 'font-bold text-base rounded px-7 py-2.5 gap-4 ',
+        loadingSpinnerSize: SpinnerSize.MD,
+        iconSize: IconSize.MD,
+    },
+    _a[StyledButtonSize.SMALL] = {
+        buttonClasses: 'text-sm rounded-md px-3.5 py-0.5 gap-2 ',
+        loadingSpinnerSize: SpinnerSize.SM,
+        iconSize: IconSize.XS,
+    },
+    _a);
+var COLOR_MAPS = (_b = {},
+    _b[StyledButtonColor.RED] = {
+        buttonColorClasses: 'bg-primary-red text-white hover:bg-dfxRed-150 focus:bg-dfxRed-150 active:bg-dfxRed-100 hover:shadow-lg',
+        iconColor: IconColor.WHITE,
+    },
+    _b[StyledButtonColor.GRAY] = {
+        buttonColorClasses: 'bg-dfxGray-800 text-dfxGray-700',
+        iconColor: IconColor.DARK_GRAY,
+    },
+    _b[StyledButtonColor.GRAY_OUTLINE] = {
+        buttonColorClasses: 'border border-dfxGray-700 text-dfxGray-700 hover:border-dfxGray-800 hover:text-dfxGray-800',
+        iconColor: IconColor.DARK_GRAY,
+    },
+    _b[StyledButtonColor.WHITE] = {
+        buttonColorClasses: 'bg-dfxGray-400 text-primary-blue hover:bg-dfxGray-500 focus:bg-dfxGray-500 active:bg-dfxGray-600 hover:shadow-lg',
+        iconColor: IconColor.BLUE,
+    },
+    _b[StyledButtonColor.PALE_WHITE] = {
+        buttonColorClasses: 'border border-white/20 text-white bg-white/10 hover:bg-white/20 focus:bg-white/20 active:bg-white/30',
+        iconColor: IconColor.WHITE,
+    },
+    _b);
+var WIDTH_MAPS = (_c = {},
+    _c[StyledButtonWidth.MIN] = 'mx-4',
+    _c[StyledButtonWidth.SM] = 'w-[250px]',
+    _c[StyledButtonWidth.MD] = 'min-w-[250px]',
+    _c[StyledButtonWidth.FULL] = 'w-full',
+    _c);
+export default function StyledButton(_a) {
+    var label = _a.label, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? StyledButtonSize.BIG : _b, _c = _a.width, width = _c === void 0 ? StyledButtonWidth.MD : _c, _d = _a.color, color = _d === void 0 ? StyledButtonColor.RED : _d, _e = _a.caps, caps = _e === void 0 ? true : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.hidden, hidden = _h === void 0 ? false : _h, _j = _a.deactivateMargin, deactivateMargin = _j === void 0 ? false : _j, icon = _a.icon, _k = _a.iconAfterLabel, iconAfterLabel = _k === void 0 ? false : _k;
+    var buttonClasses = 'inline-block flex justify-center leading-tight shadow-md focus:outline-none focus:ring-0 transition duration-150 ease-in-out ';
+    var renderedColor;
+    var isDisabled = disabled || isLoading;
+    if (isDisabled) {
+        renderedColor = COLOR_MAPS[StyledButtonColor.GRAY].buttonColorClasses;
+    }
+    else {
+        if (color === StyledButtonColor.GRAY) {
+            renderedColor =
+                COLOR_MAPS[color].buttonColorClasses + ' hover:bg-dfxGray-900  focus:bg-dfxGray-900 active:bg-dfxGray-800';
+        }
+        else {
+            renderedColor = COLOR_MAPS[color].buttonColorClasses;
+        }
+    }
+    buttonClasses += [
+        SIZE_MAPS[size].buttonClasses,
+        renderedColor,
+        width === StyledButtonWidth.MIN && deactivateMargin ? '' : WIDTH_MAPS[width],
+        caps ? 'uppercase' : 'normal-case',
+    ].join(' ');
+    buttonClasses += hidden ? ' hidden' : '';
+    return (_jsx(_Fragment, { children: _jsxs("button", __assign({ type: "button", className: buttonClasses, onClick: onClick, disabled: isDisabled }, { children: [iconAfterLabel && label, icon && (_jsx(DfxIcon, { icon: icon, size: SIZE_MAPS[size].iconSize, color: isDisabled ? IconColor.DARK_GRAY : COLOR_MAPS[color].iconColor })), !iconAfterLabel && label, isLoading && (_jsx("div", __assign({ className: "place-self-center" }, { children: _jsx(StyledLoadingSpinner, { variant: SpinnerVariant.PALE, size: SIZE_MAPS[size].loadingSpinnerSize }) })))] })) }));
+}
+//# sourceMappingURL=StyledButton.js.map

package/dist/stories/StyledButton.js.map

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

package/dist/stories/StyledCheckboxRow.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+export interface StyledCheckboxRowProps extends PropsWithChildren {
+    darkTheme?: boolean;
+    onChange: (isChecked: boolean) => any;
+    isChecked?: boolean;
+    withBackground?: boolean;
+    centered?: boolean;
+    textSize?: StyledCheckboxRowTextSize;
+}
+export declare enum StyledCheckboxRowTextSize {
+    SM = "SM",
+    MD = "MD"
+}
+export default function StyledCheckboxRow({ darkTheme, withBackground, children, onChange, centered, isChecked, textSize, }: StyledCheckboxRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledCheckboxRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCheckboxRow.d.ts","sourceRoot":"","sources":["../../src/stories/StyledCheckboxRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,GAAG,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,oBAAY,yBAAyB;IACnC,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAYD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,QAAuC,GACxC,EAAE,sBAAsB,2CAwBxB"}

package/dist/stories/StyledCheckboxRow.js

@@ -0,0 +1,37 @@
+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 } from "react/jsx-runtime";
+import DfxIcon, { IconVariant, IconSize } from './DfxIcon';
+export var StyledCheckboxRowTextSize;
+(function (StyledCheckboxRowTextSize) {
+    StyledCheckboxRowTextSize["SM"] = "SM";
+    StyledCheckboxRowTextSize["MD"] = "MD";
+})(StyledCheckboxRowTextSize || (StyledCheckboxRowTextSize = {}));
+var CHECKBOX_SIZE_MAPS = (_a = {},
+    _a[StyledCheckboxRowTextSize.SM] = { textClasses: 'text-sm', iconSize: IconSize.MD },
+    _a[StyledCheckboxRowTextSize.MD] = { textClasses: '', iconSize: IconSize.LG },
+    _a);
+export default function StyledCheckboxRow(_a) {
+    var darkTheme = _a.darkTheme, withBackground = _a.withBackground, children = _a.children, onChange = _a.onChange, _b = _a.centered, centered = _b === void 0 ? false : _b, _c = _a.isChecked, isChecked = _c === void 0 ? false : _c, _d = _a.textSize, textSize = _d === void 0 ? StyledCheckboxRowTextSize.MD : _d;
+    function changeCheckbox(checkBoxState) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(checkBoxState);
+    }
+    var textClasses = CHECKBOX_SIZE_MAPS[textSize].textClasses;
+    textClasses += darkTheme ? ' text-white' : ' text-dfxBlue-800';
+    var wrapperClasses = 'flex gap-4 rounded';
+    wrapperClasses += centered ? ' justify-center ' : ' justify-start ';
+    if (withBackground)
+        wrapperClasses += darkTheme ? ' bg-dfxRed-100/10 p-3' : ' bg-dfxGray-400 p-3';
+    return (_jsxs("div", __assign({ className: wrapperClasses, onClick: function () { return changeCheckbox(!isChecked); } }, { children: [_jsx("div", __assign({ className: "shrink-0" }, { children: _jsx(DfxIcon, { icon: isChecked ? IconVariant.CHECKBOX_CHECKED : IconVariant.CHECKBOX_EMPTY, size: CHECKBOX_SIZE_MAPS[textSize].iconSize }) })), _jsx("p", __assign({ className: textClasses }, { children: children }))] })));
+}
+//# sourceMappingURL=StyledCheckboxRow.js.map

package/dist/stories/StyledCheckboxRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCheckboxRow.js","sourceRoot":"","sources":["../../src/stories/StyledCheckboxRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AACA,OAAO,OAAO,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAW3D,MAAM,CAAN,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACnC,sCAAS,CAAA;IACT,sCAAS,CAAA;AACX,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,QAGpC;AAOD,IAAM,kBAAkB;IACtB,GAAC,yBAAyB,CAAC,EAAE,IAAG,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE;IACjF,GAAC,yBAAyB,CAAC,EAAE,IAAG,EAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE;OAC3E,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAQjB;QAPvB,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,gBAAuC,EAAvC,QAAQ,mBAAG,yBAAyB,CAAC,EAAE,KAAA;IAEvC,SAAS,cAAc,CAAC,aAAsB;QAC5C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,aAAa,CAAC,CAAC;IAC5B,CAAC;IAED,IAAI,WAAW,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC;IAC3D,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAE/D,IAAI,cAAc,GAAG,oBAAoB,CAAC;IAC1C,cAAc,IAAI,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAEpE,IAAI,cAAc;QAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAElG,OAAO,CACL,wBAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,cAAM,OAAA,cAAc,CAAC,CAAC,SAAS,CAAC,EAA1B,CAA0B,iBACvE,uBAAK,SAAS,EAAC,UAAU,gBACvB,KAAC,OAAO,IACN,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,cAAc,EAC3E,IAAI,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC,QAAQ,GAC3C,IACE,EACN,qBAAG,SAAS,EAAE,WAAW,gBAAG,QAAQ,IAAK,KACrC,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledCoinList.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export interface StyledCoinListProps extends PropsWithChildren {
+    heading: string;
+}
+export default function StyledCoinList({ heading, children }: StyledCoinListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledCoinList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCoinList.d.ts","sourceRoot":"","sources":["../../src/stories/StyledCoinList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAOhF"}

package/dist/stories/StyledCoinList.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 StyledCoinList(_a) {
+    var heading = _a.heading, children = _a.children;
+    return (_jsxs("div", __assign({ className: "mb-6 last:mb-0" }, { children: [_jsx("h3", __assign({ className: "text-dfxBlue-800 text-sm border-b border-dfxGray-400" }, { children: heading })), _jsx("div", __assign({ className: "grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-5 my-3" }, { children: children }))] })));
+}
+//# sourceMappingURL=StyledCoinList.js.map

package/dist/stories/StyledCoinList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCoinList.js","sourceRoot":"","sources":["../../src/stories/StyledCoinList.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAMA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAA0C;QAAxC,OAAO,aAAA,EAAE,QAAQ,cAAA;IACxD,OAAO,CACL,wBAAK,SAAS,EAAC,gBAAgB,iBAC7B,sBAAI,SAAS,EAAC,sDAAsD,gBAAE,OAAO,IAAM,EACnF,uBAAK,SAAS,EAAC,2DAA2D,gBAAE,QAAQ,IAAO,KACvF,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledCoinListItem.d.ts

@@ -0,0 +1,14 @@
+import { Asset } from '../definitions/asset';
+export interface StyledCoinListItemProps {
+    asset: Asset;
+    isToken: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    protocol: string;
+    popupLabel?: string;
+    onAdd?: (svgData: string) => void;
+    alwaysShowDots?: boolean;
+    copy?: (value: string) => void;
+}
+export default function StyledCoinListItem({ asset, isToken, onClick, protocol, disabled, popupLabel, onAdd, alwaysShowDots, copy, }: StyledCoinListItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledCoinListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCoinListItem.d.ts","sourceRoot":"","sources":["../../src/stories/StyledCoinListItem.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,KAAK,EACL,cAAc,EACd,IAAI,GACL,EAAE,uBAAuB,2CAuGzB"}

package/dist/stories/StyledCoinListItem.js

@@ -0,0 +1,63 @@
+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 DfxAssetIcon from './DfxAssetIcon';
+import DfxIcon, { IconColor, IconVariant } from './DfxIcon';
+import StyledHorizontalStack from './layout-helpers/StyledHorizontalStack';
+import StyledVerticalStack from './layout-helpers/StyledVerticalStack';
+import StyledIconButton from './StyledIconButton';
+import { useFloating, offset, flip, shift, useDismiss, useInteractions } from '@floating-ui/react';
+import { renderToString } from 'react-dom/server';
+import { useState } from 'react';
+import { CopyButton } from './CopyButton';
+export default function StyledCoinListItem(_a) {
+    var _b, _c, _d;
+    var asset = _a.asset, isToken = _a.isToken, onClick = _a.onClick, protocol = _a.protocol, disabled = _a.disabled, popupLabel = _a.popupLabel, onAdd = _a.onAdd, alwaysShowDots = _a.alwaysShowDots, copy = _a.copy;
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var _f = useFloating({
+        open: open,
+        placement: 'bottom-start',
+        middleware: [offset(12), flip(), shift()],
+        onOpenChange: setOpen,
+    }), x = _f.x, y = _f.y, strategy = _f.strategy, refs = _f.refs, context = _f.context;
+    var dismiss = useDismiss(context, { outsidePress: true });
+    var _g = useInteractions([dismiss]), getReferenceProps = _g.getReferenceProps, getFloatingProps = _g.getFloatingProps;
+    var name = asset.comingSoon ? 'Coming soon' : asset.description;
+    var buttonClasses = 'flex gap-2 rounded-l px-3 py-2 z-10 flex-1';
+    var wrapperClasses = 'group flex rounded place-self-start';
+    var threeDotsClasses = ' rounded-r grow-0';
+    if (!(disabled || asset.comingSoon)) {
+        buttonClasses += ' active:bg-dfxGray-400/80';
+    }
+    if (!asset.comingSoon) {
+        wrapperClasses += ' hover:bg-dfxGray-400/50 focus:bg-dfxGray-400/50 ';
+        threeDotsClasses += ' group-hover:visible active:bg-dfxGray-500';
+        if (open) {
+            threeDotsClasses += ' bg-dfxGray-500 visible';
+            wrapperClasses += ' bg-dfxGray-400/50';
+        }
+        else {
+            if (!alwaysShowDots)
+                threeDotsClasses += ' invisible hover:bg-dfxGray-400/90';
+        }
+    }
+    else {
+        threeDotsClasses += ' invisible';
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: wrapperClasses }, { children: [_jsxs("button", __assign({ ref: refs.setReference, type: "button", onClick: onClick, className: buttonClasses, disabled: disabled || asset.comingSoon }, getReferenceProps(), { children: [_jsx("div", __assign({ className: "self-center" }, { children: _jsx(DfxAssetIcon, { asset: asset.name, disabled: asset.comingSoon }) })), _jsxs("div", __assign({ className: "flex-col text-dfxBlue-800 text-left" }, { children: [_jsxs("div", __assign({ className: "flex font-semibold gap-1 " }, { children: [_jsx("h4", __assign({ className: "leading-none" }, { children: asset.name })), isToken && _jsx("span", __assign({ className: "self-start leading-none text-2xs shrink-0" }, { children: protocol }))] })), _jsx("span", __assign({ className: "text-dfxGray-800 text-xs leading-none relative -top-1" }, { children: name }))] }))] })), popupLabel && onAdd && isToken && asset.chainId && (_jsx("button", __assign({ className: threeDotsClasses, onClick: function () { return setOpen(function (o) { return !o; }); } }, { children: _jsx(DfxIcon, { icon: IconVariant.THREE_DOTS_VERT, color: IconColor.BLUE }) })))] })), open && (_jsx("div", __assign({ ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y !== null && y !== void 0 ? y : 0,
+                    left: x !== null && x !== void 0 ? x : 0,
+                    width: 'max-content',
+                } }, getFloatingProps(), { className: "bg-white z-20 rounded shadow-xl text-sm border border-dfxGray-600/20 p-4 max-w-sm text-dfxBlue-800" }, { children: _jsxs(StyledVerticalStack, __assign({ gap: 4 }, { children: [_jsx("h4", __assign({ className: "font-bold" }, { children: asset.description })), _jsxs(StyledHorizontalStack, __assign({ spanAcross: true }, { children: [_jsx("span", __assign({ className: "font-bold" }, { children: "Contract" })), _jsxs(StyledHorizontalStack, __assign({ gap: 2 }, { children: [_jsx("span", __assign({ className: "font-bold" }, { children: "".concat((_b = asset.chainId) === null || _b === void 0 ? void 0 : _b.substring(0, 5), "...").concat((_c = asset.chainId) === null || _c === void 0 ? void 0 : _c.substring(((_d = asset.chainId) === null || _d === void 0 ? void 0 : _d.length) - 5)) })), _jsx(CopyButton, { onCopy: function () { var _a; return copy === null || copy === void 0 ? void 0 : copy((_a = asset.chainId) !== null && _a !== void 0 ? _a : ''); } }), asset.chainId && onAdd && (_jsx(StyledIconButton, { icon: IconVariant.METAMASK_LOGO, onClick: function () { return onAdd(renderToString(_jsx(DfxAssetIcon, { asset: asset.name }))); } })), asset.explorerUrl && (_jsx(StyledIconButton, { icon: IconVariant.OPEN_IN_NEW, onClick: function () { return window.open(asset.explorerUrl, '_blank'); } }))] }))] })), _jsx("p", __assign({ className: "text-dfxGray-700 text-xs" }, { children: popupLabel }))] })) })))] }));
+}
+//# sourceMappingURL=StyledCoinListItem.js.map

package/dist/stories/StyledCoinListItem.js.map

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

package/dist/stories/StyledDataBox.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { StyledIconButtonProps } from './StyledIconButton';
+interface StyledDataBoxProps extends PropsWithChildren {
+    heading: string;
+    rightIconButton?: StyledIconButtonProps;
+    boxButtonLabel?: string;
+    boxButtonOnClick?: () => void;
+    rightCornerHeading?: string;
+}
+export default function StyledDataBox({ heading, children, rightIconButton, rightCornerHeading, boxButtonLabel, boxButtonOnClick, }: StyledDataBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StyledDataBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDataBox.d.ts","sourceRoot":"","sources":["../../src/stories/StyledDataBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,OAAO,EACP,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,EAAE,kBAAkB,2CAiCpB"}

package/dist/stories/StyledDataBox.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 } from "react/jsx-runtime";
+import StyledIconButton from './StyledIconButton';
+export default function StyledDataBox(_a) {
+    var heading = _a.heading, children = _a.children, rightIconButton = _a.rightIconButton, rightCornerHeading = _a.rightCornerHeading, boxButtonLabel = _a.boxButtonLabel, boxButtonOnClick = _a.boxButtonOnClick;
+    var headingClasses = 'mb-2';
+    var containerClasses = ' border-white/20  p-3';
+    boxButtonLabel !== undefined
+        ? (containerClasses += ' rounded-t border-x border-t')
+        : (containerClasses += ' border rounded');
+    if (!children) {
+        headingClasses += ' text-white/20';
+    }
+    return (_jsxs("div", __assign({ className: "mb-6 sm:max-w-lg md:max-w-none md:w-full mx-auto" }, { children: [_jsxs("div", __assign({ className: containerClasses }, { children: [_jsxs("div", __assign({ className: "flex justify-between content-start" }, { children: [_jsx("h2", __assign({ className: headingClasses }, { children: heading })), rightIconButton && _jsx(StyledIconButton, __assign({}, rightIconButton)), rightCornerHeading && _jsx("span", __assign({ className: "text-lg font-bold" }, { children: rightCornerHeading }))] })), _jsx("div", { children: children })] })), boxButtonLabel !== undefined && (_jsx("button", __assign({ type: "button", onClick: boxButtonOnClick, className: "bg-white/10 border-white/20 uppercase p-2 font-bold border w-full rounded-b hover:bg-white/20 focus:bg-white/20 active:bg-white/30" }, { children: boxButtonLabel })))] })));
+}
+//# sourceMappingURL=StyledDataBox.js.map

package/dist/stories/StyledDataBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDataBox.js","sourceRoot":"","sources":["../../src/stories/StyledDataBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAA2C,MAAM,oBAAoB,CAAC;AAU7E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAOjB;QANnB,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,eAAe,qBAAA,EACf,kBAAkB,wBAAA,EAClB,cAAc,oBAAA,EACd,gBAAgB,sBAAA;IAEhB,IAAI,cAAc,GAAG,MAAM,CAAC;IAC5B,IAAI,gBAAgB,GAAG,uBAAuB,CAAC;IAE/C,cAAc,KAAK,SAAS;QAC1B,CAAC,CAAC,CAAC,gBAAgB,IAAI,8BAA8B,CAAC;QACtD,CAAC,CAAC,CAAC,gBAAgB,IAAI,iBAAiB,CAAC,CAAC;IAE5C,IAAI,CAAC,QAAQ,EAAE;QACb,cAAc,IAAI,gBAAgB,CAAC;KACpC;IAED,OAAO,CACL,wBAAK,SAAS,EAAC,kDAAkD,iBAC/D,wBAAK,SAAS,EAAE,gBAAgB,iBAC9B,wBAAK,SAAS,EAAC,oCAAoC,iBACjD,sBAAI,SAAS,EAAE,cAAc,gBAAG,OAAO,IAAM,EAC5C,eAAe,IAAI,KAAC,gBAAgB,eAAK,eAAe,EAAI,EAC5D,kBAAkB,IAAI,wBAAM,SAAS,EAAC,mBAAmB,gBAAE,kBAAkB,IAAQ,KAClF,EACN,wBAAM,QAAQ,GAAO,KACjB,EACL,cAAc,KAAK,SAAS,IAAI,CAC/B,0BACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAC,oIAAoI,gBAE7I,cAAc,IACR,CACV,KACG,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledDataTable.d.ts

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+export interface StyledDataTableProps extends PropsWithChildren {
+    darkTheme?: boolean;
+    heading?: string;
+    label?: string;
+    showBorder?: boolean;
+    alignContent?: AlignContent;
+    narrow?: boolean;
+}
+export declare enum AlignContent {
+    LEFT = "LEFT",
+    RIGHT = "RIGHT",
+    BETWEEN = "BETWEEN"
+}
+export declare const ThemeContext: import("react").Context<{
+    darkTheme: boolean;
+    showBorder: boolean;
+    alignContent: AlignContent;
+    narrow: boolean;
+}>;
+export default function StyledDataTable({ showBorder, heading, label, darkTheme, children, alignContent, narrow, }: StyledDataTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledDataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDataTable.d.ts","sourceRoot":"","sources":["../../src/stories/StyledDataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAEzD,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAQD,eAAO,MAAM,YAAY;;;;;EAA8B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,UAAiB,EACjB,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,YAAgC,EAChC,MAAc,GACf,EAAE,oBAAoB,2CAkBtB"}

package/dist/stories/StyledDataTable.js

@@ -0,0 +1,38 @@
+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 { createContext } from 'react';
+export var AlignContent;
+(function (AlignContent) {
+    AlignContent["LEFT"] = "LEFT";
+    AlignContent["RIGHT"] = "RIGHT";
+    AlignContent["BETWEEN"] = "BETWEEN";
+})(AlignContent || (AlignContent = {}));
+var contextProps = {
+    darkTheme: true,
+    showBorder: true,
+    alignContent: AlignContent.LEFT,
+    narrow: false,
+};
+export var ThemeContext = createContext(contextProps);
+export default function StyledDataTable(_a) {
+    var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b, heading = _a.heading, label = _a.label, _c = _a.darkTheme, darkTheme = _c === void 0 ? false : _c, children = _a.children, _d = _a.alignContent, alignContent = _d === void 0 ? AlignContent.LEFT : _d, _e = _a.narrow, narrow = _e === void 0 ? false : _e;
+    var headingClasses = 'text-lg font-bold mb-2.5';
+    var labelClasses = 'font-semibold text-sm mb-1.5 ml-3.5';
+    if (!darkTheme) {
+        labelClasses += ' text-dfxBlue-800';
+        headingClasses += ' text-dfxBlue-800';
+    }
+    showBorder && (headingClasses += ' ml-3.5');
+    return (_jsx(ThemeContext.Provider, __assign({ value: { darkTheme: darkTheme, showBorder: showBorder, alignContent: alignContent, narrow: narrow } }, { children: _jsxs("div", __assign({ className: "mb-2.5" }, { children: [heading !== undefined && _jsx("h3", __assign({ className: headingClasses }, { children: heading })), label !== undefined && showBorder && _jsx("p", __assign({ className: labelClasses }, { children: label })), _jsx("div", { children: children })] })) })));
+}
+//# sourceMappingURL=StyledDataTable.js.map

package/dist/stories/StyledDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDataTable.js","sourceRoot":"","sources":["../../src/stories/StyledDataTable.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,OAAO,CAAC;AAWzD,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,mCAAmB,CAAA;AACrB,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAED,IAAM,YAAY,GAAG;IACnB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE,YAAY,CAAC,IAAI;IAC/B,MAAM,EAAE,KAAK;CACd,CAAC;AACF,MAAM,CAAC,IAAM,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAQjB;QAPrB,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,OAAO,aAAA,EACP,KAAK,WAAA,EACL,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,QAAQ,cAAA,EACR,oBAAgC,EAAhC,YAAY,mBAAG,YAAY,CAAC,IAAI,KAAA,EAChC,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA;IAEd,IAAI,cAAc,GAAG,0BAA0B,CAAC;IAChD,IAAI,YAAY,GAAG,qCAAqC,CAAC;IAEzD,IAAI,CAAC,SAAS,EAAE;QACd,YAAY,IAAI,mBAAmB,CAAC;QACpC,cAAc,IAAI,mBAAmB,CAAC;KACvC;IACD,UAAU,IAAI,CAAC,cAAc,IAAI,SAAS,CAAC,CAAC;IAC5C,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,aAAC,KAAK,EAAE,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,YAAY,cAAA,EAAE,MAAM,QAAA,EAAE,gBAC3E,wBAAK,SAAS,EAAC,QAAQ,iBACpB,OAAO,KAAK,SAAS,IAAI,sBAAI,SAAS,EAAE,cAAc,gBAAG,OAAO,IAAM,EACtE,KAAK,KAAK,SAAS,IAAI,UAAU,IAAI,qBAAG,SAAS,EAAE,YAAY,gBAAG,KAAK,IAAK,EAC7E,wBAAM,QAAQ,GAAO,KACjB,IACgB,CACzB,CAAC;AACJ,CAAC"}

package/dist/stories/StyledDataTableRow.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+interface StyledDataTableRowProps extends PropsWithChildren {
+    label?: string;
+    discreet?: boolean;
+    isLoading?: boolean;
+    infoText?: string;
+}
+export default function StyledDataTableRow({ label, children, discreet, isLoading, infoText, }: StyledDataTableRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StyledDataTableRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDataTableRow.d.ts","sourceRoot":"","sources":["../../src/stories/StyledDataTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAMtD,UAAU,uBAAwB,SAAQ,iBAAiB;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAQD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,uBAAuB,2CA8CzB"}

package/dist/stories/StyledDataTableRow.js

@@ -0,0 +1,47 @@
+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 } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { IconColor } from './DfxIcon';
+import { AlignContent, ThemeContext } from './StyledDataTable';
+import StyledInfoText, { StyledInfoTextSize } from './StyledInfoText';
+import StyledLoadingSpinner, { SpinnerSize, SpinnerVariant } from './StyledLoadingSpinner';
+var ALIGN_MAPS = (_a = {},
+    _a[AlignContent.LEFT] = ' justify-start',
+    _a[AlignContent.RIGHT] = ' justify-end',
+    _a[AlignContent.BETWEEN] = ' justify-between',
+    _a);
+export default function StyledDataTableRow(_a) {
+    var label = _a.label, children = _a.children, discreet = _a.discreet, isLoading = _a.isLoading, infoText = _a.infoText;
+    var theme = useContext(ThemeContext);
+    var wrapperClasses = 'flex flex-col gap-3 text-sm';
+    var labelClasses = ' ';
+    var rowDataClasses = 'flex gap-3 w-full';
+    discreet && (wrapperClasses += ' opacity-70');
+    theme.showBorder
+        ? (wrapperClasses += ' px-3.5 py-2.5 border-t border-x last:border-y first:rounded-t last:rounded-b')
+        : (wrapperClasses += ' py-2');
+    !theme.showBorder && theme.narrow && (wrapperClasses += ' px-3.5');
+    if (theme.darkTheme) {
+        labelClasses += ' text-dfxGray-600';
+        wrapperClasses += ' border-white/20';
+    }
+    else {
+        labelClasses += ' text-dfxGray-800';
+        rowDataClasses += ' text-dfxBlue-800';
+        wrapperClasses += ' border-dfxGray-400';
+    }
+    rowDataClasses += ALIGN_MAPS[theme.alignContent];
+    return (_jsxs("div", __assign({ className: wrapperClasses }, { children: [_jsxs("div", __assign({ className: "flex" }, { children: [label && (_jsx("div", __assign({ className: "flex-none w-48" }, { children: _jsx("p", __assign({ className: labelClasses }, { children: label })) }))), _jsx("div", __assign({ className: rowDataClasses }, { children: isLoading ? _jsx(StyledLoadingSpinner, { size: SpinnerSize.SM, variant: SpinnerVariant.PALE }) : children }))] })), infoText && (_jsx(StyledInfoText, __assign({ textSize: StyledInfoTextSize.XS, iconColor: IconColor.GRAY, discreet: true }, { children: infoText })))] })));
+}
+//# sourceMappingURL=StyledDataTableRow.js.map

package/dist/stories/StyledDataTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDataTableRow.js","sourceRoot":"","sources":["../../src/stories/StyledDataTableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,cAAc,EAAE,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,oBAAoB,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAS3F,IAAM,UAAU;IACd,GAAC,YAAY,CAAC,IAAI,IAAG,gBAAgB;IACrC,GAAC,YAAY,CAAC,KAAK,IAAG,cAAc;IACpC,GAAC,YAAY,CAAC,OAAO,IAAG,kBAAkB;OAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAMjB;QALxB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA;IAER,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAI,cAAc,GAAG,6BAA6B,CAAC;IACnD,IAAI,YAAY,GAAG,GAAG,CAAC;IACvB,IAAI,cAAc,GAAG,mBAAmB,CAAC;IAEzC,QAAQ,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,CAAC;IAE9C,KAAK,CAAC,UAAU;QACd,CAAC,CAAC,CAAC,cAAc,IAAI,+EAA+E,CAAC;QACrG,CAAC,CAAC,CAAC,cAAc,IAAI,OAAO,CAAC,CAAC;IAEhC,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,cAAc,IAAI,SAAS,CAAC,CAAC;IAEnE,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,YAAY,IAAI,mBAAmB,CAAC;QACpC,cAAc,IAAI,kBAAkB,CAAC;KACtC;SAAM;QACL,YAAY,IAAI,mBAAmB,CAAC;QACpC,cAAc,IAAI,mBAAmB,CAAC;QACtC,cAAc,IAAI,qBAAqB,CAAC;KACzC;IAED,cAAc,IAAI,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAEjD,OAAO,CACL,wBAAK,SAAS,EAAE,cAAc,iBAC5B,wBAAK,SAAS,EAAC,MAAM,iBAClB,KAAK,IAAI,CACR,uBAAK,SAAS,EAAC,gBAAgB,gBAC7B,qBAAG,SAAS,EAAE,YAAY,gBAAG,KAAK,IAAK,IACnC,CACP,EAED,uBAAK,SAAS,EAAE,cAAc,gBAC3B,SAAS,CAAC,CAAC,CAAC,KAAC,oBAAoB,IAAC,IAAI,EAAE,WAAW,CAAC,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,QAAQ,IAChG,KACF,EACL,QAAQ,IAAI,CACX,KAAC,cAAc,aAAC,QAAQ,EAAE,kBAAkB,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC,IAAI,EAAE,QAAQ,sBACjF,QAAQ,IACM,CAClB,KACG,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/StyledDataTextRow.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface StyledDataTextRowProps extends PropsWithChildren {
+    label: string;
+    isLoading?: boolean;
+}
+export default function StyledDataTextRow({ label, children, isLoading }: StyledDataTextRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StyledDataTextRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDataTextRow.d.ts","sourceRoot":"","sources":["../../src/stories/StyledDataTextRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAc/F"}