@flopay/shared 1.1.4 → 1.1.6

package/README.md

@@ -41,11 +41,15 @@ import {
   SDK_VERSION,
   DEFAULT_APPEARANCE,
   NIGHT_APPEARANCE,
+  THEMES,
   CURRENCY_MAP,
   getCurrencyByCountry,
   isValidPublishableKey,
 } from '@flopay/shared';
 
+// Pick a coherent theme bundle and pass both halves to your checkout
+const { appearance, buttonsLayout } = THEMES['glass-dark'];
+
 import type {
   FloPayConfig,
   FloPayEnvironment,
@@ -77,7 +81,10 @@ throw validationError('Email is required', 'email');
 | `FloPayAppearance` | Theme config: `theme` (`'default'`/`'flat'`/`'night'`/`'none'`), `variables?`, `rules?` |
 | `FloPayThemeVariables` | CSS custom property overrides: `colorPrimary`, `colorBackground`, `colorText`, `colorDanger`, `borderRadius`, `fontFamily`, `fontSizeBase`, `spacingUnit` |
 | `ButtonsLayoutStyles` | Style overrides for the `buttons` layout: `cardButton`, `cardButtonFontSize`, `cardFormContainer`, `cardInputBorder`, `cardInputColor`, `cardInputPlaceholderColor`, `cardInputFontSize`, `cardInputBackground`, `nameInput`, `backButton`, `backButtonFontSize`, `backButtonIcon`, `submitButton`, `submitButtonFontSize`, `title`, `titleFontSize`, `errorBanner` |
-| `ButtonsLayoutTheme` | Theme preset name: `'default'` / `'minimal'` / `'rounded'` / `'dark'` |
+| `ButtonsLayoutTheme` | Theme preset name: `'default'` / `'minimal'` / `'rounded'` / `'dark'` / `'modern-light'` / `'modern-dark'` / `'bold-light'` / `'bold-dark'` / `'glass-light'` / `'glass-dark'` |
+| `ThemeBundle` | A coherent theme bundle: `{ appearance: FloPayAppearance, buttonsLayout: ButtonsLayoutStyles }` |
+| `ThemeBundleId` | Bundle id: `'modern-light'` / `'modern-dark'` / `'bold-light'` / `'bold-dark'` / `'glass-light'` / `'glass-dark'` |
+| `ThemeId` | Accepted by the React components' `theme` prop: `'classic'` ∪ `ThemeBundleId` |
 | `CheckoutMode` | Checkout mode: `'full'` / `'auto'` / `'confirm'` |
 | `CheckoutSession` | Session object: `id`, `clientSecret`, `mode`, `status`, `amount`, `currency`, `customer?`, `checkoutMode?`, `products?` (unified `CheckoutSessionProduct[]`), `successUrl?`, `cancelUrl?`, `coupons?`, `subtotalAmount?` / `discountAmount?` / `totalAmount?` (cart-currency major units; populated by billing API ≥ v1.1.2), `gateways?` (map keyed by gateway code — `stripe`, `paypal`, …), `accountData?`, `tagsData?` |
 | `CheckoutSessionProduct` | Unified product from session response: `uuid`, `checkoutSessionId`, `type` (`'item'`/`'subscription'`), `code?`, `name?`, `description?`, `quantity`, `totalAmount?`, `overrideAmount?`, `currency?`, `metadata?` |
@@ -139,6 +146,19 @@ throw validationError('Email is required', 'email');
 | `DEFAULT_APPEARANCE` | Default theme (primary `#4A49FF`, white background, Poppins font) |
 | `FLAT_APPEARANCE` | Flat theme (minimal borders, 4px radius) |
 | `NIGHT_APPEARANCE` | Dark theme (dark background `#1A1A2E`, light text) |
+| `MODERN_LIGHT_APPEARANCE` | Clean & airy light — Inter, FloPay-blue primary `#1785E0`, slate text, `14px` radius, soft input shadows |
+| `MODERN_DARK_APPEARANCE` | Clean & airy dark — Inter, sky-blue primary `#60A5FA`, deep-blue surface `#0B1220`, `14px` radius |
+| `BOLD_LIGHT_APPEARANCE` | Bold & vibrant light — Inter, saturated FloPay blue `#1785E0`, 2px borders, 600+ font weight, gradient-ready |
+| `BOLD_DARK_APPEARANCE` | Bold & vibrant dark — Inter, sky `#60A5FA` on deep-blue `#0C2B4D`, accented borders |
+| `GLASS_LIGHT_APPEARANCE` | Glass / elevated light — translucent inputs with backdrop blur, FloPay-blue primary `#1785E0`, `16px` radius |
+| `GLASS_DARK_APPEARANCE` | Glass / elevated dark — translucent inputs with backdrop blur, `#60A5FA` on slate `#0F172A` |
+| `BUTTONS_LAYOUT_DEFAULT` / `_MINIMAL` / `_ROUNDED` / `_DARK` | Original buttons-layout style presets (back-compat) |
+| `BUTTONS_LAYOUT_MODERN_LIGHT` / `_MODERN_DARK` | Wrapper styles paired with the modern appearance bundles |
+| `BUTTONS_LAYOUT_BOLD_LIGHT` / `_BOLD_DARK` | Wrapper styles paired with the bold appearance bundles |
+| `BUTTONS_LAYOUT_GLASS_LIGHT` / `_GLASS_DARK` | Wrapper styles paired with the glass appearance bundles |
+| `THEMES` | `Record<ThemeBundleId, ThemeBundle>` — pick `THEMES['glass-dark']` to get `{ appearance, buttonsLayout }` |
+| `resolveTheme(id)` | Resolve a `ThemeId` (`'classic'` ∪ `ThemeBundleId`) to its `ThemeBundle`; `'classic'` and missing ids return `undefined` |
+| `resolveButtonsLayoutTheme(name)` | Map a `ButtonsLayoutTheme` name to its `ButtonsLayoutStyles` preset |
 | `ELEMENT_TYPES` | `['payment', 'card', 'cardNumber', 'cardExpiry', 'cardCvc', 'address']` |
 | `SUPPORTED_CARD_BRANDS` | `['visa', 'mastercard', 'mastercard_debit', 'amex', 'discover']` |
 | `CURRENCY_MAP` | Country code to `CurrencyInfo` mapping (EU, GB, US, CA, NZ, AU) |

package/dist/index.cjs

@@ -23,9 +23,17 @@ __export(index_exports, {
   BILLING_API_URL: () => BILLING_API_URL,
   BILLING_API_URL_PRODUCTION: () => BILLING_API_URL_PRODUCTION,
   BILLING_API_URL_STAGING: () => BILLING_API_URL_STAGING,
+  BOLD_DARK_APPEARANCE: () => BOLD_DARK_APPEARANCE,
+  BOLD_LIGHT_APPEARANCE: () => BOLD_LIGHT_APPEARANCE,
+  BUTTONS_LAYOUT_BOLD_DARK: () => BUTTONS_LAYOUT_BOLD_DARK,
+  BUTTONS_LAYOUT_BOLD_LIGHT: () => BUTTONS_LAYOUT_BOLD_LIGHT,
   BUTTONS_LAYOUT_DARK: () => BUTTONS_LAYOUT_DARK,
   BUTTONS_LAYOUT_DEFAULT: () => BUTTONS_LAYOUT_DEFAULT,
+  BUTTONS_LAYOUT_GLASS_DARK: () => BUTTONS_LAYOUT_GLASS_DARK,
+  BUTTONS_LAYOUT_GLASS_LIGHT: () => BUTTONS_LAYOUT_GLASS_LIGHT,
   BUTTONS_LAYOUT_MINIMAL: () => BUTTONS_LAYOUT_MINIMAL,
+  BUTTONS_LAYOUT_MODERN_DARK: () => BUTTONS_LAYOUT_MODERN_DARK,
+  BUTTONS_LAYOUT_MODERN_LIGHT: () => BUTTONS_LAYOUT_MODERN_LIGHT,
   BUTTONS_LAYOUT_ROUNDED: () => BUTTONS_LAYOUT_ROUNDED,
   CA_PROVINCES: () => CA_PROVINCES,
   COUNTRY_OPTIONS: () => COUNTRY_OPTIONS,
@@ -37,9 +45,14 @@ __export(index_exports, {
   ELEMENT_TYPES: () => ELEMENT_TYPES,
   FLAT_APPEARANCE: () => FLAT_APPEARANCE,
   FloPayError: () => FloPayError,
+  GLASS_DARK_APPEARANCE: () => GLASS_DARK_APPEARANCE,
+  GLASS_LIGHT_APPEARANCE: () => GLASS_LIGHT_APPEARANCE,
+  MODERN_DARK_APPEARANCE: () => MODERN_DARK_APPEARANCE,
+  MODERN_LIGHT_APPEARANCE: () => MODERN_LIGHT_APPEARANCE,
   NIGHT_APPEARANCE: () => NIGHT_APPEARANCE,
   SDK_VERSION: () => SDK_VERSION,
   SUPPORTED_CARD_BRANDS: () => SUPPORTED_CARD_BRANDS,
+  THEMES: () => THEMES,
   US_STATES: () => US_STATES,
   apiError: () => apiError,
   authenticationError: () => authenticationError,
@@ -68,6 +81,7 @@ __export(index_exports, {
   resolveBillingApiUrl: () => resolveBillingApiUrl,
   resolveButtonsLayoutTheme: () => resolveButtonsLayoutTheme,
   resolveSessionCurrency: () => resolveSessionCurrency,
+  resolveTheme: () => resolveTheme,
   validationError: () => validationError
 });
 module.exports = __toCommonJS(index_exports);
@@ -137,7 +151,7 @@ function getFloPayEnvironment() {
 }
 
 // src/constants.ts
-var SDK_VERSION = "1.1.4";
+var SDK_VERSION = "1.1.6";
 var BILLING_API_URL_STAGING = "https://api.stage.flopay.com";
 var BILLING_API_URL_PRODUCTION = "https://api.flopay.com";
 var DEFAULT_API_BASE_URL = BILLING_API_URL_STAGING;
@@ -185,6 +199,249 @@ var NIGHT_APPEARANCE = {
     spacingUnit: "4px"
   }
 };
+var MODERN_LIGHT_APPEARANCE = {
+  theme: "default",
+  variables: {
+    colorPrimary: "#1785E0",
+    colorBackground: "#FFFFFF",
+    colorText: "#0F172A",
+    colorDanger: "#EF4444",
+    borderRadius: "12px",
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSizeBase: "15px",
+    spacingUnit: "5px"
+  },
+  rules: {
+    ".Input": {
+      padding: "14px 16px",
+      border: "1.5px solid #E5E7EB",
+      boxShadow: "0 1px 2px rgba(15,23,42,0.04)"
+    },
+    ".Input:focus": {
+      borderColor: "#1785E0",
+      boxShadow: "0 0 0 4px rgba(23,133,224,0.12)"
+    },
+    ".Label": {
+      fontWeight: "500",
+      color: "#475569",
+      marginBottom: "6px"
+    },
+    ".Tab": {
+      padding: "12px 16px",
+      borderRadius: "12px",
+      border: "1.5px solid #E5E7EB"
+    },
+    ".Tab:hover": {
+      borderColor: "#CBD5E1"
+    },
+    ".Tab--selected": {
+      borderColor: "#1785E0",
+      boxShadow: "0 0 0 1px #1785E0"
+    }
+  }
+};
+var MODERN_DARK_APPEARANCE = {
+  theme: "night",
+  variables: {
+    colorPrimary: "#60A5FA",
+    colorBackground: "#0B1220",
+    colorText: "#F1F5F9",
+    colorDanger: "#F87171",
+    borderRadius: "12px",
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSizeBase: "15px",
+    spacingUnit: "5px"
+  },
+  rules: {
+    ".Input": {
+      backgroundColor: "#111827",
+      padding: "14px 16px",
+      border: "1.5px solid #1F2937",
+      color: "#F1F5F9",
+      boxShadow: "none"
+    },
+    ".Input:focus": {
+      borderColor: "#60A5FA",
+      boxShadow: "0 0 0 4px rgba(96,165,250,0.18)"
+    },
+    ".Label": {
+      fontWeight: "500",
+      color: "#94A3B8",
+      marginBottom: "6px"
+    },
+    ".Tab": {
+      padding: "12px 16px",
+      borderRadius: "12px",
+      border: "1.5px solid #1F2937",
+      backgroundColor: "#111827",
+      color: "#F1F5F9"
+    },
+    ".Tab:hover": {
+      borderColor: "#374151"
+    },
+    ".Tab--selected": {
+      borderColor: "#60A5FA",
+      boxShadow: "0 0 0 1px #60A5FA"
+    }
+  }
+};
+var BOLD_LIGHT_APPEARANCE = {
+  theme: "default",
+  variables: {
+    colorPrimary: "#1785E0",
+    colorBackground: "#FFFFFF",
+    colorText: "#0C2B4D",
+    colorDanger: "#DC2626",
+    borderRadius: "12px",
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSizeBase: "16px",
+    spacingUnit: "5px"
+  },
+  rules: {
+    ".Input": {
+      padding: "14px 16px",
+      border: "2px solid #E5E7EB"
+    },
+    ".Input:focus": {
+      borderColor: "#1785E0",
+      boxShadow: "0 0 0 3px rgba(23,133,224,0.2)"
+    },
+    ".Label": {
+      fontWeight: "600",
+      color: "#0C2B4D"
+    },
+    ".Tab": {
+      padding: "14px 18px",
+      border: "2px solid #E5E7EB",
+      fontWeight: "600"
+    },
+    ".Tab--selected": {
+      borderColor: "#1785E0",
+      boxShadow: "0 0 0 1px #1785E0"
+    }
+  }
+};
+var BOLD_DARK_APPEARANCE = {
+  theme: "night",
+  variables: {
+    colorPrimary: "#60A5FA",
+    colorBackground: "#0C2B4D",
+    colorText: "#FFFFFF",
+    colorDanger: "#F87171",
+    borderRadius: "12px",
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSizeBase: "16px",
+    spacingUnit: "5px"
+  },
+  rules: {
+    ".Input": {
+      backgroundColor: "#1E3A8A",
+      padding: "14px 16px",
+      border: "2px solid #1E40AF",
+      color: "#FFFFFF"
+    },
+    ".Input:focus": {
+      borderColor: "#60A5FA",
+      boxShadow: "0 0 0 3px rgba(96,165,250,0.25)"
+    },
+    ".Label": {
+      fontWeight: "600",
+      color: "#DBEAFE"
+    },
+    ".Tab": {
+      padding: "14px 18px",
+      border: "2px solid #1E40AF",
+      backgroundColor: "#1E3A8A",
+      color: "#FFFFFF",
+      fontWeight: "600"
+    },
+    ".Tab--selected": {
+      borderColor: "#60A5FA",
+      boxShadow: "0 0 0 1px #60A5FA"
+    }
+  }
+};
+var GLASS_LIGHT_APPEARANCE = {
+  theme: "default",
+  variables: {
+    colorPrimary: "#1785E0",
+    colorBackground: "#FFFFFF",
+    colorText: "#1E293B",
+    colorDanger: "#EF4444",
+    borderRadius: "16px",
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSizeBase: "15px",
+    spacingUnit: "5px"
+  },
+  rules: {
+    ".Input": {
+      backgroundColor: "rgba(255,255,255,0.6)",
+      backdropFilter: "blur(10px)",
+      padding: "14px 16px",
+      border: "1px solid rgba(255,255,255,0.6)",
+      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 3px rgba(23,133,224,0.08)"
+    },
+    ".Input:focus": {
+      borderColor: "rgba(23,133,224,0.5)",
+      boxShadow: "0 0 0 3px rgba(23,133,224,0.15)"
+    },
+    ".Label": {
+      fontWeight: "500",
+      color: "#475569"
+    },
+    ".Tab": {
+      padding: "12px 16px",
+      backgroundColor: "rgba(255,255,255,0.5)",
+      border: "1px solid rgba(255,255,255,0.6)",
+      borderRadius: "14px"
+    },
+    ".Tab--selected": {
+      borderColor: "rgba(23,133,224,0.6)",
+      boxShadow: "0 0 0 1px rgba(23,133,224,0.6)"
+    }
+  }
+};
+var GLASS_DARK_APPEARANCE = {
+  theme: "night",
+  variables: {
+    colorPrimary: "#60A5FA",
+    colorBackground: "#0F172A",
+    colorText: "#F1F5F9",
+    colorDanger: "#F87171",
+    borderRadius: "16px",
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSizeBase: "15px",
+    spacingUnit: "5px"
+  },
+  rules: {
+    ".Input": {
+      backgroundColor: "rgba(15,23,42,0.6)",
+      backdropFilter: "blur(10px)",
+      padding: "14px 16px",
+      border: "1px solid rgba(255,255,255,0.08)",
+      color: "#F1F5F9"
+    },
+    ".Input:focus": {
+      borderColor: "rgba(96,165,250,0.5)",
+      boxShadow: "0 0 0 3px rgba(96,165,250,0.2)"
+    },
+    ".Label": {
+      fontWeight: "500",
+      color: "#94A3B8"
+    },
+    ".Tab": {
+      padding: "12px 16px",
+      backgroundColor: "rgba(15,23,42,0.6)",
+      border: "1px solid rgba(255,255,255,0.08)",
+      borderRadius: "14px",
+      color: "#F1F5F9"
+    },
+    ".Tab--selected": {
+      borderColor: "rgba(96,165,250,0.6)",
+      boxShadow: "0 0 0 1px rgba(96,165,250,0.6)"
+    }
+  }
+};
 var BUTTONS_LAYOUT_DEFAULT = {};
 var BUTTONS_LAYOUT_MINIMAL = {
   cardButton: {
@@ -263,6 +520,268 @@ var BUTTONS_LAYOUT_DARK = {
     color: "#f9fafb"
   }
 };
+var BUTTONS_LAYOUT_MODERN_LIGHT = {
+  cardFormContainer: {
+    backgroundColor: "#FAFAFA",
+    borderRadius: "20px",
+    border: "1px solid #E5E7EB",
+    boxShadow: "0 8px 24px rgba(15,23,42,0.04)",
+    padding: "24px"
+  },
+  cardButton: {
+    backgroundColor: "#FFFFFF",
+    borderRadius: "14px",
+    border: "1.5px solid #E5E7EB",
+    boxShadow: "0 1px 2px rgba(15,23,42,0.04)",
+    padding: "14px 18px"
+  },
+  cardInputBorder: "#E5E7EB",
+  nameInput: {
+    backgroundColor: "#FFFFFF",
+    border: "1.5px solid #E5E7EB",
+    borderRadius: "14px",
+    padding: "14px 16px"
+  },
+  submitButton: {
+    backgroundColor: "#1785E0",
+    borderRadius: "14px",
+    padding: "16px 24px",
+    boxShadow: "0 4px 14px rgba(23,133,224,0.25)",
+    fontWeight: "600"
+  },
+  title: {
+    color: "#0F172A",
+    fontWeight: "600"
+  },
+  titleFontSize: "20px",
+  backButton: { color: "#64748B" },
+  backButtonIcon: { backgroundColor: "#F1F5F9" }
+};
+var BUTTONS_LAYOUT_MODERN_DARK = {
+  cardFormContainer: {
+    backgroundColor: "#111827",
+    borderRadius: "20px",
+    border: "1px solid #1F2937",
+    boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
+    padding: "24px"
+  },
+  cardButton: {
+    backgroundColor: "#0B1220",
+    borderRadius: "14px",
+    border: "1.5px solid #1F2937",
+    color: "#F1F5F9",
+    padding: "14px 18px"
+  },
+  cardInputBorder: "#1F2937",
+  cardInputBackground: "#111827",
+  cardInputColor: "#F1F5F9",
+  cardInputPlaceholderColor: "#64748B",
+  nameInput: {
+    backgroundColor: "#111827",
+    border: "1.5px solid #1F2937",
+    borderRadius: "14px",
+    padding: "14px 16px",
+    color: "#F1F5F9"
+  },
+  submitButton: {
+    backgroundColor: "#60A5FA",
+    borderRadius: "14px",
+    padding: "16px 24px",
+    boxShadow: "0 4px 14px rgba(96,165,250,0.3)",
+    fontWeight: "600",
+    color: "#0B1220"
+  },
+  title: {
+    color: "#F1F5F9",
+    fontWeight: "600"
+  },
+  titleFontSize: "20px",
+  backButton: { color: "#94A3B8" },
+  backButtonIcon: { backgroundColor: "#1F2937" },
+  countrySelect: { backgroundColor: "#111827", color: "#F1F5F9" },
+  zipInput: { backgroundColor: "#111827", color: "#F1F5F9" }
+};
+var BUTTONS_LAYOUT_BOLD_LIGHT = {
+  cardFormContainer: {
+    backgroundColor: "#EFF6FF",
+    borderRadius: "20px",
+    border: "2px solid #1785E0",
+    padding: "24px"
+  },
+  cardButton: {
+    backgroundColor: "#FFFFFF",
+    borderRadius: "12px",
+    border: "2px solid #1785E0",
+    color: "#1785E0",
+    fontWeight: "700",
+    padding: "14px 18px"
+  },
+  cardInputBorder: "#E5E7EB",
+  nameInput: {
+    backgroundColor: "#FFFFFF",
+    border: "2px solid #E5E7EB",
+    borderRadius: "12px",
+    padding: "14px 16px",
+    fontWeight: "500"
+  },
+  submitButton: {
+    background: "linear-gradient(135deg, #1785E0 0%, #0EA5E9 100%)",
+    borderRadius: "9999px",
+    padding: "16px 24px",
+    boxShadow: "0 10px 25px rgba(23,133,224,0.35)",
+    fontWeight: "700",
+    color: "#FFFFFF",
+    border: "none"
+  },
+  submitButtonFontSize: "17px",
+  title: {
+    color: "#0C2B4D",
+    fontWeight: "800",
+    letterSpacing: "-0.02em"
+  },
+  titleFontSize: "22px",
+  backButton: { color: "#1785E0", fontWeight: "600" },
+  backButtonIcon: { backgroundColor: "#DBEAFE" }
+};
+var BUTTONS_LAYOUT_BOLD_DARK = {
+  cardFormContainer: {
+    backgroundColor: "#1E3A8A",
+    borderRadius: "20px",
+    border: "2px solid #60A5FA",
+    padding: "24px"
+  },
+  cardButton: {
+    backgroundColor: "#0C2B4D",
+    borderRadius: "12px",
+    border: "2px solid #60A5FA",
+    color: "#60A5FA",
+    fontWeight: "700",
+    padding: "14px 18px"
+  },
+  cardInputBorder: "#1E40AF",
+  cardInputBackground: "#1E3A8A",
+  cardInputColor: "#FFFFFF",
+  cardInputPlaceholderColor: "#60A5FA",
+  nameInput: {
+    backgroundColor: "#1E3A8A",
+    border: "2px solid #1E40AF",
+    borderRadius: "12px",
+    padding: "14px 16px",
+    fontWeight: "500",
+    color: "#FFFFFF"
+  },
+  submitButton: {
+    background: "linear-gradient(135deg, #60A5FA 0%, #38BDF8 100%)",
+    borderRadius: "9999px",
+    padding: "16px 24px",
+    boxShadow: "0 10px 25px rgba(96,165,250,0.35)",
+    fontWeight: "700",
+    color: "#FFFFFF",
+    border: "none"
+  },
+  submitButtonFontSize: "17px",
+  title: {
+    color: "#FFFFFF",
+    fontWeight: "800",
+    letterSpacing: "-0.02em"
+  },
+  titleFontSize: "22px",
+  backButton: { color: "#DBEAFE", fontWeight: "600" },
+  backButtonIcon: { backgroundColor: "#1E40AF" },
+  countrySelect: { backgroundColor: "#1E3A8A", color: "#FFFFFF" },
+  zipInput: { backgroundColor: "#1E3A8A", color: "#FFFFFF" }
+};
+var BUTTONS_LAYOUT_GLASS_LIGHT = {
+  cardFormContainer: {
+    background: "linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%)",
+    borderRadius: "24px",
+    border: "1px solid rgba(255,255,255,0.6)",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 40px rgba(23,133,224,0.15)",
+    padding: "28px"
+  },
+  cardButton: {
+    backgroundColor: "rgba(255,255,255,0.7)",
+    backdropFilter: "blur(20px)",
+    borderRadius: "16px",
+    border: "1px solid rgba(255,255,255,0.6)",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 16px rgba(23,133,224,0.1)",
+    padding: "14px 18px"
+  },
+  cardInputBorder: "rgba(255,255,255,0.6)",
+  nameInput: {
+    backgroundColor: "rgba(255,255,255,0.6)",
+    backdropFilter: "blur(10px)",
+    border: "1px solid rgba(255,255,255,0.6)",
+    borderRadius: "14px",
+    padding: "14px 16px"
+  },
+  submitButton: {
+    backgroundColor: "rgba(23,133,224,0.95)",
+    backdropFilter: "blur(10px)",
+    borderRadius: "16px",
+    padding: "16px 24px",
+    boxShadow: "0 10px 30px rgba(23,133,224,0.3), inset 0 1px 0 rgba(255,255,255,0.2)",
+    fontWeight: "600",
+    color: "#FFFFFF"
+  },
+  title: {
+    color: "#1E293B",
+    fontWeight: "600",
+    letterSpacing: "-0.01em"
+  },
+  titleFontSize: "20px",
+  backButton: { color: "#1785E0", fontWeight: "500" },
+  backButtonIcon: { backgroundColor: "rgba(255,255,255,0.7)" }
+};
+var BUTTONS_LAYOUT_GLASS_DARK = {
+  cardFormContainer: {
+    background: "linear-gradient(135deg, #0C2B4D 0%, #0F172A 100%)",
+    borderRadius: "24px",
+    border: "1px solid rgba(255,255,255,0.08)",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 50px rgba(0,0,0,0.4)",
+    padding: "28px"
+  },
+  cardButton: {
+    backgroundColor: "rgba(15,23,42,0.6)",
+    backdropFilter: "blur(20px)",
+    borderRadius: "16px",
+    border: "1px solid rgba(255,255,255,0.08)",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.3)",
+    padding: "14px 18px",
+    color: "#F1F5F9"
+  },
+  cardInputBorder: "rgba(255,255,255,0.08)",
+  cardInputBackground: "rgba(15,23,42,0.6)",
+  cardInputColor: "#F1F5F9",
+  cardInputPlaceholderColor: "#64748B",
+  nameInput: {
+    backgroundColor: "rgba(15,23,42,0.6)",
+    backdropFilter: "blur(10px)",
+    border: "1px solid rgba(255,255,255,0.08)",
+    borderRadius: "14px",
+    padding: "14px 16px",
+    color: "#F1F5F9"
+  },
+  submitButton: {
+    backgroundColor: "rgba(96,165,250,0.9)",
+    backdropFilter: "blur(10px)",
+    borderRadius: "16px",
+    padding: "16px 24px",
+    boxShadow: "0 10px 30px rgba(96,165,250,0.35), inset 0 1px 0 rgba(255,255,255,0.15)",
+    fontWeight: "600",
+    color: "#0F172A"
+  },
+  title: {
+    color: "#F1F5F9",
+    fontWeight: "600",
+    letterSpacing: "-0.01em"
+  },
+  titleFontSize: "20px",
+  backButton: { color: "#60A5FA", fontWeight: "500" },
+  backButtonIcon: { backgroundColor: "rgba(255,255,255,0.08)" },
+  countrySelect: { backgroundColor: "rgba(15,23,42,0.6)", color: "#F1F5F9" },
+  zipInput: { backgroundColor: "rgba(15,23,42,0.6)", color: "#F1F5F9" }
+};
 function resolveButtonsLayoutTheme(theme) {
   switch (theme) {
     case "minimal":
@@ -271,10 +790,34 @@ function resolveButtonsLayoutTheme(theme) {
       return BUTTONS_LAYOUT_ROUNDED;
     case "dark":
       return BUTTONS_LAYOUT_DARK;
+    case "modern-light":
+      return BUTTONS_LAYOUT_MODERN_LIGHT;
+    case "modern-dark":
+      return BUTTONS_LAYOUT_MODERN_DARK;
+    case "bold-light":
+      return BUTTONS_LAYOUT_BOLD_LIGHT;
+    case "bold-dark":
+      return BUTTONS_LAYOUT_BOLD_DARK;
+    case "glass-light":
+      return BUTTONS_LAYOUT_GLASS_LIGHT;
+    case "glass-dark":
+      return BUTTONS_LAYOUT_GLASS_DARK;
     default:
       return BUTTONS_LAYOUT_DEFAULT;
   }
 }
+var THEMES = {
+  "modern-light": { appearance: MODERN_LIGHT_APPEARANCE, buttonsLayout: BUTTONS_LAYOUT_MODERN_LIGHT },
+  "modern-dark": { appearance: MODERN_DARK_APPEARANCE, buttonsLayout: BUTTONS_LAYOUT_MODERN_DARK },
+  "bold-light": { appearance: BOLD_LIGHT_APPEARANCE, buttonsLayout: BUTTONS_LAYOUT_BOLD_LIGHT },
+  "bold-dark": { appearance: BOLD_DARK_APPEARANCE, buttonsLayout: BUTTONS_LAYOUT_BOLD_DARK },
+  "glass-light": { appearance: GLASS_LIGHT_APPEARANCE, buttonsLayout: BUTTONS_LAYOUT_GLASS_LIGHT },
+  "glass-dark": { appearance: GLASS_DARK_APPEARANCE, buttonsLayout: BUTTONS_LAYOUT_GLASS_DARK }
+};
+function resolveTheme(id) {
+  if (!id || id === "classic") return void 0;
+  return THEMES[id];
+}
 var ELEMENT_TYPES = [
   "payment",
   "card",
@@ -992,9 +1535,17 @@ function isValidSecretKey(key) {
   BILLING_API_URL,
   BILLING_API_URL_PRODUCTION,
   BILLING_API_URL_STAGING,
+  BOLD_DARK_APPEARANCE,
+  BOLD_LIGHT_APPEARANCE,
+  BUTTONS_LAYOUT_BOLD_DARK,
+  BUTTONS_LAYOUT_BOLD_LIGHT,
   BUTTONS_LAYOUT_DARK,
   BUTTONS_LAYOUT_DEFAULT,
+  BUTTONS_LAYOUT_GLASS_DARK,
+  BUTTONS_LAYOUT_GLASS_LIGHT,
   BUTTONS_LAYOUT_MINIMAL,
+  BUTTONS_LAYOUT_MODERN_DARK,
+  BUTTONS_LAYOUT_MODERN_LIGHT,
   BUTTONS_LAYOUT_ROUNDED,
   CA_PROVINCES,
   COUNTRY_OPTIONS,
@@ -1006,9 +1557,14 @@ function isValidSecretKey(key) {
   ELEMENT_TYPES,
   FLAT_APPEARANCE,
   FloPayError,
+  GLASS_DARK_APPEARANCE,
+  GLASS_LIGHT_APPEARANCE,
+  MODERN_DARK_APPEARANCE,
+  MODERN_LIGHT_APPEARANCE,
   NIGHT_APPEARANCE,
   SDK_VERSION,
   SUPPORTED_CARD_BRANDS,
+  THEMES,
   US_STATES,
   apiError,
   authenticationError,
@@ -1037,6 +1593,7 @@ function isValidSecretKey(key) {
   resolveBillingApiUrl,
   resolveButtonsLayoutTheme,
   resolveSessionCurrency,
+  resolveTheme,
   validationError
 });
 //# sourceMappingURL=index.cjs.map