@relayprotocol/relay-kit-ui 6.0.2 → 6.0.4

package/_cjs/src/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(#\#) {
@@ -2044,22 +2048,6 @@
     text-align: left;
 }
 
-.relay-h_min\(85vh\,_540px\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    height: min(85vh, 540px);
-}
-
-.relay-w_min\(400px\,_100vw\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: min(400px, 100vw);
-}
-
-.relay-max-w_min\(400px\,_100vw\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    max-width: min(400px, 100vw);
-}
-
-.relay-box_border-box:not(#\#):not(#\#):not(#\#):not(#\#) {
-    box-sizing: border-box;
-}
-
 .relay-max-w_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
     max-width: 100%;
 }
@@ -2072,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;
 }
@@ -2080,6 +2072,30 @@
     width: 27px;
 }
 
+.relay-z_100:not(#\#):not(#\#):not(#\#):not(#\#) {
+    z-index: 100;
+}
+
+.relay-bg_widget-background:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--relay-colors-widget-background);
+}
+
+.relay-h_min\(85vh\,_540px\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: min(85vh, 540px);
+}
+
+.relay-w_min\(400px\,_100vw\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: min(400px, 100vw);
+}
+
+.relay-max-w_min\(400px\,_100vw\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-width: min(400px, 100vw);
+}
+
+.relay-box_border-box:not(#\#):not(#\#):not(#\#):not(#\#) {
+    box-sizing: border-box;
+}
+
 .relay-gap_2px:not(#\#):not(#\#):not(#\#):not(#\#) {
     gap: 2px;
 }
@@ -2244,6 +2260,18 @@
     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;
+}
+
 .relay---thickness_1px:not(#\#):not(#\#):not(#\#):not(#\#) {
     --thickness: 1px;
 }
@@ -2268,12 +2296,8 @@
     min-width: 400px;
 }
 
-.relay-max-w_400px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    max-width: 400px;
-}
-
-.relay-p_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding: 16px;
+.relay-py_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: 16px;
 }
 
 .relay-text_green9:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2288,8 +2312,8 @@
     min-height: 50px;
 }
 
-.relay-w_248px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 248px;
+.relay-w_220px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 220px;
 }
 
 .relay-p_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2504,6 +2528,10 @@
     border: 1px solid transparent;
 }
 
+.relay-text_inherit:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: inherit;
+}
+
 .relay-w_1:not(#\#):not(#\#):not(#\#):not(#\#) {
     width: 1px;
 }
@@ -3076,8 +3104,8 @@
     margin-top: 4px;
 }
 
-.relay-border_slate\.4:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-color: var(--relay-colors-slate-4);
+.relay-mt_-8px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-top: -8px;
 }
 
 .relay-leading_32px:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -3092,6 +3120,10 @@
     border-color: var(--relay-colors-gray4);
 }
 
+.relay-justify_start:not(#\#):not(#\#):not(#\#):not(#\#) {
+    justify-content: start;
+}
+
 .relay-leading_15px:not(#\#):not(#\#):not(#\#):not(#\#) {
     line-height: 15px;
 }
@@ -3332,16 +3364,16 @@
     filter: brightness(130%);
 }
 
-.\[\&\[data-state\=\"active\"\]\]\:relay-bg_white[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background: white;
+.\[\&\[data-state\=\"active\"\]\]\:relay-bg_widget-background[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--relay-colors-widget-background);
 }
 
 .\[\&\[data-state\=\"active\"\]\]\:relay-rounded_12px[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
     border-radius: 12px;
 }
 
-.\[\&\[data-state\=\"active\"\]\]\:relay-text_gray12[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-gray12);
+.\[\&\[data-state\=\"active\"\]\]\:relay-text_text-default[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: var(--relay-colors-text-default);
 }
 
 .disabled\:relay-bg_button-disabled-background:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -3426,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);
 }
@@ -3563,8 +3590,8 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
     color: var(--relay-colors-gray10);
 }
 
-.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:\[\&\[data-state\=\"active\"\]\]\:relay-bg_gray1[data-state="active"],[data-theme="dark"]:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:\[\&\[data-state\=\"active\"\]\]\:relay-bg_gray1[data-state="active"] {
-    background: var(--relay-colors-gray1);
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:\[\&\[data-state\=\"active\"\]\]\:relay-bg_widget-background[data-state="active"],[data-theme="dark"]:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:\[\&\[data-state\=\"active\"\]\]\:relay-bg_widget-background[data-state="active"] {
+    background: var(--relay-colors-widget-background);
 }
 
 .disabled\:hover\:relay-bg_button-disabled-background:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -3639,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;
 }
@@ -3653,6 +3689,33 @@ 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;
+}
+}
+
+@media screen and (min-width: 56.25rem) {
+    .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-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-border_slate\.4:not(#\#):not(#\#):not(#\#):not(#\#) {
+      border-color: var(--relay-colors-slate-4);
+}
+    .md\:relay-bg_widget-card-background:not(#\#):not(#\#):not(#\#):not(#\#) {
+      background-color: var(--relay-colors-widget-card-background);
 }
 }
 

package/_cjs/src/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UI_VERSION = void 0;
-exports.UI_VERSION = '6.0.2';
+exports.UI_VERSION = '6.0.4';
 //# sourceMappingURL=version.js.map