@odus/checkout 0.30.0-beta.2 → 0.30.0-beta.4

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 (9) hide show
  1. package/dist/checkout.d.ts +1 -0
  2. package/dist/checkout.d.ts.map +1 -1
  3. package/dist/checkout.es.js +716 -690
  4. package/dist/elements.es.js +24 -16
  5. package/dist/index.css +1 -1
  6. package/dist/package.json +6 -1
  7. package/dist/phone.js +1437 -1420
  8. package/dist/shared.js +1655 -1584
  9. package/package.json +6 -1
package/dist/elements.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as a, I as m, S as y, g as C, b as g, A as E, F as k, i as z, a as c, f as N, J as P, E as S, m as x, P as F, h as R, y as A, o as V, p as M, j as B } from "./shared.js";
1
+ import { o as a, I as m, S as y, g as C, e as g, A as E, F as k, j as z, a as c, f as N, J as P, E as S, n as x, P as F, i as R, z as A, p as V, q as M, k as B } from "./shared.js";
2
2
  const l = ".form-helper-text{color:#dc2727;font-family:var(--odus-font-family, inherit);font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}", h = ".input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-size:var(--odus-input-font-size, 16px);font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}", u = ".input-label{font-family:var(--odus-font-family, inherit);font-size:var(--odus-label-font-size, 14px);font-weight:var(--odus-label-font-weight, 400);color:var(--odus-label-color, var(--odus-color-text, #1a1a1a));letter-spacing:var(--odus-label-letter-spacing, normal);line-height:var(--odus-label-line-height, 1.4);margin-bottom:var(--odus-label-margin-bottom, 6px)}", I = ":host{--odus-font-family: system-ui, sans-serif;--odus-font-size: 16px;--odus-color-error: #dc2727;--odus-color-text: #1a1a1a;--odus-color-background: #ffffff;--odus-border-color: #e0e0e0;--odus-border-radius: 6px;--odus-spacing-sm: 8px;--odus-spacing-md: 16px;--odus-spacing-lg: 24px;--odus-input-height: 44px;--odus-input-padding: 8px 12px;--odus-input-font-size: var(--odus-font-size);--odus-input-font-weight: 400;--odus-input-letter-spacing: .02em;--odus-input-line-height: 1.5;--odus-input-placeholder-color: #717173;--odus-input-placeholder-opacity: .3;--odus-input-focus-shadow: 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3);--odus-label-font-size: 14px;--odus-label-font-weight: 400;--odus-label-color: var(--odus-color-text);--odus-label-letter-spacing: normal;--odus-label-line-height: 1.4;--odus-label-margin-bottom: 6px;--odus-card-gap: 12px;--odus-button-height: 48px;--odus-button-border-radius: var(--odus-border-radius)}.form-input{opacity:1;font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:var( --odus-input-focus-shadow, 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3) );position:relative;z-index:2}.input-label{font-family:var(--odus-font-family, inherit)!important;font-size:var(--odus-label-font-size, 14px)!important;font-weight:var(--odus-label-font-weight, 400)!important;color:var(--odus-label-color, var(--odus-color-text, #1a1a1a))!important;letter-spacing:var(--odus-label-letter-spacing, normal)!important;line-height:var(--odus-label-line-height, 1.4)!important;margin-bottom:var(--odus-label-margin-bottom, 6px)!important}.form-helper-text{font-family:var(--odus-font-family, inherit)!important}";
3
3
  class d {
4
4
  shadowRoot = null;
@@ -331,7 +331,7 @@ class q extends d {
331
331
  }
332
332
  }
333
333
  const b = /* @__PURE__ */ new Set(["US", "CA"]);
334
- class D extends d {
334
+ class O extends d {
335
335
  _value = "";
336
336
  _country = "";
337
337
  _input = null;
@@ -433,7 +433,7 @@ class D extends d {
433
433
  return null;
434
434
  }
435
435
  }
436
- class O extends d {
436
+ class D extends d {
437
437
  _value = "";
438
438
  _error = null;
439
439
  _input = null;
@@ -448,8 +448,14 @@ class O extends d {
448
448
  placeholder: e("address.placeholder.street"),
449
449
  value: this._value,
450
450
  autocomplete: "street-address",
451
+ maxLength: this.options.maxLength,
451
452
  onChange: (t) => {
452
- this._value = t.target.value, this._error = null, this.emit("change", this._value);
453
+ if (this._value = t.target.value, this._error = null, this.options.maxLength && this._value.length >= this.options.maxLength) {
454
+ const r = e("validation.maxLengthExceeded");
455
+ this._error = r.replace("{{max}}", String(this.options.maxLength)), this._input?.setError(!0, this._error);
456
+ } else
457
+ this._input?.setError(!1);
458
+ this.emit("change", this._value);
453
459
  }
454
460
  }), this._input.addEventListener("blur", () => {
455
461
  const { t } = a();
@@ -644,7 +650,7 @@ class U extends d {
644
650
  return null;
645
651
  }
646
652
  }
647
- const G = '.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:18px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.vgs-card-group{transition:box-shadow .1s ease-in}.vgs-card-group-focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.vgs-card-group-error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #00000012,0 1px 1.5px #0000000d}.vgs-wrap{box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;transition:box-shadow .1s ease-in}.vgs-wrap-focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d!important}.vgs-wrap-error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #00000012,0 1px 1.5px #0000000d}.fake-ph{position:absolute;inset:0;display:flex;align-items:center;padding:8px 12px;color:#717173;opacity:.3;font-size:var(--odus-input-font-size, 16px);font-weight:400;letter-spacing:.02em;line-height:1.5;font-family:var(--odus-font-family, inherit);background:#fff;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}@keyframes vgs-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.vgs-field-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;animation:vgs-shimmer 1.5s ease-in-out infinite;pointer-events:none;z-index:11;border-radius:inherit}', J = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvWpIQFjQQCPpaIlJKpegirp5kLkzLB1AxHmnLk73D3TJbAGqr1QmlsWDBtMPMRpdzzUM7ZwX3kzhIuATV4Pe7RKp3nZlVmcrT0YCQXBrTwqZNh775z58GP2kZs+gVfNqBampJPzSB/hB62KkByhECn6grrRjiAVwJyZVEvs/2vrxaEpO+aE16emtX12RgI5JdzdOiNyZEQteU6zRBRJEocPWVxExaOpVVVJ5+UnW0LcalzA+lRGRTrQJ5JguAPiAOzRPTK/lYFFpCAl/F8wtoAVG1c8zO2NcQ0Pko+fmeidRFxJ/did2btV+9Mkze3mBphwFmvnxa35LF+Cs/XJHDwIDAQAB", H = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkWH/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8KinLdxwbqZmHwrE9cFhCaHbG/E0PbqQGhXP2vbniZTT4M0i0Cbi7ES3Bw5zqNbIZZnX041QEpxLvIyWPKZCX+fBogNMhWfCF779aclChjHkwZMsufThVWE9xklWGxXiytx5aL4I5JPxq0I7cAkZGGs4aF/GxWwPaq7R3wPikJQ0YHnCMfcURzl2Hnw/inqyMy+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhVyQIDAQAB", W = {
653
+ const G = '.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:18px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.vgs-card-group iframe,.vgs-wrap iframe{width:100%;min-width:0;display:block}.fake-ph{position:absolute;inset:0;display:flex;align-items:center;padding:8px 12px;color:#717173;opacity:.3;font-size:var(--odus-input-font-size, 16px);font-weight:400;letter-spacing:.02em;line-height:1.5;font-family:var(--odus-font-family, inherit);background:#fff;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}@keyframes vgs-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.vgs-field-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;animation:vgs-shimmer 1.5s ease-in-out infinite;pointer-events:none;z-index:11;border-radius:inherit}', J = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvWpIQFjQQCPpaIlJKpegirp5kLkzLB1AxHmnLk73D3TJbAGqr1QmlsWDBtMPMRpdzzUM7ZwX3kzhIuATV4Pe7RKp3nZlVmcrT0YCQXBrTwqZNh775z58GP2kZs+gVfNqBampJPzSB/hB62KkByhECn6grrRjiAVwJyZVEvs/2vrxaEpO+aE16emtX12RgI5JdzdOiNyZEQteU6zRBRJEocPWVxExaOpVVVJ5+UnW0LcalzA+lRGRTrQJ5JguAPiAOzRPTK/lYFFpCAl/F8wtoAVG1c8zO2NcQ0Pko+fmeidRFxJ/did2btV+9Mkze3mBphwFmvnxa35LF+Cs/XJHDwIDAQAB", H = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkWH/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8KinLdxwbqZmHwrE9cFhCaHbG/E0PbqQGhXP2vbniZTT4M0i0Cbi7ES3Bw5zqNbIZZnX041QEpxLvIyWPKZCX+fBogNMhWfCF779aclChjHkwZMsufThVWE9xklWGxXiytx5aL4I5JPxq0I7cAkZGGs4aF/GxWwPaq7R3wPikJQ0YHnCMfcURzl2Hnw/inqyMy+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhVyQIDAQAB", W = {
648
654
  name: "odus-elements",
649
655
  styles: {
650
656
  fontSize: 14,
@@ -1218,6 +1224,7 @@ class ue {
1218
1224
  _config;
1219
1225
  _apiService;
1220
1226
  _changeListeners = [];
1227
+ _callbacks;
1221
1228
  _paymentState = {};
1222
1229
  _fontCleanup;
1223
1230
  _card;
@@ -1236,7 +1243,7 @@ class ue {
1236
1243
  _error;
1237
1244
  elements;
1238
1245
  constructor(e) {
1239
- this._config = e, e.locale && A.setLocale(e.locale), this._apiService = new V(
1246
+ this._config = e, this._callbacks = { ...e.callbacks }, e.locale && A.setLocale(e.locale), this._apiService = new V(
1240
1247
  e.apiKey,
1241
1248
  e.environment
1242
1249
  );
@@ -1269,7 +1276,7 @@ class ue {
1269
1276
  });
1270
1277
  const o = {};
1271
1278
  Object.defineProperty(o, "street", {
1272
- get: () => (this._addressStreet || (this._addressStreet = new O(), this._trackElement(this._addressStreet)), this._addressStreet),
1279
+ get: () => (this._addressStreet || (this._addressStreet = new D(), this._trackElement(this._addressStreet)), this._addressStreet),
1273
1280
  enumerable: !0
1274
1281
  }), Object.defineProperty(o, "firstName", {
1275
1282
  get: () => (this._addressFirstName || (this._addressFirstName = new j(), this._trackElement(this._addressFirstName)), this._addressFirstName),
@@ -1281,7 +1288,7 @@ class ue {
1281
1288
  get: () => (this._addressCity || (this._addressCity = new L(), this._trackElement(this._addressCity)), this._addressCity),
1282
1289
  enumerable: !0
1283
1290
  }), Object.defineProperty(o, "state", {
1284
- get: () => (this._addressState || (this._addressState = new D(), this._trackElement(this._addressState)), this._addressState),
1291
+ get: () => (this._addressState || (this._addressState = new O(), this._trackElement(this._addressState)), this._addressState),
1285
1292
  enumerable: !0
1286
1293
  }), Object.defineProperty(o, "zipCode", {
1287
1294
  get: () => (this._addressZipCode || (this._addressZipCode = new Z(), this._trackElement(this._addressZipCode)), this._addressZipCode),
@@ -1409,6 +1416,9 @@ class ue {
1409
1416
  destroy() {
1410
1417
  this._fontCleanup?.(), this._card?.destroy(), this._email?.destroy(), this._phone?.destroy(), this._addressStreet?.destroy(), this._addressFirstName?.destroy(), this._addressLastName?.destroy(), this._cardholderName?.destroy(), this._addressCity?.destroy(), this._addressState?.destroy(), this._addressZipCode?.destroy(), this._addressCountry?.destroy(), this._applePay?.destroy(), this._paypal?.destroy(), this._error?.destroy(), this._changeListeners.length = 0;
1411
1418
  }
1419
+ setCallbacks(e) {
1420
+ Object.assign(this._callbacks, e);
1421
+ }
1412
1422
  _trackElement(e) {
1413
1423
  e.on("change", () => {
1414
1424
  for (const t of this._changeListeners)
@@ -1454,22 +1464,20 @@ class ue {
1454
1464
  }
1455
1465
  _handlePaymentResponse(e) {
1456
1466
  if (e.latestTransaction.status === "authorized") {
1457
- this._config.callbacks?.onPaymentSucceeded?.(
1467
+ this._callbacks.onPaymentSucceeded?.(
1458
1468
  e.latestTransaction.status
1459
1469
  );
1460
1470
  return;
1461
1471
  }
1462
1472
  if (e.latestTransaction.status === "failed") {
1463
- this._config.callbacks?.onPaymentFailed?.(
1464
- e.latestTransaction.status
1465
- );
1473
+ this._callbacks.onPaymentFailed?.(e.latestTransaction.status);
1466
1474
  return;
1467
1475
  }
1468
- e.status === "requires_action" && this._config.callbacks?.onActionRequired?.(e.action.redirectUrl);
1476
+ e.status === "requires_action" && this._callbacks.onActionRequired?.(e.action.redirectUrl);
1469
1477
  }
1470
1478
  _handleAuthorizationError(e) {
1471
1479
  const t = e.details?.message ?? "Payment failed";
1472
- this._config.callbacks?.onPaymentFailed?.(t), this._error?.isMounted && this._error.setError(t);
1480
+ this._callbacks.onPaymentFailed?.(t), this._error?.isMounted && this._error.setError(t);
1473
1481
  }
1474
1482
  }
1475
1483
  export {
@@ -1477,8 +1485,8 @@ export {
1477
1485
  T as AddressCountryElement,
1478
1486
  j as AddressFirstNameElement,
1479
1487
  q as AddressLastNameElement,
1480
- D as AddressStateElement,
1481
- O as AddressStreetElement,
1488
+ O as AddressStateElement,
1489
+ D as AddressStreetElement,
1482
1490
  Z as AddressZipCodeElement,
1483
1491
  U as ApplePayElement,
1484
1492
  d as BaseElement,
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-size:var(--odus-input-font-size, 16px);font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}.form-helper-text{color:#dc2727;font-family:var(--odus-font-family, inherit);font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{font-family:var(--odus-font-family, inherit);font-size:var(--odus-label-font-size, 14px);font-weight:var(--odus-label-font-weight, 400);color:var(--odus-label-color, var(--odus-color-text, #1a1a1a));letter-spacing:var(--odus-label-letter-spacing, normal);line-height:var(--odus-label-line-height, 1.4);margin-bottom:var(--odus-label-margin-bottom, 6px)}.form-select{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 32px 8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23717173' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.form-select-error{color:#dc2727}.form-select-placeholder{color:#d4d4d5}.form-select option[disabled]{color:#717173;opacity:.5}.form-select:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:18px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.vgs-card-group{transition:box-shadow .1s ease-in}.vgs-card-group-focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.vgs-card-group-error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #00000012,0 1px 1.5px #0000000d}.vgs-wrap{box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;transition:box-shadow .1s ease-in}.vgs-wrap-focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d!important}.vgs-wrap-error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #00000012,0 1px 1.5px #0000000d}.fake-ph{position:absolute;inset:0;display:flex;align-items:center;padding:8px 12px;color:#717173;opacity:.3;font-size:var(--odus-input-font-size, 16px);font-weight:400;letter-spacing:.02em;line-height:1.5;font-family:var(--odus-font-family, inherit);background:#fff;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}@keyframes vgs-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.vgs-field-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;animation:vgs-shimmer 1.5s ease-in-out infinite;pointer-events:none;z-index:11;border-radius:inherit}apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-family:var(--odus-font-family, inherit);font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.form-container{display:flex;flex-direction:column;gap:16px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.card-details>*{flex:1;min-width:0}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}.address-section{display:flex;flex-direction:column;gap:6px}.address-section-title{font-size:14px;font-weight:600;margin:0;padding:0}.address-same-as-billing{display:flex;align-items:center;gap:4px;cursor:pointer}.address-same-as-billing input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.address-same-as-billing .checkbox-icon{width:24px;height:24px;flex-shrink:0;cursor:pointer}.address-same-as-billing .checkbox-icon .checkbox-checked{display:none}.address-same-as-billing .checkbox-icon .checkbox-unchecked{display:block}.address-same-as-billing input[type=checkbox]:checked+.checkbox-icon .checkbox-checked{display:block}.address-same-as-billing input[type=checkbox]:checked+.checkbox-icon .checkbox-unchecked{display:none}.address-same-as-billing label{font-size:14px;cursor:pointer}.address-fields{display:flex;flex-direction:column;gap:0;transition:opacity .2s ease}.address-fields--ungrouped{gap:16px}.address-row{display:flex;gap:0}.address-row-single{width:100%}.address-row-single>*{flex:1}.address-row-double{width:100%}.address-row-double>*{flex:1;min-width:0}.payment-methods{display:flex;flex-direction:column;gap:12px}.skeleton-container{display:flex;flex-direction:column;gap:12px;padding:4px;position:relative;height:49px;max-width:100%;text-align:left;inset:0;width:100%}.skeleton{background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s ease-in-out infinite;position:relative;overflow:hidden}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-field{display:flex;flex-direction:column;gap:8px}.skeleton-label{height:16px;width:80px;border-radius:4px}.skeleton-input,.skeleton-payment-method{height:35px;width:100%;border-radius:8px}.skeleton-card-row{display:flex;gap:12px}.skeleton-card-row .skeleton-field{flex:1}.skeleton-submit-button{height:35px;width:100%;border-radius:8px}.skeleton-separator-text{height:14px;width:100px;border-radius:4px}.payment-separator_container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}.payment-separator{width:100%;display:flex;align-items:center;justify-content:space-between;margin:0 0 -8px}.payment-separator__line{height:1.3px;flex-grow:1;background:#9f9f9f}.payment-separator__text{font-size:14px;color:#0d0d0d;padding:0 16px;margin:0;font-weight:400}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3.5px);backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border-radius:50%;background:conic-gradient(from 270deg,#134e4a 0deg,#0f766e 90deg,#0d9488 180deg,#5eaba3 240deg,rgba(13,148,136,.2) 300deg,transparent 330deg);animation:spin 1s linear infinite;position:relative}.loader:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}@keyframes spin{to{transform:rotate(360deg)}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.country-dial-code-dropdown{position:relative;display:inline-block}.country-dial-code-trigger{display:flex;align-items:center;gap:6px;padding:var(--odus-input-padding, 8px 12px);padding-right:8px;background:#fff;border:none;cursor:pointer;font-weight:400;letter-spacing:.02em;line-height:var(--odus-input-line-height, 1.5);transition:all .1s ease-in;white-space:nowrap;border-right:1px solid #e0e0e0;box-sizing:border-box}.country-dial-code-trigger:hover{background:#f5f5f5}.country-dial-code-trigger:focus{outline:none}.country-dial-code-trigger .country-flag{font-size:14px;line-height:1}.country-dial-code-trigger .country-chevron{color:#717173;flex-shrink:0;transition:transform .15s ease}.country-dial-code-trigger[aria-expanded=true] .country-chevron{transform:rotate(180deg)}.country-dial-code-panel{position:fixed;top:0;left:0;z-index:10000;width:280px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px #0000000d,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:360px;display:flex;flex-direction:column;overflow:hidden}.country-dial-code-panel.hidden{display:none}.country-search-wrapper{padding:12px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.country-search{width:100%;padding:6px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:inherit;font-family:inherit;outline:none;transition:all .1s ease-in;box-sizing:border-box}.country-search:focus{border-color:#3297d3b3;box-shadow:0 0 0 3px #3297d31a}.country-search::placeholder{color:#717173;opacity:.6}.countries-list{overflow-y:auto;flex:1;min-height:0}.countries-list::-webkit-scrollbar{width:8px}.countries-list::-webkit-scrollbar-track{background:#f5f5f5}.countries-list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:4px}.countries-list::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.country-group-header{padding:8px 16px 4px;font-size:12px;font-weight:600;color:#717173;text-transform:uppercase;letter-spacing:.05em;background:#fafafa;position:sticky;top:0;z-index:1}.country-item{display:flex;align-items:center;gap:12px;padding:10px 16px;width:100%;border:none;background:#fff;cursor:pointer;transition:background .1s ease;text-align:left;font-size:14px;font-family:inherit;color:inherit}.country-item:hover{background:#f5f5f5}.country-item.selected{background:#3297d314;color:#3297d3}.country-item:focus{outline:none;background:#f0f0f0}.country-item .country-flag{font-size:20px;line-height:1;flex-shrink:0}.country-item .country-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.country-item .country-dial-code{color:#717173;font-size:.95em;flex-shrink:0}.country-item.selected .country-dial-code{color:#3297d3cc}.no-results{padding:24px 16px;text-align:center;color:#717173;font-size:14px}.phone-number-field-wrapper{display:flex;width:100%}.phone-number-field-container{display:flex;align-items:center;width:100%;border-radius:inherit;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;position:relative}.phone-number-field-container.focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.phone-number-field-container.error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #dc27271a}.phone-number-field-container.error.focused{box-shadow:0 0 0 1px #dc2727,0 1px 1px #00000012,0 0 0 4px #dc272733}.phone-number-field-container .country-select-wrapper{flex-shrink:0;position:relative;display:flex;align-items:center;gap:4px;padding:var(--odus-input-padding, 8px 12px);padding-right:6px;background:transparent;border-top-left-radius:var(--phone-border-radius, 0px);border-bottom-left-radius:var(--phone-border-radius, 0px);white-space:nowrap}.phone-number-field-container .country-select-wrapper .country-flag{font-size:14px;line-height:1;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-chevron{display:flex;align-items:center;color:#717173;flex-shrink:0;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-select{position:absolute;inset:0;border:none;outline:none;background:transparent;cursor:pointer;opacity:0;width:100%;height:100%}.phone-number-field-container .phone-input-wrapper{flex:1;min-width:0}.phone-number-field-container .phone-input-wrapper .form-input{border:none;box-shadow:none;border-radius:0;border-top-right-radius:var(--phone-border-radius, 0px);border-bottom-right-radius:var(--phone-border-radius, 0px);padding:var(--odus-input-padding, 8px 2px)}.phone-number-field-container .phone-input-wrapper .form-input:focus{box-shadow:none;z-index:auto}
1
+ .input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-size:var(--odus-input-font-size, 16px);font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}.form-helper-text{color:#dc2727;font-family:var(--odus-font-family, inherit);font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{font-family:var(--odus-font-family, inherit);font-size:var(--odus-label-font-size, 14px);font-weight:var(--odus-label-font-weight, 400);color:var(--odus-label-color, var(--odus-color-text, #1a1a1a));letter-spacing:var(--odus-label-letter-spacing, normal);line-height:var(--odus-label-line-height, 1.4);margin-bottom:var(--odus-label-margin-bottom, 6px)}.form-select{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 32px 8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23717173' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.form-select-error{color:#dc2727}.form-select-placeholder{color:#d4d4d5}.form-select option[disabled]{color:#717173;opacity:.5}.form-select:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:18px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.vgs-card-group iframe,.vgs-wrap iframe{width:100%;min-width:0;display:block}.fake-ph{position:absolute;inset:0;display:flex;align-items:center;padding:8px 12px;color:#717173;opacity:.3;font-size:var(--odus-input-font-size, 16px);font-weight:400;letter-spacing:.02em;line-height:1.5;font-family:var(--odus-font-family, inherit);background:#fff;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}@keyframes vgs-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.vgs-field-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;animation:vgs-shimmer 1.5s ease-in-out infinite;pointer-events:none;z-index:11;border-radius:inherit}apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-family:var(--odus-font-family, inherit);font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.form-container{display:flex;flex-direction:column;gap:16px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.card-details>*{flex:1;min-width:0}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}.address-section{display:flex;flex-direction:column;gap:6px}.address-section-title{font-size:14px;font-weight:600;margin:0;padding:0}.address-same-as-billing{display:flex;align-items:center;gap:4px;cursor:pointer}.address-same-as-billing input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.address-same-as-billing .checkbox-icon{width:24px;height:24px;flex-shrink:0;cursor:pointer}.address-same-as-billing .checkbox-icon .checkbox-checked{display:none}.address-same-as-billing .checkbox-icon .checkbox-unchecked{display:block}.address-same-as-billing input[type=checkbox]:checked+.checkbox-icon .checkbox-checked{display:block}.address-same-as-billing input[type=checkbox]:checked+.checkbox-icon .checkbox-unchecked{display:none}.address-same-as-billing label{font-size:14px;cursor:pointer}.address-fields{display:flex;flex-direction:column;gap:0;transition:opacity .2s ease}.address-fields--ungrouped{gap:16px}.address-row{display:flex;gap:0}.address-row-single{width:100%}.address-row-single>*{flex:1}.address-row-double{width:100%}.address-row-double>*{flex:1;min-width:0}.payment-methods{display:flex;flex-direction:column;gap:12px}.skeleton-container{display:flex;flex-direction:column;gap:12px;padding:4px;position:relative;height:49px;max-width:100%;text-align:left;inset:0;width:100%}.skeleton{background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s ease-in-out infinite;position:relative;overflow:hidden}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-field{display:flex;flex-direction:column;gap:8px}.skeleton-label{height:16px;width:80px;border-radius:4px}.skeleton-input,.skeleton-payment-method{height:35px;width:100%;border-radius:8px}.skeleton-card-row{display:flex;gap:12px}.skeleton-card-row .skeleton-field{flex:1}.skeleton-submit-button{height:35px;width:100%;border-radius:8px}.skeleton-separator-text{height:14px;width:100px;border-radius:4px}.payment-separator_container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}.payment-separator{width:100%;display:flex;align-items:center;justify-content:space-between;margin:0 0 -8px}.payment-separator__line{height:1.3px;flex-grow:1;background:#9f9f9f}.payment-separator__text{font-size:14px;color:#0d0d0d;padding:0 16px;margin:0;font-weight:400}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3.5px);backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border-radius:50%;background:conic-gradient(from 270deg,#134e4a 0deg,#0f766e 90deg,#0d9488 180deg,#5eaba3 240deg,rgba(13,148,136,.2) 300deg,transparent 330deg);animation:spin 1s linear infinite;position:relative}.loader:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}@keyframes spin{to{transform:rotate(360deg)}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.country-dial-code-dropdown{position:relative;display:inline-block}.country-dial-code-trigger{display:flex;align-items:center;gap:6px;padding:var(--odus-input-padding, 8px 12px);padding-right:8px;background:#fff;border:none;cursor:pointer;font-weight:400;letter-spacing:.02em;line-height:var(--odus-input-line-height, 1.5);transition:all .1s ease-in;white-space:nowrap;border-right:1px solid #e0e0e0;box-sizing:border-box}.country-dial-code-trigger:hover{background:#f5f5f5}.country-dial-code-trigger:focus{outline:none}.country-dial-code-trigger .country-flag{font-size:14px;line-height:1}.country-dial-code-trigger .country-chevron{color:#717173;flex-shrink:0;transition:transform .15s ease}.country-dial-code-trigger[aria-expanded=true] .country-chevron{transform:rotate(180deg)}.country-dial-code-panel{position:fixed;top:0;left:0;z-index:10000;width:280px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px #0000000d,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:360px;display:flex;flex-direction:column;overflow:hidden}.country-dial-code-panel.hidden{display:none}.country-search-wrapper{padding:12px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.country-search{width:100%;padding:6px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:inherit;font-family:inherit;outline:none;transition:all .1s ease-in;box-sizing:border-box}.country-search:focus{border-color:#3297d3b3;box-shadow:0 0 0 3px #3297d31a}.country-search::placeholder{color:#717173;opacity:.6}.countries-list{overflow-y:auto;flex:1;min-height:0}.countries-list::-webkit-scrollbar{width:8px}.countries-list::-webkit-scrollbar-track{background:#f5f5f5}.countries-list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:4px}.countries-list::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.country-group-header{padding:8px 16px 4px;font-size:12px;font-weight:600;color:#717173;text-transform:uppercase;letter-spacing:.05em;background:#fafafa;position:sticky;top:0;z-index:1}.country-item{display:flex;align-items:center;gap:12px;padding:10px 16px;width:100%;border:none;background:#fff;cursor:pointer;transition:background .1s ease;text-align:left;font-size:14px;font-family:inherit;color:inherit}.country-item:hover{background:#f5f5f5}.country-item.selected{background:#3297d314;color:#3297d3}.country-item:focus{outline:none;background:#f0f0f0}.country-item .country-flag{font-size:20px;line-height:1;flex-shrink:0}.country-item .country-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.country-item .country-dial-code{color:#717173;font-size:.95em;flex-shrink:0}.country-item.selected .country-dial-code{color:#3297d3cc}.no-results{padding:24px 16px;text-align:center;color:#717173;font-size:14px}.phone-number-field-wrapper{display:flex;width:100%}.phone-number-field-container{display:flex;align-items:center;width:100%;border-radius:inherit;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;position:relative}.phone-number-field-container.focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.phone-number-field-container.error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #dc27271a}.phone-number-field-container.error.focused{box-shadow:0 0 0 1px #dc2727,0 1px 1px #00000012,0 0 0 4px #dc272733}.phone-number-field-container .country-select-wrapper{flex-shrink:0;position:relative;display:flex;align-items:center;gap:4px;padding:var(--odus-input-padding, 8px 12px);padding-right:6px;background:transparent;border-top-left-radius:var(--phone-border-radius, 0px);border-bottom-left-radius:var(--phone-border-radius, 0px);white-space:nowrap}.phone-number-field-container .country-select-wrapper .country-flag{font-size:14px;line-height:1;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-chevron{display:flex;align-items:center;color:#717173;flex-shrink:0;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-select{position:absolute;inset:0;border:none;outline:none;background:transparent;cursor:pointer;opacity:0;width:100%;height:100%}.phone-number-field-container .phone-input-wrapper{flex:1;min-width:0}.phone-number-field-container .phone-input-wrapper .form-input{border:none;box-shadow:none;border-radius:0;border-top-right-radius:var(--phone-border-radius, 0px);border-bottom-right-radius:var(--phone-border-radius, 0px);padding:var(--odus-input-padding, 8px 2px)}.phone-number-field-container .phone-input-wrapper .form-input:focus{box-shadow:none;z-index:auto}
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odus/checkout",
3
- "version": "0.30.0-beta.2",
3
+ "version": "0.30.0-beta.4",
4
4
  "displayName": "Odus Checkout SDK",
5
5
  "keywords": [
6
6
  "odus",
@@ -36,6 +36,11 @@
36
36
  },
37
37
  "nx": {
38
38
  "targets": {
39
+ "vite:build": {
40
+ "dependsOn": [
41
+ "^build"
42
+ ]
43
+ },
39
44
  "test": {
40
45
  "cache": true,
41
46
  "inputs": [