@relayprotocol/relay-kit-ui 6.0.3 → 6.0.5

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",
@@ -493,7 +499,7 @@
       "marginRight]___[value:6px",
       "textDecoration]___[value:line-through",
       "border]___[value:widget-border",
-      "minWidth]___[value:300",
+      "minWidth]___[value:320",
       "maxWidth]___[value:408",
       "cursor]___[value:pointer]___[cond:_hover",
       "height]___[value:23",
@@ -523,9 +529,6 @@
       "height]___[value:10",
       "border]___[value:1px solid]___[cond:md",
       "borderColor]___[value:slate.4]___[cond:md",
-      "minWidth]___[value:350px",
-      "minWidth]___[value:400px]___[cond:md",
-      "maxWidth]___[value:400px",
       "gap]___[value:32px",
       "marginTop]___[value:-8px",
       "lineHeight]___[value:32px",
@@ -537,12 +540,13 @@
       "width]___[value:90",
       "width]___[value:70",
       "minWidth]___[value:240",
-      "minWidth]___[value:400px",
+      "minHeight]___[value:85vh",
       "backgroundColor]___[value:widget-card-background]___[cond:md",
-      "paddingBlock]___[value:16px",
-      "paddingInline]___[value:0",
+      "paddingBlock]___[value:12px",
+      "paddingBlock]___[value:16px]___[cond:md",
       "paddingInline]___[value:16px]___[cond:md",
       "borderRadius]___[value:widget-card-border-radius]___[cond:md",
+      "minHeight]___[value:auto]___[cond:md",
       "color]___[value:green9",
       "height]___[value:50",
       "minHeight]___[value:50",
@@ -647,6 +651,7 @@
       "whiteSpace]___[value:pre",
       "filter]___[value:brightness(97%)]___[cond:_light",
       "filter]___[value:brightness(130%)]___[cond:_dark",
+      "minWidth]___[value:400]___[cond:md",
       "border]___[value:1px solid transparent",
       "background]___[value:widget-background]___[cond:&[data-state=\"active\"]",
       "borderRadius]___[value:12px]___[cond:&[data-state=\"active\"]",

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;
 }
@@ -2176,8 +2184,8 @@
     border: var(--relay-borders-widget-border);
 }
 
-.relay-min-w_300:not(#\#):not(#\#):not(#\#):not(#\#) {
-    min-width: 300px;
+.relay-min-w_320:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: 320px;
 }
 
 .relay-max-w_408:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2252,14 +2260,6 @@
     height: 10px;
 }
 
-.relay-min-w_350px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    min-width: 350px;
-}
-
-.relay-max-w_400px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    max-width: 400px;
-}
-
 .relay-gap_32px:not(#\#):not(#\#):not(#\#):not(#\#) {
     gap: 32px;
 }
@@ -2284,16 +2284,12 @@
     min-width: 240px;
 }
 
-.relay-min-w_400px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    min-width: 400px;
+.relay-min-h_85vh:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: 85vh;
 }
 
-.relay-py_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-block: 16px;
-}
-
-.relay-px_0:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-inline: 0;
+.relay-py_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: 12px;
 }
 
 .relay-text_green9:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -3454,11 +3450,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 +3658,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 +3681,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;
 }
 }
 
@@ -3688,14 +3694,20 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
     .md\:relay-border_1px_solid:not(#\#):not(#\#):not(#\#):not(#\#) {
       border: 1px solid;
 }
-    .md\:relay-min-w_400px:not(#\#):not(#\#):not(#\#):not(#\#) {
-      min-width: 400px;
+    .md\:relay-py_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
+      padding-block: 16px;
 }
     .md\:relay-px_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
       padding-inline: 16px;
 }
     .md\:relay-rounded_widget-card-border-radius:not(#\#):not(#\#):not(#\#):not(#\#) {
       border-radius: var(--relay-radii-widget-card-border-radius);
+}
+    .md\:relay-min-h_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
+      min-height: auto;
+}
+    .md\:relay-min-w_400:not(#\#):not(#\#):not(#\#):not(#\#) {
+      min-width: 400px;
 }
     .md\:relay-border_slate\.4:not(#\#):not(#\#):not(#\#):not(#\#) {
       border-color: var(--relay-colors-slate-4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relayprotocol/relay-kit-ui",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "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-sdk": "3.1.0",
-    "@relayprotocol/relay-kit-hooks": "2.0.8"
+    "@relayprotocol/relay-kit-hooks": "2.0.8",
+    "@relayprotocol/relay-design-system": "^1.0.0"
   },
   "keywords": [
     "eth",