@test-glide/glide-payment 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +60 -35
  2. package/dist/react/style.css +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -29,9 +29,15 @@ import * as BivoPayments from "@test-glide/glide-payment";
29
29
  import "@test-glide/glide-payment/style.css";
30
30
  ```
31
31
 
32
+ ---
33
+
32
34
  ## Usage
33
35
 
34
- The SDK can be used in two ways: **React Component** or **Vanilla JavaScript API**.
36
+ The SDK can be used in three ways:
37
+
38
+ 1. **React Component** (with npm install)
39
+ 2. **Vanilla JavaScript API** (with npm install or CDN)
40
+ 3. **CDN Only** (no build required, single HTML file)
35
41
 
36
42
  ---
37
43
 
@@ -101,6 +107,8 @@ function App() {
101
107
 
102
108
  For non-React applications, use the `init()` function from the main entry point:
103
109
 
110
+ ### With npm (ES Modules)
111
+
104
112
  ```javascript
105
113
  import * as BivoPayments from "@test-glide/glide-payment";
106
114
  import "@test-glide/glide-payment/style.css";
@@ -140,6 +148,56 @@ document.querySelector("#openBtn").addEventListener("click", () => {
140
148
  bivo.destroy();
141
149
  ```
142
150
 
151
+ ### With CDN (No Build Required)
152
+
153
+ ```html
154
+ <!doctype html>
155
+ <html lang="en">
156
+ <head>
157
+ <meta charset="UTF-8" />
158
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
159
+ <title>Bivo Payments</title>
160
+
161
+ <link
162
+ rel="stylesheet"
163
+ href="https://cdn.jsdelivr.net/npm/@test-glide/glide-payment@latest/dist/style.css"
164
+ />
165
+ </head>
166
+ <body>
167
+ <div id="app"></div>
168
+ <button id="open-modal">Open Modal</button>
169
+
170
+ <script src="https://cdn.jsdelivr.net/npm/@test-glide/glide-payment@latest/dist/index.umd.js"></script>
171
+ <script>
172
+ const TOKEN = "your-session-token";
173
+ const ENDPOINT = "your-api-endpoint";
174
+
175
+ const handleCallback = (result) => {
176
+ if (result.success) {
177
+ console.log("Success! Data:", result.data);
178
+ } else {
179
+ console.error("Error:", result.error);
180
+ }
181
+ };
182
+
183
+ // Modal mode
184
+ const bivoModal = BivoPayments.init({
185
+ token: TOKEN,
186
+ endpoint: ENDPOINT,
187
+ isModal: true,
188
+ onCallback: handleCallback,
189
+ });
190
+
191
+ document.getElementById("open-modal").addEventListener("click", () => {
192
+ bivoModal.open();
193
+ });
194
+ </script>
195
+ </body>
196
+ </html>
197
+ ```
198
+
199
+ The SDK is immediately available as `BivoPayments` on the global scope when loaded via CDN.
200
+
143
201
  ### Selector Options for `mount()`
144
202
 
145
203
  The `mount()` method accepts one of three selector formats:
@@ -158,44 +216,11 @@ The `AddCard` React component accepts the following props:
158
216
  | ----------------- | ---------- | ----------- | ------------------------------------------------------------------------------- |
159
217
  | `token` | `string` | **Yes** | Session token for API authentication. |
160
218
  | `endpoint` | `string` | **Yes** | API endpoint URL for card submission. |
219
+ | `beneficiaryCard` | `boolean` | No | If `true`, shows recipient card flow. Defaults to `false` (individual flow). |
161
220
  | `onCallback` | `function` | No | Callback function receiving `{ success: boolean, data?: any, error?: string }`. |
162
221
  | `onClose` | `function` | No | Callback function triggered when modal is closed (modal mode only). |
163
222
  | `isModal` | `boolean` | No | If `true`, renders in modal mode. Defaults to `false`. |
164
223
  | `isOpen` | `boolean` | Conditional | **Required if `isModal` is true.** Controls modal visibility. |
165
- | `beneficiaryCard` | `boolean` | No | If `true`, shows recipient card flow. Defaults to `false` (individual flow). |
166
-
167
- ---
168
-
169
- ## Vanilla JS API
170
-
171
- ### `init(options)` Function
172
-
173
- Returns an object with the following methods:
174
-
175
- ```typescript
176
- init(options: {
177
- token: string;
178
- endpoint: string;
179
- beneficiaryCard?: boolean;
180
- isModal?: boolean;
181
- onCallback?: (args: { success: boolean; error?: string; data?: any }) => void;
182
- onModalClose?: () => void;
183
- }): {
184
- mount(selector: Selector): void;
185
- open(): void;
186
- destroy(): void;
187
- }
188
- ```
189
-
190
- **Methods:**
191
-
192
- - **`mount(selector)`** - Mounts the form to a DOM element. Accepts one selector type: `{ id: string }`, `{ className: string }`, or `{ element: HTMLElement }`.
193
- - **`open()`** - Opens the modal (only works if `isModal: true`).
194
- - **`destroy()`** - Closes the modal and cleans up resources.
195
-
196
- **Options:**
197
-
198
- - **`onModalClose`** - Optional callback triggered when the modal is closed via `destroy()`.
199
224
 
200
225
  ---
201
226
 
package/dist/react/style.css CHANGED
@@ -1 +1 @@
1
- .custom-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);font-weight:600;border-radius:3px;outline:none;cursor:pointer;transition:all .2s;border:1px solid transparent;box-sizing:border-box;white-space:nowrap;width:100%}.custom-button .button-spinner{display:flex;align-items:center;animation:spin 1s linear infinite}.custom-button .button-spinner[data-show=false]{display:none}.custom-button .button-spinner svg{display:block}.custom-button .button-label{display:flex;align-items:center}.custom-button.small{height:36px;padding:0 16px;font-size:14px}.custom-button.medium{height:48px;padding:0 24px;font-size:16px}.custom-button.large{height:56px;padding:0 32px;font-size:18px}.custom-button.primary{background-color:var(--bivo-payments-primary, #000);color:var(--bivo-payments-primary-text, #fff);border-color:var(--bivo-payments-primary, #000)}.custom-button.primary:hover:not(.disabled){background-color:var(--bivo-payments-primary-hover, #333);border-color:var(--bivo-payments-primary-hover, #333)}.custom-button.primary:active:not(.disabled){background-color:var(--bivo-payments-primary-active, #1a1a1a);border-color:var(--bivo-payments-primary-active, #1a1a1a)}.custom-button.secondary{background-color:var(--bivo-payments-secondary, #f8f8fa);color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.secondary:hover:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-border-hover, #d1d3d9)}.custom-button.secondary:active:not(.disabled){background-color:var(--bivo-payments-secondary-active, #e3e5e9);border-color:var(--bivo-payments-border-active, #c1c3c9)}.custom-button.outline{background-color:transparent;color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.outline:hover:not(.disabled){background-color:var(--bivo-payments-secondary, #f8f8fa);border-color:var(--bivo-payments-text, #000)}.custom-button.outline:active:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-text, #000)}.custom-button.disabled,.custom-button:disabled{cursor:not-allowed;opacity:.5}.custom-button:focus-visible{outline:2px solid var(--bivo-payments-primary, #000);outline-offset:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-trigger{display:inline-flex;cursor:help}.tooltip-wrapper{display:flex;justify-content:center;align-items:center}.tooltip{position:fixed;z-index:9999;background-color:var(--bivo-payments-tooltip-bg, #1a1a1a);color:var(--bivo-payments-tooltip-text, #fff);border-radius:4px;padding:8px 12px;font-size:14px;line-height:1.4;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltipFadeIn .2s ease-in-out forwards;align-items:center}.tooltip .tooltip-content{position:relative;z-index:1}.tooltip .tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip.top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent transparent}.tooltip.bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent}.tooltip.left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a)}.tooltip.right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent}.tooltip[data-show=true]{display:flex}.tooltip[data-show=false]{display:none}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.custom-input-group{display:flex;flex-direction:column;width:100%;align-items:flex-start}.custom-input-group .input-label{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--bivo-payments-text, #000)}.custom-input-group .input-wrapper{width:100%;display:flex;align-items:center;position:relative;border:1px solid var(--bivo-payments-border, #e3e5e9);border-radius:3px;background-color:var(--bivo-payments-bg, #fff);height:44px;transition:border-color .2s;box-sizing:border-box}.custom-input-group .input-wrapper:focus-within{border-color:var(--bivo-payments-primary, #000)}.custom-input-group .input-wrapper.input-error{border-color:var(--bivo-payments-danger, #eb5757);background-color:var(--bivo-payments-secondary, #f8f8fa)}.custom-input-group .input-wrapper .styled-input{width:100%;padding:0 16px;border:none;background:transparent;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);outline:none;height:100%;color:var(--bivo-payments-text, #000);box-sizing:border-box}.custom-input-group .input-wrapper .styled-input::placeholder{color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6));font-size:14px}.custom-input-group .input-wrapper .styled-input:disabled{cursor:not-allowed;opacity:.6}.custom-input-group .input-wrapper[data-loading=true] .styled-input{cursor:progress;opacity:.8;background:linear-gradient(90deg,#888 40%,var(--bivo-payments-primary, #000000) 50%,#888 60%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 1.5s linear infinite}.custom-input-group .input-wrapper[data-loading=true] .input-loader{display:flex;align-items:center;justify-content:center;padding:0 8px;flex-shrink:0}.custom-input-group .input-wrapper[data-loading=true] .input-loader .loader{width:24px;aspect-ratio:2;--_g: no-repeat radial-gradient( circle closest-side, var(--bivo-payments-placeholder, #3c3c4399) 90%, transparent );background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:33.3333333333% 50%;animation:l3 1s infinite linear}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.custom-input-group .input-wrapper[data-loading=true] .input-loader[data-show=false]{display:none}.custom-input-group .input-wrapper .input-right-element{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6))}.custom-input-group .input-wrapper .input-right-element button,.custom-input-group .input-wrapper .input-right-element a{cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center}.custom-input-group .input-wrapper .input-right-element svg{display:block}.custom-input-group .error-message{padding:0;background-color:transparent;display:flex;align-items:center;gap:4px;color:var(--bivo-payments-danger, #eb5757);font-size:12px;margin-top:4px;font-weight:500}.custom-input-group .error-message[data-show=false]{display:none}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.add-card-form-wrapper .custom-modal{max-width:500px}.add-card-form-wrapper.non-modal{max-width:500px;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.add-card-form-wrapper.non-modal .non-modal-content{padding:12px 20px}.add-card-form-wrapper.non-modal .non-modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.add-card-form-wrapper.non-modal .non-modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn,.add-card-form-wrapper.non-modal .non-modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.add-card-form-wrapper.non-modal .non-modal-header .close-btn:hover,.add-card-form-wrapper.non-modal .non-modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn[data-show=false],.add-card-form-wrapper.non-modal .non-modal-header .back-btn[data-show=false]{visibility:hidden}.add-card-form-wrapper div.form-title{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper div.form-title p{margin:0}.add-card-form-wrapper div.form-title>div{display:flex;align-items:center;gap:4px;font-size:12px}.add-card-form-wrapper form{margin-top:16px;margin-bottom:32px;display:flex;flex-direction:column;gap:40px}.add-card-form-wrapper form div.inputs{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper form div.inputs .input-wrapper .input-right-element .input-success-icon{color:var(--bivo-payments-success, green)}.add-card-form-wrapper form div.input-row{display:flex;align-items:flex-start;flex-direction:row;gap:16px;margin:0!important}.add-card-form-wrapper form .submit-button-wrapper{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.add-card-form-wrapper form .submit-button-wrapper p.submit-error{margin:0;font-size:14px;display:flex;gap:6px;align-items:center;color:var(--bivo-payments-danger, #eb5757)}.add-card-form-wrapper form .submit-button-wrapper p.submit-error[data-show=false]{display:hidden}.recipient-form form{margin-bottom:16px}.recipient-form form .input-sections{display:flex;flex-direction:column;gap:16px}.recipient-form form .input-sections p.section-title{font-size:16px;font-weight:500;margin:0}.recipient-form form .input-sections div.section{display:flex;flex-direction:column;gap:20px}.custom-modal{border:none;border-radius:8px;padding:0;min-width:500px;box-shadow:0 10px 25px #0003;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.custom-modal[open]{animation:fadeIn .3s ease-out}.custom-modal::backdrop{background-color:var(--bivo-payments-bg-overlay, rgba(0, 0, 0, .35));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.custom-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.custom-modal .modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn,.custom-modal .modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.custom-modal .modal-header .close-btn:hover,.custom-modal .modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn[data-show=false],.custom-modal .modal-header .back-btn[data-show=false]{visibility:hidden}.custom-modal .modal-content{padding:12px 20px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-actions{padding:16px 24px;background-color:var(--bivo-payments-bg-secondary, #f9f9f9);display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--bivo-payments-secondary, #eee)}.custom-modal .modal-actions button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.custom-modal .modal-actions button.btn-secondary{background-color:var(--bivo-payments-secondary, #e0e0e0);color:var(--bivo-payments-secondary-text, #333)}.custom-modal .modal-actions button.btn-secondary:hover{background-color:var(--bivo-payments-secondary-hover, #d5d5d5)}.custom-modal .modal-actions button.btn-primary{background-color:var(--bivo-payments-info, #3b82f6);color:var(--bivo-payments-primary-text, white)}.custom-modal .modal-actions button.btn-primary:hover{background-color:var(--bivo-payments-info-hover, #2563eb)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
1
+ .custom-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);font-weight:600;border-radius:3px;outline:none;cursor:pointer;transition:all .2s;border:1px solid transparent;box-sizing:border-box;white-space:nowrap;width:100%}.custom-button .button-spinner{display:flex;align-items:center;animation:spin 1s linear infinite}.custom-button .button-spinner[data-show=false]{display:none}.custom-button .button-spinner svg{display:block}.custom-button .button-label{display:flex;align-items:center}.custom-button.small{height:36px;padding:0 16px;font-size:14px}.custom-button.medium{height:48px;padding:0 24px;font-size:16px}.custom-button.large{height:56px;padding:0 32px;font-size:18px}.custom-button.primary{background-color:var(--bivo-payments-primary, #000);color:var(--bivo-payments-primary-text, #fff);border-color:var(--bivo-payments-primary, #000)}.custom-button.primary:hover:not(.disabled){background-color:var(--bivo-payments-primary-hover, #333);border-color:var(--bivo-payments-primary-hover, #333)}.custom-button.primary:active:not(.disabled){background-color:var(--bivo-payments-primary-active, #1a1a1a);border-color:var(--bivo-payments-primary-active, #1a1a1a)}.custom-button.secondary{background-color:var(--bivo-payments-secondary, #f8f8fa);color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.secondary:hover:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-border-hover, #d1d3d9)}.custom-button.secondary:active:not(.disabled){background-color:var(--bivo-payments-secondary-active, #e3e5e9);border-color:var(--bivo-payments-border-active, #c1c3c9)}.custom-button.outline{background-color:transparent;color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.outline:hover:not(.disabled){background-color:var(--bivo-payments-secondary, #f8f8fa);border-color:var(--bivo-payments-text, #000)}.custom-button.outline:active:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-text, #000)}.custom-button.disabled,.custom-button:disabled{cursor:not-allowed;opacity:.5}.custom-button:focus-visible{outline:2px solid var(--bivo-payments-primary, #000);outline-offset:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-trigger{display:inline-flex;cursor:help}.tooltip-wrapper{display:flex;justify-content:center;align-items:center}.tooltip{position:fixed;z-index:9999;background-color:var(--bivo-payments-tooltip-bg, #1a1a1a);color:var(--bivo-payments-tooltip-text, #fff);border-radius:4px;padding:8px 12px;font-size:14px;line-height:1.4;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltipFadeIn .2s ease-in-out forwards;align-items:center}.tooltip .tooltip-content{position:relative;z-index:1}.tooltip .tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip.top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent transparent}.tooltip.bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent}.tooltip.left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a)}.tooltip.right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent}.tooltip[data-show=true]{display:flex}.tooltip[data-show=false]{display:none}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.custom-input-group{display:flex;flex-direction:column;width:100%;align-items:flex-start}.custom-input-group .input-label{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--bivo-payments-text, #000)}.custom-input-group .input-wrapper{width:100%;display:flex;align-items:center;position:relative;border:1px solid var(--bivo-payments-border, #e3e5e9);border-radius:3px;background-color:var(--bivo-payments-bg, #fff);height:44px;transition:border-color .2s;box-sizing:border-box}.custom-input-group .input-wrapper:focus-within{border-color:var(--bivo-payments-primary, #000)}.custom-input-group .input-wrapper.input-error{border-color:var(--bivo-payments-danger, #eb5757);background-color:var(--bivo-payments-secondary, #f8f8fa)}.custom-input-group .input-wrapper .styled-input{width:100%;padding:0 16px;border:none;background:transparent;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);outline:none;height:100%;color:var(--bivo-payments-text, #000);box-sizing:border-box}.custom-input-group .input-wrapper .styled-input::placeholder{color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6));font-size:14px}.custom-input-group .input-wrapper .styled-input:disabled{cursor:not-allowed;opacity:.6}.custom-input-group .input-wrapper[data-loading=true] .styled-input{cursor:progress;opacity:.8;background:linear-gradient(90deg,#888 40%,var(--bivo-payments-primary, #000000) 50%,#888 60%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 1.5s linear infinite}.custom-input-group .input-wrapper[data-loading=true] .input-loader{display:flex;align-items:center;justify-content:center;padding:0 8px;flex-shrink:0}.custom-input-group .input-wrapper[data-loading=true] .input-loader .loader{width:24px;aspect-ratio:2;--_g: no-repeat radial-gradient( circle closest-side, var(--bivo-payments-placeholder, #3c3c4399) 90%, transparent );background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:33.3333333333% 50%;animation:l3 1s infinite linear}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.custom-input-group .input-wrapper[data-loading=true] .input-loader[data-show=false]{display:none}.custom-input-group .input-wrapper .input-right-element{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6))}.custom-input-group .input-wrapper .input-right-element button,.custom-input-group .input-wrapper .input-right-element a{cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center}.custom-input-group .input-wrapper .input-right-element svg{display:block}.custom-input-group .error-message{padding:0;background-color:transparent;display:flex;align-items:center;gap:4px;color:var(--bivo-payments-danger, #eb5757);font-size:12px;margin-top:4px;font-weight:500}.custom-input-group .error-message[data-show=false]{display:none}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.add-card-form-wrapper .custom-modal{max-width:500px}.add-card-form-wrapper.non-modal{max-width:500px;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.add-card-form-wrapper.non-modal .non-modal-content{padding:12px 20px}.add-card-form-wrapper.non-modal .non-modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.add-card-form-wrapper.non-modal .non-modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn,.add-card-form-wrapper.non-modal .non-modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.add-card-form-wrapper.non-modal .non-modal-header .close-btn:hover,.add-card-form-wrapper.non-modal .non-modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn[data-show=false],.add-card-form-wrapper.non-modal .non-modal-header .back-btn[data-show=false]{visibility:hidden}.add-card-form-wrapper div.form-title{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper div.form-title p{margin:0}.add-card-form-wrapper div.form-title>div{display:flex;align-items:center;gap:4px;font-size:12px}.add-card-form-wrapper form{margin-top:16px;margin-bottom:32px;display:flex;flex-direction:column;gap:40px}.add-card-form-wrapper form div.inputs{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper form div.inputs .input-wrapper .input-right-element .input-success-icon{color:var(--bivo-payments-success, green)}.add-card-form-wrapper form div.input-row{display:flex;align-items:flex-start;flex-direction:row;gap:16px;margin:0!important}.add-card-form-wrapper form .submit-button-wrapper{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.add-card-form-wrapper form .submit-button-wrapper p.submit-error{margin:0;font-size:14px;display:flex;gap:6px;align-items:center;color:var(--bivo-payments-danger, #eb5757)}.add-card-form-wrapper form .submit-button-wrapper p.submit-error[data-show=false]{display:none}.recipient-form form{margin-bottom:16px}.recipient-form form .input-sections{display:flex;flex-direction:column;gap:16px}.recipient-form form .input-sections p.section-title{font-size:16px;font-weight:500;margin:0}.recipient-form form .input-sections div.section{display:flex;flex-direction:column;gap:20px}.custom-modal{border:none;border-radius:8px;padding:0;min-width:500px;box-shadow:0 10px 25px #0003;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.custom-modal[open]{animation:fadeIn .3s ease-out}.custom-modal::backdrop{background-color:var(--bivo-payments-bg-overlay, rgba(0, 0, 0, .35));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.custom-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.custom-modal .modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn,.custom-modal .modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.custom-modal .modal-header .close-btn:hover,.custom-modal .modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn[data-show=false],.custom-modal .modal-header .back-btn[data-show=false]{visibility:hidden}.custom-modal .modal-content{padding:12px 20px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-actions{padding:16px 24px;background-color:var(--bivo-payments-bg-secondary, #f9f9f9);display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--bivo-payments-secondary, #eee)}.custom-modal .modal-actions button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.custom-modal .modal-actions button.btn-secondary{background-color:var(--bivo-payments-secondary, #e0e0e0);color:var(--bivo-payments-secondary-text, #333)}.custom-modal .modal-actions button.btn-secondary:hover{background-color:var(--bivo-payments-secondary-hover, #d5d5d5)}.custom-modal .modal-actions button.btn-primary{background-color:var(--bivo-payments-info, #3b82f6);color:var(--bivo-payments-primary-text, white)}.custom-modal .modal-actions button.btn-primary:hover{background-color:var(--bivo-payments-info-hover, #2563eb)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .custom-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);font-weight:600;border-radius:3px;outline:none;cursor:pointer;transition:all .2s;border:1px solid transparent;box-sizing:border-box;white-space:nowrap;width:100%}.custom-button .button-spinner{display:flex;align-items:center;animation:spin 1s linear infinite}.custom-button .button-spinner[data-show=false]{display:none}.custom-button .button-spinner svg{display:block}.custom-button .button-label{display:flex;align-items:center}.custom-button.small{height:36px;padding:0 16px;font-size:14px}.custom-button.medium{height:48px;padding:0 24px;font-size:16px}.custom-button.large{height:56px;padding:0 32px;font-size:18px}.custom-button.primary{background-color:var(--bivo-payments-primary, #000);color:var(--bivo-payments-primary-text, #fff);border-color:var(--bivo-payments-primary, #000)}.custom-button.primary:hover:not(.disabled){background-color:var(--bivo-payments-primary-hover, #333);border-color:var(--bivo-payments-primary-hover, #333)}.custom-button.primary:active:not(.disabled){background-color:var(--bivo-payments-primary-active, #1a1a1a);border-color:var(--bivo-payments-primary-active, #1a1a1a)}.custom-button.secondary{background-color:var(--bivo-payments-secondary, #f8f8fa);color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.secondary:hover:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-border-hover, #d1d3d9)}.custom-button.secondary:active:not(.disabled){background-color:var(--bivo-payments-secondary-active, #e3e5e9);border-color:var(--bivo-payments-border-active, #c1c3c9)}.custom-button.outline{background-color:transparent;color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.outline:hover:not(.disabled){background-color:var(--bivo-payments-secondary, #f8f8fa);border-color:var(--bivo-payments-text, #000)}.custom-button.outline:active:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-text, #000)}.custom-button.disabled,.custom-button:disabled{cursor:not-allowed;opacity:.5}.custom-button:focus-visible{outline:2px solid var(--bivo-payments-primary, #000);outline-offset:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-trigger{display:inline-flex;cursor:help}.tooltip-wrapper{display:flex;justify-content:center;align-items:center}.tooltip{position:fixed;z-index:9999;background-color:var(--bivo-payments-tooltip-bg, #1a1a1a);color:var(--bivo-payments-tooltip-text, #fff);border-radius:4px;padding:8px 12px;font-size:14px;line-height:1.4;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltipFadeIn .2s ease-in-out forwards;align-items:center}.tooltip .tooltip-content{position:relative;z-index:1}.tooltip .tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip.top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent transparent}.tooltip.bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent}.tooltip.left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a)}.tooltip.right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent}.tooltip[data-show=true]{display:flex}.tooltip[data-show=false]{display:none}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.custom-input-group{display:flex;flex-direction:column;width:100%;align-items:flex-start}.custom-input-group .input-label{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--bivo-payments-text, #000)}.custom-input-group .input-wrapper{width:100%;display:flex;align-items:center;position:relative;border:1px solid var(--bivo-payments-border, #e3e5e9);border-radius:3px;background-color:var(--bivo-payments-bg, #fff);height:44px;transition:border-color .2s;box-sizing:border-box}.custom-input-group .input-wrapper:focus-within{border-color:var(--bivo-payments-primary, #000)}.custom-input-group .input-wrapper.input-error{border-color:var(--bivo-payments-danger, #eb5757);background-color:var(--bivo-payments-secondary, #f8f8fa)}.custom-input-group .input-wrapper .styled-input{width:100%;padding:0 16px;border:none;background:transparent;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);outline:none;height:100%;color:var(--bivo-payments-text, #000);box-sizing:border-box}.custom-input-group .input-wrapper .styled-input::placeholder{color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6));font-size:14px}.custom-input-group .input-wrapper .styled-input:disabled{cursor:not-allowed;opacity:.6}.custom-input-group .input-wrapper[data-loading=true] .styled-input{cursor:progress;opacity:.8;background:linear-gradient(90deg,#888 40%,var(--bivo-payments-primary, #000000) 50%,#888 60%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 1.5s linear infinite}.custom-input-group .input-wrapper[data-loading=true] .input-loader{display:flex;align-items:center;justify-content:center;padding:0 8px;flex-shrink:0}.custom-input-group .input-wrapper[data-loading=true] .input-loader .loader{width:24px;aspect-ratio:2;--_g: no-repeat radial-gradient( circle closest-side, var(--bivo-payments-placeholder, #3c3c4399) 90%, transparent );background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:33.3333333333% 50%;animation:l3 1s infinite linear}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.custom-input-group .input-wrapper[data-loading=true] .input-loader[data-show=false]{display:none}.custom-input-group .input-wrapper .input-right-element{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6))}.custom-input-group .input-wrapper .input-right-element button,.custom-input-group .input-wrapper .input-right-element a{cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center}.custom-input-group .input-wrapper .input-right-element svg{display:block}.custom-input-group .error-message{padding:0;background-color:transparent;display:flex;align-items:center;gap:4px;color:var(--bivo-payments-danger, #eb5757);font-size:12px;margin-top:4px;font-weight:500}.custom-input-group .error-message[data-show=false]{display:none}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.add-card-form-wrapper .custom-modal{max-width:500px}.add-card-form-wrapper.non-modal{max-width:500px;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.add-card-form-wrapper.non-modal .non-modal-content{padding:12px 20px}.add-card-form-wrapper.non-modal .non-modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.add-card-form-wrapper.non-modal .non-modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn,.add-card-form-wrapper.non-modal .non-modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.add-card-form-wrapper.non-modal .non-modal-header .close-btn:hover,.add-card-form-wrapper.non-modal .non-modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn[data-show=false],.add-card-form-wrapper.non-modal .non-modal-header .back-btn[data-show=false]{visibility:hidden}.add-card-form-wrapper div.form-title{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper div.form-title p{margin:0}.add-card-form-wrapper div.form-title>div{display:flex;align-items:center;gap:4px;font-size:12px}.add-card-form-wrapper form{margin-top:16px;margin-bottom:32px;display:flex;flex-direction:column;gap:40px}.add-card-form-wrapper form div.inputs{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper form div.inputs .input-wrapper .input-right-element .input-success-icon{color:var(--bivo-payments-success, green)}.add-card-form-wrapper form div.input-row{display:flex;align-items:flex-start;flex-direction:row;gap:16px;margin:0!important}.add-card-form-wrapper form .submit-button-wrapper{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.add-card-form-wrapper form .submit-button-wrapper p.submit-error{margin:0;font-size:14px;display:flex;gap:6px;align-items:center;color:var(--bivo-payments-danger, #eb5757)}.add-card-form-wrapper form .submit-button-wrapper p.submit-error[data-show=false]{display:hidden}.recipient-form form{margin-bottom:16px}.recipient-form form .input-sections{display:flex;flex-direction:column;gap:16px}.recipient-form form .input-sections p.section-title{font-size:16px;font-weight:500;margin:0}.recipient-form form .input-sections div.section{display:flex;flex-direction:column;gap:20px}.custom-modal{border:none;border-radius:8px;padding:0;min-width:500px;box-shadow:0 10px 25px #0003;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.custom-modal[open]{animation:fadeIn .3s ease-out}.custom-modal::backdrop{background-color:var(--bivo-payments-bg-overlay, rgba(0, 0, 0, .35));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.custom-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.custom-modal .modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn,.custom-modal .modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.custom-modal .modal-header .close-btn:hover,.custom-modal .modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn[data-show=false],.custom-modal .modal-header .back-btn[data-show=false]{visibility:hidden}.custom-modal .modal-content{padding:12px 20px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-actions{padding:16px 24px;background-color:var(--bivo-payments-bg-secondary, #f9f9f9);display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--bivo-payments-secondary, #eee)}.custom-modal .modal-actions button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.custom-modal .modal-actions button.btn-secondary{background-color:var(--bivo-payments-secondary, #e0e0e0);color:var(--bivo-payments-secondary-text, #333)}.custom-modal .modal-actions button.btn-secondary:hover{background-color:var(--bivo-payments-secondary-hover, #d5d5d5)}.custom-modal .modal-actions button.btn-primary{background-color:var(--bivo-payments-info, #3b82f6);color:var(--bivo-payments-primary-text, white)}.custom-modal .modal-actions button.btn-primary:hover{background-color:var(--bivo-payments-info-hover, #2563eb)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
1
+ .custom-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);font-weight:600;border-radius:3px;outline:none;cursor:pointer;transition:all .2s;border:1px solid transparent;box-sizing:border-box;white-space:nowrap;width:100%}.custom-button .button-spinner{display:flex;align-items:center;animation:spin 1s linear infinite}.custom-button .button-spinner[data-show=false]{display:none}.custom-button .button-spinner svg{display:block}.custom-button .button-label{display:flex;align-items:center}.custom-button.small{height:36px;padding:0 16px;font-size:14px}.custom-button.medium{height:48px;padding:0 24px;font-size:16px}.custom-button.large{height:56px;padding:0 32px;font-size:18px}.custom-button.primary{background-color:var(--bivo-payments-primary, #000);color:var(--bivo-payments-primary-text, #fff);border-color:var(--bivo-payments-primary, #000)}.custom-button.primary:hover:not(.disabled){background-color:var(--bivo-payments-primary-hover, #333);border-color:var(--bivo-payments-primary-hover, #333)}.custom-button.primary:active:not(.disabled){background-color:var(--bivo-payments-primary-active, #1a1a1a);border-color:var(--bivo-payments-primary-active, #1a1a1a)}.custom-button.secondary{background-color:var(--bivo-payments-secondary, #f8f8fa);color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.secondary:hover:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-border-hover, #d1d3d9)}.custom-button.secondary:active:not(.disabled){background-color:var(--bivo-payments-secondary-active, #e3e5e9);border-color:var(--bivo-payments-border-active, #c1c3c9)}.custom-button.outline{background-color:transparent;color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.outline:hover:not(.disabled){background-color:var(--bivo-payments-secondary, #f8f8fa);border-color:var(--bivo-payments-text, #000)}.custom-button.outline:active:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-text, #000)}.custom-button.disabled,.custom-button:disabled{cursor:not-allowed;opacity:.5}.custom-button:focus-visible{outline:2px solid var(--bivo-payments-primary, #000);outline-offset:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-trigger{display:inline-flex;cursor:help}.tooltip-wrapper{display:flex;justify-content:center;align-items:center}.tooltip{position:fixed;z-index:9999;background-color:var(--bivo-payments-tooltip-bg, #1a1a1a);color:var(--bivo-payments-tooltip-text, #fff);border-radius:4px;padding:8px 12px;font-size:14px;line-height:1.4;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltipFadeIn .2s ease-in-out forwards;align-items:center}.tooltip .tooltip-content{position:relative;z-index:1}.tooltip .tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip.top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent transparent}.tooltip.bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent}.tooltip.left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a)}.tooltip.right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent}.tooltip[data-show=true]{display:flex}.tooltip[data-show=false]{display:none}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.custom-input-group{display:flex;flex-direction:column;width:100%;align-items:flex-start}.custom-input-group .input-label{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--bivo-payments-text, #000)}.custom-input-group .input-wrapper{width:100%;display:flex;align-items:center;position:relative;border:1px solid var(--bivo-payments-border, #e3e5e9);border-radius:3px;background-color:var(--bivo-payments-bg, #fff);height:44px;transition:border-color .2s;box-sizing:border-box}.custom-input-group .input-wrapper:focus-within{border-color:var(--bivo-payments-primary, #000)}.custom-input-group .input-wrapper.input-error{border-color:var(--bivo-payments-danger, #eb5757);background-color:var(--bivo-payments-secondary, #f8f8fa)}.custom-input-group .input-wrapper .styled-input{width:100%;padding:0 16px;border:none;background:transparent;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);outline:none;height:100%;color:var(--bivo-payments-text, #000);box-sizing:border-box}.custom-input-group .input-wrapper .styled-input::placeholder{color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6));font-size:14px}.custom-input-group .input-wrapper .styled-input:disabled{cursor:not-allowed;opacity:.6}.custom-input-group .input-wrapper[data-loading=true] .styled-input{cursor:progress;opacity:.8;background:linear-gradient(90deg,#888 40%,var(--bivo-payments-primary, #000000) 50%,#888 60%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 1.5s linear infinite}.custom-input-group .input-wrapper[data-loading=true] .input-loader{display:flex;align-items:center;justify-content:center;padding:0 8px;flex-shrink:0}.custom-input-group .input-wrapper[data-loading=true] .input-loader .loader{width:24px;aspect-ratio:2;--_g: no-repeat radial-gradient( circle closest-side, var(--bivo-payments-placeholder, #3c3c4399) 90%, transparent );background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:33.3333333333% 50%;animation:l3 1s infinite linear}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.custom-input-group .input-wrapper[data-loading=true] .input-loader[data-show=false]{display:none}.custom-input-group .input-wrapper .input-right-element{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6))}.custom-input-group .input-wrapper .input-right-element button,.custom-input-group .input-wrapper .input-right-element a{cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center}.custom-input-group .input-wrapper .input-right-element svg{display:block}.custom-input-group .error-message{padding:0;background-color:transparent;display:flex;align-items:center;gap:4px;color:var(--bivo-payments-danger, #eb5757);font-size:12px;margin-top:4px;font-weight:500}.custom-input-group .error-message[data-show=false]{display:none}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.add-card-form-wrapper .custom-modal{max-width:500px}.add-card-form-wrapper.non-modal{max-width:500px;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.add-card-form-wrapper.non-modal .non-modal-content{padding:12px 20px}.add-card-form-wrapper.non-modal .non-modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.add-card-form-wrapper.non-modal .non-modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn,.add-card-form-wrapper.non-modal .non-modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.add-card-form-wrapper.non-modal .non-modal-header .close-btn:hover,.add-card-form-wrapper.non-modal .non-modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn[data-show=false],.add-card-form-wrapper.non-modal .non-modal-header .back-btn[data-show=false]{visibility:hidden}.add-card-form-wrapper div.form-title{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper div.form-title p{margin:0}.add-card-form-wrapper div.form-title>div{display:flex;align-items:center;gap:4px;font-size:12px}.add-card-form-wrapper form{margin-top:16px;margin-bottom:32px;display:flex;flex-direction:column;gap:40px}.add-card-form-wrapper form div.inputs{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper form div.inputs .input-wrapper .input-right-element .input-success-icon{color:var(--bivo-payments-success, green)}.add-card-form-wrapper form div.input-row{display:flex;align-items:flex-start;flex-direction:row;gap:16px;margin:0!important}.add-card-form-wrapper form .submit-button-wrapper{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.add-card-form-wrapper form .submit-button-wrapper p.submit-error{margin:0;font-size:14px;display:flex;gap:6px;align-items:center;color:var(--bivo-payments-danger, #eb5757)}.add-card-form-wrapper form .submit-button-wrapper p.submit-error[data-show=false]{display:none}.recipient-form form{margin-bottom:16px}.recipient-form form .input-sections{display:flex;flex-direction:column;gap:16px}.recipient-form form .input-sections p.section-title{font-size:16px;font-weight:500;margin:0}.recipient-form form .input-sections div.section{display:flex;flex-direction:column;gap:20px}.custom-modal{border:none;border-radius:8px;padding:0;min-width:500px;box-shadow:0 10px 25px #0003;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.custom-modal[open]{animation:fadeIn .3s ease-out}.custom-modal::backdrop{background-color:var(--bivo-payments-bg-overlay, rgba(0, 0, 0, .35));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.custom-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.custom-modal .modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn,.custom-modal .modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.custom-modal .modal-header .close-btn:hover,.custom-modal .modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn[data-show=false],.custom-modal .modal-header .back-btn[data-show=false]{visibility:hidden}.custom-modal .modal-content{padding:12px 20px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-actions{padding:16px 24px;background-color:var(--bivo-payments-bg-secondary, #f9f9f9);display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--bivo-payments-secondary, #eee)}.custom-modal .modal-actions button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.custom-modal .modal-actions button.btn-secondary{background-color:var(--bivo-payments-secondary, #e0e0e0);color:var(--bivo-payments-secondary-text, #333)}.custom-modal .modal-actions button.btn-secondary:hover{background-color:var(--bivo-payments-secondary-hover, #d5d5d5)}.custom-modal .modal-actions button.btn-primary{background-color:var(--bivo-payments-info, #3b82f6);color:var(--bivo-payments-primary-text, white)}.custom-modal .modal-actions button.btn-primary:hover{background-color:var(--bivo-payments-info-hover, #2563eb)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@test-glide/glide-payment",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.es.js",