@funkit/connect 5.5.20 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @funkit/connect
 
+## 6.0.0
+
+### Major Changes
+
+- 3ee48c6: fix items align
+
+### Patch Changes
+
+- 254b00e: feat(connect,with-next): QA for Hyperbeat
+- 329cbdc: feat(connect): show received amount from quote
+- 0624afd: feat(connect): use 2-step checkout progress with animations
+- dbd1bd8: quick options added for hyperbeat and hyperswap
+- adfd155: feat(connect, apps): katana theme updates
+- 84f2e27: fix(connect): update snapshots
+
+## 5.5.21
+
+### Patch Changes
+
+- b1a851c: feat(connect,with-next): adjust UI for Hyperbeat theme
+- e2bbe8a: fix(connect): back button for fiat account detail
+- 2511449: feat: better chain switch error handling
+- 579f106: dark theme defined for hyperbeat
+- 9af95e3: fix: use correct uda flag
+- Updated dependencies [e2bbe8a]
+  - @funkit/utils@1.1.8
+  - @funkit/api-base@1.9.10
+  - @funkit/core@2.3.34
+  - @funkit/wagmi-tools@3.0.56
+
 ## 5.5.20
 
 ### Patch Changes

package/dist/{chunk-ES634CAR.js → chunk-IOMUPAAW.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-OV3P5HQK.js";
+} from "./chunk-IVQ57535.js";
 
 // src/themes/darkTheme.ts
 var accentColors = {

package/dist/{chunk-OV3P5HQK.js → chunk-IVQ57535.js}

@@ -145,8 +145,8 @@ var baseTheme = ({
     modalOverlay: blurs[overlayBlur].modalOverlay
   },
   dimensions: {
-    modalBottomBarButtonHeight: "unset",
-    modalTopBarHeight: "unset",
+    modalBottomBarButtonHeight: "34px",
+    modalTopBarHeight: "56px",
     ...customDimensions
   },
   fonts: {
@@ -155,6 +155,7 @@ var baseTheme = ({
   fontWeight: {
     ...DEFAULT_FONT_WEIGHTS,
     modalTopbarTitle: DEFAULT_FONT_WEIGHTS.medium,
+    modalBottomBarButtonText: DEFAULT_FONT_WEIGHTS.medium,
     ...customFontWeights
   },
   fontSize: {
@@ -186,7 +187,8 @@ var baseTheme = ({
   spacing: {
     modalBaseHorizontalPadding: "6px",
     modalBottomHorizontalPadding: "12px",
-    modalPaddingBottom: "16px",
+    modalPaddingBottomUpper: "18px",
+    modalPaddingBottomLower: "16px",
     modalTopBarVerticalTextSpacing: "0px",
     ...customSpacings
   }

package/dist/{chunk-K4APSFTL.js → chunk-N6UWLAUQ.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-OV3P5HQK.js";
+} from "./chunk-IVQ57535.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {

package/dist/components/Box/Box.d.ts

@@ -53,37 +53,37 @@ export declare const Box: React.ForwardRefExoticComponent<{
     readonly cursor?: "default" | "help" | "not-allowed" | "pointer" | undefined;
     readonly flexDirection?: "column" | "row" | undefined;
     readonly fontFamily?: "body" | undefined;
-    readonly fontSize?: "modalTopbarTitle" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "21" | "40" | "57" | "modalTopbarSubtitle" | "modalBottomBarButtonText" | undefined;
-    readonly fontWeight?: "medium" | "bold" | "regular" | "semibold" | "heavy" | "modalTopbarTitle" | undefined;
-    readonly gap?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly fontSize?: "modalTopbarTitle" | "modalBottomBarButtonText" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "21" | "40" | "57" | "modalTopbarSubtitle" | undefined;
+    readonly fontWeight?: "medium" | "bold" | "regular" | "semibold" | "heavy" | "modalTopbarTitle" | "modalBottomBarButtonText" | undefined;
+    readonly gap?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
     readonly height?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly justifyContent?: "center" | "space-around" | "space-between" | "flex-end" | "flex-start" | undefined;
     readonly textAlign?: "inherit" | "left" | "right" | "center" | undefined;
-    readonly marginBottom?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    readonly marginLeft?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    readonly marginRight?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    readonly marginTop?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginBottom?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginLeft?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginRight?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginTop?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
     readonly minHeight?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly maxHeight?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly maxWidth?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly minWidth?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly overflow?: "hidden" | undefined;
-    readonly paddingBottom?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    readonly paddingLeft?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    readonly paddingRight?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    readonly paddingTop?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingBottom?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingLeft?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingRight?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingTop?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
     readonly position?: "fixed" | "absolute" | "relative" | undefined;
     readonly right?: "0" | undefined;
     readonly transition?: "transform" | "default" | undefined;
     readonly userSelect?: "none" | undefined;
     readonly width?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly backdropFilter?: "modalOverlay" | undefined;
-    margin?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    marginX?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    marginY?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    padding?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    paddingX?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    paddingY?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    margin?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    marginX?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    marginY?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    padding?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    paddingX?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    paddingY?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
 } & {
     reset?: keyof JSX.IntrinsicElements;
 } & HTMLProperties<HTMLElement> & {

package/dist/components/Dialog/Dialog.css.d.ts

@@ -3,7 +3,6 @@ export declare const DialogAnimationTimeIn = 0.25;
 export declare const DialogAnimationTimeOut = 0.12;
 export declare const overlay: string;
 export declare const content: string;
-export declare const dydxTitle: string;
 export declare const titleContainer: string;
 /** Content that shouls overflow into topbar */
 export declare const topbarOverflowContent: string;
@@ -11,3 +10,5 @@ export declare const topbarOverflowContent: string;
 export declare const topbarFadeWrapper: string;
 /** Absolute-positioned background behind topbar (lets us modulate background opacity without making text/button transparent) */
 export declare const topbarFadeBackground: string;
+export declare const itemsAlignCenter: string;
+export declare const itemsAlignEnd: string;

package/dist/components/Dialog/DialogContent.css.d.ts

@@ -3,6 +3,7 @@ export declare const DIALOG_BOTTOM_PADDING = "15";
 export declare const dialog: string;
 export declare const dialogCompact: string;
 export declare const dialogMedium: string;
+export declare const dialogWide: string;
 export declare const withoutSidePadding: string;
 export declare const withoutBottomPadding: string;
 export declare const dialogMobile: string;

package/dist/components/FunBottomBar/FunBottomBar.css.d.ts

@@ -1,2 +1 @@
-export declare const BOTTOM_BAR_PADDING_Y: 18;
 export declare const topSectionDynamicPadding: string;

package/dist/components/FunButton/FunButton.d.ts

@@ -13,5 +13,7 @@ export interface FunButtonProps {
     loaderSize?: number;
     borderRadius?: BoxProps['borderRadius'];
     textSize?: BoxProps['fontSize'];
+    uppercase?: boolean;
+    textWeight?: BoxProps['fontWeight'];
 }
-export declare function FunButton({ id, title, customTitleComponent, onClick, isDisabled, type, isLoading, loaderSize, textSize, borderRadius, height, }: FunButtonProps): React.JSX.Element;
+export declare function FunButton({ id, title, customTitleComponent, onClick, isDisabled, type, isLoading, loaderSize, textSize, textWeight, borderRadius, height, uppercase, }: FunButtonProps): React.JSX.Element;

package/dist/components/FunCheckoutHistory/FunCheckoutStatus.css.d.ts

@@ -1,3 +1 @@
 export declare const GradientLoadingBox: string;
-export declare const GradientWrapperClass: string;
-export declare const GradientPositionClass: string;

package/dist/components/FunCheckoutHistory/FunCheckoutStatus.d.ts

@@ -4,16 +4,5 @@ interface FunCheckoutStatusProps {
     checkoutHistoryItem: CheckoutHistoryItem | undefined;
     onOrderDelayed?: () => void;
 }
-export declare function FunCheckoutStatus({ checkoutHistoryItem, onOrderDelayed, }: FunCheckoutStatusProps): React.JSX.Element | null;
-export declare function StatusInner({ showCompleted, showDelayed, showFailed, pendingComponent, }: {
-    showCompleted: boolean;
-    showDelayed: boolean;
-    showFailed: boolean;
-    pendingComponent: React.ReactNode;
-}): React.JSX.Element;
-export declare function PendingStatus({ totalSeconds, estimatedRemainingSeconds, onOrderDelayed, }: {
-    totalSeconds: number;
-    estimatedRemainingSeconds: number;
-    onOrderDelayed?: () => void;
-}): React.JSX.Element;
+export declare function FunCheckoutStatus({ checkoutHistoryItem, onOrderDelayed, }: FunCheckoutStatusProps): React.JSX.Element;
 export {};

package/dist/components/FunCheckoutHistory/FunDirectExecutionStatus.d.ts

@@ -3,5 +3,5 @@ import React from 'react';
 interface FunDirectExecutionStatusProps {
     directExecution: DirectExecution | undefined;
 }
-export declare function FunDirectExecutionStatus({ directExecution, }: FunDirectExecutionStatusProps): React.JSX.Element | null;
+export declare function FunDirectExecutionStatus({ directExecution, }: FunDirectExecutionStatusProps): React.JSX.Element;
 export {};

package/dist/components/FunCountdown/FunCountdown.d.ts

@@ -1,4 +1,3 @@
-import { type AnimationProps } from 'motion/react';
 import React, { type ReactNode } from 'react';
 export interface FunCountdownProps {
     countdownSeconds: number;
@@ -14,7 +13,5 @@ export interface FunCountdownProps {
     isPaused?: boolean;
     /** Optional component to be used instead of the countdown after it ends */
     delayedComponent?: ReactNode;
-    /** Animation props to controll how the coundown is replaced with the delayedComponent */
-    motionProps?: AnimationProps;
 }
-export declare const FunCountdown: ({ countdownSeconds, initialRemainingSeconds, counterSize, onCountdownEnded, onBeforeCountdownEnds, onBeforeCountdownEndsSeconds, onCountdownLastSecond, strokeWidth, isHidden, isPaused, children, delayedComponent, motionProps, }: FunCountdownProps) => React.JSX.Element | null;
+export declare const FunCountdown: ({ countdownSeconds, initialRemainingSeconds, counterSize, onCountdownEnded, onBeforeCountdownEnds, onBeforeCountdownEndsSeconds, onCountdownLastSecond, strokeWidth, isHidden, isPaused, children, delayedComponent, }: FunCountdownProps) => React.JSX.Element | null;

package/dist/components/Icons/SpinnerIcon.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-export declare const SpinnerIcon: ({ size }: {
+interface SpinnerIconProps {
     size?: string | number;
-}) => React.JSX.Element;
+}
+export declare const SpinnerIcon: ({ size }: SpinnerIconProps) => React.JSX.Element;
+export {};

package/dist/components/Icons/StatusIcons.css.d.ts

@@ -0,0 +1,16 @@
+export type StatusIconVariant = keyof typeof variants;
+declare const variants: {
+    secondary: {
+        color: "secondaryText";
+    };
+    success: {
+        color: "success";
+    };
+};
+export declare const slots: {
+    container: string;
+    icon: Record<"success" | "secondary", string>;
+    background: Record<"success" | "secondary", string>;
+    innerShadow: string;
+};
+export {};

package/dist/components/Icons/StatusIcons.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-interface IconProps {
-    size?: number;
-}
 export declare const CompletedGradientSvg: () => React.JSX.Element;
-export declare const CompletedStatusIcon: ({ size }: IconProps) => React.JSX.Element;
-export declare const FailedGradientSvg: () => React.JSX.Element;
-export declare const FailedStatusIcon: ({ size }: IconProps) => React.JSX.Element;
-export declare const DelayedStatusIcon: ({ size }: IconProps) => React.JSX.Element;
-export {};
+export declare function CompletedStatusIcon(props: StatusIconProps): React.JSX.Element;
+export declare function FailedStatusIcon(props: StatusIconProps): React.JSX.Element;
+export declare function DelayedStatusIcon(props: StatusIconProps): React.JSX.Element;
+export type StatusIconProps = {
+    animateEntrance?: boolean;
+    backgroundSize?: number;
+    iconSize: number;
+};

package/dist/components/ReceiveAmount/ReceiveAmount.d.ts

@@ -1,10 +1,12 @@
-import React from 'react';
+import type { ApiFunkitCheckoutQuoteResult } from '@funkit/utils';
+import React, { type ReactNode } from 'react';
 import type { ServerCheckoutConfig } from '~/domains/clientMetadata';
 import type { FunkitCheckoutConfig } from '~/providers/FunkitCheckoutContext';
 interface ReceiveAmountProps {
     config: ServerCheckoutConfig | FunkitCheckoutConfig;
     /** To override the default icon if custom one is needed */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
+    quote: ApiFunkitCheckoutQuoteResult | null;
 }
-export declare const ReceiveAmount: ({ config, icon }: ReceiveAmountProps) => React.JSX.Element;
+export declare const ReceiveAmount: ({ config, icon, quote }: ReceiveAmountProps) => React.JSX.Element;
 export {};

package/dist/components/TransactionStatus/TransactionStatus.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CheckoutProgressStep } from '~/providers/FunkitCheckoutContext';
+interface TransactionStatusProps {
+    onOrderDelayed?: () => void;
+    startTimeMs: number;
+    status: 'delayed' | 'failed' | 'progress' | 'success';
+    step: CheckoutProgressStep;
+}
+export declare function TransactionStatus({ status, step }: TransactionStatusProps): React.JSX.Element;
+export {};

package/dist/consts/customers.d.ts

@@ -6,3 +6,4 @@ export declare function isBsxCustomer(apiKey: string): apiKey is "zN1zrkmLQn4oZt
 export declare function isEtherealCustomer(apiKey: string): apiKey is "M3uox3cw0u8YCPV9cIREA6AugUMvPFTk6qOpm4um";
 export declare function isKatanaCustomer(apiKey: string): apiKey is "OXLUmejkh9PlNDS4gSvi9gcEWacOpTz2KUVepVf4";
 export declare function isEtherFiCustomer(apiKey: string): apiKey is "GyJMyQ3juDarKooebGRu16Ncogwhm59h2DIjCu1p";
+export declare function isHyperbeatCustomer(apiKey: string): apiKey is "lUzTaIRxs95iin3pCAafB1ChA5akBiuQ1tjhXnau";

package/dist/css/sprinkles.css.d.ts

@@ -115,6 +115,7 @@ declare const themeContractValues: {
         bold: string;
         heavy: string;
         modalTopbarTitle: string;
+        modalBottomBarButtonText: string;
     };
     fontSize: {
         '10': {
@@ -201,7 +202,8 @@ declare const themeContractValues: {
     spacing: {
         modalBaseHorizontalPadding: string;
         modalBottomHorizontalPadding: string;
-        modalPaddingBottom: string;
+        modalPaddingBottomUpper: string;
+        modalPaddingBottomLower: string;
         modalTopBarVerticalTextSpacing: string;
     };
     blurs: {
@@ -326,6 +328,7 @@ export declare const themeVars: {
         bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         heavy: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         modalTopbarTitle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        modalBottomBarButtonText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontSize: {
         '10': {
@@ -412,7 +415,8 @@ export declare const themeVars: {
     spacing: {
         modalBaseHorizontalPadding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         modalBottomHorizontalPadding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        modalPaddingBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        modalPaddingBottomUpper: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        modalPaddingBottomLower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         modalTopBarVerticalTextSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     blurs: {
@@ -668,37 +672,37 @@ export declare const sprinkles: ((props: {
     readonly cursor?: "default" | "help" | "not-allowed" | "pointer" | undefined;
     readonly flexDirection?: "column" | "row" | undefined;
     readonly fontFamily?: "body" | undefined;
-    readonly fontSize?: "modalTopbarTitle" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "21" | "40" | "57" | "modalTopbarSubtitle" | "modalBottomBarButtonText" | undefined;
-    readonly fontWeight?: "medium" | "bold" | "regular" | "semibold" | "heavy" | "modalTopbarTitle" | undefined;
-    readonly gap?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly fontSize?: "modalTopbarTitle" | "modalBottomBarButtonText" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "21" | "40" | "57" | "modalTopbarSubtitle" | undefined;
+    readonly fontWeight?: "medium" | "bold" | "regular" | "semibold" | "heavy" | "modalTopbarTitle" | "modalBottomBarButtonText" | undefined;
+    readonly gap?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
     readonly height?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly justifyContent?: "center" | "space-around" | "space-between" | "flex-end" | "flex-start" | undefined;
     readonly textAlign?: "inherit" | "left" | "right" | "center" | undefined;
-    readonly marginBottom?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    readonly marginLeft?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    readonly marginRight?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    readonly marginTop?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginBottom?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginLeft?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginRight?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    readonly marginTop?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
     readonly minHeight?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly maxHeight?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly maxWidth?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly minWidth?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly overflow?: "hidden" | undefined;
-    readonly paddingBottom?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    readonly paddingLeft?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    readonly paddingRight?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    readonly paddingTop?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingBottom?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingLeft?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingRight?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    readonly paddingTop?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
     readonly position?: "fixed" | "absolute" | "relative" | undefined;
     readonly right?: "0" | undefined;
     readonly transition?: "transform" | "default" | undefined;
     readonly userSelect?: "none" | undefined;
     readonly width?: "1" | "modalBottomBarButtonHeight" | "modalTopBarHeight" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "8" | "11" | "24" | "30" | "full" | "15" | "28" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "160" | "180" | "200" | "240" | "half" | "max" | undefined;
     readonly backdropFilter?: "modalOverlay" | undefined;
-    margin?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    marginX?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    marginY?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
-    padding?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    paddingX?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
-    paddingY?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottom" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    margin?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    marginX?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    marginY?: "auto" | "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | "-18" | "-12" | undefined;
+    padding?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    paddingX?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
+    paddingY?: "0" | "1" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "modalBaseHorizontalPadding" | "modalBottomHorizontalPadding" | "modalPaddingBottomUpper" | "modalPaddingBottomLower" | "modalTopBarVerticalTextSpacing" | "2" | "3" | "4" | "6" | "8" | "11" | "24" | "30" | "15" | "28" | "32" | "36" | "44" | "-1" | "5" | "7" | "9" | "64" | undefined;
 }) => string) & {
     properties: Set<"alignItems" | "alignSelf" | "backdropFilter" | "backgroundSize" | "boxShadow" | "color" | "cursor" | "display" | "flexDirection" | "fontFamily" | "fontSize" | "fontWeight" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "userSelect" | "width" | "background" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "transition" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };

package/dist/hooks/useCheckoutDirectExecution.d.ts

@@ -30,6 +30,7 @@ interface DirectExecutionStartParams {
     stepMessageSetter: (m: string) => void;
     actionsParams: FunkitCheckoutActionParams[];
     latestQuote: FunkitCheckoutQuoteResult;
+    onTransactionConfirmed: () => void;
     withdrawalClient?: WithdrawalClient;
 }
 export interface FunkitDirectExecutionInfo {