paymob-widget-alpha 1.0.0 → 1.0.2

package/main.js

@@ -600,21 +600,38 @@ var react_dom = __webpack_require__(144);
 const environment = {
   production: false,
   API_URL_EG: 'https://accept-alpha.paymob.com',
-  API_URL_AE: 'https://international-staging.paymob.com',
-  API_URL_SA: 'https://international-staging.paymob.com',
-  API_URL_PK: 'https://international-staging.paymob.com',
-  API_URL_OM: 'https://international-staging.paymob.com',
+  API_URL_AE: 'https://paymob-widget-alpha',
+  API_URL_SA: 'https://paymob-widget-alpha',
+  API_URL_PK: 'https://paymob-widget-alpha',
+  API_URL_OM: 'https://paymob-widget-alpha',
   API_URL_DEFAULT: 'https://accept-alpha.paymob.com',
   IFRAME_PATH: 'unifiedcheckout/iframe-card',
-  PIXEL_CSS_LINKS: ['https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css', 'https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css', 'https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/Inter.woff2', 'https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/Inter.woff', 'https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/Inter.ttf', 'https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/Inter.otf']
+  PIXEL_CSS_LINKS: ['https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/styles.css', 'https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/main.css', 'https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/Inter.woff2', 'https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/Inter.woff', 'https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/Inter.ttf', 'https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/Inter.otf']
 };
 // EXTERNAL MODULE: ../../node_modules/react/jsx-runtime.js
 var jsx_runtime = __webpack_require__(85);
+;// ./src/utils/PortalRootContext.tsx
+
+
+const PortalRootContext = /*#__PURE__*/(0,react.createContext)(null);
+function PortalRootProvider({
+  value,
+  children
+}) {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(PortalRootContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function usePortalRoot() {
+  return (0,react.useContext)(PortalRootContext);
+}
 ;// ./src/utils/ShadowWrapper.tsx
 
 
 
 
+
 const ShadowWrapper = ({
   elementId,
   children
@@ -624,17 +641,47 @@ const ShadowWrapper = ({
   (0,react.useEffect)(() => {
     if (!document.getElementById(elementId)) return;
     document.getElementById(elementId).innerHTML = '';
-    const container = document.getElementById(elementId).appendChild(document.createElement('div'));
+    const mountRoot = document.getElementById(elementId);
+
+    // Create a dedicated Shadow DOM host for the main app.
+    const shadowHost = mountRoot.appendChild(document.createElement('div'));
     if (!('attachShadow' in Element.prototype)) {
       setError('Shadow DOM is not supported in this browser');
       return;
     }
     try {
-      let shadow = container.shadowRoot;
+      let shadow = shadowHost.shadowRoot;
       if (!shadow) {
-        shadow = container.attachShadow({
+        shadow = shadowHost.attachShadow({
           mode: 'open'
         });
+        const appendedHrefs = new Set();
+        const appendStylesheetLink = href => {
+          if (!href) return;
+          if (appendedHrefs.has(href)) return;
+          if (shadow.querySelector(`link[rel="stylesheet"][href="${href}"]`)) return;
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = href;
+          shadow.appendChild(link);
+          appendedHrefs.add(href);
+        };
+
+        // If the widget script is loaded from a URL (CDN/dev server),
+        // also load sibling CSS assets from the same base so Shadow DOM always
+        // receives the correct CSS bundle (including CSS Modules).
+        const resolveBaseFromScript = () => {
+          // Best-effort script tag detection (covers CDN embeds + local dev).
+          const scripts = Array.from(document.querySelectorAll('script[src]'));
+          const candidates = scripts.map(s => String(s.src || '')).filter(Boolean).filter(src => /\/main\.js(\?.*)?$/.test(src));
+          const best = candidates.find(src => src.includes('paymob-widget')) || candidates.find(src => src.includes('paymob_widget')) || candidates[candidates.length - 1];
+          return best ? best.replace(/\/[^/]*$/, '') : null;
+        };
+        const base = resolveBaseFromScript();
+        if (base) {
+          appendStylesheetLink(`${base}/styles.css`);
+          appendStylesheetLink(`${base}/main.css`);
+        }
         environment.PIXEL_CSS_LINKS.forEach(href => {
           if (href.match(/\.(woff2?|ttf|otf|eot)$/)) {
             const fontName = 'currencyFont';
@@ -654,11 +701,7 @@ const ShadowWrapper = ({
               (_shadow = shadow) == null || _shadow.appendChild(style);
             }).catch(err => console.error(`Failed to load font: ${href}`, err));
           } else {
-            var _shadow2;
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = href;
-            (_shadow2 = shadow) == null || _shadow2.appendChild(link);
+            appendStylesheetLink(href);
           }
         });
       }
@@ -682,7 +725,10 @@ const ShadowWrapper = ({
     }), container);
   }
   if (shadowRoot) {
-    return /*#__PURE__*/(0,react_dom.createPortal)(children, shadowRoot);
+    return /*#__PURE__*/(0,react_dom.createPortal)(/*#__PURE__*/(0,jsx_runtime.jsx)(PortalRootProvider, {
+      value: shadowRoot,
+      children: children
+    }), shadowRoot);
   }
   return null;
 };
@@ -710,30 +756,30 @@ function bind(fn, thisArg) {
 
 // utils is a library of generic helper functions non-specific to axios
 
-const {toString: utils_toString} = Object.prototype;
-const {getPrototypeOf} = Object;
-const {iterator, toStringTag} = Symbol;
+const { toString: utils_toString } = Object.prototype;
+const { getPrototypeOf } = Object;
+const { iterator, toStringTag } = Symbol;
 
-const kindOf = (cache => thing => {
-    const str = utils_toString.call(thing);
-    return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase());
+const kindOf = ((cache) => (thing) => {
+  const str = utils_toString.call(thing);
+  return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase());
 })(Object.create(null));
 
 const kindOfTest = (type) => {
   type = type.toLowerCase();
-  return (thing) => kindOf(thing) === type
-}
+  return (thing) => kindOf(thing) === type;
+};
 
-const typeOfTest = type => thing => typeof thing === type;
+const typeOfTest = (type) => (thing) => typeof thing === type;
 
 /**
- * Determine if a value is an Array
+ * Determine if a value is a non-null object
  *
  * @param {Object} val The value to test
  *
  * @returns {boolean} True if value is an Array, otherwise false
  */
-const {isArray} = Array;
+const { isArray } = Array;
 
 /**
  * Determine if a value is undefined
@@ -742,7 +788,7 @@ const {isArray} = Array;
  *
  * @returns {boolean} True if the value is undefined, otherwise false
  */
-const isUndefined = typeOfTest('undefined');
+const isUndefined = typeOfTest("undefined");
 
 /**
  * Determine if a value is a Buffer
@@ -752,8 +798,14 @@ const isUndefined = typeOfTest('undefined');
  * @returns {boolean} True if value is a Buffer, otherwise false
  */
 function isBuffer(val) {
-  return val !== null && !isUndefined(val) && val.constructor !== null && !isUndefined(val.constructor)
-    && isFunction(val.constructor.isBuffer) && val.constructor.isBuffer(val);
+  return (
+    val !== null &&
+    !isUndefined(val) &&
+    val.constructor !== null &&
+    !isUndefined(val.constructor) &&
+    isFunction(val.constructor.isBuffer) &&
+    val.constructor.isBuffer(val)
+  );
 }
 
 /**
@@ -763,8 +815,7 @@ function isBuffer(val) {
  *
  * @returns {boolean} True if value is an ArrayBuffer, otherwise false
  */
-const isArrayBuffer = kindOfTest('ArrayBuffer');
-
+const isArrayBuffer = kindOfTest("ArrayBuffer");
 
 /**
  * Determine if a value is a view on an ArrayBuffer
@@ -775,10 +826,10 @@ const isArrayBuffer = kindOfTest('ArrayBuffer');
  */
 function isArrayBufferView(val) {
   let result;
-  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
+  if (typeof ArrayBuffer !== "undefined" && ArrayBuffer.isView) {
     result = ArrayBuffer.isView(val);
   } else {
-    result = (val) && (val.buffer) && (isArrayBuffer(val.buffer));
+    result = val && val.buffer && isArrayBuffer(val.buffer);
   }
   return result;
 }
@@ -790,7 +841,7 @@ function isArrayBufferView(val) {
  *
  * @returns {boolean} True if value is a String, otherwise false
  */
-const isString = typeOfTest('string');
+const isString = typeOfTest("string");
 
 /**
  * Determine if a value is a Function
@@ -798,7 +849,7 @@ const isString = typeOfTest('string');
  * @param {*} val The value to test
  * @returns {boolean} True if value is a Function, otherwise false
  */
-const isFunction = typeOfTest('function');
+const isFunction = typeOfTest("function");
 
 /**
  * Determine if a value is a Number
@@ -807,7 +858,7 @@ const isFunction = typeOfTest('function');
  *
  * @returns {boolean} True if value is a Number, otherwise false
  */
-const isNumber = typeOfTest('number');
+const isNumber = typeOfTest("number");
 
 /**
  * Determine if a value is an Object
@@ -816,7 +867,7 @@ const isNumber = typeOfTest('number');
  *
  * @returns {boolean} True if value is an Object, otherwise false
  */
-const isObject = (thing) => thing !== null && typeof thing === 'object';
+const isObject = (thing) => thing !== null && typeof thing === "object";
 
 /**
  * Determine if a value is a Boolean
@@ -824,7 +875,7 @@ const isObject = (thing) => thing !== null && typeof thing === 'object';
  * @param {*} thing The value to test
  * @returns {boolean} True if value is a Boolean, otherwise false
  */
-const isBoolean = thing => thing === true || thing === false;
+const isBoolean = (thing) => thing === true || thing === false;
 
 /**
  * Determine if a value is a plain Object
@@ -834,13 +885,19 @@ const isBoolean = thing => thing === true || thing === false;
  * @returns {boolean} True if value is a plain Object, otherwise false
  */
 const isPlainObject = (val) => {
-  if (kindOf(val) !== 'object') {
+  if (kindOf(val) !== "object") {
     return false;
   }
 
   const prototype = getPrototypeOf(val);
-  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(toStringTag in val) && !(iterator in val);
-}
+  return (
+    (prototype === null ||
+      prototype === Object.prototype ||
+      Object.getPrototypeOf(prototype) === null) &&
+    !(toStringTag in val) &&
+    !(iterator in val)
+  );
+};
 
 /**
  * Determine if a value is an empty object (safely handles Buffers)
@@ -856,12 +913,15 @@ const isEmptyObject = (val) => {
   }
 
   try {
-    return Object.keys(val).length === 0 && Object.getPrototypeOf(val) === Object.prototype;
+    return (
+      Object.keys(val).length === 0 &&
+      Object.getPrototypeOf(val) === Object.prototype
+    );
   } catch (e) {
     // Fallback for any other objects that might cause RangeError with Object.keys()
     return false;
   }
-}
+};
 
 /**
  * Determine if a value is a Date
@@ -870,7 +930,7 @@ const isEmptyObject = (val) => {
  *
  * @returns {boolean} True if value is a Date, otherwise false
  */
-const isDate = kindOfTest('Date');
+const isDate = kindOfTest("Date");
 
 /**
  * Determine if a value is a File
@@ -879,7 +939,7 @@ const isDate = kindOfTest('Date');
  *
  * @returns {boolean} True if value is a File, otherwise false
  */
-const isFile = kindOfTest('File');
+const isFile = kindOfTest("File");
 
 /**
  * Determine if a value is a Blob
@@ -888,7 +948,7 @@ const isFile = kindOfTest('File');
  *
  * @returns {boolean} True if value is a Blob, otherwise false
  */
-const isBlob = kindOfTest('Blob');
+const isBlob = kindOfTest("Blob");
 
 /**
  * Determine if a value is a FileList
@@ -897,7 +957,7 @@ const isBlob = kindOfTest('Blob');
  *
  * @returns {boolean} True if value is a File, otherwise false
  */
-const isFileList = kindOfTest('FileList');
+const isFileList = kindOfTest("FileList");
 
 /**
  * Determine if a value is a Stream
@@ -917,16 +977,17 @@ const isStream = (val) => isObject(val) && isFunction(val.pipe);
  */
 const isFormData = (thing) => {
   let kind;
-  return thing && (
-    (typeof FormData === 'function' && thing instanceof FormData) || (
-      isFunction(thing.append) && (
-        (kind = kindOf(thing)) === 'formdata' ||
-        // detect form-data instance
-        (kind === 'object' && isFunction(thing.toString) && thing.toString() === '[object FormData]')
-      )
-    )
-  )
-}
+  return (
+    thing &&
+    ((typeof FormData === "function" && thing instanceof FormData) ||
+      (isFunction(thing.append) &&
+        ((kind = kindOf(thing)) === "formdata" ||
+          // detect form-data instance
+          (kind === "object" &&
+            isFunction(thing.toString) &&
+            thing.toString() === "[object FormData]"))))
+  );
+};
 
 /**
  * Determine if a value is a URLSearchParams object
@@ -935,9 +996,14 @@ const isFormData = (thing) => {
  *
  * @returns {boolean} True if value is a URLSearchParams object, otherwise false
  */
-const isURLSearchParams = kindOfTest('URLSearchParams');
+const isURLSearchParams = kindOfTest("URLSearchParams");
 
-const [isReadableStream, isRequest, isResponse, isHeaders] = ['ReadableStream', 'Request', 'Response', 'Headers'].map(kindOfTest);
+const [isReadableStream, isRequest, isResponse, isHeaders] = [
+  "ReadableStream",
+  "Request",
+  "Response",
+  "Headers",
+].map(kindOfTest);
 
 /**
  * Trim excess whitespace off the beginning and end of a string
@@ -946,8 +1012,8 @@ const [isReadableStream, isRequest, isResponse, isHeaders] = ['ReadableStream',
  *
  * @returns {String} The String freed of excess whitespace
  */
-const trim = (str) => str.trim ?
-  str.trim() : str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+const trim = (str) =>
+  str.trim ? str.trim() : str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
 
 /**
  * Iterate over an Array or an Object invoking a function for each item.
@@ -965,9 +1031,9 @@ const trim = (str) => str.trim ?
  * @param {Boolean} [options.allOwnKeys = false]
  * @returns {any}
  */
-function forEach(obj, fn, {allOwnKeys = false} = {}) {
+function forEach(obj, fn, { allOwnKeys = false } = {}) {
   // Don't bother if no value provided
-  if (obj === null || typeof obj === 'undefined') {
+  if (obj === null || typeof obj === "undefined") {
     return;
   }
 
@@ -975,7 +1041,7 @@ function forEach(obj, fn, {allOwnKeys = false} = {}) {
   let l;
 
   // Force an array if not already something iterable
-  if (typeof obj !== 'object') {
+  if (typeof obj !== "object") {
     /*eslint no-param-reassign:0*/
     obj = [obj];
   }
@@ -992,7 +1058,9 @@ function forEach(obj, fn, {allOwnKeys = false} = {}) {
     }
 
     // Iterate over object keys
-    const keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
+    const keys = allOwnKeys
+      ? Object.getOwnPropertyNames(obj)
+      : Object.keys(obj);
     const len = keys.length;
     let key;
 
@@ -1004,7 +1072,7 @@ function forEach(obj, fn, {allOwnKeys = false} = {}) {
 }
 
 function findKey(obj, key) {
-  if (isBuffer(obj)){
+  if (isBuffer(obj)) {
     return null;
   }
 
@@ -1024,10 +1092,15 @@ function findKey(obj, key) {
 const _global = (() => {
   /*eslint no-undef:0*/
   if (typeof globalThis !== "undefined") return globalThis;
-  return typeof self !== "undefined" ? self : (typeof window !== 'undefined' ? window : __webpack_require__.g)
+  return typeof self !== "undefined"
+    ? self
+    : typeof window !== "undefined"
+      ? window
+      : __webpack_require__.g;
 })();
 
-const isContextDefined = (context) => !isUndefined(context) && context !== _global;
+const isContextDefined = (context) =>
+  !isUndefined(context) && context !== _global;
 
 /**
  * Accepts varargs expecting each argument to be an object, then
@@ -1048,10 +1121,15 @@ const isContextDefined = (context) => !isUndefined(context) && context !== _glob
  * @returns {Object} Result of all merge properties
  */
 function merge(/* obj1, obj2, obj3, ... */) {
-  const {caseless, skipUndefined} = isContextDefined(this) && this || {};
+  const { caseless, skipUndefined } = (isContextDefined(this) && this) || {};
   const result = {};
   const assignValue = (val, key) => {
-    const targetKey = caseless && findKey(result, key) || key;
+    // Skip dangerous property names to prevent prototype pollution
+    if (key === "__proto__" || key === "constructor" || key === "prototype") {
+      return;
+    }
+
+    const targetKey = (caseless && findKey(result, key)) || key;
     if (isPlainObject(result[targetKey]) && isPlainObject(val)) {
       result[targetKey] = merge(result[targetKey], val);
     } else if (isPlainObject(val)) {
@@ -1061,7 +1139,7 @@ function merge(/* obj1, obj2, obj3, ... */) {
     } else if (!skipUndefined || !isUndefined(val)) {
       result[targetKey] = val;
     }
-  }
+  };
 
   for (let i = 0, l = arguments.length; i < l; i++) {
     arguments[i] && forEach(arguments[i], assignValue);
@@ -1080,26 +1158,30 @@ function merge(/* obj1, obj2, obj3, ... */) {
  * @param {Boolean} [options.allOwnKeys]
  * @returns {Object} The resulting value of object a
  */
-const extend = (a, b, thisArg, {allOwnKeys}= {}) => {
-  forEach(b, (val, key) => {
-    if (thisArg && isFunction(val)) {
-      Object.defineProperty(a, key, {
-        value: bind(val, thisArg),
-        writable: true,
-        enumerable: true,
-        configurable: true
-      });
-    } else {
-      Object.defineProperty(a, key, {
-        value: val,
-        writable: true,
-        enumerable: true,
-        configurable: true
-      });
-    }
-  }, {allOwnKeys});
+const extend = (a, b, thisArg, { allOwnKeys } = {}) => {
+  forEach(
+    b,
+    (val, key) => {
+      if (thisArg && isFunction(val)) {
+        Object.defineProperty(a, key, {
+          value: bind(val, thisArg),
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        });
+      } else {
+        Object.defineProperty(a, key, {
+          value: val,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        });
+      }
+    },
+    { allOwnKeys },
+  );
   return a;
-}
+};
 
 /**
  * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)
@@ -1109,11 +1191,11 @@ const extend = (a, b, thisArg, {allOwnKeys}= {}) => {
  * @returns {string} content value without BOM
  */
 const stripBOM = (content) => {
-  if (content.charCodeAt(0) === 0xFEFF) {
+  if (content.charCodeAt(0) === 0xfeff) {
     content = content.slice(1);
   }
   return content;
-}
+};
 
 /**
  * Inherit the prototype methods from one constructor into another
@@ -1125,18 +1207,21 @@ const stripBOM = (content) => {
  * @returns {void}
  */
 const inherits = (constructor, superConstructor, props, descriptors) => {
-  constructor.prototype = Object.create(superConstructor.prototype, descriptors);
-  Object.defineProperty(constructor.prototype, 'constructor', {
+  constructor.prototype = Object.create(
+    superConstructor.prototype,
+    descriptors,
+  );
+  Object.defineProperty(constructor.prototype, "constructor", {
     value: constructor,
     writable: true,
     enumerable: false,
-    configurable: true
+    configurable: true,
   });
-  Object.defineProperty(constructor, 'super', {
-    value: superConstructor.prototype
+  Object.defineProperty(constructor, "super", {
+    value: superConstructor.prototype,
   });
   props && Object.assign(constructor.prototype, props);
-}
+};
 
 /**
  * Resolve object with deep prototype chain to a flat object
@@ -1162,16 +1247,23 @@ const toFlatObject = (sourceObj, destObj, filter, propFilter) => {
     i = props.length;
     while (i-- > 0) {
       prop = props[i];
-      if ((!propFilter || propFilter(prop, sourceObj, destObj)) && !merged[prop]) {
+      if (
+        (!propFilter || propFilter(prop, sourceObj, destObj)) &&
+        !merged[prop]
+      ) {
         destObj[prop] = sourceObj[prop];
         merged[prop] = true;
       }
     }
     sourceObj = filter !== false && getPrototypeOf(sourceObj);
-  } while (sourceObj && (!filter || filter(sourceObj, destObj)) && sourceObj !== Object.prototype);
+  } while (
+    sourceObj &&
+    (!filter || filter(sourceObj, destObj)) &&
+    sourceObj !== Object.prototype
+  );
 
   return destObj;
-}
+};
 
 /**
  * Determines whether a string ends with the characters of a specified string
@@ -1190,8 +1282,7 @@ const endsWith = (str, searchString, position) => {
   position -= searchString.length;
   const lastIndex = str.indexOf(searchString, position);
   return lastIndex !== -1 && lastIndex === position;
-}
-
+};
 
 /**
  * Returns new array from array like object or null if failed
@@ -1210,7 +1301,7 @@ const toArray = (thing) => {
     arr[i] = thing[i];
   }
   return arr;
-}
+};
 
 /**
  * Checking if the Uint8Array exists and if it does, it returns a function that checks if the
@@ -1221,12 +1312,12 @@ const toArray = (thing) => {
  * @returns {Array}
  */
 // eslint-disable-next-line func-names
-const isTypedArray = (TypedArray => {
+const isTypedArray = ((TypedArray) => {
   // eslint-disable-next-line func-names
-  return thing => {
+  return (thing) => {
     return TypedArray && thing instanceof TypedArray;
   };
-})(typeof Uint8Array !== 'undefined' && getPrototypeOf(Uint8Array));
+})(typeof Uint8Array !== "undefined" && getPrototypeOf(Uint8Array));
 
 /**
  * For each entry in the object, call the function with the key and value.
@@ -1247,7 +1338,7 @@ const forEachEntry = (obj, fn) => {
     const pair = result.value;
     fn.call(obj, pair[0], pair[1]);
   }
-}
+};
 
 /**
  * It takes a regular expression and a string, and returns an array of all the matches
@@ -1266,21 +1357,25 @@ const matchAll = (regExp, str) => {
   }
 
   return arr;
-}
+};
 
 /* Checking if the kindOfTest function returns true when passed an HTMLFormElement. */
-const isHTMLForm = kindOfTest('HTMLFormElement');
+const isHTMLForm = kindOfTest("HTMLFormElement");
 
-const toCamelCase = str => {
-  return str.toLowerCase().replace(/[-_\s]([a-z\d])(\w*)/g,
-    function replacer(m, p1, p2) {
+const toCamelCase = (str) => {
+  return str
+    .toLowerCase()
+    .replace(/[-_\s]([a-z\d])(\w*)/g, function replacer(m, p1, p2) {
       return p1.toUpperCase() + p2;
-    }
-  );
+    });
 };
 
 /* Creating a function that will check if an object has a property. */
-const utils_hasOwnProperty = (({hasOwnProperty}) => (obj, prop) => hasOwnProperty.call(obj, prop))(Object.prototype);
+const utils_hasOwnProperty = (
+  ({ hasOwnProperty }) =>
+  (obj, prop) =>
+    hasOwnProperty.call(obj, prop)
+)(Object.prototype);
 
 /**
  * Determine if a value is a RegExp object
@@ -1289,7 +1384,7 @@ const utils_hasOwnProperty = (({hasOwnProperty}) => (obj, prop) => hasOwnPropert
  *
  * @returns {boolean} True if value is a RegExp object, otherwise false
  */
-const isRegExp = kindOfTest('RegExp');
+const isRegExp = kindOfTest("RegExp");
 
 const reduceDescriptors = (obj, reducer) => {
   const descriptors = Object.getOwnPropertyDescriptors(obj);
@@ -1303,7 +1398,7 @@ const reduceDescriptors = (obj, reducer) => {
   });
 
   Object.defineProperties(obj, reducedDescriptors);
-}
+};
 
 /**
  * Makes all methods read-only
@@ -1313,7 +1408,10 @@ const reduceDescriptors = (obj, reducer) => {
 const freezeMethods = (obj) => {
   reduceDescriptors(obj, (descriptor, name) => {
     // skip restricted props in strict mode
-    if (isFunction(obj) && ['arguments', 'caller', 'callee'].indexOf(name) !== -1) {
+    if (
+      isFunction(obj) &&
+      ["arguments", "caller", "callee"].indexOf(name) !== -1
+    ) {
       return false;
     }
 
@@ -1323,40 +1421,42 @@ const freezeMethods = (obj) => {
 
     descriptor.enumerable = false;
 
-    if ('writable' in descriptor) {
+    if ("writable" in descriptor) {
       descriptor.writable = false;
       return;
     }
 
     if (!descriptor.set) {
       descriptor.set = () => {
-        throw Error('Can not rewrite read-only method \'' + name + '\'');
+        throw Error("Can not rewrite read-only method '" + name + "'");
       };
     }
   });
-}
+};
 
 const toObjectSet = (arrayOrString, delimiter) => {
   const obj = {};
 
   const define = (arr) => {
-    arr.forEach(value => {
+    arr.forEach((value) => {
       obj[value] = true;
     });
-  }
+  };
 
-  isArray(arrayOrString) ? define(arrayOrString) : define(String(arrayOrString).split(delimiter));
+  isArray(arrayOrString)
+    ? define(arrayOrString)
+    : define(String(arrayOrString).split(delimiter));
 
   return obj;
-}
+};
 
-const noop = () => {}
+const noop = () => {};
 
 const toFiniteNumber = (value, defaultValue) => {
-  return value != null && Number.isFinite(value = +value) ? value : defaultValue;
-}
-
-
+  return value != null && Number.isFinite((value = +value))
+    ? value
+    : defaultValue;
+};
 
 /**
  * If the thing is a FormData object, return true, otherwise return false.
@@ -1366,14 +1466,18 @@ const toFiniteNumber = (value, defaultValue) => {
  * @returns {boolean}
  */
 function isSpecCompliantForm(thing) {
-  return !!(thing && isFunction(thing.append) && thing[toStringTag] === 'FormData' && thing[iterator]);
+  return !!(
+    thing &&
+    isFunction(thing.append) &&
+    thing[toStringTag] === "FormData" &&
+    thing[iterator]
+  );
 }
 
 const toJSONObject = (obj) => {
   const stack = new Array(10);
 
   const visit = (source, i) => {
-
     if (isObject(source)) {
       if (stack.indexOf(source) >= 0) {
         return;
@@ -1384,7 +1488,7 @@ const toJSONObject = (obj) => {
         return source;
       }
 
-      if(!('toJSON' in source)) {
+      if (!("toJSON" in source)) {
         stack[i] = source;
         const target = isArray(source) ? [] : {};
 
@@ -1400,15 +1504,18 @@ const toJSONObject = (obj) => {
     }
 
     return source;
-  }
+  };
 
   return visit(obj, 0);
-}
+};
 
-const isAsyncFn = kindOfTest('AsyncFunction');
+const isAsyncFn = kindOfTest("AsyncFunction");
 
 const isThenable = (thing) =>
-  thing && (isObject(thing) || isFunction(thing)) && isFunction(thing.then) && isFunction(thing.catch);
+  thing &&
+  (isObject(thing) || isFunction(thing)) &&
+  isFunction(thing.then) &&
+  isFunction(thing.catch);
 
 // original code
 // https://github.com/DigitalBrainJS/AxiosPromise/blob/16deab13710ec09779922131f3fa5954320f83ab/lib/utils.js#L11-L34
@@ -1418,32 +1525,35 @@ const _setImmediate = ((setImmediateSupported, postMessageSupported) => {
     return setImmediate;
   }
 
-  return postMessageSupported ? ((token, callbacks) => {
-    _global.addEventListener("message", ({source, data}) => {
-      if (source === _global && data === token) {
-        callbacks.length && callbacks.shift()();
-      }
-    }, false);
+  return postMessageSupported
+    ? ((token, callbacks) => {
+        _global.addEventListener(
+          "message",
+          ({ source, data }) => {
+            if (source === _global && data === token) {
+              callbacks.length && callbacks.shift()();
+            }
+          },
+          false,
+        );
 
-    return (cb) => {
-      callbacks.push(cb);
-      _global.postMessage(token, "*");
-    }
-  })(`axios@${Math.random()}`, []) : (cb) => setTimeout(cb);
-})(
-  typeof setImmediate === 'function',
-  isFunction(_global.postMessage)
-);
+        return (cb) => {
+          callbacks.push(cb);
+          _global.postMessage(token, "*");
+        };
+      })(`axios@${Math.random()}`, [])
+    : (cb) => setTimeout(cb);
+})(typeof setImmediate === "function", isFunction(_global.postMessage));
 
-const asap = typeof queueMicrotask !== 'undefined' ?
-  queueMicrotask.bind(_global) : ( typeof process !== 'undefined' && process.nextTick || _setImmediate);
+const asap =
+  typeof queueMicrotask !== "undefined"
+    ? queueMicrotask.bind(_global)
+    : (typeof process !== "undefined" && process.nextTick) || _setImmediate;
 
 // *********************
 
-
 const isIterable = (thing) => thing != null && isFunction(thing[iterator]);
 
-
 /* harmony default export */ const utils = ({
   isArray,
   isArrayBuffer,
@@ -1501,7 +1611,7 @@ const isIterable = (thing) => thing != null && isFunction(thing[iterator]);
   isThenable,
   setImmediate: _setImmediate,
   asap,
-  isIterable
+  isIterable,
 });
 
 ;// ../../node_modules/axios/lib/core/AxiosError.js
@@ -2014,7 +2124,8 @@ class InterceptorManager {
 /* harmony default export */ const defaults_transitional = ({
   silentJSONParsing: true,
   forcedJSONParsing: true,
-  clarifyTimeoutError: false
+  clarifyTimeoutError: false,
+  legacyInterceptorReqResOrdering: true
 });
 
 ;// ../../node_modules/axios/lib/platform/browser/classes/URLSearchParams.js
@@ -3090,9 +3201,14 @@ function isAbsoluteURL(url) {
   // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
   // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
   // by any combination of letters, digits, plus, period, or hyphen.
+  if (typeof url !== 'string') {
+    return false;
+  }
+
   return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url);
 }
 
+
 ;// ../../node_modules/axios/lib/helpers/combineURLs.js
 
 
@@ -3140,7 +3256,8 @@ function buildFullPath(baseURL, requestedURL, allowAbsoluteUrls) {
 
 
 
-const headersToObject = (thing) => thing instanceof core_AxiosHeaders ? { ...thing } : thing;
+const headersToObject = (thing) =>
+  thing instanceof core_AxiosHeaders ? { ...thing } : thing;
 
 /**
  * Config-specific merge-function which creates a new config-object
@@ -3229,14 +3346,27 @@ function mergeConfig(config1, config2) {
     socketPath: defaultToConfig2,
     responseEncoding: defaultToConfig2,
     validateStatus: mergeDirectKeys,
-    headers: (a, b, prop) => mergeDeepProperties(headersToObject(a), headersToObject(b), prop, true)
+    headers: (a, b, prop) =>
+      mergeDeepProperties(headersToObject(a), headersToObject(b), prop, true),
   };
 
-  utils.forEach(Object.keys({ ...config1, ...config2 }), function computeConfigValue(prop) {
-    const merge = mergeMap[prop] || mergeDeepProperties;
-    const configValue = merge(config1[prop], config2[prop], prop);
-    (utils.isUndefined(configValue) && merge !== mergeDirectKeys) || (config[prop] = configValue);
-  });
+  utils.forEach(
+    Object.keys({ ...config1, ...config2 }),
+    function computeConfigValue(prop) {
+      if (
+        prop === "__proto__" ||
+        prop === "constructor" ||
+        prop === "prototype"
+      )
+        return;
+      const merge = utils.hasOwnProp(mergeMap, prop)
+        ? mergeMap[prop]
+        : mergeDeepProperties;
+      const configValue = merge(config1[prop], config2[prop], prop);
+      (utils.isUndefined(configValue) && merge !== mergeDirectKeys) ||
+        (config[prop] = configValue);
+    },
+  );
 
   return config;
 }
@@ -3895,14 +4025,14 @@ const factory = (env) => {
 
       if (err && err.name === 'TypeError' && /Load failed|fetch/i.test(err.message)) {
         throw Object.assign(
-          new core_AxiosError('Network Error', core_AxiosError.ERR_NETWORK, config, request),
+          new core_AxiosError('Network Error', core_AxiosError.ERR_NETWORK, config, request, err && err.response),
           {
             cause: err.cause || err
           }
         )
       }
 
-      throw core_AxiosError.from(err, err && err.code, config, request);
+      throw core_AxiosError.from(err, err && err.code, config, request, err && err.response);
     }
   }
 }
@@ -4147,7 +4277,7 @@ function dispatchRequest(config) {
 }
 
 ;// ../../node_modules/axios/lib/env/data.js
-const VERSION = "1.13.4";
+const VERSION = "1.13.5";
 ;// ../../node_modules/axios/lib/helpers/validator.js
 
 
@@ -4261,6 +4391,7 @@ function assertOptions(options, schema, allowUnknown) {
 
 
 
+
 const Axios_validators = validator.validators;
 
 /**
@@ -4332,7 +4463,8 @@ class Axios {
       validator.assertOptions(transitional, {
         silentJSONParsing: Axios_validators.transitional(Axios_validators.boolean),
         forcedJSONParsing: Axios_validators.transitional(Axios_validators.boolean),
-        clarifyTimeoutError: Axios_validators.transitional(Axios_validators.boolean)
+        clarifyTimeoutError: Axios_validators.transitional(Axios_validators.boolean),
+        legacyInterceptorReqResOrdering: Axios_validators.transitional(Axios_validators.boolean)
       }, false);
     }
 
@@ -4391,7 +4523,14 @@ class Axios {
 
       synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;
 
-      requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
+      const transitional = config.transitional || defaults_transitional;
+      const legacyInterceptorReqResOrdering = transitional && transitional.legacyInterceptorReqResOrdering;
+
+      if (legacyInterceptorReqResOrdering) {
+        requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
+      } else {
+        requestInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
+      }
     });
 
     const responseInterceptorChain = [];
@@ -4868,6 +5007,9 @@ const card_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQA
 const bag_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASnSURBVHgB7ZvPTxtHFMffGy9NoRfyHxipObSHJkiN1BtGaoLbS9zKSO0pQUoa91Rya0+Yv6BwaYl7wNwqBRLnUtnkgLkHyb3QS1Ccv6BcEkTwzst7i0gIM/6R7CzB3v1cEma9szvfefPmzewbhFMik5sdHRp6nlNaTRDCJQRKA+Do4VXaJcAmEjQ06c0D/UmlXlnYhVMAIWKyPxTS/gHNKqTrbxrcAwRl9HG+WllqQoREJoD0+Dlvb47/OwshIKDi+mppHiIiEgGk18mnDX77NLiAoMnWMBmFNShwzLfTty45bbyAkKYUbVzhusExTi2gt55nh0fwEBEaiBQ4OiIcJWDHiDjR8d4ILMGpAFPTt5+2bYC8POJMdXWp3qmO7HThBo/7uU717PvD465miRQ44mq+MMdq5qwXCRZra3e/ebL9uNmlGuDfNHa2txYvfH5ZOidj/ABh1FMHH/NvauAAJxYQmH6LntofQPPV1VIR3oNsvlAMrMFWbwvHXAwFJ05Qt3TRVh6m8QIPl6JYj+2an6JQ0+sRoS0gx/P9nrf3v3GBxyqb/Rg4wOZb2DJ2X7ZGxsL6gtAW8JzDW1s5EjoLXriuGaOMo8ohZX/2uxBaAH65jFHIvV+9v1QGRxzOHGT0tEI1ASEJLwDgRUtxHRzDccJDowwpdGDkwAnKqu4ESP+CY9hZNSzFaQiJAwHMFZ7W5Hwpq9GsE99lddkGYxb4On8zg5TKKQXXnMbzHxAePg3Za7Atr18L4Gr5evahhf3WyPzR9BkIII3/yNvb4D+cr7bOImIRL1vDkyJC4AOk5+PSeEHaes57EYTY2CmOH3QQ/ElP4ni0RMQcam7yPl65WyVEatlycxmV3gSHaA64+D2vnyxH1DPQ8f14pkD8xebQfXb2njWQ4Uhufa2UgR6Yyt9eNl9Wbz6691cZHMK7QRJ1GgJUe3vOAr/nBpxYXvP4vyY+wBz7SIswYGjUK0Yhb7VZA6EoApmzivNN0X4jEQDCYy5SUtaFS0iGzDrZWUNIXCyH7xxfq8s2GM8AzgV4dO+PBj/r2CaLfE9UdyAkoQWQzQr01DgRfZdCPR5mD7CHZxXlGTL3czw/tr72ZwVC4oEDqn8HK6wmnAL/HFqXMwtLnCDEnEQAiDmJABBzEgEg5iQCQMxJBICYkwgAMScRAGJOIgDEnEQAiDmJALy//swoRTVwyRJKm20ioAYLgMYWs3w2hkFD2dpEz8QC6kY5fzbO5m9mYEC4Mn3rhi1BQulURQ23Rsq2m4hSy9lcIQ19jqQAKVDWlHvQUFeVygJ/YyNr8oD26EE/iyCN1y16YM13JChLzmAwCyhPFW3JyJJNFRxW+p5NqM+QhE85v9Qu+02SJoN/jwqm8j/Psk383rZG/hStJWFZ6Qg+fTuEvX23LNfjBzneSg+7mv+pbMvEGigOzy+9zoZ969DUzvZW5dPPvjzPsnwFAwj3/EptrVQ4XmacGtv5b6va9sRW3xL4t99qq6VfT16xHpt7sv24fuGLyyuk6TwPif6OCoND2OrH2v27VdvlroemZCoBHzJEfg5IpfmOi3CmkdCe2FFjfZ9jnG6Hql4BrhLc6NP7m20AAAAASUVORK5CYII=";
 ;// ./src/assets/icons/close.png
 const close_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgBvdg9T9wwGAfw/2OjinYqW8e2ggFYOkBfprZLeyNSbz+68DJBPgHwCRhBTLCDgO1ggZHhBlh4kUA6Rraw8HqcsQ8FHSIXx8nj/LckdvyT7cSWCTp/y+PzgBqFolBBBdtrSxsoKL9Gpt+/6bqaIiLdPurUoP/VjcU6PaEw3V6YlBitri2swHOeUNc7BHyJ7umOCe8a7z7J3oGh6qsapEb6+r/WT49qB/CUOFSraVB3l7i/ENoYxlVU1Fwu/ZusoEDUM64pQg2Tc51e4ANnQ5l5hiZ25dlhba9vYJhMndiCjMOaBkUP9NtMfmmuTw9ru75xLihzKaP7PnGuqBcwX7gsqFcwblxWVCyMC5cH1RGWF5cXlQjLiuNAWWGuOC5U67VImVJ5YlYvsDOdS6hAgSocKBNrj0Wx9hyopB9+AAPKCZYOx4Nyhpk44TKiMsFMDK63f6hHz9Dv8IAyEcgQ8/Upws/EQoSPkJRcJiHOPWb9JbQnx8LvBHNC5cSlhtlRZotO3WDCpYKl+6OLHyToEkxbJivMZZnh3DJJLlR0iwsnOVGcOMmN4sJJHygOnPSFyouTPlF5cNI3KitOFoHKgqM/5bFlffRT8Y1qj22bftt422POx9ZRIMrE1nMCdyfx52MeUVGqq4uzeqTm4p7pY89QEIkABaOScArYN2fAUnfr/ufBb5tKqVut3NKooAhUlNawDg6f6/YvibCiz1+D+vHezSMpY05esgXS3QAAAABJRU5ErkJggg==";
+;// ./src/components/modal/modal.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const modal_module = ({"root":"modal_root__sfoqg","rootMobile":"modal_rootMobile__wzN8Q","rootDesktop":"modal_rootDesktop__CiQty","overlay":"modal_overlay__D1Rh8","panel":"modal_panel__odrOu","panelMobile":"modal_panelMobile__Pyh+r","slideUp":"modal_slideUp__2GwQS","panelDesktop":"modal_panelDesktop__YwVRJ","slideIn":"modal_slideIn__uUuXp","closeFloatingMobile":"modal_closeFloatingMobile__Z3pkR","closeFloatingDesktop":"modal_closeFloatingDesktop__3W3cX","dialog":"modal_dialog__fapVk","dialogMobile":"modal_dialogMobile__awaMW","dialogDesktop":"modal_dialogDesktop__z8dIY","header":"modal_header__oe722","title":"modal_title__0XpA9","poweredRow":"modal_poweredRow__VXaw8","poweredLabel":"modal_poweredLabel__a3hHx","logo":"modal_logo__jcucM","body":"modal_body__SQUnU","footer":"modal_footer__GKw2U","closeIcon":"modal_closeIcon__RJJ9p"});
 ;// ./src/components/modal/index.tsx
 
 
@@ -4875,6 +5017,25 @@ const close_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACY
 
 
 
+
+
+const MOBILE_BREAKPOINT_PX = 664;
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getFocusableElements(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => el.offsetParent !== null || el.getClientRects().length > 0);
+}
+function useIsMobileLayout() {
+  const [isMobile, setIsMobile] = (0,react.useState)(() => typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT_PX);
+  (0,react.useEffect)(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT_PX);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return isMobile;
+}
 function Modal({
   isOpen,
   onClose,
@@ -4883,217 +5044,135 @@ function Modal({
   title = 'Choose your plan to proceed',
   theme = 'primary'
 }) {
-  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 664;
-  (0,react.useEffect)(() => {
-    const handleEsc = e => {
-      if (e.key === 'Escape') onClose();
+  const isMobile = useIsMobileLayout();
+  const titleId = (0,react.useId)();
+  const trapContainerRef = (0,react.useRef)(null);
+  const dialogRef = (0,react.useRef)(null);
+  const portalRoot = usePortalRoot();
+  (0,react.useLayoutEffect)(() => {
+    if (!isOpen) return;
+    const previousActiveElement = document.activeElement;
+    document.body.style.overflow = 'hidden';
+    const container = trapContainerRef.current;
+    const focusInitial = () => {
+      if (!container) return;
+      const focusables = getFocusableElements(container);
+      if (focusables.length > 0) {
+        focusables[0].focus();
+      } else {
+        var _dialogRef$current;
+        (_dialogRef$current = dialogRef.current) == null || _dialogRef$current.focus();
+      }
     };
-    if (isOpen) {
-      document.addEventListener('keydown', handleEsc);
-      document.body.style.overflow = 'hidden';
-    }
+    focusInitial();
+    const onDocKeyDown = e => {
+      if (e.key === 'Escape') {
+        onClose();
+        return;
+      }
+      if (e.key !== 'Tab' || !container) return;
+      if (!container.contains(document.activeElement)) return;
+      const focusables = getFocusableElements(container);
+      if (focusables.length === 0) return;
+      if (focusables.length === 1) {
+        e.preventDefault();
+        focusables[0].focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', onDocKeyDown);
     return () => {
-      document.removeEventListener('keydown', handleEsc);
-      document.body.style.overflow = 'auto';
+      document.removeEventListener('keydown', onDocKeyDown);
+      document.body.style.overflow = '';
+      if (previousActiveElement instanceof HTMLElement && document.contains(previousActiveElement)) {
+        previousActiveElement.focus({
+          preventScroll: true
+        });
+      }
     };
   }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  const headerStylesByTheme = {
-    primary: {
-      background: '#144DFF'
-    },
-    dark: {
-      background: '#081F66'
-    },
-    light: {
-      background: '#E8EDFF'
-    }
-  };
-  const titleColorByTheme = {
-    primary: '#FFFFFF',
-    dark: '#FFFFFF',
-    light: '#101828'
-  };
-  const poweredByColorByTheme = {
-    primary: '#D0D5DD',
-    dark: '#D0D5DD',
-    light: '#667085'
+  const handleOverlayClick = event => {
+    if (event.target !== event.currentTarget) return;
+    onClose();
   };
+  if (!isOpen) return null;
   const modalContent = /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    style: {
-      position: 'fixed',
-      inset: 0,
-      display: isMobile ? 'flex' : 'block',
-      justifyContent: isMobile ? 'flex-end' : undefined,
-      alignItems: isMobile ? 'stretch' : undefined,
-      zIndex: 2147483647
-    },
+    className: `${modal_module.root} ${isMobile ? modal_module.rootMobile : modal_module.rootDesktop}`,
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      onClick: onClose,
-      style: {
-        position: 'absolute',
-        inset: 0,
-        background: 'rgba(0,0,0,0.35)',
-        backdropFilter: 'blur(6px)',
-        WebkitBackdropFilter: 'blur(6px)',
-        zIndex: 0,
-        cursor: 'pointer'
-      }
+      className: modal_module.overlay,
+      onClick: handleOverlayClick,
+      role: "presentation",
+      "aria-hidden": "true"
     }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      style: {
-        position: 'relative',
-        zIndex: 1,
-        marginLeft: isMobile ? 0 : 'auto',
-        marginRight: isMobile ? 0 : '0',
-        marginTop: isMobile ? 'auto' : '0',
-        marginBottom: 0,
-        height: isMobile ? '80vh' : '100%',
-        maxHeight: isMobile ? '80vh' : '100%',
-        width: '100%',
-        maxWidth: isMobile ? '100%' : '550px',
-        animation: isMobile ? 'slideUp 0.3s ease-out' : 'slideIn 0.3s ease-out'
-      },
+      ref: trapContainerRef,
+      className: `${modal_module.panel} ${isMobile ? modal_module.panelMobile : modal_module.panelDesktop}`,
       children: [isMobile && /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
         type: "button",
         onClick: onClose,
-        style: {
-          position: 'absolute',
-          left: '50%',
-          top: -50,
-          transform: 'translateX(-50%)',
-          width: 40,
-          height: 40,
-          borderRadius: '50%',
-          backgroundColor: 'white',
-          border: 'none',
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          boxShadow: '0 6px 16px rgba(0,0,0,0.18)',
-          zIndex: 2
-        },
+        className: modal_module.closeFloatingMobile,
         "aria-label": "Close modal",
         children: /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
           src: close_namespaceObject,
           alt: "close",
-          style: {
-            width: 10,
-            height: 10
-          }
+          className: modal_module.closeIcon
         })
       }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+        ref: dialogRef,
         role: "dialog",
         "aria-modal": "true",
-        style: {
-          height: '100%',
-          maxHeight: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          backgroundColor: 'white',
-          overflow: isMobile ? 'hidden' : 'visible',
-          boxShadow: isMobile ? '0 -4px 24px rgba(0,0,0,0.15)' : '-4px 0 24px rgba(0,0,0,0.15)',
-          borderRadius: isMobile ? '24px 24px 0 0' : '0px'
-        },
+        "aria-labelledby": titleId,
+        "data-theme": theme,
+        tabIndex: -1,
+        className: `${modal_module.dialog} ${isMobile ? modal_module.dialogMobile : modal_module.dialogDesktop}`,
         children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-          style: {
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between',
-            backgroundColor: headerStylesByTheme[theme].background,
-            padding: '12px 16px',
-            color: titleColorByTheme[theme]
-          },
+          className: modal_module.header,
           children: [!isMobile && /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
             type: "button",
             onClick: onClose,
-            style: {
-              position: 'absolute',
-              left: '-45px',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              width: 40,
-              height: 40,
-              borderRadius: '50%',
-              backgroundColor: 'white',
-              border: 'none',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              boxShadow: '0 6px 16px rgba(0,0,0,0.18)'
-            },
+            className: modal_module.closeFloatingDesktop,
             "aria-label": "Close modal",
             children: /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
               src: close_namespaceObject,
               alt: "close",
-              style: {
-                width: 10,
-                height: 10
-              }
+              className: modal_module.closeIcon
             })
           }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
-            style: {
-              fontSize: 14,
-              fontWeight: 600
-            },
+            id: titleId,
+            className: modal_module.title,
             children: title
           }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-            style: {
-              display: 'flex',
-              alignItems: 'flex-end',
-              gap: 4
-            },
+            className: modal_module.poweredRow,
             children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
-              style: {
-                fontSize: 12,
-                lineHeight: 1,
-                display: 'flex',
-                alignItems: 'flex-end',
-                color: poweredByColorByTheme[theme]
-              },
+              className: modal_module.poweredLabel,
               children: "Powered by"
             }), /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
               src: theme === 'light' ? blue_logo_namespaceObject : paymob_logo_namespaceObject,
               alt: "paymob",
-              style: {
-                height: 17,
-                objectFit: 'contain'
-              }
+              className: modal_module.logo
             })]
           })]
         }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          style: {
-            flex: 1,
-            overflowY: 'auto',
-            padding: 16,
-            WebkitOverflowScrolling: 'touch'
-          },
+          className: modal_module.body,
           children: children
         }), footer && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          style: {
-            borderTop: '1px solid #f3f4f6',
-            padding: 16
-          },
+          className: modal_module.footer,
           children: footer
         })]
       })]
-    }), /*#__PURE__*/(0,jsx_runtime.jsx)("style", {
-      children: `
-          @keyframes slideIn {
-            from { transform: translateX(100%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-          }
-          @keyframes slideUp {
-            from { transform: translateY(100%); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-          }
-        `
     })]
   });
-  return /*#__PURE__*/(0,react_dom.createPortal)(modalContent, document.body);
+  return /*#__PURE__*/(0,react_dom.createPortal)(modalContent, portalRoot != null ? portalRoot : document.body);
 }
 /* harmony default export */ const modal = (Modal);
 ;// ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
@@ -7723,6 +7802,26 @@ async function fetchInstallmentPlansProduct(payload) {
 
 
 
+/** One installment row as returned by the installment-plans product endpoint (snake_case). */
+
+/** One bank row as returned by the same endpoint (snake_case). */
+
+function isInstallmentPlansProductWrappedPayload(value) {
+  return typeof value === 'object' && value !== null && 'data' in value && Array.isArray(value.data);
+}
+
+/**
+ * Accepts either a bare list of banks or `{ data: banks[] }` (common axios / gateway shape).
+ */
+function readBanksListFromInstallmentPlansProductPayload(payload) {
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+  if (isInstallmentPlansProductWrappedPayload(payload)) {
+    return payload.data;
+  }
+  return null;
+}
 const learnMoreSteps = [{
   icon: calender_namespaceObject,
   title: 'Select Installment Plan',
@@ -7740,6 +7839,37 @@ const learnMoreSteps = [{
   title: 'Complete Payment on Paymob',
   description: 'Enter the card details of the selected bank to finalize the payment.'
 }];
+function normalizeBanksWithPlans(installmentPlansProductPayload) {
+  const banksList = readBanksListFromInstallmentPlansProductPayload(installmentPlansProductPayload);
+  if (!(banksList != null && banksList.length)) return null;
+  return banksList.map((bankItem, bankIndex) => {
+    var _bankItem$installment, _axios$defaults$baseU, _bankItem$bank_logo;
+    const bankInstallmentPlans = (_bankItem$installment = bankItem.installment_plans) != null ? _bankItem$installment : [];
+    const installmentOptions = bankInstallmentPlans.map(planFromProduct => {
+      const interestRate = Number(planFromProduct.interest_rate);
+      const badge = interestRate === 0 ? '0% Interest' : `${interestRate}% Interest`;
+      return {
+        id: planFromProduct.id,
+        months: Number(planFromProduct.tenure),
+        monthlyAmount: Number(planFromProduct.installment_amount),
+        badge
+      };
+    });
+    const minimumMonthlyFromProduct = Number(bankItem.minimum_plan_amount);
+    const startsFromAmount = minimumMonthlyFromProduct || (installmentOptions.length ? Math.min(...installmentOptions.map(option => option.monthlyAmount)) : 0);
+    const baseURL = String((_axios$defaults$baseU = lib_axios.defaults.baseURL) != null ? _axios$defaults$baseU : '');
+    const logoPath = String((_bankItem$bank_logo = bankItem.bank_logo) != null ? _bankItem$bank_logo : '');
+    const resolvedLogo = logoPath && logoPath.startsWith('/') && baseURL ? `${baseURL}${logoPath}` : logoPath || Partner_logo_namespaceObject;
+    return {
+      id: String(bankItem.bank_name || `bank-${bankIndex}`),
+      name: String(bankItem.bank_name || 'Bank'),
+      logo: resolvedLogo,
+      badgeText: '0% Interest',
+      startsFromAmount,
+      installmentOptions
+    };
+  });
+}
 function Widget({
   publicKey,
   amount = 300,
@@ -7750,87 +7880,50 @@ function Widget({
 }) {
   const [isModalOpen, setIsModalOpen] = (0,react.useState)(false);
   const [isLearnMoreOpen, setIsLearnMoreOpen] = (0,react.useState)(false);
-  const [plansLoading, setPlansLoading] = (0,react.useState)(false);
-  const [plansError, setPlansError] = (0,react.useState)(null);
-  const [bankPlans, setBankPlans] = (0,react.useState)([]);
-  const [selectedPlanId, setSelectedPlanId] = (0,react.useState)(null);
-  const [selectedPlanPayload, setSelectedPlanPayload] = (0,react.useState)(null);
-  const [buyLoading, setBuyLoading] = (0,react.useState)(false);
-  const [buyError, setBuyError] = (0,react.useState)(null);
+  const [isPlansLoading, setIsPlansLoading] = (0,react.useState)(false);
+  const [plansErrorMessage, setPlansErrorMessage] = (0,react.useState)(null);
+  const [banksWithPlans, setBanksWithPlans] = (0,react.useState)([]);
+  const [selectedInstallmentId, setSelectedInstallmentId] = (0,react.useState)(null);
+  const [selectedInstallment, setSelectedInstallment] = (0,react.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0,react.useState)(false);
+  const [submitError, setSubmitError] = (0,react.useState)(null);
   const canSelect = typeof onSubmit === 'function';
-  const resolvedAmountCents = (0,react.useMemo)(() => {
+  const amountInCents = (0,react.useMemo)(() => {
     if (typeof amount === 'number') return Math.round(amount * 100);
     return 0;
   }, [amount]);
-  const normalizedPlans = data => {
-    var _ref, _ref2, _ref3, _ref4, _data$banks;
-    const raw = (_ref = (_ref2 = (_ref3 = (_ref4 = (_data$banks = data == null ? void 0 : data.banks) != null ? _data$banks : data == null ? void 0 : data.bank_plans) != null ? _ref4 : data == null ? void 0 : data.bankPlans) != null ? _ref3 : data == null ? void 0 : data.data) != null ? _ref2 : data == null ? void 0 : data.results) != null ? _ref : data;
-    if (!Array.isArray(raw)) return null;
-    return raw.map(bank => {
-      var _ref5, _ref6, _ref7, _bank$installment_pla, _ref19, _ref20, _bank$startsFrom, _axios$defaults$baseU, _ref21, _bank$logo, _ref22, _ref23, _bank$id, _ref24, _bank$name, _ref25, _bank$badgeText;
-      const plansRaw = (_ref5 = (_ref6 = (_ref7 = (_bank$installment_pla = bank == null ? void 0 : bank.installment_plans) != null ? _bank$installment_pla : bank == null ? void 0 : bank.plans) != null ? _ref7 : bank == null ? void 0 : bank.tenures) != null ? _ref6 : bank == null ? void 0 : bank.installments) != null ? _ref5 : [];
-      const plans = Array.isArray(plansRaw) ? plansRaw.map(p => {
-        var _ref8, _ref9, _ref0, _p$id, _ref1, _ref10, _p$months, _ref11, _ref12, _ref13, _ref14, _p$monthly_amount;
-        return {
-          id: (_ref8 = (_ref9 = (_ref0 = (_p$id = p == null ? void 0 : p.id) != null ? _p$id : p == null ? void 0 : p.plan_id) != null ? _ref0 : p == null ? void 0 : p.tenure_id) != null ? _ref9 : p == null ? void 0 : p.tenure) != null ? _ref8 : p == null ? void 0 : p.months,
-          months: Number((_ref1 = (_ref10 = (_p$months = p == null ? void 0 : p.months) != null ? _p$months : p == null ? void 0 : p.tenure) != null ? _ref10 : p == null ? void 0 : p.duration) != null ? _ref1 : 0),
-          monthlyAmount: Number((_ref11 = (_ref12 = (_ref13 = (_ref14 = (_p$monthly_amount = p == null ? void 0 : p.monthly_amount) != null ? _p$monthly_amount : p == null ? void 0 : p.monthlyAmount) != null ? _ref14 : p == null ? void 0 : p.amount_per_month) != null ? _ref13 : p == null ? void 0 : p.installment_amount) != null ? _ref12 : p == null ? void 0 : p.amount) != null ? _ref11 : 0),
-          badge: ((_ref15, _p$interest_rate, _ref16, _ref17, _ref18, _p$badge) => {
-            const interestRate = (_ref15 = (_p$interest_rate = p == null ? void 0 : p.interest_rate) != null ? _p$interest_rate : p == null ? void 0 : p.interestRate) != null ? _ref15 : typeof (p == null ? void 0 : p.interest) === 'number' ? p.interest : undefined;
-            if (typeof interestRate === 'number') {
-              if (interestRate === 0) return '0% Interest';
-              return `${interestRate}% Interest`;
-            }
-            return String((_ref16 = (_ref17 = (_ref18 = (_p$badge = p == null ? void 0 : p.badge) != null ? _p$badge : p == null ? void 0 : p.interest_text) != null ? _ref18 : p == null ? void 0 : p.interest) != null ? _ref17 : bank == null ? void 0 : bank.badgeText) != null ? _ref16 : '0% Interest');
-          })()
-        };
-      }) : [];
-      const startsFrom = Number((_ref19 = (_ref20 = (_bank$startsFrom = bank == null ? void 0 : bank.startsFrom) != null ? _bank$startsFrom : bank == null ? void 0 : bank.minimum_plan_amount) != null ? _ref20 : bank == null ? void 0 : bank.minimum_installment_amount) != null ? _ref19 : 0) || (plans.length ? Math.min(...plans.map(p => p.monthlyAmount)) : 0);
-      const baseURL = String((_axios$defaults$baseU = lib_axios.defaults.baseURL) != null ? _axios$defaults$baseU : '');
-      const logoPath = String((_ref21 = (_bank$logo = bank == null ? void 0 : bank.logo) != null ? _bank$logo : bank == null ? void 0 : bank.bank_logo) != null ? _ref21 : '');
-      const resolvedLogo = logoPath && logoPath.startsWith('/') && baseURL ? `${baseURL}${logoPath}` : logoPath || Partner_logo_namespaceObject;
-      return {
-        id: String((_ref22 = (_ref23 = (_bank$id = bank == null ? void 0 : bank.id) != null ? _bank$id : bank == null ? void 0 : bank.code) != null ? _ref23 : bank == null ? void 0 : bank.name) != null ? _ref22 : Math.random()),
-        name: String((_ref24 = (_bank$name = bank == null ? void 0 : bank.name) != null ? _bank$name : bank == null ? void 0 : bank.bank_name) != null ? _ref24 : 'Bank'),
-        logo: resolvedLogo,
-        badgeText: String((_ref25 = (_bank$badgeText = bank == null ? void 0 : bank.badgeText) != null ? _bank$badgeText : bank == null ? void 0 : bank.badge_text) != null ? _ref25 : '0% Interest'),
-        startsFrom,
-        plans
-      };
-    });
-  };
   (0,react.useEffect)(() => {
-    const loadPlans = async () => {
+    const loadInstallmentPlans = async () => {
       if (!isModalOpen) return;
       if (!publicKey) return;
-      setPlansLoading(true);
-      setPlansError(null);
-      setBuyError(null);
-      setBankPlans([]);
-      setSelectedPlanId(null);
-      setSelectedPlanPayload(null);
-      const res = await fetchInstallmentPlansProduct(Object.assign({
+      setIsPlansLoading(true);
+      setPlansErrorMessage(null);
+      setSubmitError(null);
+      setBanksWithPlans([]);
+      setSelectedInstallmentId(null);
+      setSelectedInstallment(null);
+      const installmentPlansResponse = await fetchInstallmentPlansProduct(Object.assign({
         public_key: publicKey,
-        amount_cents: resolvedAmountCents,
+        amount_cents: amountInCents,
         currency
       }, typeof integrationId === 'number' ? {
         integration_id: integrationId
       } : {}));
-      if ((res == null ? void 0 : res.status) >= 200 && (res == null ? void 0 : res.status) < 300) {
-        const parsed = normalizedPlans(res == null ? void 0 : res.data);
-        if (parsed != null && parsed.length) {
-          setBankPlans(parsed);
+      if ((installmentPlansResponse == null ? void 0 : installmentPlansResponse.status) >= 200 && (installmentPlansResponse == null ? void 0 : installmentPlansResponse.status) < 300) {
+        const normalizedBanks = normalizeBanksWithPlans(installmentPlansResponse == null ? void 0 : installmentPlansResponse.data);
+        if (normalizedBanks != null && normalizedBanks.length) {
+          setBanksWithPlans(normalizedBanks);
         } else {
-          setPlansError('No installment plans available.');
+          setPlansErrorMessage('No installment plans available.');
         }
       } else {
-        var _res$data, _res$data2;
-        setPlansError((res == null || (_res$data = res.data) == null ? void 0 : _res$data.message) || (res == null || (_res$data2 = res.data) == null ? void 0 : _res$data2.msg) || 'Failed to load installment plans.');
+        var _installmentPlansResp, _installmentPlansResp2;
+        setPlansErrorMessage((installmentPlansResponse == null || (_installmentPlansResp = installmentPlansResponse.data) == null ? void 0 : _installmentPlansResp.message) || (installmentPlansResponse == null || (_installmentPlansResp2 = installmentPlansResponse.data) == null ? void 0 : _installmentPlansResp2.msg) || 'Failed to load installment plans.');
       }
-      setPlansLoading(false);
+      setIsPlansLoading(false);
     };
-    void loadPlans();
-  }, [isModalOpen, publicKey, resolvedAmountCents, currency, integrationId]);
+    void loadInstallmentPlans();
+  }, [isModalOpen, publicKey, amountInCents, currency, integrationId]);
   const headerThemeStyles = {
     primary: {
       background: '#144DFF'
@@ -7903,7 +7996,7 @@ function Widget({
               text: "View all plans",
               onClickHandler: () => {
                 setIsModalOpen(true);
-                setBuyError(null);
+                setSubmitError(null);
               },
               trailingIcon: /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
                 src: arrow_namespaceObject,
@@ -7934,51 +8027,51 @@ function Widget({
       theme: theme,
       footer: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         className: moda_module['button'],
-        children: [buyError && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        children: [submitError && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           style: {
             paddingBottom: 8,
             color: '#B42318',
             fontSize: 14
           },
-          children: buyError
+          children: submitError
         }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button, {
           type: "button",
           text: "Buy now",
           color: "primary",
-          loading: buyLoading,
-          disabled: !canSelect || !selectedPlanPayload || buyLoading || plansLoading,
+          loading: isSubmitting,
+          disabled: !canSelect || !selectedInstallment || isSubmitting || isPlansLoading,
           onClickHandler: async () => {
             if (!canSelect) return;
-            if (!selectedPlanPayload) {
-              setBuyError('Please select an installment plan.');
+            if (!selectedInstallment) {
+              setSubmitError('Please select an installment plan.');
               return;
             }
-            setBuyLoading(true);
-            setBuyError(null);
+            setIsSubmitting(true);
+            setSubmitError(null);
             try {
-              onSubmit == null || onSubmit(selectedPlanPayload);
+              onSubmit == null || onSubmit(selectedInstallment);
               setIsModalOpen(false);
             } finally {
-              setBuyLoading(false);
+              setIsSubmitting(false);
             }
           }
         })]
       }),
-      children: [plansLoading && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      children: [isPlansLoading && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         style: {
           padding: 8,
           color: '#475467',
           fontSize: 14
         },
         children: "Loading plans..."
-      }), plansError && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      }), plansErrorMessage && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         style: {
           padding: 8,
           color: '#B42318',
           fontSize: 14
         },
-        children: plansError
-      }), !plansLoading && !plansError && bankPlans.length === 0 && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        children: plansErrorMessage
+      }), !isPlansLoading && !plansErrorMessage && banksWithPlans.length === 0 && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         style: {
           padding: 8,
           color: '#475467',
@@ -7991,7 +8084,7 @@ function Widget({
           flexDirection: 'column',
           gap: '12px'
         },
-        children: bankPlans.map(bank => /*#__PURE__*/(0,jsx_runtime.jsx)(Accordion, {
+        children: banksWithPlans.map(bankItem => /*#__PURE__*/(0,jsx_runtime.jsx)(Accordion, {
           header: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
             style: {
               display: 'flex',
@@ -7999,8 +8092,8 @@ function Widget({
               gap: '10px'
             },
             children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
-              src: bank.logo,
-              alt: bank.name,
+              src: bankItem.logo,
+              alt: bankItem.name,
               style: {
                 width: '50px',
                 height: '50px',
@@ -8024,9 +8117,9 @@ function Widget({
                     fontWeight: '600',
                     color: '#101828'
                   },
-                  children: bank.name
+                  children: bankItem.name
                 }), /*#__PURE__*/(0,jsx_runtime.jsx)(Badge, {
-                  text: bank.badgeText,
+                  text: bankItem.badgeText,
                   color: "green",
                   size: "sm"
                 })]
@@ -8035,7 +8128,7 @@ function Widget({
                   fontSize: '14px',
                   color: '#667085'
                 },
-                children: ["Starts from EGP ", bank.startsFrom, " / month"]
+                children: ["Starts from EGP ", bankItem.startsFromAmount, " / month"]
               })]
             })]
           }),
@@ -8049,21 +8142,21 @@ function Widget({
               flexDirection: 'column',
               gap: '12px'
             },
-            children: bank.plans.map(plan => /*#__PURE__*/(0,jsx_runtime.jsx)(ItemSelector, {
-              id: String(plan.id),
+            children: bankItem.installmentOptions.map(installmentOption => /*#__PURE__*/(0,jsx_runtime.jsx)(ItemSelector, {
+              id: String(installmentOption.id),
               type: "radio",
               size: "sm",
               disabled: !canSelect,
-              selected: selectedPlanId === plan.id,
+              selected: selectedInstallmentId === installmentOption.id,
               onClickHandler: () => {
                 if (!canSelect) return;
-                setSelectedPlanId(plan.id);
-                setSelectedPlanPayload({
-                  id: plan.id,
-                  tenure: plan.months,
-                  amount: plan.monthlyAmount
+                setSelectedInstallmentId(installmentOption.id);
+                setSelectedInstallment({
+                  id: installmentOption.id,
+                  tenure: installmentOption.months,
+                  amount: installmentOption.monthlyAmount
                 });
-                setBuyError(null);
+                setSubmitError(null);
               },
               text: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
                 style: {
@@ -8072,9 +8165,9 @@ function Widget({
                   width: '100%'
                 },
                 children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
-                  children: ["EGP ", plan.monthlyAmount, " / month"]
+                  children: ["EGP ", installmentOption.monthlyAmount, " / month"]
                 }), /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
-                  children: [plan.months, " Months"]
+                  children: [installmentOption.months, " Months"]
                 })]
               }),
               hintText: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -8084,14 +8177,14 @@ function Widget({
                   gap: '10px'
                 },
                 children: /*#__PURE__*/(0,jsx_runtime.jsx)(Badge, {
-                  text: plan.badge,
+                  text: installmentOption.badge,
                   color: "green",
                   size: "sm"
                 })
               })
-            }, plan.id))
+            }, installmentOption.id))
           })
-        }, bank.id))
+        }, bankItem.id))
       }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         style: {
           display: 'flex',