@relayprotocol/relay-kit-ui 5.1.1 → 5.1.2

package/dist/panda.buildinfo.json

@@ -414,6 +414,14 @@
       "scrollbarColor]___[value:var(--relay-colors-gray5) transparent",
       "backgroundColor]___[value:gray6]___[cond:_hover",
       "backgroundColor]___[value:gray6",
+      "overflowX]___[value:auto",
+      "paddingBlock]___[value:10px",
+      "height]___[value:40px",
+      "borderRadius]___[value:8px",
+      "width]___[value:20px",
+      "minWidth]___[value:40px",
+      "height]___[value:56px",
+      "textAlign]___[value:left",
       "marginBlock]___[value:2",
       "paddingRight]___[value:2",
       "--borderColor]___[value:colors.gray5",
@@ -439,13 +447,18 @@
       "scrollSnapAlign]___[value:start",
       "minHeight]___[value:24",
       "color]___[value:grey",
+      "height]___[value:min(85vh, 600px)",
+      "maxHeight]___[value:min(85vh, 600px)",
+      "maxHeight]___[value:100%",
+      "borderRadius]___[value:0px",
       "minWidth]___[value:660]___[cond:@media(min-width: 660px)",
       "minWidth]___[value:408]___[cond:@media(min-width: 660px)",
       "minWidth]___[value:400]___[cond:@media(min-width: 660px)",
       "maxWidth]___[value:660]___[cond:@media(min-width: 660px)",
       "maxWidth]___[value:408]___[cond:@media(min-width: 660px)",
-      "height]___[value:min(85vh, 600px)",
+      "maxWidth]___[value:100%]___[cond:sm",
       "overflowY]___[value:hidden",
+      "paddingBottom]___[value:1",
       "paddingTop]___[value:2",
       "paddingBlock]___[value:5",
       "maxWidth]___[value:312",
@@ -478,7 +491,6 @@
       "marginInline]___[value:auto",
       "height]___[value:32",
       "width]___[value:32",
-      "width]___[value:20px",
       "padding]___[value:4px",
       "marginTop]___[value:4px",
       "--borderWidth]___[value:borders.widget-swap-currency-button-border-width",
@@ -577,7 +589,6 @@
       "opacity]___[value:0.15]___[cond:_before",
       "backgroundColor]___[value:primary-color]___[cond:_before",
       "zIndex]___[value:-1]___[cond:_before",
-      "textAlign]___[value:left",
       "position]___[value:sticky",
       "height]___[value:calc(100% - 24px)",
       "scrollPaddingTop]___[value:40px",

package/dist/styles.css

@@ -1992,6 +1992,34 @@
     scrollbar-color: var(--relay-colors-gray5) transparent;
 }
 
+.relay-py_10px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: 10px;
+}
+
+.relay-h_40px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: 40px;
+}
+
+.relay-rounded_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 8px;
+}
+
+.relay-w_20px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 20px;
+}
+
+.relay-min-w_40px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: 40px;
+}
+
+.relay-h_56px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: 56px;
+}
+
+.relay-text-align_left:not(#\#):not(#\#):not(#\#):not(#\#) {
+    text-align: left;
+}
+
 .relay-my_2:not(#\#):not(#\#):not(#\#):not(#\#) {
     margin-block: var(--relay-spacing-2);
 }
@@ -2060,6 +2088,18 @@
     height: min(85vh, 600px);
 }
 
+.relay-max-h_min\(85vh\,_600px\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-height: min(85vh, 600px);
+}
+
+.relay-max-h_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-height: 100%;
+}
+
+.relay-rounded_0px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 0px;
+}
+
 .relay-py_5:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-block: var(--relay-spacing-5);
 }
@@ -2132,10 +2172,6 @@
     width: 32px;
 }
 
-.relay-w_20px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 20px;
-}
-
 .relay-p_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding: 4px;
 }
@@ -2360,10 +2396,6 @@
     min-height: 28px;
 }
 
-.relay-text-align_left:not(#\#):not(#\#):not(#\#):not(#\#) {
-    text-align: left;
-}
-
 .relay-pos_sticky:not(#\#):not(#\#):not(#\#):not(#\#) {
     position: sticky;
 }
@@ -2872,6 +2904,10 @@
     background-color: var(--relay-colors-gray6);
 }
 
+.relay-overflow-x_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
+    overflow-x: auto;
+}
+
 .relay-pr_2:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-right: var(--relay-spacing-2);
 }
@@ -2892,6 +2928,10 @@
     overflow-y: hidden;
 }
 
+.relay-pb_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-bottom: var(--relay-spacing-1);
+}
+
 .relay-pt_2:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-top: var(--relay-spacing-2);
 }
@@ -3405,6 +3445,9 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
 }
     .sm\:relay-max-w_532px:not(#\#):not(#\#):not(#\#):not(#\#) {
       max-width: 532px;
+}
+    .sm\:relay-max-w_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
+      max-width: 100%;
 }
     .sm\:relay-d_block:not(#\#):not(#\#):not(#\#):not(#\#) {
       display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relayprotocol/relay-kit-ui",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "type": "module",
   "main": "./_cjs/src/index.js",
   "module": "./_esm/src/index.js",
@@ -79,9 +79,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-sdk": "3.1.0",
+    "@relayprotocol/relay-design-system": "^1.0.0"
   },
   "keywords": [
     "eth",