@mysten/dapp-kit 0.1.0 → 0.2.0

package/dist/cjs/components/connect-modal/wallet-list/WalletListItem.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/connect-modal/wallet-list/WalletListItem.tsx
@@ -23,21 +33,63 @@ __export(WalletListItem_exports, {
   WalletListItem: () => WalletListItem
 });
 module.exports = __toCommonJS(WalletListItem_exports);
-var import_clsx = require("clsx");
+var import_clsx2 = require("clsx");
+
+// src/components/ui/Heading.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
+
+// src/components/ui/Heading.css.ts
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var headingVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Heading__1aa835k0", variantClassNames: { size: { sm: "Heading_headingVariants_size_sm__1aa835k1", md: "Heading_headingVariants_size_md__1aa835k2", lg: "Heading_headingVariants_size_lg__1aa835k3", xl: "Heading_headingVariants_size_xl__1aa835k4" }, weight: { normal: "Heading_headingVariants_weight_normal__1aa835k5", bold: "Heading_headingVariants_weight_bold__1aa835k6" }, truncate: { true: "Heading_headingVariants_truncate_true__1aa835k7" } }, defaultVariants: { size: "lg", weight: "bold" }, compoundVariants: [] });
+
+// src/components/ui/Heading.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Heading = (0, import_react.forwardRef)(
+  ({
+    children,
+    className,
+    asChild = false,
+    as: Tag = "h1",
+    size,
+    weight,
+    truncate,
+    ...headingProps
+  }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_slot.Slot,
+      {
+        ...headingProps,
+        ref: forwardedRef,
+        className: (0, import_clsx.default)(headingVariants({ size, weight, truncate }), className),
+        children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { children })
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
 
 // src/components/connect-modal/wallet-list/WalletListItem.css.ts
-var buttonContainer = "WalletListItem_buttonContainer__1dqqtqs2";
 var container = "WalletListItem_container__1dqqtqs0";
-var selectedContainer = "WalletListItem_selectedContainer__1dqqtqs1";
-var walletIcon = "WalletListItem_walletIcon__1dqqtqs4";
-var walletName = "WalletListItem_walletName__1dqqtqs3";
+var selectedWalletItem = "WalletListItem_selectedWalletItem__1dqqtqs2";
+var walletIcon = "WalletListItem_walletIcon__1dqqtqs3";
+var walletItem = "WalletListItem_walletItem__1dqqtqs1";
 
 // src/components/connect-modal/wallet-list/WalletListItem.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function WalletListItem({ name, icon, onClick, isSelected = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: (0, import_clsx.clsx)(container, { [selectedContainer]: isSelected }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: buttonContainer, type: "button", onClick, children: [
-    typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: walletIcon, src: icon, alt: `${name} logo` }) : icon,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: walletName, children: name })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: container, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      className: (0, import_clsx2.clsx)(walletItem, { [selectedWalletItem]: isSelected }),
+      type: "button",
+      onClick,
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: walletIcon, src: icon, alt: `${name} logo` }) : icon,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading, { size: "md", truncate: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: name }) })
+      ]
+    }
+  ) });
 }
 //# sourceMappingURL=WalletListItem.js.map

package/dist/cjs/components/connect-modal/wallet-list/WalletListItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/components/connect-modal/wallet-list/WalletListItem.tsx", "../../../../../src/components/connect-modal/wallet-list/WalletListItem.css.ts"],
-  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { clsx } from 'clsx';\nimport type { ReactNode } from 'react';\n\nimport * as styles from './WalletListItem.css.js';\n\ntype WalletListItemProps = {\n\tname: string;\n\ticon: ReactNode;\n\tisSelected?: boolean;\n\tonClick: () => void;\n};\n\nexport function WalletListItem({ name, icon, onClick, isSelected = false }: WalletListItemProps) {\n\treturn (\n\t\t<li className={clsx(styles.container, { [styles.selectedContainer]: isSelected })}>\n\t\t\t<button className={styles.buttonContainer} type=\"button\" onClick={onClick}>\n\t\t\t\t{typeof icon === 'string' ? (\n\t\t\t\t\t<img className={styles.walletIcon} src={icon} alt={`${name} logo`} />\n\t\t\t\t) : (\n\t\t\t\t\ticon\n\t\t\t\t)}\n\t\t\t\t<div className={styles.walletName}>{name}</div>\n\t\t\t</button>\n\t\t</li>\n\t);\n}\n", "import 'src/components/connect-modal/wallet-list/WalletListItem.css.ts.vanilla.css?source=LldhbGxldExpc3RJdGVtX2NvbnRhaW5lcl9fMWRxcXRxczAgewogIHBhZGRpbmc6IDhweDsKICBib3JkZXItcmFkaXVzOiA4cHg7Cn0KLldhbGxldExpc3RJdGVtX3NlbGVjdGVkQ29udGFpbmVyX18xZHFxdHFzMSB7CiAgYmFja2dyb3VuZDogI0ZGRkZGRjsKICBib3gtc2hhZG93OiAwcHggMnB4IDZweCByZ2JhKDAsIDAsIDAsIDAuMDUpOwp9Ci5XYWxsZXRMaXN0SXRlbV9idXR0b25Db250YWluZXJfXzFkcXF0cXMyIHsKICB3aWR0aDogMTAwJTsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgZ2FwOiA4cHg7Cn0KLldhbGxldExpc3RJdGVtX3dhbGxldE5hbWVfXzFkcXF0cXMzIHsKICBvdmVyZmxvdzogaGlkZGVuOwogIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzOwogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLldhbGxldExpc3RJdGVtX3dhbGxldEljb25fXzFkcXF0cXM0IHsKICB3aWR0aDogMjhweDsKICBoZWlnaHQ6IDI4cHg7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIGZsZXgtc2hyaW5rOiAwOwogIGJhY2tncm91bmQ6IHdoaXRlOwogIG9iamVjdC1maXQ6IGNvdmVyOwp9';\nexport var buttonContainer = 'WalletListItem_buttonContainer__1dqqtqs2';\nexport var container = 'WalletListItem_container__1dqqtqs0';\nexport var selectedContainer = 'WalletListItem_selectedContainer__1dqqtqs1';\nexport var walletIcon = 'WalletListItem_walletIcon__1dqqtqs4';\nexport var walletName = 'WalletListItem_walletName__1dqqtqs3';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAqB;;;ACFd,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,oBAAoB;AACxB,IAAI,aAAa;AACjB,IAAI,aAAa;;;ADarB;AAHI,SAAS,eAAe,EAAE,MAAM,MAAM,SAAS,aAAa,MAAM,GAAwB;AAChG,SACC,4CAAC,QAAG,eAAW,kBAAY,WAAW,EAAE,CAAQ,iBAAiB,GAAG,WAAW,CAAC,GAC/E,uDAAC,YAAO,WAAkB,iBAAiB,MAAK,UAAS,SACvD;AAAA,WAAO,SAAS,WAChB,4CAAC,SAAI,WAAkB,YAAY,KAAK,MAAM,KAAK,GAAG,aAAa,IAEnE;AAAA,IAED,4CAAC,SAAI,WAAkB,YAAa,gBAAK;AAAA,KAC1C,GACD;AAEF;",
-  "names": []
+  "sources": ["../../../../../src/components/connect-modal/wallet-list/WalletListItem.tsx", "../../../../../src/components/ui/Heading.tsx", "../../../../../src/components/ui/Heading.css.ts", "../../../../../src/components/connect-modal/wallet-list/WalletListItem.css.ts"],
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { clsx } from 'clsx';\nimport type { ReactNode } from 'react';\n\nimport { Heading } from '../../ui/Heading.js';\nimport * as styles from './WalletListItem.css.js';\n\ntype WalletListItemProps = {\n\tname: string;\n\ticon: ReactNode;\n\tisSelected?: boolean;\n\tonClick: () => void;\n};\n\nexport function WalletListItem({ name, icon, onClick, isSelected = false }: WalletListItemProps) {\n\treturn (\n\t\t<li className={styles.container}>\n\t\t\t<button\n\t\t\t\tclassName={clsx(styles.walletItem, { [styles.selectedWalletItem]: isSelected })}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onClick}\n\t\t\t>\n\t\t\t\t{typeof icon === 'string' ? (\n\t\t\t\t\t<img className={styles.walletIcon} src={icon} alt={`${name} logo`} />\n\t\t\t\t) : (\n\t\t\t\t\ticon\n\t\t\t\t)}\n\t\t\t\t<Heading size=\"md\" truncate asChild>\n\t\t\t\t\t<div>{name}</div>\n\t\t\t\t</Heading>\n\t\t\t</button>\n\t\t</li>\n\t);\n}\n", "// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { headingVariants } from './Heading.css.js';\nimport type { HeadingVariants } from './Heading.css.js';\n\ntype HeadingAsChildProps = {\n\tasChild?: boolean;\n\tas?: never;\n};\n\ntype HeadingAsProps = {\n\tas?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\tasChild?: never;\n};\n\ntype HeadingProps = (HeadingAsChildProps | HeadingAsProps) &\n\tReact.HTMLAttributes<HTMLHeadingElement> &\n\tHeadingVariants;\n\nconst Heading = forwardRef<HTMLHeadingElement, HeadingProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tasChild = false,\n\t\t\tas: Tag = 'h1',\n\t\t\tsize,\n\t\t\tweight,\n\t\t\ttruncate,\n\t\t\t...headingProps\n\t\t},\n\t\tforwardedRef,\n\t) => {\n\t\treturn (\n\t\t\t<Slot\n\t\t\t\t{...headingProps}\n\t\t\t\tref={forwardedRef}\n\t\t\t\tclassName={clsx(headingVariants({ size, weight, truncate }), className)}\n\t\t\t>\n\t\t\t\t{asChild ? children : <Tag>{children}</Tag>}\n\t\t\t</Slot>\n\t\t);\n\t},\n);\nHeading.displayName = 'Heading';\n\nexport { Heading };\n", "import 'src/components/ui/Heading.css.ts.vanilla.css?source=LkhlYWRpbmdfaGVhZGluZ1ZhcmlhbnRzX3NpemVfc21fXzFhYTgzNWsxIHsKICBmb250LXNpemU6IHZhcigtLWRhcHAta2l0LWZvbnRTaXplcy1zbWFsbCk7Cn0KLkhlYWRpbmdfaGVhZGluZ1ZhcmlhbnRzX3NpemVfbWRfXzFhYTgzNWsyIHsKICBmb250LXNpemU6IHZhcigtLWRhcHAta2l0LWZvbnRTaXplcy1tZWRpdW0pOwp9Ci5IZWFkaW5nX2hlYWRpbmdWYXJpYW50c19zaXplX2xnX18xYWE4MzVrMyB7CiAgZm9udC1zaXplOiB2YXIoLS1kYXBwLWtpdC1mb250U2l6ZXMtbGFyZ2UpOwp9Ci5IZWFkaW5nX2hlYWRpbmdWYXJpYW50c19zaXplX3hsX18xYWE4MzVrNCB7CiAgZm9udC1zaXplOiB2YXIoLS1kYXBwLWtpdC1mb250U2l6ZXMteGxhcmdlKTsKfQouSGVhZGluZ19oZWFkaW5nVmFyaWFudHNfd2VpZ2h0X25vcm1hbF9fMWFhODM1azUgewogIGZvbnQtd2VpZ2h0OiB2YXIoLS1kYXBwLWtpdC1mb250V2VpZ2h0cy1ub3JtYWwpOwp9Ci5IZWFkaW5nX2hlYWRpbmdWYXJpYW50c193ZWlnaHRfYm9sZF9fMWFhODM1azYgewogIGZvbnQtd2VpZ2h0OiB2YXIoLS1kYXBwLWtpdC1mb250V2VpZ2h0cy1ib2xkKTsKfQouSGVhZGluZ19oZWFkaW5nVmFyaWFudHNfdHJ1bmNhdGVfdHJ1ZV9fMWFhODM1azcgewogIG92ZXJmbG93OiBoaWRkZW47CiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7CiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsKfQ==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var headingVariants = _7a468({defaultClassName:'Heading__1aa835k0',variantClassNames:{size:{sm:'Heading_headingVariants_size_sm__1aa835k1',md:'Heading_headingVariants_size_md__1aa835k2',lg:'Heading_headingVariants_size_lg__1aa835k3',xl:'Heading_headingVariants_size_xl__1aa835k4'},weight:{normal:'Heading_headingVariants_weight_normal__1aa835k5',bold:'Heading_headingVariants_weight_bold__1aa835k6'},truncate:{true:'Heading_headingVariants_truncate_true__1aa835k7'}},defaultVariants:{size:'lg',weight:'bold'},compoundVariants:[]});", "import 'src/components/connect-modal/wallet-list/WalletListItem.css.ts.vanilla.css?source=LldhbGxldExpc3RJdGVtX2NvbnRhaW5lcl9fMWRxcXRxczAgewogIGRpc3BsYXk6IGZsZXg7Cn0KLldhbGxldExpc3RJdGVtX3dhbGxldEl0ZW1fXzFkcXF0cXMxIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgZmxleC1ncm93OiAxOwogIHBhZGRpbmc6IDhweDsKICBnYXA6IDhweDsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1kYXBwLWtpdC1yYWRpaS1sYXJnZSk7Cn0KLldhbGxldExpc3RJdGVtX3dhbGxldEl0ZW1fXzFkcXF0cXMxOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1kYXBwLWtpdC1iYWNrZ3JvdW5kQ29sb3JzLXdhbGxldEl0ZW1Ib3Zlcik7Cn0KLldhbGxldExpc3RJdGVtX3NlbGVjdGVkV2FsbGV0SXRlbV9fMWRxcXRxczIgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWRhcHAta2l0LWJhY2tncm91bmRDb2xvcnMtd2FsbGV0SXRlbVNlbGVjdGVkKTsKICBib3gtc2hhZG93OiAwcHggMnB4IDZweCByZ2JhKDAsIDAsIDAsIDAuMDUpOwp9Ci5XYWxsZXRMaXN0SXRlbV93YWxsZXRJY29uX18xZHFxdHFzMyB7CiAgd2lkdGg6IDI4cHg7CiAgaGVpZ2h0OiAyOHB4OwogIGZsZXgtc2hyaW5rOiAwOwogIG9iamVjdC1maXQ6IGNvdmVyOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLWRhcHAta2l0LXJhZGlpLXNtYWxsKTsKfQ==';\nexport var container = 'WalletListItem_container__1dqqtqs0';\nexport var selectedWalletItem = 'WalletListItem_selectedWalletItem__1dqqtqs2';\nexport var walletIcon = 'WalletListItem_walletIcon__1dqqtqs3';\nexport var walletItem = 'WalletListItem_walletItem__1dqqtqs1';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,IAAAA,eAAqB;;;ACArB,wBAAqB;AACrB,kBAAiB;AACjB,mBAA2B;;;ACJ3B,6BAA0C;AACnC,IAAI,sBAAkB,uBAAAC,iBAAO,EAAC,kBAAiB,qBAAoB,mBAAkB,EAAC,MAAK,EAAC,IAAG,6CAA4C,IAAG,6CAA4C,IAAG,6CAA4C,IAAG,4CAA2C,GAAE,QAAO,EAAC,QAAO,mDAAkD,MAAK,gDAA+C,GAAE,UAAS,EAAC,MAAK,kDAAiD,EAAC,GAAE,iBAAgB,EAAC,MAAK,MAAK,QAAO,OAAM,GAAE,kBAAiB,CAAC,EAAC,CAAC;;;AD0C9f;AApB1B,IAAM,cAAU;AAAA,EACf,CACC;AAAA,IACC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,IAAI,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,GACA,iBACI;AACJ,WACC;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,YAAAC,SAAK,gBAAgB,EAAE,MAAM,QAAQ,SAAS,CAAC,GAAG,SAAS;AAAA,QAErE,oBAAU,WAAW,4CAAC,OAAK,UAAS;AAAA;AAAA,IACtC;AAAA,EAEF;AACD;AACA,QAAQ,cAAc;;;AEhDf,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,aAAa;AACjB,IAAI,aAAa;;;AHerB,IAAAC,sBAAA;AAHI,SAAS,eAAe,EAAE,MAAM,MAAM,SAAS,aAAa,MAAM,GAAwB;AAChG,SACC,6CAAC,QAAG,WAAkB,WACrB;AAAA,IAAC;AAAA;AAAA,MACA,eAAW,mBAAY,YAAY,EAAE,CAAQ,kBAAkB,GAAG,WAAW,CAAC;AAAA,MAC9E,MAAK;AAAA,MACL;AAAA,MAEC;AAAA,eAAO,SAAS,WAChB,6CAAC,SAAI,WAAkB,YAAY,KAAK,MAAM,KAAK,GAAG,aAAa,IAEnE;AAAA,QAED,6CAAC,WAAQ,MAAK,MAAK,UAAQ,MAAC,SAAO,MAClC,uDAAC,SAAK,gBAAK,GACZ;AAAA;AAAA;AAAA,EACD,GACD;AAEF;",
+  "names": ["import_clsx", "_7a468", "clsx", "import_jsx_runtime"]
 }

package/dist/cjs/components/icons/BackIcon.js

@@ -29,7 +29,7 @@ function BackIcon(props) {
     "path",
     {
       d: "M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z",
-      fill: "#383F47"
+      fill: "currentColor"
     }
   ) });
 }

package/dist/cjs/components/icons/BackIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/icons/BackIcon.tsx"],
-  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentProps } from 'react';\n\nexport function BackIcon(props: ComponentProps<'svg'>) {\n\treturn (\n\t\t<svg width={24} height={24} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n\t\t\t<path\n\t\t\t\td=\"M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z\"\n\t\t\t\tfill=\"#383F47\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQG;AAHI,SAAS,SAAS,OAA8B;AACtD,SACC,4CAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,MAAK,QAAO,OAAM,8BAA8B,GAAG,OAC9E;AAAA,IAAC;AAAA;AAAA,MACA,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACN,GACD;AAEF;",
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentProps } from 'react';\n\n// FIXME: Replace this with a 10x10 icon to match the CheckIcon, or alternatively make the CheckIcon bigger\n// Right now, the icons don't align on mobile :(\nexport function BackIcon(props: ComponentProps<'svg'>) {\n\treturn (\n\t\t<svg width={24} height={24} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n\t\t\t<path\n\t\t\t\td=\"M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUG;AAHI,SAAS,SAAS,OAA8B;AACtD,SACC,4CAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,MAAK,QAAO,OAAM,8BAA8B,GAAG,OAC9E;AAAA,IAAC;AAAA;AAAA,MACA,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACN,GACD;AAEF;",
   "names": []
 }

package/dist/cjs/components/icons/CheckIcon.js

@@ -28,7 +28,7 @@ function CheckIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "path",
     {
-      fill: "#007195",
+      fill: "currentColor",
       d: "m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z"
     }
   ) });

package/dist/cjs/components/icons/CheckIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/icons/CheckIcon.tsx"],
-  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentProps } from 'react';\n\nexport function CheckIcon(props: ComponentProps<'svg'>) {\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n\t\t\t<path\n\t\t\t\tfill=\"#007195\"\n\t\t\t\td=\"m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentProps } from 'react';\n\nexport function CheckIcon(props: ComponentProps<'svg'>) {\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n\t\t\t<path\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\td=\"m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQG;AAHI,SAAS,UAAU,OAA8B;AACvD,SACC,4CAAC,SAAI,OAAM,8BAA6B,OAAO,IAAI,QAAQ,IAAI,MAAK,QAAQ,GAAG,OAC9E;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACH,GACD;AAEF;",
   "names": []
 }

package/dist/cjs/components/styling/InjectedThemeStyles.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from '../../themes/themeContract.js';
+type InjectedThemeStylesProps = {
+    theme: Theme;
+};
+export declare function InjectedThemeStyles({ theme }: InjectedThemeStylesProps): import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/cjs/components/styling/InjectedThemeStyles.js

@@ -0,0 +1,123 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/styling/InjectedThemeStyles.tsx
+var InjectedThemeStyles_exports = {};
+__export(InjectedThemeStyles_exports, {
+  InjectedThemeStyles: () => InjectedThemeStyles
+});
+module.exports = __toCommonJS(InjectedThemeStyles_exports);
+var import_dynamic = require("@vanilla-extract/dynamic");
+
+// src/constants/styleDataAttribute.ts
+var styleDataAttributeName = "data-dapp-kit";
+var styleDataAttributeSelector = `[${styleDataAttributeName}]`;
+var styleDataAttribute = { [styleDataAttributeName]: "" };
+
+// src/themes/themeContract.ts
+var import_css = require("@vanilla-extract/css");
+var themeContractValues = {
+  blurs: {
+    modalOverlay: ""
+  },
+  backgroundColors: {
+    primaryButton: "",
+    primaryButtonHover: "",
+    outlineButtonHover: "",
+    walletItemHover: "",
+    walletItemSelected: "",
+    modalOverlay: "",
+    modalPrimary: "",
+    modalSecondary: "",
+    iconButton: "",
+    iconButtonHover: "",
+    dropdownMenu: "",
+    dropdownMenuSeparator: ""
+  },
+  borderColors: {
+    outlineButton: ""
+  },
+  colors: {
+    primaryButton: "",
+    outlineButton: "",
+    body: "",
+    bodyMuted: "",
+    bodyDanger: "",
+    iconButton: ""
+  },
+  radii: {
+    small: "",
+    medium: "",
+    large: "",
+    xlarge: ""
+  },
+  shadows: {
+    primaryButton: "",
+    walletItemSelected: ""
+  },
+  fontWeights: {
+    normal: "",
+    medium: "",
+    bold: ""
+  },
+  fontSizes: {
+    small: "",
+    medium: "",
+    large: "",
+    xlarge: ""
+  },
+  typography: {
+    fontFamily: "",
+    fontStyle: "",
+    lineHeight: "",
+    letterSpacing: ""
+  }
+};
+var themeVars = (0, import_css.createGlobalThemeContract)(
+  themeContractValues,
+  (_, path) => `dapp-kit-${path.join("-")}`
+);
+
+// src/components/styling/InjectedThemeStyles.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function InjectedThemeStyles({ theme }) {
+  const themeStyles = Array.isArray(theme) ? getDynamicThemeStyles(theme) : getStaticThemeStyles(theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: themeStyles
+      }
+    }
+  );
+}
+function getDynamicThemeStyles(themes) {
+  return themes.map(({ mediaQuery, selector, variables }) => {
+    const themeStyles = getStaticThemeStyles(variables);
+    const themeStylesWithSelectorPrefix = selector ? `${selector} ${themeStyles}` : themeStyles;
+    return mediaQuery ? `@media ${mediaQuery}{${themeStylesWithSelectorPrefix}}` : themeStylesWithSelectorPrefix;
+  }).join(" ");
+}
+function getStaticThemeStyles(theme) {
+  return `${styleDataAttributeSelector} {${cssStringFromTheme(theme)}}`;
+}
+function cssStringFromTheme(theme) {
+  return Object.entries((0, import_dynamic.assignInlineVars)(themeVars, theme)).map(([key, value]) => `${key}:${value};`).join("");
+}
+//# sourceMappingURL=InjectedThemeStyles.js.map

package/dist/cjs/components/styling/InjectedThemeStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/styling/InjectedThemeStyles.tsx", "../../../../src/constants/styleDataAttribute.ts", "../../../../src/themes/themeContract.ts"],
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\n\nimport { styleDataAttributeSelector } from '../../constants/styleDataAttribute.js';\nimport { themeVars } from '../../themes/themeContract.js';\nimport type { DynamicTheme, Theme, ThemeVars } from '../../themes/themeContract.js';\n\ntype InjectedThemeStylesProps = {\n\ttheme: Theme;\n};\n\nexport function InjectedThemeStyles({ theme }: InjectedThemeStylesProps) {\n\tconst themeStyles = Array.isArray(theme)\n\t\t? getDynamicThemeStyles(theme)\n\t\t: getStaticThemeStyles(theme);\n\n\treturn (\n\t\t<style\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: themeStyles,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction getDynamicThemeStyles(themes: DynamicTheme[]) {\n\treturn themes\n\t\t.map(({ mediaQuery, selector, variables }) => {\n\t\t\tconst themeStyles = getStaticThemeStyles(variables);\n\t\t\tconst themeStylesWithSelectorPrefix = selector ? `${selector} ${themeStyles}` : themeStyles;\n\n\t\t\treturn mediaQuery\n\t\t\t\t? `@media ${mediaQuery}{${themeStylesWithSelectorPrefix}}`\n\t\t\t\t: themeStylesWithSelectorPrefix;\n\t\t})\n\t\t.join(' ');\n}\n\nfunction getStaticThemeStyles(theme: ThemeVars) {\n\treturn `${styleDataAttributeSelector} {${cssStringFromTheme(theme)}}`;\n}\n\nfunction cssStringFromTheme(theme: ThemeVars) {\n\treturn Object.entries(assignInlineVars(themeVars, theme))\n\t\t.map(([key, value]) => `${key}:${value};`)\n\t\t.join('');\n}\n", "// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nexport const styleDataAttributeName = 'data-dapp-kit';\n\nexport const styleDataAttributeSelector = `[${styleDataAttributeName}]`;\n\nexport const styleDataAttribute = { [styleDataAttributeName]: '' };\n", "// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createGlobalThemeContract } from '@vanilla-extract/css';\n\nconst themeContractValues = {\n\tblurs: {\n\t\tmodalOverlay: '',\n\t},\n\tbackgroundColors: {\n\t\tprimaryButton: '',\n\t\tprimaryButtonHover: '',\n\t\toutlineButtonHover: '',\n\t\twalletItemHover: '',\n\t\twalletItemSelected: '',\n\t\tmodalOverlay: '',\n\t\tmodalPrimary: '',\n\t\tmodalSecondary: '',\n\t\ticonButton: '',\n\t\ticonButtonHover: '',\n\t\tdropdownMenu: '',\n\t\tdropdownMenuSeparator: '',\n\t},\n\tborderColors: {\n\t\toutlineButton: '',\n\t},\n\tcolors: {\n\t\tprimaryButton: '',\n\t\toutlineButton: '',\n\t\tbody: '',\n\t\tbodyMuted: '',\n\t\tbodyDanger: '',\n\t\ticonButton: '',\n\t},\n\tradii: {\n\t\tsmall: '',\n\t\tmedium: '',\n\t\tlarge: '',\n\t\txlarge: '',\n\t},\n\tshadows: {\n\t\tprimaryButton: '',\n\t\twalletItemSelected: '',\n\t},\n\tfontWeights: {\n\t\tnormal: '',\n\t\tmedium: '',\n\t\tbold: '',\n\t},\n\tfontSizes: {\n\t\tsmall: '',\n\t\tmedium: '',\n\t\tlarge: '',\n\t\txlarge: '',\n\t},\n\ttypography: {\n\t\tfontFamily: '',\n\t\tfontStyle: '',\n\t\tlineHeight: '',\n\t\tletterSpacing: '',\n\t},\n};\n\nexport type ThemeVars = typeof themeContractValues;\n\n/**\n * A custom theme that is enabled when various conditions are\n */\nexport type DynamicTheme = {\n\t/**\n\t * An optional media query required for the given theme to be enabled. This is useful\n\t * when you want the theme of your application to automatically switch depending on\n\t * a media feature.\n\t *\n\t * @example '(prefers-color-scheme: dark)'\n\t */\n\tmediaQuery?: string;\n\n\t/**\n\t * An optional CSS selector required for the given theme to be enabled. This is useful\n\t * when you have a manual theme switcher on your application that sets a top-level\n\t * class name or data-attribute to control the current theme.\n\t *\n\t * @example '.data-dark'\n\t */\n\tselector?: string;\n\n\t/** The theme definitions that will be set when the selector and mediaQuery criteria are matched. */\n\tvariables: ThemeVars;\n};\n\nexport type Theme = ThemeVars | DynamicTheme[];\n\nexport const themeVars = createGlobalThemeContract(\n\tthemeContractValues,\n\t(_, path) => `dapp-kit-${path.join('-')}`,\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;;;ACA1B,IAAM,yBAAyB;AAE/B,IAAM,6BAA6B,IAAI;AAEvC,IAAM,qBAAqB,EAAE,CAAC,sBAAsB,GAAG,GAAG;;;ACJjE,iBAA0C;AAE1C,IAAM,sBAAsB;AAAA,EAC3B,OAAO;AAAA,IACN,cAAc;AAAA,EACf;AAAA,EACA,kBAAkB;AAAA,IACjB,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,uBAAuB;AAAA,EACxB;AAAA,EACA,cAAc;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,IACP,eAAe;AAAA,IACf,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACR,eAAe;AAAA,IACf,oBAAoB;AAAA,EACrB;AAAA,EACA,aAAa;AAAA,IACZ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACP;AAAA,EACA,WAAW;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EAChB;AACD;AAgCO,IAAM,gBAAY;AAAA,EACxB;AAAA,EACA,CAAC,GAAG,SAAS,YAAY,KAAK,KAAK,GAAG;AACvC;;;AF7EE;AANK,SAAS,oBAAoB,EAAE,MAAM,GAA6B;AACxE,QAAM,cAAc,MAAM,QAAQ,KAAK,IACpC,sBAAsB,KAAK,IAC3B,qBAAqB,KAAK;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,yBAAyB;AAAA,QACxB,QAAQ;AAAA,MACT;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,sBAAsB,QAAwB;AACtD,SAAO,OACL,IAAI,CAAC,EAAE,YAAY,UAAU,UAAU,MAAM;AAC7C,UAAM,cAAc,qBAAqB,SAAS;AAClD,UAAM,gCAAgC,WAAW,GAAG,YAAY,gBAAgB;AAEhF,WAAO,aACJ,UAAU,cAAc,mCACxB;AAAA,EACJ,CAAC,EACA,KAAK,GAAG;AACX;AAEA,SAAS,qBAAqB,OAAkB;AAC/C,SAAO,GAAG,+BAA+B,mBAAmB,KAAK;AAClE;AAEA,SAAS,mBAAmB,OAAkB;AAC7C,SAAO,OAAO,YAAQ,iCAAiB,WAAW,KAAK,CAAC,EACtD,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,GAAG,OAAO,QAAQ,EACxC,KAAK,EAAE;AACV;",
+  "names": []
+}

package/dist/cjs/components/styling/StyleMarker.css.css

@@ -1,7 +1,14 @@
-/* vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=W2RhdGEtZGFwcC1raXRdOndoZXJlKCopLCBbZGF0YS1kYXBwLWtpdF0gOndoZXJlKCopIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CltkYXRhLWRhcHAta2l0XTp3aGVyZShidXR0b24pLCBbZGF0YS1kYXBwLWtpdF0gOndoZXJlKGJ1dHRvbikgewogIGFwcGVhcmFuY2U6IG5vbmU7CiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgZm9udC1zaXplOiBpbmhlcml0OwogIGZvbnQtZmFtaWx5OiBpbmhlcml0OwogIGxpbmUtaGVpZ2h0OiBpbmhlcml0OwogIGxldHRlci1zcGFjaW5nOiBpbmhlcml0OwogIG91dGxpbmU6IG5vbmU7CiAgY29sb3I6IGluaGVyaXQ7CiAgYm9yZGVyOiAwOwogIHBhZGRpbmc6IDA7CiAgbWFyZ2luOiAwOwp9CltkYXRhLWRhcHAta2l0XTp3aGVyZShhKSwgW2RhdGEtZGFwcC1raXRdIDp3aGVyZShhKSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiBpbmhlcml0OwogIG91dGxpbmU6IG5vbmU7Cn0KW2RhdGEtZGFwcC1raXRdOndoZXJlKG9sLCB1bCksIFtkYXRhLWRhcHAta2l0XSA6d2hlcmUob2wsIHVsKSB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBtYXJnaW46IDA7CiAgcGFkZGluZzogMDsKfQpbZGF0YS1kYXBwLWtpdF06d2hlcmUoaDEsIGgyLCBoMywgaDQsIGg1LCBoNiksIFtkYXRhLWRhcHAta2l0XSA6d2hlcmUoaDEsIGgyLCBoMywgaDQsIGg1LCBoNikgewogIGZvbnQtc2l6ZTogaW5oZXJpdDsKICBmb250LXdlaWdodDogaW5oZXJpdDsKICBtYXJnaW46IDA7Cn0= */
+/* vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=#H4sIAAAAAAAAA41SPW/CMBDd+RUeocJSv4d0r7ozdEAdjtgkFo4dOZdCWvW/9+wEMAQjhpPie+/5ne9lKQCBC6hrvlH4lW1L6eT0bjZny1OEHSD2O2FsZXe8UT/KFBl9OyEdp9YbIbnV1mXsG9yUH+Q8dBviiG7mWWtrkK+hUrobcbGrbeGgLjvuae+BdVSRrRxpPPIpVVFiw411FehIgJ0eK85cFp501GzDXbfaaGUkLy9LIh9P+wisXiURaW9NDXnY4xVhYC56Imn/JsuLua1aRGvS4Q14SJAwCQ5MTqsx1kg/0QryTeFsawQfYkRi0IBOGjwLQBm6UuEozKh/spa4f/bwCBpso07/d2Xs3h9qECJIwqkCVygTDqmNQHoZ0O8B5Q65kLl1gMqa4zLGo9gW/ZP2lJSn1XPW6rTxgAd3rZrDD7o3jp51+uKUYfkwZ+Uj1RPVM9UL1Wt6gAQ/DHQl4e04yTiBf3Q5P8VLBAAA */
 [data-dapp-kit]:where(*),
 [data-dapp-kit] :where(*) {
   box-sizing: border-box;
+  color: var(--dapp-kit-colors-body);
+  font-family: var(--dapp-kit-typography-fontFamily);
+  font-size: var(--dapp-kit-fontWeights-normal);
+  font-style: var(--dapp-kit-typography-fontStyle);
+  font-weight: var(--dapp-kit-fontWeights-normal);
+  line-height: var(--dapp-kit-typography-lineHeight);
+  letter-spacing: var(--dapp-kit-typography-letterSpacing);
 }
 [data-dapp-kit]:where(button),
 [data-dapp-kit] :where(button) {
@@ -13,7 +20,6 @@
   font-family: inherit;
   line-height: inherit;
   letter-spacing: inherit;
-  outline: none;
   color: inherit;
   border: 0;
   padding: 0;

package/dist/cjs/components/styling/StyleMarker.css.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=W2RhdGEtZGFwcC1raXRdOndoZXJlKCopLCBbZGF0YS1kYXBwLWtpdF0gOndoZXJlKCopIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CltkYXRhLWRhcHAta2l0XTp3aGVyZShidXR0b24pLCBbZGF0YS1kYXBwLWtpdF0gOndoZXJlKGJ1dHRvbikgewogIGFwcGVhcmFuY2U6IG5vbmU7CiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgZm9udC1zaXplOiBpbmhlcml0OwogIGZvbnQtZmFtaWx5OiBpbmhlcml0OwogIGxpbmUtaGVpZ2h0OiBpbmhlcml0OwogIGxldHRlci1zcGFjaW5nOiBpbmhlcml0OwogIG91dGxpbmU6IG5vbmU7CiAgY29sb3I6IGluaGVyaXQ7CiAgYm9yZGVyOiAwOwogIHBhZGRpbmc6IDA7CiAgbWFyZ2luOiAwOwp9CltkYXRhLWRhcHAta2l0XTp3aGVyZShhKSwgW2RhdGEtZGFwcC1raXRdIDp3aGVyZShhKSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiBpbmhlcml0OwogIG91dGxpbmU6IG5vbmU7Cn0KW2RhdGEtZGFwcC1raXRdOndoZXJlKG9sLCB1bCksIFtkYXRhLWRhcHAta2l0XSA6d2hlcmUob2wsIHVsKSB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBtYXJnaW46IDA7CiAgcGFkZGluZzogMDsKfQpbZGF0YS1kYXBwLWtpdF06d2hlcmUoaDEsIGgyLCBoMywgaDQsIGg1LCBoNiksIFtkYXRhLWRhcHAta2l0XSA6d2hlcmUoaDEsIGgyLCBoMywgaDQsIGg1LCBoNikgewogIGZvbnQtc2l6ZTogaW5oZXJpdDsKICBmb250LXdlaWdodDogaW5oZXJpdDsKICBtYXJnaW46IDA7Cn0="],
-  "sourcesContent": ["[data-dapp-kit]:where(*), [data-dapp-kit] :where(*) {\n  box-sizing: border-box;\n}\n[data-dapp-kit]:where(button), [data-dapp-kit] :where(button) {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: transparent;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  outline: none;\n  color: inherit;\n  border: 0;\n  padding: 0;\n  margin: 0;\n}\n[data-dapp-kit]:where(a), [data-dapp-kit] :where(a) {\n  text-decoration: none;\n  color: inherit;\n  outline: none;\n}\n[data-dapp-kit]:where(ol, ul), [data-dapp-kit] :where(ol, ul) {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n[data-dapp-kit]:where(h1, h2, h3, h4, h5, h6), [data-dapp-kit] :where(h1, h2, h3, h4, h5, h6) {\n  font-size: inherit;\n  font-weight: inherit;\n  margin: 0;\n}"],
-  "mappings": ";AAAA;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;",
+  "sources": ["vanilla-extract-css-ns:src/components/styling/StyleMarker.css.ts.vanilla.css?source=#H4sIAAAAAAAAA41SPW/CMBDd+RUeocJSv4d0r7ozdEAdjtgkFo4dOZdCWvW/9+wEMAQjhpPie+/5ne9lKQCBC6hrvlH4lW1L6eT0bjZny1OEHSD2O2FsZXe8UT/KFBl9OyEdp9YbIbnV1mXsG9yUH+Q8dBviiG7mWWtrkK+hUrobcbGrbeGgLjvuae+BdVSRrRxpPPIpVVFiw411FehIgJ0eK85cFp501GzDXbfaaGUkLy9LIh9P+wisXiURaW9NDXnY4xVhYC56Imn/JsuLua1aRGvS4Q14SJAwCQ5MTqsx1kg/0QryTeFsawQfYkRi0IBOGjwLQBm6UuEozKh/spa4f/bwCBpso07/d2Xs3h9qECJIwqkCVygTDqmNQHoZ0O8B5Q65kLl1gMqa4zLGo9gW/ZP2lJSn1XPW6rTxgAd3rZrDD7o3jp51+uKUYfkwZ+Uj1RPVM9UL1Wt6gAQ/DHQl4e04yTiBf3Q5P8VLBAAA"],
+  "sourcesContent": ["[data-dapp-kit]:where(*), [data-dapp-kit] :where(*) {\n  box-sizing: border-box;\n  color: var(--dapp-kit-colors-body);\n  font-family: var(--dapp-kit-typography-fontFamily);\n  font-size: var(--dapp-kit-fontWeights-normal);\n  font-style: var(--dapp-kit-typography-fontStyle);\n  font-weight: var(--dapp-kit-fontWeights-normal);\n  line-height: var(--dapp-kit-typography-lineHeight);\n  letter-spacing: var(--dapp-kit-typography-letterSpacing);\n}\n[data-dapp-kit]:where(button), [data-dapp-kit] :where(button) {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: transparent;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  border: 0;\n  padding: 0;\n  margin: 0;\n}\n[data-dapp-kit]:where(a), [data-dapp-kit] :where(a) {\n  text-decoration: none;\n  color: inherit;\n  outline: none;\n}\n[data-dapp-kit]:where(ol, ul), [data-dapp-kit] :where(ol, ul) {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n[data-dapp-kit]:where(h1, h2, h3, h4, h5, h6), [data-dapp-kit] :where(h1, h2, h3, h4, h5, h6) {\n  font-size: inherit;\n  font-weight: inherit;\n  margin: 0;\n}"],
+  "mappings": ";AAAA;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;",
   "names": []
 }

package/dist/cjs/components/ui/Button.css

@@ -0,0 +1,36 @@
+/* vanilla-extract-css-ns:src/components/ui/Button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62Tz1LCMBDG7zxFjnIIQxEdptz04hPosbNtQruSJjFJodXx3U1aOoAVhNFL0/n2z+/bbTN5qJxTMknb4xkMgnQ2SerILqK3KfkYEcLQagFNTFAKlJyuBK+XXgeBuaToeGljknHpuAnya2UdrhqaKa9IdxhaeYluOeaFlzdgbihloDVdo6Mh9tKGLC05w6ocL0efo8l5g7E3B6ngrHWqNGTovNPp5O5M8aZ7SbTBEkzTN4vaHilk69yoSjI/gVBmYHSf8Bjilu7adKxxmPPnwuxUeqpqagtgajuo6eRh0dWzxYXacPMfEz6FRpdYUJUL/0tvYdbBlWHc0C0yV8Qk0vVyL1rXCB4TqwSyA/mEyTa4M7hDXfoJvqdfPcqftnlE/3WbFt95UrIefXu4RQP+ntgBMci4v0SEaGAMZR6Tha5JdB+Wfp4n8p43v5gnwOT8GBdQZDb3Dw/8AmeLhNtrBAAA */
+.Button_buttonVariants__x1s81q0 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--dapp-kit-fontWeights-medium);
+}
+.Button_buttonVariants__x1s81q0:disabled {
+  opacity: 0.5;
+}
+.Button_buttonVariants_variant_primary__x1s81q1 {
+  background-color: var(--dapp-kit-backgroundColors-primaryButton);
+  color: var(--dapp-kit-colors-primaryButton);
+  box-shadow: var(--dapp-kit-shadows-primaryButton);
+}
+.Button_buttonVariants_variant_primary__x1s81q1:hover {
+  background-color: var(--dapp-kit-backgroundColors-primaryButtonHover);
+}
+.Button_buttonVariants_variant_outline__x1s81q2 {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--dapp-kit-borderColors-outlineButton);
+  color: var(--dapp-kit-colors-outlineButton);
+}
+.Button_buttonVariants_variant_outline__x1s81q2:hover {
+  background-color: var(--dapp-kit-backgroundColors-outlineButtonHover);
+}
+.Button_buttonVariants_size_md__x1s81q3 {
+  border-radius: var(--dapp-kit-radii-medium);
+  padding: 8px 16px;
+}
+.Button_buttonVariants_size_lg__x1s81q4 {
+  border-radius: var(--dapp-kit-radii-large);
+  padding: 16px 24px;
+}
+/*# sourceMappingURL=Button.css.map */

package/dist/cjs/components/ui/Button.css.css

@@ -0,0 +1,36 @@
+/* vanilla-extract-css-ns:src/components/ui/Button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62Tz1LCMBDG7zxFjnIIQxEdptz04hPosbNtQruSJjFJodXx3U1aOoAVhNFL0/n2z+/bbTN5qJxTMknb4xkMgnQ2SerILqK3KfkYEcLQagFNTFAKlJyuBK+XXgeBuaToeGljknHpuAnya2UdrhqaKa9IdxhaeYluOeaFlzdgbihloDVdo6Mh9tKGLC05w6ocL0efo8l5g7E3B6ngrHWqNGTovNPp5O5M8aZ7SbTBEkzTN4vaHilk69yoSjI/gVBmYHSf8Bjilu7adKxxmPPnwuxUeqpqagtgajuo6eRh0dWzxYXacPMfEz6FRpdYUJUL/0tvYdbBlWHc0C0yV8Qk0vVyL1rXCB4TqwSyA/mEyTa4M7hDXfoJvqdfPcqftnlE/3WbFt95UrIefXu4RQP+ntgBMci4v0SEaGAMZR6Tha5JdB+Wfp4n8p43v5gnwOT8GBdQZDb3Dw/8AmeLhNtrBAAA */
+.Button_buttonVariants__x1s81q0 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--dapp-kit-fontWeights-medium);
+}
+.Button_buttonVariants__x1s81q0:disabled {
+  opacity: 0.5;
+}
+.Button_buttonVariants_variant_primary__x1s81q1 {
+  background-color: var(--dapp-kit-backgroundColors-primaryButton);
+  color: var(--dapp-kit-colors-primaryButton);
+  box-shadow: var(--dapp-kit-shadows-primaryButton);
+}
+.Button_buttonVariants_variant_primary__x1s81q1:hover {
+  background-color: var(--dapp-kit-backgroundColors-primaryButtonHover);
+}
+.Button_buttonVariants_variant_outline__x1s81q2 {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--dapp-kit-borderColors-outlineButton);
+  color: var(--dapp-kit-colors-outlineButton);
+}
+.Button_buttonVariants_variant_outline__x1s81q2:hover {
+  background-color: var(--dapp-kit-backgroundColors-outlineButtonHover);
+}
+.Button_buttonVariants_size_md__x1s81q3 {
+  border-radius: var(--dapp-kit-radii-medium);
+  padding: 8px 16px;
+}
+.Button_buttonVariants_size_lg__x1s81q4 {
+  border-radius: var(--dapp-kit-radii-large);
+  padding: 16px 24px;
+}
+/*# sourceMappingURL=Button.css.css.map */

package/dist/cjs/components/ui/Button.css.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["vanilla-extract-css-ns:src/components/ui/Button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62Tz1LCMBDG7zxFjnIIQxEdptz04hPosbNtQruSJjFJodXx3U1aOoAVhNFL0/n2z+/bbTN5qJxTMknb4xkMgnQ2SerILqK3KfkYEcLQagFNTFAKlJyuBK+XXgeBuaToeGljknHpuAnya2UdrhqaKa9IdxhaeYluOeaFlzdgbihloDVdo6Mh9tKGLC05w6ocL0efo8l5g7E3B6ngrHWqNGTovNPp5O5M8aZ7SbTBEkzTN4vaHilk69yoSjI/gVBmYHSf8Bjilu7adKxxmPPnwuxUeqpqagtgajuo6eRh0dWzxYXacPMfEz6FRpdYUJUL/0tvYdbBlWHc0C0yV8Qk0vVyL1rXCB4TqwSyA/mEyTa4M7hDXfoJvqdfPcqftnlE/3WbFt95UrIefXu4RQP+ntgBMci4v0SEaGAMZR6Tha5JdB+Wfp4n8p43v5gnwOT8GBdQZDb3Dw/8AmeLhNtrBAAA"],
+  "sourcesContent": [".Button_buttonVariants__x1s81q0 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: var(--dapp-kit-fontWeights-medium);\n}\n.Button_buttonVariants__x1s81q0:disabled {\n  opacity: 0.5;\n}\n.Button_buttonVariants_variant_primary__x1s81q1 {\n  background-color: var(--dapp-kit-backgroundColors-primaryButton);\n  color: var(--dapp-kit-colors-primaryButton);\n  box-shadow: var(--dapp-kit-shadows-primaryButton);\n}\n.Button_buttonVariants_variant_primary__x1s81q1:hover {\n  background-color: var(--dapp-kit-backgroundColors-primaryButtonHover);\n}\n.Button_buttonVariants_variant_outline__x1s81q2 {\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--dapp-kit-borderColors-outlineButton);\n  color: var(--dapp-kit-colors-outlineButton);\n}\n.Button_buttonVariants_variant_outline__x1s81q2:hover {\n  background-color: var(--dapp-kit-backgroundColors-outlineButtonHover);\n}\n.Button_buttonVariants_size_md__x1s81q3 {\n  border-radius: var(--dapp-kit-radii-medium);\n  padding: 8px 16px;\n}\n.Button_buttonVariants_size_lg__x1s81q4 {\n  border-radius: var(--dapp-kit-radii-large);\n  padding: 16px 24px ;\n}"],
+  "mappings": ";AAAA;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;",
+  "names": []
+}

package/dist/cjs/components/ui/Button.css.d.ts

@@ -0,0 +1,33 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const buttonVariants: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        primary: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        outline: {
+            borderWidth: number;
+            borderStyle: "solid";
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    };
+    size: {
+        md: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            padding: "8px 16px";
+        };
+        lg: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            padding: "16px 24px ";
+        };
+    };
+}>;
+export type ButtonVariants = RecipeVariants<typeof buttonVariants>;

package/dist/cjs/components/ui/Button.css.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ui/Button.css.ts
+var Button_css_exports = {};
+__export(Button_css_exports, {
+  buttonVariants: () => buttonVariants
+});
+module.exports = __toCommonJS(Button_css_exports);
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var buttonVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Button_buttonVariants__x1s81q0", variantClassNames: { variant: { primary: "Button_buttonVariants_variant_primary__x1s81q1", outline: "Button_buttonVariants_variant_outline__x1s81q2" }, size: { md: "Button_buttonVariants_size_md__x1s81q3", lg: "Button_buttonVariants_size_lg__x1s81q4" } }, defaultVariants: { variant: "primary", size: "md" }, compoundVariants: [] });
+//# sourceMappingURL=Button.css.js.map

package/dist/cjs/components/ui/Button.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/Button.css.ts"],
+  "sourcesContent": ["import 'src/components/ui/Button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62Tz1LCMBDG7zxFjnIIQxEdptz04hPosbNtQruSJjFJodXx3U1aOoAVhNFL0/n2z+/bbTN5qJxTMknb4xkMgnQ2SerILqK3KfkYEcLQagFNTFAKlJyuBK+XXgeBuaToeGljknHpuAnya2UdrhqaKa9IdxhaeYluOeaFlzdgbihloDVdo6Mh9tKGLC05w6ocL0efo8l5g7E3B6ngrHWqNGTovNPp5O5M8aZ7SbTBEkzTN4vaHilk69yoSjI/gVBmYHSf8Bjilu7adKxxmPPnwuxUeqpqagtgajuo6eRh0dWzxYXacPMfEz6FRpdYUJUL/0tvYdbBlWHc0C0yV8Qk0vVyL1rXCB4TqwSyA/mEyTa4M7hDXfoJvqdfPcqftnlE/3WbFt95UrIefXu4RQP+ntgBMci4v0SEaGAMZR6Tha5JdB+Wfp4n8p43v5gnwOT8GBdQZDb3Dw/8AmeLhNtrBAAA';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var buttonVariants = _7a468({defaultClassName:'Button_buttonVariants__x1s81q0',variantClassNames:{variant:{primary:'Button_buttonVariants_variant_primary__x1s81q1',outline:'Button_buttonVariants_variant_outline__x1s81q2'},size:{md:'Button_buttonVariants_size_md__x1s81q3',lg:'Button_buttonVariants_size_lg__x1s81q4'}},defaultVariants:{variant:'primary',size:'md'},compoundVariants:[]});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAA0C;AACnC,IAAI,qBAAiB,uBAAAA,iBAAO,EAAC,kBAAiB,kCAAiC,mBAAkB,EAAC,SAAQ,EAAC,SAAQ,kDAAiD,SAAQ,iDAAgD,GAAE,MAAK,EAAC,IAAG,0CAAyC,IAAG,yCAAwC,EAAC,GAAE,iBAAgB,EAAC,SAAQ,WAAU,MAAK,KAAI,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "names": ["_7a468"]
+}

package/dist/cjs/components/ui/Button.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["vanilla-extract-css-ns:src/components/ui/Button.css.ts.vanilla.css?source=#H4sIAAAAAAAAA62Tz1LCMBDG7zxFjnIIQxEdptz04hPosbNtQruSJjFJodXx3U1aOoAVhNFL0/n2z+/bbTN5qJxTMknb4xkMgnQ2SerILqK3KfkYEcLQagFNTFAKlJyuBK+XXgeBuaToeGljknHpuAnya2UdrhqaKa9IdxhaeYluOeaFlzdgbihloDVdo6Mh9tKGLC05w6ocL0efo8l5g7E3B6ngrHWqNGTovNPp5O5M8aZ7SbTBEkzTN4vaHilk69yoSjI/gVBmYHSf8Bjilu7adKxxmPPnwuxUeqpqagtgajuo6eRh0dWzxYXacPMfEz6FRpdYUJUL/0tvYdbBlWHc0C0yV8Qk0vVyL1rXCB4TqwSyA/mEyTa4M7hDXfoJvqdfPcqftnlE/3WbFt95UrIefXu4RQP+ntgBMci4v0SEaGAMZR6Tha5JdB+Wfp4n8p43v5gnwOT8GBdQZDb3Dw/8AmeLhNtrBAAA"],
+  "sourcesContent": [".Button_buttonVariants__x1s81q0 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: var(--dapp-kit-fontWeights-medium);\n}\n.Button_buttonVariants__x1s81q0:disabled {\n  opacity: 0.5;\n}\n.Button_buttonVariants_variant_primary__x1s81q1 {\n  background-color: var(--dapp-kit-backgroundColors-primaryButton);\n  color: var(--dapp-kit-colors-primaryButton);\n  box-shadow: var(--dapp-kit-shadows-primaryButton);\n}\n.Button_buttonVariants_variant_primary__x1s81q1:hover {\n  background-color: var(--dapp-kit-backgroundColors-primaryButtonHover);\n}\n.Button_buttonVariants_variant_outline__x1s81q2 {\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--dapp-kit-borderColors-outlineButton);\n  color: var(--dapp-kit-colors-outlineButton);\n}\n.Button_buttonVariants_variant_outline__x1s81q2:hover {\n  background-color: var(--dapp-kit-backgroundColors-outlineButtonHover);\n}\n.Button_buttonVariants_size_md__x1s81q3 {\n  border-radius: var(--dapp-kit-radii-medium);\n  padding: 8px 16px;\n}\n.Button_buttonVariants_size_lg__x1s81q4 {\n  border-radius: var(--dapp-kit-radii-large);\n  padding: 16px 24px ;\n}"],
+  "mappings": ";AAAA;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;",
+  "names": []
+}

package/dist/cjs/components/ui/Button.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes } from 'react';
+declare const Button: import("react").ForwardRefExoticComponent<{
+    asChild?: boolean | undefined;
+} & ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "outline" | "primary" | undefined;
+    size?: "md" | "lg" | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/cjs/components/ui/Button.js

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ui/Button.tsx
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(Button_exports);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
+
+// src/components/ui/Button.css.ts
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var buttonVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Button_buttonVariants__x1s81q0", variantClassNames: { variant: { primary: "Button_buttonVariants_variant_primary__x1s81q1", outline: "Button_buttonVariants_variant_outline__x1s81q2" }, size: { md: "Button_buttonVariants_size_md__x1s81q3", lg: "Button_buttonVariants_size_lg__x1s81q4" } }, defaultVariants: { variant: "primary", size: "md" }, compoundVariants: [] });
+
+// src/components/ui/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(
+  ({ className, variant, size, asChild = false, ...props }, forwardedRef) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ...props,
+        className: (0, import_clsx.default)(buttonVariants({ variant, size }), className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+//# sourceMappingURL=Button.js.map