zebpay-ui 0.0.129 → 0.0.131

package/dist/cjs/theme/v2/types.d.ts

@@ -5,6 +5,7 @@ export interface TabColorScheme {
     primaryDefaultFill: string;
     primaryDefaultText: string;
     primaryStroke: string;
+    primaryDefaultStroke: string;
     secondaryActiveTab: string;
     secondaryDefaultTab: string;
     tertiaryFill: string;
@@ -25,6 +26,7 @@ export interface ButtonColorScheme {
 }
 export interface ZGradientScheme {
     primary: string;
+    primaryText: string;
     tertiary: string;
     banner: string;
     positiveGraph: string;
@@ -66,6 +68,8 @@ export interface ZColorScheme {
         fullScreenBg: string;
         fullScreenFg01: string;
         fullScreenFg02: string;
+        cardBg: string;
+        cardBorder: string;
     };
     icon: {
         primary: string;
@@ -82,6 +86,7 @@ export interface ZColorScheme {
         fiat: string;
         rnr: string;
         navGrey: string;
+        coinBorder: string;
     };
     functional: {
         green: string;
@@ -97,8 +102,10 @@ export interface ZColorScheme {
         yellowTrans: string;
         greyTrans: string;
         redTag: string;
+        redTagText: string;
         greenTag: string;
         greyTag: string;
+        leverageTag: string;
     };
     toast: {
         successFill: string;
@@ -141,6 +148,9 @@ export interface ZColorScheme {
         header: string;
         listing: string;
         table: string;
+        onGradientIcon: string;
+        onGradientIconBg: string;
+        onGradientIconBorder: string;
     };
     input: {
         default: string;

package/dist/cjs/theme/v2/zColors.d.ts

@@ -2,12 +2,13 @@
  * Primitive palette mirrored from mobile v2 design system:
  * zebpay_multiplatform/design/v2/.../znew/color/ZColors.kt
  *
- * Token suffix "V4" in some names matches the Kotlin source (dark palette revision),
- * not the design system version — the design system module is v2.
+ * Web uses RGBA-style hex (#RRGGBB / #RRGGBBAA), never Android ARGB.
+ * Token suffix "V4" matches Kotlin dark-palette revision names — design module is v2.
  */
 export declare const ZColors: {
     readonly Black: "#000000";
     readonly White: "#FFFFFF";
+    readonly White01: "#FAFDFF";
     readonly Transparent: "transparent";
     readonly Overlay: "#0C0C2466";
     readonly Blue01: "#222245";
@@ -22,6 +23,8 @@ export declare const ZColors: {
     readonly Blue10: "#D9EAFF";
     readonly Blue11: "#338FFF0A";
     readonly Blue12: "#EBF4FF";
+    readonly BlueV404: "#1D212B";
+    readonly Blue013: "#D9E5FD";
     readonly Grey01: "#C2C2DD";
     readonly Grey02: "#34345A";
     readonly Grey03: "#6B6B6B";
@@ -54,7 +57,8 @@ export declare const ZColors: {
     readonly GreenV4: "#0FC985";
     readonly GreenTransBgV4: "#0E362F";
     readonly GreyTransBgV4: "#14161C";
-    readonly RedTagTextV4: "#FF4848";
+    readonly RedTagTextV4: "#F15757";
+    readonly RedTagText01V4: "#FF9BA3";
     readonly IconTapSelectedV4: "#6A93FF";
     readonly IconSecondaryV4: "#8B95B0";
     readonly IconTapableSelectedV4: "#5786FF";
@@ -70,10 +74,11 @@ export declare const ZColors: {
     readonly TagGreyFilledV4: "#313337";
     readonly HeaderSecondaryFillV4: "#14161C";
     readonly TabAccentV4: "#4660FE";
-    /** Android ARGB 0x004660FE — transparent secondary button fill (darkV4) */
+    /** Kotlin ARGB 0x004660FE → web #RRGGBBAA */
     readonly SecondaryFillV4: "#4660FE00";
     readonly SecondaryTextV4: "#F8F8F8";
     readonly FunctionalGreenV4: "#038153";
+    readonly FunctionalGreen02V4: "#15B178";
     readonly FunctionalRedV4: "#E75252";
     readonly FunctionalRed02V4: "#C94444";
     readonly FunctionalYellowV4: "#B09600";
@@ -83,7 +88,18 @@ export declare const ZColors: {
     readonly SuccessIconV4: "#15B178";
     readonly ErrorIconV4: "#B84242";
     readonly TabSecondaryV4: "#6A93FF";
-    readonly SheetScrimColor: "#25252599";
+    /** Kotlin ARGB 0xF7252525 → web #RRGGBBAA */
+    readonly SheetScrimColor: "#252525F7";
+    /** Kotlin ARGB 0x30C0C0EE → web #RRGGBBAA */
+    readonly leverageNewV4: "#C0C0EE30";
+    readonly LightCoinBorder: "#E9EFF6";
+    readonly DarkCoinBorder: "#5F6267";
+    readonly onGradientIconLight: "#FFFFFF";
+    readonly onGradientIconBgLight: "#F6F9FF0D";
+    readonly onGradientIconBorderLight: "#F3F5FF80";
+    readonly onGradientIconDark: "#F8F8F8";
+    readonly onGradientIconBgDark: "#FFFFFF0D";
+    readonly onGradientIconBorderDark: "#FFFFFF66";
 };
 export declare const ZShadows: {
     float: string;
@@ -102,7 +118,7 @@ export declare const ZShadows: {
 /** Mirrored from mobile v2 ZGradientConst */
 export declare const ZGradientConst: {
     gradient1: readonly ["#5D7BFE", "#0974FF"];
-    gradient1V4: readonly ["#5786FF", "#3751FE"];
+    gradient1V4: readonly ["#5786FF", "#5786FF"];
     gradientBlueV4: readonly ["#5786FF", "#3751FE"];
     white: readonly ["#FFFFFF", "#FFFFFF"];
 };

package/dist/cjs/theme/v2/zGradients.d.ts

@@ -20,7 +20,7 @@ export declare const ZGradientConst: {
     readonly shimmer2: readonly ["rgba(61, 61, 102, 0.92)", "#1E1E41"];
     readonly shimmer3: readonly ["#E9EFF6", "rgba(207, 207, 207, 0)"];
     readonly gradientBlue: readonly ["#4672DB", "#1C49B6"];
-    readonly gradient1V4: readonly ["#5786FF", "#3751FE"];
+    readonly gradient1V4: readonly ["#5786FF", "#5786FF"];
     readonly gradientBlueV4: readonly ["#5786FF", "#3751FE"];
     readonly gradient3V4: readonly ["#1D2A50", "#17203B"];
     readonly shimmer1V4: readonly ["#252A34", "#313747"];
@@ -32,6 +32,7 @@ export declare const ZGradientConst: {
     readonly gradientRedV4: string;
     readonly purple06: string;
     readonly header: string;
+    readonly headerV4: string;
     readonly bottomBarLight: string;
     readonly bottomBarV4: string;
 };
@@ -56,6 +57,7 @@ export declare const ZGradientConstCss: {
     readonly gradientRedV4: string;
     readonly purple06: string;
     readonly header: string;
+    readonly headerV4: string;
     readonly bottomBarLight: string;
     readonly bottomBarV4: string;
 };

package/dist/cjs/theme/v3/ZColorScheme.d.ts

@@ -2,6 +2,8 @@
  * Mirrored from mobile v3 ZColorScheme.kt
  * Theme keys match web/v2: light | dark | extraDark
  * (mobile Kotlin companion `v4Dark` → web `extraDark`)
+ *
+ * Color values stay web RGBA (#RRGGBB / #RRGGBBAA / rgba(...)), not Android ARGB.
  */
 import type { Theme } from "../../globalTypings";
 import type { ZColorSchemeV3 } from "./types";

package/dist/cjs/theme/v3/ZColors.d.ts

@@ -1,6 +1,9 @@
 /**
  * Primitive palette mirrored from mobile v3:
  * zebpay_multiplatform/design/v3/.../v3/color/ZColors.kt
+ *
+ * Web uses RGBA-style hex (#RRGGBB / #RRGGBBAA), never Android ARGB.
+ * Kotlin Color(0xAARRGGBB) → web #RRGGBBAA (or #RRGGBB when AA=FF).
  */
 export declare const ZColorsV3: {
     readonly Primary01: "#34345A";
@@ -11,7 +14,9 @@ export declare const ZColorsV3: {
     readonly White01: "#FAFDFF";
     readonly White02: "#F4F7FF";
     readonly White03: "#F6F9FF";
+    /** Kotlin ARGB 0x80F3F5FF → web #RRGGBBAA */
     readonly White04: "#F3F5FF80";
+    /** Kotlin ARGB 0x0DF6F9FF → web #RRGGBBAA */
     readonly White05: "#F6F9FF0D";
     readonly Black01: "#0C0E29";
     readonly Black02: "#101535";
@@ -19,6 +24,7 @@ export declare const ZColorsV3: {
     readonly Black04: "#2F2D5B";
     readonly Black05: "#202543";
     readonly Black06: "#43496D";
+    /** Kotlin ARGB 0xB3191A39 → web #RRGGBBAA */
     readonly Black07: "#191A39B3";
     readonly Grey01: "#828282";
     readonly Grey02: "#B5B5B5";
@@ -49,7 +55,9 @@ export declare const ZColorsV3: {
     readonly Yellow05: "#FFF6DB";
     readonly Yellow06: "#EDA42D";
     readonly Yellow07: "#E3A43F";
+    /** Kotlin ARGB 0x801F3C63 → web #RRGGBBAA */
     readonly Blur01: "#1F3C6380";
+    /** Kotlin ARGB 0x8016205E → web #RRGGBBAA */
     readonly Blur02: "#16205E80";
     readonly FiatColor: "#309BF2";
     readonly CryptoColor: "#A76AF6";
@@ -73,7 +81,9 @@ export declare const ZColorsV3: {
     readonly V4Yellow01: "#B09600";
     readonly V4Yellow02: "#FFF15A";
     readonly V4White01: "#F8F8F8";
+    /** Kotlin ARGB 0x0DFFFFFF → web #RRGGBBAA */
     readonly V4WhiteTransparent: "#FFFFFF0D";
+    /** Kotlin ARGB 0x66FFFFFF → web #RRGGBBAA */
     readonly V4WhiteTransparent01: "#FFFFFF66";
     readonly V4Primary01: "#4D4CFE";
     readonly V4Red02: "#C24239";
@@ -87,5 +97,10 @@ export declare const ZColorsV3: {
     readonly V4IllustrationRed01: "#F75C5C";
     readonly V4Banner01: "#17293B";
     readonly V4CyclicTextColor: "#6A93FF";
+    readonly TabTextActive: "#6A93FF";
+    /** Kotlin ARGB 0x99252525 → web #RRGGBBAA */
+    readonly SheetScrimColor: "#25252599";
+    readonly LightCoinBorder: "#E9EFF6";
+    readonly DarkCoinBorder: "#5F6267";
 };
 export type ZColorNameV3 = keyof typeof ZColorsV3;

package/dist/cjs/theme/v3/ZGradientColors.d.ts

@@ -1,5 +1,8 @@
 /**
  * Gradient primitives mirrored from mobile v3 ZGradientColors.kt
+ *
+ * Web uses RGBA-style hex (#RRGGBB / #RRGGBBAA) in stops, never Android ARGB.
+ * Kotlin Color(0xAARRGGBB) → web #RRGGBBAA.
  */
 export declare const ZGradientColorsV3: {
     readonly Primary01: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
@@ -39,5 +42,6 @@ export declare const ZGradientColorsV3: {
     readonly V4Gradient08: "linear-gradient(180deg, #22D4AB33 0%, #59DA8900 100%)";
     readonly V4Gradient09: "linear-gradient(180deg, #D4222233 0%, #DA595900 100%)";
     readonly V4GradientCyclic: "linear-gradient(180deg, #D4222233 0%, #DA595900 100%)";
+    readonly V4Primary01: "linear-gradient(90deg, #5786FF 0%, #5786FF 100%)";
 };
 export type ZGradientColorNameV3 = keyof typeof ZGradientColorsV3;

package/dist/cjs/theme/v3/categories/ZBannerColors.d.ts

@@ -5,13 +5,16 @@ export declare const ZBannerColors: {
     readonly light: {
         readonly default: "linear-gradient(65deg, #E9F7FF 0%, #D8EDFF 31%, #F5FCF0 60.5%, #E6EEFF 84.5691%)";
         readonly purple: "linear-gradient(287deg, #BE23E7 0%, #5132D9 54%, #3794FF 100%)";
+        readonly stripGradient: "linear-gradient(65deg, #E9F7FF 0%, #D8EDFF 31%, #F5FCF0 60.5%, #E6EEFF 84.5691%)";
     };
     readonly dark: {
         readonly default: "linear-gradient(65deg, #0A1244 0%, #182D80 50%, #130955 100%)";
         readonly purple: "linear-gradient(287deg, #BE23E7 0%, #5132D9 54%, #3794FF 100%)";
+        readonly stripGradient: "linear-gradient(176deg, #1C355B 3.1%, #22375A 97.44%)";
     };
     readonly extraDark: {
         readonly default: "linear-gradient(356deg, #1D2A50 2.56%, #17203B 96.9%)";
         readonly purple: "linear-gradient(287deg, #BE23E7 0%, #5132D9 54%, #3794FF 100%)";
+        readonly stripGradient: "linear-gradient(176deg, #1C355B 3.1%, #22375A 97.44%)";
     };
 };

package/dist/cjs/theme/v3/categories/ZBottomSheetColors.d.ts

@@ -3,13 +3,13 @@
  */
 export declare const ZBottomSheetColors: {
     readonly light: {
-        readonly scrim: "#1F3C6380";
+        readonly scrim: "#25252599";
         readonly default: "#FFFFFF";
         readonly green: "linear-gradient(0deg, #EFFFF1 0%, #59DA89 100%)";
         readonly red: "linear-gradient(0deg, #FFEFEF 0%, #FF9D9D 100%)";
     };
     readonly dark: {
-        readonly scrim: "#16205E80";
+        readonly scrim: "#25252599";
         readonly default: "#0C0E29";
         readonly green: "linear-gradient(0deg, #110B4B 40%, #1DAB62 100%)";
         readonly red: "linear-gradient(0deg, #120C4B 23%, #FF6767 77%)";
@@ -18,6 +18,6 @@ export declare const ZBottomSheetColors: {
         readonly default: "#000000";
         readonly green: "linear-gradient(90deg, #000000 0%, #000000 100%)";
         readonly red: "linear-gradient(90deg, #000000 0%, #000000 100%)";
-        readonly scrim: "#16205E80";
+        readonly scrim: "#25252599";
     };
 };

package/dist/cjs/theme/v3/categories/ZButtonColors.d.ts

@@ -16,6 +16,8 @@ export declare const ZButtonColors: {
             readonly textWhite: "#FFFFFF";
             readonly textDisable: "#B5B5B5";
             readonly fillActive: "#FAFDFF";
+            readonly fillBannerActive: "#FAFDFF";
+            readonly textBannerActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
             readonly fillDisable: "#FAFDFF";
             readonly borderActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
             readonly borderDisable: "#B5B5B5";
@@ -45,6 +47,8 @@ export declare const ZButtonColors: {
             readonly textWhite: "#FFFFFF";
             readonly textDisable: "#828282";
             readonly fillActive: "#101535";
+            readonly fillBannerActive: "#FAFDFF";
+            readonly textBannerActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
             readonly fillDisable: "#101535";
             readonly borderActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
             readonly borderDisable: "#828282";
@@ -74,11 +78,13 @@ export declare const ZButtonColors: {
             readonly textWhite: "#F8F8F8";
             readonly textDisable: "#F8F8F8";
             readonly fillActive: "#000000";
+            readonly fillBannerActive: "#FAFDFF";
+            readonly textBannerActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
             readonly fillDisable: "#5F6267";
             readonly borderActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
             readonly borderDisable: "#5F6267";
-            readonly borderGreen: "linear-gradient(90deg, #1DBE8D 0%, #158569 100%)";
-            readonly borderRed: "linear-gradient(90deg, #F75C5C 0%, #B43A2F 100%)";
+            readonly borderGreen: "linear-gradient(90deg, #3DC489 0%, #0F9F5A 100%)";
+            readonly borderRed: "linear-gradient(90deg, #F65053 0%, #D12A2D 100%)";
         };
         readonly tertiary: {
             readonly textActive: "linear-gradient(90deg, #F8F8F8 0%, #F8F8F8 100%)";

package/dist/cjs/theme/v3/categories/ZCardColors.d.ts

@@ -6,6 +6,7 @@ export declare const ZCardColors: {
         readonly default: "#FAFDFF";
         readonly default02: "#FAFDFF";
         readonly fill: "#FAFDFF";
+        readonly fillGradient: "linear-gradient(70deg, #02376E 0.0169%, #0E1A2B 50.1233%, #112842 87.1258%)";
         readonly selected: "#F4F7FF";
         readonly border: "#D9E5FD";
         readonly borderYellow: "#E1A203";
@@ -17,6 +18,7 @@ export declare const ZCardColors: {
         readonly default: "#131C40";
         readonly default02: "#131C40";
         readonly fill: "#131C40";
+        readonly fillGradient: "linear-gradient(70deg, #02376E 0.0169%, #0E1A2B 50.1233%, #112842 87.1258%)";
         readonly selected: "#101535";
         readonly border: "#1F2651";
         readonly borderYellow: "#FBB127";
@@ -28,6 +30,7 @@ export declare const ZCardColors: {
         readonly default: "#1D212B";
         readonly default02: "#14161C";
         readonly fill: "#1D212B";
+        readonly fillGradient: "linear-gradient(356deg, #1D2A50 2.56%, #17203B 96.9%)";
         readonly selected: "#1D212B";
         readonly border: "#1D212B";
         readonly borderYellow: "#FBB127";

package/dist/cjs/theme/v3/categories/ZIconColors.d.ts

@@ -17,6 +17,7 @@ export declare const ZIconColors: {
         readonly dualToneGradient: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
         readonly illustrationGreen: "linear-gradient(0deg, #22D4AB33 20%, #59DA8900 100%)";
         readonly illustrationRed: "linear-gradient(180deg, #F75C5C33 20%, #F75C5C00 100%)";
+        readonly illustrationCoinBorder: "#E9EFF6";
     };
     readonly dark: {
         readonly singleTonePrimary: "#FFFFFF";
@@ -33,6 +34,7 @@ export declare const ZIconColors: {
         readonly dualToneGradient: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
         readonly illustrationGreen: "linear-gradient(0deg, #22D4AB33 20%, #59DA8900 100%)";
         readonly illustrationRed: "linear-gradient(180deg, #F75C5C33 20%, #F75C5C00 100%)";
+        readonly illustrationCoinBorder: "#5F6267";
     };
     readonly extraDark: {
         readonly singleTonePrimary: "#F8F8F8";
@@ -44,10 +46,11 @@ export declare const ZIconColors: {
         readonly singleToneGreen: "#0FC985";
         readonly singleToneYellow: "#FFF15A";
         readonly singleToneBlue: "#6A93FF";
-        readonly singleToneGrey: "#C4C4C4";
+        readonly singleToneGrey: "#828282";
         readonly dualToneSolid: "#F8F8F8";
         readonly dualToneGradient: "linear-gradient(90deg, #6A93FF 0%, #6A93FF 100%)";
         readonly illustrationGreen: "linear-gradient(0deg, #22D4AB33 20%, #59DA8900 100%)";
         readonly illustrationRed: "linear-gradient(180deg, #F75C5C33 20%, #F75C5C00 100%)";
+        readonly illustrationCoinBorder: "#5F6267";
     };
 };

package/dist/cjs/theme/v3/categories/ZInputFieldColors.d.ts

@@ -23,10 +23,10 @@ export declare const ZInputFieldColors: {
     readonly extraDark: {
         readonly borderDefault: "#26293E";
         readonly borderActive: "#4D4CFE";
-        readonly borderFilled: "#000000";
+        readonly borderFilled: "#26293E";
         readonly borderError: "#E75252";
         readonly borderDisabled: "#5F6267";
-        readonly backgroundDefault: "#000000";
-        readonly backgroundDisabled: "#000000";
+        readonly backgroundDefault: "#1D212B";
+        readonly backgroundDisabled: "#1D212B";
     };
 };

package/dist/cjs/theme/v3/categories/ZNavigationColors.d.ts

@@ -12,6 +12,9 @@ export declare const ZNavigationColors: {
             readonly onGradientIcon: "#FFFFFF";
             readonly onGradientIconBg: "#F6F9FF0D";
             readonly onGradientIconBorder: "#F3F5FF80";
+            readonly onSheetGradientIcon: "#FFFFFF";
+            readonly onSheetGradientIconBg: "#F6F9FF0D";
+            readonly onSheetGradientIconBorder: "#F3F5FF80";
         };
         readonly bottom: {
             readonly background: "#FFFFFF";
@@ -29,6 +32,9 @@ export declare const ZNavigationColors: {
             readonly onGradientIcon: "#FFFFFF";
             readonly onGradientIconBg: "#F6F9FF0D";
             readonly onGradientIconBorder: "#F3F5FF80";
+            readonly onSheetGradientIcon: "#FFFFFF";
+            readonly onSheetGradientIconBg: "#F6F9FF0D";
+            readonly onSheetGradientIconBorder: "#F3F5FF80";
         };
         readonly bottom: {
             readonly background: "#0C0E29";
@@ -46,6 +52,9 @@ export declare const ZNavigationColors: {
             readonly onGradientIcon: "#F8F8F8";
             readonly onGradientIconBg: "#FFFFFF0D";
             readonly onGradientIconBorder: "#FFFFFF66";
+            readonly onSheetGradientIcon: "#F8F8F8";
+            readonly onSheetGradientIconBg: "#F6F9FF0D";
+            readonly onSheetGradientIconBorder: "#26293E";
         };
         readonly bottom: {
             readonly background: "#000000";

package/dist/cjs/theme/v3/categories/ZPillsColors.d.ts

@@ -28,7 +28,7 @@ export declare const ZPillsColors: {
         readonly textDefault: "#C0C7DC";
         readonly textActive: "#F8F8F8";
         readonly textDisabled: "#5F6267";
-        readonly fillDefault: "#14161C";
+        readonly fillDefault: "#000000";
         readonly fillActive: "linear-gradient(90deg, #5786FF 0%, #3751FE 100%)";
         readonly fillDisabled: "#5F6267";
         readonly borderDefault: "#26293E";

package/dist/cjs/theme/v3/categories/ZSeparatorColors.d.ts

@@ -15,6 +15,6 @@ export declare const ZSeparatorColors: {
     readonly extraDark: {
         readonly solidDefault: "#26293E";
         readonly solidOnGradient: "#F6F9FF0D";
-        readonly gradientDefault: "linear-gradient(90deg, #1A1C27 0%, #1A1C27 100%)";
+        readonly gradientDefault: "linear-gradient(90deg, #26293E00 0%, #26293E 30%, #26293E 70%, #26293E00 100%)";
     };
 };

package/dist/cjs/theme/v3/categories/ZStatusTagColors.d.ts

@@ -27,6 +27,6 @@ export declare const ZStatusTagColors: {
         readonly yellow: "#B09600";
         readonly blue: "#6A93FF";
         readonly blue02: "#647096";
-        readonly grey: "#2B2B30";
+        readonly grey: "#647096";
     };
 };

package/dist/cjs/theme/v3/categories/ZTabColors.d.ts

@@ -82,7 +82,7 @@ export declare const ZTabColors: {
         };
         readonly tertiary: {
             readonly textDefault: "#C0C7DC";
-            readonly textActive: "linear-gradient(90deg, #F8F8F8 0%, #F8F8F8 100%)";
+            readonly textActive: "linear-gradient(90deg, #6A93FF 0%, #6A93FF 100%)";
             readonly textDisable: "#5F6267";
         };
     };

package/dist/cjs/theme/v3/categories/ZTextColors.d.ts

@@ -35,7 +35,7 @@ export declare const ZTextColors: {
         readonly blue: "#6A93FF";
         readonly green: "#0FC985";
         readonly greenOnGradient: "#0FC985";
-        readonly yellow: "#FBB127";
+        readonly yellow: "#FFF15A";
         readonly grey: "#B5B5B5";
     };
 };

package/dist/cjs/theme/v3/types.d.ts

@@ -8,6 +8,7 @@ export type ZColorSchemeV3 = {
     banner: {
         default: string;
         purple: string;
+        stripGradient: string;
     };
     blurHighlight: {
         green: string;
@@ -34,6 +35,8 @@ export type ZColorSchemeV3 = {
             textWhite: string;
             textDisable: string;
             fillActive: string;
+            fillBannerActive: string;
+            textBannerActive: string;
             fillDisable: string;
             borderActive: string;
             borderDisable: string;
@@ -53,6 +56,7 @@ export type ZColorSchemeV3 = {
         default: string;
         default02: string;
         fill: string;
+        fillGradient: string;
         selected: string;
         border: string;
         borderYellow: string;
@@ -92,6 +96,7 @@ export type ZColorSchemeV3 = {
         dualToneGradient: string;
         illustrationGreen: string;
         illustrationRed: string;
+        illustrationCoinBorder: string;
     };
     inputField: {
         borderDefault: string;
@@ -117,6 +122,9 @@ export type ZColorSchemeV3 = {
             onGradientIcon: string;
             onGradientIconBg: string;
             onGradientIconBorder: string;
+            onSheetGradientIcon: string;
+            onSheetGradientIconBg: string;
+            onSheetGradientIconBorder: string;
         };
         bottom: {
             background: string;

package/dist/esm/components/PinInput/style.d.ts

@@ -1,9 +1,11 @@
-import type { Theme } from "../../globalTypings";
+import type { ThemeVersion, Theme } from "../../globalTypings";
+import type { PinInputBorderRadiusType } from "./typing";
+export declare const resolveBorderRadius: (borderRadius?: number, borderRadiusType?: PinInputBorderRadiusType) => string;
 export declare const pins: import("@emotion/react").SerializedStyles;
-export declare const label: (mode?: Theme) => import("@emotion/react").SerializedStyles;
-export declare const inputFocused: (focused: boolean, inValid: boolean) => import("@emotion/react").SerializedStyles;
-export declare const invalidPins: import("@emotion/react").SerializedStyles;
+export declare const label: (mode?: Theme, version?: ThemeVersion, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const labelError: (mode?: Theme, version?: ThemeVersion) => import("@emotion/react").SerializedStyles;
+export declare const inputFocused: (focused: boolean, inValid: boolean, mode?: Theme, version?: ThemeVersion) => import("@emotion/react").SerializedStyles;
+export declare const invalidPins: (mode?: Theme, version?: ThemeVersion) => import("@emotion/react").SerializedStyles;
 export declare const inputContainer: import("@emotion/react").SerializedStyles;
-export declare const input: (mode?: Theme) => import("@emotion/react").SerializedStyles;
-export declare const disabledInput: import("@emotion/react").SerializedStyles;
-export declare const maskStyle: (mode?: Theme) => import("@emotion/react").SerializedStyles;
+export declare const input: (mode?: Theme, version?: ThemeVersion, borderRadius?: number, borderRadiusType?: PinInputBorderRadiusType, disabled?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const maskStyle: (mode?: Theme, version?: ThemeVersion) => import("@emotion/react").SerializedStyles;

package/dist/esm/components/PinInput/typing.d.ts

@@ -1,6 +1,7 @@
 import { SerializedStyles } from "@emotion/react";
 import React from "react";
-import type { Theme } from "../../globalTypings";
+import type { ThemeVersion, Theme } from "../../globalTypings";
+export type PinInputBorderRadiusType = "px" | "%";
 export type PinInputProps = {
     label?: string;
     values: string[];
@@ -18,6 +19,12 @@ export type PinInputProps = {
     inputContainerStyle?: SerializedStyles;
     inputFieldStyle?: SerializedStyles;
     mode?: Theme;
+    /** Color scheme generation — defaults to v2 */
+    version?: ThemeVersion;
+    /** Cell corner radius value — defaults to 5 */
+    borderRadius?: number;
+    /** Unit for borderRadius — `"px"` (default) or `"%"` */
+    borderRadiusType?: PinInputBorderRadiusType;
 } & Pick<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "inputMode" | "onBlur" | "onFocus" | "onKeyDown" | "placeholder">;
 export type PinInputFieldProps = {
     index: number;

package/dist/esm/globalTypings.d.ts

@@ -1 +1,3 @@
 export type Theme = "light" | "dark" | "extraDark";
+/** Color scheme generation — v2 (mobile znew) or v3 */
+export type ThemeVersion = "v2" | "v3";