@hfunlabs/hypurr-connect 0.1.20 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +16 -4
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
- package/src/HypurrConnectProvider.tsx +17 -0
- package/src/UserProfileModal.tsx +3 -3
- package/src/WalletSelectorDropdown.tsx +2 -2
- package/src/styles.css +1 -1
- package/src/tailwind.css +13 -0
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
// src/styles.css
|
|
24
|
-
styleInject(".hypurr-connect .btn-raised {\n background-color: rgb(var(--btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.03),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.1),\n inset 0 -1px 0 rgba(0, 0, 0, .35),\n inset 0 0 0 1px rgb(var(--btn-ring));\n color: rgb(var(--btn-fg));\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised:hover:not(:disabled) {\n background-color: rgb(var(--surface-btn-hover));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.04),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.14),\n inset 0 -1px 0 rgba(0, 0, 0, .4),\n inset 0 0 0 1px rgb(var(--surface-bd-hover));\n color: rgb(var(--content-tertiary));\n}\n.hypurr-connect .btn-raised-active {\n background-color: rgb(var(--surface-btn-active));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.05),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.18),\n inset 0 -1px 0 rgba(0, 0, 0, .45),\n inset 0 0 0 1px rgb(var(--surface-bd-active)),\n 0 1px 2px rgba(0, 0, 0, .5);\n color: rgb(var(--content));\n}\n.hypurr-connect .btn-raised-accent,\n.hypurr-connect .btn-raised-active {\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised-accent {\n background-color: rgb(var(--accent-btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.03),\n transparent);\n box-shadow: inset 0 1px 0 rgb(var(--btn-bevel)/.1), inset 0 -1px 0 rgb(var(--accent-btn-inset)/.75);\n color: rgb(var(--accent-btn-fg));\n}\n.hypurr-connect .btn-raised-accent:hover:not(:disabled) {\n background-color: rgb(var(--accent-btn-bg-hover));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.04),\n transparent);\n box-shadow: inset 0 1px 0 rgb(var(--btn-bevel)/.14), inset 0 -1px 0 rgb(var(--accent-btn-inset)/.8);\n color: rgb(var(--accent-btn-fg-hover));\n}\n.hypurr-connect .btn-raised-disabled {\n background-color: rgb(var(--btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.02),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 -1px 0 rgba(0, 0, 0, .25),\n inset 0 0 0 1px rgb(var(--btn-ring)/.6);\n color: rgb(var(--content-faint));\n cursor: not-allowed;\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.light .hypurr-connect .btn-raised {\n background-image:\n linear-gradient(\n to bottom,\n #fff,\n rgb(var(--surface-btn)));\n box-shadow:\n 0 1px 2px rgba(15, 23, 42, .08),\n 0 1px 1px rgba(15, 23, 42, .04),\n inset 0 0 0 1px rgb(var(--surface-bd));\n}\n.light .hypurr-connect .btn-raised:hover:not(:disabled) {\n background-image:\n linear-gradient(\n to bottom,\n #fff,\n rgb(var(--surface-btn-hover)));\n box-shadow:\n 0 2px 6px rgba(15, 23, 42, .12),\n 0 1px 2px rgba(15, 23, 42, .06),\n inset 0 0 0 1px rgb(var(--surface-bd-hover));\n}\n.light .hypurr-connect .btn-raised-active {\n background-image: none;\n background-color: rgb(var(--surface-btn-active));\n box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12), inset 0 0 0 1px rgb(var(--surface-bd-active));\n}\n.light .hypurr-connect .btn-raised-disabled {\n background-image: none;\n box-shadow: inset 0 0 0 1px rgb(var(--surface-bd));\n}\n.light .hypurr-connect .btn-raised-accent {\n box-shadow: 0 1px 2px rgba(124, 58, 237, .18), inset 0 0 0 1px rgba(124, 58, 237, .22);\n}\n.light .hypurr-connect .btn-raised-accent:hover:not(:disabled) {\n box-shadow: 0 2px 6px rgba(124, 58, 237, .24), inset 0 0 0 1px rgba(124, 58, 237, .28);\n}\n.hypurr-connect .input {\n background-color: rgb(var(--input-bg));\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .5),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 0 0 1px rgb(var(--input-ring));\n color: rgb(var(--content));\n transition: box-shadow .15s, background-color .15s;\n}\n.hypurr-connect .input::-moz-placeholder {\n color: rgb(var(--content-faint));\n opacity: 1;\n}\n.hypurr-connect .input::placeholder {\n color: rgb(var(--content-faint));\n opacity: 1;\n}\n.hypurr-connect .input:focus,\n.hypurr-connect .input:focus-within {\n background-color: rgb(var(--input-bg-focus));\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .45),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.06),\n inset 0 0 0 1px rgb(var(--input-ring-focus));\n}\n.hypurr-connect .input-error,\n.hypurr-connect .input-error:focus,\n.hypurr-connect .input-error:focus-within {\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .5),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 0 0 1px hsla(0, 91%, 71%, .7);\n}\n.light .hypurr-connect .input {\n box-shadow: inset 0 2px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px rgb(var(--input-ring));\n}\n.light .hypurr-connect .input:focus,\n.light .hypurr-connect .input:focus-within {\n box-shadow: inset 0 2px 4px rgba(15, 23, 42, .1), inset 0 0 0 1px rgb(var(--input-ring-focus));\n}\n.light .hypurr-connect .input-error,\n.light .hypurr-connect .input-error:focus,\n.light .hypurr-connect .input-error:focus-within {\n box-shadow: inset 0 2px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(220, 38, 38, .7);\n}\n.hypurr-connect .\\!visible {\n visibility: visible !important;\n}\n.hypurr-connect .visible {\n visibility: visible;\n}\n.hypurr-connect .fixed {\n position: fixed;\n}\n.hypurr-connect .absolute {\n position: absolute;\n}\n.hypurr-connect .relative {\n position: relative;\n}\n.hypurr-connect .inset-0 {\n inset: 0;\n}\n.hypurr-connect .right-2 {\n right: .5rem;\n}\n.hypurr-connect .right-6 {\n right: 1.5rem;\n}\n.hypurr-connect .top-1\\/2 {\n top: 50%;\n}\n.hypurr-connect .z-\\[100\\] {\n z-index: 100;\n}\n.hypurr-connect .z-\\[101\\] {\n z-index: 101;\n}\n.hypurr-connect .z-\\[110\\] {\n z-index: 110;\n}\n.hypurr-connect .z-\\[111\\] {\n z-index: 111;\n}\n.hypurr-connect .mb-1\\.5 {\n margin-bottom: .375rem;\n}\n.hypurr-connect .mb-2 {\n margin-bottom: .5rem;\n}\n.hypurr-connect .mt-0\\.5 {\n margin-top: .125rem;\n}\n.hypurr-connect .mt-1 {\n margin-top: .25rem;\n}\n.hypurr-connect .mt-1\\.5 {\n margin-top: .375rem;\n}\n.hypurr-connect .block {\n display: block;\n}\n.hypurr-connect .inline-block {\n display: inline-block;\n}\n.hypurr-connect .inline {\n display: inline;\n}\n.hypurr-connect .flex {\n display: flex;\n}\n.hypurr-connect .inline-flex {\n display: inline-flex;\n}\n.hypurr-connect .grid {\n display: grid;\n}\n.hypurr-connect .contents {\n display: contents;\n}\n.hypurr-connect .hidden {\n display: none;\n}\n.hypurr-connect .h-8 {\n height: 2rem;\n}\n.hypurr-connect .w-8 {\n width: 2rem;\n}\n.hypurr-connect .w-full {\n width: 100%;\n}\n.hypurr-connect .min-w-0 {\n min-width: 0;\n}\n.hypurr-connect .max-w-md {\n max-width: 28rem;\n}\n.hypurr-connect .flex-1 {\n flex: 1 1 0%;\n}\n.hypurr-connect .flex-shrink-0 {\n flex-shrink: 0;\n}\n.hypurr-connect .-translate-y-1\\/2 {\n --tw-translate-y:-50%;\n}\n.hypurr-connect .-translate-y-1\\/2,\n.hypurr-connect .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hypurr-connect .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.hypurr-connect .items-start {\n align-items: flex-start;\n}\n.hypurr-connect .items-center {\n align-items: center;\n}\n.hypurr-connect .justify-center {\n justify-content: center;\n}\n.hypurr-connect .justify-between {\n justify-content: space-between;\n}\n.hypurr-connect .gap-1\\.5 {\n gap: .375rem;\n}\n.hypurr-connect .gap-2 {\n gap: .5rem;\n}\n.hypurr-connect .gap-3 {\n gap: .75rem;\n}\n.hypurr-connect :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.5rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.75rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect .overflow-hidden {\n overflow: hidden;\n}\n.hypurr-connect .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hypurr-connect .break-all {\n word-break: break-all;\n}\n.hypurr-connect .rounded {\n border-radius: .25rem;\n}\n.hypurr-connect .rounded-lg {\n border-radius: .5rem;\n}\n.hypurr-connect .rounded-md {\n border-radius: .375rem;\n}\n.hypurr-connect .border {\n border-width: 1px;\n}\n.hypurr-connect .border-b {\n border-bottom-width: 1px;\n}\n.hypurr-connect .border-amber-500\\/25 {\n border-color: rgb(var(--amber-500)/.25);\n}\n.hypurr-connect .border-line {\n --tw-border-opacity:1;\n border-color: rgb(var(--line)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-line-strong {\n --tw-border-opacity:1;\n border-color: rgb(var(--line-strong)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd-active {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd-active)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-trade-down\\/20 {\n border-color: rgb(var(--trade-down)/.2);\n}\n.hypurr-connect .bg-amber-500\\/\\[0\\.08\\] {\n background-color: rgb(var(--amber-500)/.08);\n}\n.hypurr-connect .bg-overlay\\/70 {\n background-color: rgb(var(--overlay)/.7);\n}\n.hypurr-connect .bg-surface-btn {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-btn-active {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-active)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-btn-hover {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-modal {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-modal)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-trade-down\\/\\[0\\.08\\] {\n background-color: rgb(var(--trade-down)/.08);\n}\n.hypurr-connect .p-1\\.5 {\n padding: .375rem;\n}\n.hypurr-connect .p-3 {\n padding: .75rem;\n}\n.hypurr-connect .p-4 {\n padding: 1rem;\n}\n.hypurr-connect .px-2 {\n padding-left: .5rem;\n padding-right: .5rem;\n}\n.hypurr-connect .px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n.hypurr-connect .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.hypurr-connect .py-1 {\n padding-top: .25rem;\n padding-bottom: .25rem;\n}\n.hypurr-connect .py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n.hypurr-connect .py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n.hypurr-connect .py-2\\.5 {\n padding-top: .625rem;\n padding-bottom: .625rem;\n}\n.hypurr-connect .py-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pb-5,\n.hypurr-connect .py-5 {\n padding-bottom: 1.25rem;\n}\n.hypurr-connect .pb-6 {\n padding-bottom: 1.5rem;\n}\n.hypurr-connect .pr-11 {\n padding-right: 2.75rem;\n}\n.hypurr-connect .pt-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pt-6 {\n padding-top: 1.5rem;\n}\n.hypurr-connect .font-mono {\n font-family:\n Google Sans Code,\n Roboto Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n monospace;\n}\n.hypurr-connect .font-sans {\n font-family:\n Inter,\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n sans-serif;\n}\n.hypurr-connect .text-base {\n font-size: 12.5px;\n line-height: 1rem;\n}\n.hypurr-connect .text-lg {\n font-size: 14px;\n line-height: 1.25rem;\n}\n.hypurr-connect .font-medium {\n font-weight: 500;\n}\n.hypurr-connect .uppercase {\n text-transform: uppercase;\n}\n.hypurr-connect .tabular-nums {\n --tw-numeric-spacing:tabular-nums;\n font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n.hypurr-connect .tracking-\\[0\\.1em\\] {\n letter-spacing: .1em;\n}\n.hypurr-connect .text-amber-200 {\n --tw-text-opacity:1;\n color: rgb(var(--amber-200)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-amber-400 {\n --tw-text-opacity:1;\n color: rgb(var(--amber-400)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content {\n --tw-text-opacity:1;\n color: rgb(var(--content)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-faint {\n --tw-text-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-muted {\n --tw-text-opacity:1;\n color: rgb(var(--content-muted)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-subtle {\n --tw-text-opacity:1;\n color: rgb(var(--content-subtle)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-down {\n --tw-text-opacity:1;\n color: rgb(var(--trade-down)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-up {\n --tw-text-opacity:1;\n color: rgb(var(--trade-up)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .placeholder-content-faint::-moz-placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .placeholder-content-faint::placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .shadow-modal {\n --tw-shadow:var(--shadow-modal);\n --tw-shadow-colored:var(--shadow-modal);\n box-shadow:\n var(--tw-ring-offset-shadow,0 0 #0000),\n var(--tw-ring-shadow,0 0 #0000),\n var(--tw-shadow);\n}\n.hypurr-connect .outline {\n outline-style: solid;\n}\n.hypurr-connect .blur {\n --tw-blur:blur(8px);\n}\n.hypurr-connect .blur,\n.hypurr-connect .drop-shadow {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .drop-shadow {\n --tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06));\n}\n.hypurr-connect .filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .backdrop-blur-sm {\n --tw-backdrop-blur:blur(4px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.hypurr-connect .transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n -webkit-backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter,\n -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n.hypurr-connect .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n:root {\n --surface-btn:13 18 25;\n --surface-btn-hover:21 23 26;\n --surface-btn-active:30 33 36;\n --surface-bd:38 42 48;\n --surface-bd-hover:68 69 72;\n --surface-bd-active:75 77 80;\n --surface-modal:14 18 24;\n --surface-dropdown:17 24 32;\n --surface-base:11 14 17;\n --surface-deep:9 11 14;\n --surface-raised:17 24 39;\n --surface-elevated:31 41 55;\n --surface-inset:55 65 81;\n --surface-inverse:255 255 255;\n --content:243 244 246;\n --content-secondary:229 231 235;\n --content-tertiary:209 213 219;\n --content-muted:170 177 193;\n --content-subtle:125 133 151;\n --content-faint:107 114 128;\n --content-disabled:55 65 81;\n --line:31 41 55;\n --line-strong:55 65 81;\n --line-subtle:17 24 39;\n --line-inverse:255 255 255;\n --overlay:0 0 0;\n --accent:168 85 247;\n --trade-up:52 211 153;\n --trade-down:248 113 113;\n --purple-400:216 180 254;\n --purple-500:185 125 241;\n --blue-500:90 153 255;\n --green-400:83 203 127;\n --amber-200:253 230 138;\n --amber-400:251 191 36;\n --amber-500:245 158 11;\n --btn-bg:13 18 25;\n --btn-fg:170 177 193;\n --btn-ring:38 42 48;\n --btn-bevel:255 255 255;\n --accent-btn-bg:37 28 57;\n --accent-btn-bg-hover:52 35 80;\n --accent-btn-fg:216 180 254;\n --accent-btn-fg-hover:233 213 255;\n --accent-btn-inset:15 5 35;\n --input-bg:18 23 31;\n --input-bg-focus:26 33 44;\n --input-ring:45 53 64;\n --input-ring-focus:59 69 82;\n --shadow-modal:0 25px 50px -12px rgba(0,0,0,.6);\n --shadow-dropdown:0 8px 40px rgba(0,0,0,.85);\n}\n.light {\n --surface-btn:244 246 249;\n --surface-btn-hover:236 239 243;\n --surface-btn-active:226 230 236;\n --surface-bd:214 220 228;\n --surface-bd-hover:194 201 211;\n --surface-bd-active:168 176 191;\n --surface-modal:255 255 255;\n --surface-dropdown:255 255 255;\n --surface-base:245 244 249;\n --surface-deep:233 236 242;\n --surface-raised:255 255 255;\n --surface-elevated:228 231 237;\n --surface-inset:225 229 235;\n --surface-inverse:17 24 39;\n --content:17 24 39;\n --content-secondary:31 41 55;\n --content-tertiary:55 65 81;\n --content-muted:91 101 115;\n --content-subtle:107 114 128;\n --content-faint:148 163 184;\n --content-disabled:179 185 196;\n --line:222 226 234;\n --line-strong:205 211 220;\n --line-subtle:238 240 243;\n --line-inverse:17 24 39;\n --overlay:0 0 0;\n --accent:147 51 234;\n --trade-up:5 150 105;\n --trade-down:220 38 38;\n --purple-400:124 58 237;\n --purple-500:109 40 217;\n --blue-500:37 99 235;\n --green-400:22 163 74;\n --amber-200:161 98 7;\n --amber-400:180 83 9;\n --amber-500:180 83 9;\n --btn-bg:255 255 255;\n --btn-fg:71 85 105;\n --btn-ring:217 221 228;\n --btn-bevel:15 23 42;\n --accent-btn-bg:243 232 255;\n --accent-btn-bg-hover:233 213 255;\n --accent-btn-fg:109 40 217;\n --accent-btn-fg-hover:88 28 135;\n --accent-btn-inset:147 51 234;\n --input-bg:238 240 246;\n --input-bg-focus:230 232 240;\n --input-ring:200 206 218;\n --input-ring-focus:168 175 192;\n --shadow-modal:0 16px 40px -12px rgba(15,23,42,.24),0 4px 12px -4px rgba(15,23,42,.12);\n --shadow-dropdown:0 12px 28px -8px rgba(15,23,42,.2),0 2px 8px -2px rgba(15,23,42,.1);\n}\n.hypurr-connect .hover\\:border-surface-bd-hover:hover {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd-hover)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .hover\\:bg-surface-btn-hover:hover {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .hover\\:text-content:hover {\n --tw-text-opacity:1;\n color: rgb(var(--content)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .hover\\:text-content-tertiary:hover {\n --tw-text-opacity:1;\n color: rgb(var(--content-tertiary)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.hypurr-connect .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.hypurr-connect .disabled\\:opacity-40:disabled {\n opacity: .4;\n}\n.hypurr-connect .disabled\\:opacity-50:disabled {\n opacity: .5;\n}\n");
|
|
24
|
+
styleInject('@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Google+Sans+Code:wght@400;500;600;700&display=swap";\n.hypurr-connect .btn-raised {\n background-color: rgb(var(--btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.03),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.1),\n inset 0 -1px 0 rgba(0, 0, 0, .35),\n inset 0 0 0 1px rgb(var(--btn-ring));\n color: rgb(var(--btn-fg));\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised:hover:not(:disabled) {\n background-color: rgb(var(--surface-btn-hover));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.04),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.14),\n inset 0 -1px 0 rgba(0, 0, 0, .4),\n inset 0 0 0 1px rgb(var(--surface-bd-hover));\n color: rgb(var(--content-tertiary));\n}\n.hypurr-connect .btn-raised-active {\n background-color: rgb(var(--surface-btn-active));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.05),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.18),\n inset 0 -1px 0 rgba(0, 0, 0, .45),\n inset 0 0 0 1px rgb(var(--surface-bd-active)),\n 0 1px 2px rgba(0, 0, 0, .5);\n color: rgb(var(--content));\n}\n.hypurr-connect .btn-raised-accent,\n.hypurr-connect .btn-raised-active {\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.hypurr-connect .btn-raised-accent {\n background-color: rgb(var(--accent-btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.03),\n transparent);\n box-shadow: inset 0 1px 0 rgb(var(--btn-bevel)/.1), inset 0 -1px 0 rgb(var(--accent-btn-inset)/.75);\n color: rgb(var(--accent-btn-fg));\n}\n.hypurr-connect .btn-raised-accent:hover:not(:disabled) {\n background-color: rgb(var(--accent-btn-bg-hover));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.04),\n transparent);\n box-shadow: inset 0 1px 0 rgb(var(--btn-bevel)/.14), inset 0 -1px 0 rgb(var(--accent-btn-inset)/.8);\n color: rgb(var(--accent-btn-fg-hover));\n}\n.hypurr-connect .btn-raised-disabled {\n background-color: rgb(var(--btn-bg));\n background-image:\n linear-gradient(\n to bottom,\n rgb(var(--btn-bevel)/.02),\n transparent);\n box-shadow:\n inset 0 1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 -1px 0 rgba(0, 0, 0, .25),\n inset 0 0 0 1px rgb(var(--btn-ring)/.6);\n color: rgb(var(--content-faint));\n cursor: not-allowed;\n transition:\n background-color .15s,\n color .15s,\n background-image .15s,\n box-shadow .15s;\n}\n.light .hypurr-connect .btn-raised {\n background-image:\n linear-gradient(\n to bottom,\n #fff,\n rgb(var(--surface-btn)));\n box-shadow:\n 0 1px 2px rgba(15, 23, 42, .08),\n 0 1px 1px rgba(15, 23, 42, .04),\n inset 0 0 0 1px rgb(var(--surface-bd));\n}\n.light .hypurr-connect .btn-raised:hover:not(:disabled) {\n background-image:\n linear-gradient(\n to bottom,\n #fff,\n rgb(var(--surface-btn-hover)));\n box-shadow:\n 0 2px 6px rgba(15, 23, 42, .12),\n 0 1px 2px rgba(15, 23, 42, .06),\n inset 0 0 0 1px rgb(var(--surface-bd-hover));\n}\n.light .hypurr-connect .btn-raised-active {\n background-image: none;\n background-color: rgb(var(--surface-btn-active));\n box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12), inset 0 0 0 1px rgb(var(--surface-bd-active));\n}\n.light .hypurr-connect .btn-raised-disabled {\n background-image: none;\n box-shadow: inset 0 0 0 1px rgb(var(--surface-bd));\n}\n.light .hypurr-connect .btn-raised-accent {\n box-shadow: 0 1px 2px rgba(124, 58, 237, .18), inset 0 0 0 1px rgba(124, 58, 237, .22);\n}\n.light .hypurr-connect .btn-raised-accent:hover:not(:disabled) {\n box-shadow: 0 2px 6px rgba(124, 58, 237, .24), inset 0 0 0 1px rgba(124, 58, 237, .28);\n}\n.hypurr-connect .input {\n background-color: rgb(var(--input-bg));\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .5),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 0 0 1px rgb(var(--input-ring));\n color: rgb(var(--content));\n transition: box-shadow .15s, background-color .15s;\n}\n.hypurr-connect .input::-moz-placeholder {\n color: rgb(var(--content-faint));\n opacity: 1;\n}\n.hypurr-connect .input::placeholder {\n color: rgb(var(--content-faint));\n opacity: 1;\n}\n.hypurr-connect .input:focus,\n.hypurr-connect .input:focus-within {\n background-color: rgb(var(--input-bg-focus));\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .45),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.06),\n inset 0 0 0 1px rgb(var(--input-ring-focus));\n}\n.hypurr-connect .input-error,\n.hypurr-connect .input-error:focus,\n.hypurr-connect .input-error:focus-within {\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, .5),\n inset 0 -1px 0 rgb(var(--btn-bevel)/.05),\n inset 0 0 0 1px hsla(0, 91%, 71%, .7);\n}\n.light .hypurr-connect .input {\n box-shadow: inset 0 2px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px rgb(var(--input-ring));\n}\n.light .hypurr-connect .input:focus,\n.light .hypurr-connect .input:focus-within {\n box-shadow: inset 0 2px 4px rgba(15, 23, 42, .1), inset 0 0 0 1px rgb(var(--input-ring-focus));\n}\n.light .hypurr-connect .input-error,\n.light .hypurr-connect .input-error:focus,\n.light .hypurr-connect .input-error:focus-within {\n box-shadow: inset 0 2px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(220, 38, 38, .7);\n}\n.hypurr-connect .\\!visible {\n visibility: visible !important;\n}\n.hypurr-connect .visible {\n visibility: visible;\n}\n.hypurr-connect .fixed {\n position: fixed;\n}\n.hypurr-connect .absolute {\n position: absolute;\n}\n.hypurr-connect .relative {\n position: relative;\n}\n.hypurr-connect .inset-0 {\n inset: 0;\n}\n.hypurr-connect .right-2 {\n right: .5rem;\n}\n.hypurr-connect .right-6 {\n right: 1.5rem;\n}\n.hypurr-connect .top-1\\/2 {\n top: 50%;\n}\n.hypurr-connect .z-\\[100\\] {\n z-index: 100;\n}\n.hypurr-connect .z-\\[101\\] {\n z-index: 101;\n}\n.hypurr-connect .z-\\[110\\] {\n z-index: 110;\n}\n.hypurr-connect .z-\\[111\\] {\n z-index: 111;\n}\n.hypurr-connect .mb-1\\.5 {\n margin-bottom: .375rem;\n}\n.hypurr-connect .mb-2 {\n margin-bottom: .5rem;\n}\n.hypurr-connect .mt-0\\.5 {\n margin-top: .125rem;\n}\n.hypurr-connect .mt-1 {\n margin-top: .25rem;\n}\n.hypurr-connect .mt-1\\.5 {\n margin-top: .375rem;\n}\n.hypurr-connect .block {\n display: block;\n}\n.hypurr-connect .inline-block {\n display: inline-block;\n}\n.hypurr-connect .inline {\n display: inline;\n}\n.hypurr-connect .flex {\n display: flex;\n}\n.hypurr-connect .inline-flex {\n display: inline-flex;\n}\n.hypurr-connect .grid {\n display: grid;\n}\n.hypurr-connect .contents {\n display: contents;\n}\n.hypurr-connect .hidden {\n display: none;\n}\n.hypurr-connect .h-8 {\n height: 2rem;\n}\n.hypurr-connect .w-8 {\n width: 2rem;\n}\n.hypurr-connect .w-full {\n width: 100%;\n}\n.hypurr-connect .min-w-0 {\n min-width: 0;\n}\n.hypurr-connect .max-w-md {\n max-width: 28rem;\n}\n.hypurr-connect .flex-1 {\n flex: 1 1 0%;\n}\n.hypurr-connect .flex-shrink-0 {\n flex-shrink: 0;\n}\n.hypurr-connect .-translate-y-1\\/2 {\n --tw-translate-y:-50%;\n}\n.hypurr-connect .-translate-y-1\\/2,\n.hypurr-connect .transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hypurr-connect .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.hypurr-connect .items-start {\n align-items: flex-start;\n}\n.hypurr-connect .items-center {\n align-items: center;\n}\n.hypurr-connect .justify-center {\n justify-content: center;\n}\n.hypurr-connect .justify-between {\n justify-content: space-between;\n}\n.hypurr-connect .gap-1\\.5 {\n gap: .375rem;\n}\n.hypurr-connect .gap-2 {\n gap: .5rem;\n}\n.hypurr-connect .gap-3 {\n gap: .75rem;\n}\n.hypurr-connect :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.5rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.75rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {\n --tw-space-y-reverse:0;\n margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect .overflow-hidden {\n overflow: hidden;\n}\n.hypurr-connect .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hypurr-connect .break-all {\n word-break: break-all;\n}\n.hypurr-connect .rounded {\n border-radius: .25rem;\n}\n.hypurr-connect .rounded-lg {\n border-radius: .5rem;\n}\n.hypurr-connect .rounded-md {\n border-radius: .375rem;\n}\n.hypurr-connect .border {\n border-width: 1px;\n}\n.hypurr-connect .border-b {\n border-bottom-width: 1px;\n}\n.hypurr-connect .border-amber-500\\/25 {\n border-color: rgb(var(--amber-500)/.25);\n}\n.hypurr-connect .border-line {\n --tw-border-opacity:1;\n border-color: rgb(var(--line)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-line-strong {\n --tw-border-opacity:1;\n border-color: rgb(var(--line-strong)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd-active {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd-active)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-trade-down\\/20 {\n border-color: rgb(var(--trade-down)/.2);\n}\n.hypurr-connect .bg-amber-500\\/\\[0\\.08\\] {\n background-color: rgb(var(--amber-500)/.08);\n}\n.hypurr-connect .bg-overlay\\/70 {\n background-color: rgb(var(--overlay)/.7);\n}\n.hypurr-connect .bg-surface-btn {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-btn-active {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-active)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-btn-hover {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-surface-modal {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-modal)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-trade-down\\/\\[0\\.08\\] {\n background-color: rgb(var(--trade-down)/.08);\n}\n.hypurr-connect .p-1\\.5 {\n padding: .375rem;\n}\n.hypurr-connect .p-3 {\n padding: .75rem;\n}\n.hypurr-connect .p-4 {\n padding: 1rem;\n}\n.hypurr-connect .px-2 {\n padding-left: .5rem;\n padding-right: .5rem;\n}\n.hypurr-connect .px-3 {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n.hypurr-connect .px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.hypurr-connect .py-1 {\n padding-top: .25rem;\n padding-bottom: .25rem;\n}\n.hypurr-connect .py-1\\.5 {\n padding-top: .375rem;\n padding-bottom: .375rem;\n}\n.hypurr-connect .py-2 {\n padding-top: .5rem;\n padding-bottom: .5rem;\n}\n.hypurr-connect .py-2\\.5 {\n padding-top: .625rem;\n padding-bottom: .625rem;\n}\n.hypurr-connect .py-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pb-5,\n.hypurr-connect .py-5 {\n padding-bottom: 1.25rem;\n}\n.hypurr-connect .pb-6 {\n padding-bottom: 1.5rem;\n}\n.hypurr-connect .pr-11 {\n padding-right: 2.75rem;\n}\n.hypurr-connect .pt-5 {\n padding-top: 1.25rem;\n}\n.hypurr-connect .pt-6 {\n padding-top: 1.5rem;\n}\n.hypurr-connect .font-mono {\n font-family:\n Google Sans Code,\n Roboto Mono,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n monospace;\n}\n.hypurr-connect .font-sans {\n font-family:\n Inter,\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Helvetica Neue,\n Arial,\n sans-serif;\n}\n.hypurr-connect .text-base {\n font-size: 12.5px;\n line-height: 1rem;\n}\n.hypurr-connect .text-lg {\n font-size: 14px;\n line-height: 1.25rem;\n}\n.hypurr-connect .font-medium {\n font-weight: 500;\n}\n.hypurr-connect .uppercase {\n text-transform: uppercase;\n}\n.hypurr-connect .tabular-nums {\n --tw-numeric-spacing:tabular-nums;\n font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n.hypurr-connect .tracking-\\[0\\.1em\\] {\n letter-spacing: .1em;\n}\n.hypurr-connect .text-amber-200 {\n --tw-text-opacity:1;\n color: rgb(var(--amber-200)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-amber-400 {\n --tw-text-opacity:1;\n color: rgb(var(--amber-400)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content {\n --tw-text-opacity:1;\n color: rgb(var(--content)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-faint {\n --tw-text-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-muted {\n --tw-text-opacity:1;\n color: rgb(var(--content-muted)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-content-subtle {\n --tw-text-opacity:1;\n color: rgb(var(--content-subtle)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-down {\n --tw-text-opacity:1;\n color: rgb(var(--trade-down)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-up {\n --tw-text-opacity:1;\n color: rgb(var(--trade-up)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .placeholder-content-faint::-moz-placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .placeholder-content-faint::placeholder {\n --tw-placeholder-opacity:1;\n color: rgb(var(--content-faint)/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .shadow-modal {\n --tw-shadow:var(--shadow-modal);\n --tw-shadow-colored:var(--shadow-modal);\n box-shadow:\n var(--tw-ring-offset-shadow,0 0 #0000),\n var(--tw-ring-shadow,0 0 #0000),\n var(--tw-shadow);\n}\n.hypurr-connect .outline {\n outline-style: solid;\n}\n.hypurr-connect .blur {\n --tw-blur:blur(8px);\n}\n.hypurr-connect .blur,\n.hypurr-connect .drop-shadow {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .drop-shadow {\n --tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06));\n}\n.hypurr-connect .filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.hypurr-connect .backdrop-blur-sm {\n --tw-backdrop-blur:blur(4px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.hypurr-connect .transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n -webkit-backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter,\n -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n.hypurr-connect .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n transition-duration: .15s;\n}\n.hypurr-connect {\n -webkit-font-smoothing: auto;\n -moz-osx-font-smoothing: auto;\n}\n:root {\n --surface-btn:13 18 25;\n --surface-btn-hover:21 23 26;\n --surface-btn-active:30 33 36;\n --surface-bd:38 42 48;\n --surface-bd-hover:68 69 72;\n --surface-bd-active:75 77 80;\n --surface-modal:14 18 24;\n --surface-dropdown:17 24 32;\n --surface-base:11 14 17;\n --surface-deep:9 11 14;\n --surface-raised:17 24 39;\n --surface-elevated:31 41 55;\n --surface-inset:55 65 81;\n --surface-inverse:255 255 255;\n --content:243 244 246;\n --content-secondary:229 231 235;\n --content-tertiary:209 213 219;\n --content-muted:170 177 193;\n --content-subtle:125 133 151;\n --content-faint:107 114 128;\n --content-disabled:55 65 81;\n --line:31 41 55;\n --line-strong:55 65 81;\n --line-subtle:17 24 39;\n --line-inverse:255 255 255;\n --overlay:0 0 0;\n --accent:168 85 247;\n --trade-up:52 211 153;\n --trade-down:248 113 113;\n --purple-400:216 180 254;\n --purple-500:185 125 241;\n --blue-500:90 153 255;\n --green-400:83 203 127;\n --amber-200:253 230 138;\n --amber-400:251 191 36;\n --amber-500:245 158 11;\n --btn-bg:13 18 25;\n --btn-fg:170 177 193;\n --btn-ring:38 42 48;\n --btn-bevel:255 255 255;\n --accent-btn-bg:37 28 57;\n --accent-btn-bg-hover:52 35 80;\n --accent-btn-fg:216 180 254;\n --accent-btn-fg-hover:233 213 255;\n --accent-btn-inset:15 5 35;\n --input-bg:18 23 31;\n --input-bg-focus:26 33 44;\n --input-ring:45 53 64;\n --input-ring-focus:59 69 82;\n --shadow-modal:0 25px 50px -12px rgba(0,0,0,.6);\n --shadow-dropdown:0 8px 40px rgba(0,0,0,.85);\n}\n.light {\n --surface-btn:244 246 249;\n --surface-btn-hover:236 239 243;\n --surface-btn-active:226 230 236;\n --surface-bd:214 220 228;\n --surface-bd-hover:194 201 211;\n --surface-bd-active:168 176 191;\n --surface-modal:255 255 255;\n --surface-dropdown:255 255 255;\n --surface-base:245 244 249;\n --surface-deep:233 236 242;\n --surface-raised:255 255 255;\n --surface-elevated:228 231 237;\n --surface-inset:225 229 235;\n --surface-inverse:17 24 39;\n --content:17 24 39;\n --content-secondary:31 41 55;\n --content-tertiary:55 65 81;\n --content-muted:91 101 115;\n --content-subtle:107 114 128;\n --content-faint:148 163 184;\n --content-disabled:179 185 196;\n --line:222 226 234;\n --line-strong:205 211 220;\n --line-subtle:238 240 243;\n --line-inverse:17 24 39;\n --overlay:0 0 0;\n --accent:147 51 234;\n --trade-up:5 150 105;\n --trade-down:220 38 38;\n --purple-400:124 58 237;\n --purple-500:109 40 217;\n --blue-500:37 99 235;\n --green-400:22 163 74;\n --amber-200:161 98 7;\n --amber-400:180 83 9;\n --amber-500:180 83 9;\n --btn-bg:255 255 255;\n --btn-fg:71 85 105;\n --btn-ring:217 221 228;\n --btn-bevel:15 23 42;\n --accent-btn-bg:243 232 255;\n --accent-btn-bg-hover:233 213 255;\n --accent-btn-fg:109 40 217;\n --accent-btn-fg-hover:88 28 135;\n --accent-btn-inset:147 51 234;\n --input-bg:238 240 246;\n --input-bg-focus:230 232 240;\n --input-ring:200 206 218;\n --input-ring-focus:168 175 192;\n --shadow-modal:0 16px 40px -12px rgba(15,23,42,.24),0 4px 12px -4px rgba(15,23,42,.12);\n --shadow-dropdown:0 12px 28px -8px rgba(15,23,42,.2),0 2px 8px -2px rgba(15,23,42,.1);\n}\n.hypurr-connect .hover\\:border-surface-bd-hover:hover {\n --tw-border-opacity:1;\n border-color: rgb(var(--surface-bd-hover)/var(--tw-border-opacity,1));\n}\n.hypurr-connect .hover\\:bg-surface-btn-hover:hover {\n --tw-bg-opacity:1;\n background-color: rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .hover\\:text-content:hover {\n --tw-text-opacity:1;\n color: rgb(var(--content)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .hover\\:text-content-tertiary:hover {\n --tw-text-opacity:1;\n color: rgb(var(--content-tertiary)/var(--tw-text-opacity,1));\n}\n.hypurr-connect .focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.hypurr-connect .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.hypurr-connect .disabled\\:opacity-40:disabled {\n opacity: .4;\n}\n.hypurr-connect .disabled\\:opacity-50:disabled {\n opacity: .5;\n}\n');
|
|
25
25
|
|
|
26
26
|
// src/HypurrConnectProvider.tsx
|
|
27
27
|
import {
|
|
@@ -507,6 +507,18 @@ function HypurrConnectProvider({
|
|
|
507
507
|
localStorage.setItem(TELEGRAM_STORAGE_KEY, token);
|
|
508
508
|
localStorage.removeItem(LEGACY_TELEGRAM_STORAGE_KEY);
|
|
509
509
|
}, []);
|
|
510
|
+
useEffect(() => {
|
|
511
|
+
if (typeof document === "undefined" || !document.fonts) return;
|
|
512
|
+
for (const face of [
|
|
513
|
+
"500 1em 'Google Sans Code'",
|
|
514
|
+
"700 1em 'Google Sans Code'",
|
|
515
|
+
"600 1em Inter",
|
|
516
|
+
"700 1em Inter"
|
|
517
|
+
]) {
|
|
518
|
+
void document.fonts.load(face).catch(() => {
|
|
519
|
+
});
|
|
520
|
+
}
|
|
521
|
+
}, []);
|
|
510
522
|
useEffect(() => {
|
|
511
523
|
const params = new URLSearchParams(window.location.search);
|
|
512
524
|
const token = params.get("token");
|
|
@@ -4135,7 +4147,7 @@ function UserProfileModal({
|
|
|
4135
4147
|
navigator.clipboard.writeText(displayName);
|
|
4136
4148
|
onNotify?.({ type: "success", message: "Address copied" });
|
|
4137
4149
|
}, [displayName, onNotify]);
|
|
4138
|
-
return /* @__PURE__ */ jsxs10(
|
|
4150
|
+
return /* @__PURE__ */ jsxs10("div", { className: "hypurr-connect", style: { display: "contents" }, children: [
|
|
4139
4151
|
/* @__PURE__ */ jsx11(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsxs10(Fragment7, { children: [
|
|
4140
4152
|
/* @__PURE__ */ jsx11(SpinKeyframes, {}),
|
|
4141
4153
|
/* @__PURE__ */ jsx11(
|
|
@@ -4914,7 +4926,7 @@ function IconBtn({
|
|
|
4914
4926
|
borderRadius: 4,
|
|
4915
4927
|
background: hovered ? hoverBackgroundColor ?? "transparent" : "transparent",
|
|
4916
4928
|
border: "none",
|
|
4917
|
-
color: hovered ? color : profileColors.
|
|
4929
|
+
color: hovered ? color : profileColors.muted,
|
|
4918
4930
|
cursor: "pointer",
|
|
4919
4931
|
display: "flex",
|
|
4920
4932
|
alignItems: "center",
|
|
@@ -5122,7 +5134,7 @@ function WalletSelectorDropdown({
|
|
|
5122
5134
|
wallet.id
|
|
5123
5135
|
);
|
|
5124
5136
|
};
|
|
5125
|
-
return /* @__PURE__ */ jsxs11(
|
|
5137
|
+
return /* @__PURE__ */ jsxs11("div", { className: "hypurr-connect", style: { display: "contents" }, children: [
|
|
5126
5138
|
/* @__PURE__ */ jsx12(AnimatePresence7, { children: isOpen && /* @__PURE__ */ jsxs11(
|
|
5127
5139
|
motion7.div,
|
|
5128
5140
|
{
|