@aurora-is-near/intents-swap-widget 3.18.2 → 3.19.0

package/dist/components/Accordion.js

@@ -1,48 +1,47 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { useState as w } from "react";
-import { ChevronLeftW700 as a } from "@material-symbols-svg/react-rounded/icons/chevron-left";
+import { ChevronLeftW700 as l } from "@material-symbols-svg/react-rounded/icons/chevron-left";
 import { Hr as p } from "./Hr.js";
 import { Card as f } from "./Card.js";
 import { Badge as h } from "./Badge.js";
 import { cn as u } from "../utils/cn.js";
-const k = ({
-  title: r,
+const E = ({
+  title: a,
   badge: t,
   children: o,
   isBadgeLoading: m,
-  expandedHeightPx: i,
-  expandedByDefault: n = !1,
+  expandedHeightPx: n,
+  expandedByDefault: i = !1,
   className: c
 }) => {
-  const [l, d] = w(n);
-  return /* @__PURE__ */ s(
-    f,
-    {
-      isClickable: !0,
-      className: u("py-sw-lg", c),
-      onClick: () => d((x) => !x),
-      children: [
-        /* @__PURE__ */ s("header", { className: "align-center flex w-full justify-between", children: [
-          /* @__PURE__ */ e("span", { className: "gap-sw-xs text-sw-label-md mt-sw-xs flex text-center text-sw-gray-200", children: r }),
+  const [r, d] = w(i);
+  return /* @__PURE__ */ s(f, { className: u("py-sw-xl", c), children: [
+    /* @__PURE__ */ s(
+      "header",
+      {
+        onClick: () => d((x) => !x),
+        className: "items-center flex w-full justify-between cursor-pointer",
+        children: [
+          /* @__PURE__ */ e("span", { className: "gap-sw-xs text-sw-label-md flex text-center text-sw-gray-200", children: a }),
           m ? /* @__PURE__ */ e("div", { className: "ml-auto h-[20px] w-[100px] animate-pulse rounded-full bg-sw-gray-800" }) : t && /* @__PURE__ */ e(h, { children: t }),
-          /* @__PURE__ */ e("button", { type: "button", className: "ml-sw-lg cursor-pointer", children: l ? /* @__PURE__ */ e(a, { className: "h-sw-2xl w-sw-2xl text-sw-gray-200 rotate-90" }) : /* @__PURE__ */ e(a, { className: "h-sw-2xl w-sw-2xl text-sw-gray-200 -rotate-90" }) })
-        ] }),
-        /* @__PURE__ */ s(
-          "div",
-          {
-            style: { height: l ? i : 0 },
-            className: "gap-sw-md flex flex-col overflow-hidden transition-all delay-0 duration-300 ease-in-out",
-            children: [
-              /* @__PURE__ */ e(p, { className: "mt-sw-xl mb-sw-md" }),
-              o
-            ]
-          }
-        )
-      ]
-    }
-  );
+          /* @__PURE__ */ e("button", { type: "button", className: "ml-sw-lg cursor-pointer", children: r ? /* @__PURE__ */ e(l, { className: "h-sw-2xl w-sw-2xl text-sw-gray-200 rotate-90" }) : /* @__PURE__ */ e(l, { className: "h-sw-2xl w-sw-2xl text-sw-gray-200 -rotate-90" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        style: { height: r ? n : 0 },
+        className: "gap-sw-md flex flex-col overflow-hidden transition-all delay-0 duration-300 ease-in-out",
+        children: [
+          /* @__PURE__ */ e(p, { className: "mt-sw-xl mb-sw-md" }),
+          o
+        ]
+      }
+    )
+  ] });
 };
 export {
-  k as Accordion
+  E as Accordion
 };
 //# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { ChevronLeftW700 as ChevronLeft } from '@material-symbols-svg/react-rounded/icons/chevron-left';\nimport type { ReactNode } from 'react';\n\nimport { Hr } from './Hr';\nimport { Card } from './Card';\nimport { Badge } from './Badge';\nimport { cn } from '@/utils/cn';\n\ntype Props = {\n  title: ReactNode;\n  badge?: string;\n  isBadgeLoading?: boolean;\n  expandedByDefault?: boolean;\n  children: ReactNode | ReactNode[];\n  expandedHeightPx: number;\n  className?: string;\n};\n\nexport const Accordion = ({\n  title,\n  badge,\n  children,\n  isBadgeLoading,\n  expandedHeightPx,\n  expandedByDefault = false,\n  className,\n}: Props) => {\n  const [isExpanded, setIsExpanded] = useState(expandedByDefault);\n\n  return (\n    <Card\n      isClickable\n      className={cn('py-sw-lg', className)}\n      onClick={() => setIsExpanded((p) => !p)}>\n      <header className=\"align-center flex w-full justify-between\">\n        <span className=\"gap-sw-xs text-sw-label-md mt-sw-xs flex text-center text-sw-gray-200\">\n          {title}\n        </span>\n        {isBadgeLoading ? (\n          <div className=\"ml-auto h-[20px] w-[100px] animate-pulse rounded-full bg-sw-gray-800\" />\n        ) : (\n          badge && <Badge>{badge}</Badge>\n        )}\n        <button type=\"button\" className=\"ml-sw-lg cursor-pointer\">\n          {isExpanded ? (\n            <ChevronLeft className=\"h-sw-2xl w-sw-2xl text-sw-gray-200 rotate-90\" />\n          ) : (\n            <ChevronLeft className=\"h-sw-2xl w-sw-2xl text-sw-gray-200 -rotate-90\" />\n          )}\n        </button>\n      </header>\n\n      <div\n        style={{ height: isExpanded ? expandedHeightPx : 0 }} // has to be inline for animation to work\n        className=\"gap-sw-md flex flex-col overflow-hidden transition-all delay-0 duration-300 ease-in-out\">\n        <Hr className=\"mt-sw-xl mb-sw-md\" />\n        {children}\n      </div>\n    </Card>\n  );\n};\n"],"names":["Accordion","title","badge","children","isBadgeLoading","expandedHeightPx","expandedByDefault","className","isExpanded","setIsExpanded","useState","jsxs","Card","cn","p","jsx","Badge","ChevronLeft","Hr"],"mappings":";;;;;;;AAmBO,MAAMA,IAAY,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC;AACF,MAAa;AACX,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASJ,CAAiB;AAE9D,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAWC,EAAG,YAAYN,CAAS;AAAA,MACnC,SAAS,MAAME,EAAc,CAACK,MAAM,CAACA,CAAC;AAAA,MACtC,UAAA;AAAA,QAAA,gBAAAH,EAAC,UAAA,EAAO,WAAU,4CAChB,UAAA;AAAA,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,yEACb,UAAAd,GACH;AAAA,UACCG,sBACE,OAAA,EAAI,WAAU,wEAAuE,IAEtFF,KAAS,gBAAAa,EAACC,GAAA,EAAO,UAAAd,EAAA,CAAM;AAAA,4BAExB,UAAA,EAAO,MAAK,UAAS,WAAU,2BAC7B,UAAAM,IACC,gBAAAO,EAACE,GAAA,EAAY,WAAU,gDAA+C,IAEtE,gBAAAF,EAACE,GAAA,EAAY,WAAU,iDAAgD,EAAA,CAE3E;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,QAAQH,IAAaH,IAAmB,EAAA;AAAA,YACjD,WAAU;AAAA,YACV,UAAA;AAAA,cAAA,gBAAAU,EAACG,GAAA,EAAG,WAAU,oBAAA,CAAoB;AAAA,cACjCf;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Accordion.js","sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { ChevronLeftW700 as ChevronLeft } from '@material-symbols-svg/react-rounded/icons/chevron-left';\nimport type { ReactNode } from 'react';\n\nimport { Hr } from './Hr';\nimport { Card } from './Card';\nimport { Badge } from './Badge';\nimport { cn } from '@/utils/cn';\n\ntype Props = {\n  title: ReactNode;\n  badge?: string;\n  isBadgeLoading?: boolean;\n  expandedByDefault?: boolean;\n  children: ReactNode | ReactNode[];\n  expandedHeightPx: number;\n  className?: string;\n};\n\nexport const Accordion = ({\n  title,\n  badge,\n  children,\n  isBadgeLoading,\n  expandedHeightPx,\n  expandedByDefault = false,\n  className,\n}: Props) => {\n  const [isExpanded, setIsExpanded] = useState(expandedByDefault);\n\n  return (\n    <Card className={cn('py-sw-xl', className)}>\n      <header\n        onClick={() => setIsExpanded((p) => !p)}\n        className=\"items-center flex w-full justify-between cursor-pointer\">\n        <span className=\"gap-sw-xs text-sw-label-md flex text-center text-sw-gray-200\">\n          {title}\n        </span>\n        {isBadgeLoading ? (\n          <div className=\"ml-auto h-[20px] w-[100px] animate-pulse rounded-full bg-sw-gray-800\" />\n        ) : (\n          badge && <Badge>{badge}</Badge>\n        )}\n        <button type=\"button\" className=\"ml-sw-lg cursor-pointer\">\n          {isExpanded ? (\n            <ChevronLeft className=\"h-sw-2xl w-sw-2xl text-sw-gray-200 rotate-90\" />\n          ) : (\n            <ChevronLeft className=\"h-sw-2xl w-sw-2xl text-sw-gray-200 -rotate-90\" />\n          )}\n        </button>\n      </header>\n\n      <div\n        style={{ height: isExpanded ? expandedHeightPx : 0 }} // has to be inline for animation to work\n        className=\"gap-sw-md flex flex-col overflow-hidden transition-all delay-0 duration-300 ease-in-out\">\n        <Hr className=\"mt-sw-xl mb-sw-md\" />\n        {children}\n      </div>\n    </Card>\n  );\n};\n"],"names":["Accordion","title","badge","children","isBadgeLoading","expandedHeightPx","expandedByDefault","className","isExpanded","setIsExpanded","useState","Card","cn","jsxs","p","jsx","Badge","ChevronLeft","Hr"],"mappings":";;;;;;;AAmBO,MAAMA,IAAY,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,WAAAC;AACF,MAAa;AACX,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASJ,CAAiB;AAE9D,2BACGK,GAAA,EAAK,WAAWC,EAAG,YAAYL,CAAS,GACvC,UAAA;AAAA,IAAA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAc,CAACK,MAAM,CAACA,CAAC;AAAA,QACtC,WAAU;AAAA,QACV,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,gEACb,UAAAd,GACH;AAAA,UACCG,sBACE,OAAA,EAAI,WAAU,wEAAuE,IAEtFF,KAAS,gBAAAa,EAACC,GAAA,EAAO,UAAAd,EAAA,CAAM;AAAA,4BAExB,UAAA,EAAO,MAAK,UAAS,WAAU,2BAC7B,UAAAM,IACC,gBAAAO,EAACE,GAAA,EAAY,WAAU,gDAA+C,IAEtE,gBAAAF,EAACE,GAAA,EAAY,WAAU,iDAAgD,EAAA,CAE3E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,QAAQL,IAAaH,IAAmB,EAAA;AAAA,QACjD,WAAU;AAAA,QACV,UAAA;AAAA,UAAA,gBAAAU,EAACG,GAAA,EAAG,WAAU,oBAAA,CAAoB;AAAA,UACjCf;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/components/AllNetworksIcon.js

@@ -0,0 +1,11 @@
+import { jsxs as x, jsx as s } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ x("div", { className: "flex flex-wrap gap-y-0 gap-x-[2px] h-[17px] w-[16px]", children: [
+  /* @__PURE__ */ s("div", { className: "w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-900" }),
+  /* @__PURE__ */ s("div", { className: "w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-600" }),
+  /* @__PURE__ */ s("div", { className: "w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-600" }),
+  /* @__PURE__ */ s("div", { className: "w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-900" })
+] });
+export {
+  r as AllNetworksIcon
+};
+//# sourceMappingURL=AllNetworksIcon.js.map

package/dist/components/AllNetworksIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllNetworksIcon.js","sources":["../../src/components/AllNetworksIcon.tsx"],"sourcesContent":["export const AllNetworksIcon = () => (\n  <div className=\"flex flex-wrap gap-y-0 gap-x-[2px] h-[17px] w-[16px]\">\n    <div className=\"w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-900\" />\n    <div className=\"w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-600\" />\n    <div className=\"w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-600\" />\n    <div className=\"w-[7px] h-[7px] rounded-[2px] shrink-0 bg-sw-gray-900\" />\n  </div>\n);\n"],"names":["AllNetworksIcon","jsxs","jsx"],"mappings":";AAAO,MAAMA,IAAkB,MAC7B,gBAAAC,EAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,wDAAA,CAAwD;AAAA,EACvE,gBAAAA,EAAC,OAAA,EAAI,WAAU,wDAAA,CAAwD;AAAA,EACvE,gBAAAA,EAAC,OAAA,EAAI,WAAU,wDAAA,CAAwD;AAAA,EACvE,gBAAAA,EAAC,OAAA,EAAI,WAAU,wDAAA,CAAwD;AAAA,EAAA,CACzE;"}

package/dist/components/Button.d.ts

@@ -16,6 +16,14 @@ type Props = {
 } | {
     icon?: never;
     iconPosition?: never;
+}) & ({
+    as?: 'button';
+    href?: never;
+    target?: never;
+} | {
+    as: 'a';
+    href: string;
+    target?: '_blank' | '_self';
 });
 export declare const Button: ({ variant, ...restProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button.js

@@ -1,8 +1,8 @@
-import { jsx as s, jsxs as w } from "react/jsx-runtime";
-import { Button as g } from "@headlessui/react";
-import { ProgressActivityW700 as m } from "@material-symbols-svg/react-rounded/icons/progress-activity";
-import { cn as c } from "../utils/cn.js";
-const e = {
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { Button as p } from "@headlessui/react";
+import { ProgressActivityW700 as y } from "@material-symbols-svg/react-rounded/icons/progress-activity";
+import { cn as m } from "../utils/cn.js";
+const t = {
   icon: "h-sw-xl w-sw-xl",
   size: (n) => ({
     "px-sw-xl py-sw-[10px] rounded-sw-sm": n === "sm",
@@ -16,44 +16,49 @@ const e = {
     ring-1 ring-inset ring-transparent
     transition-all duration-250 ease-in-out
   `
-}, u = ({
+}, x = ({
   icon: n,
   iconPosition: i,
   children: o,
-  state: r
+  state: e
 }) => {
-  const t = !!n, a = t && r !== "loading" ? n ?? (() => /* @__PURE__ */ s("span", {})) : ({ className: l, ...d }) => /* @__PURE__ */ s(
-    m,
+  const r = !!n, a = r && e !== "loading" ? n ?? (() => /* @__PURE__ */ s("span", {})) : ({ className: l, ...d }) => /* @__PURE__ */ s(
+    y,
     {
-      className: c(e.icon, "animate-spin", l),
+      className: m(t.icon, "animate-spin", l),
       ...d
     }
   );
-  return /* @__PURE__ */ w("span", { className: "text-sw-label-md flex w-full items-center justify-center gap-sw-lg py-sw-xs", children: [
-    t && i !== "tail" || !t && r === "loading" ? /* @__PURE__ */ s(a, { className: e.icon }) : null,
+  return /* @__PURE__ */ b("span", { className: "text-sw-label-md flex w-full items-center justify-center gap-sw-lg py-sw-xs", children: [
+    r && i !== "tail" || !r && e === "loading" ? /* @__PURE__ */ s(a, { className: t.icon }) : null,
     o,
-    t && i === "tail" && /* @__PURE__ */ s(a, { className: e.icon })
+    r && i === "tail" && /* @__PURE__ */ s(a, { className: t.icon })
   ] });
-}, p = ({
+}, f = ({
   size: n,
   className: i,
   children: o,
+  as: e = "button",
   state: r = "default",
-  onClick: t,
-  fluid: a,
-  ...l
+  onClick: a,
+  fluid: l,
+  href: d,
+  target: c,
+  ...g
 }) => {
-  const d = ["disabled", "loading", "error"].includes(r) ? !0 : void 0;
+  const u = e === "a" ? { href: d, target: c } : {}, w = ["disabled", "loading", "error"].includes(r) ? !0 : void 0;
   return /* @__PURE__ */ s(
-    g,
+    p,
     {
-      disabled: d,
+      as: e,
+      disabled: w,
       "data-active": r === "active" ? !0 : void 0,
-      onClick: () => r === "default" && t?.(),
-      className: c(
-        e.common,
-        e.width(a),
-        e.size(n),
+      onClick: () => r === "default" && a?.(),
+      ...u,
+      className: m(
+        t.common,
+        t.width(l),
+        t.size(n),
         {
           "bg-transparent text-sw-status-error ring-1 ring-inset ring-sw-status-error": r === "error",
           "bg-transparent text-sw-gray-400 ring-1 ring-inset ring-sw-gray-700": r === "loading" || r === "disabled",
@@ -61,29 +66,34 @@ const e = {
         },
         i
       ),
-      children: /* @__PURE__ */ s(u, { state: r, ...l, children: o })
+      children: /* @__PURE__ */ s(x, { state: r, ...g, children: o })
     }
   );
-}, x = ({
+}, h = ({
   size: n,
   className: i,
   children: o,
+  as: e = "button",
   state: r = "default",
-  onClick: t,
-  fluid: a,
-  ...l
+  onClick: a,
+  fluid: l,
+  href: d,
+  target: c,
+  ...g
 }) => {
-  const d = ["disabled", "loading", "error"].includes(r) ? !0 : void 0;
+  const u = e === "a" ? { href: d, target: c } : {}, w = ["disabled", "loading", "error"].includes(r) ? !0 : void 0;
   return /* @__PURE__ */ s(
-    g,
+    p,
     {
-      disabled: d,
+      as: e,
+      disabled: w,
       "data-active": r === "active" ? !0 : void 0,
-      onClick: () => r === "default" && t?.(),
-      className: c(
-        e.common,
-        e.width(a),
-        e.size(n),
+      onClick: () => r === "default" && a?.(),
+      ...u,
+      className: m(
+        t.common,
+        t.width(l),
+        t.size(n),
         {
           "bg-transparent text-sw-status-error ring-1 ring-inset ring-sw-status-error": r === "error",
           "bg-transparent text-sw-gray-400 ring-1 ring-inset ring-sw-gray-700": r === "loading" || r === "disabled",
@@ -91,19 +101,19 @@ const e = {
         },
         i
       ),
-      children: /* @__PURE__ */ s(u, { state: r, ...l, children: o })
+      children: /* @__PURE__ */ s(x, { state: r, ...g, children: o })
     }
   );
-}, h = ({ variant: n, ...i }) => {
+}, C = ({ variant: n, ...i }) => {
   switch (n) {
     case "outlined":
-      return /* @__PURE__ */ s(x, { ...i });
+      return /* @__PURE__ */ s(h, { ...i });
     case "primary":
     default:
-      return /* @__PURE__ */ s(p, { ...i });
+      return /* @__PURE__ */ s(f, { ...i });
   }
 };
 export {
-  h as Button
+  C as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import { Button as UIButton } from '@headlessui/react';\nimport { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';\nimport type {\n  IconProps,\n  MaterialSymbolsComponent,\n} from '@material-symbols-svg/react';\n\nimport { cn as clsx } from '@/utils/cn';\n\ntype Size = 'sm' | 'md' | 'lg';\ntype Variant = 'primary' | 'outlined';\ntype State = 'default' | 'loading' | 'disabled' | 'active' | 'error';\n\ntype Props = {\n  size: Size;\n  state?: State;\n  variant: Variant;\n  children: React.ReactNode;\n  className?: string;\n  onClick?: () => void;\n  fluid?: boolean;\n} & (\n  | { icon: MaterialSymbolsComponent; iconPosition?: 'head' | 'tail' }\n  | { icon?: never; iconPosition?: never }\n);\n\nconst styles = {\n  icon: 'h-sw-xl w-sw-xl',\n\n  size: (size: Size) => ({\n    'px-sw-xl py-sw-[10px] rounded-sw-sm': size === 'sm',\n    'px-sw-2xl py-sw-sm rounded-sw-md': size === 'md',\n    'px-sw-3xl py-sw-xl rounded-sw-lg': size === 'lg',\n  }),\n\n  width: (fluid?: boolean) => ({\n    'w-full': !fluid,\n  }),\n\n  common: `\n    ring-1 ring-inset ring-transparent\n    transition-all duration-250 ease-in-out\n  `,\n};\n\nconst ButtonChildren = ({\n  icon,\n  iconPosition,\n  children,\n  state,\n}: Pick<Props, 'icon' | 'iconPosition' | 'children' | 'state'>) => {\n  const hasIcon = !!icon;\n  const Icon =\n    hasIcon && state !== 'loading'\n      ? (icon ?? (() => <span />))\n      : ({ className, ...iconProps }: IconProps) => (\n          <ProgressActivity\n            className={clsx(styles.icon, 'animate-spin', className)}\n            {...iconProps}\n          />\n        );\n\n  return (\n    <span className=\"text-sw-label-md flex w-full items-center justify-center gap-sw-lg py-sw-xs\">\n      {(hasIcon && iconPosition !== 'tail') ||\n      (!hasIcon && state === 'loading') ? (\n        <Icon className={styles.icon} />\n      ) : null}\n      {children}\n      {hasIcon && iconPosition === 'tail' && <Icon className={styles.icon} />}\n    </span>\n  );\n};\n\nconst ButtonPrimary = ({\n  size,\n  className,\n  children,\n  state = 'default',\n  onClick,\n  fluid,\n  ...props\n}: Omit<Props, 'variant'>) => {\n  const isDisabled = ['disabled', 'loading', 'error'].includes(state)\n    ? true\n    : undefined;\n\n  return (\n    <UIButton\n      disabled={isDisabled}\n      data-active={state === 'active' ? true : undefined}\n      onClick={() => state === 'default' && onClick?.()}\n      className={clsx(\n        styles.common,\n        styles.width(fluid),\n        styles.size(size),\n        {\n          'bg-transparent text-sw-status-error ring-1 ring-inset ring-sw-status-error':\n            state === 'error',\n          'bg-transparent text-sw-gray-400 ring-1 ring-inset ring-sw-gray-700':\n            state === 'loading' || state === 'disabled',\n          'text-sw-gray-950 bg-sw-accent-500 hover:bg-sw-accent-400 cursor-pointer':\n            ['active', 'default'].includes(state),\n        },\n        className,\n      )}>\n      <ButtonChildren state={state} {...props}>\n        {children}\n      </ButtonChildren>\n    </UIButton>\n  );\n};\n\nconst ButtonOutlined = ({\n  size,\n  className,\n  children,\n  state = 'default',\n  onClick,\n  fluid,\n  ...props\n}: Omit<Props, 'variant'>) => {\n  const isDisabled = ['disabled', 'loading', 'error'].includes(state)\n    ? true\n    : undefined;\n\n  return (\n    <UIButton\n      disabled={isDisabled}\n      data-active={state === 'active' ? true : undefined}\n      onClick={() => state === 'default' && onClick?.()}\n      className={clsx(\n        styles.common,\n        styles.width(fluid),\n        styles.size(size),\n        {\n          'bg-transparent text-sw-status-error ring-1 ring-inset ring-sw-status-error':\n            state === 'error',\n          'bg-transparent text-sw-gray-400 ring-1 ring-inset ring-sw-gray-700':\n            state === 'loading' || state === 'disabled',\n          'bg-transparent text-sw-gray-50 ring-1 ring-inset ring-sw-gray-600 hover:ring-sw-gray-100 cursor-pointer':\n            ['active', 'default'].includes(state),\n        },\n        className,\n      )}>\n      <ButtonChildren state={state} {...props}>\n        {children}\n      </ButtonChildren>\n    </UIButton>\n  );\n};\n\nexport const Button = ({ variant, ...restProps }: Props) => {\n  switch (variant) {\n    case 'outlined':\n      return <ButtonOutlined {...restProps} />;\n    case 'primary':\n    default:\n      return <ButtonPrimary {...restProps} />;\n  }\n};\n"],"names":["styles","size","fluid","ButtonChildren","icon","iconPosition","children","state","hasIcon","Icon","jsx","className","iconProps","ProgressActivity","clsx","jsxs","ButtonPrimary","onClick","props","isDisabled","UIButton","ButtonOutlined","Button","variant","restProps"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import { Button as UIButton } from '@headlessui/react';\nimport { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';\nimport type {\n  IconProps,\n  MaterialSymbolsComponent,\n} from '@material-symbols-svg/react';\n\nimport { cn as clsx } from '@/utils/cn';\n\ntype Size = 'sm' | 'md' | 'lg';\ntype Variant = 'primary' | 'outlined';\ntype State = 'default' | 'loading' | 'disabled' | 'active' | 'error';\n\ntype Props = {\n  size: Size;\n  state?: State;\n  variant: Variant;\n  children: React.ReactNode;\n  className?: string;\n  onClick?: () => void;\n  fluid?: boolean;\n} & (\n  | { icon: MaterialSymbolsComponent; iconPosition?: 'head' | 'tail' }\n  | { icon?: never; iconPosition?: never }\n) &\n  (\n    | { as?: 'button'; href?: never; target?: never }\n    | { as: 'a'; href: string; target?: '_blank' | '_self' }\n  );\n\nconst styles = {\n  icon: 'h-sw-xl w-sw-xl',\n\n  size: (size: Size) => ({\n    'px-sw-xl py-sw-[10px] rounded-sw-sm': size === 'sm',\n    'px-sw-2xl py-sw-sm rounded-sw-md': size === 'md',\n    'px-sw-3xl py-sw-xl rounded-sw-lg': size === 'lg',\n  }),\n\n  width: (fluid?: boolean) => ({\n    'w-full': !fluid,\n  }),\n\n  common: `\n    ring-1 ring-inset ring-transparent\n    transition-all duration-250 ease-in-out\n  `,\n};\n\nconst ButtonChildren = ({\n  icon,\n  iconPosition,\n  children,\n  state,\n}: Pick<Props, 'icon' | 'iconPosition' | 'children' | 'state'>) => {\n  const hasIcon = !!icon;\n  const Icon =\n    hasIcon && state !== 'loading'\n      ? (icon ?? (() => <span />))\n      : ({ className, ...iconProps }: IconProps) => (\n          <ProgressActivity\n            className={clsx(styles.icon, 'animate-spin', className)}\n            {...iconProps}\n          />\n        );\n\n  return (\n    <span className=\"text-sw-label-md flex w-full items-center justify-center gap-sw-lg py-sw-xs\">\n      {(hasIcon && iconPosition !== 'tail') ||\n      (!hasIcon && state === 'loading') ? (\n        <Icon className={styles.icon} />\n      ) : null}\n      {children}\n      {hasIcon && iconPosition === 'tail' && <Icon className={styles.icon} />}\n    </span>\n  );\n};\n\nconst ButtonPrimary = ({\n  size,\n  className,\n  children,\n  as = 'button',\n  state = 'default',\n  onClick,\n  fluid,\n  href,\n  target,\n  ...props\n}: Omit<Props, 'variant'>) => {\n  const anchorProps = as === 'a' ? { href, target } : {};\n  const isDisabled = ['disabled', 'loading', 'error'].includes(state)\n    ? true\n    : undefined;\n\n  return (\n    <UIButton\n      as={as}\n      disabled={isDisabled}\n      data-active={state === 'active' ? true : undefined}\n      onClick={() => state === 'default' && onClick?.()}\n      {...anchorProps}\n      className={clsx(\n        styles.common,\n        styles.width(fluid),\n        styles.size(size),\n        {\n          'bg-transparent text-sw-status-error ring-1 ring-inset ring-sw-status-error':\n            state === 'error',\n          'bg-transparent text-sw-gray-400 ring-1 ring-inset ring-sw-gray-700':\n            state === 'loading' || state === 'disabled',\n          'text-sw-gray-950 bg-sw-accent-500 hover:bg-sw-accent-400 cursor-pointer':\n            ['active', 'default'].includes(state),\n        },\n        className,\n      )}>\n      <ButtonChildren state={state} {...props}>\n        {children}\n      </ButtonChildren>\n    </UIButton>\n  );\n};\n\nconst ButtonOutlined = ({\n  size,\n  className,\n  children,\n  as = 'button',\n  state = 'default',\n  onClick,\n  fluid,\n  href,\n  target,\n  ...props\n}: Omit<Props, 'variant'>) => {\n  const anchorProps = as === 'a' ? { href, target } : {};\n  const isDisabled = ['disabled', 'loading', 'error'].includes(state)\n    ? true\n    : undefined;\n\n  return (\n    <UIButton\n      as={as}\n      disabled={isDisabled}\n      data-active={state === 'active' ? true : undefined}\n      onClick={() => state === 'default' && onClick?.()}\n      {...anchorProps}\n      className={clsx(\n        styles.common,\n        styles.width(fluid),\n        styles.size(size),\n        {\n          'bg-transparent text-sw-status-error ring-1 ring-inset ring-sw-status-error':\n            state === 'error',\n          'bg-transparent text-sw-gray-400 ring-1 ring-inset ring-sw-gray-700':\n            state === 'loading' || state === 'disabled',\n          'bg-transparent text-sw-gray-50 ring-1 ring-inset ring-sw-gray-600 hover:ring-sw-gray-100 cursor-pointer':\n            ['active', 'default'].includes(state),\n        },\n        className,\n      )}>\n      <ButtonChildren state={state} {...props}>\n        {children}\n      </ButtonChildren>\n    </UIButton>\n  );\n};\n\nexport const Button = ({ variant, ...restProps }: Props) => {\n  switch (variant) {\n    case 'outlined':\n      return <ButtonOutlined {...restProps} />;\n    case 'primary':\n    default:\n      return <ButtonPrimary {...restProps} />;\n  }\n};\n"],"names":["styles","size","fluid","ButtonChildren","icon","iconPosition","children","state","hasIcon","Icon","jsx","className","iconProps","ProgressActivity","clsx","jsxs","ButtonPrimary","as","onClick","href","target","props","anchorProps","isDisabled","UIButton","ButtonOutlined","Button","variant","restProps"],"mappings":"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"}

package/dist/components/ChainShortcut.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+import { Icon } from './Icon';
+type Props = {
+    label: string;
+    isSelected: boolean;
+    icon: ComponentProps<typeof Icon>['icon'];
+    onClick: () => void;
+};
+export declare const ChainShortcut: (({ icon, label, isSelected, onClick }: Props) => import("react/jsx-runtime").JSX.Element) & {
+    All: ({ isSelected, onClick, }: {
+        isSelected: boolean;
+        onClick: () => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/ChainShortcut.js

@@ -0,0 +1,57 @@
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import { AllNetworksIcon as i } from "./AllNetworksIcon.js";
+import { cn as n } from "../utils/cn.js";
+import { UNKNOWN_ICON as l } from "../icons/index.js";
+import { Icon as c } from "./Icon.js";
+import { useTypedTranslation as m } from "../localisation.js";
+const g = ({ icon: r, label: t, isSelected: s, onClick: a }) => /* @__PURE__ */ o(
+  "li",
+  {
+    onClick: a,
+    className: n(
+      "w-[36px] h-[36px] p-sw-md rounded-sw-md cursor-pointer items-center justify-center flex transition-colors",
+      {
+        "bg-sw-gray-50": s,
+        "bg-sw-gray-800 hover:bg-sw-gray-700": !s
+      }
+    ),
+    children: /* @__PURE__ */ o(
+      c,
+      {
+        size: 20,
+        radius: 6,
+        label: t,
+        icon: r ?? l,
+        className: "bg-transparent"
+      }
+    )
+  }
+), p = ({
+  isSelected: r,
+  onClick: t
+}) => {
+  const { t: s } = m();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      onClick: t,
+      className: n(
+        "px-sw-lg gap-sw-sm flex h-[36px] cursor-pointer items-center rounded-sw-md text-sw-label-md transition-colors",
+        {
+          "bg-sw-gray-50 text-sw-gray-950": r,
+          "bg-sw-gray-800 text-sw-gray-50 bg-sw-gray-800 hover:bg-sw-gray-700": !r
+        }
+      ),
+      children: [
+        /* @__PURE__ */ o(i, {}),
+        s("chain.all.label", "All")
+      ]
+    }
+  );
+}, y = Object.assign(g, {
+  All: p
+});
+export {
+  y as ChainShortcut
+};
+//# sourceMappingURL=ChainShortcut.js.map

package/dist/components/ChainShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainShortcut.js","sources":["../../src/components/ChainShortcut.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { AllNetworksIcon } from './AllNetworksIcon';\n\nimport { cn } from '@/utils/cn';\nimport { UNKNOWN_ICON } from '@/icons';\nimport { Icon } from '@/components/Icon';\nimport { useTypedTranslation } from '@/localisation';\n\ntype Props = {\n  label: string;\n  isSelected: boolean;\n  icon: ComponentProps<typeof Icon>['icon'];\n  onClick: () => void;\n};\n\nconst Shortcut = ({ icon, label, isSelected, onClick }: Props) => {\n  return (\n    <li\n      onClick={onClick}\n      className={cn(\n        'w-[36px] h-[36px] p-sw-md rounded-sw-md cursor-pointer items-center justify-center flex transition-colors',\n        {\n          'bg-sw-gray-50': isSelected,\n          'bg-sw-gray-800 hover:bg-sw-gray-700': !isSelected,\n        },\n      )}>\n      <Icon\n        size={20}\n        radius={6}\n        label={label}\n        icon={icon ?? UNKNOWN_ICON}\n        className=\"bg-transparent\"\n      />\n    </li>\n  );\n};\n\nconst AllChainsShortcut = ({\n  isSelected,\n  onClick,\n}: {\n  isSelected: boolean;\n  onClick: () => void;\n}) => {\n  const { t } = useTypedTranslation();\n\n  return (\n    <div\n      onClick={onClick}\n      className={cn(\n        'px-sw-lg gap-sw-sm flex h-[36px] cursor-pointer items-center rounded-sw-md text-sw-label-md transition-colors',\n        {\n          'bg-sw-gray-50 text-sw-gray-950': isSelected,\n          'bg-sw-gray-800 text-sw-gray-50 bg-sw-gray-800 hover:bg-sw-gray-700':\n            !isSelected,\n        },\n      )}>\n      <AllNetworksIcon />\n      {t('chain.all.label', 'All')}\n    </div>\n  );\n};\n\nexport const ChainShortcut = Object.assign(Shortcut, {\n  All: AllChainsShortcut,\n});\n"],"names":["Shortcut","icon","label","isSelected","onClick","jsx","cn","Icon","UNKNOWN_ICON","AllChainsShortcut","t","useTypedTranslation","jsxs","AllNetworksIcon","ChainShortcut"],"mappings":";;;;;;AAgBA,MAAMA,IAAW,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,YAAAC,GAAY,SAAAC,QAEzC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,QACE,iBAAiBH;AAAA,QACjB,uCAAuC,CAACA;AAAA,MAAA;AAAA,IAC1C;AAAA,IAEF,UAAA,gBAAAE;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAAL;AAAA,QACA,MAAMD,KAAQO;AAAA,QACd,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ;AAAA,GAKAC,IAAoB,CAAC;AAAA,EACzB,YAAAN;AAAA,EACA,SAAAC;AACF,MAGM;AACJ,QAAM,EAAE,GAAAM,EAAA,IAAMC,EAAA;AAEd,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAR;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,UACE,kCAAkCH;AAAA,UAClC,sEACE,CAACA;AAAA,QAAA;AAAA,MACL;AAAA,MAEF,UAAA;AAAA,QAAA,gBAAAE,EAACQ,GAAA,EAAgB;AAAA,QAChBH,EAAE,mBAAmB,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjC,GAEaI,IAAgB,OAAO,OAAOd,GAAU;AAAA,EACnD,KAAKS;AACP,CAAC;"}

package/dist/components/CopyButton.d.ts

@@ -1,3 +1,6 @@
-export declare const CopyButton: ({ value }: {
+type Props = {
     value: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    className?: string;
+};
+export declare const CopyButton: ({ value, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CopyButton.js

@@ -1,16 +1,20 @@
 import { jsx as t } from "react/jsx-runtime";
-import i from "copy-text-to-clipboard";
-import { ContentCopyW700 as r } from "@material-symbols-svg/react-rounded/icons/content-copy";
-const c = ({ value: o }) => /* @__PURE__ */ t(
+import r from "copy-text-to-clipboard";
+import { ContentCopyW700 as n } from "@material-symbols-svg/react-rounded/icons/content-copy";
+import { cn as e } from "../utils/cn.js";
+const p = ({ value: o, className: i }) => /* @__PURE__ */ t(
   "button",
   {
     type: "button",
-    onClick: () => i(o),
-    className: "text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110",
-    children: /* @__PURE__ */ t(r, { size: 16 })
+    onClick: () => r(o),
+    className: e(
+      "text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110",
+      i
+    ),
+    children: /* @__PURE__ */ t(n, { size: 16 })
   }
 );
 export {
-  c as CopyButton
+  p as CopyButton
 };
 //# sourceMappingURL=CopyButton.js.map

package/dist/components/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import copy from 'copy-text-to-clipboard';\nimport { ContentCopyW700 as ContentCopy } from '@material-symbols-svg/react-rounded/icons/content-copy';\n\nexport const CopyButton = ({ value }: { value: string }) => (\n  <button\n    type=\"button\"\n    onClick={() => copy(value)}\n    className=\"text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110\">\n    <ContentCopy size={16} />\n  </button>\n);\n"],"names":["CopyButton","value","jsx","copy","ContentCopy"],"mappings":";;;AAGO,MAAMA,IAAa,CAAC,EAAE,OAAAC,EAAA,MAC3B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAS,MAAMC,EAAKF,CAAK;AAAA,IACzB,WAAU;AAAA,IACV,UAAA,gBAAAC,EAACE,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,EAAA;AACzB;"}
+{"version":3,"file":"CopyButton.js","sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import copy from 'copy-text-to-clipboard';\nimport { ContentCopyW700 as ContentCopy } from '@material-symbols-svg/react-rounded/icons/content-copy';\n\nimport { cn } from '@/utils/cn';\n\ntype Props = {\n  value: string;\n  className?: string;\n};\n\nexport const CopyButton = ({ value, className }: Props) => (\n  <button\n    type=\"button\"\n    onClick={() => copy(value)}\n    className={cn(\n      'text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110',\n      className,\n    )}>\n    <ContentCopy size={16} />\n  </button>\n);\n"],"names":["CopyButton","value","className","jsx","copy","cn","ContentCopy"],"mappings":";;;;AAUO,MAAMA,IAAa,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAClC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAS,MAAMC,EAAKH,CAAK;AAAA,IACzB,WAAWI;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAEF,UAAA,gBAAAC,EAACG,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,EAAA;AACzB;"}

package/dist/components/Notes.js

@@ -7,7 +7,7 @@ const m = ({
 }) => /* @__PURE__ */ a("li", { className: "flex w-full items-center justify-between", children: [
   /* @__PURE__ */ e("span", { className: "text-sw-label-sm text-sw-gray-200", children: s }),
   l ? /* @__PURE__ */ e("div", { className: "h-[12px] w-[40px] animate-pulse rounded-full bg-sw-gray-600" }) : /* @__PURE__ */ e("span", { className: "text-sw-label-sm text-sw-gray-50", children: t ?? "—" })
-] }), n = ({ children: s, className: t }) => /* @__PURE__ */ e("ul", { className: c("gap-sw-2xl flex flex-col", t), children: s }), x = Object.assign(n, {
+] }), n = ({ children: s, className: t }) => /* @__PURE__ */ e("ul", { className: c("gap-sw-xl flex flex-col", t), children: s }), x = Object.assign(n, {
   Item: m
 });
 export {

package/dist/components/Notes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notes.js","sources":["../../src/components/Notes.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@/utils/cn';\n\ntype Props = {\n  className?: string;\n  children: ReactNode | ReactNode[];\n};\n\nconst NoteItem = ({\n  label,\n  value,\n  isLoading,\n}: {\n  label: string;\n  value?: React.ReactNode;\n  isLoading?: boolean;\n}) => (\n  <li className=\"flex w-full items-center justify-between\">\n    <span className=\"text-sw-label-sm text-sw-gray-200\">{label}</span>\n    {isLoading ? (\n      <div className=\"h-[12px] w-[40px] animate-pulse rounded-full bg-sw-gray-600\" />\n    ) : (\n      <span className=\"text-sw-label-sm text-sw-gray-50\">{value ?? '—'}</span>\n    )}\n  </li>\n);\n\nconst NotesList = ({ children, className }: Props) => {\n  return (\n    <ul className={cn('gap-sw-2xl flex flex-col', className)}>{children}</ul>\n  );\n};\n\nexport const Notes = Object.assign(NotesList, {\n  Item: NoteItem,\n});\n"],"names":["NoteItem","label","value","isLoading","jsxs","jsx","NotesList","children","className","cn","Notes"],"mappings":";;AASA,MAAMA,IAAW,CAAC;AAAA,EAChB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,MAKE,gBAAAC,EAAC,MAAA,EAAG,WAAU,4CACZ,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,qCAAqC,UAAAJ,GAAM;AAAA,EAC1DE,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,8DAAA,CAA8D,IAE7E,gBAAAA,EAAC,QAAA,EAAK,WAAU,oCAAoC,UAAAH,KAAS,IAAA,CAAI;AAAA,GAErE,GAGII,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,0BAE1B,MAAA,EAAG,WAAWC,EAAG,4BAA4BD,CAAS,GAAI,UAAAD,GAAS,GAI3DG,IAAQ,OAAO,OAAOJ,GAAW;AAAA,EAC5C,MAAMN;AACR,CAAC;"}
+{"version":3,"file":"Notes.js","sources":["../../src/components/Notes.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@/utils/cn';\n\ntype Props = {\n  className?: string;\n  children: ReactNode | ReactNode[];\n};\n\nconst NoteItem = ({\n  label,\n  value,\n  isLoading,\n}: {\n  label: string;\n  value?: React.ReactNode;\n  isLoading?: boolean;\n}) => (\n  <li className=\"flex w-full items-center justify-between\">\n    <span className=\"text-sw-label-sm text-sw-gray-200\">{label}</span>\n    {isLoading ? (\n      <div className=\"h-[12px] w-[40px] animate-pulse rounded-full bg-sw-gray-600\" />\n    ) : (\n      <span className=\"text-sw-label-sm text-sw-gray-50\">{value ?? '—'}</span>\n    )}\n  </li>\n);\n\nconst NotesList = ({ children, className }: Props) => {\n  return (\n    <ul className={cn('gap-sw-xl flex flex-col', className)}>{children}</ul>\n  );\n};\n\nexport const Notes = Object.assign(NotesList, {\n  Item: NoteItem,\n});\n"],"names":["NoteItem","label","value","isLoading","jsxs","jsx","NotesList","children","className","cn","Notes"],"mappings":";;AASA,MAAMA,IAAW,CAAC;AAAA,EAChB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,MAKE,gBAAAC,EAAC,MAAA,EAAG,WAAU,4CACZ,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,qCAAqC,UAAAJ,GAAM;AAAA,EAC1DE,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,8DAAA,CAA8D,IAE7E,gBAAAA,EAAC,QAAA,EAAK,WAAU,oCAAoC,UAAAH,KAAS,IAAA,CAAI;AAAA,GAErE,GAGII,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,0BAE1B,MAAA,EAAG,WAAWC,EAAG,2BAA2BD,CAAS,GAAI,UAAAD,GAAS,GAI1DG,IAAQ,OAAO,OAAOJ,GAAW;AAAA,EAC5C,MAAMN;AACR,CAAC;"}

package/dist/components/index.d.ts

@@ -18,3 +18,5 @@ export * from './TokenIcon';
 export * from './StatusWidget';
 export * from './WidgetContainer';
 export * from './CloseButton';
+export * from './ChainShortcut';
+export * from './AllNetworksIcon';

package/dist/components/index.js

@@ -3,39 +3,43 @@ import { Badge as p } from "./Badge.js";
 import { Banner as f } from "./Banner.js";
 import { BlockingError as x } from "./BlockingError.js";
 import { Button as i } from "./Button.js";
-import { Card as c } from "./Card.js";
-import { CopyButton as s } from "./CopyButton.js";
-import { DirectionSwitcher as g } from "./DirectionSwitcher.js";
+import { Card as a } from "./Card.js";
+import { CopyButton as d } from "./CopyButton.js";
+import { DirectionSwitcher as I } from "./DirectionSwitcher.js";
 import { ErrorMessage as k } from "./ErrorMessage.js";
-import { Hr as l } from "./Hr.js";
+import { Hr as C } from "./Hr.js";
 import { Icon as S } from "./Icon.js";
-import { Input as E } from "./Input.js";
-import { InputAmount as N, MaskedInputAmount as T } from "./InputAmount.js";
-import { Notes as b } from "./Notes.js";
-import { Skeleton as w } from "./Skeleton.js";
+import { Input as N } from "./Input.js";
+import { InputAmount as y, MaskedInputAmount as E } from "./InputAmount.js";
+import { Notes as T } from "./Notes.js";
+import { Skeleton as b } from "./Skeleton.js";
 import { TinyNumber as H } from "./TinyNumber.js";
 import { TokenIcon as q } from "./TokenIcon.js";
 import { StatusWidget as z } from "./StatusWidget.js";
 import { WidgetContainer as G } from "./WidgetContainer.js";
 import { CloseButton as K } from "./CloseButton.js";
+import { ChainShortcut as O } from "./ChainShortcut.js";
+import { AllNetworksIcon as Q } from "./AllNetworksIcon.js";
 export {
   t as Accordion,
+  Q as AllNetworksIcon,
   p as Badge,
   f as Banner,
   x as BlockingError,
   i as Button,
-  c as Card,
+  a as Card,
+  O as ChainShortcut,
   K as CloseButton,
-  s as CopyButton,
-  g as DirectionSwitcher,
+  d as CopyButton,
+  I as DirectionSwitcher,
   k as ErrorMessage,
-  l as Hr,
+  C as Hr,
   S as Icon,
-  E as Input,
-  N as InputAmount,
-  T as MaskedInputAmount,
-  b as Notes,
-  w as Skeleton,
+  N as Input,
+  y as InputAmount,
+  E as MaskedInputAmount,
+  T as Notes,
+  b as Skeleton,
   z as StatusWidget,
   H as TinyNumber,
   q as TokenIcon,

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}