paymob-widget-alpha 1.0.0

package/README.md

@@ -0,0 +1,115 @@
+# `paymob-widget`
+Paymob Installments Widget that can be embedded in any web page to display **0% interest plans** and (optionally) let the user select a plan.
+
+## Installing
+
+### Package manager
+
+Using npm:
+
+```bash
+$ npm install paymob-widget --save
+```
+
+Once the package is installed, you can import the library using `import`:
+
+```js
+import PaymobWidget, { PaymobWidget as PaymobWidgetClass } from 'paymob-widget';
+```
+
+> **Note**: The default export and the named `PaymobWidget` export both point to the same class.
+
+### CDN
+
+Using jsDelivr:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/paymob-widget@latest/main.js" type="module"></script>
+```
+
+## Usage
+
+Create a container element in your page:
+
+```html
+<div id="paymob-widget"></div>
+```
+
+Then instantiate the widget:
+
+```js
+new PaymobWidget({
+  publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+  elementId: 'paymob-widget',
+  amount: 1000,
+  currency: 'EGP',
+  theme: 'primary',
+});
+```
+
+### Selectable mode example
+
+To let the user select an installment plan and handle the selection in your app, pass an `onSubmit` callback.
+
+```js
+new PaymobWidget({
+  publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+  elementId: 'paymob-widget',
+  amount: 1000,
+  currency: 'EGP',
+  theme: 'primary',
+  onSubmit: (plan) => {
+    // plan = { id, tenure, amount }
+    console.log('[PaymobWidget] onSubmit', plan);
+
+    // Example: redirect to your checkout with selected plan
+    // window.location.href = `/checkout?planId=${plan.id}&tenure=${plan.tenure}`;
+  },
+});
+```
+
+## Properties
+
+The full list of properties is as follows:
+
+| Property | Type | Required | Definition |
+| --- | --- | --- | --- |
+| publicKey | String | Yes | Your public key (used to resolve API base URL and authenticate requests). |
+| elementId | String | Yes | ID of the HTML element where the widget will be rendered. |
+| clientSecret | String | No | If provided, it can be used (with `publicKey`) to resolve the correct API base URL. |
+| theme | `"primary" \| "light" \| "dark"` | No | Widget theme. Default: `"primary"`. |
+| amount | Number | No | Amount in major units. Default: `300`. |
+| currency | String | No | Currency code. Default: `"EGP"`. |
+| integrationId | Number | No | Optional integration id used when fetching installment plans. |
+| onSubmit | Function | No | Called when the user selects a plan and clicks **Buy now**. Receives `{ id, tenure, amount }`. |
+
+### `onSubmit` payload
+
+```js
+{
+  id: string | number,   // installment plan id
+  tenure: number,        // number of months
+  amount: number         // monthly amount
+}
+```
+
+## Notes
+
+- **Rendering**: The widget renders a React app into your `elementId` container.
+- **Isolation**: UI is rendered inside a Shadow DOM wrapper to reduce CSS conflicts with the host page.
+- **API base URL**: Base URL is resolved from the key prefix (e.g. `egy_`, `are_`, `sau_`, `pak_`, `omn_`) using `publicKey` (and `clientSecret` as a fallback).
+- **Installment plans endpoint**: The widget fetches plans using:
+  - `POST /api/ecommerce/installment-plans/product` with `{ public_key, amount_cents, currency, integration_id? }`
+
+## Troubleshooting
+
+- **Container not found**: Ensure an element exists with the same id passed in `elementId`.
+- **No plans available**: Verify `publicKey`, `currency`, `amount`, and that installment plans exist for the given product/amount.
+
+## Development
+
+Run unit tests:
+
+```bash
+$ nx test paymob_widget
+```

package/jsr.json

@@ -0,0 +1,10 @@
+{
+    "name": "@paymob/paymob_widget",
+    "version": "1.0.0",
+    "license": "MIT",
+    "keywords": ["paymob","widget","paymob-widget"],
+    "main": "./main.js",
+    "homepage": "https://developers.paymob.com",
+    "author": "Paymob <support@paymob.com> (https://developers.paymob.com)",
+    "exports": "./main.js"
+}

package/main.css

@@ -0,0 +1,37 @@
+@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@100..700&display=swap);
+@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);
+@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@100..700&display=swap);
+@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);
+@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@100..700&display=swap);
+@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);
+@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@100..700&display=swap);
+@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);
+@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@100..700&display=swap);
+@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);
+@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@100..700&display=swap);
+@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);
+.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}
+.item-selector_item-selector__OE34y{display:flex;align-items:flex-start;border:.0625rem solid #eaecf0;border-radius:.75rem;background:#fff;transition:border-color .2s,box-shadow .2s;cursor:pointer;gap:.75rem}.item-selector_item-selector__OE34y[data-item-selector-size=sm]{padding:.75rem}.item-selector_item-selector__OE34y[data-item-selector-size=md]{padding:1rem}.item-selector_item-selector__OE34y[data-item-selector-checked=true]{border-color:#144dff}.item-selector_item-selector__OE34y[data-item-selector-hovered=true]:not([data-item-selector-disabled=true]){border-color:#144dff}.item-selector_item-selector__OE34y[data-item-selector-focused=true]:not([data-item-selector-disabled=true]){border-color:#144dff;box-shadow:0rem 0rem 0rem .25rem #b9caff,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.item-selector_item-selector__OE34y[data-item-selector-selected=true]:not([data-item-selector-disabled=true]){border-color:#144dff}.item-selector_item-selector__OE34y[data-item-selector-disabled=true]{border-color:#eaecf0;background:#fcfcfd;opacity:.8;cursor:not-allowed}.item-selector_item-selector__OE34y[data-item-selector-disabled=true][data-item-selector-disabled=true]:is(.item-selector_item-selector__OE34y[data-item-selector-disabled=true]) [data-checkbox-base-hovered=true]::before{border-color:#d0d5dd;background-color:#f9fafb}
+.accordion_accordion__ohrAi{border-radius:.5rem;padding:1rem}.accordion_accordion__chevron-holder__61mzP{margin-inline-start:auto}.accordion_accordion__chevron-holder__61mzP path{fill:#475467}.accordion_accordion__ohrAi summary{cursor:pointer;padding-inline:0;display:flex;gap:.75rem}.accordion_accordion__ohrAi[data-accordion-type=bordered_box]{border:.0625rem solid #eaecf0}.accordion_accordion__ohrAi[data-accordion-type=bordered_box] .accordion_accordion__chevron-holder__61mzP{height:1.5rem}.accordion_accordion__ohrAi[data-accordion-type=bordered_box] .accordion_accordion__chevron-holder__61mzP svg{width:1.5rem;height:1.5rem}.accordion_accordion__ohrAi[data-accordion-type=transparent_box]{width:100%}.accordion_accordion__ohrAi[data-accordion-type=transparent_box] .accordion_accordion__chevron-holder__61mzP{height:1.25rem}.accordion_accordion__ohrAi[data-accordion-type=transparent_box] .accordion_accordion__chevron-holder__61mzP svg{width:1.25rem;height:1.25rem}.accordion_accordion__ohrAi[data-accordion-header-alignment=start] summary{align-items:flex-start}.accordion_accordion__ohrAi[data-accordion-header-alignment=center] summary{align-items:center}.accordion_accordion__ohrAi[data-accordion-header-alignment=end] summary{align-items:flex-end}.accordion_accordion__ohrAi[data-accordion-with-divider=true][open][data-accordion-type=bordered_box] summary{border-bottom:.0625rem solid #eaecf0;margin-bottom:1rem;padding-bottom:1rem}.accordion_accordion__ohrAi[data-accordion-with-divider=true][open][data-accordion-type=transparent_box] summary{border-bottom:0;padding:1rem 1.5rem}.accordion_accordion__ohrAi[data-accordion-with-divider=true][open][data-accordion-type=transparent_box] .accordion_accordion__body__3Sf-3{padding:0 1.5rem 1rem}.accordion_accordion__ohrAi[data-accordion-with-divider=true]:not([open])[data-accordion-type=transparent_box] summary{border-bottom:.0625rem solid #eaecf0;padding:1rem 1.5rem}
+.button_btn__nkOul{width:fit-content;display:flex;align-items:center;justify-content:center;border-radius:.5rem;border:none;cursor:pointer;user-select:none}.button_btn__nkOul:disabled{cursor:not-allowed}.button_btn__label__jT32k{color:#667085}html[dir=ltr] .button_btn__label__jT32k,html[lang=en] .button_btn__label__jT32k{font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:400}html[dir=rtl] .button_btn__label__jT32k,html[lang=ar] .button_btn__label__jT32k{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1rem;font-weight:400}.button_btn__nkOul svg{width:100%;height:100%}html[dir=ltr] [data-btn-size=sm],html[lang=en] [data-btn-size=sm],html[dir=ltr] [data-btn-size=md],html[lang=en] [data-btn-size=md]{font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:600}html[dir=rtl] [data-btn-size=sm],html[lang=ar] [data-btn-size=sm],html[dir=rtl] [data-btn-size=md],html[lang=ar] [data-btn-size=md]{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:700}[data-btn-size=sm]{gap:.5rem;padding:.25rem .75rem}[data-btn-size=sm]:has(>svg:only-child){padding:.5rem}[data-btn-size=sm] svg{width:1rem;height:1rem}[data-btn-size=md]{gap:.5rem;padding:.5rem .75rem}[data-btn-size=md]:has(>svg:only-child){padding:.625rem}[data-btn-size=md] svg{width:1.25rem;height:1.25rem}[data-btn-size=lg]{gap:.5rem;padding:.625rem 1rem}html[dir=ltr] [data-btn-size=lg],html[lang=en] [data-btn-size=lg]{font-family:"Inter",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:600}html[dir=rtl] [data-btn-size=lg],html[lang=ar] [data-btn-size=lg]{font-family:"Cairo",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:700}[data-btn-size=lg]:has(>svg:only-child){padding:.75rem}[data-btn-size=lg] svg{width:1.5rem;height:1.5rem}[data-btn-size=xl]{gap:.5rem;padding:.625rem 1.25rem}html[dir=ltr] [data-btn-size=xl],html[lang=en] [data-btn-size=xl]{font-family:"Inter",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:600}html[dir=rtl] [data-btn-size=xl],html[lang=ar] [data-btn-size=xl]{font-family:"Cairo",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:700}[data-btn-size=xl]:has(>svg:only-child){padding:.75rem}[data-btn-size=xl] svg{width:1.75rem;height:1.75rem}[data-btn-size="2xl"],[data-btn-size=full]{gap:.5rem;padding:.75rem 1.5rem}html[dir=ltr] [data-btn-size="2xl"],html[lang=en] [data-btn-size="2xl"],html[dir=ltr] [data-btn-size=full],html[lang=en] [data-btn-size=full]{font-family:"Inter",sans-serif;font-size:1.25rem;font-style:normal;line-height:2.25rem;font-weight:600}html[dir=rtl] [data-btn-size="2xl"],html[lang=ar] [data-btn-size="2xl"],html[dir=rtl] [data-btn-size=full],html[lang=ar] [data-btn-size=full]{font-family:"Cairo",sans-serif;font-size:1.25rem;font-style:normal;line-height:2.25rem;font-weight:700}[data-btn-size="2xl"]:has(>svg:only-child),[data-btn-size=full]:has(>svg:only-child){padding:.875rem}[data-btn-size="2xl"] svg,[data-btn-size=full] svg{width:2rem;height:2rem}[data-btn-size=full]{width:100%}[data-btn-variant=link]{padding:0}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]),.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]){color:#fff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]) path,.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]) path{fill:#fff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]) circle,.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]) circle{stroke:#fff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]){background-color:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]):hover{background-color:#103ecc}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]):focus{background-color:#144dff;box-shadow:0rem 0rem 0rem .25rem #b9caff,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]):disabled{background-color:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):hover){background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled){color:#144dff;border:.0625rem solid #144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled) path{fill:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):hover{background-color:#e8edff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):focus{box-shadow:0rem 0rem 0rem .25rem #b9caff,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled{color:#a1b8ff;border:.0625rem solid #a1b8ff;background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled path{fill:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled circle{stroke:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]){background-color:rgba(0,0,0,0);border:none}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled){color:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled) path{fill:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover{color:#103ecc}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover path{fill:#103ecc}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled{color:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled path{fill:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled circle{stroke:#a1b8ff}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):hover){background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled){color:#344054;border:.0625rem solid #d0d5dd}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled) path{fill:#344054}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):hover{background-color:#f2f4f7}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):focus{box-shadow:0rem 0rem 0rem .25rem #f2f4f7,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled{color:#d0d5dd;border:.0625rem solid #eaecf0;background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled path{fill:#d0d5dd}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled circle{stroke:#d0d5dd}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]){background-color:rgba(0,0,0,0);border:none}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled){color:#475467}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled) path{fill:#475467}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover{color:#344054}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover path{fill:#344054}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled{color:#98a2b3}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled path{fill:#98a2b3}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled circle{stroke:#98a2b3}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]){background-color:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]):hover{background-color:#990d31}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]):focus{background-color:#cc1142;box-shadow:0rem 0rem 0rem .25rem #ffb9cb,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]):disabled{background-color:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):hover){background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled){color:#cc1142;border:.0625rem solid #cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled) path{fill:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):hover{background-color:#ffe8ee}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):focus{box-shadow:0rem 0rem 0rem .25rem #ffb9cb,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled{color:#ffa1ba;border:.0625rem solid #ffa1ba;background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled path{fill:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled circle{stroke:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]){background-color:rgba(0,0,0,0);border:none}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled){color:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled) path{fill:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover{color:#990d31}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover path{fill:#990d31}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled{color:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled path{fill:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled circle{stroke:#ffa1ba}
+.moda_item__YfVFi [class*=checkbox-wrapper]{width:100% !important}.moda_button__5O3E3{width:100%}.moda_button__5O3E3 button{width:100% !important;min-width:100% !important}