@flopay/shared 1.1.4 → 1.1.6

package/dist/index.mjs

@@ -63,7 +63,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;
@@ -111,6 +111,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: {
@@ -189,6 +432,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":
@@ -197,10 +702,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",
@@ -917,9 +1446,17 @@ export {
   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,
@@ -931,9 +1468,14 @@ export {
   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,
@@ -962,6 +1504,7 @@ export {
   resolveBillingApiUrl,
   resolveButtonsLayoutTheme,
   resolveSessionCurrency,
+  resolveTheme,
   validationError
 };
 //# sourceMappingURL=index.mjs.map