@relayprotocol/relay-kit-ui 4.0.18 → 5.0.0

package/dist/panda.buildinfo.json

@@ -43,8 +43,10 @@
       "position]___[value:absolute",
       "color]___[value:#FFA01C",
       "color]___[value:#30A46C",
+      "color]___[value:#9CA3AF",
       "gap]___[value:6px",
       "cursor]___[value:pointer",
+      "paddingInline]___[value:8px",
       "color]___[value:transparent",
       "justifyContent]___[value:center",
       "marginBlock]___[value:4",
@@ -92,6 +94,11 @@
       "paddingRight]___[value:28px !important",
       "border]___[value:none",
       "textAlign]___[value:right",
+      "fill]___[value:currentColor",
+      "borderRadius]___[value:100px",
+      "padding]___[value:8px",
+      "width]___[value:32px",
+      "height]___[value:32px",
       "zIndex]___[value:1000",
       "marginLeft]___[value:-20px",
       "marginLeft]___[value:0",
@@ -140,8 +147,8 @@
       "color]___[value:primary-button-color",
       "backgroundColor]___[value:primary-button-hover-background]___[cond:&:hover",
       "color]___[value:primary-button-hover-color]___[cond:&:hover",
-      "backgroundColor]___[value:secondary-button-background",
-      "color]___[value:secondary-button-color",
+      "backgroundColor]___[value:primary4",
+      "color]___[value:primary12",
       "backgroundColor]___[value:secondary-button-hover-background]___[cond:&:hover",
       "color]___[value:secondary-button-hover-color]___[cond:&:hover",
       "color]___[value:text-default",
@@ -177,7 +184,6 @@
       "chain]___[value:16",
       "borderRadius]___[value:4",
       "borderRadius]___[value:50%",
-      "backgroundColor]___[value:primary4",
       "color]___[value:primary8",
       "--borderColor]___[value:colors.modal-background",
       "backgroundColor]___[value:modal-background",
@@ -240,7 +246,6 @@
       "background]___[value:green3",
       "color]___[value:green12",
       "background]___[value:primary3",
-      "color]___[value:primary12",
       "borderRadius]___[value:25",
       "animationName]___[value:pulse",
       "backgroundColor]___[value:skeleton-background",
@@ -379,7 +384,6 @@
       "marginBlock]___[value:2",
       "paddingRight]___[value:2",
       "--borderColor]___[value:colors.gray5",
-      "borderRadius]___[value:100px",
       "boxShadow]___[value:inset 0 0 0 2px var(--focusColor)]___[cond:_focusVisible",
       "boxShadow]___[value:inset 0 0 0 2px var(--focusColor)]___[cond:&[data-state=\"on\"]",
       "boxShadow]___[value:inset 0 0 0 2px var(--focusColor)]___[cond:_active",
@@ -473,7 +477,6 @@
       "width]___[value:1px",
       "backgroundColor]___[value:gray11",
       "fill]___[value:gray9",
-      "paddingInline]___[value:4",
       "fill]___[value:button-disabled-color",
       "marginTop]___[value:4",
       "marginTop]___[value:12",
@@ -482,42 +485,37 @@
       "marginBottom]___[value:24",
       "marginRight]___[value:$2",
       "color]___[value:red9",
+      "marginBottom]___[value:16px",
+      "color]___[value:gray",
       "flexDirection]___[value:column]___[cond:bp500",
       "gap]___[value:1]___[cond:bp500",
       "alignItems]___[value:flex-start]___[cond:bp500",
       "backgroundColor]___[value:primary6",
       "backgroundColor]___[value:green3",
-      "color]___[value:primary6",
       "color]___[value:green11",
-      "animation]___[value:pulse-shadow 1s infinite",
+      "animation]___[value:pulse-shadow 1s infinite alternate-reverse",
       "animation]___[value:none",
-      "animationDirection]___[value:alternate-reverse",
+      "color]___[value:primary11]___[cond:& > *",
+      "color]___[value:gray9]___[cond:& > *",
+      "color]___[value:green11]___[cond:& > *",
+      "height]___[value:30",
+      "width]___[value:30",
       "padding]___[value:0 12px",
       "padding]___[value:12px 0]___[cond:bp400Down",
-      "fontSize]___[value:10px",
+      "color]___[value:slate10",
       "paddingLeft]___[value:12px",
-      "backgroundColor]___[value:primary3",
-      "borderRadius]___[value:100",
-      "opacity]___[value:1",
-      "opacity]___[value:0.6",
       "height]___[value:80",
       "width]___[value:78",
       "borderRadius]___[value:999999px",
-      "width]___[value:80",
-      "backgroundColor]___[value:green2",
-      "--borderColor]___[value:colors.green10",
-      "border]___[value:6px solid var(--borderColor)",
-      "width]___[value:50",
-      "color]___[value:primary-color",
-      "border]___[value:3px solid var(--borderColor)",
-      "right]___[value:-40",
-      "bottom]___[value:-12",
-      "marginBottom]___[value:20",
+      "backgroundColor]___[value:green9",
+      "--borderColor]___[value:white",
+      "border]___[value:2px solid var(--borderColor)",
+      "marginLeft]___[value:-8px",
+      "--borderColor]___[value:colors.slate.5",
       "background]___[value:primary2",
       "justifyItems]___[value:space-between",
-      "width]___[value:29",
-      "height]___[value:27",
-      "color]___[value:gray",
+      "marginBlock]___[value:12px",
+      "color]___[value:green11]___[cond:& .green-time",
       "background]___[value:gray5",
       "fill]___[value:#fff",
       "fill]___[value:#000",
@@ -552,6 +550,7 @@
       "position]___[value:sticky",
       "height]___[value:calc(100% - 24px)",
       "scrollPaddingTop]___[value:40px",
+      "paddingInline]___[value:4",
       "paddingTop]___[value:40px",
       "paddingBottom]___[value:24px",
       "textIndent]___[value:-36px",
@@ -570,11 +569,14 @@
       "borderRadius]___[value:100%",
       "bottom]___[value:-6px",
       "right]___[value:-6px",
-      "border]___[value:2px solid var(--borderColor)",
       "marginBottom]___[value:4",
       "marginTop]___[value:24px",
       "marginBottom]___[value:6px",
-      "filter]___[value:grayscale(1)"
+      "filter]___[value:grayscale(1)",
+      "width]___[value:80",
+      "backgroundColor]___[value:green2",
+      "--borderColor]___[value:colors.green10",
+      "border]___[value:6px solid var(--borderColor)"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -8,11 +8,11 @@
 
   @keyframes pulse-shadow {
     0% {
-      box-shadow: 0 0 0 0px currentColor;
+      box-shadow: 0 0 0 0px var(--relay-colors-primary4);
 }
 
     100% {
-      box-shadow: 0 0 0 6px currentColor;
+      box-shadow: 0 0 0 6px var(--relay-colors-primary4);
 }
 }
 
@@ -1172,6 +1172,10 @@
     color: #30A46C;
 }
 
+.relay-text_\#9CA3AF:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: #9CA3AF;
+}
+
 .relay-gap_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
     gap: 6px;
 }
@@ -1180,6 +1184,10 @@
     cursor: pointer;
 }
 
+.relay-px_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: 8px;
+}
+
 .relay-text_transparent:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: transparent;
 }
@@ -1312,6 +1320,26 @@
     text-align: right;
 }
 
+.relay-fill_currentColor:not(#\#):not(#\#):not(#\#):not(#\#) {
+    fill: currentColor;
+}
+
+.relay-rounded_100px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 100px;
+}
+
+.relay-p_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding: 8px;
+}
+
+.relay-w_32px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 32px;
+}
+
+.relay-h_32px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: 32px;
+}
+
 .relay-z_1000:not(#\#):not(#\#):not(#\#):not(#\#) {
     z-index: 1000;
 }
@@ -1414,8 +1442,8 @@
     color: var(--relay-colors-primary-button-color);
 }
 
-.relay-text_secondary-button-color:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-secondary-button-color);
+.relay-text_primary12:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: var(--relay-colors-primary12);
 }
 
 .relay-text_text-default:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1594,10 +1622,6 @@
     background: var(--relay-colors-primary3);
 }
 
-.relay-text_primary12:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-primary12);
-}
-
 .relay-rounded_25:not(#\#):not(#\#):not(#\#):not(#\#) {
     border-radius: 25px;
 }
@@ -1908,10 +1932,6 @@
     --borderColor: var(--relay-colors-gray5);
 }
 
-.relay-rounded_100px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-radius: 100px;
-}
-
 .relay-text_primary11:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: var(--relay-colors-primary11);
 }
@@ -2140,10 +2160,6 @@
     fill: var(--relay-colors-gray9);
 }
 
-.relay-px_4:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-inline: var(--relay-spacing-4);
-}
-
 .relay-fill_button-disabled-color:not(#\#):not(#\#):not(#\#):not(#\#) {
     fill: var(--relay-colors-button-disabled-color);
 }
@@ -2156,36 +2172,36 @@
     color: var(--relay-colors-red9);
 }
 
-.relay-text_primary6:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-primary6);
+.relay-text_gray:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: gray;
 }
 
 .relay-text_green11:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: var(--relay-colors-green11);
 }
 
-.relay-animation_pulse-shadow_1s_infinite:not(#\#):not(#\#):not(#\#):not(#\#) {
-    animation: pulse-shadow 1s infinite;
+.relay-animation_pulse-shadow_1s_infinite_alternate-reverse:not(#\#):not(#\#):not(#\#):not(#\#) {
+    animation: pulse-shadow 1s infinite alternate-reverse;
 }
 
 .relay-animation_none:not(#\#):not(#\#):not(#\#):not(#\#) {
     animation: none;
 }
 
-.relay-p_0_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding: 0 12px;
+.relay-h_30:not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: 30px;
 }
 
-.relay-rounded_100:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-radius: 100px;
+.relay-w_30:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 30px;
 }
 
-.relay-opacity_1:not(#\#):not(#\#):not(#\#):not(#\#) {
-    opacity: 1;
+.relay-p_0_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding: 0 12px;
 }
 
-.relay-opacity_0\.6:not(#\#):not(#\#):not(#\#):not(#\#) {
-    opacity: 0.6;
+.relay-text_slate10:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: slate10;
 }
 
 .relay-h_80:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2200,44 +2216,24 @@
     border-radius: 999999px;
 }
 
-.relay-w_80:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 80px;
+.relay---borderColor_white:not(#\#):not(#\#):not(#\#):not(#\#) {
+    --borderColor: white;
 }
 
-.relay---borderColor_colors\.green10:not(#\#):not(#\#):not(#\#):not(#\#) {
-    --borderColor: var(--relay-colors-green10);
-}
-
-.relay-border_6px_solid_var\(--borderColor\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: 6px solid var(--borderColor);
-}
-
-.relay-w_50:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 50px;
-}
-
-.relay-text_primary-color:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-primary-color);
+.relay-border_2px_solid_var\(--borderColor\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: 2px solid var(--borderColor);
 }
 
-.relay-border_3px_solid_var\(--borderColor\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: 3px solid var(--borderColor);
+.relay---borderColor_colors\.slate\.5:not(#\#):not(#\#):not(#\#):not(#\#) {
+    --borderColor: var(--relay-colors-slate-5);
 }
 
 .relay-bg_primary2:not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--relay-colors-primary2);
 }
 
-.relay-w_29:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 29px;
-}
-
-.relay-h_27:not(#\#):not(#\#):not(#\#):not(#\#) {
-    height: 27px;
-}
-
-.relay-text_gray:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: gray;
+.relay-my_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-block: 12px;
 }
 
 .relay-bg_gray5:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2312,6 +2308,10 @@
     height: calc(100% - 24px);
 }
 
+.relay-px_4:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: var(--relay-spacing-4);
+}
+
 .relay-indent_-36px:not(#\#):not(#\#):not(#\#):not(#\#) {
     text-indent: -36px;
 }
@@ -2340,14 +2340,22 @@
     border-radius: 100%;
 }
 
-.relay-border_2px_solid_var\(--borderColor\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: 2px solid var(--borderColor);
-}
-
 .relay-filter_grayscale\(1\):not(#\#):not(#\#):not(#\#):not(#\#) {
     filter: grayscale(1);
 }
 
+.relay-w_80:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 80px;
+}
+
+.relay---borderColor_colors\.green10:not(#\#):not(#\#):not(#\#):not(#\#) {
+    --borderColor: var(--relay-colors-green10);
+}
+
+.relay-border_6px_solid_var\(--borderColor\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: 6px solid var(--borderColor);
+}
+
 .relay-bg_transparent:not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: transparent;
 }
@@ -2476,8 +2484,8 @@
     background-color: var(--relay-colors-primary-button-background);
 }
 
-.relay-bg_secondary-button-background:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-secondary-button-background);
+.relay-bg_primary4:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-primary4);
 }
 
 .relay-bg_widget-background:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2504,10 +2512,6 @@
     line-height: 12px;
 }
 
-.relay-bg_primary4:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-primary4);
-}
-
 .relay-bg_modal-background:not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-modal-background);
 }
@@ -2884,6 +2888,10 @@
     margin-right: $2;
 }
 
+.relay-mb_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-bottom: 16px;
+}
+
 .relay-bg_primary6:not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-primary6);
 }
@@ -2892,36 +2900,16 @@
     background-color: var(--relay-colors-green3);
 }
 
-.relay-animation-direction_alternate-reverse:not(#\#):not(#\#):not(#\#):not(#\#) {
-    animation-direction: alternate-reverse;
-}
-
-.relay-fs_10px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    font-size: 10px;
-}
-
 .relay-pl_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-left: 12px;
 }
 
-.relay-bg_primary3:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-primary3);
-}
-
-.relay-bg_green2:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-green2);
-}
-
-.relay-right_-40:not(#\#):not(#\#):not(#\#):not(#\#) {
-    right: -40px;
-}
-
-.relay-bottom_-12:not(#\#):not(#\#):not(#\#):not(#\#) {
-    bottom: -12px;
+.relay-bg_green9:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-green9);
 }
 
-.relay-mb_20:not(#\#):not(#\#):not(#\#):not(#\#) {
-    margin-bottom: 20px;
+.relay-ml_-8px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-left: -8px;
 }
 
 .relay-justify-items_space-between:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2988,6 +2976,10 @@
     margin-bottom: 6px;
 }
 
+.relay-bg_green2:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-green2);
+}
+
 .placeholder\:relay-text_gray12:not(#\#):not(#\#):not(#\#):not(#\#)::placeholder,.placeholder\:relay-text_gray12[data-placeholder]:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: var(--relay-colors-gray12);
 }
@@ -3056,6 +3048,18 @@
     color: var(--relay-colors-gray10);
 }
 
+.\[\&_\>_\*\]\:relay-text_primary11:not(#\#):not(#\#):not(#\#):not(#\#) > * {
+    color: var(--relay-colors-primary11);
+}
+
+.\[\&_\>_\*\]\:relay-text_gray9:not(#\#):not(#\#):not(#\#):not(#\#) > * {
+    color: var(--relay-colors-gray9);
+}
+
+.\[\&_\>_\*\]\:relay-text_green11:not(#\#):not(#\#):not(#\#):not(#\#) > *,.\[\&_\.green-time\]\:relay-text_green11:not(#\#):not(#\#):not(#\#):not(#\#) .green-time {
+    color: var(--relay-colors-green11);
+}
+
 .before\:relay-pos_absolute:not(#\#):not(#\#):not(#\#):not(#\#)::before {
     position: absolute;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relayprotocol/relay-kit-ui",
-  "version": "4.0.18",
+  "version": "5.0.0",
   "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-sdk": "2.4.5",
-    "@relayprotocol/relay-kit-hooks": "2.0.4",
-    "@relayprotocol/relay-design-system": "^1.0.0"
+    "@relayprotocol/relay-kit-hooks": "2.0.6",
+    "@relayprotocol/relay-design-system": "^1.0.0",
+    "@relayprotocol/relay-sdk": "3.0.0"
   },
   "keywords": [
     "eth",