@relayprotocol/relay-kit-ui 5.1.2 → 6.0.0

package/_esm/src/styles.css

@@ -1260,10 +1260,6 @@
     padding: var(--relay-spacing-4);
 }
 
-.relay-px_2\!:not(#\#) {
-    padding-inline: var(--relay-spacing-2) !important;
-}
-
 .relay-gap_1:not(#\#):not(#\#):not(#\#):not(#\#) {
     gap: var(--relay-spacing-1);
 }
@@ -1344,6 +1340,10 @@
     color: white;
 }
 
+.relay-gap_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    gap: 4px;
+}
+
 .relay-gap_3:not(#\#):not(#\#):not(#\#):not(#\#) {
     gap: var(--relay-spacing-3);
 }
@@ -1706,6 +1706,14 @@
     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;
 }
@@ -1896,6 +1904,10 @@
     height: 1px;
 }
 
+.relay-text-transform_uppercase:not(#\#):not(#\#):not(#\#):not(#\#) {
+    text-transform: uppercase;
+}
+
 .relay-text_error:not(#\#):not(#\#):not(#\#):not(#\#) {
     color: error;
 }
@@ -1960,6 +1972,10 @@
     max-height: 290px;
 }
 
+.relay-scrollbar-color_var\(--relay-colors-gray5\)_transparent:not(#\#):not(#\#):not(#\#):not(#\#) {
+    scrollbar-color: var(--relay-colors-gray5) transparent;
+}
+
 .relay-px_2:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-inline: var(--relay-spacing-2);
 }
@@ -1988,10 +2004,6 @@
     max-width: 212px;
 }
 
-.relay-scrollbar-color_var\(--relay-colors-gray5\)_transparent:not(#\#):not(#\#):not(#\#):not(#\#) {
-    scrollbar-color: var(--relay-colors-gray5) transparent;
-}
-
 .relay-py_10px:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-block: 10px;
 }
@@ -2000,14 +2012,14 @@
     height: 40px;
 }
 
-.relay-rounded_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border-radius: 8px;
-}
-
 .relay-w_20px:not(#\#):not(#\#):not(#\#):not(#\#) {
     width: 20px;
 }
 
+.relay-px_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: 12px;
+}
+
 .relay-min-w_40px:not(#\#):not(#\#):not(#\#):not(#\#) {
     min-width: 40px;
 }
@@ -2020,36 +2032,48 @@
     text-align: left;
 }
 
-.relay-my_2:not(#\#):not(#\#):not(#\#):not(#\#) {
-    margin-block: var(--relay-spacing-2);
-}
-
-.relay---borderColor_colors\.gray5:not(#\#):not(#\#):not(#\#):not(#\#) {
-    --borderColor: var(--relay-colors-gray5);
+.relay-h_min\(85vh\,_540px\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    height: min(85vh, 540px);
 }
 
-.relay-text_primary11:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-primary11);
+.relay-w_min\(400px\,_100vw\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: min(400px, 100vw);
 }
 
-.relay-px_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-inline: 6px;
+.relay-max-w_min\(400px\,_100vw\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-width: min(400px, 100vw);
 }
 
-.relay-py_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-block: 4px;
+.relay-min-w_0:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: 0;
 }
 
-.relay-gap_2px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    gap: 2px;
+.relay-box_border-box:not(#\#):not(#\#):not(#\#):not(#\#) {
+    box-sizing: border-box;
 }
 
 .relay-max-w_100\%:not(#\#):not(#\#):not(#\#):not(#\#) {
     max-width: 100%;
 }
 
-.relay-min-w_0:not(#\#):not(#\#):not(#\#):not(#\#) {
-    min-width: 0;
+.relay-py_5:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: var(--relay-spacing-5);
+}
+
+.relay-max-w_312:not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-width: 312px;
+}
+
+.relay-min-w_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: auto;
+}
+
+.relay-w_27:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 27px;
+}
+
+.relay-gap_2px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    gap: 2px;
 }
 
 .relay-w_40:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2068,14 +2092,22 @@
     width: 60px;
 }
 
-.relay-text-wrap_nowrap:not(#\#):not(#\#):not(#\#):not(#\#) {
-    text-wrap: nowrap;
+.relay-px_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-inline: 6px;
+}
+
+.relay-py_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-block: 4px;
 }
 
 .relay-snap-align_start:not(#\#):not(#\#):not(#\#):not(#\#) {
     scroll-snap-align: start;
 }
 
+.relay-opacity_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    opacity: 1;
+}
+
 .relay-min-h_24:not(#\#):not(#\#):not(#\#):not(#\#) {
     min-height: 24px;
 }
@@ -2084,6 +2116,22 @@
     color: grey;
 }
 
+.relay-my_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-block: var(--relay-spacing-2);
+}
+
+.relay---borderColor_colors\.gray5:not(#\#):not(#\#):not(#\#):not(#\#) {
+    --borderColor: var(--relay-colors-gray5);
+}
+
+.relay-text_primary11:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: var(--relay-colors-primary11);
+}
+
+.relay-text-wrap_nowrap:not(#\#):not(#\#):not(#\#):not(#\#) {
+    text-wrap: nowrap;
+}
+
 .relay-h_min\(85vh\,_600px\):not(#\#):not(#\#):not(#\#):not(#\#) {
     height: min(85vh, 600px);
 }
@@ -2100,18 +2148,6 @@
     border-radius: 0px;
 }
 
-.relay-py_5:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-block: var(--relay-spacing-5);
-}
-
-.relay-max-w_312:not(#\#):not(#\#):not(#\#):not(#\#) {
-    max-width: 312px;
-}
-
-.relay-w_27:not(#\#):not(#\#):not(#\#):not(#\#) {
-    width: 27px;
-}
-
 .relay-max-w_412px\!:not(#\#) {
     max-width: 412px !important;
 }
@@ -2132,10 +2168,6 @@
     max-width: 408px;
 }
 
-.relay-gap_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    gap: 4px;
-}
-
 .relay-h_23:not(#\#):not(#\#):not(#\#):not(#\#) {
     height: 23px;
 }
@@ -2204,6 +2236,46 @@
     height: 10px;
 }
 
+.relay-border_1px_solid:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: 1px solid;
+}
+
+.relay---thickness_1px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    --thickness: 1px;
+}
+
+.relay-min-h_42:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-height: 42px;
+}
+
+.relay-w_90:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 90px;
+}
+
+.relay-w_70:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 70px;
+}
+
+.relay-min-w_240:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: 240px;
+}
+
+.relay-min-w_400px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    min-width: 400px;
+}
+
+.relay-max-w_400px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-width: 400px;
+}
+
+.relay-p_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding: 16px;
+}
+
+.relay-text_green9:not(#\#):not(#\#):not(#\#):not(#\#) {
+    color: var(--relay-colors-green9);
+}
+
 .relay-h_50:not(#\#):not(#\#):not(#\#):not(#\#) {
     height: 50px;
 }
@@ -2212,14 +2284,26 @@
     min-height: 50px;
 }
 
-.relay-max-w_100:not(#\#):not(#\#):not(#\#):not(#\#) {
-    max-width: 100px;
+.relay-w_248px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    width: 248px;
+}
+
+.relay-p_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding: 12px;
+}
+
+.relay-max-w_150:not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-width: 150px;
 }
 
 .relay-min-w_60:not(#\#):not(#\#):not(#\#):not(#\#) {
     min-width: 60px;
 }
 
+.relay-max-w_100:not(#\#):not(#\#):not(#\#):not(#\#) {
+    max-width: 100px;
+}
+
 .relay-p_12px_16px:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding: 12px 16px;
 }
@@ -2248,10 +2332,6 @@
     padding: 0 16px;
 }
 
-.relay-text_green9:not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: var(--relay-colors-green9);
-}
-
 .relay-w_1px:not(#\#):not(#\#):not(#\#):not(#\#) {
     width: 1px;
 }
@@ -2416,6 +2496,10 @@
     white-space: pre;
 }
 
+.relay-border_1px_solid_transparent:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border: 1px solid transparent;
+}
+
 .relay-w_1:not(#\#):not(#\#):not(#\#):not(#\#) {
     width: 1px;
 }
@@ -2464,18 +2548,14 @@
     font-size: 32px;
 }
 
-.relay-mt_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    margin-top: 6px;
+.relay-items_center:not(#\#):not(#\#):not(#\#):not(#\#) {
+    align-items: center;
 }
 
 .relay-flex_column:not(#\#):not(#\#):not(#\#):not(#\#) {
     flex-direction: column;
 }
 
-.relay-items_center:not(#\#):not(#\#):not(#\#):not(#\#) {
-    align-items: center;
-}
-
 .relay-flex-wrap_wrap:not(#\#):not(#\#):not(#\#):not(#\#) {
     flex-wrap: wrap;
 }
@@ -2524,6 +2604,14 @@
     background-color: var(--relay-colors-black-a10);
 }
 
+.relay-pl_0\!:not(#\#) {
+    padding-left: 0 !important;
+}
+
+.relay-pr_2\!:not(#\#) {
+    padding-right: var(--relay-spacing-2) !important;
+}
+
 .relay-content_center:not(#\#):not(#\#):not(#\#):not(#\#) {
     align-content: center;
 }
@@ -2560,6 +2648,14 @@
     background-color: var(--relay-colors-widget-selector-background);
 }
 
+.relay-leading_normal:not(#\#):not(#\#):not(#\#):not(#\#) {
+    line-height: normal;
+}
+
+.relay-fs_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    font-size: 12px;
+}
+
 .relay-leading_14px:not(#\#):not(#\#):not(#\#):not(#\#) {
     line-height: 14px;
 }
@@ -2752,6 +2848,18 @@
     font-size: 14px;
 }
 
+.relay-border-w_1px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-width: 1px;
+}
+
+.relay-border-style_solid:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-style: solid;
+}
+
+.relay-border_transparent:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-color: transparent;
+}
+
 .relay-fw_800:not(#\#):not(#\#):not(#\#):not(#\#) {
     font-weight: 800;
 }
@@ -2784,10 +2892,6 @@
     font-size: 16px;
 }
 
-.relay-fs_12px:not(#\#):not(#\#):not(#\#):not(#\#) {
-    font-size: 12px;
-}
-
 .relay-fw_400:not(#\#):not(#\#):not(#\#):not(#\#) {
     font-weight: 400;
 }
@@ -2868,6 +2972,10 @@
     margin-bottom: var(--relay-spacing-2);
 }
 
+.relay-font-style_var\(--relay-fonts-button-cta-font-style\,_italic\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    font-style: var(--relay-fonts-button-cta-font-style, italic);
+}
+
 .relay-pb_8px:not(#\#):not(#\#):not(#\#):not(#\#) {
     padding-bottom: 8px;
 }
@@ -2892,10 +3000,6 @@
     background-color: var(--relay-colors-dropdown-background);
 }
 
-.relay-overflow-y_scroll:not(#\#):not(#\#):not(#\#):not(#\#) {
-    overflow-y: scroll;
-}
-
 .relay-ml_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
     margin-left: auto;
 }
@@ -2908,12 +3012,16 @@
     overflow-x: auto;
 }
 
-.relay-pr_2:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-right: var(--relay-spacing-2);
+.relay-overflow-y_hidden:not(#\#):not(#\#):not(#\#):not(#\#) {
+    overflow-y: hidden;
 }
 
-.relay-bg_primary5:not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-primary5);
+.relay-pt_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-top: var(--relay-spacing-2);
+}
+
+.relay-self_center:not(#\#):not(#\#):not(#\#):not(#\#) {
+    align-self: center;
 }
 
 .relay-grow_1:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2924,20 +3032,16 @@
     align-items: end;
 }
 
-.relay-overflow-y_hidden:not(#\#):not(#\#):not(#\#):not(#\#) {
-    overflow-y: hidden;
-}
-
-.relay-pb_1:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-bottom: var(--relay-spacing-1);
+.relay-pr_2:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-right: var(--relay-spacing-2);
 }
 
-.relay-pt_2:not(#\#):not(#\#):not(#\#):not(#\#) {
-    padding-top: var(--relay-spacing-2);
+.relay-bg_primary5:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-primary5);
 }
 
-.relay-self_center:not(#\#):not(#\#):not(#\#):not(#\#) {
-    align-self: center;
+.relay-pb_1:not(#\#):not(#\#):not(#\#):not(#\#) {
+    padding-bottom: var(--relay-spacing-1);
 }
 
 .relay-mb_8:not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2960,6 +3064,22 @@
     margin-top: 4px;
 }
 
+.relay-border_slate\.4:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-color: var(--relay-colors-slate-4);
+}
+
+.relay-leading_32px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    line-height: 32px;
+}
+
+.relay-border-block-end-width_var\(--thickness\):not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-block-end-width: var(--thickness);
+}
+
+.relay-border_gray4:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-color: var(--relay-colors-gray4);
+}
+
 .relay-leading_15px:not(#\#):not(#\#):not(#\#):not(#\#) {
     line-height: 15px;
 }
@@ -3084,6 +3204,10 @@
     margin-bottom: 6px;
 }
 
+.relay-mt_6px:not(#\#):not(#\#):not(#\#):not(#\#) {
+    margin-top: 6px;
+}
+
 .relay-bg_green2:not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-green2);
 }
@@ -3128,10 +3252,6 @@
     --borderColor: var(--relay-colors-gray-5);
 }
 
-.\[\&\[data-state\=\"active\"\]\]\:relay-border_1px_solid_var\(--borderColor\)[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
-    border: 1px solid var(--borderColor);
-}
-
 .\[\&\:disabled\]\:relay-cursor_default:disabled:not(#\#):not(#\#):not(#\#):not(#\#) {
     cursor: default;
 }
@@ -3200,6 +3320,18 @@
     filter: brightness(130%);
 }
 
+.\[\&\[data-state\=\"active\"\]\]\:relay-bg_white[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: white;
+}
+
+.\[\&\[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);
+}
+
 .disabled\:relay-bg_button-disabled-background:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-button-disabled-background);
 }
@@ -3224,6 +3356,10 @@
     background-color: var(--relay-colors-subtle-background-color);
 }
 
+.\[\&\[data-state\=\"active\"\]\]\:relay-border_var\(--borderColor\)[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-color: var(--borderColor);
+}
+
 .\[\&\:disabled\]\:relay-bg_transparent:disabled:not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: transparent;
 }
@@ -3248,6 +3384,10 @@
     background-color: var(--relay-colors-primary-color);
 }
 
+.\[\&\[data-state\=\"active\"\]\]\:relay-border_slate\.4[data-state="active"]:not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-color: var(--relay-colors-slate-4);
+}
+
 .focusWithin\:relay-shadow_inset_0_0_0_2px_var\(--focusColor\):focus-within:not(#\#):not(#\#):not(#\#):not(#\#) {
     box-shadow: inset 0 0 0 2px var(--focusColor);
 }
@@ -3296,6 +3436,10 @@
     background-color: var(--mix-backgroundColor, gray);
 }
 
+.focus\:relay-bg_gray3:is(:focus, [data-focus]):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-gray3);
+}
+
 .hover\:relay-text_gray11:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
     color: var(--relay-colors-gray11);
 }
@@ -3379,14 +3523,14 @@
     background-color: var(--mix-backgroundColor, gray);
 }
 
-.hover\:relay-bg_gray3:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
-    background-color: var(--relay-colors-gray3);
-}
-
 .hover\:relay-bg_gray2:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-gray2);
 }
 
+.hover\:relay-bg_gray3:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background-color: var(--relay-colors-gray3);
+}
+
 .hover\:relay-bg_gray6:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-gray6);
 }
@@ -3407,6 +3551,10 @@ 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);
+}
+
 .disabled\:hover\:relay-bg_button-disabled-background:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#) {
     background-color: var(--relay-colors-button-disabled-background);
 }
@@ -3415,6 +3563,18 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
     background-color: transparent;
 }
 
+.\[\&\:not\(\[data-state\=\"active\"\]\)\]\:hover\:relay-bg_transparent\!:not([data-state="active"]):is(:hover, [data-hover]):not(#\#) {
+    background-color: transparent !important;
+}
+
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:\[\&\[data-state\=\"active\"\]\]\:relay-border_gray\.4[data-state="active"],[data-theme="dark"]:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:\[\&\[data-state\=\"active\"\]\]\:relay-border_gray\.4[data-state="active"] {
+    border-color: var(--relay-colors-gray-4);
+}
+
+.dark:not(#\#) .dark\:\[\&\:not\(\[data-state\=\"active\"\]\)\]\:hover\:relay-bg_transparent\!:not([data-state="active"]):is(:hover, [data-hover]), [data-theme="dark"]:not(#\#) .dark\:\[\&\:not\(\[data-state\=\"active\"\]\)\]\:hover\:relay-bg_transparent\!:not([data-state="active"]):is(:hover, [data-hover]) {
+    background-color: transparent !important;
+}
+
 @media screen and (min-width: 31.25rem) {
     .bp500\:relay-gap_1:not(#\#):not(#\#):not(#\#):not(#\#) {
       gap: var(--relay-spacing-1);
@@ -3433,6 +3593,9 @@ button:hover:not(#\#):not(#\#):not(#\#):not(#\#) .\[button\:hover_\&\]\:relay-bg
 @media screen and (min-width: 37.5rem) {
     .sm\:relay-w_386:not(#\#):not(#\#):not(#\#):not(#\#) {
       width: 386px;
+}
+    .sm\:relay-gap_4px:not(#\#):not(#\#):not(#\#):not(#\#) {
+      gap: 4px;
 }
     .sm\:relay-gap_2:not(#\#):not(#\#):not(#\#):not(#\#) {
       gap: var(--relay-spacing-2);

package/_esm/src/utils/numbers.js

@@ -18,6 +18,32 @@ function formatDollar(price) {
     }
     return formatted;
 }
+function formatDollarCompact(price) {
+    if (price === undefined || price === null || price === 0) {
+        return '-';
+    }
+    // For values >= $1B, show ">$1B"
+    if (Math.abs(price) >= 1000000000) {
+        return '>$1B';
+    }
+    // Use compact notation for values >= $1000
+    if (Math.abs(price) >= 1000) {
+        const { format } = new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+            notation: 'compact',
+            compactDisplay: 'short',
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2
+        });
+        return format(price);
+    }
+    const formatted = formatUsdCurrency(price);
+    if (formatted === '$0.00' && price && price > 0) {
+        return '< $0.01';
+    }
+    return formatted;
+}
 function formatNumber(amount, maximumFractionDigits = 2, compact) {
     const { format } = new Intl.NumberFormat('en-US', {
         maximumFractionDigits: maximumFractionDigits,
@@ -241,5 +267,22 @@ function formatSignificantDigits(value, decimals = 18) {
     }
     return isNegative ? '-' + result : result;
 }
-export { formatDollar, formatBN, formatFixedLength, formatNumber, formatSignificantDigits, truncateBalance };
+/**
+ * Converts basis points to percentage string
+ * @param bps Basis points as string (e.g. "250" for 2.5%)
+ * @returns Formatted percentage string or undefined
+ */
+function convertBpsToPercent(bps) {
+    if (bps === undefined)
+        return undefined;
+    const numeric = Number(bps);
+    if (!Number.isFinite(numeric))
+        return undefined;
+    const percent = numeric / 100;
+    if (!Number.isFinite(percent))
+        return undefined;
+    const formatted = percent.toFixed(percent % 1 === 0 ? 0 : 2);
+    return formatted.replace(/\.0+$/, '').replace(/\.00$/, '');
+}
+export { formatDollar, formatDollarCompact, formatBN, formatFixedLength, formatNumber, formatSignificantDigits, truncateBalance, convertBpsToPercent };
 //# sourceMappingURL=numbers.js.map