@worldcoin/mini-apps-ui-kit-react 0.0.8 → 1.0.0-canary.0

package/dist/components/Token/icons/usdc.js

@@ -1,5 +1,6 @@
-import { jsxs as C, jsx as t } from "react/jsx-runtime";
-const a = (r) => /* @__PURE__ */ C(
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { getBackgroundClass as l, getIconFillClass as s } from "./utils.js";
+const i = (C) => /* @__PURE__ */ e(
   "svg",
   {
     width: "88",
@@ -7,68 +8,27 @@ const a = (r) => /* @__PURE__ */ C(
     viewBox: "0 0 88 88",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...r,
+    ...C,
+    style: { color: "#005CFF" },
     children: [
-      /* @__PURE__ */ t("circle", { cx: "44", cy: "44", r: "44", fill: "#00C313" }),
-      /* @__PURE__ */ t("circle", { cx: "44", cy: "44", r: "44", fill: "url(#paint0_radial_12_1269)" }),
-      /* @__PURE__ */ t("circle", { cx: "44", cy: "44", r: "44", fill: "url(#paint1_radial_12_1269)" }),
+      /* @__PURE__ */ t("rect", { width: "88", height: "88", rx: "44", className: l(C) }),
       /* @__PURE__ */ t(
         "path",
         {
-          d: "M43.3019 65C42.9865 65 42.7285 64.8911 42.5278 64.6733C42.3271 64.4556 42.2268 64.1756 42.2268 63.8333V60.6133C40.0479 60.3333 38.2274 59.7578 36.7653 58.8867C35.3032 57.9845 34.1995 56.8956 33.4541 55.62C32.7087 54.3445 32.3073 53.0067 32.25 51.6067C32.25 51.3578 32.336 51.14 32.508 50.9533C32.7087 50.7356 32.938 50.6267 33.196 50.6267H37.7974C38.1701 50.6267 38.4568 50.72 38.6575 50.9067C38.8582 51.0622 39.0445 51.2644 39.2165 51.5133C39.4172 52.0422 39.7326 52.5556 40.1626 53.0533C40.6213 53.5511 41.2377 53.9711 42.0117 54.3133C42.7858 54.6244 43.7462 54.78 44.893 54.78C46.7565 54.78 48.1469 54.4533 49.0643 53.8C50.0104 53.1467 50.4834 52.26 50.4834 51.14C50.4834 50.3311 50.2254 49.6778 49.7094 49.18C49.222 48.6822 48.4336 48.2311 47.3442 47.8267C46.2834 47.4222 44.85 46.9867 43.0438 46.52C40.8937 46.0222 39.0732 45.3844 37.5824 44.6067C36.0916 43.7978 34.9592 42.7711 34.1851 41.5267C33.4397 40.2511 33.067 38.68 33.067 36.8133C33.067 34.3556 33.8698 32.2711 35.4752 30.56C37.1094 28.8489 39.3599 27.7911 42.2268 27.3867V24.1667C42.2268 23.8244 42.3271 23.5444 42.5278 23.3267C42.7285 23.1089 42.9865 23 43.3019 23H46.3551C46.6418 23 46.8855 23.1089 47.0862 23.3267C47.2868 23.5444 47.3872 23.8244 47.3872 24.1667V27.48C49.3653 27.8222 51.0138 28.4756 52.3326 29.44C53.68 30.3733 54.6978 31.4467 55.3858 32.66C56.1025 33.8422 56.4752 34.9933 56.5039 36.1133C56.5039 36.3622 56.4179 36.5956 56.2459 36.8133C56.0739 37 55.8589 37.0933 55.6008 37.0933H50.7414C50.4834 37.0933 50.2397 37.0311 50.0104 36.9067C49.781 36.7822 49.5804 36.5644 49.4083 36.2533C49.265 35.4444 48.7633 34.7444 47.9032 34.1533C47.0431 33.5311 45.9537 33.22 44.635 33.22C43.2302 33.22 42.1121 33.5 41.2807 34.06C40.4493 34.62 40.0336 35.4756 40.0336 36.6267C40.0336 37.3733 40.2486 38.0111 40.6786 38.54C41.1087 39.0378 41.8111 39.4889 42.7858 39.8933C43.7606 40.2667 45.0793 40.6867 46.7421 41.1533C49.265 41.7133 51.3148 42.3822 52.8916 43.16C54.4684 43.9378 55.6152 44.9489 56.3319 46.1933C57.0773 47.4067 57.45 48.9467 57.45 50.8133C57.45 52.6178 57.0343 54.22 56.2029 55.62C55.3715 56.9889 54.1961 58.0933 52.6766 58.9333C51.1858 59.7733 49.4227 60.3333 47.3872 60.6133V63.8333C47.3872 64.1756 47.2868 64.4556 47.0862 64.6733C46.8855 64.8911 46.6418 65 46.3551 65H43.3019Z",
-          fill: "url(#paint2_linear_12_1269)"
+          d: "M52.7781 48.6526C52.7781 43.9987 49.9857 42.403 44.4008 41.7383C40.4117 41.2063 39.6138 40.1426 39.6138 38.2808C39.6138 36.419 40.9437 35.2225 43.603 35.2225C45.9965 35.2225 47.3263 36.0204 47.9911 38.0149C48.1242 38.4139 48.5231 38.6797 48.922 38.6797H51.0494C51.5814 38.6797 51.9803 38.2808 51.9803 37.7491V37.616C51.4483 34.6905 49.0548 32.4301 45.9965 32.1643V28.9729C45.9965 28.4409 45.5976 28.042 44.9328 27.9089H42.9382C42.4062 27.9089 42.0073 28.3078 41.8743 28.9729V32.0312C37.8851 32.5632 35.3588 35.2225 35.3588 38.5469C35.3588 42.935 38.0182 44.6635 43.603 45.3285C47.3263 45.9933 48.5231 46.7911 48.5231 48.9188C48.5231 51.0465 46.6613 52.5091 44.135 52.5091C40.6775 52.5091 39.4807 51.0462 39.0818 49.0516C38.9491 48.5199 38.5501 48.2537 38.1512 48.2537H35.8905C35.3588 48.2537 34.9599 48.6526 34.9599 49.1846V49.3177C35.4916 52.6418 37.6192 55.0353 42.0073 55.7004V58.8918C42.0073 59.4234 42.4062 59.8224 43.071 59.9554H45.0656C45.5976 59.9554 45.9965 59.5565 46.1296 58.8918V55.7004C50.1188 55.0353 52.7781 52.2429 52.7781 48.6526Z",
+          className: s(C)
         }
       ),
-      /* @__PURE__ */ C("defs", { children: [
-        /* @__PURE__ */ C(
-          "radialGradient",
-          {
-            id: "paint0_radial_12_1269",
-            cx: "0",
-            cy: "0",
-            r: "1",
-            gradientUnits: "userSpaceOnUse",
-            gradientTransform: "translate(83.9633 70.1674) rotate(170.361) scale(62.5095 57.5688)",
-            children: [
-              /* @__PURE__ */ t("stop", { stopColor: "#8FD106" }),
-              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "#8FD106", stopOpacity: "0" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ C(
-          "radialGradient",
-          {
-            id: "paint1_radial_12_1269",
-            cx: "0",
-            cy: "0",
-            r: "1",
-            gradientUnits: "userSpaceOnUse",
-            gradientTransform: "translate(6.45871 8.33481) rotate(71.0626) scale(53.4853 52.1862)",
-            children: [
-              /* @__PURE__ */ t("stop", { stopColor: "#00D815" }),
-              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "#00D815", stopOpacity: "0" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ C(
-          "linearGradient",
-          {
-            id: "paint2_linear_12_1269",
-            x1: "44.85",
-            y1: "23",
-            x2: "44.85",
-            y2: "65",
-            gradientUnits: "userSpaceOnUse",
-            children: [
-              /* @__PURE__ */ t("stop", { offset: "0.5", stopColor: "white" }),
-              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "white", stopOpacity: "0.8" })
-            ]
-          }
-        )
-      ] })
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M37.2184 62.6161C26.8465 58.8931 21.5275 47.3244 25.3839 37.0853C27.3785 31.5005 31.7666 27.2455 37.2184 25.2509C37.7504 24.985 38.0162 24.5861 38.0162 23.921V22.0595C38.0162 21.5275 37.7504 21.1286 37.2184 20.9958C37.0853 20.9958 36.8195 20.9958 36.6864 21.1286C24.0541 25.1178 17.1394 38.5482 21.1286 51.1805C23.5221 58.6269 29.24 64.3448 36.6864 66.7383C37.2184 67.0042 37.7504 66.7383 37.8832 66.2063C38.0162 66.0736 38.0162 65.9405 38.0162 65.6747V63.8128C38.0162 63.4139 37.6173 62.8822 37.2184 62.6161ZM51.3136 21.1286C50.7816 20.8628 50.2496 21.1286 50.1168 21.6606C49.9838 21.7937 49.9838 21.9264 49.9838 22.1926V24.0541C49.9838 24.5861 50.3827 25.1178 50.7816 25.3839C61.1535 29.107 66.4725 40.6756 62.6161 50.9147C60.6215 56.4995 56.2334 60.7546 50.7816 62.7491C50.2496 63.015 49.9838 63.4139 49.9838 64.079V65.9405C49.9838 66.4725 50.2496 66.8714 50.7816 67.0042C50.9147 67.0042 51.1805 67.0042 51.3136 66.8714C63.9459 62.8822 70.8606 49.4518 66.8714 36.8195C64.4779 29.24 58.6269 23.5221 51.3136 21.1286Z",
+          className: s(C)
+        }
+      )
     ]
   }
 );
 export {
-  a as default
+  i as default
 };

package/dist/components/Token/icons/usdt.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare const USDT: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default USDT;

package/dist/components/Token/icons/usdt.js

@@ -0,0 +1,27 @@
+import { jsxs as C, jsx as s } from "react/jsx-runtime";
+import { getBackgroundClass as e, getIconFillClass as l } from "./utils.js";
+const i = (t) => /* @__PURE__ */ C(
+  "svg",
+  {
+    width: "88",
+    height: "88",
+    viewBox: "0 0 88 88",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    style: { color: "#28D9A6" },
+    children: [
+      /* @__PURE__ */ s("rect", { width: "88", height: "88", rx: "44", className: e(t) }),
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: "M48.4722 37.3457V31.9535H60.8028V23.7377H27.2262V31.9535H39.5582V37.3414C29.5358 37.8017 22 39.7866 22 42.1644C22 44.5423 29.5395 46.5272 39.5582 46.9904V64.2623H48.4751V46.989C58.4794 46.5272 66 44.5437 66 42.1681C66 39.7924 58.4794 37.8089 48.4751 37.3472M48.4751 45.526V45.5217C48.2235 45.5376 46.931 45.6152 44.0529 45.6152C41.7519 45.6152 40.1331 45.5499 39.5626 45.5202V45.5275C30.7081 45.1353 24.0987 43.5933 24.0987 41.7483C24.0987 39.9033 30.7088 38.3635 39.5626 37.9706V43.9913C40.1426 44.0312 41.8012 44.129 44.0906 44.129C46.8403 44.129 48.2228 44.0145 48.4766 43.9913V37.9706C57.3137 38.3643 63.9078 39.9077 63.9078 41.7461C63.9078 43.5846 57.3108 45.1287 48.4766 45.5224",
+          className: l(t)
+        }
+      )
+    ]
+  }
+);
+export {
+  i as default
+};

package/dist/components/Token/icons/utils.d.ts

@@ -0,0 +1,9 @@
+import { TokenVariant } from './types';
+export declare const getBackgroundClass: ({ disabled, variant, }: {
+    disabled?: boolean;
+    variant?: TokenVariant;
+}) => "fill-gray-350" | "fill-current" | "fill-gray-100";
+export declare const getIconFillClass: ({ disabled, variant, }: {
+    disabled?: boolean;
+    variant?: TokenVariant;
+}) => "fill-gray-0" | "fill-gray-900";

package/dist/components/Token/icons/utils.js

@@ -0,0 +1,11 @@
+const o = ({
+  disabled: l,
+  variant: r
+}) => l ? "fill-gray-350" : r === "color" ? "fill-current" : "fill-gray-100", a = ({
+  disabled: l,
+  variant: r
+}) => l || r === "color" ? "fill-gray-0" : "fill-gray-900";
+export {
+  o as getBackgroundClass,
+  a as getIconFillClass
+};

package/dist/components/Token/icons/wld.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
-declare const WLD: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+import { IconProps } from './types';
+declare const WLD: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default WLD;

package/dist/components/Token/icons/wld.js

@@ -1,5 +1,6 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-const r = (e) => /* @__PURE__ */ i(
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { getBackgroundClass as e, getIconFillClass as l } from "./utils.js";
+const i = (C) => /* @__PURE__ */ s(
   "svg",
   {
     width: "88",
@@ -7,52 +8,20 @@ const r = (e) => /* @__PURE__ */ i(
     viewBox: "0 0 88 88",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...e,
+    ...C,
+    style: { color: "#181818" },
     children: [
-      /* @__PURE__ */ t("circle", { cx: "44", cy: "44", r: "44", fill: "#191C20" }),
-      /* @__PURE__ */ t("rect", { opacity: "0.3", width: "88", height: "88", rx: "44", fill: "url(#paint0_radial_12_1273)" }),
+      /* @__PURE__ */ t("rect", { width: "88", height: "88", rx: "44", className: e(C) }),
       /* @__PURE__ */ t(
         "path",
         {
-          d: "M63.842 35.8263C62.7832 33.3239 61.27 31.0813 59.3423 29.1534C57.4146 27.2255 55.1673 25.7121 52.6702 24.6532C50.0783 23.5544 47.3316 23 44.495 23C41.6633 23 38.9116 23.5544 36.3197 24.6532C33.8177 25.7121 31.5754 27.2255 29.6477 29.1534C27.7199 31.0813 26.2067 33.3289 25.148 35.8263C24.0543 38.4135 23.5 41.1655 23.5 43.9975C23.5 46.8295 24.0543 49.5815 25.153 52.1737C26.2117 54.6761 27.7249 56.9187 29.6526 58.8466C31.5804 60.7745 33.8277 62.2879 36.3247 63.3468C38.9166 64.4406 41.6634 65 44.5 65C47.3316 65 50.0833 64.4456 52.6752 63.3468C55.1773 62.2879 57.4196 60.7745 59.3473 58.8466C61.275 56.9187 62.7882 54.6711 63.847 52.1737C64.9406 49.5815 65.5 46.8345 65.5 43.9975C65.495 41.1655 64.9356 38.4135 63.842 35.8263ZM37.5233 42.0246C38.3972 38.6682 41.4536 36.1859 45.0843 36.1859H59.6619C60.6008 37.9989 61.2001 39.9718 61.4348 42.0246H37.5233ZM61.4348 45.9704C61.2001 48.0232 60.5958 49.9961 59.6619 51.8091H45.0843C41.4586 51.8091 38.4022 49.3268 37.5233 45.9704H61.4348ZM32.4393 31.9404C35.6605 28.7189 39.9404 26.9458 44.495 26.9458C49.0496 26.9458 53.3295 28.7189 56.5506 31.9404C56.6505 32.0403 56.7454 32.1402 56.8403 32.2401H45.0843C41.943 32.2401 38.9915 33.4638 36.7692 35.6864C35.0213 37.4345 33.8926 39.6372 33.4881 42.0296H27.5601C27.9946 38.2187 29.6876 34.6925 32.4393 31.9404ZM44.495 61.0542C39.9404 61.0542 35.6605 59.2811 32.4393 56.0596C29.6876 53.3075 27.9946 49.7813 27.5601 45.9754H33.4881C33.8876 48.3678 35.0213 50.5705 36.7692 52.3186C38.9915 54.5412 41.943 55.7649 45.0843 55.7649H56.8453C56.7504 55.8648 56.6505 55.9647 56.5556 56.0646C53.3345 59.2761 49.0496 61.0542 44.495 61.0542Z",
-          fill: "url(#paint1_linear_12_1273)"
+          d: "M44 63.9998C40.3849 63.9998 37.0423 63.1044 33.9778 61.308C30.9132 59.5171 28.4828 57.0866 26.6919 54.0221C24.8954 50.952 24 47.615 24 43.9998C24 40.3847 24.8954 37.0421 26.6919 33.9776C28.4828 30.9131 30.9132 28.4826 33.9778 26.6917C37.0423 24.8953 40.3849 23.9998 44 23.9998C47.6151 23.9998 50.9577 24.8953 54.0222 26.6917C57.0868 28.4882 59.5172 30.9131 61.3081 33.9776C63.099 37.0421 64 40.3847 64 43.9998C64 47.615 63.1046 50.9576 61.3081 54.0221C59.5172 57.0866 57.0868 59.5171 54.0222 61.308C50.9577 63.0989 47.6151 63.9998 44 63.9998ZM25.6908 46.0799V42.0032H62.3482V46.0799H25.6908ZM44 59.8341C46.8643 59.8341 49.4894 59.1278 51.8754 57.7095C54.2614 56.2913 56.1468 54.378 57.5373 51.9643C58.9277 49.5505 59.6174 46.8975 59.6174 44.0054C59.6174 41.1133 58.9221 38.4604 57.5373 36.0466C56.1468 33.6328 54.2614 31.714 51.8754 30.3013C49.4894 28.8831 46.8643 28.1767 44 28.1767C41.1357 28.1767 38.5106 28.8831 36.1246 30.3013C33.7386 31.7195 31.8532 33.6328 30.4627 36.0466C29.0723 38.4604 28.3826 41.1133 28.3826 44.0054C28.3826 46.8975 29.0779 49.5505 30.4627 51.9643C31.8532 54.378 33.7386 56.2968 36.1246 57.7095C38.5106 59.1278 41.1357 59.8341 44 59.8341ZM33.327 44.3002V43.7774C33.327 41.7251 33.8165 39.8675 34.8009 38.2045C35.7853 36.5416 37.1646 35.2346 38.9444 34.2779C40.7241 33.3213 42.7542 32.8486 45.04 32.8486H58.4438L60.3515 36.8419H45.2125C42.9544 36.8419 41.1413 37.4926 39.7675 38.7941C38.3938 40.0955 37.7041 41.7585 37.7041 43.7829V44.3057C37.7041 46.358 38.3938 48.0321 39.7675 49.3169C41.1413 50.6016 42.9544 51.2468 45.2125 51.2468H60.3515L58.4438 55.2401H45.04C42.7542 55.2401 40.7241 54.7618 38.9444 53.8107C37.1646 52.8541 35.7853 51.5471 34.8009 49.8842C33.8165 48.2212 33.327 46.3636 33.327 44.3113V44.3002Z",
+          className: l(C)
         }
-      ),
-      /* @__PURE__ */ i("defs", { children: [
-        /* @__PURE__ */ i(
-          "radialGradient",
-          {
-            id: "paint0_radial_12_1273",
-            cx: "0",
-            cy: "0",
-            r: "1",
-            gradientUnits: "userSpaceOnUse",
-            gradientTransform: "translate(20 -1.6729e-06) rotate(63.4349) scale(98.387 97.9627)",
-            children: [
-              /* @__PURE__ */ t("stop", { stopColor: "white" }),
-              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ i(
-          "linearGradient",
-          {
-            id: "paint1_linear_12_1273",
-            x1: "44.5",
-            y1: "23",
-            x2: "44.5",
-            y2: "65",
-            gradientUnits: "userSpaceOnUse",
-            children: [
-              /* @__PURE__ */ t("stop", { offset: "0.5", stopColor: "white" }),
-              /* @__PURE__ */ t("stop", { offset: "1", stopColor: "white", stopOpacity: "0.8" })
-            ]
-          }
-        )
-      ] })
+      )
     ]
   }
 );
 export {
-  r as default
+  i as default
 };

package/dist/components/TopBar/TopBar.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface TopBarProps {
+    /** Title displayed in the center */
+    title: string;
+    /** Element rendered on the left side */
+    startAdornment?: React.ReactNode;
+    /** Element rendered on the right side */
+    endAdornment?: React.ReactNode;
+}
+export declare function TopBar({ title, startAdornment, endAdornment }: TopBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TopBar/TopBar.js

@@ -0,0 +1,23 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
+import { Typography as o } from "../Typography/Typography.js";
+function u({ title: n, startAdornment: t, endAdornment: i }) {
+  const e = !!t, r = !!i, a = e ? "text-center" : "text-left";
+  return /* @__PURE__ */ c("div", { className: l("flex items-center px-6 pt-6 pb-2 w-full h-[4.5rem]", e || r ? "justify-between" : "justify-start"), children: [
+    t && /* @__PURE__ */ s("div", { className: "shrink-0", children: t }),
+    /* @__PURE__ */ s(
+      o,
+      {
+        variant: e ? "subtitle" : "heading",
+        level: e ? 1 : 3,
+        className: l("flex-1 grow truncate", a),
+        children: n
+      }
+    ),
+    i && /* @__PURE__ */ s("div", { className: "shrink-0", children: i }),
+    !i && e && /* @__PURE__ */ s("div", { className: "shrink-0 invisible", "aria-hidden": "true", children: t })
+  ] });
+}
+export {
+  u as TopBar
+};

package/dist/components/TopBar/index.d.ts

@@ -0,0 +1 @@
+export * from './TopBar';

package/dist/components/TopBar/index.js

@@ -0,0 +1,4 @@
+import { TopBar as p } from "./TopBar.js";
+export {
+  p as TopBar
+};

package/dist/components/Typography/Typography.d.ts

@@ -8,19 +8,23 @@ export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
 }
 export interface TypographyNumberProps extends TypographyProps {
     variant?: "number";
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    level?: 1 | 2 | 3 | 4 | 5;
 }
-export interface TypographySubtitleBodyMonoProps extends TypographyProps {
-    variant?: "subtitle" | "body" | "mono";
+export interface TypographyCommonProps extends TypographyProps {
+    variant?: "heading" | "subtitle" | "body";
     level?: 1 | 2 | 3 | 4;
 }
-export interface TypographyHeadingProps extends TypographyProps {
-    variant?: "heading";
-    level?: 1 | 2 | 3;
+export interface TypographyLabelProps extends TypographyProps {
+    variant?: "label";
+    level?: 1 | 2;
 }
-export type TypographyComponentProps = TypographyNumberProps | TypographySubtitleBodyMonoProps | TypographyHeadingProps;
+export interface TypographyDisplayProps extends TypographyProps {
+    variant?: "display";
+    level?: 1;
+}
+export type TypographyComponentProps = TypographyNumberProps | TypographyCommonProps | TypographyLabelProps | TypographyDisplayProps;
 export declare const typographyVariants: (props?: ({
-    variant?: "number" | "heading" | "body" | "subtitle" | "mono" | null | undefined;
+    variant?: "number" | "heading" | "subtitle" | "body" | "label" | "display" | null | undefined;
     level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Typography: import('react').ForwardRefExoticComponent<PropsWithChildren<TypographyComponentProps> & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Typography/Typography.js

@@ -1,15 +1,16 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cva as o } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as i } from "react";
-import { cn as v } from "../../lib/utils.js";
-const c = o("", {
+import { jsx as i } from "react/jsx-runtime";
+import { cva as m } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as v } from "react";
+import { cn as o } from "../../lib/utils.js";
+const c = m("", {
   variants: {
     variant: {
-      number: "font-display font-semibold leading-narrow tracking-normal",
-      heading: "font-display font-semibold tracking-[-0.01em] leading-narrow",
-      subtitle: "font-sans font-medium leading-narrow tracking-normal",
-      body: "font-sans font-normal leading-compact tracking-normal",
-      mono: "font-mono font-normal tracking-normal"
+      display: "font-display font-semibold leading-narrow tracking-[-0.02em]",
+      heading: "font-display font-semibold leading-narrow tracking-[-0.01em]",
+      subtitle: "font-sans font-medium leading-narrow",
+      label: "font-sans font-semibold leading-narrow",
+      body: "font-sans font-normal leading-compact",
+      number: "font-display font-semibold"
     },
     level: {
       1: "",
@@ -21,55 +22,38 @@ const c = o("", {
     }
   },
   compoundVariants: [
+    // Display
     {
-      variant: "number",
+      variant: "display",
       level: 1,
-      className: "text-[3.5rem]"
-    },
-    {
-      variant: "number",
-      level: 2,
-      className: "text-[2.75rem]"
-    },
-    {
-      variant: "number",
-      level: 3,
-      className: "text-[2.125rem]"
-    },
-    {
-      variant: "number",
-      level: 4,
-      className: "text-[1.875rem]"
-    },
-    {
-      variant: "number",
-      level: 5,
-      className: "text-[1.625rem]"
-    },
-    {
-      variant: "number",
-      level: 6,
-      className: "text-[1.25rem]"
+      className: "text-7xl"
     },
+    // Heading
     {
       variant: "heading",
       level: 1,
-      className: "text-[1.875rem]"
+      className: "text-4xl"
     },
     {
       variant: "heading",
       level: 2,
-      className: "text-[1.625rem]"
+      className: "text-3xl"
     },
     {
       variant: "heading",
       level: 3,
-      className: "text-[1.25rem]"
+      className: "text-2xl"
+    },
+    {
+      variant: "heading",
+      level: 4,
+      className: "text-[1.375rem]"
     },
+    // Subtitle
     {
       variant: "subtitle",
       level: 1,
-      className: "text-[1.125rem]"
+      className: "text-lg"
     },
     {
       variant: "subtitle",
@@ -86,6 +70,18 @@ const c = o("", {
       level: 4,
       className: "text-xs"
     },
+    // Label
+    {
+      variant: "label",
+      level: 1,
+      className: "text-base"
+    },
+    {
+      variant: "label",
+      level: 2,
+      className: "text-sm"
+    },
+    // Body
     {
       variant: "body",
       level: 1,
@@ -106,45 +102,61 @@ const c = o("", {
       level: 4,
       className: "text-xs"
     },
+    // Number
     {
-      variant: "mono",
+      variant: "number",
       level: 1,
-      className: "text-sm leading-none"
+      className: "text-6xl tracking-[-0.01em]"
     },
     {
-      variant: "mono",
+      variant: "number",
       level: 2,
-      className: "text-xs leading-narrow"
+      className: "text-5xl tracking-[-0.02em]"
     },
     {
-      variant: "mono",
+      variant: "number",
       level: 3,
-      className: "text-2xs leading-narrow"
+      className: "text-3xl tracking-[-0.01em]"
     },
     {
-      variant: "mono",
+      variant: "number",
       level: 4,
-      className: "text-[0.5rem] leading-compact"
+      className: "text-xl tracking-[-0.02em]"
+    },
+    {
+      variant: "number",
+      level: 5,
+      className: "text-base tracking-[-0.02em]"
+    },
+    {
+      variant: "label",
+      level: 1,
+      className: "text-[17px]"
+    },
+    {
+      variant: "label",
+      level: 2,
+      className: "text-[15px]"
     }
   ],
   defaultVariants: {
     variant: "body",
     level: 2
   }
-}), d = i(
-  ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: n, ...r }, s) => /* @__PURE__ */ m(
-    l,
-    {
-      className: v(c({ variant: a, level: e, className: n })),
-      ref: s,
-      ...r,
-      children: t
+}), x = v(
+  ({ variant: a = "body", level: e = 2, children: l, as: t = "p", className: s, ...n }, r) => /* @__PURE__ */ i(
+    t,
+    {
+      className: o(c({ variant: a, level: e, className: s })),
+      ref: r,
+      ...n,
+      children: l
     }
   )
 );
-d.displayName = "Typography";
+x.displayName = "Typography";
 export {
-  d as Typography,
-  d as default,
+  x as Typography,
+  x as default,
   c as typographyVariants
 };

package/dist/components/WalletAddressField/WalletAddressField.d.ts

@@ -0,0 +1,23 @@
+import { InputProps } from '../Input';
+export interface WalletAddressFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth" | "endAdornment" | "endAdornmentWidth"> {
+    /**
+     * If true, the input will display in an error state with error styling
+     */
+    error?: boolean;
+    /**
+     * If true, the input will display in a valid state with success styling
+     */
+    isValid?: boolean;
+    /**
+     * Label for the input
+     * @default "Enter wallet address"
+     */
+    label?: string;
+    /**
+     * Label for the paste button
+     * @default "Paste"
+     */
+    pasteButtonLabel?: string;
+}
+export declare const WalletAddressField: import('react').ForwardRefExoticComponent<WalletAddressFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export default WalletAddressField;

package/dist/components/WalletAddressField/WalletAddressField.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { createChangeEvent as m } from "../../lib/utils.js";
+import { forwardRef as I, useRef as T, useState as r, useImperativeHandle as x } from "react";
+import R from "../ClearButton/ClearButton.js";
+import { Input as E } from "../Input/Input.js";
+import H, { PASTE_BUTTON_WIDTH as N } from "../PasteButton/PasteButton.js";
+const S = I(
+  ({
+    isValid: o,
+    disabled: l,
+    type: s = "text",
+    autoComplete: h = "off",
+    spellCheck: C = "false",
+    label: g = "Wallet address",
+    pasteButtonLabel: v = "Paste",
+    ...e
+  }, A) => {
+    const a = T(null), [F, P] = r(!1), [W, c] = r(""), [B, i] = r(!1);
+    x(A, () => a.current);
+    let u, f;
+    return !l && !F && !W ? (u = /* @__PURE__ */ d(
+      H,
+      {
+        inputRef: a,
+        label: v,
+        onPaste: () => {
+          var t;
+          if (a.current) {
+            const n = m(a.current);
+            (t = e.onChange) == null || t.call(e, n), P(!0);
+          }
+        }
+      }
+    ), f = N) : B && !l && (u = /* @__PURE__ */ d(
+      R,
+      {
+        inputRef: a,
+        onClear: () => {
+          var t;
+          if (a.current) {
+            const n = m(a.current);
+            (t = e.onChange) == null || t.call(e, n), c("");
+          }
+        }
+      }
+    ), f = 2.3), /* @__PURE__ */ d(
+      E,
+      {
+        ...e,
+        ref: a,
+        isValid: o,
+        disabled: l,
+        startAdornmentWidth: 2.3,
+        endAdornmentWidth: f,
+        endAdornment: u,
+        type: s,
+        autoComplete: h,
+        spellCheck: C,
+        label: g,
+        onFocus: (t) => {
+          var n;
+          i(!0), (n = e.onFocus) == null || n.call(e, t);
+        },
+        onBlur: (t) => {
+          var n;
+          i(!1), (n = e.onBlur) == null || n.call(e, t);
+        },
+        onChange: (t) => {
+          var n;
+          (n = e.onChange) == null || n.call(e, t), c(t.target.value);
+        }
+      }
+    );
+  }
+);
+S.displayName = "WalletAddressField";
+export {
+  S as WalletAddressField,
+  S as default
+};

package/dist/components/WalletAddressField/index.d.ts

@@ -0,0 +1 @@
+export * from './WalletAddressField';

package/dist/components/WalletAddressField/index.js

@@ -0,0 +1,4 @@
+import { WalletAddressField as l } from "./WalletAddressField.js";
+export {
+  l as WalletAddressField
+};