@relayprotocol/relay-kit-ui 5.1.0 → 5.1.2

package/dist/styles.css

@@ -1164,6 +1164,38 @@
     position: absolute;
 }
 
+.relay-transform_translateY\(-50\%\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    transform: translateY(-50%);
+}
+
+.relay-w_24px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 24px;
+}
+
+.relay-h_24px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: 24px;
+}
+
+.relay-min-w_24px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: 24px;
+}
+
+.relay-min-h_24px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: 24px;
+}
+
+.relay-p_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding: 0;
+}
+
+.relay-rounded_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 4px;
+}
+
+.relay-text_gray8:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: var(--relay-colors-gray8);
+}
+
 .relay-text_\#FFA01C:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: #FFA01C;
 }
@@ -1268,24 +1300,56 @@
     --borderColor: var(--relay-colors-gray-6);
 }
 
-.relay-bg_subtle-background-color:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background: var(--relay-colors-subtle-background-color);
+.relay-w_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: auto;
 }
 
-.relay-border_widget-card-border:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: var(--relay-borders-widget-card-border);
+.relay-py_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: 6px;
 }
 
-.relay-h_36px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    height: 36px;
+.relay-min-h_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: auto;
 }
 
-.relay-px_10px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-inline: 10px;
+.relay-min-h_23px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: 23px;
 }
 
-.relay-max-w_190:not(#\#):not(#\#):not(#\#):not(#\#) {
-    max-width: 190px;
+.relay-rounded_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 6px;
+}
+
+.relay-rounded_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 12px;
+}
+
+.relay-flex_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    flex: 1 1 0%;
+}
+
+.relay-flex_none:not(#\#):not(#\#):not(#\#):not(#\#) {
+    flex: none;
+}
+
+.relay-px_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: var(--relay-spacing-1);
+}
+
+.relay-border_none:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: none;
+}
+
+.relay-text_white:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: white;
+}
+
+.relay-gap_3:not(#\#):not(#\#):not(#\#):not(#\#) {
+    gap: var(--relay-spacing-3);
+}
+
+.relay-w_50\%:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 50%;
 }
 
 .relay-text_subtle:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1296,30 +1360,54 @@
     color: var(--relay-colors-red11);
 }
 
+.relay-max-w_190:not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-width: 190px;
+}
+
+.relay-d_none:not(#\#):not(#\#):not(#\#):not(#\#) {
+    display: none;
+}
+
 .relay-max-w_188:not(#\#):not(#\#):not(#\#):not(#\#) {
     max-width: 188px;
 }
 
-.relay-text_gray8:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-gray8);
+.relay-min-h_32:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: 32px;
 }
 
-.relay-transform_translateY\(-50\%\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    transform: translateY(-50%);
+.relay-py_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: var(--relay-spacing-2);
 }
 
-.relay-w_50\%:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 50%;
+.relay-bg_subtle-background-color:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--relay-colors-subtle-background-color);
 }
 
-.relay-border_none:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: none;
+.relay-border_widget-card-border:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: var(--relay-borders-widget-card-border);
+}
+
+.relay-h_36px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: 36px;
+}
+
+.relay-px_10px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: 10px;
 }
 
 .relay-text-align_right:not(#\#):not(#\#):not(#\#):not(#\#) {
     text-align: right;
 }
 
+.relay-min-h_262px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: 262px;
+}
+
+.relay-max-h_90vh:not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-height: 90vh;
+}
+
 .relay-fill_currentColor:not(#\#):not(#\#):not(#\#):not(#\#) {
     fill: currentColor;
 }
@@ -1364,18 +1452,10 @@
     padding: var(--relay-spacing-3);
 }
 
-.relay-gap_3:not(#\#):not(#\#):not(#\#):not(#\#) {
-    gap: var(--relay-spacing-3);
-}
-
 .relay-bg_gray2:not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--relay-colors-gray2);
 }
 
-.relay-rounded_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-radius: 12px;
-}
-
 .relay-text_amber9:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: var(--relay-colors-amber9);
 }
@@ -1392,10 +1472,6 @@
     height: 14px;
 }
 
-.relay-flex_1:not(#\#):not(#\#):not(#\#):not(#\#) {
-    flex: 1 1 0%;
-}
-
 .relay-bg_gray3:not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--relay-colors-gray3);
 }
@@ -1454,10 +1530,6 @@
     transition: filter 250ms linear;
 }
 
-.relay-text_white:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: white;
-}
-
 .relay-rounded_0:not(#\#):not(#\#):not(#\#):not(#\#) {
     border-radius: 0;
 }
@@ -1474,10 +1546,6 @@
     padding-inline: var(--relay-spacing-3);
 }
 
-.relay-py_2:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-block: var(--relay-spacing-2);
-}
-
 .relay-px_5:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-inline: var(--relay-spacing-5);
 }
@@ -1784,14 +1852,6 @@
     color: warningSecondary;
 }
 
-.relay-px_1:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-inline: var(--relay-spacing-1);
-}
-
-.relay-min-h_23px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    min-height: 23px;
-}
-
 .relay-transform_rotate\(-180deg\):not(#\#):not(#\#):not(#\#):not(#\#) {
     transform: rotate(-180deg);
 }
@@ -1932,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);
 }
@@ -2000,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);
 }
@@ -2072,10 +2172,6 @@
     width: 32px;
 }
 
-.relay-w_20px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 20px;
-}
-
 .relay-p_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding: 4px;
 }
@@ -2300,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;
 }
@@ -2388,18 +2480,30 @@
     flex-wrap: wrap;
 }
 
-.relay-right_2:not(#\#):not(#\#):not(#\#):not(#\#) {
-    right: var(--relay-spacing-2);
+.relay-right_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    right: 8px;
 }
 
-.relay-top_3:not(#\#):not(#\#):not(#\#):not(#\#) {
-    top: var(--relay-spacing-3);
+.relay-top_50\%:not(#\#):not(#\#):not(#\#):not(#\#) {
+    top: 50%;
 }
 
 .relay-justify_center:not(#\#):not(#\#):not(#\#):not(#\#) {
     justify-content: center;
 }
 
+.relay-bg_gray3:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-gray3);
+}
+
+.relay-right_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+    right: var(--relay-spacing-2);
+}
+
+.relay-top_3:not(#\#):not(#\#):not(#\#):not(#\#) {
+    top: var(--relay-spacing-3);
+}
+
 .relay-top_0:not(#\#):not(#\#):not(#\#):not(#\#) {
     top: 0;
 }
@@ -2428,26 +2532,50 @@
     flex-shrink: 0;
 }
 
-.relay-leading_14px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    line-height: 14px;
+.relay-mb_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-bottom: var(--relay-spacing-1);
 }
 
-.relay-flex_row:not(#\#):not(#\#):not(#\#):not(#\#) {
-    flex-direction: row;
+.relay-mb_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-bottom: 0;
 }
 
-.relay-right_8:not(#\#):not(#\#):not(#\#):not(#\#) {
-    right: 8px;
+.relay-fs_14:not(#\#):not(#\#):not(#\#):not(#\#) {
+    font-size: 14px;
 }
 
-.relay-top_50\%:not(#\#):not(#\#):not(#\#):not(#\#) {
-    top: 50%;
+.relay-fs_12:not(#\#):not(#\#):not(#\#):not(#\#) {
+    font-size: 12px;
+}
+
+.relay-fw_500:not(#\#):not(#\#):not(#\#):not(#\#) {
+    font-weight: 500;
+}
+
+.relay-leading_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
+    line-height: 100%;
+}
+
+.relay-bg_widget-selector-background:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-widget-selector-background);
+}
+
+.relay-leading_14px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    line-height: 14px;
+}
+
+.relay-flex_row:not(#\#):not(#\#):not(#\#):not(#\#) {
+    flex-direction: row;
 }
 
 .relay-pr_28px\!:not(#\#) {
     padding-right: 28px !important;
 }
 
+.relay-right_8:not(#\#):not(#\#):not(#\#):not(#\#) {
+    right: 8px;
+}
+
 .relay-ml_-20px:not(#\#):not(#\#):not(#\#):not(#\#) {
     margin-left: -20px;
 }
@@ -2456,14 +2584,6 @@
     margin-left: 0;
 }
 
-.relay-fw_500:not(#\#):not(#\#):not(#\#):not(#\#) {
-    font-weight: 500;
-}
-
-.relay-fs_14:not(#\#):not(#\#):not(#\#):not(#\#) {
-    font-size: 14px;
-}
-
 .relay-fw_900:not(#\#):not(#\#):not(#\#):not(#\#) {
     font-weight: 900;
 }
@@ -2504,10 +2624,6 @@
     background-color: var(--relay-colors-amber3);
 }
 
-.relay-bg_gray3:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-gray3);
-}
-
 .relay-leading_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
     line-height: 16px;
 }
@@ -2720,18 +2836,6 @@
     align-self: flex-start;
 }
 
-.relay-fs_12:not(#\#):not(#\#):not(#\#):not(#\#) {
-    font-size: 12px;
-}
-
-.relay-leading_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
-    line-height: 100%;
-}
-
-.relay-bg_widget-selector-background:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-widget-selector-background);
-}
-
 .relay-ml_2:not(#\#):not(#\#):not(#\#):not(#\#) {
     margin-left: var(--relay-spacing-2);
 }
@@ -2800,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);
 }
@@ -2820,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);
 }
@@ -2920,14 +3032,6 @@
     justify-items: space-between;
 }
 
-.relay-mb_1:not(#\#):not(#\#):not(#\#):not(#\#) {
-    margin-bottom: var(--relay-spacing-1);
-}
-
-.relay-mb_0:not(#\#):not(#\#):not(#\#):not(#\#) {
-    margin-bottom: 0;
-}
-
 .relay-scroll-pt_40px:not(#\#):not(#\#):not(#\#):not(#\#) {
     scroll-padding-top: 40px;
 }
@@ -3242,6 +3346,14 @@
     transform: scale(1.25);
 }
 
+.hover\:relay-bg_widget-selector-hover-background:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-widget-selector-hover-background);
+}
+
+.\[\&\:hover\]\:relay-bg_gray5:hover:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-gray5);
+}
+
 .\[\&\:hover\]\:relay-bg_primary-button-hover-background:hover:not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-primary-button-hover-background);
 }
@@ -3267,10 +3379,6 @@
     background-color: var(--mix-backgroundColor, gray);
 }
 
-.hover\:relay-bg_widget-selector-hover-background:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-widget-selector-hover-background);
-}
-
 .hover\:relay-bg_gray3:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-gray3);
 }
@@ -3323,6 +3431,12 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
 }
 
 @media screen and (min-width: 37.5rem) {
+    .sm\:relay-w_386:not(#\#):not(#\#):not(#\#):not(#\#) {
+      width: 386px;
+}
+    .sm\:relay-gap_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+      gap: var(--relay-spacing-2);
+}
     .sm\:relay-w_370:not(#\#):not(#\#):not(#\#):not(#\#) {
       width: 370px;
 }
@@ -3331,9 +3445,21 @@ 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;
+}
+    .sm\:relay-d_none:not(#\#):not(#\#):not(#\#):not(#\#) {
+      display: none;
 }
     .sm\:relay-max-w_400px\!:not(#\#) {
       max-width: 400px !important;
+}
+    .sm\:relay-fs_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+      font-size: 12px;
 }
 }
 
@@ -3355,6 +3481,30 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
 }
 }
 
+@media screen and (max-width: 37.4975rem) {
+    .smDown\:relay-d_flex:not(#\#):not(#\#):not(#\#):not(#\#) {
+      display: flex;
+}
+    .smDown\:relay-w_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
+      width: 100%;
+}
+    .smDown\:relay-gap_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+      gap: var(--relay-spacing-2);
+}
+    .smDown\:relay---borderColor_colors\.gray\.5:not(#\#):not(#\#):not(#\#):not(#\#) {
+      --borderColor: var(--relay-colors-gray-5);
+}
+    .smDown\:relay-border_1px_solid_var\(--borderColor\):not(#\#):not(#\#):not(#\#):not(#\#) {
+      border: 1px solid var(--borderColor);
+}
+    .smDown\:relay-mb_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+      margin-bottom: var(--relay-spacing-2);
+}
+    .smDown\:relay-bg_transparent:not(#\#):not(#\#):not(#\#):not(#\#) {
+      background-color: transparent;
+}
+}
+
 @media(max-width: 520px) {
     .\[\@media\(max-width\:_520px\)\]\:relay-w_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
       width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relayprotocol/relay-kit-ui",
-  "version": "5.1.0",
+  "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",