fix(theme): background and width

.changeset/nasty-pillows-heal.md

@@ -0,0 +1,5 @@
+---
+'rc-credit-card': patch
+---
+
+fix(theme): update custom width and background

src/components/CreditCard/CreditCard.tsx

@@ -1,5 +1,3 @@
-import './flip-transation.css'
-
 import { CSSTransition } from 'react-transition-group'
 import styled, { createGlobalStyle, ThemeProvider } from 'styled-components'
 
@@ -21,6 +19,8 @@ const Card = styled.div`
   height: 100%;
   width: 100%;
   padding: 25px;
+  width: ${({ theme }) => theme.width}px;
+  height: ${({ theme }) => theme.height}px;
   border-radius: ${({ theme }) => theme.borderRadius}px;
   backdrop-filter: blur(${({ theme }) => theme.backdropBlur}px);
   ${({ theme }) =>
@@ -146,6 +146,8 @@ const Signature = styled.span`
 `
 
 export type CreditCardTheme = {
+  width?: number
+  height?: number
   borderRadius?: number
   background?: [number, number, number, number] | string
   backdropBlur?: number

src/components/CreditCard/index.ts

@@ -1,2 +1,4 @@
+import './style.css'
+
 export type { CreditCardProps } from './CreditCard'
 export { CreditCard } from './CreditCard'

src/components/CreditCard/useCustomTheme.tsx

@@ -5,14 +5,16 @@ import { CreditCardTheme } from './CreditCard'
 export const useCustomTheme = (theme?: CreditCardTheme) => {
   const customTheme = useMemo(() => {
     return {
+      width: 400,
+      height: 220,
       borderRadius: 15,
-      background: [255, 255, 255, 0.1],
+      background: [18, 19, 33, 0.1],
       backdropBlur: 25,
       shadow: true,
       border: true,
       borderWidth: 1,
       borderStyle: 'solid',
-      borderColor: [255, 255, 255, 0.1],
+      borderColor: [18, 19, 33, 0.1],
       color: '#fff',
       ...theme,
     }