@relayprotocol/relay-kit-ui 6.0.2 → 6.0.3

package/dist/panda.buildinfo.json

@@ -438,10 +438,6 @@
       "minWidth]___[value:40px",
       "height]___[value:56px",
       "textAlign]___[value:left",
-      "height]___[value:min(85vh, 540px)",
-      "width]___[value:min(400px, 100vw)",
-      "maxWidth]___[value:min(400px, 100vw)",
-      "boxSizing]___[value:border-box",
       "overflowY]___[value:hidden",
       "maxWidth]___[value:100%",
       "paddingTop]___[value:2",
@@ -450,6 +446,12 @@
       "alignSelf]___[value:center",
       "minWidth]___[value:auto",
       "width]___[value:27",
+      "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",
       "gap]___[value:2px",
       "flexGrow]___[value:1",
       "alignItems]___[value:end",
@@ -519,28 +521,38 @@
       "borderRadius]___[value:widget-swap-currency-button-border-radius",
       "color]___[value:secondary",
       "height]___[value:10",
-      "borderColor]___[value:slate.4",
+      "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",
       "--thickness]___[value:1px",
       "borderBlockEndWidth]___[value:var(--thickness)",
       "borderColor]___[value:gray4",
+      "justifyContent]___[value:start",
       "minHeight]___[value:42",
       "width]___[value:90",
       "width]___[value:70",
       "minWidth]___[value:240",
       "minWidth]___[value:400px",
-      "maxWidth]___[value:400px",
-      "padding]___[value:16px",
+      "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",
       "height]___[value:50",
       "minHeight]___[value:50",
-      "width]___[value:248px",
+      "width]___[value:220px",
       "padding]___[value:12px",
-      "backgroundColor]___[value:widget-selector-background]___[cond:_disabled",
       "maxWidth]___[value:150",
       "minWidth]___[value:60",
-      "lineHeight]___[value:15px",
+      "backgroundColor]___[value:widget-selector-background]___[cond:_disabled",
       "maxWidth]___[value:100",
+      "lineHeight]___[value:15px",
       "flexDirection]___[value:row]___[cond:bp500",
       "backgroundColor]___[value:subtle-background-color",
       "padding]___[value:12px 16px",
@@ -636,14 +648,15 @@
       "filter]___[value:brightness(97%)]___[cond:_light",
       "filter]___[value:brightness(130%)]___[cond:_dark",
       "border]___[value:1px solid transparent",
-      "background]___[value:white]___[cond:&[data-state=\"active\"]",
+      "background]___[value:widget-background]___[cond:&[data-state=\"active\"]",
       "borderRadius]___[value:12px]___[cond:&[data-state=\"active\"]",
       "borderColor]___[value:slate.4]___[cond:&[data-state=\"active\"]",
-      "color]___[value:gray12]___[cond:&[data-state=\"active\"]",
+      "color]___[value:text-default]___[cond:&[data-state=\"active\"]",
       "backgroundColor]___[value:transparent !important]___[cond:&:not([data-state=\"active\"])<___>_hover",
-      "background]___[value:gray1]___[cond:_dark<___>&[data-state=\"active\"]",
+      "background]___[value:widget-background]___[cond:_dark<___>&[data-state=\"active\"]",
       "borderColor]___[value:gray.4]___[cond:_dark<___>&[data-state=\"active\"]",
       "backgroundColor]___[value:transparent !important]___[cond:_dark<___>&:not([data-state=\"active\"])<___>_hover",
+      "color]___[value:inherit",
       "width]___[value:1",
       "marginBlock]___[value:5px",
       "marginLeft]___[value:4",

package/dist/styles.css

@@ -2044,22 +2044,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%;
 }
@@ -2080,6 +2064,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 +2252,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 +2288,12 @@
     min-width: 400px;
 }
 
-.relay-max-w_400px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    max-width: 400px;
+.relay-py_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: 16px;
 }
 
-.relay-p_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding: 16px;
+.relay-px_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: 0;
 }
 
 .relay-text_green9:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2288,8 +2308,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 +2524,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 +3100,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 +3116,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 +3360,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(#\#) {
@@ -3563,8 +3591,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(#\#) {
@@ -3656,6 +3684,27 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
 }
 }
 
+@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);
+}
+}
+
 @media screen and (max-width: 37.4975rem) {
     .smDown\:relay-d_flex:not(#\#):not(#\#):not(#\#):not(#\#) {
       display: flex;

package/package.json

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