@relayprotocol/relay-kit-ui 6.0.3 → 6.0.4

package/dist/panda.buildinfo.json

@@ -152,7 +152,7 @@
       "padding]___[value:8px",
       "width]___[value:32px",
       "height]___[value:32px",
-      "zIndex]___[value:1000",
+      "zIndex]___[value:10000001",
       "width]___[value:370]___[cond:sm",
       "marginLeft]___[value:-20px",
       "marginLeft]___[value:0",
@@ -252,13 +252,12 @@
       "width]___[value:100%]___[cond:@media(max-width: 520px)",
       "srOnly]___[value:true",
       "marginInline]___[value:4",
-      "zIndex]___[value:5",
+      "zIndex]___[value:10000002",
       "background]___[value:modal-background",
       "boxShadow]___[value:0px 0px 50px 0px #0000001F",
       "border]___[value:dropdown-border",
-      "backdropFilter]___[value:brightness(95%)]___[cond:_hover",
+      "transition]___[value:background-color 150ms linear",
       "backgroundColor]___[value:gray/10]___[cond:_hover",
-      "backdropFilter]___[value:brightness(95%)]___[cond:&:focus",
       "backgroundColor]___[value:gray/10]___[cond:&:focus",
       "alignItems]___[value:flex-start",
       "alignItems]___[value:flex-end",
@@ -343,7 +342,7 @@
       "color]___[value:amber12",
       "fontStyle]___[value:italic",
       "fill]___[value:modal-background",
-      "zIndex]___[value:9999",
+      "zIndex]___[value:10000004",
       "boxShadow]___[value:0px 1px 5px rgba(0,0,0,0.2)",
       "color]___[value:{colors.grass.9}",
       "color]___[value:{colors.amber.9}",
@@ -399,6 +398,7 @@
       "maxWidth]___[value:260",
       "gap]___[value:10px",
       "paddingBottom]___[value:8px",
+      "backdropFilter]___[value:brightness(95%)]___[cond:_hover",
       "paddingTop]___[value:8px",
       "alignItems]___[value:start",
       "backgroundColor]___[value:widget-card-background",
@@ -444,14 +444,20 @@
       "paddingBlock]___[value:5",
       "maxWidth]___[value:312",
       "alignSelf]___[value:center",
+      "paddingInline]___[value:0",
       "minWidth]___[value:auto",
+      "padding]___[value:0]___[cond:@media(min-width: 660px)",
       "width]___[value:27",
+      "fontSize]___[value:14px]___[cond:@media(min-width: 660px)",
+      "color]___[value:text-default]___[cond:@media(min-width: 660px)",
+      "lineHeight]___[value:20px]___[cond:@media(min-width: 660px)",
       "zIndex]___[value:100",
       "background]___[value:widget-background",
       "height]___[value:min(85vh, 540px)",
       "width]___[value:min(400px, 100vw)",
       "maxWidth]___[value:min(400px, 100vw)",
       "boxSizing]___[value:border-box",
+      "paddingInline]___[value:2]___[cond:@media(min-width: 660px)",
       "gap]___[value:2px",
       "flexGrow]___[value:1",
       "alignItems]___[value:end",
@@ -540,7 +546,6 @@
       "minWidth]___[value:400px",
       "backgroundColor]___[value:widget-card-background]___[cond:md",
       "paddingBlock]___[value:16px",
-      "paddingInline]___[value:0",
       "paddingInline]___[value:16px]___[cond:md",
       "borderRadius]___[value:widget-card-border-radius]___[cond:md",
       "color]___[value:green9",

package/dist/styles.css

@@ -1448,8 +1448,8 @@
     height: 32px;
 }
 
-.relay-z_1000:not(#\#):not(#\#):not(#\#):not(#\#) {
-    z-index: 1000;
+.relay-z_10000001:not(#\#):not(#\#):not(#\#):not(#\#) {
+    z-index: 10000001;
 }
 
 .relay-w_48px:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1650,8 +1650,8 @@
     margin-inline: var(--relay-spacing-4);
 }
 
-.relay-z_5:not(#\#):not(#\#):not(#\#):not(#\#) {
-    z-index: 5;
+.relay-z_10000002:not(#\#):not(#\#):not(#\#):not(#\#) {
+    z-index: 10000002;
 }
 
 .relay-bg_modal-background:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1666,6 +1666,10 @@
     border: var(--relay-borders-dropdown-border);
 }
 
+.relay-transition_background-color_150ms_linear:not(#\#):not(#\#):not(#\#):not(#\#) {
+    transition: background-color 150ms linear;
+}
+
 .relay-px_16:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-inline: 16px;
 }
@@ -1806,8 +1810,8 @@
     fill: var(--relay-colors-modal-background);
 }
 
-.relay-z_9999:not(#\#):not(#\#):not(#\#):not(#\#) {
-    z-index: 9999;
+.relay-z_10000004:not(#\#):not(#\#):not(#\#):not(#\#) {
+    z-index: 10000004;
 }
 
 .relay-shadow_0px_1px_5px_rgba\(0\,0\,0\,0\.2\):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2056,6 +2060,10 @@
     max-width: 312px;
 }
 
+.relay-px_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: 0;
+}
+
 .relay-min-w_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
     min-width: auto;
 }
@@ -2292,10 +2300,6 @@
     padding-block: 16px;
 }
 
-.relay-px_0:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-inline: 0;
-}
-
 .relay-text_green9:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: var(--relay-colors-green9);
 }
@@ -3454,11 +3458,6 @@
     border-radius: 4px;
 }
 
-.\[\&\:focus\]\:relay-backdrop_brightness\(95\%\):focus:not(#\#):not(#\#):not(#\#):not(#\#) {
-    backdrop-filter: brightness(95%);
-    -webkit-backdrop-filter: brightness(95%);
-}
-
 .focus\:relay-shadow_inset_0_0_0_2px_var\(--focusColor\):is(:focus, [data-focus]):not(#\#):not(#\#):not(#\#):not(#\#) {
     box-shadow: inset 0 0 0 2px var(--focusColor);
 }
@@ -3667,6 +3666,15 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
 }
 
 @media(min-width: 660px) {
+    .\[\@media\(min-width\:_660px\)\]\:relay-p_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+      padding: 0;
+}
+    .\[\@media\(min-width\:_660px\)\]\:relay-text_text-default:not(#\#):not(#\#):not(#\#):not(#\#) {
+      color: var(--relay-colors-text-default);
+}
+    .\[\@media\(min-width\:_660px\)\]\:relay-px_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+      padding-inline: var(--relay-spacing-2);
+}
     .\[\@media\(min-width\:_660px\)\]\:relay-min-w_660:not(#\#):not(#\#):not(#\#):not(#\#) {
       min-width: 660px;
 }
@@ -3681,6 +3689,12 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
 }
     .\[\@media\(min-width\:_660px\)\]\:relay-max-w_408:not(#\#):not(#\#):not(#\#):not(#\#) {
       max-width: 408px;
+}
+    .\[\@media\(min-width\:_660px\)\]\:relay-fs_14px:not(#\#):not(#\#):not(#\#):not(#\#) {
+      font-size: 14px;
+}
+    .\[\@media\(min-width\:_660px\)\]\:relay-leading_20px:not(#\#):not(#\#):not(#\#):not(#\#) {
+      line-height: 20px;
 }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relayprotocol/relay-kit-ui",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "type": "module",
   "main": "./_cjs/src/index.js",
   "module": "./_esm/src/index.js",
@@ -84,9 +84,9 @@
     "pandacss-preset-radix-colors": "^0.2.0",
     "qrcode.react": "^4.1.0",
     "usehooks-ts": "^3.1.0",
-    "@relayprotocol/relay-design-system": "^1.0.0",
+    "@relayprotocol/relay-kit-hooks": "2.0.8",
     "@relayprotocol/relay-sdk": "3.1.0",
-    "@relayprotocol/relay-kit-hooks": "2.0.8"
+    "@relayprotocol/relay-design-system": "^1.0.0"
   },
   "keywords": [
     "eth",