@zonos/elements 1.2.3 → 1.2.4-alpha.2

package/dist/collection/scripts/zonos.js

@@ -1,45 +1,42 @@
 var _a;
 import { log } from "../components/utils/logging/log";
 import { logError } from "../components/utils/logging/logError";
+import { extractZonosQaUrl } from "./extractZonosQaUrl";
 import { zonosLoadStripe } from "./loadStripe";
-// 3 hours
-const EXPIRED_QA_TIME = 3 * 60 * 60 * 1000;
-// validate the time format (yyyymmddhhmmss) in the qa params if exceeds 1 hour, don't use qa
-const isZonosQa = (() => {
-  const zonosQaTime = window.location.search.match(/\?.*(&*)zonosQa=(\d+)/);
-  if (!zonosQaTime) {
-    return false;
-  }
-  const [, , zonosQaTimeExtracted] = zonosQaTime;
-  if (!zonosQaTimeExtracted) {
-    return false;
-  }
-  const zonosQaTimeValue = parseInt(zonosQaTimeExtracted, 10);
-  const now = new Date();
-  const nowTime = now.getTime();
-  const isValid = nowTime - zonosQaTimeValue < EXPIRED_QA_TIME;
-  if (isValid) {
-    // Zonos class is not available in here yet, so we use console.warn instead of log util
-    // eslint-disable-next-line no-console
-    console.warn(`[ZONOS-WARNING] USING DEBUG DOMAIN, THIS IS ONLY FOR ZONOS DEVELOPER TO DEBUG, PLEASE REMOVE zonosQa=xxx OUT OF URL IF YOU DON'T KNOW WHAT YOU'RE DOING`);
-  }
-  else {
-    // Zonos class is not available in here yet, so we use console.warn instead of log util
+const zonosQaUrl = (() => {
+    const qaUrl = extractZonosQaUrl(window.location.href);
+    if (!qaUrl) {
+        return null;
+    }
+    const suffixDomain = 'preview.js.zonos.com';
+    const fullUrl = `https://${qaUrl}.${suffixDomain}`;
     // eslint-disable-next-line no-console
-    console.warn(`[ZONOS-WARNING] QA DOMAIN IS EXPIRED, USING PRODUCTION DOMAIN NOW`);
-    // remove the zonosQa param from url
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    urlSearchParams.delete('zonosQa');
-    const newUrl = `${window.location.pathname}?${urlSearchParams.toString()}`;
-    window.history.replaceState({}, '', newUrl);
-  }
-  return isValid;
+    console.warn(`[ZONOS-WARNING] using '${fullUrl}' for loading script`);
+    // request to the url and check if the request has an error
+    void fetch(fullUrl)
+        .then(() => {
+        // cleanup checkout session to avoid using the prod session in preview domain
+        window.sessionStorage.removeItem('zonos--checkout-session-id');
+        window.sessionStorage.removeItem('zonos--client-secret');
+    })
+        .catch(() => {
+        // eslint-disable-next-line no-console
+        alert(`[ZONOS-WARNING] '${fullUrl}' IS NO LONGER AVAILABLE. REMOVING zonosQaUrl PARAM AND RELOADING THE PAGE`);
+        // remove the zonosQaUrl param from url
+        const urlSearchParams = new URLSearchParams(window.location.search);
+        urlSearchParams.delete('zonosQaUrl');
+        const { pathname } = window.location;
+        const newUrl = `${pathname}?${urlSearchParams.toString()}`;
+        window.history.replaceState({}, '', newUrl);
+        window.location.reload();
+        return null;
+    });
+    return fullUrl;
 })();
-const ZONOS_URL = isZonosQa
-  ? 'https://debug.js.zonos.com'
-  : process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
+const ZONOS_URL = zonosQaUrl || process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
 const UNPKG_ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL;
 const INTER_FONT_URL = 'https://rsms.me';
+const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
 export class Zonos {
 }
@@ -49,252 +46,280 @@ Zonos.doneInit = false;
 Zonos.debug = !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
 Zonos.isBigCommerce = false;
 Zonos.internationalHideSelector = '';
+Zonos.zonosQaUrl = zonosQaUrl;
 Zonos.version = `v${process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION}`;
+Zonos.modeAlerted = false;
 Zonos.getCurrentTimestamp = () => new Date().getTime();
+Zonos.zonosController = null;
 Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }) => {
-  if (Zonos.doneInit) {
-    // do nothing if zonos is already initializeds
-    return;
-  }
-  log(`====== ZONOS DEBUG MODE: on (${_a.version}) ======`);
-  if (!zonosApiKey) {
-    logError('Missing Zonos API key');
-    return;
-  }
-  _a.zonosApiKey = zonosApiKey;
-  log('init zonos');
-  // inject zonos cdn
-  Zonos.injectZonosCdn();
-  // inject css for zonos elements
-  Zonos.injectZonosCss();
-  // inject fonts for zonos elements
-  Zonos.injectFonts();
-  // init zonos controller
-  Zonos.injectController({
-    config: {
-      appearance,
-      checkoutSettings,
-      currencyConverter,
-      helloSettings,
-    },
-    zonosApiKey,
-  });
-  Zonos.doneInit = true;
+    if (_a.doneInit) {
+        // do nothing if zonos is already initializeds
+        return;
+    }
+    log(`====== ZONOS DEBUG MODE: on (${_a.version}) ======`);
+    if (!zonosApiKey) {
+        logError('Missing Zonos API key');
+        return;
+    }
+    _a.zonosApiKey = zonosApiKey;
+    log('init zonos');
+    // inject zonos cdn
+    _a.injectZonosCdn();
+    // inject css for zonos elements
+    _a.injectZonosCss();
+    // inject fonts for zonos elements
+    _a.injectFonts();
+    // init zonos controller
+    _a.injectController({
+        config: {
+            appearance,
+            checkoutSettings,
+            currencyConverter,
+            helloSettings,
+        },
+        zonosApiKey,
+    });
+    _a.doneInit = true;
 };
 Zonos.displayCurrency = () => {
-  const zonosHello = document.querySelector('zonos-hello');
-  if (zonosHello) {
-    void zonosHello.displayCurrency();
-  }
+    const zonosHello = document.querySelector('zonos-hello');
+    if (zonosHello) {
+        void zonosHello.displayCurrency();
+    }
 };
 Zonos.showNotification = (notification) => {
-  const zonosController = document.querySelector('zonos-controller');
-  void (zonosController === null || zonosController === void 0 ? void 0 : zonosController.showNotification(notification));
+    var _b;
+    void ((_b = _a.zonosController) === null || _b === void 0 ? void 0 : _b.showNotification(notification));
 };
 Zonos.disablePlaceOrderButtons = ({ autoEnable = true, disable, placeOrderButtonSelector, }) => {
-  // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
-  if (placeOrderButtonSelector) {
-    const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
-    const disableEvent = (e) => {
-      const target = e.target;
-      // prevent default and propagation when the item has disabled attribute
-      if (target.getAttribute('disabled')) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-    placeOrderButton.forEach(button => {
-      if (disable) {
-        button.setAttribute('disabled', 'true');
-        // prevent the selector to perform default action when it's disabled
-        button.addEventListener('click', disableEvent);
-      }
-      else {
-        button.removeAttribute('disabled');
-        // clean up the event listener
-        button.removeEventListener('click', disableEvent);
-      }
-    });
-    // only auto enable if autoEnable is true and we are setting button disable
-    if (autoEnable && disable) {
-      setTimeout(() => {
-        // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+    // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+    if (placeOrderButtonSelector) {
+        const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+        const disableEvent = (e) => {
+            const target = e.target;
+            // prevent default and propagation when the item has disabled attribute
+            if (target.getAttribute('disabled')) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
         placeOrderButton.forEach(button => {
-          button.removeAttribute('disabled');
-          // clean up the event listener if exists
-          button.removeEventListener('click', disableEvent);
+            if (disable) {
+                button.setAttribute('disabled', 'true');
+                // prevent the selector to perform default action when it's disabled
+                button.addEventListener('click', disableEvent);
+            }
+            else {
+                button.removeAttribute('disabled');
+                // clean up the event listener
+                button.removeEventListener('click', disableEvent);
+            }
         });
-      }, 5000);
+        // only auto enable if autoEnable is true and we are setting button disable
+        if (autoEnable && disable) {
+            setTimeout(() => {
+                // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+                placeOrderButton.forEach(button => {
+                    button.removeAttribute('disabled');
+                    // clean up the event listener if exists
+                    button.removeEventListener('click', disableEvent);
+                });
+            }, 5000);
+        }
     }
-  }
 };
 Zonos.injectController = ({ config, zonosApiKey, }) => {
-  var _b;
-  if (document.querySelector('zonos-controller')) {
-    return;
-  }
-  // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
-  if ((_b = config.checkoutSettings) === null || _b === void 0 ? void 0 : _b.placeOrderButtonSelector) {
-    const placeOrderButtonSelector = config.checkoutSettings.placeOrderButtonSelector;
-    _a.disablePlaceOrderButtons({
-      disable: true,
-      placeOrderButtonSelector,
-    });
-  }
-  const zonosController = document.createElement('zonos-controller');
-  zonosController.config = config;
-  zonosController.zonosApiKey = zonosApiKey;
-  zonosController.addEventListener('stripeInitEvent', async (event) => {
-    const { detail } = event;
-    log('loading Stripe');
-    const stripe = await zonosLoadStripe(detail.publishableKey);
-    if (!stripe) {
-      logError('API seems to be invalid or missing. Failed to load Stripe');
-      return;
+    var _b;
+    if (document.querySelector('zonos-controller')) {
+        return;
+    }
+    // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+    if ((_b = config.checkoutSettings) === null || _b === void 0 ? void 0 : _b.placeOrderButtonSelector) {
+        const placeOrderButtonSelector = config.checkoutSettings.placeOrderButtonSelector;
+        _a.disablePlaceOrderButtons({
+            disable: true,
+            placeOrderButtonSelector,
+        });
     }
-    window.Zonos.stripe = stripe;
-    void zonosController.initCheckoutElement(stripe);
-  });
-  document.body.appendChild(zonosController);
-  // eslint-disable-next-line no-console
-  log('Zonos controller injected!');
+    const zonosController = document.createElement('zonos-controller');
+    zonosController.config = config;
+    zonosController.zonosApiKey = zonosApiKey;
+    zonosController.addEventListener('stripeInitEvent', async (event) => {
+        const { detail } = event;
+        log('loading Stripe');
+        const stripe = await zonosLoadStripe(detail.publishableKey);
+        if (!stripe) {
+            logError('API seems to be invalid or missing. Failed to load Stripe');
+            return;
+        }
+        window.Zonos.stripe = stripe;
+        void zonosController.initCheckoutElement(stripe);
+    });
+    document.body.appendChild(zonosController);
+    // set zonos controller to be global
+    _a.zonosController = zonosController;
+    log('Zonos controller injected!');
 };
 Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
-  const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
-  const findScript = () => {
-    const script = document.querySelector(`script[src="${fullScriptUrl}"]`);
-    return !!script;
-  };
-  if (findScript()) {
-    // eslint-disable-next-line no-console
-    log(`Zonos script "${fullScriptUrl}" already exists in the document`, 'warn');
-    return;
-  }
-  const headOrBody = document.head || document.body;
-  // init zonos elements when the zonosKey is valid
-  // inject esmodule cdn for zonos elements
-  const script = document.createElement('script');
-  if (!!isModule) {
-    script.type = 'module';
-  }
-  else {
-    script.noModule = true;
-  }
-  script.src = fullScriptUrl;
-  script.onerror = () => {
-    // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-    const isVersioned = /\/\/v\d+\./g.test(scriptDomain);
-    if (!isVersioned) {
-      log('No need to fallback since this is not a versioned domain', 'warn');
-      return;
+    const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
+    const findScript = () => {
+        const script = document.querySelector(`script[src="${fullScriptUrl}"]`);
+        return !!script;
+    };
+    if (findScript()) {
+        // eslint-disable-next-line no-console
+        log(`Zonos script "${fullScriptUrl}" already exists in the document`, 'warn');
+        return;
     }
-    if (fallBackDomain) {
-      _a.injectScript({
-        isModule,
-        scriptDomain: fallBackDomain,
-        theRestUrl,
-      });
+    const headOrBody = document.head || document.body;
+    // init zonos elements when the zonosKey is valid
+    // inject esmodule cdn for zonos elements
+    const script = document.createElement('script');
+    if (!!isModule) {
+        script.type = 'module';
     }
-    logError(`Failed to load ${script.src}`);
-  };
-  headOrBody.appendChild(script);
+    else {
+        script.noModule = true;
+    }
+    script.src = fullScriptUrl;
+    script.onerror = () => {
+        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
+        const isVersioned = /\/\/v\d+\./g.test(scriptDomain);
+        if (!isVersioned) {
+            log('No need to fallback since this is not a versioned domain', 'warn');
+            return;
+        }
+        if (fallBackDomain) {
+            _a.injectScript({
+                isModule,
+                scriptDomain: fallBackDomain,
+                theRestUrl,
+            });
+        }
+        logError(`Failed to load ${script.src}`);
+    };
+    headOrBody.appendChild(script);
 };
 Zonos.injectZonosCdn = () => {
-  // init zonos elements when the zonosKey is valid
-  // inject esmodule cdn for zonos elements
-  _a.injectScript({
-    fallBackDomain: UNPKG_ZONOS_URL,
-    isModule: true,
-    scriptDomain: ZONOS_URL,
-    theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
-  });
-  // inject non module cdn for zonos elements
-  _a.injectScript({
-    fallBackDomain: UNPKG_ZONOS_URL,
-    isModule: false,
-    scriptDomain: ZONOS_URL,
-    theRestUrl: 'dist/zonos-elements/zonos-elements.js',
-  });
-  // eslint-disable-next-line no-console
-  log('Zonos cdn script injected!');
+    // init zonos elements when the zonosKey is valid
+    // inject esmodule cdn for zonos elements
+    _a.injectScript({
+        fallBackDomain: UNPKG_ZONOS_URL,
+        isModule: true,
+        scriptDomain: ZONOS_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
+    });
+    // inject non module cdn for zonos elements
+    _a.injectScript({
+        fallBackDomain: UNPKG_ZONOS_URL,
+        isModule: false,
+        scriptDomain: ZONOS_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.js',
+    });
+    // eslint-disable-next-line no-console
+    log('Zonos cdn script injected!');
 };
 Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) => {
-  const headOrBody = document.head || document.body;
-  // inject preconnect css for zonos elements
-  const zonosCssPreconnect = document.createElement('link');
-  zonosCssPreconnect.rel = 'preconnect';
-  zonosCssPreconnect.href = `${ZONOS_URL}/`;
-  headOrBody.appendChild(zonosCssPreconnect);
-  // inject css for zonos elements
-  const zonosCss = document.createElement('link');
-  zonosCss.rel = 'stylesheet';
-  zonosCss.href = `${stylesheetDomain}/${theRestUrl}`;
-  zonosCss.onerror = () => {
-    // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
-    const isVersioned = /\/\/v\d+\./g.test(stylesheetDomain);
-    if (!isVersioned) {
-      log('No need to fallback since this is not a versioned domain', 'warn');
-      return;
-    }
-    if (fallBackDomain && isVersioned) {
-      _a.injectStylesheet({
-        stylesheetDomain: fallBackDomain,
-        theRestUrl,
-      });
-    }
-    logError(`Failed to load ${zonosCss.href}`);
-  };
-  headOrBody.appendChild(zonosCss);
+    const headOrBody = document.head || document.body;
+    // inject preconnect css for zonos elements
+    const zonosCssPreconnect = document.createElement('link');
+    zonosCssPreconnect.rel = 'preconnect';
+    zonosCssPreconnect.href = `${ZONOS_URL}/`;
+    headOrBody.appendChild(zonosCssPreconnect);
+    // inject css for zonos elements
+    const zonosCss = document.createElement('link');
+    zonosCss.rel = 'stylesheet';
+    zonosCss.href = `${stylesheetDomain}/${theRestUrl}`;
+    zonosCss.onerror = () => {
+        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
+        const isVersioned = /\/\/v\d+\./g.test(stylesheetDomain);
+        if (!isVersioned) {
+            log('No need to fallback since this is not a versioned domain', 'warn');
+            return;
+        }
+        if (fallBackDomain && isVersioned) {
+            _a.injectStylesheet({
+                stylesheetDomain: fallBackDomain,
+                theRestUrl,
+            });
+        }
+        logError(`Failed to load ${zonosCss.href}`);
+    };
+    headOrBody.appendChild(zonosCss);
 };
 Zonos.injectZonosCss = () => {
-  const findStyleLink = () => {
-    return !!document.querySelector(`link[rel="stylesheet"][href*="/dist/zonos-elements/zonos-elements.css"]`);
-  };
-  if (findStyleLink()) {
-    // eslint-disable-next-line no-console
-    log('Zonos style links already injected', 'warn');
-    return;
-  }
-  // inject css for zonos elements
-  _a.injectStylesheet({
-    fallBackDomain: UNPKG_ZONOS_URL,
-    stylesheetDomain: ZONOS_URL,
-    theRestUrl: 'dist/zonos-elements/zonos-elements.css',
-  });
-  // eslint-disable-next-line no-console
-  log('Zonos style css injected!');
+    const findStyleLink = () => {
+        return !!document.querySelector(`link[rel="stylesheet"][href*="/dist/zonos-elements/zonos-elements.css"]`);
+    };
+    if (findStyleLink()) {
+        log('Zonos style links already injected', 'warn');
+        return;
+    }
+    // inject css for zonos elements
+    _a.injectStylesheet({
+        fallBackDomain: UNPKG_ZONOS_URL,
+        stylesheetDomain: ZONOS_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.css',
+    });
+    log('Zonos style css injected!');
 };
 Zonos.injectFonts = () => {
-  const findFont = () => {
-    const links = document.querySelectorAll(`link[rel="stylesheet"][href^="${INTER_FONT_URL}"]`);
-    for (let i = 0; i < links.length; i++) {
-      const link = links[i];
-      if (!link) {
-        continue;
-      }
-      if (INTER_FONT_REGEX.test(link.href)) {
-        continue;
-      }
-      return link;
+    const findFont = () => {
+        const links = document.querySelectorAll(`link[rel="stylesheet"][href^="${INTER_FONT_URL}"]`);
+        for (let i = 0; i < links.length; i++) {
+            const link = links[i];
+            if (!link) {
+                continue;
+            }
+            if (INTER_FONT_REGEX.test(link.href)) {
+                continue;
+            }
+            return link;
+        }
+        return null;
+    };
+    if (findFont()) {
+        log('Inter font already injected', 'warn');
+        return;
     }
-    return null;
-  };
-  if (findFont()) {
-    // eslint-disable-next-line no-console
-    log('Inter font already injected', 'warn');
-    return;
-  }
-  const headOrBody = document.head || document.body;
-  // inject css for zonos elements
-  const fontPreconnect = document.createElement('link');
-  fontPreconnect.rel = 'preconnect';
-  fontPreconnect.href = INTER_FONT_URL;
-  headOrBody.appendChild(fontPreconnect);
-  // inject css for zonos elements
-  const font = document.createElement('link');
-  font.rel = 'stylesheet';
-  font.href = `${INTER_FONT_URL}/inter/inter.css`;
-  headOrBody.appendChild(font);
-  // eslint-disable-next-line no-console
-  log('Zonos font injected!');
+    const headOrBody = document.head || document.body;
+    // inject font css for zonos elements
+    const fontPreconnect = document.createElement('link');
+    fontPreconnect.rel = 'preconnect';
+    fontPreconnect.href = INTER_FONT_URL;
+    headOrBody.appendChild(fontPreconnect);
+    // inject font css for zonos elements
+    const font = document.createElement('link');
+    font.rel = 'stylesheet';
+    font.href = `${INTER_FONT_URL}/inter/inter.css`;
+    headOrBody.appendChild(font);
+    log('Zonos font injected!');
+};
+// apply font for zonos elements and inject font if needed
+Zonos.setupGoogleFont = (fontFamily) => {
+    var _b;
+    void ((_b = _a.zonosController) === null || _b === void 0 ? void 0 : _b.setupGoogleFont(fontFamily));
+};
+// this function is to inject google font to the browser, not apply the font for zonos elements, to apply the font and inject font if needed, use `setupGoogleFont` instead
+Zonos.injectSupportGoogleFont = (fontUrl) => {
+    var _b;
+    log(`[FONT] injecting ${fontUrl}`);
+    const fontFamily = (_b = fontUrl.match(/family=(.*?):/)) === null || _b === void 0 ? void 0 : _b[1];
+    const headOrBody = document.head || document.body;
+    // inject font css for zonos elements
+    if (!document.querySelector(`link[rel="preconnect"][href^="${GOOGLE_FONT_URL}"]`)) {
+        const customFontPreconnect = document.createElement('link');
+        customFontPreconnect.rel = 'preconnect';
+        customFontPreconnect.href = GOOGLE_FONT_URL;
+        headOrBody.appendChild(customFontPreconnect);
+    }
+    if (document.querySelector(`link[rel="stylesheet"][href="${fontUrl}"]`)) {
+        log(`[FONT] ${fontFamily} font already injected`, 'warn');
+        return;
+    }
+    const customFont = document.createElement('link');
+    customFont.rel = 'stylesheet';
+    customFont.href = fontUrl;
+    headOrBody.appendChild(customFont);
+    log(`[FONT] ${fontFamily} font injected!`);
 };

package/dist/collection/styles/stripe/addressRuleStyle.js

@@ -1,16 +1,16 @@
 export const addressRuleStyle = ({ theme, }) => {
-  switch (theme) {
-    default:
-      return {
-        '.Input': {
-          // need to reset everything and the paddingTop to default, otherwise the paddingTop will not be updated.
-          padding: '0',
-          paddingBottom: '8px',
-          paddingLeft: '16px',
-          paddingRight: '8px',
-          // any value here will be add up to the default paddingTop (20px).
-          paddingTop: '6px',
-        },
-      };
-  }
+    switch (theme) {
+        default:
+            return {
+                '.Input': {
+                    // need to reset everything and the paddingTop to default, otherwise the paddingTop will not be updated.
+                    padding: '0',
+                    paddingBottom: '8px',
+                    paddingLeft: '16px',
+                    paddingRight: '8px',
+                    // any value here will be add up to the default paddingTop (20px).
+                    paddingTop: '6px',
+                },
+            };
+    }
 };

package/dist/collection/styles/stripe/defaultVariable.js

@@ -1,17 +1,17 @@
 import { getBorderRadius } from "../../components/utils/getBorderRadius";
 export const defaultVariable = ({ borderStyle, theme, }) => {
-  switch (theme) {
-    case 'DARK':
-      return {
-        borderRadius: getBorderRadius(borderStyle),
-        colorBackground: '#101117',
-        colorBackgroundText: '#C5C6CA',
-        colorText: '#C5C6CA',
-        colorTextPlaceholder: '#C5C6CA',
-      };
-    default:
-      return {
-        borderRadius: getBorderRadius(borderStyle),
-      };
-  }
+    switch (theme) {
+        case 'DARK':
+            return {
+                borderRadius: getBorderRadius(borderStyle),
+                colorBackground: '#101117',
+                colorBackgroundText: '#C5C6CA',
+                colorText: '#C5C6CA',
+                colorTextPlaceholder: '#C5C6CA',
+            };
+        default:
+            return {
+                borderRadius: getBorderRadius(borderStyle),
+            };
+    }
 };