@wix/form-elements 1.63.0 → 1.64.0

package/dist/component/{payment-input-rac-CZdOAjK4.js → payment-input-rac-COydWmUE.js}

@@ -1,17 +1,17 @@
-import r, { useCallback as V, useRef as Q } from "react";
-import { RicosViewer as w } from "@wix/ricos/viewer";
+import r, { useCallback as V, useRef as J } from "react";
+import { RicosViewer as Q } from "@wix/ricos/viewer";
 import i from "classnames";
-import { TextField as z, Group as J, Input as K } from "react-aria-components";
-import { ah as D, ae as S, ab as x, ar as W, aj as X } from "./form-DzjdnO7t.js";
+import { TextField as w, Group as z, Input as K } from "react-aria-components";
+import { ai as D, af as S, ab as x, as as W, ak as X } from "./form-9yjqDnxY.js";
 import { f as m } from "./find-child-C60k4CxG.js";
-import { D as Y, E as Z } from "./field-error-headless-DTKnr5Zx.js";
-import { L as ee } from "./field-label-headless-DV4aNd5Y.js";
+import { D as Y, E as Z } from "./field-error-headless-DrnFrGun.js";
+import { L as ee } from "./field-label-headless-BIYf1BIh.js";
 import { f as R, g as re } from "./payment-field-utils-DobiK5Xh.js";
 import { u as te } from "./use-synced-display-value-DcAxdn3M.js";
 import { E as ne } from "./error-icon-hZxQ6DEy.js";
 import { H as ae } from "./custom-focus-class-_483Pkwp.js";
-import { s as u } from "./field-rac.module-DtugsLiL.js";
-import { r as se, H as oe, q as le, l as ce, h as ie } from "./form-element-classes-Bi-nNM8q.js";
+import { s as u } from "./field-rac.module-CWkwwhq4.js";
+import { t as se, J as oe, s as le, n as ce, j as ie } from "./form-element-classes-KRzHUNLu.js";
 function ue(e, t) {
   return {
     productId: e.id,
@@ -27,7 +27,7 @@ function h(e) {
 }
 const n = ({ children: e }) => {
   var O, A, g, P;
-  const { id: t, value: a, onChange: s, disabled: p, readOnly: d, required: y, hasError: b, onBlur: o, onFocus: f, FieldLayout: M, validation: _ } = D(), { labelId: q, prefixId: G } = S(), { regionalFormat: c } = x(), N = (g = (A = (O = _ == null ? void 0 : _.predefined) == null ? void 0 : O.paymentOptions) == null ? void 0 : A.products) == null ? void 0 : g[0], C = (P = a == null ? void 0 : a.at(0)) == null ? void 0 : P.price, [F, I] = te({
+  const { id: t, value: a, onChange: s, disabled: p, readOnly: d, required: y, hasError: b, onBlur: o, onFocus: E, FieldLayout: M, validation: _ } = D(), { labelId: q, prefixId: G } = S(), { regionalFormat: c } = x(), N = (g = (A = (O = _ == null ? void 0 : _.predefined) == null ? void 0 : O.paymentOptions) == null ? void 0 : A.products) == null ? void 0 : g[0], C = (P = a == null ? void 0 : a.at(0)) == null ? void 0 : P.price, [F, I] = te({
     sourceValue: C,
     format: (l) => R(String(l ?? ""), c),
     regionalFormat: c
@@ -57,11 +57,11 @@ const n = ({ children: e }) => {
     c,
     C,
     I
-  ]), B = m(e, n.Label), H = m(e, n.Input), k = m(e, n.Description), v = m(e, n.Error);
+  ]), k = m(e, n.Label), B = m(e, n.Input), v = m(e, n.Description), H = m(e, n.Error);
   return /* @__PURE__ */ r.createElement(M, {
     fieldId: t,
-    renderLabel: () => B,
-    renderInput: () => /* @__PURE__ */ r.createElement(z, {
+    renderLabel: () => k,
+    renderInput: () => /* @__PURE__ */ r.createElement(w, {
       "aria-labelledby": `${q} ${G}`,
       value: a ? F : "",
       onChange: U,
@@ -70,13 +70,13 @@ const n = ({ children: e }) => {
       isRequired: y,
       isInvalid: b,
       onBlur: $,
-      onFocus: f
-    }, H),
-    renderDescription: () => /* @__PURE__ */ r.createElement(r.Fragment, null, v, k)
+      onFocus: E
+    }, B),
+    renderDescription: () => /* @__PURE__ */ r.createElement(r.Fragment, null, H, v)
   });
-}, E = ({ children: e, className: t }) => {
-  const { disabled: a, hasError: s } = D(), p = m(e, E.Currency), d = m(e, E.Value);
-  return /* @__PURE__ */ r.createElement(J, {
+}, f = ({ children: e, className: t }) => {
+  const { disabled: a, hasError: s } = D(), p = m(e, f.Currency), d = m(e, f.Value);
+  return /* @__PURE__ */ r.createElement(z, {
     className: t,
     isDisabled: a,
     isInvalid: s
@@ -90,10 +90,10 @@ const n = ({ children: e }) => {
     className: e
   }, t.sign || t.code) : null;
 }, pe = ({ className: e }) => {
-  const { id: t, placeholder: a, label: s } = D(), { inputId: p, labelId: d, prefixId: y, ariaDescribedBy: b } = S(), o = Q(null);
+  const { id: t, placeholder: a, label: s } = D(), { inputId: p, labelId: d, prefixId: y, ariaDescribedBy: b } = S(), o = J(null);
   return X(() => {
-    var f;
-    (f = o.current) == null || f.focus();
+    var E;
+    (E = o.current) == null || E.focus();
   }, t), /* @__PURE__ */ r.createElement(K, {
     ref: o,
     id: p,
@@ -105,16 +105,16 @@ const n = ({ children: e }) => {
     autoComplete: "off"
   });
 };
-E.Currency = me;
-E.Value = pe;
+f.Currency = me;
+f.Value = pe;
 n.Label = ee;
-n.Input = E;
+n.Input = f;
 n.Description = Y;
 n.Error = Z;
-const de = "_inputGroup_vuy4u_1", Ee = "_currency_vuy4u_14", T = {
+const de = "_inputGroup_vuy4u_1", fe = "_currency_vuy4u_14", T = {
   inputGroup: de,
-  currency: Ee
-}, fe = ({ content: e, locale: t }) => /* @__PURE__ */ r.createElement(w, {
+  currency: fe
+}, Ee = ({ content: e, locale: t }) => /* @__PURE__ */ r.createElement(Q, {
   content: e,
   locale: t
 }), Ie = () => /* @__PURE__ */ r.createElement(n, null, /* @__PURE__ */ r.createElement(n.Label, {
@@ -131,7 +131,7 @@ const de = "_inputGroup_vuy4u_1", Ee = "_currency_vuy4u_14", T = {
   className: i(ce, u.error)
 }, /* @__PURE__ */ r.createElement(ne, null), /* @__PURE__ */ r.createElement(n.Error.Text, null)), /* @__PURE__ */ r.createElement(n.Description, {
   className: i(ie, u.description)
-}, fe)), Ve = () => /* @__PURE__ */ r.createElement(Ie, null);
+}, Ee)), Ve = () => /* @__PURE__ */ r.createElement(Ie, null);
 export {
   Ve as PaymentInputRAC
 };

package/dist/component/{phone-input-field-rac-DO_V5Z_T.js → phone-input-field-rac-DYCibqe1.js}

@@ -1,22 +1,22 @@
 import { RicosViewer as ye } from "@wix/ricos/viewer";
 import b from "classnames";
-import t, { useMemo as B, useState as k, useRef as v, useEffect as w, useCallback as Z, createContext as te, useContext as V } from "react";
-import { a2 as Ee, ar as P, ab as ne, aq as fe, ah as M, ae as oe, aj as he } from "./form-DzjdnO7t.js";
+import t, { useMemo as B, useState as V, useRef as v, useEffect as w, useCallback as Z, createContext as te, useContext as q } from "react";
+import { a2 as Ee, as as P, ab as ne, ar as fe, ai as M, af as oe, ak as he } from "./form-9yjqDnxY.js";
 import { UNSAFE_PortalProvider as ge } from "react-aria";
-import { Dialog as re, OverlayTriggerStateContext as be, ModalOverlay as _e, Modal as Ne, SearchField as Oe, ListBoxItem as Se, Group as Q, DialogTrigger as Le, Select as Ie, Input as ae, ListBox as ve, Autocomplete as Pe } from "react-aria-components";
+import { Dialog as re, OverlayTriggerStateContext as be, ModalOverlay as _e, Modal as Ne, SearchField as Oe, ListBoxItem as Se, Group as J, DialogTrigger as Le, Select as Ie, Input as ae, ListBox as ve, Autocomplete as Pe } from "react-aria-components";
 import { f as h, a as ce } from "./find-child-C60k4CxG.js";
-import { D as Fe, E as De } from "./field-error-headless-DTKnr5Zx.js";
-import { L as Re } from "./field-label-headless-DV4aNd5Y.js";
+import { D as Fe, E as De } from "./field-error-headless-DrnFrGun.js";
+import { L as Re } from "./field-label-headless-BIYf1BIh.js";
 import { N as xe, S as Be } from "./non-modal-popover-DtIMXHbe.js";
 import { u as Me } from "./use-invoke-callback-UH73A_J3.js";
 import se, { AsYouType as $e, isValidPhoneNumber as Ae, isSupportedCountry as Te } from "libphonenumber-js";
 import "libphonenumber-js/metadata.min.json";
-import { C as W } from "./calling-country-codes-PyWuOTmF.js";
+import { C as Q } from "./calling-country-codes-PyWuOTmF.js";
 import { C as we } from "./chevron-down-icon-CcpVm6B-.js";
 import { E as Ue } from "./error-icon-hZxQ6DEy.js";
-import { H as J } from "./custom-focus-class-_483Pkwp.js";
-import { s as _ } from "./field-rac.module-DtugsLiL.js";
-import { r as qe, H as ke, q as Ve, u as He, l as Ge, h as Ye } from "./form-element-classes-Bi-nNM8q.js";
+import { H as W } from "./custom-focus-class-_483Pkwp.js";
+import { s as _ } from "./field-rac.module-CWkwwhq4.js";
+import { t as ke, J as Ve, s as qe, w as Ge, n as He, j as Ye } from "./form-element-classes-KRzHUNLu.js";
 function X(e) {
   const n = e ? se(e) : void 0, r = n == null ? void 0 : n.country;
   if (r)
@@ -24,7 +24,7 @@ function X(e) {
   const o = new $e();
   return e && o.input(e), o.getCountry();
 }
-function H(e) {
+function G(e) {
   var n;
   return e && ((n = Ee.getCountryByKey(e)) == null ? void 0 : n.dialCode);
 }
@@ -43,8 +43,8 @@ function ee(e, n) {
 }
 function je() {
   const { t: e } = P(), { language: n } = ne();
-  return B(() => Object.keys(W).reduce((o, a) => {
-    const c = W[a], l = H(c), u = e(`locale-dataset.countries.${c.toUpperCase()}`);
+  return B(() => Object.keys(Q).reduce((o, a) => {
+    const c = Q[a], l = G(c), u = e(`locale-dataset.countries.${c.toUpperCase()}`);
     return l && Te(a) && o.push({
       countryName: u,
       longCountryCode: c,
@@ -61,13 +61,13 @@ function ze(e, n) {
 }
 function Ke(e, n) {
   const { countryName: r, callingCode: o, shortCountryCode: a } = e;
-  return !!(q(r, n) || q(o, n) || q(a, n));
+  return !!(k(r, n) || k(o, n) || k(a, n));
 }
-function q(e, n) {
+function k(e, n) {
   return e.toLowerCase().includes(n.toLowerCase());
 }
 function Ze({ value: e, defaultCountryCode: n, allowedCountryCodes: r, onChange: o }) {
-  const [a, c] = k(e || ""), l = v(U(e ?? null) ?? ""), [u, i] = k(n);
+  const [a, c] = V(e || ""), l = v(U(e ?? null) ?? ""), [u, i] = V(n);
   fe(() => {
     c(""), l.current = "", i(n), o("");
   });
@@ -119,12 +119,12 @@ function Ze({ value: e, defaultCountryCode: n, allowedCountryCodes: r, onChange:
   };
 }
 const le = /* @__PURE__ */ te(null), N = () => {
-  const e = V(le);
+  const e = q(le);
   if (!e)
     throw new Error("Phone input components must be used within PhoneInput component");
   return e;
-}, ue = /* @__PURE__ */ te(null), G = () => {
-  const e = V(ue);
+}, ue = /* @__PURE__ */ te(null), H = () => {
+  const e = q(ue);
   if (!e)
     throw new Error("Option sub-components must be used within Option component");
   return e;
@@ -144,7 +144,7 @@ const le = /* @__PURE__ */ te(null), N = () => {
   });
 }, s = ({ children: e }) => {
   var I, L;
-  const { id: n, value: r, onChange: o, FieldLayout: a, defaultCountry: c, validation: l } = M(), [u, i] = k(null), m = (L = (I = l == null ? void 0 : l.string) == null ? void 0 : I.phoneOptions) == null ? void 0 : L.allowedCountryCodes, C = je(), p = B(() => ze(C, m), [
+  const { id: n, value: r, onChange: o, FieldLayout: a, defaultCountry: c, validation: l } = M(), [u, i] = V(null), m = (L = (I = l == null ? void 0 : l.string) == null ? void 0 : I.phoneOptions) == null ? void 0 : L.allowedCountryCodes, C = je(), p = B(() => ze(C, m), [
     C,
     m
   ]), d = B(() => p.map((x) => x.shortCountryCode), [
@@ -177,7 +177,7 @@ const le = /* @__PURE__ */ te(null), N = () => {
     renderDescription: () => /* @__PURE__ */ t.createElement(t.Fragment, null, D, T)
   }));
 }, j = ({ children: e, className: n }) => {
-  const { inputId: r, labelId: o } = oe(), { hasError: a, disabled: c, readOnly: l } = M(), { t: u } = P(), { selectedCountryCode: i, countries: m } = N(), C = `${r}-country`, p = i ? m.find((O) => O.shortCountryCode === i) : void 0, d = p && H(p.longCountryCode) || "", f = u("field.phone.country-code.aria-label"), y = p ? `${f}, ${p.countryName}, ${d}` : f;
+  const { inputId: r, labelId: o } = oe(), { hasError: a, disabled: c, readOnly: l } = M(), { t: u } = P(), { selectedCountryCode: i, countries: m } = N(), C = `${r}-country`, p = i ? m.find((O) => O.shortCountryCode === i) : void 0, d = p && G(p.longCountryCode) || "", f = u("field.phone.country-code.aria-label"), y = p ? `${f}, ${p.countryName}, ${d}` : f;
   return /* @__PURE__ */ t.createElement(Be, {
     isDisabled: c || l,
     id: C,
@@ -186,20 +186,20 @@ const le = /* @__PURE__ */ te(null), N = () => {
     className: n,
     "data-invalid": a || void 0
   }, e);
-}, Qe = ({ className: e }) => {
+}, Je = ({ className: e }) => {
   const { selectedCountryCode: n, countries: r } = N(), o = r.find((a) => a.shortCountryCode === n);
   return o ? /* @__PURE__ */ t.createElement(Y, {
     className: e,
     longCountryCode: o.longCountryCode
   }) : null;
-}, We = ({ children: e, className: n }) => {
+}, Qe = ({ children: e, className: n }) => {
   const { selectedCountryCode: r, countries: o } = N();
   return o.some((c) => c.shortCountryCode === r) ? null : /* @__PURE__ */ t.createElement("span", {
     className: n
   }, e);
 };
-j.Flag = Qe;
-j.EmptyState = We;
+j.Flag = Je;
+j.EmptyState = Qe;
 const g = ({ children: e, className: n, "aria-label": r, placement: o, offset: a, ...c }) => {
   const { triggerRef: l, optionsRef: u } = c, { popoverContainer: i } = N(), m = h(e, g.Search), C = /* @__PURE__ */ t.createElement(ie, null, e);
   return /* @__PURE__ */ t.createElement(ge, {
@@ -214,8 +214,8 @@ const g = ({ children: e, className: n, "aria-label": r, placement: o, offset: a
   }, m ? /* @__PURE__ */ t.createElement(re, {
     "aria-label": r
   }, C) : C));
-}, Je = ({ children: e, className: n, overlayClassName: r, "aria-label": o, portalContainer: a = t.Fragment, ...c }) => {
-  const { optionsRef: l } = c, { selectedCountryCode: u, handleCountryCodeChange: i } = N(), m = V(be);
+}, We = ({ children: e, className: n, overlayClassName: r, "aria-label": o, portalContainer: a = t.Fragment, ...c }) => {
+  const { optionsRef: l } = c, { selectedCountryCode: u, handleCountryCodeChange: i } = N(), m = q(be);
   return /* @__PURE__ */ t.createElement(_e, {
     className: r,
     isDismissable: !0
@@ -241,7 +241,7 @@ const g = ({ children: e, className: n, "aria-label": r, placement: o, offset: a
     ...n,
     renderEmptyState: c ? () => c : void 0
   }, r.map((u) => {
-    const i = H(u.longCountryCode) || "";
+    const i = G(u.longCountryCode) || "";
     return ce(o, {
       key: u.shortCountryCode,
       countryCode: u.shortCountryCode,
@@ -258,7 +258,7 @@ const g = ({ children: e, className: n, "aria-label": r, placement: o, offset: a
   }, a, l) : l;
 };
 g.Popover = g;
-g.Modal = Je;
+g.Modal = We;
 const me = ({ className: e, children: n, "aria-label": r }) => /* @__PURE__ */ t.createElement(Oe, {
   className: e,
   "aria-label": r,
@@ -288,18 +288,18 @@ const $ = ({ children: e, className: n, ...r }) => {
     value: u
   }, i));
 }, Ce = ({ className: e }) => {
-  const { longCountryCode: n } = G();
+  const { longCountryCode: n } = H();
   return /* @__PURE__ */ t.createElement(Y, {
     className: e,
     longCountryCode: n
   });
 }, de = ({ className: e }) => {
-  const { countryName: n } = G();
+  const { countryName: n } = H();
   return /* @__PURE__ */ t.createElement("span", {
     className: e
   }, n);
 }, pe = ({ className: e }) => {
-  const { dialingCode: n } = G();
+  const { dialingCode: n } = H();
   return /* @__PURE__ */ t.createElement("span", {
     className: e
   }, n);
@@ -342,7 +342,7 @@ const tt = ({ className: e }) => {
     }
   };
   if (S.length === 1)
-    return /* @__PURE__ */ t.createElement(Q, {
+    return /* @__PURE__ */ t.createElement(J, {
       ref: r,
       className: n,
       isDisabled: c,
@@ -355,7 +355,7 @@ const tt = ({ className: e }) => {
     triggerRef: r,
     optionsRef: o
   }));
-  return /* @__PURE__ */ t.createElement(Q, {
+  return /* @__PURE__ */ t.createElement(J, {
     ref: r,
     className: n,
     isDisabled: c,
@@ -420,17 +420,17 @@ const ot = (e) => /* @__PURE__ */ t.createElement("svg", {
 }), _t = () => /* @__PURE__ */ t.createElement("span", {
   className: E.chevron,
   "aria-hidden": "true"
-}, /* @__PURE__ */ t.createElement(we, null)), kt = () => {
+}, /* @__PURE__ */ t.createElement(we, null)), Vt = () => {
   const { t: e } = P(), { isMobile: n, PortalContainer: r } = ne(), o = /* @__PURE__ */ t.createElement(s.CountryOptions.Search, {
     className: E.countrySearchContainer,
     "aria-label": e("field.phone.country-search-input.aria-label")
   }, /* @__PURE__ */ t.createElement(rt, {
     className: E.searchIcon
   }), /* @__PURE__ */ t.createElement(s.CountryOptions.Search.Input, {
-    className: b(E.countrySearch, J),
+    className: b(E.countrySearch, W),
     placeholder: e("field.phone.country-search-input.placeholder")
   })), a = /* @__PURE__ */ t.createElement(s.CountryOptions.EmptyState, null, e("field.phone.country-selector-dropdown.no-result")), c = /* @__PURE__ */ t.createElement(s.CountryOptions.Option, {
-    className: b(_.selectOption, _.selectOptionWithoutFocusRing, E.option, J)
+    className: b(_.selectOption, _.selectOptionWithoutFocusRing, E.option, W)
   }, /* @__PURE__ */ t.createElement(s.CountryOptions.Option.Flag, {
     className: E.flag
   }), /* @__PURE__ */ t.createElement(s.CountryOptions.Option.Name, {
@@ -439,11 +439,11 @@ const ot = (e) => /* @__PURE__ */ t.createElement("svg", {
     className: E.code
   }));
   return /* @__PURE__ */ t.createElement(s, null, /* @__PURE__ */ t.createElement(s.Label, {
-    className: b(qe, _.label)
+    className: b(ke, _.label)
   }, /* @__PURE__ */ t.createElement(s.Label.Required, {
-    className: b(ke, _.requiredMark)
+    className: b(Ve, _.requiredMark)
   })), /* @__PURE__ */ t.createElement(s.Control, {
-    className: b(Ve, _.input, E.control)
+    className: b(qe, _.input, E.control)
   }, /* @__PURE__ */ t.createElement(s.CountryButton, {
     className: E.countryButton
   }, /* @__PURE__ */ t.createElement(s.CountryButton.Flag, {
@@ -458,16 +458,16 @@ const ot = (e) => /* @__PURE__ */ t.createElement("svg", {
     portalContainer: r,
     "aria-label": e("field.phone.country-code.aria-label")
   }, o, a, c) : /* @__PURE__ */ t.createElement(s.CountryOptions.Popover, {
-    className: b(He, _.selectPopover, E.countryOptions),
+    className: b(Ge, _.selectPopover, E.countryOptions),
     placement: "bottom start",
     offset: 0,
     "aria-label": e("field.phone.country-code.aria-label")
   }, o, a, c)), /* @__PURE__ */ t.createElement(s.Error, {
-    className: b(Ge, _.error)
+    className: b(He, _.error)
   }, /* @__PURE__ */ t.createElement(Ue, null), /* @__PURE__ */ t.createElement(s.Error.Text, null)), /* @__PURE__ */ t.createElement(s.Description, {
     className: b(Ye, _.description)
   }, bt));
 };
 export {
-  kt as P
+  Vt as P
 };

package/dist/component/{phone-rac-D16nLDjP.js → phone-rac-BS-dmWkJ.js}

@@ -1,5 +1,5 @@
 import e from "react";
-import { P as o } from "./phone-input-field-rac-DO_V5Z_T.js";
+import { P as o } from "./phone-input-field-rac-DYCibqe1.js";
 const r = () => /* @__PURE__ */ e.createElement(o, null);
 export {
   r as PhoneRAC