paymob-widget-alpha 1.0.1 → 1.0.2

package/README.md

@@ -43,7 +43,9 @@ new PaymobWidget({
   currency: 'EGP',
   theme: 'primary',
   onSubmit: (plan) => {
-    // plan = { id, tenure, amount }
+    // `onSubmit` is called when the user selects an installment plan and clicks **Buy now** in the widget.
+    // The callback receives a `plan` object (e.g. `id`, `tenure`, `amount`) so you can create an order / continue your checkout flow in your app.
+   // plan = { id: 123, tenure: 12, amount: 250 }
   },
 });
 ```
@@ -95,16 +97,20 @@ The full list of properties is as follows:
     <script src="https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/main.js" type="module" ></script>
 
     <script>
-      new PaymobWidget({
-        publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
-        elementId: 'paymob-widget',
-        amount: 1000,
-        currency: 'EGP',
-        theme: 'primary', // "primary" | "light" | "dark"
-        onSubmit: (plan) => {
-          // plan = { id, tenure, amount }
-        },
-      });
+      window.onload = () => {
+        new PaymobWidget({
+          publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+          elementId: 'paymob-widget',
+          amount: 1000,
+          currency: 'EGP',
+          theme: 'primary', // "primary" | "light" | "dark"
+          onSubmit: (plan) => {
+            // `onSubmit` is called when the user selects an installment plan and clicks **Buy now** in the widget.
+            // The callback receives a `plan` object (e.g. `id`, `tenure`, `amount`) so you can create an order / continue your checkout flow in your app.
+            // plan = { id: 123, tenure: 12, amount: 250 }
+          },
+        });
+      };
     </script>
   </body>
 </html>

package/main.css

@@ -28,7 +28,7 @@
 @import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap);
-@keyframes modal_slideIn__uUuXp{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes modal_slideUp__2GwQS{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.modal_root__sfoqg{position:fixed;inset:0;z-index:10000}.modal_rootMobile__wzN8Q{display:flex;justify-content:flex-end;align-items:stretch}.modal_rootDesktop__CiQty{display:block}.modal_overlay__D1Rh8{position:absolute;inset:0;z-index:0;cursor:pointer;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.modal_panel__odrOu{position:relative;z-index:1;width:100%}.modal_panelMobile__Pyh\+r{margin-left:0;margin-right:0;margin-top:auto;margin-bottom:0;height:80vh;max-height:80vh;max-width:100%;animation:modal_slideUp__2GwQS .3s ease-out}.modal_panelDesktop__YwVRJ{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;height:100%;max-height:100%;max-width:550px;animation:modal_slideIn__uUuXp .3s ease-out}.modal_closeFloatingMobile__Z3pkR{position:absolute;left:50%;top:-50px;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.18);z-index:2}.modal_closeFloatingDesktop__3W3cX{position:absolute;left:-45px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.18)}.modal_dialog__fapVk{height:100%;max-height:100%;width:100%;display:flex;flex-direction:column;background-color:#fff}.modal_dialogMobile__awaMW{overflow:hidden;box-shadow:0 -4px 24px rgba(0,0,0,.15);border-radius:24px 24px 0 0}.modal_dialogDesktop__z8dIY{overflow:visible;box-shadow:-4px 0 24px rgba(0,0,0,.15);border-radius:0}.modal_dialog__fapVk[data-theme=primary]{--modal-header-bg: #144dff;--modal-title-color: #ffffff;--modal-powered-color: #d0d5dd}.modal_dialog__fapVk[data-theme=dark]{--modal-header-bg: #081f66;--modal-title-color: #ffffff;--modal-powered-color: #d0d5dd}.modal_dialog__fapVk[data-theme=light]{--modal-header-bg: #e8edff;--modal-title-color: #101828;--modal-powered-color: #667085}.modal_header__oe722{position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 16px;background-color:var(--modal-header-bg);color:var(--modal-title-color)}.modal_title__0XpA9{font-size:14px;font-weight:600}.modal_poweredRow__VXaw8{display:flex;align-items:flex-end;gap:4px}.modal_poweredLabel__a3hHx{font-size:12px;line-height:1;display:flex;align-items:flex-end;color:var(--modal-powered-color)}.modal_logo__jcucM{height:17px;object-fit:contain}.modal_body__SQUnU{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}.modal_footer__GKw2U{border-top:1px solid #f3f4f6;padding:16px}.modal_closeIcon__RJJ9p{width:10px;height:10px}
+@keyframes modal_slideIn__uUuXp{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes modal_slideUp__2GwQS{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.modal_root__sfoqg{position:fixed;inset:0;z-index:10000;isolation:isolate}.modal_rootMobile__wzN8Q{display:flex;justify-content:flex-end;align-items:stretch}.modal_rootDesktop__CiQty{display:block}.modal_overlay__D1Rh8{position:absolute;inset:0;z-index:0;cursor:pointer;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.modal_panel__odrOu{position:relative;z-index:1;width:100%}.modal_panelMobile__Pyh\+r{margin-left:0;margin-right:0;margin-top:auto;margin-bottom:0;height:80vh;max-height:80vh;max-width:100%;animation:modal_slideUp__2GwQS .3s ease-out}.modal_panelDesktop__YwVRJ{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;height:100%;max-height:100%;max-width:550px;animation:modal_slideIn__uUuXp .3s ease-out}.modal_closeFloatingMobile__Z3pkR{position:absolute;left:50%;top:-50px;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.18);z-index:2}.modal_closeFloatingDesktop__3W3cX{position:absolute;left:-45px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.18)}.modal_dialog__fapVk{height:100%;max-height:100%;width:100%;display:flex;flex-direction:column;background-color:#fff}.modal_dialogMobile__awaMW{overflow:hidden;box-shadow:0 -4px 24px rgba(0,0,0,.15);border-radius:24px 24px 0 0}.modal_dialogDesktop__z8dIY{overflow:visible;box-shadow:-4px 0 24px rgba(0,0,0,.15);border-radius:0}.modal_dialog__fapVk[data-theme=primary]{--modal-header-bg: #144dff;--modal-title-color: #ffffff;--modal-powered-color: #d0d5dd}.modal_dialog__fapVk[data-theme=dark]{--modal-header-bg: #081f66;--modal-title-color: #ffffff;--modal-powered-color: #d0d5dd}.modal_dialog__fapVk[data-theme=light]{--modal-header-bg: #e8edff;--modal-title-color: #101828;--modal-powered-color: #667085}.modal_header__oe722{position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 16px;background-color:var(--modal-header-bg);color:var(--modal-title-color)}.modal_title__0XpA9{font-size:14px;font-weight:600}.modal_poweredRow__VXaw8{display:flex;align-items:flex-end;gap:4px}.modal_poweredLabel__a3hHx{font-size:12px;line-height:1;display:flex;align-items:flex-end;color:var(--modal-powered-color)}.modal_logo__jcucM{height:17px;object-fit:contain}.modal_body__SQUnU{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}.modal_footer__GKw2U{border-top:1px solid #f3f4f6;padding:16px}.modal_closeIcon__RJJ9p{width:10px;height:10px}
 .badge_badge__zVreJ{width:fit-content;height:fit-content;display:flex;align-items:center;justify-content:center;border-radius:1rem;gap:.25rem;mix-blend-mode:multiply}.badge_badge__zVreJ svg,.badge_badge__zVreJ img{width:1rem;height:1rem}.badge_badge__zVreJ img{border-radius:50%}[data-badge-size=sm]{padding:0 .5rem}html[dir=ltr] [data-badge-size=sm],html[lang=en] [data-badge-size=sm]{font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:500}html[dir=rtl] [data-badge-size=sm],html[lang=ar] [data-badge-size=sm]{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:600}[data-badge-size=md],[data-badge-size=lg]{padding:0 .75rem}html[dir=ltr] [data-badge-size=md],html[lang=en] [data-badge-size=md]{font-family:"Inter",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:500}html[dir=rtl] [data-badge-size=md],html[lang=ar] [data-badge-size=md]{font-family:"Cairo",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:600}html[dir=ltr] [data-badge-size=lg],html[lang=en] [data-badge-size=lg]{font-family:"Inter",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:500}html[dir=rtl] [data-badge-size=lg],html[lang=ar] [data-badge-size=lg]{font-family:"Cairo",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:600}[data-badge-color=gray],[data-badge-color=grey]{color:#344054;background-color:#f2f4f7}[data-badge-color=gray]:not([data-badge-type=country]):not([data-badge-type=avatar]) path,[data-badge-color=grey]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#344054 !important}[data-badge-color=primary]{color:#144dff;background-color:#e8edff}[data-badge-color=primary]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#144dff !important}[data-badge-color=green]{color:#038f6e;background-color:#e6f7f3}[data-badge-color=green]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#038f6e !important}[data-badge-color=yellow]{color:#dc6803;background-color:#fffaeb}[data-badge-color=yellow]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#dc6803 !important}[data-badge-color=red]{color:#cc1142;background-color:#ffe8ee}[data-badge-color=red]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#cc1142 !important}
 .checkbox-base_checkbox-base__EOx8c{position:relative;display:block;display:flex;align-items:center;justify-content:center;flex-shrink:0}.checkbox-base_checkbox-base__input__yOneo{position:absolute;opacity:0;width:100%;height:100%;margin:0}.checkbox-base_checkbox-base__input__yOneo:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #d0d5dd;background-color:#f9fafb;cursor:not-allowed}.checkbox-base_checkbox-base__input__yOneo:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:after{cursor:not-allowed;border-color:rgba(0,0,0,0)}.checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #144dff;background-color:#144dff}.checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:after{border-color:#fff}.checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #d0d5dd;background-color:#f9fafb}.checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:after{background-color:rgba(0,0,0,0);border-color:#d0d5dd}.checkbox-base_checkbox-base__checkbox__cRTaH{cursor:pointer;display:inline-block;position:relative;width:100%;height:100%}.checkbox-base_checkbox-base__checkbox__cRTaH:before{content:"";box-sizing:border-box;position:absolute;width:100%;height:100%;border:.0625rem solid #d0d5dd;background-color:#fff;transition:200ms linear}.checkbox-base_checkbox-base__checkbox__cRTaH:after{content:"";position:absolute;top:50%;left:50%;transition:200ms linear}html[dir=ltr] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=en] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-end:solid rgba(0,0,0,0);border-block-end:solid rgba(0,0,0,0)}html[dir=rtl] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=ar] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-start:solid rgba(0,0,0,0);border-block-end:solid rgba(0,0,0,0)}.checkbox-base_checkbox-base__checkbox__cRTaH:hover:before,.checkbox-base_checkbox-base__checkbox__cRTaH[data-checkbox-base-hovered=true]:before{border:.0625rem solid #144dff;background-color:#e8edff}.checkbox-base_checkbox-base__checkbox__cRTaH:focus:before,.checkbox-base_checkbox-base__checkbox__cRTaH[data-checkbox-base-focused=true]:before{border:.0625rem solid #144dff;background-color:#fff}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{width:18.75%;height:43.75%;transform:translate(-50%, -60%) rotate(45deg)}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-icon=dash] .checkbox-base_checkbox-base__checkbox__cRTaH:after{width:45%;height:10%;transform:translate(-50%, -65%)}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm]{width:1rem;height:1rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm] .checkbox-base_checkbox-base__checkbox__cRTaH:before{border-radius:.25rem}html[dir=ltr] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=en] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-end-width:.0625rem;border-block-end-width:.0625rem}html[dir=rtl] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=ar] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-start-width:.0625rem;border-block-end-width:.0625rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=dash] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-width:0;border-block-end-width:.0625rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md]{width:1.25rem;height:1.25rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md] .checkbox-base_checkbox-base__checkbox__cRTaH:before{border-radius:.375rem}html[dir=ltr] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=en] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-end-width:.125rem;border-block-end-width:.125rem}html[dir=rtl] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=ar] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-start-width:.125rem;border-block-end-width:.125rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=dash] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-width:0;border-block-end-width:.125rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__checkbox__cRTaH:before{border-radius:50%}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__checkbox__cRTaH:after{width:40%;height:40%;border-radius:50%;background-color:rgba(0,0,0,0);transform:translate(-50%, -50%);border:none}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #144dff;background-color:#144dff}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:after{background-color:#fff}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #d0d5dd;background-color:#f9fafb}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:after{background-color:#d0d5dd}
 .checkbox_checkbox-wrapper__zjCk3{width:fit-content;display:flex;gap:.5rem;cursor:pointer}.checkbox_checkbox-wrapper__text-box__XGApL{display:flex;flex-direction:column;gap:.5rem}.checkbox_checkbox-wrapper__text-box__row__2k\+Wo{display:flex;align-items:center;gap:.5rem}.checkbox_checkbox-wrapper__text-box__text__JezoX{color:#344054}.checkbox_checkbox-wrapper__text-box__badge__HmR8b{margin-inline-start:.25rem}.checkbox_checkbox-wrapper__text-box__hint-text__FYD4b{color:#475467;font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.125rem;letter-spacing:.01rem;font-weight:400}html[dir=rtl] .checkbox_checkbox-wrapper__text-box__hint-text__FYD4b,html[lang=ar] .checkbox_checkbox-wrapper__text-box__hint-text__FYD4b{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.125rem;letter-spacing:.01rem;font-weight:400}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-disabled=true]{pointer-events:none}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=sm] .checkbox_checkbox-wrapper__text-box__text__JezoX{line-height:.8rem !important;font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:500}html[dir=rtl] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=sm] .checkbox_checkbox-wrapper__text-box__text__JezoX,html[lang=ar] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=sm] .checkbox_checkbox-wrapper__text-box__text__JezoX{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:600}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=md] .checkbox_checkbox-wrapper__text-box__text__JezoX{line-height:.82rem !important;font-family:"Inter",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:500}html[dir=rtl] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=md] .checkbox_checkbox-wrapper__text-box__text__JezoX,html[lang=ar] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=md] .checkbox_checkbox-wrapper__text-box__text__JezoX{font-family:"Cairo",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:600}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-alignment=start]{align-items:flex-start}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-alignment=end]{align-items:flex-end}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-alignment=center]{align-items:center}.checkbox_checkbox-wrapper__zjCk3:has(div[class*=badge]){align-items:flex-start}.checkbox_checkbox-wrapper__zjCk3:has(div[class*=badge]) div[data-checkbox-base-size]{margin-block-start:.25rem}

package/main.js

@@ -610,11 +610,28 @@ const environment = {
 };
 // 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;
 };
@@ -4972,6 +5018,7 @@ 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) {
@@ -5001,6 +5048,7 @@ function Modal({
   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;
@@ -5046,7 +5094,7 @@ function Modal({
     document.addEventListener('keydown', onDocKeyDown);
     return () => {
       document.removeEventListener('keydown', onDocKeyDown);
-      document.body.style.overflow = 'auto';
+      document.body.style.overflow = '';
       if (previousActiveElement instanceof HTMLElement && document.contains(previousActiveElement)) {
         previousActiveElement.focus({
           preventScroll: true
@@ -5124,7 +5172,7 @@ function Modal({
       })]
     })]
   });
-  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paymob-widget-alpha",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "keywords": ["paymob","widget","paymob-widget"],
   "main": "./main.js",
   "license": "MIT",