@burnt-labs/ui 0.1.0-alpha.10 → 0.1.0-alpha.12

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
 
-> @burnt-labs/ui@0.1.0-alpha.10 build /home/runner/work/xion.js/xion.js/packages/ui
+> @burnt-labs/ui@0.1.0-alpha.12 build /home/runner/work/xion.js/xion.js/packages/ui
 > tsup
 
-CLI Building entry: src/button.tsx, src/dialog.tsx, src/index.tsx, src/input.tsx, src/modal.tsx, src/pinInput.tsx, src/icons/accountWalletLogo.tsx, src/icons/browser.tsx, src/icons/chevronDown.tsx, src/icons/close.tsx, src/icons/email.tsx, src/icons/ethereumLogo.tsx, src/icons/keplr.tsx, src/icons/metamask.tsx, src/icons/passkey.tsx, src/icons/spinner.tsx
+CLI Building entry: src/button.tsx, src/dialog.tsx, src/index.tsx, src/input.tsx, src/modal.tsx, src/pinInput.tsx, src/popover.tsx, src/icons/accountWalletLogo.tsx, src/icons/browser.tsx, src/icons/chevronDown.tsx, src/icons/close.tsx, src/icons/email.tsx, src/icons/ethereumLogo.tsx, src/icons/keplr.tsx, src/icons/metamask.tsx, src/icons/passkey.tsx, src/icons/spinner.tsx
 CLI Using tsconfig: tsconfig.json
 CLI tsup v6.7.0
 CLI Using tsup config: /home/runner/work/xion.js/xion.js/packages/ui/tsup.config.ts
@@ -12,25 +12,26 @@
 CJS Build start
 DTS Build start
 CJS dist/AkkuratLLWeb-Thin-HVY6MUDE.woff2        112.96 KB
+CJS dist/icons/spinner.js                        231.00 B
+CJS dist/AkkuratLLWeb-Thin-B3VOUNQC.woff         161.92 KB
 CJS dist/AkkuratLLWeb-ThinItalic-TLRSU3GY.woff2  112.27 KB
-CJS dist/AkkuratLLWeb-ThinItalic-VHHG6JUR.woff   160.44 KB
 CJS dist/AkkuratLLWeb-Light-EHI2GDZ3.woff2       107.88 KB
-CJS dist/AkkuratLLWeb-Light-BGKFIWYH.woff        155.01 KB
+CJS dist/AkkuratLLWeb-ThinItalic-VHHG6JUR.woff   160.44 KB
 CJS dist/AkkuratLLWeb-LightItalic-GEL2FLE3.woff2 105.68 KB
-CJS dist/AkkuratLLWeb-LightItalic-FXIWIHPX.woff  151.81 KB
+CJS dist/AkkuratLLWeb-Light-BGKFIWYH.woff        155.01 KB
 CJS dist/AkkuratLLWeb-Regular-Y25WHQIH.woff2     107.39 KB
+CJS dist/AkkuratLLWeb-LightItalic-FXIWIHPX.woff  151.81 KB
 CJS dist/AkkuratLLWeb-Regular-M4AOR5FQ.woff      152.99 KB
-CJS dist/AkkuratLLWeb-Italic-3OFHOG35.woff2      106.87 KB
 CJS dist/AkkuratLLWeb-Italic-TXVXRVFQ.woff       153.06 KB
 CJS dist/AkkuratLLWeb-Bold-KUOGWC36.woff2        110.63 KB
+CJS dist/AkkuratLLWeb-Italic-3OFHOG35.woff2      106.87 KB
 CJS dist/AkkuratLLWeb-Bold-AXCMLMSS.woff         157.63 KB
 CJS dist/AkkuratLLWeb-BoldItalic-FGK4XHSY.woff2  110.59 KB
-CJS dist/AkkuratLLWeb-BoldItalic-QKG5TZJY.woff   157.86 KB
-CJS dist/AkkuratLLWeb-Black-HD4CTN3S.woff2       112.19 KB
 CJS dist/AkkuratLLWeb-Black-22NQUHG5.woff        159.99 KB
-CJS dist/AkkuratLLWeb-BlackItalic-LV4PULUE.woff2 102.86 KB
 CJS dist/AkkuratLLWeb-BlackItalic-LRO3TGMB.woff  142.28 KB
+CJS dist/index.css                               184.20 KB
 CJS dist/chunk-PKUHTIDK.js                       1.37 KB
+CJS dist/icons/browser.js                        272.00 B
 CJS dist/icons/chevronDown.js                    239.00 B
 CJS dist/icons/close.js                          268.00 B
 CJS dist/icons/email.js                          268.00 B
@@ -38,10 +39,11 @@
 CJS dist/icons/keplr.js                          235.00 B
 CJS dist/icons/metamask.js                       241.00 B
 CJS dist/icons/passkey.js                        272.00 B
-CJS dist/icons/spinner.js                        231.00 B
-CJS dist/button.js                               227.00 B
+CJS dist/AkkuratLLWeb-BoldItalic-QKG5TZJY.woff   157.86 KB
 CJS dist/dialog.js                               1.44 KB
-CJS dist/index.js                                4.34 KB
+CJS dist/index.js                                4.79 KB
+CJS dist/chunk-CRNDRPTL.js                       1015.00 B
+CJS dist/chunk-AEW7GOE6.js                       1.88 KB
 CJS dist/chunk-RDYVRQBK.js                       741.00 B
 CJS dist/chunk-FNTBL45H.js                       704.00 B
 CJS dist/chunk-PNDEO36E.js                       779.00 B
@@ -49,52 +51,59 @@
 CJS dist/chunk-NHBX6Q3P.js                       4.64 KB
 CJS dist/chunk-YHUCPUS3.js                       4.35 KB
 CJS dist/chunk-7UK6EE2I.js                       13.91 KB
-CJS dist/chunk-CRNDRPTL.js                       1015.00 B
-CJS dist/chunk-UNPP7H5Q.js                       1.88 KB
-CJS dist/chunk-AODSKYMI.js                       5.34 KB
+CJS dist/chunk-PQ4RAOPA.js                       2.02 KB
+CJS dist/chunk-BO3GGGHL.js                       5.44 KB
 CJS dist/input.js                                225.00 B
-CJS dist/chunk-5KA4BYO5.js                       1.67 KB
+CJS dist/chunk-RIB2OC5P.js                       1.98 KB
 CJS dist/modal.js                                653.00 B
-CJS dist/chunk-42VYSY7W.js                       2.71 KB
+CJS dist/chunk-TJTFUJK4.js                       2.71 KB
+CJS dist/chunk-74MKQUE2.js                       68.21 KB
 CJS dist/pinInput.js                             231.00 B
 CJS dist/chunk-KOR2D6S4.js                       2.47 KB
-CJS dist/chunk-AEW7GOE6.js                       1.88 KB
-CJS dist/chunk-74MKQUE2.js                       68.21 KB
-CJS dist/AkkuratLLWeb-Thin-B3VOUNQC.woff         161.92 KB
-CJS dist/index.css                               183.61 KB
-CJS dist/icons/browser.js                        272.00 B
-CJS dist/chunk-NINTZKIZ.js                       1.21 KB
+CJS dist/popover.js                              505.00 B
+CJS dist/chunk-KVSERZUE.js                       2.07 KB
 CJS dist/icons/accountWalletLogo.js              251.00 B
-CJS ⚡️ Build success in 3038ms
+CJS dist/chunk-NINTZKIZ.js                       1.21 KB
+CJS dist/button.js                               227.00 B
+CJS dist/AkkuratLLWeb-BlackItalic-LV4PULUE.woff2 102.86 KB
+CJS dist/AkkuratLLWeb-Black-HD4CTN3S.woff2       112.19 KB
+CJS ⚡️ Build success in 3125ms
 ESM dist/AkkuratLLWeb-Thin-HVY6MUDE.woff2        112.96 KB
-ESM dist/icons/chevronDown.mjs                   85.00 B
 ESM dist/AkkuratLLWeb-Thin-B3VOUNQC.woff         161.92 KB
 ESM dist/AkkuratLLWeb-ThinItalic-TLRSU3GY.woff2  112.27 KB
 ESM dist/AkkuratLLWeb-ThinItalic-VHHG6JUR.woff   160.44 KB
 ESM dist/AkkuratLLWeb-Light-EHI2GDZ3.woff2       107.88 KB
+ESM dist/AkkuratLLWeb-Light-BGKFIWYH.woff        155.01 KB
 ESM dist/AkkuratLLWeb-LightItalic-GEL2FLE3.woff2 105.68 KB
 ESM dist/AkkuratLLWeb-LightItalic-FXIWIHPX.woff  151.81 KB
-ESM dist/AkkuratLLWeb-Light-BGKFIWYH.woff        155.01 KB
 ESM dist/AkkuratLLWeb-Regular-Y25WHQIH.woff2     107.39 KB
 ESM dist/AkkuratLLWeb-Regular-M4AOR5FQ.woff      152.99 KB
+ESM dist/AkkuratLLWeb-Italic-3OFHOG35.woff2      106.87 KB
 ESM dist/AkkuratLLWeb-Italic-TXVXRVFQ.woff       153.06 KB
+ESM dist/AkkuratLLWeb-Bold-KUOGWC36.woff2        110.63 KB
+ESM dist/AkkuratLLWeb-Bold-AXCMLMSS.woff         157.63 KB
 ESM dist/AkkuratLLWeb-BoldItalic-FGK4XHSY.woff2  110.59 KB
-ESM dist/AkkuratLLWeb-BoldItalic-QKG5TZJY.woff   157.86 KB
 ESM dist/AkkuratLLWeb-Black-HD4CTN3S.woff2       112.19 KB
+ESM dist/AkkuratLLWeb-BoldItalic-QKG5TZJY.woff   157.86 KB
 ESM dist/AkkuratLLWeb-Black-22NQUHG5.woff        159.99 KB
-ESM dist/AkkuratLLWeb-Bold-KUOGWC36.woff2        110.63 KB
-ESM dist/AkkuratLLWeb-Bold-AXCMLMSS.woff         157.63 KB
+ESM dist/AkkuratLLWeb-BlackItalic-LV4PULUE.woff2 102.86 KB
+ESM dist/AkkuratLLWeb-BlackItalic-LRO3TGMB.woff  142.28 KB
+ESM dist/index.css                               184.20 KB
 ESM dist/chunk-3TCQU24P.mjs                      1.30 KB
+ESM dist/icons/spinner.mjs                       81.00 B
+ESM dist/icons/browser.mjs                       117.00 B
+ESM dist/icons/chevronDown.mjs                   85.00 B
 ESM dist/icons/close.mjs                         115.00 B
 ESM dist/icons/email.mjs                         115.00 B
 ESM dist/icons/ethereumLogo.mjs                  118.00 B
 ESM dist/icons/keplr.mjs                         83.00 B
 ESM dist/icons/metamask.mjs                      86.00 B
 ESM dist/icons/passkey.mjs                       117.00 B
-ESM dist/icons/spinner.mjs                       81.00 B
 ESM dist/button.mjs                              78.00 B
 ESM dist/dialog.mjs                              241.00 B
-ESM dist/index.mjs                               986.00 B
+ESM dist/index.mjs                               1.04 KB
+ESM dist/chunk-OXW4BQPJ.mjs                      954.00 B
+ESM dist/chunk-Y3OSOP6I.mjs                      1.75 KB
 ESM dist/chunk-HZWJQRFF.mjs                      687.00 B
 ESM dist/chunk-SYOTT65J.mjs                      618.00 B
 ESM dist/chunk-IR4FC2P3.mjs                      698.00 B
@@ -102,32 +111,28 @@
 ESM dist/chunk-KZ3C2OHV.mjs                      4.38 KB
 ESM dist/chunk-BTRAYQSX.mjs                      4.18 KB
 ESM dist/chunk-ERKL3SY4.mjs                      13.56 KB
-ESM dist/chunk-OXW4BQPJ.mjs                      954.00 B
-ESM dist/chunk-RRNLHIXE.mjs                      1.82 KB
-ESM dist/chunk-DUBSDTTD.mjs                      3.98 KB
+ESM dist/chunk-HCWJO67P.mjs                      1.96 KB
+ESM dist/chunk-TM5VKEWC.mjs                      4.07 KB
 ESM dist/input.mjs                               77.00 B
-ESM dist/chunk-C2KDWV5Z.mjs                      1.58 KB
-ESM dist/modal.mjs                               147.00 B
-ESM dist/chunk-OVQCCXBH.mjs                      2.32 KB
+ESM dist/chunk-JQRAYL7A.mjs                      1.89 KB
 ESM dist/pinInput.mjs                            80.00 B
 ESM dist/chunk-VSTH5YAB.mjs                      2.43 KB
+ESM dist/popover.mjs                             111.00 B
+ESM dist/chunk-DUSUIS3M.mjs                      1.30 KB
 ESM dist/icons/accountWalletLogo.mjs             91.00 B
 ESM dist/chunk-ESZY3JBH.mjs                      1.15 KB
-ESM dist/icons/browser.mjs                       117.00 B
-ESM dist/chunk-Y3OSOP6I.mjs                      1.75 KB
 ESM dist/chunk-FLJKIDRT.mjs                      68.18 KB
-ESM dist/AkkuratLLWeb-BlackItalic-LV4PULUE.woff2 102.86 KB
-ESM dist/AkkuratLLWeb-BlackItalic-LRO3TGMB.woff  142.28 KB
-ESM dist/index.css                               183.61 KB
-ESM dist/AkkuratLLWeb-Italic-3OFHOG35.woff2      106.87 KB
-ESM ⚡️ Build success in 3040ms
-DTS ⚡️ Build success in 4546ms
-DTS dist/index.d.ts                   967.00 B
-DTS dist/button.d.ts                  366.00 B
+ESM dist/chunk-E5I7SWUP.mjs                      2.32 KB
+ESM dist/modal.mjs                               147.00 B
+ESM ⚡️ Build success in 3133ms
+DTS ⚡️ Build success in 4805ms
+DTS dist/index.d.ts                   1.05 KB
+DTS dist/button.d.ts                  390.00 B
 DTS dist/dialog.d.ts                  1.81 KB
-DTS dist/input.d.ts                   444.00 B
+DTS dist/input.d.ts                   559.00 B
 DTS dist/modal.d.ts                   763.00 B
 DTS dist/pinInput.d.ts                303.00 B
+DTS dist/popover.d.ts                 543.00 B
 DTS dist/icons/accountWalletLogo.d.ts 158.00 B
 DTS dist/icons/browser.d.ts           200.00 B
 DTS dist/icons/chevronDown.d.ts       191.00 B

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @burnt-labs/ui
 
+## 0.1.0-alpha.12
+
+### Minor Changes
+
+- [#176](https://github.com/burnt-labs/xion.js/pull/176) [`a80ed9c`](https://github.com/burnt-labs/xion.js/commit/a80ed9c32f0c5c91a8ec7aacfba5bddddfc43f84) Thanks [@BurntNerve](https://github.com/BurntNerve)! - Added UI Fixes and new button style
+
+## 0.1.0-alpha.11
+
+### Minor Changes
+
+- [#165](https://github.com/burnt-labs/xion.js/pull/165) [`e53a5bd`](https://github.com/burnt-labs/xion.js/commit/e53a5bd382481001f1968d3314c858de0fe2b5ea) Thanks [@BurntNerve](https://github.com/BurntNerve)! - Added prop for more direct access to input styles
+
+- [#167](https://github.com/burnt-labs/xion.js/pull/167) [`1cddf5b`](https://github.com/burnt-labs/xion.js/commit/1cddf5bd9c91393b93e177d8f625ab00d3d284c5) Thanks [@BurntNerve](https://github.com/BurntNerve)! - Added mobile UI fixes for dashboard
+
 ## 0.1.0-alpha.10
 
 ### Minor Changes

package/dist/button.d.ts

@@ -2,7 +2,7 @@ import React__default from 'react';
 
 interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     fullWidth?: boolean;
-    structure?: "base" | "outlined" | "naked" | "destructive";
+    structure?: "base" | "outlined" | "naked" | "destructive" | "destructive-outline";
     disabled?: boolean;
     onClick?: (e: React__default.MouseEvent) => void;
 }

package/dist/button.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkUNPP7H5Q_js = require('./chunk-UNPP7H5Q.js');
+var chunkPQ4RAOPA_js = require('./chunk-PQ4RAOPA.js');
 require('./chunk-PKUHTIDK.js');
 
 
 
 Object.defineProperty(exports, 'Button', {
   enumerable: true,
-  get: function () { return chunkUNPP7H5Q_js.Button; }
+  get: function () { return chunkPQ4RAOPA_js.Button; }
 });

package/dist/button.mjs

@@ -1,2 +1,2 @@
-export { Button } from './chunk-RRNLHIXE.mjs';
+export { Button } from './chunk-HCWJO67P.mjs';
 import './chunk-3TCQU24P.mjs';

package/dist/{chunk-AODSKYMI.js → chunk-BO3GGGHL.js}

@@ -54,7 +54,7 @@ var DialogContent = React__namespace.forwardRef((_a, ref) => {
       DialogPrimitive__namespace.Content,
       chunkPKUHTIDK_js.__spreadProps(chunkPKUHTIDK_js.__spreadValues({
         className: chunk74MKQUE2_js.cn(
-          "sm:ui-bg-black/20 sm:ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-6 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
+          "sm:ui-bg-black/20 !ui-flex ui-justify-center ui-flex-col sm:ui-block sm:ui-flex-none ui-h-screen sm:ui-h-auto sm:ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-10 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
           className
         ),
         ref

package/dist/chunk-DUSUIS3M.mjs

@@ -0,0 +1,28 @@
+import { __objRest, __spreadProps, __spreadValues } from './chunk-3TCQU24P.mjs';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React.forwardRef((_a, forwardedRef) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    PopoverPrimitive.Content,
+    __spreadProps(__spreadValues({
+      className: `${className} ui-rounded ui-text-white ui-p-2 ui-bg-[#434040] ui-data-[state=open]:ui-data-[side=top]:ui-animate-slideDownAndFade ui-data-[state=open]:ui-data-[side=right]:ui-animate-slideLeftAndFade ui-data-[state=open]:ui-data-[side=bottom]:ui-animate-slideUpAndFade ui-data-[state=open]:ui-data-[side=left]:ui-animate-slideRightAndFade
+      `,
+      ref: forwardedRef,
+      side: "top",
+      sideOffset: 10
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "ui-fill-[#434040]" })
+      ]
+    })
+  ) });
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/{chunk-OVQCCXBH.mjs → chunk-E5I7SWUP.mjs}

@@ -36,7 +36,7 @@ function Modal(_a) {
     "div",
     __spreadProps(__spreadValues({
       className: cn(
-        "ui-relative ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
+        "ui-relative ui-h-full ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
         className
       )
     }, props), {
@@ -77,7 +77,7 @@ function ModalSection(_a) {
     "div",
     __spreadProps(__spreadValues({
       className: cn(
-        "ui-inline-flex ui-w-full ui-h-full sm:ui-p-10 ui-flex-col ui-items-start ui-justify-between ui-gap-8",
+        "ui-inline-flex ui-w-full ui-h-full ui-flex-col ui-items-start ui-justify-between ui-gap-8",
         className
       )
     }, props), {

package/dist/{chunk-RRNLHIXE.mjs → chunk-HCWJO67P.mjs}

@@ -37,6 +37,8 @@ var Button = (_a) => {
         return "ui-border-none ui-bg-transparent ui-text-white ui-underline ui-font-normal";
       case "destructive":
         return "ui-bg-red-500 ui-text-white hover:ui-bg-red-400";
+      case "destructive-outline":
+        return "ui-border ui-border-red-500 ui-bg-transparent ui-text-red-500 hover:ui-bg-red-500/5";
       default:
         return "ui-bg-white ui-text-black hover:ui-bg-neutral-100";
     }

package/dist/{chunk-C2KDWV5Z.mjs → chunk-JQRAYL7A.mjs}

@@ -6,15 +6,20 @@ function Input(_a) {
   var _b = _a, {
     className,
     placeholder,
+    baseInputClassName: baseInputClassName,
     value,
     error,
-    onBlur
+    onBlur,
+    onKeyDown
   } = _b, props = __objRest(_b, [
     "className",
     "placeholder",
+    // This should only be used for specific classes that can't override the base input styles.
+    "baseInputClassName",
     "value",
     "error",
-    "onBlur"
+    "onBlur",
+    "onKeyDown"
   ]);
   const [isInputFocused, setIsInputFocused] = useState(false);
   const handleFocus = () => {
@@ -38,9 +43,13 @@ function Input(_a) {
     /* @__PURE__ */ jsx(
       "input",
       __spreadProps(__spreadValues({}, props), {
-        className: `ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${error ? "ui-border-red-400" : ""} ui-bg-transparent ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`,
+        className: `${baseInputClassName || ""} ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${error ? "ui-border-red-400" : ""} ui-bg-transparent ui-font-akkuratLL ui-py-5 !ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`,
         onBlur: handleBlur,
         onFocus: handleFocus,
+        onKeyDown,
+        style: {
+          WebkitBorderRadius: "none"
+        },
         value
       })
     )

package/dist/chunk-KVSERZUE.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkPKUHTIDK_js = require('./chunk-PKUHTIDK.js');
+var React = require('react');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverContent = React__namespace.forwardRef((_a, forwardedRef) => {
+  var _b = _a, { className, children } = _b, props = chunkPKUHTIDK_js.__objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    PopoverPrimitive__namespace.Content,
+    chunkPKUHTIDK_js.__spreadProps(chunkPKUHTIDK_js.__spreadValues({
+      className: `${className} ui-rounded ui-text-white ui-p-2 ui-bg-[#434040] ui-data-[state=open]:ui-data-[side=top]:ui-animate-slideDownAndFade ui-data-[state=open]:ui-data-[side=right]:ui-animate-slideLeftAndFade ui-data-[state=open]:ui-data-[side=bottom]:ui-animate-slideUpAndFade ui-data-[state=open]:ui-data-[side=left]:ui-animate-slideRightAndFade
+      `,
+      ref: forwardedRef,
+      side: "top",
+      sideOffset: 10
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { className: "ui-fill-[#434040]" })
+      ]
+    })
+  ) });
+});
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
+
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;

package/dist/{chunk-UNPP7H5Q.js → chunk-PQ4RAOPA.js}

@@ -39,6 +39,8 @@ var Button = (_a) => {
         return "ui-border-none ui-bg-transparent ui-text-white ui-underline ui-font-normal";
       case "destructive":
         return "ui-bg-red-500 ui-text-white hover:ui-bg-red-400";
+      case "destructive-outline":
+        return "ui-border ui-border-red-500 ui-bg-transparent ui-text-red-500 hover:ui-bg-red-500/5";
       default:
         return "ui-bg-white ui-text-black hover:ui-bg-neutral-100";
     }

package/dist/{chunk-5KA4BYO5.js → chunk-RIB2OC5P.js}

@@ -8,15 +8,20 @@ function Input(_a) {
   var _b = _a, {
     className,
     placeholder,
+    baseInputClassName: baseInputClassName,
     value,
     error,
-    onBlur
+    onBlur,
+    onKeyDown
   } = _b, props = chunkPKUHTIDK_js.__objRest(_b, [
     "className",
     "placeholder",
+    // This should only be used for specific classes that can't override the base input styles.
+    "baseInputClassName",
     "value",
     "error",
-    "onBlur"
+    "onBlur",
+    "onKeyDown"
   ]);
   const [isInputFocused, setIsInputFocused] = react.useState(false);
   const handleFocus = () => {
@@ -40,9 +45,13 @@ function Input(_a) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       chunkPKUHTIDK_js.__spreadProps(chunkPKUHTIDK_js.__spreadValues({}, props), {
-        className: `ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${error ? "ui-border-red-400" : ""} ui-bg-transparent ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`,
+        className: `${baseInputClassName || ""} ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${error ? "ui-border-red-400" : ""} ui-bg-transparent ui-font-akkuratLL ui-py-5 !ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`,
         onBlur: handleBlur,
         onFocus: handleFocus,
+        onKeyDown,
+        style: {
+          WebkitBorderRadius: "none"
+        },
         value
       })
     )

package/dist/{chunk-42VYSY7W.js → chunk-TJTFUJK4.js}

@@ -38,7 +38,7 @@ function Modal(_a) {
     "div",
     chunkPKUHTIDK_js.__spreadProps(chunkPKUHTIDK_js.__spreadValues({
       className: chunk74MKQUE2_js.cn(
-        "ui-relative ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
+        "ui-relative ui-h-full ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
         className
       )
     }, props), {
@@ -79,7 +79,7 @@ function ModalSection(_a) {
     "div",
     chunkPKUHTIDK_js.__spreadProps(chunkPKUHTIDK_js.__spreadValues({
       className: chunk74MKQUE2_js.cn(
-        "ui-inline-flex ui-w-full ui-h-full sm:ui-p-10 ui-flex-col ui-items-start ui-justify-between ui-gap-8",
+        "ui-inline-flex ui-w-full ui-h-full ui-flex-col ui-items-start ui-justify-between ui-gap-8",
         className
       )
     }, props), {

package/dist/{chunk-DUBSDTTD.mjs → chunk-TM5VKEWC.mjs}

@@ -31,7 +31,7 @@ var DialogContent = React.forwardRef((_a, ref) => {
       DialogPrimitive.Content,
       __spreadProps(__spreadValues({
         className: cn(
-          "sm:ui-bg-black/20 sm:ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-6 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
+          "sm:ui-bg-black/20 !ui-flex ui-justify-center ui-flex-col sm:ui-block sm:ui-flex-none ui-h-screen sm:ui-h-auto sm:ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-10 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
           className
         ),
         ref

package/dist/dialog.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkAODSKYMI_js = require('./chunk-AODSKYMI.js');
+var chunkBO3GGGHL_js = require('./chunk-BO3GGGHL.js');
 require('./chunk-74MKQUE2.js');
 require('./chunk-PKUHTIDK.js');
 
@@ -8,41 +8,41 @@ require('./chunk-PKUHTIDK.js');
 
 Object.defineProperty(exports, 'Dialog', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.Dialog; }
+  get: function () { return chunkBO3GGGHL_js.Dialog; }
 });
 Object.defineProperty(exports, 'DialogClose', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogClose; }
+  get: function () { return chunkBO3GGGHL_js.DialogClose; }
 });
 Object.defineProperty(exports, 'DialogContent', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogContent; }
+  get: function () { return chunkBO3GGGHL_js.DialogContent; }
 });
 Object.defineProperty(exports, 'DialogDescription', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogDescription; }
+  get: function () { return chunkBO3GGGHL_js.DialogDescription; }
 });
 Object.defineProperty(exports, 'DialogFooter', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogFooter; }
+  get: function () { return chunkBO3GGGHL_js.DialogFooter; }
 });
 Object.defineProperty(exports, 'DialogHeader', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogHeader; }
+  get: function () { return chunkBO3GGGHL_js.DialogHeader; }
 });
 Object.defineProperty(exports, 'DialogOverlay', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogOverlay; }
+  get: function () { return chunkBO3GGGHL_js.DialogOverlay; }
 });
 Object.defineProperty(exports, 'DialogPortal', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogPortal; }
+  get: function () { return chunkBO3GGGHL_js.DialogPortal; }
 });
 Object.defineProperty(exports, 'DialogTitle', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogTitle; }
+  get: function () { return chunkBO3GGGHL_js.DialogTitle; }
 });
 Object.defineProperty(exports, 'DialogTrigger', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogTrigger; }
+  get: function () { return chunkBO3GGGHL_js.DialogTrigger; }
 });

package/dist/dialog.mjs

@@ -1,3 +1,3 @@
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-DUBSDTTD.mjs';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-TM5VKEWC.mjs';
 import './chunk-FLJKIDRT.mjs';
 import './chunk-3TCQU24P.mjs';

package/dist/index.css

@@ -394,6 +394,9 @@ input[type=number]::-webkit-outer-spin-button {
 .ui-block {
   display: block;
 }
+.\!ui-flex {
+  display: flex !important;
+}
 .ui-flex {
   display: flex;
 }
@@ -537,6 +540,10 @@ input[type=number]::-webkit-outer-spin-button {
 .ui-border-opacity-50 {
   --tw-border-opacity: 0.5;
 }
+.ui-bg-\[\#434040\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 64 64 / var(--tw-bg-opacity));
+}
 .ui-bg-black\/25 {
   background-color: rgb(0 0 0 / 0.25);
 }
@@ -575,15 +582,18 @@ input[type=number]::-webkit-outer-spin-button {
 .ui-bg-no-repeat {
   background-repeat: no-repeat;
 }
+.ui-fill-\[\#434040\] {
+  fill: #434040;
+}
+.ui-p-10 {
+  padding: 2.5rem;
+}
 .ui-p-2 {
   padding: 0.5rem;
 }
 .ui-p-4 {
   padding: 1rem;
 }
-.ui-p-6 {
-  padding: 1.5rem;
-}
 .ui-px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -596,6 +606,10 @@ input[type=number]::-webkit-outer-spin-button {
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
 }
+.ui-py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
 .ui-text-left {
   text-align: left;
 }
@@ -605,6 +619,10 @@ input[type=number]::-webkit-outer-spin-button {
 .ui-font-akkuratLL {
   font-family: Akkurat, sans-serif;
 }
+.\!ui-text-sm {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
 .ui-text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -658,6 +676,10 @@ input[type=number]::-webkit-outer-spin-button {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
+.ui-text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
 .ui-text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -799,6 +821,9 @@ input[type=number]::-webkit-outer-spin-button {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
+.hover\:ui-bg-red-500\/5:hover {
+  background-color: rgb(239 68 68 / 0.05);
+}
 .hover\:ui-bg-red-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -825,6 +850,15 @@ input[type=number]::-webkit-outer-spin-button {
   opacity: 0.5;
 }
 @media (min-width: 640px) {
+  .sm\:ui-block {
+    display: block;
+  }
+  .sm\:ui-h-auto {
+    height: auto;
+  }
+  .sm\:ui-flex-none {
+    flex: none;
+  }
   .sm\:ui-flex-row {
     flex-direction: row;
   }
@@ -842,9 +876,6 @@ input[type=number]::-webkit-outer-spin-button {
   .sm\:ui-bg-black\/20 {
     background-color: rgb(0 0 0 / 0.2);
   }
-  .sm\:ui-p-10 {
-    padding: 2.5rem;
-  }
   .sm\:ui-text-left {
     text-align: left;
   }

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { PinInput } from './pinInput.js';
 export { Button } from './button.js';
 export { Modal, ModalAnchor, ModalClose, ModalSection } from './modal.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './dialog.js';
+export { Popover, PopoverContent, PopoverTrigger } from './popover.js';
 export { ChevronDown } from './icons/chevronDown.js';
 export { CloseIcon } from './icons/close.js';
 export { AccountWalletLogo } from './icons/accountWalletLogo.js';
@@ -16,3 +17,4 @@ export { EthereumLogo } from './icons/ethereumLogo.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@radix-ui/react-dialog';
+import '@radix-ui/react-popover';

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var chunkCRNDRPTL_js = require('./chunk-CRNDRPTL.js');
+var chunkAEW7GOE6_js = require('./chunk-AEW7GOE6.js');
 var chunkRDYVRQBK_js = require('./chunk-RDYVRQBK.js');
 var chunkFNTBL45H_js = require('./chunk-FNTBL45H.js');
 var chunkPNDEO36E_js = require('./chunk-PNDEO36E.js');
@@ -7,19 +9,26 @@ var chunkMGPRA5XK_js = require('./chunk-MGPRA5XK.js');
 var chunkNHBX6Q3P_js = require('./chunk-NHBX6Q3P.js');
 var chunkYHUCPUS3_js = require('./chunk-YHUCPUS3.js');
 var chunk7UK6EE2I_js = require('./chunk-7UK6EE2I.js');
-var chunkCRNDRPTL_js = require('./chunk-CRNDRPTL.js');
-var chunkUNPP7H5Q_js = require('./chunk-UNPP7H5Q.js');
-var chunkAODSKYMI_js = require('./chunk-AODSKYMI.js');
-var chunk5KA4BYO5_js = require('./chunk-5KA4BYO5.js');
-var chunk42VYSY7W_js = require('./chunk-42VYSY7W.js');
+var chunkPQ4RAOPA_js = require('./chunk-PQ4RAOPA.js');
+var chunkBO3GGGHL_js = require('./chunk-BO3GGGHL.js');
+var chunkRIB2OC5P_js = require('./chunk-RIB2OC5P.js');
+var chunkTJTFUJK4_js = require('./chunk-TJTFUJK4.js');
+require('./chunk-74MKQUE2.js');
 var chunkKOR2D6S4_js = require('./chunk-KOR2D6S4.js');
+var chunkKVSERZUE_js = require('./chunk-KVSERZUE.js');
 var chunkNINTZKIZ_js = require('./chunk-NINTZKIZ.js');
-var chunkAEW7GOE6_js = require('./chunk-AEW7GOE6.js');
-require('./chunk-74MKQUE2.js');
 require('./chunk-PKUHTIDK.js');
 
 
 
+Object.defineProperty(exports, 'Spinner', {
+  enumerable: true,
+  get: function () { return chunkCRNDRPTL_js.Spinner; }
+});
+Object.defineProperty(exports, 'BrowserIcon', {
+  enumerable: true,
+  get: function () { return chunkAEW7GOE6_js.BrowserIcon; }
+});
 Object.defineProperty(exports, 'ChevronDown', {
   enumerable: true,
   get: function () { return chunkRDYVRQBK_js.ChevronDown; }
@@ -48,83 +57,87 @@ Object.defineProperty(exports, 'PasskeyIcon', {
   enumerable: true,
   get: function () { return chunk7UK6EE2I_js.PasskeyIcon; }
 });
-Object.defineProperty(exports, 'Spinner', {
-  enumerable: true,
-  get: function () { return chunkCRNDRPTL_js.Spinner; }
-});
 Object.defineProperty(exports, 'Button', {
   enumerable: true,
-  get: function () { return chunkUNPP7H5Q_js.Button; }
+  get: function () { return chunkPQ4RAOPA_js.Button; }
 });
 Object.defineProperty(exports, 'Dialog', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.Dialog; }
+  get: function () { return chunkBO3GGGHL_js.Dialog; }
 });
 Object.defineProperty(exports, 'DialogClose', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogClose; }
+  get: function () { return chunkBO3GGGHL_js.DialogClose; }
 });
 Object.defineProperty(exports, 'DialogContent', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogContent; }
+  get: function () { return chunkBO3GGGHL_js.DialogContent; }
 });
 Object.defineProperty(exports, 'DialogDescription', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogDescription; }
+  get: function () { return chunkBO3GGGHL_js.DialogDescription; }
 });
 Object.defineProperty(exports, 'DialogFooter', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogFooter; }
+  get: function () { return chunkBO3GGGHL_js.DialogFooter; }
 });
 Object.defineProperty(exports, 'DialogHeader', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogHeader; }
+  get: function () { return chunkBO3GGGHL_js.DialogHeader; }
 });
 Object.defineProperty(exports, 'DialogOverlay', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogOverlay; }
+  get: function () { return chunkBO3GGGHL_js.DialogOverlay; }
 });
 Object.defineProperty(exports, 'DialogPortal', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogPortal; }
+  get: function () { return chunkBO3GGGHL_js.DialogPortal; }
 });
 Object.defineProperty(exports, 'DialogTitle', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogTitle; }
+  get: function () { return chunkBO3GGGHL_js.DialogTitle; }
 });
 Object.defineProperty(exports, 'DialogTrigger', {
   enumerable: true,
-  get: function () { return chunkAODSKYMI_js.DialogTrigger; }
+  get: function () { return chunkBO3GGGHL_js.DialogTrigger; }
 });
 Object.defineProperty(exports, 'Input', {
   enumerable: true,
-  get: function () { return chunk5KA4BYO5_js.Input; }
+  get: function () { return chunkRIB2OC5P_js.Input; }
 });
 Object.defineProperty(exports, 'Modal', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.Modal; }
+  get: function () { return chunkTJTFUJK4_js.Modal; }
 });
 Object.defineProperty(exports, 'ModalAnchor', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.ModalAnchor; }
+  get: function () { return chunkTJTFUJK4_js.ModalAnchor; }
 });
 Object.defineProperty(exports, 'ModalClose', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.ModalClose; }
+  get: function () { return chunkTJTFUJK4_js.ModalClose; }
 });
 Object.defineProperty(exports, 'ModalSection', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.ModalSection; }
+  get: function () { return chunkTJTFUJK4_js.ModalSection; }
 });
 Object.defineProperty(exports, 'PinInput', {
   enumerable: true,
   get: function () { return chunkKOR2D6S4_js.PinInput; }
 });
-Object.defineProperty(exports, 'AccountWalletLogo', {
+Object.defineProperty(exports, 'Popover', {
   enumerable: true,
-  get: function () { return chunkNINTZKIZ_js.AccountWalletLogo; }
+  get: function () { return chunkKVSERZUE_js.Popover; }
 });
-Object.defineProperty(exports, 'BrowserIcon', {
+Object.defineProperty(exports, 'PopoverContent', {
   enumerable: true,
-  get: function () { return chunkAEW7GOE6_js.BrowserIcon; }
+  get: function () { return chunkKVSERZUE_js.PopoverContent; }
+});
+Object.defineProperty(exports, 'PopoverTrigger', {
+  enumerable: true,
+  get: function () { return chunkKVSERZUE_js.PopoverTrigger; }
+});
+Object.defineProperty(exports, 'AccountWalletLogo', {
+  enumerable: true,
+  get: function () { return chunkNINTZKIZ_js.AccountWalletLogo; }
 });

package/dist/index.mjs

@@ -1,3 +1,5 @@
+export { Spinner } from './chunk-OXW4BQPJ.mjs';
+export { BrowserIcon } from './chunk-Y3OSOP6I.mjs';
 export { ChevronDown } from './chunk-HZWJQRFF.mjs';
 export { CloseIcon } from './chunk-SYOTT65J.mjs';
 export { EmailIcon } from './chunk-IR4FC2P3.mjs';
@@ -5,13 +7,12 @@ export { EthereumLogo } from './chunk-TKCFH3O5.mjs';
 export { KeplrLogo } from './chunk-KZ3C2OHV.mjs';
 export { MetamaskLogo } from './chunk-BTRAYQSX.mjs';
 export { PasskeyIcon } from './chunk-ERKL3SY4.mjs';
-export { Spinner } from './chunk-OXW4BQPJ.mjs';
-export { Button } from './chunk-RRNLHIXE.mjs';
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-DUBSDTTD.mjs';
-export { Input } from './chunk-C2KDWV5Z.mjs';
-export { Modal, ModalAnchor, ModalClose, ModalSection } from './chunk-OVQCCXBH.mjs';
+export { Button } from './chunk-HCWJO67P.mjs';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-TM5VKEWC.mjs';
+export { Input } from './chunk-JQRAYL7A.mjs';
+export { Modal, ModalAnchor, ModalClose, ModalSection } from './chunk-E5I7SWUP.mjs';
+import './chunk-FLJKIDRT.mjs';
 export { PinInput } from './chunk-VSTH5YAB.mjs';
+export { Popover, PopoverContent, PopoverTrigger } from './chunk-DUSUIS3M.mjs';
 export { AccountWalletLogo } from './chunk-ESZY3JBH.mjs';
-export { BrowserIcon } from './chunk-Y3OSOP6I.mjs';
-import './chunk-FLJKIDRT.mjs';
 import './chunk-3TCQU24P.mjs';

package/dist/input.d.ts

@@ -5,7 +5,9 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "prefix">;
 interface ITextFieldProps extends BaseInputProps {
     className?: string;
     error?: string;
+    baseInputClassName?: string;
+    onKeyDown?: (e: any) => false | Promise<void>;
 }
-declare function Input({ className, placeholder, value, error, onBlur, ...props }: ITextFieldProps): react_jsx_runtime.JSX.Element;
+declare function Input({ className, placeholder, baseInputClassName, value, error, onBlur, onKeyDown, ...props }: ITextFieldProps): react_jsx_runtime.JSX.Element;
 
 export { ITextFieldProps, Input };

package/dist/input.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk5KA4BYO5_js = require('./chunk-5KA4BYO5.js');
+var chunkRIB2OC5P_js = require('./chunk-RIB2OC5P.js');
 require('./chunk-PKUHTIDK.js');
 
 
 
 Object.defineProperty(exports, 'Input', {
   enumerable: true,
-  get: function () { return chunk5KA4BYO5_js.Input; }
+  get: function () { return chunkRIB2OC5P_js.Input; }
 });

package/dist/input.mjs

@@ -1,2 +1,2 @@
-export { Input } from './chunk-C2KDWV5Z.mjs';
+export { Input } from './chunk-JQRAYL7A.mjs';
 import './chunk-3TCQU24P.mjs';

package/dist/modal.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk42VYSY7W_js = require('./chunk-42VYSY7W.js');
+var chunkTJTFUJK4_js = require('./chunk-TJTFUJK4.js');
 require('./chunk-74MKQUE2.js');
 require('./chunk-PKUHTIDK.js');
 
@@ -8,17 +8,17 @@ require('./chunk-PKUHTIDK.js');
 
 Object.defineProperty(exports, 'Modal', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.Modal; }
+  get: function () { return chunkTJTFUJK4_js.Modal; }
 });
 Object.defineProperty(exports, 'ModalAnchor', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.ModalAnchor; }
+  get: function () { return chunkTJTFUJK4_js.ModalAnchor; }
 });
 Object.defineProperty(exports, 'ModalClose', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.ModalClose; }
+  get: function () { return chunkTJTFUJK4_js.ModalClose; }
 });
 Object.defineProperty(exports, 'ModalSection', {
   enumerable: true,
-  get: function () { return chunk42VYSY7W_js.ModalSection; }
+  get: function () { return chunkTJTFUJK4_js.ModalSection; }
 });

package/dist/modal.mjs

@@ -1,3 +1,3 @@
-export { Modal, ModalAnchor, ModalClose, ModalSection } from './chunk-OVQCCXBH.mjs';
+export { Modal, ModalAnchor, ModalClose, ModalSection } from './chunk-E5I7SWUP.mjs';
 import './chunk-FLJKIDRT.mjs';
 import './chunk-3TCQU24P.mjs';

package/dist/popover.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/popover.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var chunkKVSERZUE_js = require('./chunk-KVSERZUE.js');
+require('./chunk-PKUHTIDK.js');
+
+
+
+Object.defineProperty(exports, 'Popover', {
+  enumerable: true,
+  get: function () { return chunkKVSERZUE_js.Popover; }
+});
+Object.defineProperty(exports, 'PopoverContent', {
+  enumerable: true,
+  get: function () { return chunkKVSERZUE_js.PopoverContent; }
+});
+Object.defineProperty(exports, 'PopoverTrigger', {
+  enumerable: true,
+  get: function () { return chunkKVSERZUE_js.PopoverTrigger; }
+});

package/dist/popover.mjs

@@ -0,0 +1,2 @@
+export { Popover, PopoverContent, PopoverTrigger } from './chunk-DUSUIS3M.mjs';
+import './chunk-3TCQU24P.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burnt-labs/ui",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.12",
   "sideEffects": [
     "**/*.css"
   ],
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-popover": "^1.0.7",
     "@types/react-dom": "^18.2.18"
   },
   "scripts": {

package/src/button.tsx

@@ -2,7 +2,12 @@ import React from "react";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   fullWidth?: boolean;
-  structure?: "base" | "outlined" | "naked" | "destructive";
+  structure?:
+    | "base"
+    | "outlined"
+    | "naked"
+    | "destructive"
+    | "destructive-outline";
   disabled?: boolean;
   onClick?: (e: React.MouseEvent) => void;
 }
@@ -37,6 +42,8 @@ export const Button: React.FC<ButtonProps> = ({
         return "ui-border-none ui-bg-transparent ui-text-white ui-underline ui-font-normal";
       case "destructive":
         return "ui-bg-red-500 ui-text-white hover:ui-bg-red-400";
+      case "destructive-outline":
+        return "ui-border ui-border-red-500 ui-bg-transparent ui-text-red-500 hover:ui-bg-red-500/5";
       default:
         return "ui-bg-white ui-text-black hover:ui-bg-neutral-100";
     }

package/src/dialog.tsx

@@ -34,7 +34,7 @@ const DialogContent = React.forwardRef<
     <div className="ui-absolute ui-h-screen ui-w-screen ui-inset-0 ui-bg-modal-overlay ui-backdrop-blur-3xl ui-opacity-40 ui-bg-no-repeat ui-bg-cover ui-bg-center ui-bg-fixed ui-z-[60]" />
     <DialogPrimitive.Content
       className={cn(
-        "sm:ui-bg-black/20 sm:ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-6 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
+        "sm:ui-bg-black/20 !ui-flex ui-justify-center ui-flex-col sm:ui-block sm:ui-flex-none ui-h-screen sm:ui-h-auto sm:ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-10 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
         className,
       )}
       ref={ref}

package/src/index.tsx

@@ -7,6 +7,7 @@ export * from "./pinInput";
 export * from "./button";
 export * from "./modal";
 export * from "./dialog";
+export * from "./popover";
 
 // icons
 export * from "./icons/chevronDown";

package/src/input.tsx

@@ -6,13 +6,18 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "prefix">;
 export interface ITextFieldProps extends BaseInputProps {
   className?: string;
   error?: string;
+  baseInputClassName?: string;
+  onKeyDown?: (e: any) => false | Promise<void>;
 }
 export function Input({
   className,
   placeholder,
+  // This should only be used for specific classes that can't override the base input styles.
+  baseInputClassName,
   value,
   error,
   onBlur,
+  onKeyDown,
   ...props
 }: ITextFieldProps) {
   const [isInputFocused, setIsInputFocused] = useState(false);
@@ -46,11 +51,17 @@ export function Input({
       </label>
       <input
         {...props}
-        className={`ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
+        className={`${
+          baseInputClassName || ""
+        } ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
           error ? "ui-border-red-400" : ""
-        } ui-bg-transparent ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`}
+        } ui-bg-transparent ui-font-akkuratLL ui-py-5 !ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`}
         onBlur={handleBlur}
         onFocus={handleFocus}
+        onKeyDown={onKeyDown}
+        style={{
+          WebkitBorderRadius: "none",
+        }}
         value={value}
       />
     </div>

package/src/modal.tsx

@@ -34,7 +34,7 @@ export function Modal({
   return (
     <div
       className={cn(
-        "ui-relative ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
+        "ui-relative ui-h-full ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ export function ModalSection({
   return (
     <div
       className={cn(
-        "ui-inline-flex ui-w-full ui-h-full sm:ui-p-10 ui-flex-col ui-items-start ui-justify-between ui-gap-8",
+        "ui-inline-flex ui-w-full ui-h-full ui-flex-col ui-items-start ui-justify-between ui-gap-8",
         className,
       )}
       {...props}

package/src/popover.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, children, ...props }, forwardedRef) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      className={`${className} ui-rounded ui-text-white ui-p-2 ui-bg-[#434040] ui-data-[state=open]:ui-data-[side=top]:ui-animate-slideDownAndFade ui-data-[state=open]:ui-data-[side=right]:ui-animate-slideLeftAndFade ui-data-[state=open]:ui-data-[side=bottom]:ui-animate-slideUpAndFade ui-data-[state=open]:ui-data-[side=left]:ui-animate-slideRightAndFade
+      `}
+      ref={forwardedRef}
+      side="top"
+      sideOffset={10}
+      {...props}
+    >
+      {children}
+      <PopoverPrimitive.Arrow className="ui-fill-[#434040]" />
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };