@relayprotocol/relay-kit-ui 6.0.1 → 6.0.3

package/dist/panda.buildinfo.json

@@ -77,15 +77,19 @@
       "paddingRight]___[value:2 !important",
       "alignContent]___[value:center",
       "gap]___[value:1",
+      "flexShrink]___[value:1",
+      "minWidth]___[value:0",
       "borderRadius]___[value:12",
       "padding]___[value:1",
       "color]___[value:amber11",
+      "flexShrink]___[value:0",
       "color]___[value:anchor-color",
       "width]___[value:14",
       "height]___[value:14",
+      "whiteSpace]___[value:nowrap",
+      "textOverflow]___[value:ellipsis",
       "transition]___[value:backdrop-filter 250ms linear",
       "backdropFilter]___[value:brightness(98%)]___[cond:_hover",
-      "flexShrink]___[value:0",
       "--borderColor]___[value:colors.gray.6",
       "width]___[value:auto",
       "marginBottom]___[value:1",
@@ -128,8 +132,11 @@
       "minHeight]___[value:32",
       "paddingBlock]___[value:2",
       "backgroundColor]___[value:gray5]___[cond:&:hover",
+      "borderRadius]___[value:8px",
+      "padding]___[value:4px 6px",
       "background]___[value:subtle-background-color",
-      "border]___[value:widget-card-border",
+      "border]___[value:1px solid",
+      "borderColor]___[value:gray5",
       "height]___[value:36px",
       "paddingInline]___[value:10px",
       "paddingRight]___[value:28px !important",
@@ -218,7 +225,7 @@
       "fontFamily]___[value:heading]___[cond:&:not(:disabled)",
       "fontWeight]___[value:700]___[cond:&:not(:disabled)",
       "textTransform]___[value:uppercase]___[cond:&:not(:disabled)",
-      "fontStyle]___[value:var(--relay-fonts-button-cta-font-style, normal)]___[cond:&:not(:disabled)",
+      "fontStyle]___[value:var(--relay-fonts-button-cta-font-style, italic)]___[cond:&:not(:disabled)",
       "token]___[value:32",
       "chain]___[value:16",
       "borderRadius]___[value:4",
@@ -273,8 +280,6 @@
       "boxShadow]___[value:inset 0 0 0 2px var(--focusColor)]___[cond:_focus",
       "WebkitAppearance]___[value:none]___[cond:_spinButtons",
       "lineHeight]___[value:42px",
-      "textOverflow]___[value:ellipsis",
-      "whiteSpace]___[value:nowrap",
       "left]___[value:unset",
       "left]___[value:16",
       "right]___[value:16",
@@ -291,8 +296,6 @@
       "width]___[value:100",
       "height]___[value:12",
       "animation]___[value:pulse 3s ease-in-out infinite",
-      "borderRadius]___[value:8px",
-      "padding]___[value:4px 6px",
       "backgroundColor]___[value:gray2]___[cond:_hover",
       "width]___[value:38px",
       "height]___[value:20px",
@@ -351,6 +354,7 @@
       "transitionDelay]___[value:0s, 0s",
       "transitionDelay]___[value:0s, 300ms",
       "borderRadius]___[value:widget-card-border-radius",
+      "border]___[value:widget-card-border",
       "transition]___[value:border-radius 300ms, border-bottom 0s",
       "marginBottom]___[value:widget-card-section-gutter",
       "paddingBottom]___[value:0",
@@ -383,6 +387,7 @@
       "marginTop]___[value:2",
       "marginBottom]___[value:2",
       "textTransform]___[value:uppercase",
+      "textTransform]___[value:none",
       "fontStyle]___[value:var(--relay-fonts-button-cta-font-style, italic)",
       "color]___[value:error",
       "color]___[value:primary",
@@ -433,11 +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)",
-      "minWidth]___[value:0",
-      "boxSizing]___[value:border-box",
       "overflowY]___[value:hidden",
       "maxWidth]___[value:100%",
       "paddingTop]___[value:2",
@@ -446,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",
@@ -515,29 +521,38 @@
       "borderRadius]___[value:widget-swap-currency-button-border-radius",
       "color]___[value:secondary",
       "height]___[value:10",
-      "border]___[value:1px solid",
-      "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",
@@ -633,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

@@ -1264,6 +1264,10 @@
     gap: var(--relay-spacing-1);
 }
 
+.relay-min-w_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: 0;
+}
+
 .relay-rounded_12:not(#\#):not(#\#):not(#\#):not(#\#) {
     border-radius: 12px;
 }
@@ -1288,6 +1292,14 @@
     height: 14px;
 }
 
+.relay-white-space_nowrap:not(#\#):not(#\#):not(#\#):not(#\#) {
+    white-space: nowrap;
+}
+
+.relay-text-overflow_ellipsis:not(#\#):not(#\#):not(#\#):not(#\#) {
+    text-overflow: ellipsis;
+}
+
 .relay-transition_backdrop-filter_250ms_linear:not(#\#):not(#\#):not(#\#):not(#\#) {
     transition: backdrop-filter 250ms linear;
 }
@@ -1380,12 +1392,20 @@
     padding-block: var(--relay-spacing-2);
 }
 
+.relay-rounded_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 8px;
+}
+
+.relay-p_4px_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding: 4px 6px;
+}
+
 .relay-bg_subtle-background-color:not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--relay-colors-subtle-background-color);
 }
 
-.relay-border_widget-card-border:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: var(--relay-borders-widget-card-border);
+.relay-border_1px_solid:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: 1px solid;
 }
 
 .relay-h_36px:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1662,14 +1682,6 @@
     color: var(--relay-colors-input-color);
 }
 
-.relay-text-overflow_ellipsis:not(#\#):not(#\#):not(#\#):not(#\#) {
-    text-overflow: ellipsis;
-}
-
-.relay-white-space_nowrap:not(#\#):not(#\#):not(#\#):not(#\#) {
-    white-space: nowrap;
-}
-
 .relay-z_0:not(#\#):not(#\#):not(#\#):not(#\#) {
     z-index: 0;
 }
@@ -1706,14 +1718,6 @@
     animation: pulse 3s ease-in-out infinite;
 }
 
-.relay-rounded_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-radius: 8px;
-}
-
-.relay-p_4px_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding: 4px 6px;
-}
-
 .relay-w_38px:not(#\#):not(#\#):not(#\#):not(#\#) {
     width: 38px;
 }
@@ -1840,6 +1844,10 @@
     border-radius: var(--relay-radii-widget-card-border-radius);
 }
 
+.relay-border_widget-card-border:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: var(--relay-borders-widget-card-border);
+}
+
 .relay-transition_border-radius_300ms\,_border-bottom_0s:not(#\#):not(#\#):not(#\#):not(#\#) {
     transition: border-radius 300ms, border-bottom 0s;
 }
@@ -1908,6 +1916,10 @@
     text-transform: uppercase;
 }
 
+.relay-text-transform_none:not(#\#):not(#\#):not(#\#):not(#\#) {
+    text-transform: none;
+}
+
 .relay-text_error:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: error;
 }
@@ -2032,26 +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-min-w_0:not(#\#):not(#\#):not(#\#):not(#\#) {
-    min-width: 0;
-}
-
-.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 +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;
 }
@@ -2236,8 +2252,16 @@
     height: 10px;
 }
 
-.relay-border_1px_solid:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: 1px solid;
+.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(#\#) {
@@ -2264,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(#\#) {
@@ -2284,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(#\#) {
@@ -2500,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;
 }
@@ -2616,6 +2644,10 @@
     align-content: center;
 }
 
+.relay-shrink_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    flex-shrink: 1;
+}
+
 .relay-shrink_0:not(#\#):not(#\#):not(#\#):not(#\#) {
     flex-shrink: 0;
 }
@@ -2664,6 +2696,10 @@
     flex-direction: row;
 }
 
+.relay-border_gray5:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-color: var(--relay-colors-gray5);
+}
+
 .relay-pr_28px\!:not(#\#) {
     padding-right: 28px !important;
 }
@@ -3064,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(#\#) {
@@ -3080,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;
 }
@@ -3320,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(#\#) {
@@ -3344,8 +3384,8 @@
     font-weight: 700;
 }
 
-.\[\&\:not\(\:disabled\)\]\:relay-font-style_var\(--relay-fonts-button-cta-font-style\,_normal\):not(:disabled):not(#\#):not(#\#):not(#\#):not(#\#) {
-    font-style: var(--relay-fonts-button-cta-font-style, normal);
+.\[\&\:not\(\:disabled\)\]\:relay-font-style_var\(--relay-fonts-button-cta-font-style\,_italic\):not(:disabled):not(#\#):not(#\#):not(#\#):not(#\#) {
+    font-style: var(--relay-fonts-button-cta-font-style, italic);
 }
 
 .\[\&\[data-state\=\'checked\'\]\]\:relay-bg_primary-button-background[data-state='checked']:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -3551,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(#\#) {
@@ -3644,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.1",
+  "version": "6.0.3",
   "type": "module",
   "main": "./_cjs/src/index.js",
   "module": "./_esm/src/index.js",
@@ -85,8 +85,8 @@
     "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-kit-hooks": "2.0.8"
   },
   "keywords": [
     "eth",