@relayprotocol/relay-kit-ui 4.0.16 → 4.0.18

package/dist/panda.buildinfo.json

@@ -295,6 +295,16 @@
       "boxShadow]___[value:0px 1px 5px rgba(0,0,0,0.2)",
       "color]___[value:{colors.grass.9}",
       "color]___[value:{colors.amber.9}",
+      "borderBottomRadius]___[value:0",
+      "borderBottomRadius]___[value:widget-card-border-radius",
+      "borderBottom]___[value:none",
+      "borderBottom]___[value:widget-card-border",
+      "transitionDelay]___[value:0s, 0s",
+      "transitionDelay]___[value:0s, 300ms",
+      "borderRadius]___[value:widget-card-border-radius",
+      "transition]___[value:border-radius 300ms, border-bottom 0s",
+      "marginBottom]___[value:widget-card-section-gutter",
+      "paddingBottom]___[value:0",
       "justifyContent]___[value:between",
       "color]___[value:gray6",
       "height]___[value:4",
@@ -302,24 +312,18 @@
       "paddingTop]___[value:0",
       "backgroundColor]___[value:amber2",
       "width]___[value:12",
-      "paddingBlock]___[value:1px",
-      "paddingInline]___[value:4px",
-      "borderRadius]___[value:100",
       "color]___[value:warningSecondary",
       "alignSelf]___[value:flex-start",
-      "borderRadius]___[value:widget-card-border-radius",
-      "marginBottom]___[value:widget-card-section-gutter",
+      "fontSize]___[value:12",
+      "paddingInline]___[value:1",
+      "minHeight]___[value:23px",
+      "lineHeight]___[value:100%",
+      "backgroundColor]___[value:widget-selector-background",
+      "backgroundColor]___[value:widget-selector-hover-background]___[cond:_hover",
       "transform]___[value:rotate(-180deg)",
       "transform]___[value:rotate(0)",
       "marginLeft]___[value:2",
       "transition]___[value:transform 300ms",
-      "borderBottomRadius]___[value:0",
-      "borderBottomRadius]___[value:widget-card-border-radius",
-      "borderBottom]___[value:none",
-      "borderBottom]___[value:widget-card-border",
-      "transitionDelay]___[value:0s, 0s",
-      "transitionDelay]___[value:0s, 300ms",
-      "transition]___[value:border-radius 300ms, border-bottom 0s",
       "borderRadius]___[value:0 0 12px 12px",
       "borderTop]___[value:none",
       "gap]___[value:14",
@@ -384,7 +388,6 @@
       "color]___[value:primary11",
       "paddingInline]___[value:6px",
       "paddingBlock]___[value:4px",
-      "lineHeight]___[value:100%",
       "gap]___[value:2px",
       "flexGrow]___[value:1",
       "maxWidth]___[value:100%",
@@ -438,11 +441,6 @@
       "width]___[value:32",
       "width]___[value:20px",
       "padding]___[value:4px",
-      "fontSize]___[value:12",
-      "paddingInline]___[value:1",
-      "minHeight]___[value:23px",
-      "backgroundColor]___[value:widget-selector-background",
-      "backgroundColor]___[value:widget-selector-hover-background]___[cond:_hover",
       "marginTop]___[value:4px",
       "--borderWidth]___[value:borders.widget-swap-currency-button-border-width",
       "--borderColor]___[value:colors.widget-swap-currency-button-border-color",
@@ -499,6 +497,7 @@
       "fontSize]___[value:10px",
       "paddingLeft]___[value:12px",
       "backgroundColor]___[value:primary3",
+      "borderRadius]___[value:100",
       "opacity]___[value:1",
       "opacity]___[value:0.6",
       "height]___[value:80",

package/dist/styles.css

@@ -1718,70 +1718,66 @@
     color: var(--relay-colors-amber-9);
 }
 
-.relay-text_gray6:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-gray6);
-}
-
-.relay-h_4:not(#\#):not(#\#):not(#\#):not(#\#) {
-    height: 4px;
+.relay-rounded-b_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
-.relay-w_12:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 12px;
+.relay-rounded-b_widget-card-border-radius:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-bottom-left-radius: var(--relay-radii-widget-card-border-radius);
+    border-bottom-right-radius: var(--relay-radii-widget-card-border-radius);
 }
 
-.relay-py_1px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-block: 1px;
+.relay-border-b_none:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-bottom: none;
 }
 
-.relay-px_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-inline: 4px;
+.relay-border-b_widget-card-border:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-bottom: var(--relay-borders-widget-card-border);
 }
 
-.relay-rounded_100:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-radius: 100px;
+.relay-rounded_widget-card-border-radius:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: var(--relay-radii-widget-card-border-radius);
 }
 
-.relay-text_warningSecondary:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: warningSecondary;
+.relay-transition_border-radius_300ms\,_border-bottom_0s:not(#\#):not(#\#):not(#\#):not(#\#) {
+    transition: border-radius 300ms, border-bottom 0s;
 }
 
-.relay-rounded_widget-card-border-radius:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-radius: var(--relay-radii-widget-card-border-radius);
+.relay-text_gray6:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: var(--relay-colors-gray6);
 }
 
-.relay-transform_rotate\(-180deg\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    transform: rotate(-180deg);
+.relay-h_4:not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: 4px;
 }
 
-.relay-transform_rotate\(0\):not(#\#):not(#\#):not(#\#):not(#\#) {
-    transform: rotate(0);
+.relay-w_12:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 12px;
 }
 
-.relay-transition_transform_300ms:not(#\#):not(#\#):not(#\#):not(#\#) {
-    transition: transform 300ms;
+.relay-text_warningSecondary:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: warningSecondary;
 }
 
-.relay-rounded-b_0:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+.relay-px_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: var(--relay-spacing-1);
 }
 
-.relay-rounded-b_widget-card-border-radius:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-bottom-left-radius: var(--relay-radii-widget-card-border-radius);
-    border-bottom-right-radius: var(--relay-radii-widget-card-border-radius);
+.relay-min-h_23px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: 23px;
 }
 
-.relay-border-b_none:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-bottom: none;
+.relay-transform_rotate\(-180deg\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    transform: rotate(-180deg);
 }
 
-.relay-border-b_widget-card-border:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-bottom: var(--relay-borders-widget-card-border);
+.relay-transform_rotate\(0\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    transform: rotate(0);
 }
 
-.relay-transition_border-radius_300ms\,_border-bottom_0s:not(#\#):not(#\#):not(#\#):not(#\#) {
-    transition: border-radius 300ms, border-bottom 0s;
+.relay-transition_transform_300ms:not(#\#):not(#\#):not(#\#):not(#\#) {
+    transition: transform 300ms;
 }
 
 .relay-rounded_0_0_12px_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2056,14 +2052,6 @@
     padding: 4px;
 }
 
-.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---borderWidth_borders\.widget-swap-currency-button-border-width:not(#\#):not(#\#):not(#\#):not(#\#) {
     --borderWidth: var(--relay-borders-widget-swap-currency-button-border-width);
 }
@@ -2188,6 +2176,10 @@
     padding: 0 12px;
 }
 
+.relay-rounded_100:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-radius: 100px;
+}
+
 .relay-opacity_1:not(#\#):not(#\#):not(#\#):not(#\#) {
     opacity: 1;
 }
@@ -2684,6 +2676,22 @@
     font-style: italic;
 }
 
+.relay-delay_0s\,_0s:not(#\#):not(#\#):not(#\#):not(#\#) {
+    transition-delay: 0s, 0s;
+}
+
+.relay-delay_0s\,_300ms:not(#\#):not(#\#):not(#\#):not(#\#) {
+    transition-delay: 0s, 300ms;
+}
+
+.relay-mb_widget-card-section-gutter:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-bottom: var(--relay-spacing-widget-card-section-gutter);
+}
+
+.relay-pb_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-bottom: 0;
+}
+
 .relay-justify_between:not(#\#):not(#\#):not(#\#):not(#\#) {
     justify-content: between;
 }
@@ -2704,20 +2712,20 @@
     align-self: flex-start;
 }
 
-.relay-mb_widget-card-section-gutter:not(#\#):not(#\#):not(#\#):not(#\#) {
-    margin-bottom: var(--relay-spacing-widget-card-section-gutter);
+.relay-fs_12:not(#\#):not(#\#):not(#\#):not(#\#) {
+    font-size: 12px;
 }
 
-.relay-ml_2:not(#\#):not(#\#):not(#\#):not(#\#) {
-    margin-left: var(--relay-spacing-2);
+.relay-leading_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
+    line-height: 100%;
 }
 
-.relay-delay_0s\,_0s:not(#\#):not(#\#):not(#\#):not(#\#) {
-    transition-delay: 0s, 0s;
+.relay-bg_widget-selector-background:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-widget-selector-background);
 }
 
-.relay-delay_0s\,_300ms:not(#\#):not(#\#):not(#\#):not(#\#) {
-    transition-delay: 0s, 300ms;
+.relay-ml_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-left: var(--relay-spacing-2);
 }
 
 .relay-mb_3:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2792,10 +2800,6 @@
     background-color: var(--relay-colors-primary5);
 }
 
-.relay-leading_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
-    line-height: 100%;
-}
-
 .relay-grow_1:not(#\#):not(#\#):not(#\#):not(#\#) {
     flex-grow: 1;
 }
@@ -2832,14 +2836,6 @@
     line-height: 36px;
 }
 
-.relay-fs_12:not(#\#):not(#\#):not(#\#):not(#\#) {
-    font-size: 12px;
-}
-
-.relay-bg_widget-selector-background:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-widget-selector-background);
-}
-
 .relay-mt_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
     margin-top: 4px;
 }
@@ -3263,6 +3259,10 @@
     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_gray6:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-gray6);
 }
@@ -3271,10 +3271,6 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
     background-color: var(--relay-colors-gray5);
 }
 
-.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);
 }

package/package.json

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