@wix/form-elements 1.70.0 → 1.72.0

package/dist/component/{url-input-field-rac-BEpbWAVe.js → url-input-field-rac-aQiV0Sti.js}

@@ -2,13 +2,13 @@ import { RicosViewer as O } from "@wix/ricos/viewer";
 import l from "classnames";
 import r, { useCallback as h, useRef as y } from "react";
 import { TextField as N, Input as A } from "react-aria-components";
-import { ai as E, af as d, ak as P } from "./form-Pr0rklwH.js";
+import { ai as E, af as d, ak as P } from "./form-VD2Og15y.js";
 import { f as u } from "./find-child-C60k4CxG.js";
-import { D as k, E as B } from "./field-error-headless-DWbRjy6q.js";
-import { L as M } from "./field-label-headless-DUWK0CI-.js";
+import { D as k, E as B } from "./field-error-headless-BAVGL8JO.js";
+import { L as M } from "./field-label-headless-CwSCKtI1.js";
 import { u as T } from "./use-invoke-callback-UH73A_J3.js";
 import { E as q } from "./error-icon-hZxQ6DEy.js";
-import { s } from "./field-rac.module-DnUIb9Oh.js";
+import { s } from "./field-rac.module-Cac83bU5.js";
 import { z as v, P as U, y as g, q as x, j as w } from "./form-element-classes-BSMjWijd.js";
 const V = (t) => t ? `https://${String(t).replace(/^https?:\/\//, "")}` : "", e = ({ children: t }) => {
   const { id: o, value: n, onChange: a, disabled: m, readOnly: i, required: c, hasError: I, onBlur: f, onFocus: F, FieldLayout: L } = E(), { labelId: R } = d(), p = T(f), b = u(t, e.Label), D = u(t, e.Input), _ = u(t, e.Description), C = u(t, e.Error), S = h(() => {

package/dist/component/{url-input-rac-Du6EqRQX.js → url-input-rac-Ko5uylZw.js}

@@ -1,5 +1,5 @@
 import r from "react";
-import { U as t } from "./url-input-field-rac-BEpbWAVe.js";
+import { U as t } from "./url-input-field-rac-aQiV0Sti.js";
 const n = () => /* @__PURE__ */ r.createElement(t, null);
 export {
   n as UrlInputRAC

package/dist/component/{use-service-options-base-OMXZXAVb.js → use-service-options-base-BagPjcuW.js}

@@ -1,5 +1,5 @@
 import { useState as o, useCallback as D, useEffect as m, useMemo as b } from "react";
-import { ah as v } from "./form-Pr0rklwH.js";
+import { ah as v } from "./form-VD2Og15y.js";
 const k = (h) => {
   const { fieldType: I, isEditor: t = !1, postProcessOptions: i, customFetchLogic: a, onInitialDataLoaded: n } = h, [L, O] = o(!1), [g, p] = o([]), [E, u] = o(!1), [c, f] = o(!1), s = v(I), r = D((e) => {
     let d = e.map((l) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/form-elements",
-  "version": "1.70.0",
+  "version": "1.72.0",
   "description": "The Wix Forms rendering element for Builder apps, loaded at runtime as @wix/form-elements/Form",
   "license": "MIT",
   "files": [
@@ -151,5 +151,5 @@
       ]
     }
   },
-  "falconPackageHash": "390cb193055faf5182b17b3c69fac3489195c3606ce57d6b3dcfcd0d"
+  "falconPackageHash": "bc715a40f19dbf6d99e496325c076986f9ec5bee59347fa7381e332a"
 }

package/dist/component/donation-rac-DeBx8D9a.js

@@ -1,302 +0,0 @@
-import t, { useMemo as B, useCallback as L, useRef as oe } from "react";
-import { RicosViewer as re } from "@wix/ricos/viewer";
-import y from "classnames";
-import { RadioGroup as ae, RadioField as Y, RadioButton as z, TextField as se, Group as le, Input as ie } from "react-aria-components";
-import { debounce as ce } from "ts-debounce";
-import { P as H, ai as A, af as j, as as ue, ab as v, ak as me } from "./form-Pr0rklwH.js";
-import { f, a as b } from "./find-child-C60k4CxG.js";
-import { a as Q } from "./format-currency-BwShJ9vM.js";
-import { D as pe, E as de } from "./field-error-headless-DWbRjy6q.js";
-import { L as Ie } from "./field-label-headless-DUWK0CI-.js";
-import { N as Ee } from "./options-layout-constants-DEfIEJWD.js";
-import { a as Ce, b as fe } from "./numeric-input-utils-CuBMi4-a.js";
-import { g as Oe } from "./payment-field-utils-DobiK5Xh.js";
-import { u as he } from "./use-synced-display-value-DcAxdn3M.js";
-import { E as _e } from "./error-icon-hZxQ6DEy.js";
-import { s as D } from "./field-rac.module-DnUIb9Oh.js";
-import { z as ye, P as be, k as Fe, l as Ne, m as De, y as ge, q as Le, j as Re } from "./form-element-classes-BSMjWijd.js";
-import { o as Se } from "./options-rac.module-KM-VT_KY.js";
-function Ae(e, n) {
-  return e.reduce((o, r) => (o[r[n]] = r, o), {});
-}
-function ve(e) {
-  return Ae(e, "id");
-}
-const Pe = 0.01;
-function Te(e) {
-  var n;
-  return ((n = e == null ? void 0 : e.fixedPriceOptions) == null ? void 0 : n.price) || "0";
-}
-function W(e, n) {
-  const o = Number(n || "0");
-  return {
-    productId: e.id,
-    price: e.priceType === H.DYNAMIC_PRICE ? o : String(o),
-    quantity: 1
-  };
-}
-function Me(e) {
-  return e.find((n) => n.priceType === H.DYNAMIC_PRICE);
-}
-function xe(e, n) {
-  return (e == null ? void 0 : e.productId) === (n == null ? void 0 : n.id) ? String((e == null ? void 0 : e.price) ?? "") : "";
-}
-function Be(e, n, o) {
-  const r = (n == null ? void 0 : n.productId) === e ? void 0 : e, s = r ? o[r] : void 0;
-  return s ? [
-    W(s, Te(s))
-  ] : [];
-}
-const a = ({ children: e }) => {
-  const { id: n, value: o, onChange: r, disabled: s, required: m, onBlur: p, onFocus: h, validation: c, addOther: u, addOtherPlaceholder: i, FieldLayout: I, hasError: O } = A(), { labelId: _ } = j(), { t: E } = ue(), { currency: P, regionalFormat: F } = v(), d = o == null ? void 0 : o[0], N = B(() => {
-    var C, x;
-    return ((x = (C = c == null ? void 0 : c.predefined) == null ? void 0 : C.paymentOptions) == null ? void 0 : x.products) || [];
-  }, [
-    c
-  ]), T = B(() => ve(N), [
-    N
-  ]), l = B(() => u ? Me(N) : void 0, [
-    N,
-    u
-  ]), J = xe(d, l), [q, M] = he({
-    sourceValue: J,
-    format: (C) => fe(String(C ?? ""), F),
-    regionalFormat: F
-  }), k = L((C) => {
-    r(Be(C, d, T)), M("");
-  }, [
-    r,
-    T,
-    d,
-    M
-  ]), $ = L((C) => {
-    l && r(typeof C == "number" ? [
-      W(l, String(C))
-    ] : []);
-  }, [
-    r,
-    l
-  ]), V = B(() => ce($, 500), [
-    $
-  ]), K = L((C) => {
-    (d == null ? void 0 : d.productId) !== (l == null ? void 0 : l.id) && r(void 0);
-    const { validInput: x, validNumber: te } = Ce(C.target.value, Pe, q, F);
-    M(x), V(te);
-  }, [
-    F,
-    r,
-    d,
-    l,
-    q,
-    V,
-    M
-  ]), w = (d == null ? void 0 : d.productId) || null, X = L(() => {
-    l != null && l.id && w !== l.id && k(l.id);
-  }, [
-    l == null ? void 0 : l.id,
-    w,
-    k
-  ]), Z = f(e, a.Label), G = f(e, a.Control), ee = f(e, a.Description), ne = f(e, a.Error);
-  return /* @__PURE__ */ t.createElement(I, {
-    fieldId: n,
-    renderLabel: () => Z,
-    renderInput: () => /* @__PURE__ */ t.createElement(ae, {
-      "aria-labelledby": _,
-      value: w,
-      onChange: k,
-      isDisabled: s,
-      isInvalid: O,
-      isRequired: m,
-      onBlur: p,
-      onFocus: h
-    }, G ? b(G, {
-      productsById: T,
-      addOther: u,
-      customAmount: q,
-      onCustomAmountInputChange: K,
-      currency: P,
-      t: E,
-      placeholder: i === void 0 ? E("donation.other-option.placeholder") : i,
-      customAmountProductId: l == null ? void 0 : l.id,
-      onFocusCustomInput: X
-    }) : null),
-    renderDescription: () => /* @__PURE__ */ t.createElement(t.Fragment, null, ne, ee)
-  });
-}, je = ({ children: e, className: n, ...o }) => {
-  const { productsById: r, addOther: s, customAmount: m, onCustomAmountInputChange: p, currency: h, t: c, placeholder: u, customAmountProductId: i, onFocusCustomInput: I } = o, { hasError: O } = A(), _ = f(e, a.Options), E = f(e, a.OtherInput);
-  return /* @__PURE__ */ t.createElement("div", {
-    className: n,
-    "data-invalid": O
-  }, _ ? b(_, {
-    productsById: r
-  }) : null, s && i && /* @__PURE__ */ t.createElement(Y, {
-    value: i,
-    style: {
-      position: "absolute",
-      width: "1px",
-      height: "1px",
-      padding: "0",
-      margin: "-1px",
-      overflow: "hidden",
-      clip: "rect(0, 0, 0, 0)",
-      whiteSpace: "nowrap",
-      border: "0"
-    }
-  }, /* @__PURE__ */ t.createElement(z, {
-    "aria-label": c("donation.other-option.label", "Custom amount")
-  }, c("donation.other-option.label", "Custom amount"))), E && s ? b(E, {
-    customAmount: m,
-    onCustomAmountInputChange: p,
-    currency: h,
-    t: c,
-    placeholder: u,
-    customAmountProductId: i,
-    onFocusCustomInput: I
-  }) : null);
-}, U = ({ children: e, className: n, ...o }) => {
-  const { productsById: r } = o, { options: s, numberOfColumns: m } = A(), { isMobile: p } = v(), h = f(e, U.Option), c = p ? Ee.ONE : m;
-  return /* @__PURE__ */ t.createElement("div", {
-    className: n,
-    "data-columns": c
-  }, s.map((u) => {
-    var O;
-    const i = r[u.value], I = (O = i == null ? void 0 : i.fixedPriceOptions) == null ? void 0 : O.price;
-    return b(h, {
-      key: u.value,
-      value: u.value,
-      price: I || "0"
-    });
-  }));
-}, R = ({ children: e, className: n, ...o }) => {
-  const { value: r, price: s } = o, { id: m } = A(), { currency: p, regionalFormat: h } = v(), c = f(e, R.Value), u = f(e, R.Currency), { isCurrencyPrefixed: i } = Q({
-    amount: s,
-    currency: p == null ? void 0 : p.code,
-    locale: h
-  }), I = oe(null);
-  me(() => {
-    var _, E;
-    (E = (_ = I.current) == null ? void 0 : _.querySelector("input")) == null || E.focus();
-  }, m);
-  const O = c ? b(c, {
-    price: s
-  }) : null;
-  return /* @__PURE__ */ t.createElement(Y, {
-    value: r
-  }, /* @__PURE__ */ t.createElement(z, {
-    className: n,
-    ref: I
-  }, /* @__PURE__ */ t.createElement(t.Fragment, null, i && u, O, !i && u)));
-}, qe = ({ className: e, ...n }) => {
-  const { price: o } = n, { currency: r, regionalFormat: s } = v(), { value: m } = Q({
-    amount: o,
-    currency: r == null ? void 0 : r.code,
-    locale: s
-  });
-  return /* @__PURE__ */ t.createElement("span", {
-    className: e
-  }, m);
-}, ke = ({ className: e }) => {
-  const { currency: n } = v();
-  return /* @__PURE__ */ t.createElement("span", {
-    className: e
-  }, (n == null ? void 0 : n.sign) || (n == null ? void 0 : n.code) || "");
-};
-R.Value = qe;
-R.Currency = ke;
-const S = ({ children: e, className: n, ...o }) => {
-  const { customAmount: r, onCustomAmountInputChange: s, currency: m, t: p, placeholder: h, customAmountProductId: c, onFocusCustomInput: u } = o, { disabled: i, hasError: I } = A(), { labelId: O, prefixId: _ } = j(), E = f(e, S.Currency), P = f(e, S.Value), F = L((N) => {
-    s({
-      target: {
-        value: N
-      }
-    });
-  }, [
-    s
-  ]), d = L(() => {
-    u();
-  }, [
-    u
-  ]);
-  return /* @__PURE__ */ t.createElement(se, {
-    "aria-labelledby": `${O} ${_}`,
-    value: r,
-    onChange: F,
-    onFocus: d,
-    isDisabled: i,
-    isInvalid: I
-  }, /* @__PURE__ */ t.createElement(le, {
-    className: n,
-    isDisabled: i,
-    isInvalid: I
-  }, r && m && E ? b(E, {
-    currency: m,
-    t: p
-  }) : null, P ? b(P, {
-    placeholder: h,
-    customAmountProductId: c
-  }) : null));
-}, we = ({ className: e, ...n }) => {
-  const { currency: o, t: r } = n, { prefixId: s } = j();
-  return /* @__PURE__ */ t.createElement("span", {
-    id: s,
-    "aria-hidden": !1,
-    "aria-label": Oe(r, o),
-    className: e
-  }, (o == null ? void 0 : o.sign) || (o == null ? void 0 : o.code) || "");
-}, Ue = ({ className: e, ...n }) => {
-  const { placeholder: o, customAmountProductId: r } = n, { ariaDescribedBy: s, labelId: m, prefixId: p } = j();
-  return /* @__PURE__ */ t.createElement(ie, {
-    id: r,
-    "aria-labelledby": `${m} ${p}`,
-    "aria-describedby": s,
-    placeholder: o,
-    inputMode: "decimal",
-    autoComplete: "off",
-    className: e
-  });
-};
-S.Currency = we;
-S.Value = Ue;
-U.Option = R;
-a.Label = Ie;
-a.Control = je;
-a.Options = U;
-a.OtherInput = S;
-a.Description = pe;
-a.Error = de;
-const $e = "_control_141js_1", Ve = "_options_141js_7", Ge = "_option_141js_7", Ye = "_optionCurrency_141js_89", ze = "_otherInput_141js_93", He = "_otherInputCurrency_141js_112", g = {
-  control: $e,
-  options: Ve,
-  option: Ge,
-  optionCurrency: Ye,
-  otherInput: ze,
-  otherInputCurrency: He
-}, Qe = ({ content: e, locale: n }) => /* @__PURE__ */ t.createElement(re, {
-  content: e,
-  locale: n
-}), We = () => /* @__PURE__ */ t.createElement(a, null, /* @__PURE__ */ t.createElement(a.Label, {
-  className: y(ye, D.label)
-}, /* @__PURE__ */ t.createElement(a.Label.Required, {
-  className: y(be, D.requiredMark)
-})), /* @__PURE__ */ t.createElement(a.Control, {
-  className: g.control
-}, /* @__PURE__ */ t.createElement(a.Options, {
-  className: y(Fe, Se.options, g.options)
-}, /* @__PURE__ */ t.createElement(a.Options.Option, {
-  className: ({ isSelected: e }) => y(Ne, e && De, g.option)
-}, /* @__PURE__ */ t.createElement(a.Options.Option.Value, null), /* @__PURE__ */ t.createElement(a.Options.Option.Currency, {
-  className: g.optionCurrency
-}))), /* @__PURE__ */ t.createElement(a.OtherInput, {
-  className: y(ge, D.input, g.otherInput)
-}, /* @__PURE__ */ t.createElement(a.OtherInput.Currency, {
-  className: g.otherInputCurrency
-}), /* @__PURE__ */ t.createElement(a.OtherInput.Value, {
-  className: D.innerInput
-}))), /* @__PURE__ */ t.createElement(a.Error, {
-  className: y(Le, D.error)
-}, /* @__PURE__ */ t.createElement(_e, null), /* @__PURE__ */ t.createElement(a.Error.Text, null)), /* @__PURE__ */ t.createElement(a.Description, {
-  className: y(Re, D.description)
-}, Qe)), En = () => /* @__PURE__ */ t.createElement(We, null);
-export {
-  En as DonationRAC
-};

package/dist/component/field-rac.module-DnUIb9Oh.js

@@ -1,21 +0,0 @@
-const o = "_label_1nskk_1", n = "_requiredMark_1nskk_11", t = "_input_1nskk_16", e = "_inputGroup_1nskk_17", s = "_innerInput_1nskk_129", r = "_dropdownTrigger_1nskk_177", _ = "_dropdownIcon_1nskk_187", c = "_dropdownPopover_1nskk_206", p = "_selectPopover_1nskk_210", k = "_selectOption_1nskk_237", i = "_selectOptionWithoutFocusRing_1nskk_261", u = "_description_1nskk_267", d = "_error_1nskk_283", l = "_checkbox_1nskk_302", a = "_checkboxInput_1nskk_325", h = "_uploadButton_1nskk_420", b = {
-  label: o,
-  requiredMark: n,
-  input: t,
-  inputGroup: e,
-  innerInput: s,
-  dropdownTrigger: r,
-  dropdownIcon: _,
-  dropdownPopover: c,
-  selectPopover: p,
-  selectOption: k,
-  selectOptionWithoutFocusRing: i,
-  description: u,
-  error: d,
-  checkbox: l,
-  checkboxInput: a,
-  uploadButton: h
-};
-export {
-  b as s
-};

package/dist/component/image-choice-rac-cjylrvfO.js

@@ -1,141 +0,0 @@
-import e, { useMemo as M, useCallback as v, useRef as T } from "react";
-import { RicosViewer as k } from "@wix/ricos/viewer";
-import E from "classnames";
-import { CheckboxGroup as x, CheckboxField as z, CheckboxButton as B } from "react-aria-components";
-import { ai as L, af as q, ab as H, ak as P } from "./form-Pr0rklwH.js";
-import { f as p, a as C } from "./find-child-C60k4CxG.js";
-import { L as G, g as w } from "./field-label-headless-DUWK0CI-.js";
-import { D as U, E as V } from "./field-error-headless-DWbRjy6q.js";
-import { F as j } from "./fieldset-headless-CD3fds9J.js";
-import { E as Q } from "./error-icon-hZxQ6DEy.js";
-import { s as O } from "./field-rac.module-DnUIb9Oh.js";
-import { z as $, P as J, u as K, v as W, w as X, q as Y, j as Z } from "./form-element-classes-BSMjWijd.js";
-const a = ({ children: t }) => {
-  const { id: s, value: o, onChange: n, disabled: l, readOnly: i, required: r, onBlur: c, onFocus: m, hasError: u, FieldLayout: f } = L(), { inputId: g, labelId: b, ariaDescribedBy: _ } = q(), R = p(t, a.Label), D = p(t, a.Options), N = p(t, a.Description), S = p(t, a.Error), h = M(() => o || [], [
-    o
-  ]), A = v((y) => {
-    n == null || n(y);
-  }, [
-    n
-  ]);
-  return /* @__PURE__ */ e.createElement(f, {
-    fieldId: s,
-    renderLabel: () => R,
-    renderInput: () => /* @__PURE__ */ e.createElement(j, {
-      id: g,
-      ariaLabelledBy: b,
-      ariaDescribedBy: _,
-      required: r,
-      onBlur: c,
-      onFocus: m
-    }, /* @__PURE__ */ e.createElement(x, {
-      "aria-labelledby": b,
-      value: h,
-      onChange: A,
-      isDisabled: l,
-      isReadOnly: i,
-      isRequired: r,
-      isInvalid: u
-    }, D)),
-    renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, S, N)
-  });
-}, F = ({ children: t, className: s }) => {
-  const { isMobile: o } = H(), { id: n, options: l, numberOfColumns: i } = L(), r = p(t, F.Option);
-  return /* @__PURE__ */ e.createElement("div", {
-    className: s,
-    "data-columns": o ? 1 : i
-  }, l == null ? void 0 : l.map((c, m) => C(r, {
-    key: c.id || c.label,
-    option: c,
-    isFirst: m === 0,
-    fieldId: n
-  })));
-}, ee = ({ className: t }) => /* @__PURE__ */ e.createElement("div", {
-  "aria-hidden": "true",
-  className: t
-}), te = ({ className: t, ...s }) => {
-  var m, u;
-  const { option: o } = s, { choiceImageResize: n, choiceImageAlignment: l } = L(), i = (m = o.media) == null ? void 0 : m.image;
-  if (!i)
-    return null;
-  const r = w(i, i.width, i.height);
-  if (!r)
-    return null;
-  const c = ((u = o.media) == null ? void 0 : u.altText) || o.altText || i.altText || "";
-  return /* @__PURE__ */ e.createElement("img", {
-    className: t,
-    src: r,
-    alt: c,
-    "data-fit": n,
-    "data-alignment": l,
-    "data-hook": "image-choice-option-image"
-  });
-}, ae = ({ className: t, ...s }) => {
-  const { option: o } = s;
-  return !o.label || o.isLabelHidden ? null : /* @__PURE__ */ e.createElement("span", {
-    className: t
-  }, o.label);
-}, d = ({ children: t, className: s, ...o }) => {
-  const { option: n, isFirst: l = !1, fieldId: i } = o, { disabled: r, readOnly: c, hasError: m } = L(), u = T(null);
-  P(() => {
-    var _;
-    l && ((_ = u.current) == null || _.focus({
-      preventScroll: !0
-    }));
-  }, i);
-  const f = p(t, d.Input), g = p(t, d.Image), b = p(t, d.Label);
-  return /* @__PURE__ */ e.createElement(z, {
-    value: n.label,
-    isDisabled: r,
-    isReadOnly: c,
-    isInvalid: m
-  }, /* @__PURE__ */ e.createElement(B, {
-    ref: u,
-    "aria-label": n.isLabelHidden ? n.label : void 0,
-    className: s,
-    "data-hook": `image-choice-${n.label}`
-  }, f, C(g, {
-    option: n
-  }), C(b, {
-    option: n
-  })));
-};
-d.Input = ee;
-d.Image = te;
-d.Label = ae;
-a.Label = G;
-a.Options = F;
-F.Option = d;
-a.Description = U;
-a.Error = V;
-const ne = "_options_19z29_1", oe = "_optionInput_19z29_25", se = "_option_19z29_1", ie = "_optionLabel_19z29_95", le = "_optionImage_19z29_126", I = {
-  options: ne,
-  optionInput: oe,
-  option: se,
-  optionLabel: ie,
-  optionImage: le
-}, re = ({ content: t, locale: s }) => /* @__PURE__ */ e.createElement(k, {
-  content: t,
-  locale: s
-}), ce = () => /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement(a.Label, {
-  className: E($, O.label)
-}, /* @__PURE__ */ e.createElement(a.Label.Required, {
-  className: E(J, O.requiredMark)
-})), /* @__PURE__ */ e.createElement(a.Options, {
-  className: E(K, I.options)
-}, /* @__PURE__ */ e.createElement(a.Options.Option, {
-  className: ({ isSelected: t }) => E(W, t && X, I.option)
-}, /* @__PURE__ */ e.createElement(a.Options.Option.Input, {
-  className: I.optionInput
-}), /* @__PURE__ */ e.createElement(a.Options.Option.Image, {
-  className: I.optionImage
-}), /* @__PURE__ */ e.createElement(a.Options.Option.Label, {
-  className: I.optionLabel
-}))), /* @__PURE__ */ e.createElement(a.Error, {
-  className: E(Y, O.error)
-}, /* @__PURE__ */ e.createElement(Q, null), /* @__PURE__ */ e.createElement(a.Error.Text, null)), /* @__PURE__ */ e.createElement(a.Description, {
-  className: E(Z, O.description)
-}, re)), Ce = () => /* @__PURE__ */ e.createElement(ce, null);
-export {
-  Ce as ImageChoiceRAC
-};