@feathery/react 2.12.3-pr-1522.4bcc507.0 → 2.14.0

package/dist/fthry_PaymentMethodField.PRJIHswh.js

@@ -0,0 +1,925 @@
+import { t as __rest, s as featheryDoc, j as jsxs, a as __assign, ac as getStripe, b as jsx, _ as __read, u as useBorder, ad as filterKeys, ae as ERROR_COLOR } from './fthry_index.CdIRvNp8.js';
+import React__default, { memo, useEffect, useState, useRef } from 'react';
+import { P as PropTypes } from './fthry_index.CwsphGMI.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.xj-t-582.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+import './fthry_Overlay.CJFSLbLE.js';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var useAttachEvent = function useAttachEvent(element, event, cb) {
+  var cbDefined = !!cb;
+  var cbRef = React__default.useRef(cb); // In many integrations the callback prop changes on each render.
+  // Using a ref saves us from calling element.on/.off every render.
+
+  React__default.useEffect(function () {
+    cbRef.current = cb;
+  }, [cb]);
+  React__default.useEffect(function () {
+    if (!cbDefined || !element) {
+      return function () {};
+    }
+
+    var decoratedCb = function decoratedCb() {
+      if (cbRef.current) {
+        cbRef.current.apply(cbRef, arguments);
+      }
+    };
+
+    element.on(event, decoratedCb);
+    return function () {
+      element.off(event, decoratedCb);
+    };
+  }, [cbDefined, event, element, cbRef]);
+};
+
+var usePrevious = function usePrevious(value) {
+  var ref = React__default.useRef(value);
+  React__default.useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+var isUnknownObject = function isUnknownObject(raw) {
+  return raw !== null && _typeof(raw) === 'object';
+};
+var isPromise = function isPromise(raw) {
+  return isUnknownObject(raw) && typeof raw.then === 'function';
+}; // We are using types to enforce the `stripe` prop in this lib,
+// but in an untyped integration `stripe` could be anything, so we need
+// to do some sanity validation to prevent type errors.
+
+var isStripe = function isStripe(raw) {
+  return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function';
+};
+
+var PLAIN_OBJECT_STR = '[object Object]';
+var isEqual = function isEqual(left, right) {
+  if (!isUnknownObject(left) || !isUnknownObject(right)) {
+    return left === right;
+  }
+
+  var leftArray = Array.isArray(left);
+  var rightArray = Array.isArray(right);
+  if (leftArray !== rightArray) return false;
+  var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
+  var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
+  if (leftPlainObject !== rightPlainObject) return false; // not sure what sort of special object this is (regexp is one option), so
+  // fallback to reference check.
+
+  if (!leftPlainObject && !leftArray) return left === right;
+  var leftKeys = Object.keys(left);
+  var rightKeys = Object.keys(right);
+  if (leftKeys.length !== rightKeys.length) return false;
+  var keySet = {};
+
+  for (var i = 0; i < leftKeys.length; i += 1) {
+    keySet[leftKeys[i]] = true;
+  }
+
+  for (var _i = 0; _i < rightKeys.length; _i += 1) {
+    keySet[rightKeys[_i]] = true;
+  }
+
+  var allKeys = Object.keys(keySet);
+
+  if (allKeys.length !== leftKeys.length) {
+    return false;
+  }
+
+  var l = left;
+  var r = right;
+
+  var pred = function pred(key) {
+    return isEqual(l[key], r[key]);
+  };
+
+  return allKeys.every(pred);
+};
+
+var extractAllowedOptionsUpdates = function extractAllowedOptionsUpdates(options, prevOptions, immutableKeys) {
+  if (!isUnknownObject(options)) {
+    return null;
+  }
+
+  return Object.keys(options).reduce(function (newOptions, key) {
+    var isUpdated = !isUnknownObject(prevOptions) || !isEqual(options[key], prevOptions[key]);
+
+    if (immutableKeys.includes(key)) {
+      if (isUpdated) {
+        console.warn("Unsupported prop change: options.".concat(key, " is not a mutable property."));
+      }
+
+      return newOptions;
+    }
+
+    if (!isUpdated) {
+      return newOptions;
+    }
+
+    return _objectSpread2(_objectSpread2({}, newOptions || {}), {}, _defineProperty({}, key, options[key]));
+  }, null);
+};
+
+var INVALID_STRIPE_ERROR$2 = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.'; // We are using types to enforce the `stripe` prop in this lib, but in a real
+// integration `stripe` could be anything, so we need to do some sanity
+// validation to prevent type errors.
+
+var validateStripe = function validateStripe(maybeStripe) {
+  var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR$2;
+
+  if (maybeStripe === null || isStripe(maybeStripe)) {
+    return maybeStripe;
+  }
+
+  throw new Error(errorMsg);
+};
+
+var parseStripeProp = function parseStripeProp(raw) {
+  var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR$2;
+
+  if (isPromise(raw)) {
+    return {
+      tag: 'async',
+      stripePromise: Promise.resolve(raw).then(function (result) {
+        return validateStripe(result, errorMsg);
+      })
+    };
+  }
+
+  var stripe = validateStripe(raw, errorMsg);
+
+  if (stripe === null) {
+    return {
+      tag: 'empty'
+    };
+  }
+
+  return {
+    tag: 'sync',
+    stripe: stripe
+  };
+};
+
+var registerWithStripeJs = function registerWithStripeJs(stripe) {
+  if (!stripe || !stripe._registerWrapper || !stripe.registerAppInfo) {
+    return;
+  }
+
+  stripe._registerWrapper({
+    name: 'react-stripe-js',
+    version: "3.7.0"
+  });
+
+  stripe.registerAppInfo({
+    name: 'react-stripe-js',
+    version: "3.7.0",
+    url: 'https://stripe.com/docs/stripe-js/react'
+  });
+};
+
+var ElementsContext = /*#__PURE__*/React__default.createContext(null);
+ElementsContext.displayName = 'ElementsContext';
+var parseElementsContext = function parseElementsContext(ctx, useCase) {
+  if (!ctx) {
+    throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
+  }
+
+  return ctx;
+};
+/**
+ * The `Elements` provider allows you to use [Element components](https://stripe.com/docs/stripe-js/react#element-components) and access the [Stripe object](https://stripe.com/docs/js/initializing) in any nested component.
+ * Render an `Elements` provider at the root of your React app so that it is available everywhere you need it.
+ *
+ * To use the `Elements` provider, call `loadStripe` from `@stripe/stripe-js` with your publishable key.
+ * The `loadStripe` function will asynchronously load the Stripe.js script and initialize a `Stripe` object.
+ * Pass the returned `Promise` to `Elements`.
+ *
+ * @docs https://stripe.com/docs/stripe-js/react#elements-provider
+ */
+
+var Elements = function Elements(_ref) {
+  var rawStripeProp = _ref.stripe,
+      options = _ref.options,
+      children = _ref.children;
+  var parsed = React__default.useMemo(function () {
+    return parseStripeProp(rawStripeProp);
+  }, [rawStripeProp]); // For a sync stripe instance, initialize into context
+
+  var _React$useState = React__default.useState(function () {
+    return {
+      stripe: parsed.tag === 'sync' ? parsed.stripe : null,
+      elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null
+    };
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      ctx = _React$useState2[0],
+      setContext = _React$useState2[1];
+
+  React__default.useEffect(function () {
+    var isMounted = true;
+
+    var safeSetContext = function safeSetContext(stripe) {
+      setContext(function (ctx) {
+        // no-op if we already have a stripe instance (https://github.com/stripe/react-stripe-js/issues/296)
+        if (ctx.stripe) return ctx;
+        return {
+          stripe: stripe,
+          elements: stripe.elements(options)
+        };
+      });
+    }; // For an async stripePromise, store it in context once resolved
+
+
+    if (parsed.tag === 'async' && !ctx.stripe) {
+      parsed.stripePromise.then(function (stripe) {
+        if (stripe && isMounted) {
+          // Only update Elements context if the component is still mounted
+          // and stripe is not null. We allow stripe to be null to make
+          // handling SSR easier.
+          safeSetContext(stripe);
+        }
+      });
+    } else if (parsed.tag === 'sync' && !ctx.stripe) {
+      // Or, handle a sync stripe instance going from null -> populated
+      safeSetContext(parsed.stripe);
+    }
+
+    return function () {
+      isMounted = false;
+    };
+  }, [parsed, ctx, options]); // Warn on changes to stripe prop
+
+  var prevStripe = usePrevious(rawStripeProp);
+  React__default.useEffect(function () {
+    if (prevStripe !== null && prevStripe !== rawStripeProp) {
+      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
+    }
+  }, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes
+
+  var prevOptions = usePrevious(options);
+  React__default.useEffect(function () {
+    if (!ctx.elements) {
+      return;
+    }
+
+    var updates = extractAllowedOptionsUpdates(options, prevOptions, ['clientSecret', 'fonts']);
+
+    if (updates) {
+      ctx.elements.update(updates);
+    }
+  }, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance
+
+  React__default.useEffect(function () {
+    registerWithStripeJs(ctx.stripe);
+  }, [ctx.stripe]);
+  return /*#__PURE__*/React__default.createElement(ElementsContext.Provider, {
+    value: ctx
+  }, children);
+};
+Elements.propTypes = {
+  stripe: PropTypes.any,
+  options: PropTypes.object
+};
+var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) {
+  var ctx = React__default.useContext(ElementsContext);
+  return parseElementsContext(ctx, useCaseMessage);
+};
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#useelements-hook
+ */
+
+var useElements = function useElements() {
+  var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'),
+      elements = _useElementsContextWi.elements;
+
+  return elements;
+};
+({
+  children: PropTypes.func.isRequired
+});
+var CheckoutSdkContext = /*#__PURE__*/React__default.createContext(null);
+CheckoutSdkContext.displayName = 'CheckoutSdkContext';
+var parseCheckoutSdkContext = function parseCheckoutSdkContext(ctx, useCase) {
+  if (!ctx) {
+    throw new Error("Could not find CheckoutProvider context; You need to wrap the part of your app that ".concat(useCase, " in an <CheckoutProvider> provider."));
+  }
+
+  return ctx;
+};
+var CheckoutContext = /*#__PURE__*/React__default.createContext(null);
+CheckoutContext.displayName = 'CheckoutContext';
+({
+  stripe: PropTypes.any,
+  options: PropTypes.shape({
+    fetchClientSecret: PropTypes.func.isRequired,
+    elementsOptions: PropTypes.object
+  }).isRequired
+});
+var useElementsOrCheckoutSdkContextWithUseCase = function useElementsOrCheckoutSdkContextWithUseCase(useCaseString) {
+  var checkoutSdkContext = React__default.useContext(CheckoutSdkContext);
+  var elementsContext = React__default.useContext(ElementsContext);
+
+  if (checkoutSdkContext && elementsContext) {
+    throw new Error("You cannot wrap the part of your app that ".concat(useCaseString, " in both <CheckoutProvider> and <Elements> providers."));
+  }
+
+  if (checkoutSdkContext) {
+    return parseCheckoutSdkContext(checkoutSdkContext, useCaseString);
+  }
+
+  return parseElementsContext(elementsContext, useCaseString);
+};
+
+var _excluded = ["mode"];
+
+var capitalized = function capitalized(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+var createElementComponent = function createElementComponent(type, isServer) {
+  var displayName = "".concat(capitalized(type), "Element");
+
+  var ClientElement = function ClientElement(_ref) {
+    var id = _ref.id,
+        className = _ref.className,
+        _ref$options = _ref.options,
+        options = _ref$options === void 0 ? {} : _ref$options,
+        onBlur = _ref.onBlur,
+        onFocus = _ref.onFocus,
+        onReady = _ref.onReady,
+        onChange = _ref.onChange,
+        onEscape = _ref.onEscape,
+        onClick = _ref.onClick,
+        onLoadError = _ref.onLoadError,
+        onLoaderStart = _ref.onLoaderStart,
+        onNetworksChange = _ref.onNetworksChange,
+        onConfirm = _ref.onConfirm,
+        onCancel = _ref.onCancel,
+        onShippingAddressChange = _ref.onShippingAddressChange,
+        onShippingRateChange = _ref.onShippingRateChange;
+    var ctx = useElementsOrCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
+    var elements = 'elements' in ctx ? ctx.elements : null;
+    var checkoutSdk = 'checkoutSdk' in ctx ? ctx.checkoutSdk : null;
+
+    var _React$useState = React__default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        element = _React$useState2[0],
+        setElement = _React$useState2[1];
+
+    var elementRef = React__default.useRef(null);
+    var domNode = React__default.useRef(null); // For every event where the merchant provides a callback, call element.on
+    // with that callback. If the merchant ever changes the callback, removes
+    // the old callback with element.off and then call element.on with the new one.
+
+    useAttachEvent(element, 'blur', onBlur);
+    useAttachEvent(element, 'focus', onFocus);
+    useAttachEvent(element, 'escape', onEscape);
+    useAttachEvent(element, 'click', onClick);
+    useAttachEvent(element, 'loaderror', onLoadError);
+    useAttachEvent(element, 'loaderstart', onLoaderStart);
+    useAttachEvent(element, 'networkschange', onNetworksChange);
+    useAttachEvent(element, 'confirm', onConfirm);
+    useAttachEvent(element, 'cancel', onCancel);
+    useAttachEvent(element, 'shippingaddresschange', onShippingAddressChange);
+    useAttachEvent(element, 'shippingratechange', onShippingRateChange);
+    useAttachEvent(element, 'change', onChange);
+    var readyCallback;
+
+    if (onReady) {
+      if (type === 'expressCheckout') {
+        // Passes through the event, which includes visible PM types
+        readyCallback = onReady;
+      } else {
+        // For other Elements, pass through the Element itself.
+        readyCallback = function readyCallback() {
+          onReady(element);
+        };
+      }
+    }
+
+    useAttachEvent(element, 'ready', readyCallback);
+    React__default.useLayoutEffect(function () {
+      if (elementRef.current === null && domNode.current !== null && (elements || checkoutSdk)) {
+        var newElement = null;
+
+        if (checkoutSdk) {
+          switch (type) {
+            case 'payment':
+              newElement = checkoutSdk.createPaymentElement(options);
+              break;
+
+            case 'address':
+              if ('mode' in options) {
+                var mode = options.mode,
+                    restOptions = _objectWithoutProperties(options, _excluded);
+
+                if (mode === 'shipping') {
+                  newElement = checkoutSdk.createShippingAddressElement(restOptions);
+                } else if (mode === 'billing') {
+                  newElement = checkoutSdk.createBillingAddressElement(restOptions);
+                } else {
+                  throw new Error("Invalid options.mode. mode must be 'billing' or 'shipping'.");
+                }
+              } else {
+                throw new Error("You must supply options.mode. mode must be 'billing' or 'shipping'.");
+              }
+
+              break;
+
+            case 'expressCheckout':
+              newElement = checkoutSdk.createExpressCheckoutElement(options);
+              break;
+
+            case 'currencySelector':
+              newElement = checkoutSdk.createCurrencySelectorElement();
+              break;
+
+            default:
+              throw new Error("Invalid Element type ".concat(displayName, ". You must use either the <PaymentElement />, <AddressElement options={{mode: 'shipping'}} />, <AddressElement options={{mode: 'billing'}} />, or <ExpressCheckoutElement />."));
+          }
+        } else if (elements) {
+          newElement = elements.create(type, options);
+        } // Store element in a ref to ensure it's _immediately_ available in cleanup hooks in StrictMode
+
+
+        elementRef.current = newElement; // Store element in state to facilitate event listener attachment
+
+        setElement(newElement);
+
+        if (newElement) {
+          newElement.mount(domNode.current);
+        }
+      }
+    }, [elements, checkoutSdk, options]);
+    var prevOptions = usePrevious(options);
+    React__default.useEffect(function () {
+      if (!elementRef.current) {
+        return;
+      }
+
+      var updates = extractAllowedOptionsUpdates(options, prevOptions, ['paymentRequest']);
+
+      if (updates && 'update' in elementRef.current) {
+        elementRef.current.update(updates);
+      }
+    }, [options, prevOptions]);
+    React__default.useLayoutEffect(function () {
+      return function () {
+        if (elementRef.current && typeof elementRef.current.destroy === 'function') {
+          try {
+            elementRef.current.destroy();
+            elementRef.current = null;
+          } catch (error) {// Do nothing
+          }
+        }
+      };
+    }, []);
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: id,
+      className: className,
+      ref: domNode
+    });
+  }; // Only render the Element wrapper in a server environment.
+
+
+  var ServerElement = function ServerElement(props) {
+    useElementsOrCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
+    var id = props.id,
+        className = props.className;
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: id,
+      className: className
+    });
+  };
+
+  var Element = isServer ? ServerElement : ClientElement;
+  Element.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+    onReady: PropTypes.func,
+    onEscape: PropTypes.func,
+    onClick: PropTypes.func,
+    onLoadError: PropTypes.func,
+    onLoaderStart: PropTypes.func,
+    onNetworksChange: PropTypes.func,
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func,
+    onShippingAddressChange: PropTypes.func,
+    onShippingRateChange: PropTypes.func,
+    options: PropTypes.object
+  };
+  Element.displayName = displayName;
+  Element.__elementType = type;
+  return Element;
+};
+
+var isServer = typeof window === 'undefined';
+
+var EmbeddedCheckoutContext = /*#__PURE__*/React__default.createContext(null);
+EmbeddedCheckoutContext.displayName = 'EmbeddedCheckoutProviderContext';
+
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#usestripe-hook
+ */
+
+var useStripe = function useStripe() {
+  var _useElementsOrCheckou = useElementsOrCheckoutSdkContextWithUseCase('calls useStripe()'),
+      stripe = _useElementsOrCheckou.stripe;
+
+  return stripe;
+};
+
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('auBankAccount', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+var CardElement = createElementComponent('card', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('cardNumber', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('cardExpiry', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('cardCvc', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('fpxBank', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('iban', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('idealBank', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('p24Bank', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('epsBank', isServer);
+createElementComponent('payment', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('expressCheckout', isServer);
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ */
+
+createElementComponent('currencySelector', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('paymentRequestButton', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('linkAuthentication', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('address', isServer);
+/**
+ * @deprecated
+ * Use `AddressElement` instead.
+ *
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('shippingAddress', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('paymentMethodMessaging', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('affirmMessage', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
+createElementComponent('afterpayClearpayMessage', isServer);
+
+// In order for the stripe card element to operate and show the hybrid fields, stripe must be loaded and
+// initialized with a key.  In a runtime form, it is crucial to use the real key.  However. in
+// the dashboard any key will do since the field is not operational nor would we want it to be.
+var stripeKey = 'any-key-does-not-matter-what';
+// Limit stripe css props to only those that are supported in order to avoid easy to miss warnings
+var supportedStripeCssProps = [
+    'backgroundColor',
+    'color',
+    'fontFamily',
+    'fontSize',
+    'fontSmoothing',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'iconColor',
+    'lineHeight',
+    'letterSpacing',
+    'textAlign',
+    'padding',
+    'textDecoration',
+    'textShadow',
+    'textTransform'
+];
+// There are problems loading custom fonts into the Stripe element.
+// Also, certain fonts (Open Sans) get cutoff.  So, punting on it
+// completely and just using generic sans-serif all the time.
+var toSansSerif = function (styles) { return (__assign(__assign({}, styles), { fontFamily: 'sans-serif' })); };
+var CardField = function (_a) {
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.elementProps, elementProps = _b === void 0 ? {} : _b, _c = _a.setCardElement, setCardElement = _c === void 0 ? function () { } : _c, _d = _a.setFieldError, setFieldError = _d === void 0 ? function () { } : _d, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, editMode = _a.editMode, inlineError = _a.inlineError, children = _a.children;
+    var _g = __read(useState(false), 2), focused = _g[0], setFocused = _g[1];
+    var _h = useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _h.borderStyles, customBorder = _h.customBorder;
+    var containerRef = useRef(null);
+    var stripe = useStripe();
+    var stripeElements = useElements();
+    var _j = __read(useState(''), 2), lastError = _j[0], setLastError = _j[1];
+    useEffect(function () {
+        if (!stripe || !stripeElements) {
+            // Stripe.js has not yet loaded.
+            return;
+        }
+        var cardEl = stripeElements.getElement(CardElement);
+        if (autoFocus) {
+            cardEl === null || cardEl === void 0 ? void 0 : cardEl.on('ready', function () { return cardEl.focus(); });
+        }
+        setCardElement(element.servar.key, cardEl);
+    }, [stripe, element.servar.key, stripeElements]);
+    // In general, mobile styles are supported for the payment method field.  However, we do this using
+    // media queries.  The Stripe card element does not support this so the mobile styles that are set
+    // in media queries directly below are ignored.  This means that mobile styles like color and the various font styles
+    // do not work (mobile settings will not be applied).  However, other mobile styles for things like
+    // background color and borders are set in the parent of the card element and DO WORK.
+    var cardElementOptions = {
+        style: {
+            base: __assign(__assign({ textDecoration: 'none' }, filterKeys(toSansSerif(responsiveStyles.getTarget('field')), supportedStripeCssProps)), { '::placeholder': __assign({ textDecoration: 'none' }, filterKeys(toSansSerif(responsiveStyles.getTarget('placeholder')), supportedStripeCssProps)), ':hover': filterKeys(toSansSerif(responsiveStyles.getTarget('hoverFont')), supportedStripeCssProps), ':focus': filterKeys(toSansSerif(responsiveStyles.getTarget('activeFont')), supportedStripeCssProps) }),
+            complete: toSansSerif(responsiveStyles.getTarget('completedFont')),
+            invalid: {
+                color: ERROR_COLOR,
+                iconColor: ERROR_COLOR
+            }
+        },
+        classes: {
+            base: element.servar.key
+        }
+    };
+    var handleCardChange = function (event) {
+        var _a, _b;
+        // Listen for changes in the CardElement
+        // and display any errors as the customer types their card details.
+        // Only set the field error if there is a change (Stripe card element is a bit chatty)
+        var error = (_b = (_a = event.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : '';
+        if (lastError !== error) {
+            setLastError(error);
+            setFieldError(error);
+        }
+        // also set the field data with complete=true so we know
+        // when a card number has been entered and is complete
+        onChange(event.complete
+            ? { complete: true, card_data: { brand: event.brand } }
+            : '');
+    };
+    return (jsxs("div", __assign({ ref: containerRef, css: __assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __assign(__assign({ position: 'relative', width: '100%', whiteSpace: 'nowrap', padding: '0 2px', display: 'flex', alignItems: 'center' }, responsiveStyles.getTarget('sub-fc')), { '&:hover': __assign(__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover), '&&': focused
+                        ? __assign(__assign({}, responsiveStyles.getTarget('active')), borderStyles.active) : {} }) }, { children: [customBorder, jsxs("div", __assign({ css: { width: '100%', position: 'relative' } }, { children: [jsx("input", { id: element.servar.key, name: element.servar.key, css: {
+                                    width: '100%',
+                                    height: 0,
+                                    border: 'none',
+                                    opacity: 0,
+                                    '&:focus': {
+                                        outline: 'none'
+                                    }
+                                }, 
+                                // @ts-expect-error TS(2322): Type 'string' is not assignable to type 'number'.
+                                tabIndex: '-1' }), jsx(CardElement, { css: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 5,
+                                    right: 5,
+                                    width: '100%'
+                                }, options: cardElementOptions, onChange: handleCardChange, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } })] })), jsx(InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+};
+function PaymentMethodField(_a) {
+    var editMode = _a.editMode, children = _a.children, props = __rest(_a, ["editMode", "children"]);
+    var stripePromise = getStripe();
+    useEffect(function () {
+        // if editable, i.e. running in dashboard, then just load stripe with key so cardElement shows
+        if (editMode)
+            featheryDoc().dispatchEvent(new CustomEvent('stripe_key_loaded', {
+                detail: { key: stripeKey }
+            }));
+    }, [editMode]);
+    return (
+    // @ts-expect-error TS(2322): Type 'Promise<unknown>' is not assignable to type ... Remove this comment to see the full error message
+    jsxs(Elements, __assign({ stripe: stripePromise }, { children: [children, jsx(CardField, __assign({ editMode: editMode }, props))] })));
+}
+var PaymentMethodField_default = memo(PaymentMethodField);
+
+export { PaymentMethodField_default as default };