@blocklet/payment-react 1.14.21 → 1.14.22

package/lib/theme/index.css

@@ -0,0 +1,240 @@
+:root {
+  /* Light Theme */
+  /* Color */
+  --backgrounds-bg-base: #ffffff;
+  --backgrounds-bg-base-hover: #f9fafb;
+  --backgrounds-bg-base-pressed: #f3f4f6;
+  --backgrounds-bg-component: #f1f3f5;
+  --backgrounds-bg-component-hover: #e5e7eb;
+  --backgrounds-bg-disabled: #f3f4f6;
+  --backgrounds-bg-field: #f9fafb;
+  --backgrounds-bg-field-hover: #f3f4f6;
+  --backgrounds-bg-glass: #ffffffb8;
+  --backgrounds-bg-highlight: #eff6ff;
+  --backgrounds-bg-highlight-hover: #dbeafe;
+  --backgrounds-bg-interactive: #3b82f6;
+  --backgrounds-bg-interactive-hover: #2563eb;
+  --backgrounds-bg-overlay: #03071266;
+  --backgrounds-bg-subtle: #f9fafb;
+  --backgrounds-bg-subtle-hover: #f3f4f6;
+  --backgrounds-bg-subtle-pressed: #e5e7eb;
+  --backgrounds-bg-switch-off: #e5e7eb;
+  --backgrounds-bg-switch-off-hover: #d1d5db;
+  --buttons-button-danger: #e11d48;
+  --buttons-button-danger-hover: #be123c;
+  --buttons-button-danger-pressed: #9f1239;
+  --buttons-button-inverted: #030712;
+  --buttons-button-inverted-hover: #111827;
+  --buttons-button-inverted-pressed: #1f2937;
+  --buttons-button-neutral: #ffffff;
+  --buttons-button-neutral-hover: #f3f4f6;
+  --buttons-button-neutral-pressed: #e5e7eb;
+  --buttons-button-transparent: #ffffff00;
+  --buttons-button-transparent-hover: #f3f4f6;
+  --buttons-button-transparent-pressed: #e5e7eb;
+  --foregrounds-fg-base: #030712;
+  --foregrounds-fg-danger: #e11d48;
+  --foregrounds-fg-disabled: #d1d5db;
+  --foregrounds-fg-interactive: #3b82f6;
+  --foregrounds-fg-interactive-hover: #2563eb;
+  --foregrounds-fg-muted: #9ca3af;
+  --foregrounds-fg-on-color: #ffffff;
+  --foregrounds-fg-on-inverted: #ffffff;
+  --foregrounds-fg-subtle: #4b5563;
+  --others-spacer: #ffffff00;
+  --shadows-card-hover-1: #03071214;
+  --shadows-card-hover-2: #03071214;
+  --shadows-card-hover-3: #0307121a;
+  --shadows-card-rest-1: #03071214;
+  --shadows-card-rest-2: #03071214;
+  --shadows-card-rest-3: #0307120a;
+  --shadows-danger-1: #e11d48;
+  --shadows-error-2: #e11d4826;
+  --shadows-flyout-1: #03071214;
+  --shadows-flyout-2: #03071214;
+  --shadows-interactive-with-active-1: #3b82f6;
+  --shadows-interactive-with-active-2: #3b82f633;
+  --shadows-interactive-with-shadow-1: #1e3a8a80;
+  --shadows-interactive-with-shadow-2: #3b82f6;
+  --shadows-modal-1: #ffffff;
+  --shadows-modal-2: #e5e7eb66;
+  --shadows-modal-3: #03071214;
+  --shadows-modal-4: #03071214;
+  --shadows-modal-5: #03071214;
+  --shadows-switch-background-1: #0307120a;
+  --shadows-switch-background-2: #0307120a;
+  --shadows-switch-background-3: #0307120f;
+  --shadows-switch-background-4: #03071205;
+  --shadows-switch-background-5: #0307120a;
+  --shadows-switch-handle-1: #ffffff;
+  --shadows-switch-handle-2: #ffffff;
+  --shadows-switch-handle-3: #03071205;
+  --shadows-switch-handle-4: #03071205;
+  --shadows-switch-handle-5: #0307120a;
+  --shadows-switch-handle-6: #0307121f;
+  --shadows-switch-handle-7: #03071214;
+  --shadows-tooltip-1: #03071214;
+  --shadows-tooltip-2: #03071214;
+  --stroke-border-base: #eff1f5;
+  --stroke-border-error: #e11d48;
+  --stroke-border-interactive: #3b82f6;
+  --stroke-border-loud: #030712;
+  --stroke-border-strong: #d1d5db;
+  --stroke-sep: #eff1f5;
+  --tags-tag-blue-bg: #dbeafe;
+  --tags-tag-blue-bg-hover: #bfdbfe;
+  --tags-tag-blue-border: #bfdbfe;
+  --tags-tag-blue-icon: #2563eb;
+  --tags-tag-blue-text: #1d4ed8;
+  --tags-tag-green-bg: #d1fae5;
+  --tags-tag-green-bg-hover: #a7f3d0;
+  --tags-tag-green-border: #a7f3d0;
+  --tags-tag-green-icon: #059669;
+  --tags-tag-green-text: #047857;
+  --tags-tag-neutral-bg: #f3f4f6;
+  --tags-tag-neutral-bg-hover: #e5e7eb;
+  --tags-tag-neutral-border: #e5e7eb;
+  --tags-tag-neutral-icon: #6b7280;
+  --tags-tag-neutral-text: #4b5563;
+  --tags-tag-orange-bg: #fef4c7;
+  --tags-tag-orange-bg-hover: #fde68a;
+  --tags-tag-orange-border: #fde68a;
+  --tags-tag-orange-icon: #d97706;
+  --tags-tag-orange-text: #b45309;
+  --tags-tag-purple-bg: #ede9fe;
+  --tags-tag-purple-bg-hover: #ddd6fe;
+  --tags-tag-purple-border: #ddd6fe;
+  --tags-tag-purple-icon: #7c3aed;
+  --tags-tag-purple-text: #6d28d9;
+  --tags-tag-red-bg: #ffe4e6;
+  --tags-tag-red-bg-hover: #fecdd3;
+  --tags-tag-red-border: #fecdd3;
+  --tags-tag-red-icon: #e11d48;
+  --tags-tag-red-text: #be123c;
+  /* Number */
+  --radius-s: 0.25rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-round: 624.9375rem;
+  --stroke-button-secondary-border: #e5e7eb;
+}
+[data-theme='dark'] {
+  /* Dark Theme */
+  /* Color */
+  --backgrounds-bg-base: #1b1b1f;
+  --backgrounds-bg-base-hover: #27282d;
+  --backgrounds-bg-base-pressed: #2e3035;
+  --backgrounds-bg-component: #27282d;
+  --backgrounds-bg-component-hover: #27282d;
+  --backgrounds-bg-disabled: #27282d;
+  --backgrounds-bg-field: #27282d;
+  --backgrounds-bg-field-hover: #2e3035;
+  --backgrounds-bg-glass: #1b1b1fb8;
+  --backgrounds-bg-highlight: #172554;
+  --backgrounds-bg-highlight-hover: #1e3a8a;
+  --backgrounds-bg-interactive: #60a5fa;
+  --backgrounds-bg-interactive-hover: #60a5fa;
+  --backgrounds-bg-overlay: #18181ab2;
+  --backgrounds-bg-subtle: #18181a;
+  --backgrounds-bg-subtle-hover: #1b1b1f;
+  --backgrounds-bg-subtle-pressed: #27282d;
+  --backgrounds-bg-switch-off: #35373c;
+  --backgrounds-bg-switch-off-hover: #464b50;
+  --buttons-button-danger: #9f1239;
+  --buttons-button-danger-hover: #be123c;
+  --buttons-button-danger-pressed: #e11d48;
+  --buttons-button-inverted: #edeef0;
+  --buttons-button-inverted-hover: #ffffff;
+  --buttons-button-inverted-pressed: #edeef0;
+  --buttons-button-neutral: #27282d;
+  --buttons-button-neutral-hover: #35373c;
+  --buttons-button-neutral-pressed: #3c3f44;
+  --buttons-button-transparent: #ffffff00;
+  --buttons-button-transparent-hover: #27282d;
+  --buttons-button-transparent-pressed: #2e3035;
+  --foregrounds-fg-base: #edeef0;
+  --foregrounds-fg-danger: #fb7185;
+  --foregrounds-fg-disabled: #3c3f44;
+  --foregrounds-fg-interactive: #60a5fa;
+  --foregrounds-fg-interactive-hover: #3b82f6;
+  --foregrounds-fg-muted: #696e77;
+  --foregrounds-fg-on-color: #ffffff;
+  --foregrounds-fg-on-inverted: #0a0a0a;
+  --foregrounds-fg-subtle: #adb1b8;
+  --others-spacer: #ffffff;
+  --shadows-card-hover-1: #ffffff1a;
+  --shadows-card-hover-2: #ffffff29;
+  --shadows-card-hover-3: #00000066;
+  --shadows-card-rest-1: #ffffff1a;
+  --shadows-card-rest-2: #ffffff29;
+  --shadows-card-rest-3: #00000066;
+  --shadows-danger-1: #f43f5e1a;
+  --shadows-error-2: #e11d4840;
+  --shadows-flyout-1: #ffffff1a;
+  --shadows-flyout-2: #00000052;
+  --shadows-interactive-with-active-1: #60a5fa;
+  --shadows-interactive-with-active-2: #3b82f640;
+  --shadows-interactive-with-shadow-1: #dbeafe80;
+  --shadows-interactive-with-shadow-2: #60a5fa;
+  --shadows-modal-1: #171717;
+  --shadows-modal-2: #2e303566;
+  --shadows-modal-3: #ffffff1a;
+  --shadows-modal-4: #00000052;
+  --shadows-modal-5: #00000052;
+  --shadows-switch-background-1: #0000001a;
+  --shadows-switch-background-2: #0000001a;
+  --shadows-switch-background-3: #ffffff29;
+  --shadows-switch-background-4: #0000001a;
+  --shadows-switch-background-5: #00000033;
+  --shadows-switch-handle-1: #ffffff;
+  --shadows-switch-handle-2: #ffffff;
+  --shadows-switch-handle-3: #00000029;
+  --shadows-switch-handle-4: #0000001a;
+  --shadows-switch-handle-5: #0000001a;
+  --shadows-switch-handle-6: #0000001a;
+  --shadows-switch-handle-7: #0000001a;
+  --shadows-tooltip-1: #ffffff1a;
+  --shadows-tooltip-2: #00000052;
+  --stroke-border-base: #2e3035;
+  --stroke-border-error: #f43f5e;
+  --stroke-border-interactive: #60a5fa;
+  --stroke-border-loud: #edeef0;
+  --stroke-border-strong: #35373c;
+  --stroke-sep: #2e3035;
+  --tags-tag-blue-bg: #172554;
+  --tags-tag-blue-bg-hover: #1e2a8a;
+  --tags-tag-blue-border: #1e3a8a;
+  --tags-tag-blue-icon: #1d4ed8;
+  --tags-tag-blue-text: #3b82f6;
+  --tags-tag-green-bg: #022c22;
+  --tags-tag-green-bg-hover: #064e3b;
+  --tags-tag-green-border: #064e3b;
+  --tags-tag-green-icon: #047857;
+  --tags-tag-green-text: #10b981;
+  --tags-tag-neutral-bg: #2e3035;
+  --tags-tag-neutral-bg-hover: #35373c;
+  --tags-tag-neutral-border: #3c3f44;
+  --tags-tag-neutral-icon: #7d828a;
+  --tags-tag-neutral-text: #adb1b8;
+  --tags-tag-orange-bg: #451a03;
+  --tags-tag-orange-bg-hover: #78350f;
+  --tags-tag-orange-border: #78350f;
+  --tags-tag-orange-icon: #b45309;
+  --tags-tag-orange-text: #f59e0b;
+  --tags-tag-purple-bg: #2e1064;
+  --tags-tag-purple-bg-hover: #4c1d95;
+  --tags-tag-purple-border: #3c3f44;
+  --tags-tag-purple-icon: #6d28d9;
+  --tags-tag-purple-text: #8b5cf6;
+  --tags-tag-red-bg: #4c0519;
+  --tags-tag-red-bg-hover: #881337;
+  --tags-tag-red-border: #881337;
+  --tags-tag-red-icon: #f43f5e;
+  --tags-tag-red-text: #ff6369;
+  /* number */
+  --radius-s: 0.25rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-round: 624.9375rem;
+  --stroke-button-secondary-border: #27282d;
+}

package/lib/theme/index.d.ts

@@ -0,0 +1,9 @@
+import { type ThemeOptions } from '@mui/material/styles';
+import React from 'react';
+import { typography } from './typography';
+import './index.css';
+export { typography };
+export declare const themeOverrides: Partial<ThemeOptions>;
+export declare function PaymentThemeProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;

package/lib/theme/index.js

@@ -0,0 +1,259 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentThemeProvider = PaymentThemeProvider;
+exports.themeOverrides = void 0;
+Object.defineProperty(exports, "typography", {
+  enumerable: true,
+  get: function () {
+    return _typography.typography;
+  }
+});
+var _jsxRuntime = require("react/jsx-runtime");
+var _styles = require("@mui/material/styles");
+var _Theme = require("@arcblock/ux/lib/Theme");
+var _material = require("@mui/material");
+var _typography = require("./typography");
+require("./index.css");
+const themeOverrides = exports.themeOverrides = {
+  shape: {
+    borderRadius: 8
+  },
+  components: {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: "var(--radius-m, 8px)",
+          backgroundColor: "var(--backgrounds-bg-field)",
+          "&.Mui-disabled": {
+            backgroundColor: "var(--backgrounds-bg-disabled)"
+          },
+          ".MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--stroke-border-base, #EFF1F5)"
+          },
+          ".MuiInputBase-input": {
+            fontSize: "14px",
+            minHeight: "1.65em",
+            lineHeight: "1.65em"
+          }
+        }
+      }
+    },
+    MuiButton: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        root: {
+          fontSize: "1rem",
+          fontWeight: 500,
+          textTransform: "none"
+        },
+        containedPrimary: {
+          backgroundColor: "var(--buttons-button-inverted, #010714)",
+          color: "var(--foregrounds-fg-on-color, #fff)",
+          "&:hover": {
+            backgroundColor: "var(--buttons-button-inverted-hover, #1f2937)"
+          }
+        },
+        outlinedPrimary: {
+          color: "var(--foregrounds-fg-base, #010714)",
+          borderColor: "var(--stroke-button-secondary-border, #E5E7EB)",
+          "&:hover": {
+            backgroundColor: "var(--buttons-button-neutral-hover, #F3F4F6)",
+            borderColor: "var(--stroke-button-secondary-border, #E5E7EB)"
+          }
+        },
+        sizeSmall: {
+          height: 32
+        }
+      }
+    },
+    MuiIconButton: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        root: {
+          textTransform: "none"
+        },
+        colorPrimary: {
+          backgroundColor: "#fff"
+        }
+      }
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          textTransform: "none"
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: "none"
+        }
+      }
+    },
+    MuiTooltip: {
+      defaultProps: {
+        enterTouchDelay: 3e3,
+        leaveTouchDelay: 100
+      }
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: ({
+          theme
+        }) => ({
+          border: `1px solid ${theme.palette.divider}`,
+          boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+        })
+      }
+    },
+    MuiCssBaseline: {
+      styleOverrides: {
+        ".base-card": {
+          padding: "20px",
+          borderRadius: "var(--radius-l)",
+          background: "var(--backgrounds-bg-base)",
+          boxShadow: "0px 0px 0px 1px var(--shadows-card-rest-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-rest-2, rgba(2, 7, 19, 0.08)), 0px 2px 4px 0px var(--shadows-card-rest-3, rgba(2, 7, 19, 0.04))"
+        },
+        ".base-label": {
+          color: "var(--foregrounds-fg-base, #010714)",
+          fontSize: "16px",
+          fontWeight: "500",
+          lineHeight: "24px"
+        },
+        a: {
+          textDecoration: "none !important"
+        }
+      }
+    },
+    // MuiButtonBase: {
+    //    styleOverrides: {
+    //    }
+    // },
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          color: "var(--stroke-border-base, #EFF1F5)",
+          "&:hover": {
+            background: "none"
+          },
+          "&.Mui-checked": {
+            color: "var(--foregrounds-fg-interactive, #0086FF)"
+          }
+        }
+      }
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: "var(--backgrounds-bg-interactive, #0086FF)",
+          "&.Mui-checked": {
+            color: "var(--foregrounds-fg-interactive, #0086FF)"
+          }
+        }
+      }
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: "var(--stroke-border-base, #EFF1F5)"
+        }
+      }
+    },
+    MuiInputBase: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        root: () => ({
+          fontSize: "0.875rem",
+          backgroundColor: "var(--backgrounds-bg-field, #F9FAFB)"
+        })
+      }
+    },
+    MuiInputLabel: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        root: () => ({
+          fontSize: "0.875rem"
+        })
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: "var(--radius-S, 4px)",
+          border: "1px solid transparent",
+          "&.MuiChip-filledSuccess": {
+            color: "var(--tags-tag-green-text, #007C52)",
+            backgroundColor: "var(--tags-tag-green-bg, #B7FEE3)",
+            borderColor: "var(--tags-tag-green-border, #63F9CB)"
+          },
+          "&.MuiChip-filledDefault": {
+            color: "var(--tags-tag-neutral-text, #007C52)",
+            backgroundColor: "var(--tags-tag-neutral-bg, #B7FEE3)",
+            borderColor: "var(--tags-tag-neutral-border, #E5E7EB)"
+          },
+          "&.MuiChip-filledSecondary": {
+            color: "var(--tags-tag-purple-text, #8118EB)",
+            backgroundColor: " var(--tags-tag-purple-bg, #EFE9FF)",
+            borderColor: "var(--tags-tag-purple-border, #E1D6FF)"
+          },
+          "&.MuiChip-filledError": {
+            color: "var(--tags-tag-red-text, #E40031)",
+            backgroundColor: "var(--tags-tag-red-bg, #FFE2E6)",
+            borderColor: "var(--tags-tag-red-border, #FFC8D3)"
+          },
+          "&.MuiChip-filledWarning": {
+            color: "var(--tags-tag-orange-text, #D24000)",
+            backgroundColor: "var(--tags-tag-orange-bg, #FFF4BC)",
+            borderColor: "var(--tags-tag-orange-border, #FFE467)"
+          },
+          "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
+            color: "var(--tags-tag-blue-text, #0051E9)",
+            backgroundColor: "var(--tags-tag-blue-bg, #D2ECFF)",
+            borderColor: "var(--tags-tag-blue-border, #AFDDFF)"
+          }
+        }
+      }
+    }
+  }
+};
+function PaymentThemeProvider({
+  children
+}) {
+  const theme = (0, _styles.useTheme)();
+  const rootStyle = getComputedStyle(document.documentElement);
+  const merged = (0, _Theme.create)({
+    ...theme,
+    typography: _typography.typography,
+    palette: {
+      primary: {
+        main: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712"
+      },
+      text: {
+        primary: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712",
+        secondary: rootStyle.getPropertyValue("--foregrounds-fg-subtle").trim() || "#4b5563",
+        lighter: rootStyle.getPropertyValue("--foregrounds-fg-muted").trim() || "#9ca3af",
+        link: rootStyle.getPropertyValue("--foregrounds-fg-interactive").trim() || "#0086FF"
+      },
+      error: {
+        main: rootStyle.getPropertyValue("--foregrounds-fg-danger").trim() || "#FF003B"
+      }
+    },
+    ...themeOverrides
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+    theme: merged,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CssBaseline, {}), children]
+  });
+}

package/lib/theme/typography.d.ts

@@ -0,0 +1,2 @@
+import type { TypographyOptions } from '@mui/material/styles/createTypography';
+export declare const typography: TypographyOptions;

package/lib/theme/typography.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typography = void 0;
+const typography = exports.typography = {
+  h1: {
+    fontSize: "1.875rem",
+    lineHeight: 1.2,
+    fontWeight: 800,
+    letterSpacing: "-.025em"
+  },
+  h2: {
+    fontSize: "1.5rem",
+    lineHeight: 1.3333333,
+    fontWeight: 700,
+    letterSpacing: "-.025em"
+  },
+  h3: {
+    fontSize: "1.25rem",
+    lineHeight: 1.4,
+    fontWeight: 600,
+    letterSpacing: "-.025em"
+  },
+  h4: {
+    fontSize: "1.125rem",
+    lineHeight: 1.5,
+    fontWeight: 600
+  },
+  h5: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  h6: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  subtitle1: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  subtitle2: {
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    fontWeight: 400
+  },
+  body1: {
+    fontSize: "1rem",
+    lineHeight: 1.75
+  },
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700
+};

package/lib/types/index.d.ts

@@ -29,6 +29,7 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
     extraParams?: Record<string, any>;
     action?: string;
     mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
+    customTheme?: boolean;
 };
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;
@@ -42,3 +43,13 @@ export type PricingRenderProps = {
     quantity: string;
     totalAmount: string;
 };
+export type ActionProps = {
+    [key: string]: {
+        color?: string;
+        variant?: string;
+        sx?: {
+            [key: string]: any;
+        };
+        text?: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.21",
+  "version": "1.14.22",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -18,7 +18,7 @@
   "scripts": {
     "lint": "tsc --noEmit && eslint src tests --ext js --ext jsx --ext ts --ext tsx",
     "lint:fix": "npm run lint -- --fix",
-    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js",
+    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js && npm run cpfiles",
     "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
@@ -26,7 +26,8 @@
     "test": "node tools/jest.js",
     "coverage": "npm run test -- --coverage",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "cpfiles": "copyfiles -u 1 './src/**/*.css' lib/ && copyfiles -u 1 './src/**/*.css' es/"
   },
   "bugs": {
     "url": "https://github.com/blocklet/payment-kit/issues"
@@ -52,15 +53,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.11",
-    "@arcblock/ux": "^2.10.11",
-    "@arcblock/ws": "^1.18.127",
+    "@arcblock/did-connect": "^2.10.16",
+    "@arcblock/ux": "^2.10.16",
+    "@arcblock/ws": "^1.18.128",
+    "@blocklet/ui-react": "^2.10.16",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/styles": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.127",
+    "@ocap/util": "^1.18.128",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -91,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.21",
+    "@blocklet/payment-types": "1.14.22",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -103,14 +105,15 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-legacy": "^5.4.1",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "glob": "^10.4.5",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
     "prettier": "^3.3.3",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^7.6.20",
     "ts-jest": "^29.2.3",
@@ -120,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "48565120b3bdaf21533fe73626db725330c0f374"
+  "gitHead": "1fabd8f359e12e8ac68b20bd2d0d04b7928d16f3"
 }