@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.2 → 1.0.0-canary.20

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

@@ -1,6 +1,6 @@
-import { jsxs as t, jsx as H } from "react/jsx-runtime";
-import { getBackgroundClass as s, getIconFillClass as V } from "./utils.js";
-const o = (C) => /* @__PURE__ */ t(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getBackgroundClass, getIconFillClass } from "./utils.js";
+const DAI = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: "88",
@@ -8,20 +8,20 @@ const o = (C) => /* @__PURE__ */ t(
     viewBox: "0 0 88 88",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...C,
+    ...props,
     style: { color: "#FFB833" },
     children: [
-      /* @__PURE__ */ H("rect", { width: "88", height: "88", rx: "44", className: s(C) }),
-      /* @__PURE__ */ H(
+      /* @__PURE__ */ jsx("rect", { width: "88", height: "88", rx: "44", className: getBackgroundClass(props) }),
+      /* @__PURE__ */ jsx(
         "path",
         {
           d: "M44.562 46.547H58.2374C58.529 46.547 58.6666 46.547 58.6877 46.1648C58.7994 44.7736 58.7994 43.3743 58.6877 41.9815C58.6877 41.7111 58.5532 41.5993 58.2601 41.5993H31.0437C30.7068 41.5993 30.6161 41.7111 30.6161 42.0269V46.0304C30.6161 46.547 30.6161 46.547 31.1554 46.547H44.562ZM57.1604 36.9205C57.1993 36.8184 57.1993 36.7067 57.1604 36.6063C56.9321 36.1091 56.6616 35.6345 56.3474 35.1892C55.8745 34.428 55.3174 33.7267 54.6825 33.0967C54.3829 32.7161 54.0363 32.3744 53.6477 32.0845C51.701 30.4277 49.3866 29.2552 46.899 28.6656C45.6439 28.3838 44.3612 28.2494 43.0753 28.2608H30.9967C30.6598 28.2608 30.6145 28.3952 30.6145 28.6883V36.6727C30.6145 37.0095 30.6145 37.1002 31.042 37.1002H56.9985C56.9985 37.1002 57.2236 37.0549 57.269 36.9205H57.1588H57.1604ZM57.1604 51.2259C56.7782 51.1838 56.3928 51.1838 56.0106 51.2259H31.0663C30.7295 51.2259 30.6161 51.2259 30.6161 51.6761V59.4823C30.6161 59.8419 30.6161 59.9326 31.0663 59.9326H42.5829C43.1336 59.9747 43.6842 59.9358 44.2235 59.8208C45.8949 59.701 47.5387 59.3382 49.1064 58.7406C49.6765 58.543 50.2272 58.2855 50.747 57.9762H50.9041C53.6039 56.572 55.7968 54.3662 57.1799 51.6583C57.1799 51.6583 57.337 51.3182 57.1604 51.2291V51.2259ZM26.096 63.9798V63.8454V58.6045V56.8279V51.5417C26.096 51.2486 26.096 51.2048 25.7364 51.2048H20.8551C20.5846 51.2048 20.4729 51.2048 20.4729 50.8453V46.5713H25.6911C25.9826 46.5713 26.096 46.5713 26.096 46.1891V41.9605C26.096 41.69 26.096 41.6236 25.7364 41.6236H20.8551C20.5846 41.6236 20.4729 41.6236 20.4729 41.2641V37.3059C20.4729 37.0581 20.4729 36.9917 20.8324 36.9917H25.6684C26.0053 36.9917 26.096 36.9917 26.096 36.5642V24.4403C26.096 24.0807 26.096 23.99 26.5462 23.99H43.4154C44.6397 24.0386 45.856 24.173 47.0593 24.3949C49.5389 24.8532 51.9212 25.7391 54.0995 27.004C55.5441 27.8543 56.8738 28.881 58.0577 30.0633C58.9484 30.9881 59.7517 31.989 60.4643 33.0546C61.1721 34.1348 61.76 35.2896 62.2215 36.4961C62.2782 36.8103 62.5794 37.0225 62.8936 36.9691H66.9198C67.4364 36.9691 67.4365 36.969 67.4591 37.4646V41.154C67.4591 41.5135 67.3247 41.6042 66.9635 41.6042H63.8589C63.5447 41.6042 63.454 41.6042 63.4767 42.0091C63.5998 43.3792 63.5998 44.7542 63.4767 46.1243C63.4767 46.5065 63.4767 46.5519 63.9058 46.5519H67.4575C67.6146 46.7543 67.4575 46.9568 67.4575 47.1608C67.4802 47.4216 67.4802 47.6856 67.4575 47.9463V50.6688C67.4575 51.051 67.3458 51.1644 67.0073 51.1644H62.756C62.4596 51.1077 62.1713 51.2972 62.1033 51.5919C61.0911 54.2237 59.4715 56.5833 57.3791 58.475C56.6147 59.1633 55.8114 59.8111 54.9724 60.4087C54.072 60.927 53.1958 61.4663 52.2727 61.8938C50.5738 62.6583 48.7923 63.2219 46.9638 63.5798C45.2276 63.8907 43.4672 64.0316 41.7003 64.0073H26.0895V63.9847L26.096 63.9798Z",
-          className: V(C)
+          className: getIconFillClass(props)
         }
       )
     ]
   }
 );
 export {
-  o as default
+  DAI as default
 };

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

@@ -1,6 +1,6 @@
-import { jsxs as t, jsx as l } from "react/jsx-runtime";
-import { getBackgroundClass as s, getIconFillClass as o } from "./utils.js";
-const d = (e) => /* @__PURE__ */ t(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getBackgroundClass, getIconFillClass } from "./utils.js";
+const ETH = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: "88",
@@ -8,22 +8,22 @@ const d = (e) => /* @__PURE__ */ t(
     viewBox: "0 0 88 88",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...e,
+    ...props,
     style: { color: "#3385FF" },
     children: [
-      /* @__PURE__ */ l("rect", { width: "88", height: "88", rx: "44", className: s(e) }),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ jsx("rect", { width: "88", height: "88", rx: "44", className: getBackgroundClass(props) }),
+      /* @__PURE__ */ jsx(
         "path",
         {
           fillRule: "evenodd",
           clipRule: "evenodd",
           d: "M44 51.5001L31 44.0001L44 24.0001L57 44.0001L44 51.5001ZM44 54.5001L31 47.0001L44 65.0001L57 47.0001L44 54.5001Z",
-          className: o(e)
+          className: getIconFillClass(props)
         }
       )
     ]
   }
 );
 export {
-  d as default
+  ETH as default
 };

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

@@ -1,14 +1,14 @@
-import { default as f } from "./btc.js";
-import { default as r } from "./eth.js";
-import { default as d } from "./dai.js";
-import { default as m } from "./usdc.js";
-import { default as s } from "./usdt.js";
-import { default as x } from "./wld.js";
+import { default as default2 } from "./btc.js";
+import { default as default3 } from "./eth.js";
+import { default as default4 } from "./dai.js";
+import { default as default5 } from "./usdc.js";
+import { default as default6 } from "./usdt.js";
+import { default as default7 } from "./wld.js";
 export {
-  f as BTC,
-  d as DAI,
-  r as ETH,
-  m as USDC,
-  s as USDT,
-  x as WLD
+  default2 as BTC,
+  default4 as DAI,
+  default3 as ETH,
+  default5 as USDC,
+  default6 as USDT,
+  default7 as WLD
 };

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

@@ -1,6 +1,6 @@
-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(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getBackgroundClass, getIconFillClass } from "./utils.js";
+const USDC = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: "88",
@@ -8,27 +8,27 @@ const i = (C) => /* @__PURE__ */ e(
     viewBox: "0 0 88 88",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...C,
+    ...props,
     style: { color: "#005CFF" },
     children: [
-      /* @__PURE__ */ t("rect", { width: "88", height: "88", rx: "44", className: l(C) }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ jsx("rect", { width: "88", height: "88", rx: "44", className: getBackgroundClass(props) }),
+      /* @__PURE__ */ jsx(
         "path",
         {
           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)
+          className: getIconFillClass(props)
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ jsx(
         "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)
+          className: getIconFillClass(props)
         }
       )
     ]
   }
 );
 export {
-  i as default
+  USDC as default
 };

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

@@ -1,6 +1,6 @@
-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(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getBackgroundClass, getIconFillClass } from "./utils.js";
+const USDT = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: "88",
@@ -8,20 +8,20 @@ const i = (t) => /* @__PURE__ */ C(
     viewBox: "0 0 88 88",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...t,
+    ...props,
     style: { color: "#28D9A6" },
     children: [
-      /* @__PURE__ */ s("rect", { width: "88", height: "88", rx: "44", className: e(t) }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ jsx("rect", { width: "88", height: "88", rx: "44", className: getBackgroundClass(props) }),
+      /* @__PURE__ */ jsx(
         "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)
+          className: getIconFillClass(props)
         }
       )
     ]
   }
 );
 export {
-  i as default
+  USDT as default
 };

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

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

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

@@ -1,6 +1,6 @@
-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(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getBackgroundClass, getIconFillClass } from "./utils.js";
+const WLD = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: "88",
@@ -8,20 +8,20 @@ const i = (C) => /* @__PURE__ */ s(
     viewBox: "0 0 88 88",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...C,
+    ...props,
     style: { color: "#181818" },
     children: [
-      /* @__PURE__ */ t("rect", { width: "88", height: "88", rx: "44", className: e(C) }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ jsx("rect", { width: "88", height: "88", rx: "44", className: getBackgroundClass(props) }),
+      /* @__PURE__ */ jsx(
         "path",
         {
           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)
+          className: getIconFillClass(props)
         }
       )
     ]
   }
 );
 export {
-  i as default
+  WLD as default
 };

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

@@ -1 +1 @@
-export * from './Token';
+export { Token, type TokenProps } from './Token';

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

@@ -1,11 +1,17 @@
 import { default as React } from 'react';
 interface TopBarProps {
     /** Title displayed in the center */
-    title: string;
+    title?: string;
     /** Element rendered on the left side */
     startAdornment?: React.ReactNode;
     /** Element rendered on the right side */
     endAdornment?: React.ReactNode;
+    /** Additional class name for the top bar */
+    className?: string;
 }
-export declare function TopBar({ title, startAdornment, endAdornment }: TopBarProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function TopBar({ title, startAdornment, endAdornment, className }: TopBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TopBar {
+    var displayName: string;
+}
+export { TopBar };
+export type { TopBarProps };

package/dist/components/TopBar/TopBar.js

@@ -1,23 +1,37 @@
-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 })
-  ] });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Typography } from "../Typography/Typography.js";
+function TopBar({ title, startAdornment, endAdornment, className }) {
+  const hasStartAdornment = Boolean(startAdornment);
+  const hasEndAdornment = Boolean(endAdornment);
+  const textAlignment = hasStartAdornment ? "text-center" : "text-left";
+  const justifyContent = hasStartAdornment || hasEndAdornment ? "justify-between" : "justify-start";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center px-6 pt-6 pb-2 w-full h-[4.5rem] gap-10",
+        justifyContent,
+        className
+      ),
+      children: [
+        startAdornment && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: startAdornment }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: hasStartAdornment ? "subtitle" : "heading",
+            level: hasStartAdornment ? 1 : 3,
+            className: cn("flex-1 grow truncate", textAlignment),
+            children: title
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: endAdornment }),
+        !endAdornment && hasStartAdornment && /* @__PURE__ */ jsx("div", { className: "shrink-0 invisible", "aria-hidden": "true", children: startAdornment })
+      ]
+    }
+  );
 }
+TopBar.displayName = "TopBar";
 export {
-  u as TopBar
+  TopBar
 };

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

@@ -1 +1 @@
-export * from './TopBar';
+export { TopBar, type TopBarProps } from './TopBar';

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
+interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * The HTML element to render the typography as
      * @default "p"
@@ -27,5 +27,6 @@ export declare const typographyVariants: (props?: ({
     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>>;
-export default Typography;
+declare const Typography: import('react').ForwardRefExoticComponent<PropsWithChildren<TypographyComponentProps> & import('react').RefAttributes<HTMLElement>>;
+export { Typography };
+export type { TypographyProps };

package/dist/components/Typography/Typography.js

@@ -1,16 +1,16 @@
-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("", {
+import { jsx } from "react/jsx-runtime";
+import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const typographyVariants = cva("", {
   variants: {
     variant: {
-      display: "font-sans font-semibold leading-narrow tracking-[-0.02em]",
-      heading: "font-sans 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-sans font-semibold"
+      display: "font-sans font-semibold leading-narrow tracking-[-0.02em] antialiased",
+      heading: "font-sans font-semibold leading-narrow tracking-[-0.01em] antialiased",
+      subtitle: "font-sans font-medium leading-narrow antialiased",
+      label: "font-sans font-semibold leading-narrow antialiased",
+      body: "font-sans font-normal leading-compact antialiased",
+      number: "font-sans font-semibold antialiased"
     },
     level: {
       1: "",
@@ -143,20 +143,22 @@ const c = m("", {
     variant: "body",
     level: 2
   }
-}), x = v(
-  ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: s, ...n }, r) => /* @__PURE__ */ i(
-    l,
-    {
-      className: o(c({ variant: a, level: e, className: s })),
-      ref: r,
-      ...n,
-      children: t
-    }
-  )
+});
+const Typography = forwardRef(
+  ({ variant = "body", level = 2, children, as: Component = "p", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(typographyVariants({ variant, level, className })),
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
 );
-x.displayName = "Typography";
+Typography.displayName = "Typography";
 export {
-  x as Typography,
-  x as default,
-  c as typographyVariants
+  Typography,
+  typographyVariants
 };

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

@@ -1 +1 @@
-export * from './Typography';
+export { Typography, type TypographyProps } from './Typography';

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

@@ -1,5 +1,5 @@
 import { InputProps } from '../Input';
-export interface WalletAddressFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth" | "endAdornment" | "endAdornmentWidth"> {
+interface WalletAddressFieldProps extends Omit<InputProps, "startAdornment" | "endAdornment"> {
     /**
      * If true, the input will display in an error state with error styling
      */
@@ -19,5 +19,6 @@ export interface WalletAddressFieldProps extends Omit<InputProps, "startAdornmen
      */
     pasteButtonLabel?: string;
 }
-export declare const WalletAddressField: import('react').ForwardRefExoticComponent<WalletAddressFieldProps & import('react').RefAttributes<HTMLInputElement>>;
-export default WalletAddressField;
+declare const WalletAddressField: import('react').ForwardRefExoticComponent<WalletAddressFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export { WalletAddressField };
+export type { WalletAddressFieldProps };

package/dist/components/WalletAddressField/WalletAddressField.js

@@ -1,81 +1,91 @@
 "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(
+import { jsx } from "react/jsx-runtime";
+import { createChangeEvent } from "../../lib/utils.js";
+import { forwardRef, useRef, useState, useImperativeHandle } from "react";
+import { PasteButton } from "../PasteButton/PasteButton.js";
+import { Input } from "../Input/Input.js";
+import { ClearButton } from "../ClearButton/ClearButton.js";
+const WalletAddressField = forwardRef(
   ({
-    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);
+    isValid,
+    disabled,
+    type = "text",
+    autoComplete = "off",
+    spellCheck = "false",
+    label = "Wallet address",
+    pasteButtonLabel = "Paste",
+    ...props
+  }, forwardedRef) => {
+    const inputRef = useRef(null);
+    const [isPasted, setIsPasted] = useState(false);
+    const [value, setValue] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    let endAdornment;
+    if (!disabled && !isPasted && !value) {
+      endAdornment = /* @__PURE__ */ jsx(
+        PasteButton,
+        {
+          inputRef,
+          label: pasteButtonLabel,
+          onPaste: () => {
+            var _a;
+            if (inputRef.current) {
+              const event = createChangeEvent(inputRef.current);
+              (_a = props.onChange) == null ? void 0 : _a.call(props, event);
+              setIsPasted(true);
+            }
           }
         }
-      }
-    ), 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("");
+      );
+    } else if (isFocused && !disabled) {
+      endAdornment = /* @__PURE__ */ jsx(
+        ClearButton,
+        {
+          inputRef,
+          onClear: () => {
+            var _a;
+            if (inputRef.current) {
+              const event = createChangeEvent(inputRef.current);
+              (_a = props.onChange) == null ? void 0 : _a.call(props, event);
+              setValue("");
+            }
           }
         }
-      }
-    ), f = 2.3), /* @__PURE__ */ d(
-      E,
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Input,
       {
-        ...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);
+        ...props,
+        ref: inputRef,
+        isValid,
+        disabled,
+        endAdornment,
+        type,
+        autoComplete,
+        spellCheck,
+        label,
+        onFocus: (e) => {
+          var _a;
+          setIsFocused(true);
+          (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
         },
-        onBlur: (t) => {
-          var n;
-          i(!1), (n = e.onBlur) == null || n.call(e, t);
+        onBlur: (e) => {
+          var _a;
+          setIsFocused(false);
+          (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
         },
-        onChange: (t) => {
-          var n;
-          (n = e.onChange) == null || n.call(e, t), c(t.target.value);
+        onChange: (e) => {
+          var _a;
+          (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+          setValue(e.target.value);
         }
       }
     );
   }
 );
-S.displayName = "WalletAddressField";
+WalletAddressField.displayName = "WalletAddressField";
 export {
-  S as WalletAddressField,
-  S as default
+  WalletAddressField
 };

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

@@ -1 +1 @@
-export * from './WalletAddressField';
+export { WalletAddressField, type WalletAddressFieldProps } from './WalletAddressField';