@wix/form-elements 1.75.0 → 1.76.0

package/dist/component/{phone-input-field-rac-DksXoAnr.js → phone-input-field-rac-BYAnwk5h.js}

@@ -1,13 +1,13 @@
 import { RicosViewer as ye } from "@wix/ricos/viewer";
 import b from "classnames";
 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-DCmjj8mZ.js";
+import { a2 as Ee, as as P, ab as ne, ar as fe, ai as M, af as oe, ak as he } from "./form-BpHElSwH.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 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-uQOcm2Ak.js";
-import { L as xe } from "./field-label-headless-Bzh7f2Ji.js";
-import { N as Re, S as Be } from "./non-modal-popover-DtIMXHbe.js";
+import { D as Fe, E as De } from "./field-error-headless-C5ZsFUKv.js";
+import { L as Re } from "./field-label-headless-CS5OYsiI.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";
@@ -16,7 +16,7 @@ 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-DjmaTYkc.js";
-import { y as ke, Q as Ve, x as qe, B as Ge, p as He, i as Ye } from "./form-element-classes-Dn33C01k.js";
+import { z as ke, Q as Ve, y as qe, B as ze, p as Ge, i as He } from "./form-element-classes-BXNs5k3q.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 G(e) {
+function z(e) {
   var n;
   return e && ((n = Ee.getCountryByKey(e)) == null ? void 0 : n.dialCode);
 }
@@ -41,10 +41,10 @@ function ee(e, n) {
     }
   return e;
 }
-function ze() {
+function Ye() {
   const { t: e } = P(), { language: n } = ne();
   return B(() => Object.keys(W).reduce((o, a) => {
-    const c = W[a], l = G(c), u = e(`locale-dataset.countries.${c.toUpperCase()}`);
+    const c = W[a], l = z(c), u = e(`locale-dataset.countries.${c.toUpperCase()}`);
     return l && Te(a) && o.push({
       countryName: u,
       longCountryCode: c,
@@ -123,12 +123,12 @@ const le = /* @__PURE__ */ te(null), N = () => {
   if (!e)
     throw new Error("Phone input components must be used within PhoneInput component");
   return e;
-}, ue = /* @__PURE__ */ te(null), H = () => {
+}, ue = /* @__PURE__ */ te(null), G = () => {
   const e = q(ue);
   if (!e)
     throw new Error("Option sub-components must be used within Option component");
   return e;
-}, Y = ({ longCountryCode: e, className: n }) => {
+}, H = ({ longCountryCode: e, className: n }) => {
   function r(c, l) {
     const u = "https://static.parastorage.com/services/linguist-flags/1.1005.0/assets/flags/square/", m = `${c}${l === "2x" ? "_2x" : ""}.png`;
     return `${u}${m}`;
@@ -144,17 +144,17 @@ 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] = V(null), m = (L = (I = l == null ? void 0 : l.string) == null ? void 0 : I.phoneOptions) == null ? void 0 : L.allowedCountryCodes, C = ze(), p = B(() => Ke(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 = Ye(), p = B(() => Ke(C, m), [
     C,
     m
-  ]), d = B(() => p.map((R) => R.shortCountryCode), [
+  ]), d = B(() => p.map((x) => x.shortCountryCode), [
     p
   ]), { currentValue: f, selectedCountryCode: y, handlePhoneChange: O, handleCountryCodeChange: S } = Ze({
     value: r,
     defaultCountryCode: c,
     allowedCountryCodes: d,
     onChange: o
-  }), A = h(e, s.Label), F = h(e, s.Control), T = h(e, s.Description), D = h(e, s.Error), x = {
+  }), A = h(e, s.Label), F = h(e, s.Control), T = h(e, s.Description), D = h(e, s.Error), R = {
     currentValue: f,
     selectedCountryCode: y,
     handlePhoneChange: O,
@@ -164,7 +164,7 @@ const le = /* @__PURE__ */ te(null), N = () => {
     popoverContainer: u
   };
   return /* @__PURE__ */ t.createElement(le.Provider, {
-    value: x
+    value: R
   }, /* @__PURE__ */ t.createElement(a, {
     fieldId: n,
     renderLabel: () => A,
@@ -176,8 +176,8 @@ const le = /* @__PURE__ */ te(null), N = () => {
     }), F),
     renderDescription: () => /* @__PURE__ */ t.createElement(t.Fragment, null, D, T)
   }));
-}, z = ({ 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 && G(p.longCountryCode) || "", f = u("field.phone.country-code.aria-label"), y = p ? `${f}, ${p.countryName}, ${d}` : f;
+}, Y = ({ 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 && z(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,
@@ -188,7 +188,7 @@ const le = /* @__PURE__ */ te(null), N = () => {
   }, e);
 }, je = ({ className: e }) => {
   const { selectedCountryCode: n, countries: r } = N(), o = r.find((a) => a.shortCountryCode === n);
-  return o ? /* @__PURE__ */ t.createElement(Y, {
+  return o ? /* @__PURE__ */ t.createElement(H, {
     className: e,
     longCountryCode: o.longCountryCode
   }) : null;
@@ -198,13 +198,13 @@ const le = /* @__PURE__ */ te(null), N = () => {
     className: n
   }, e);
 };
-z.Flag = je;
-z.EmptyState = We;
+Y.Flag = je;
+Y.EmptyState = We;
 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, {
     getContainer: () => i
-  }, /* @__PURE__ */ t.createElement(Re, {
+  }, /* @__PURE__ */ t.createElement(xe, {
     ref: u,
     triggerRef: l,
     className: n,
@@ -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 = G(u.longCountryCode) || "";
+    const i = z(u.longCountryCode) || "";
     return ce(o, {
       key: u.shortCountryCode,
       countryCode: u.shortCountryCode,
@@ -288,18 +288,18 @@ const $ = ({ children: e, className: n, ...r }) => {
     value: u
   }, i));
 }, Ce = ({ className: e }) => {
-  const { longCountryCode: n } = H();
-  return /* @__PURE__ */ t.createElement(Y, {
+  const { longCountryCode: n } = G();
+  return /* @__PURE__ */ t.createElement(H, {
     className: e,
     longCountryCode: n
   });
 }, de = ({ className: e }) => {
-  const { countryName: n } = H();
+  const { countryName: n } = G();
   return /* @__PURE__ */ t.createElement("span", {
     className: e
   }, n);
 }, pe = ({ className: e }) => {
-  const { dialingCode: n } = H();
+  const { dialingCode: n } = G();
   return /* @__PURE__ */ t.createElement("span", {
     className: e
   }, n);
@@ -331,14 +331,14 @@ const tt = ({ className: e }) => {
     className: e
   });
 }, nt = ({ children: e, className: n }) => {
-  const r = v(null), o = v(null), a = v(!1), { disabled: c, readOnly: l, required: u, hasError: i, showFlag: m, onFocus: C, onBlur: p } = M(), d = Me(p), { t: f } = P(), { selectedCountryCode: y, handleCountryCodeChange: O, countries: S } = N(), A = h(e, s.CountryButton), F = h(e, s.CountryOptions.Modal), T = F ?? h(e, s.CountryOptions.Popover), D = h(e, s.PhoneNumber), x = {
+  const r = v(null), o = v(null), a = v(!1), { disabled: c, readOnly: l, required: u, hasError: i, showFlag: m, onFocus: C, onBlur: p } = M(), d = Me(p), { t: f } = P(), { selectedCountryCode: y, handleCountryCodeChange: O, countries: S } = N(), A = h(e, s.CountryButton), F = h(e, s.CountryOptions.Modal), T = F ?? h(e, s.CountryOptions.Popover), D = h(e, s.PhoneNumber), R = {
     onFocus: () => {
       a.current || (a.current = !0, C == null || C());
     },
     onBlur: (L) => {
       var K, Q;
-      const R = L.relatedTarget;
-      !((K = r.current) != null && K.contains(R)) && !((Q = o.current) != null && Q.contains(R)) && (a.current = !1, d());
+      const x = L.relatedTarget;
+      !((K = r.current) != null && K.contains(x)) && !((Q = o.current) != null && Q.contains(x)) && (a.current = !1, d());
     }
   };
   if (S.length === 1)
@@ -347,8 +347,8 @@ const tt = ({ className: e }) => {
       className: n,
       isDisabled: c,
       isInvalid: i,
-      ...x
-    }, m && /* @__PURE__ */ t.createElement(Y, {
+      ...R
+    }, m && /* @__PURE__ */ t.createElement(H, {
       longCountryCode: S[0].longCountryCode
     }), D);
   const I = /* @__PURE__ */ t.createElement(t.Fragment, null, A, ce(T, {
@@ -360,7 +360,7 @@ const tt = ({ className: e }) => {
     className: n,
     isDisabled: c,
     isInvalid: i,
-    ...x
+    ...R
   }, F ? /* @__PURE__ */ t.createElement(Le, null, I) : /* @__PURE__ */ t.createElement(Ie, {
     "aria-label": f("field.phone.country-code.aria-label"),
     value: y ?? null,
@@ -371,9 +371,9 @@ const tt = ({ className: e }) => {
     placeholder: ""
   }, I), D);
 };
-s.Label = xe;
+s.Label = Re;
 s.Control = nt;
-s.CountryButton = z;
+s.CountryButton = Y;
 s.CountryOptions = g;
 s.PhoneNumber = tt;
 s.Description = Fe;
@@ -458,14 +458,14 @@ 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(Ge, _.selectPopover, E.countryOptions),
+    className: b(ze, _.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(He, _.error)
+    className: b(Ge, _.error)
   }, /* @__PURE__ */ t.createElement(Ue, null), /* @__PURE__ */ t.createElement(s.Error.Text, null)), /* @__PURE__ */ t.createElement(s.Description, {
-    className: b(Ye, _.description)
+    className: b(He, _.description)
   }, bt));
 };
 export {

package/dist/component/{phone-rac-BR0iX5TL.js → phone-rac-gS4k9Yn8.js}

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

package/dist/component/{product-list-rac-C4rvv5k-.js → product-list-rac-CO0o3yOg.js}

@@ -1,19 +1,20 @@
-import t, { useMemo as K, useCallback as q, useRef as B } from "react";
-import { RicosViewer as $ } from "@wix/ricos/viewer";
-import f from "classnames";
-import { CheckboxField as z, CheckboxButton as X, NumberField as j, Group as J, Button as U, Input as W } from "react-aria-components";
-import { ai as M, af as Y, ab as w, as as Z, ak as ee } from "./form-DCmjj8mZ.js";
+import t, { useMemo as H, useCallback as x, useRef as B } from "react";
+import { RicosViewer as K } from "@wix/ricos/viewer";
+import _ from "classnames";
+import { CheckboxField as $, CheckboxButton as X, NumberField as j, Group as J, Button as U, Input as W } from "react-aria-components";
+import { ai as M, af as Y, ab as w, as as Z, ak as ee } from "./form-BpHElSwH.js";
 import { f as b, a as I } from "./find-child-C60k4CxG.js";
-import { L as te, g as ne } from "./field-label-headless-Bzh7f2Ji.js";
+import { L as te, g as ne } from "./field-label-headless-CS5OYsiI.js";
 import { f as ae } from "./format-currency-BwShJ9vM.js";
-import { D as oe, E as re } from "./field-error-headless-uQOcm2Ak.js";
+import { D as oe, E as re } from "./field-error-headless-C5ZsFUKv.js";
 import { F as le } from "./fieldset-headless-CD3fds9J.js";
-import { a as se, u as ie, C as ce } from "./use-element-state-class-name-Bnw7sY9P.js";
-import { g as ue } from "./payment-field-utils-DobiK5Xh.js";
-import { E as me } from "./error-icon-hZxQ6DEy.js";
+import { a as se, C as ie } from "./checkbox-indicator-module-classes-BcScu147.js";
+import { g as ce } from "./payment-field-utils-DobiK5Xh.js";
+import { E as ue } from "./error-icon-hZxQ6DEy.js";
 import { s as T } from "./field-rac.module-DjmaTYkc.js";
-import { y as pe, Q as de, C as Ee, G as ye, E as _e, x as fe, p as Ie, i as be, D as Oe } from "./form-element-classes-Dn33C01k.js";
+import { z as me, Q as pe, C as de, G as Ee, E as ye, y as fe, p as _e, i as Ie, D as be } from "./form-element-classes-BXNs5k3q.js";
 import { o as Q } from "./options-rac.module-KM-VT_KY.js";
+import { u as Oe } from "./use-element-state-class-name-CC65g9mT.js";
 var Le = /* @__PURE__ */ (function(e) {
   return e.crop = "CROP", e.fit = "FIT", e;
 })({}), k = /* @__PURE__ */ (function(e) {
@@ -27,23 +28,23 @@ function Ce({ maxItems: e, products: a } = {}) {
 }
 const o = ({ children: e }) => {
   var D;
-  const { id: a, value: l, onChange: n, disabled: r, readOnly: c, required: y, onBlur: O, onFocus: s, hasError: u, validation: m, FieldLayout: p } = M(), { inputId: x, labelId: N, ariaDescribedBy: h } = Y(), _ = b(e, o.Label), g = b(e, o.Options), v = b(e, o.Description), L = b(e, o.Error), i = K(() => l || [], [
+  const { id: a, value: l, onChange: n, disabled: r, readOnly: c, required: y, onBlur: O, onFocus: s, hasError: u, validation: m, FieldLayout: p } = M(), { inputId: q, labelId: N, ariaDescribedBy: h } = Y(), f = b(e, o.Label), g = b(e, o.Options), v = b(e, o.Description), L = b(e, o.Error), i = H(() => l || [], [
     l
-  ]), A = Ce((D = m == null ? void 0 : m.predefined) == null ? void 0 : D.paymentOptions) === k.many, F = q((S, R) => {
-    const d = i.filter((H) => H.productId !== S.productId), G = R ? [
+  ]), A = Ce((D = m == null ? void 0 : m.predefined) == null ? void 0 : D.paymentOptions) === k.many, F = x((S, R) => {
+    const d = i.filter((G) => G.productId !== S.productId), z = R ? [
       ...d,
       S
     ] : d;
-    n == null || n(G);
+    n == null || n(z);
   }, [
     i,
     n
   ]);
   return /* @__PURE__ */ t.createElement(p, {
     fieldId: a,
-    renderLabel: () => _,
+    renderLabel: () => f,
     renderInput: () => /* @__PURE__ */ t.createElement(le, {
-      id: x,
+      id: q,
       ariaLabelledBy: N,
       ariaDescribedBy: h,
       required: y,
@@ -60,15 +61,15 @@ const o = ({ children: e }) => {
     renderDescription: () => /* @__PURE__ */ t.createElement(t.Fragment, null, L, v)
   });
 }, V = ({ children: e, className: a, ...l }) => {
-  const { allowMany: n, productValues: r, onProductChange: c, disabled: y, readOnly: O, hasError: s } = l, { options: u, validation: m, imageResize: p } = M(), { currency: x } = w(), { t: N } = Z(), h = b(e, o.Option);
+  const { allowMany: n, productValues: r, onProductChange: c, disabled: y, readOnly: O, hasError: s } = l, { options: u, validation: m, imageResize: p } = M(), { currency: q } = w(), { t: N } = Z(), h = b(e, o.Option);
   return /* @__PURE__ */ t.createElement("div", {
     className: a
-  }, u == null ? void 0 : u.map((_, g) => {
+  }, u == null ? void 0 : u.map((f, g) => {
     var C, A, F, D, S;
-    const v = ((S = (D = (F = (A = (C = m == null ? void 0 : m.predefined) == null ? void 0 : C.paymentOptions) == null ? void 0 : A.products) == null ? void 0 : F.find((R) => R.id === _.value)) == null ? void 0 : D.fixedPriceOptions) == null ? void 0 : S.price) || "0", L = ue(N, x), i = r.find((R) => R.productId === _.value);
+    const v = ((S = (D = (F = (A = (C = m == null ? void 0 : m.predefined) == null ? void 0 : C.paymentOptions) == null ? void 0 : A.products) == null ? void 0 : F.find((R) => R.id === f.value)) == null ? void 0 : D.fixedPriceOptions) == null ? void 0 : S.price) || "0", L = ce(N, q), i = r.find((R) => R.productId === f.value);
     return I(h, {
-      key: _.id || _.value || _.label,
-      option: _,
+      key: f.id || f.value || f.label,
+      option: f,
       price: v,
       quantity: i == null ? void 0 : i.quantity,
       isSelected: !!i,
@@ -83,14 +84,14 @@ const o = ({ children: e }) => {
     });
   }));
 }, E = ({ children: e, className: a, ...l }) => {
-  const { option: n, price: r, quantity: c = 0, isSelected: y, allowMany: O, onProductChange: s, disabled: u, readOnly: m, hasError: p, currencyAriaLabel: x, imageResize: N, isFirst: h } = l, { id: _ } = M(), g = B(null), v = B(null), L = b(e, E.Image), i = b(e, E.Label), C = b(e, E.Price), A = b(e, E.Input), F = b(e, E.Quantity);
+  const { option: n, price: r, quantity: c = 0, isSelected: y, allowMany: O, onProductChange: s, disabled: u, readOnly: m, hasError: p, currencyAriaLabel: q, imageResize: N, isFirst: h } = l, { id: f } = M(), g = B(null), v = B(null), L = b(e, E.Image), i = b(e, E.Label), C = b(e, E.Price), A = b(e, E.Input), F = b(e, E.Quantity);
   ee(() => {
     var d;
     h && ((d = g.current ?? v.current) == null || d.focus({
       preventScroll: !0
     }));
-  }, _);
-  const D = q((d) => {
+  }, f);
+  const D = x((d) => {
     s({
       productId: n.value,
       price: r,
@@ -100,7 +101,7 @@ const o = ({ children: e }) => {
     s,
     n.value,
     r
-  ]), S = q((d) => {
+  ]), S = x((d) => {
     s({
       productId: n.value,
       price: r,
@@ -110,7 +111,7 @@ const o = ({ children: e }) => {
     s,
     n.value,
     r
-  ]), R = `${n.label} ${x} ${r}`;
+  ]), R = `${n.label} ${q} ${r}`;
   return O ? /* @__PURE__ */ t.createElement("div", {
     className: a,
     "data-hook": "product"
@@ -129,7 +130,7 @@ const o = ({ children: e }) => {
     hasError: p,
     ariaLabel: R,
     inputRef: h ? v : void 0
-  }) : null) : /* @__PURE__ */ t.createElement(z, {
+  }) : null) : /* @__PURE__ */ t.createElement($, {
     isSelected: y,
     onChange: D,
     isDisabled: u,
@@ -184,11 +185,11 @@ const o = ({ children: e }) => {
     "data-hook": "product-price"
   }, c);
 }, De = ({ className: e, ...a }) => {
-  const { quantity: l, onQuantityChange: n, disabled: r, readOnly: c, hasError: y, ariaLabel: O, inputRef: s } = a, u = q((p) => {
+  const { quantity: l, onQuantityChange: n, disabled: r, readOnly: c, hasError: y, ariaLabel: O, inputRef: s } = a, u = x((p) => {
     n(p < 0 ? 0 : p);
   }, [
     n
-  ]), m = q((p) => {
+  ]), m = x((p) => {
     p.key === "Home" && (p.preventDefault(), u(0));
   }, [
     u
@@ -233,38 +234,38 @@ const Se = "_options_11x4v_1", Pe = "_option_11x4v_1", Ne = "_optionInput_11x4v_
   optionLabel: ve,
   optionPrice: Ae,
   quantity: Te
-}, xe = ({ content: e, locale: a }) => /* @__PURE__ */ t.createElement($, {
+}, qe = ({ content: e, locale: a }) => /* @__PURE__ */ t.createElement(K, {
   content: e,
   locale: a
-}), qe = () => {
-  const e = ie({
-    globalClasses: Oe,
-    moduleClasses: ce
+}), xe = () => {
+  const e = Oe({
+    globalClasses: be,
+    moduleClasses: ie
   });
   return /* @__PURE__ */ t.createElement(o, null, /* @__PURE__ */ t.createElement(o.Label, {
-    className: f(pe, T.label)
+    className: _(me, T.label)
   }, /* @__PURE__ */ t.createElement(o.Label.Required, {
-    className: f(de, T.requiredMark)
+    className: _(pe, T.requiredMark)
   })), /* @__PURE__ */ t.createElement(o.Options, {
-    className: f(Ee, Q.options, P.options)
+    className: _(de, Q.options, P.options)
   }, /* @__PURE__ */ t.createElement(o.Option, {
-    className: f(T.checkbox, P.option)
+    className: _(T.checkbox, P.option)
   }, /* @__PURE__ */ t.createElement(o.Option.Image, {
     className: P.optionImage
   }), /* @__PURE__ */ t.createElement(o.Option.Label, {
-    className: f(ye, Q.optionLabel, P.optionLabel)
+    className: _(Ee, Q.optionLabel, P.optionLabel)
   }), /* @__PURE__ */ t.createElement(o.Option.Price, {
-    className: f(_e, P.optionPrice)
+    className: _(ye, P.optionPrice)
   }), /* @__PURE__ */ t.createElement(o.Option.Input, {
-    className: (a) => f(e(a), P.optionInput)
+    className: (a) => _(e(a), P.optionInput)
   }), /* @__PURE__ */ t.createElement(o.Option.Quantity, {
-    className: f(fe, T.inputGroup, P.quantity)
+    className: _(fe, T.inputGroup, P.quantity)
   }))), /* @__PURE__ */ t.createElement(o.Error, {
-    className: f(Ie, T.error)
-  }, /* @__PURE__ */ t.createElement(me, null), /* @__PURE__ */ t.createElement(o.Error.Text, null)), /* @__PURE__ */ t.createElement(o.Description, {
-    className: f(be, T.description)
-  }, xe));
-}, Ye = () => /* @__PURE__ */ t.createElement(qe, null);
+    className: _(_e, T.error)
+  }, /* @__PURE__ */ t.createElement(ue, null), /* @__PURE__ */ t.createElement(o.Error.Text, null)), /* @__PURE__ */ t.createElement(o.Description, {
+    className: _(Ie, T.description)
+  }, qe));
+}, Ze = () => /* @__PURE__ */ t.createElement(xe, null);
 export {
-  Ye as ProductListRAC
+  Ze as ProductListRAC
 };

package/dist/component/{quiz-radio-group-rac-BxKmUUf8.js → quiz-radio-group-rac-Dhk7nkzb.js}

@@ -1,6 +1,6 @@
 import _ from "react";
-import { R } from "./radio-group-field-rac-Dj4rkkKF.js";
-import { J as o, I as r, H as O } from "./form-element-classes-Dn33C01k.js";
+import { R } from "./radio-group-field-rac-DdlyQ3m6.js";
+import { J as o, I as r, H as O } from "./form-element-classes-BXNs5k3q.js";
 const t = () => /* @__PURE__ */ _.createElement(R, {
   classes: {
     container: O,

package/dist/component/{radio-group-field-rac-Dj4rkkKF.js → radio-group-field-rac-DdlyQ3m6.js}

@@ -1,10 +1,10 @@
 import { RicosViewer as s } from "@wix/ricos/viewer";
 import a from "classnames";
 import e from "react";
-import { R as t, s as r } from "./radio-group-field-rac.module-CeBLm9QF.js";
+import { R as t, s as r } from "./radio-group-field-rac.module-emin6sSc.js";
 import { E as m } from "./error-icon-hZxQ6DEy.js";
 import { s as l } from "./field-rac.module-DjmaTYkc.js";
-import { y as c, Q as i, M as E, L as _, K as R, x as p, p as O, i as L } from "./form-element-classes-Dn33C01k.js";
+import { z as c, Q as i, M as E, L as _, K as R, y as p, p as O, i as L } from "./form-element-classes-BXNs5k3q.js";
 const I = ({ content: o, locale: n }) => /* @__PURE__ */ e.createElement(s, {
   content: o,
   locale: n

package/dist/component/{radio-group-field-rac.module-CeBLm9QF.js → radio-group-field-rac.module-emin6sSc.js}

@@ -1,9 +1,9 @@
 import s, { useRef as y, useState as V, useEffect as S, useCallback as B } from "react";
 import { RadioGroup as T, RadioField as k, RadioButton as G, TextField as M, Input as P } from "react-aria-components";
-import { ai as C, af as $, as as F, ab as q, ak as x } from "./form-DCmjj8mZ.js";
+import { ai as C, af as $, as as F, ab as q, ak as x } from "./form-BpHElSwH.js";
 import { f as d, a as g } from "./find-child-C60k4CxG.js";
-import { D as U, E as A } from "./field-error-headless-uQOcm2Ak.js";
-import { L as H } from "./field-label-headless-Bzh7f2Ji.js";
+import { D as U, E as A } from "./field-error-headless-C5ZsFUKv.js";
+import { L as H } from "./field-label-headless-CS5OYsiI.js";
 import { N as j } from "./options-layout-constants-DEfIEJWD.js";
 const L = "Other", w = (e, t) => e == null ? void 0 : e.find((o) => (o.value ?? o.label) === t), R = (e, t) => !!t && !w(e, t), z = (e, t) => {
   const a = t ? t.length + 2 : 0;

package/dist/component/{radio-group-rac-BpnfptSZ.js → radio-group-rac-B-9q91fJ.js}

@@ -1,5 +1,5 @@
 import o from "react";
-import { R as r } from "./radio-group-field-rac-Dj4rkkKF.js";
+import { R as r } from "./radio-group-field-rac-DdlyQ3m6.js";
 const R = () => /* @__PURE__ */ o.createElement(r, null);
 export {
   R as RadioGroupRAC

package/dist/component/{rating-input-field-rac-BP0928qI.js → rating-input-field-rac-VDaJKq-n.js}

@@ -1,18 +1,18 @@
 import { RicosViewer as D } from "@wix/ricos/viewer";
 import c from "classnames";
-import e, { useCallback as y, useState as h, useRef as A } from "react";
-import { ai as F, af as N, as as T, ac as M } from "./form-DCmjj8mZ.js";
+import e, { useCallback as h, useState as y, useRef as A } from "react";
+import { ai as F, af as N, as as T, ac as M } from "./form-BpHElSwH.js";
 import { RadioGroup as P, RadioField as w, RadioButton as B } from "react-aria-components";
-import { f as E, a as x } from "./find-child-C60k4CxG.js";
-import { D as G, E as H } from "./field-error-headless-uQOcm2Ak.js";
-import { L as q } from "./field-label-headless-Bzh7f2Ji.js";
+import { f as E, a as G } from "./find-child-C60k4CxG.js";
+import { D as H, E as q } from "./field-error-headless-C5ZsFUKv.js";
+import { L as z } from "./field-label-headless-CS5OYsiI.js";
 import { E as k } from "./error-icon-hZxQ6DEy.js";
 import { s as p } from "./field-rac.module-DjmaTYkc.js";
-import { y as Q, Q as z, N as K, O as U, P as Y, p as Z, i as j, F as J } from "./form-element-classes-Dn33C01k.js";
+import { z as x, Q, N as K, O as U, P as Y, p as Z, i as j, F as J } from "./form-element-classes-BXNs5k3q.js";
 const t = ({ children: a }) => {
-  const { id: r, value: n, onChange: i, disabled: o, readOnly: d, required: l, hasError: m, onBlur: u, onFocus: R, FieldLayout: C } = F(), { labelId: L } = N(), _ = y((v) => i(Number(v)), [
+  const { id: r, value: n, onChange: i, disabled: o, readOnly: d, required: l, hasError: m, onBlur: u, onFocus: R, FieldLayout: C } = F(), { labelId: L } = N(), _ = h((O) => i(Number(O)), [
     i
-  ]), f = E(a, t.Label), s = E(a, t.Ratings), g = E(a, t.Description), O = E(a, t.Error);
+  ]), f = E(a, t.Label), s = E(a, t.Ratings), g = E(a, t.Description), v = E(a, t.Error);
   return /* @__PURE__ */ e.createElement(C, {
     fieldId: r,
     renderLabel: () => f,
@@ -28,10 +28,10 @@ const t = ({ children: a }) => {
       onFocus: R,
       orientation: "horizontal"
     }, s),
-    renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, O, g)
+    renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, v, g)
   });
 }, I = ({ children: a, className: r, getReactionLabel: n }) => {
-  const { value: i, readOnly: o, hasError: d } = F(), { inputId: l, ariaDescribedBy: m } = N(), [u, R] = h(), C = A(null), L = E(a, I.Rating), _ = [
+  const { value: i, readOnly: o, hasError: d } = F(), { inputId: l, ariaDescribedBy: m } = N(), [u, R] = y(), C = A(null), L = E(a, I.Rating), _ = [
     "1",
     "2",
     "3",
@@ -45,7 +45,7 @@ const t = ({ children: a }) => {
     className: r,
     "data-invalid": d,
     "data-readonly": o
-  }, _.map((s) => x(L, {
+  }, _.map((s) => G(L, {
     key: s,
     value: s,
     isSelected: f(s),
@@ -79,11 +79,11 @@ const t = ({ children: a }) => {
   }, l) : null));
 };
 I.Rating = b;
-t.Label = q;
+t.Label = z;
 t.Ratings = I;
 t.Rating = b;
-t.Description = G;
-t.Error = H;
+t.Description = H;
+t.Error = q;
 const X = (a) => /* @__PURE__ */ e.createElement("svg", {
   viewBox: "0 0 32 32",
   width: 32,
@@ -94,7 +94,7 @@ const X = (a) => /* @__PURE__ */ e.createElement("svg", {
 }, /* @__PURE__ */ e.createElement("path", {
   fillRule: "evenodd",
   d: "M28.6265,13.6325 C28.9655,13.3015 29.0845,12.8175 28.9385,12.3665 C28.7925,11.9165 28.4105,11.5945 27.9415,11.5265 L20.5785,10.4565 C20.5015,10.4445 20.4345,10.3965 20.4005,10.3275 L17.1075,3.6545 L17.1075,3.6535 C16.8975,3.2295 16.4735,2.9655 16.0005,2.9655 L15.9995,2.9655 C15.5255,2.9655 15.1025,3.2295 14.8925,3.6545 L11.5985,10.3275 C11.5645,10.3965 11.4985,10.4445 11.4225,10.4565 L4.0575,11.5265 C3.5895,11.5945 3.2075,11.9165 3.0615,12.3665 C2.9155,12.8175 3.0345,13.3015 3.3735,13.6325 L8.7025,18.8265 C8.7575,18.8805 8.7835,18.9585 8.7705,19.0345 L7.5125,26.3695 C7.4325,26.8355 7.6205,27.2985 8.0035,27.5765 C8.2195,27.7345 8.4735,27.8145 8.7285,27.8145 C8.9245,27.8145 9.1215,27.7665 9.3045,27.6705 L15.8895,24.2085 C15.9595,24.1725 16.0415,24.1725 16.1085,24.2075 L22.6955,27.6705 C23.1155,27.8915 23.6135,27.8555 23.9965,27.5765 C24.3795,27.2985 24.5675,26.8355 24.4875,26.3695 L23.2305,19.0355 C23.2165,18.9585 23.2425,18.8805 23.2975,18.8265 L28.6265,13.6325 Z"
-})), $ = "_ratings_1n24x_1", V = "_rating_1n24x_1", S = {
+})), $ = "_ratings_1mvz3_1", V = "_rating_1mvz3_1", S = {
   ratings: $,
   rating: V
 }, ee = ({ content: a, locale: r }) => /* @__PURE__ */ e.createElement(D, {
@@ -103,9 +103,9 @@ const X = (a) => /* @__PURE__ */ e.createElement("svg", {
 }), Ee = () => {
   const { t: a } = T(), r = M(J.RATING_OPTION);
   return /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(t.Label, {
-    className: c(Q, p.label)
+    className: c(x, p.label)
   }, /* @__PURE__ */ e.createElement(t.Label.Required, {
-    className: c(z, p.requiredMark)
+    className: c(Q, p.requiredMark)
   })), /* @__PURE__ */ e.createElement(t.Ratings, {
     className: c(K, S.ratings),
     getReactionLabel: (n) => a("rating-input.a11y.reaction-label", {

package/dist/component/{rating-input-rac-DaEgvjIS.js → rating-input-rac-BVO62LmE.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { R as e } from "./rating-input-field-rac-BP0928qI.js";
+import { R as e } from "./rating-input-field-rac-VDaJKq-n.js";
 const o = () => /* @__PURE__ */ t.createElement(e, null);
 export {
   o as RatingInputRAC

package/dist/component/{rich-content-rac.module-zvvH-tWq.js → rich-content-rac.module-CdiaAjxG.js}

@@ -1,5 +1,5 @@
 import c, { useState as u } from "react";
-import { ai as a, ab as i, as as T } from "./form-DCmjj8mZ.js";
+import { ai as a, ab as i, as as T } from "./form-BpHElSwH.js";
 import { Button as d } from "react-aria-components";
 import { D as r } from "./data-hooks-Dkw1pbRj.js";
 import { truncateRichContent as _ } from "@wix/ricos/content";

package/dist/component/{rich-text-field-rac-CFCRiMl_.js → rich-text-field-rac-C4RrbyEX.js}

@@ -1,8 +1,8 @@
 import l from "classnames";
 import e from "react";
-import { ai as m, L as i, W as u, Z as R } from "./form-DCmjj8mZ.js";
-import { u as T, R as C, s as d, T as p } from "./rich-content-rac.module-zvvH-tWq.js";
-import { a5 as g } from "./form-element-classes-Dn33C01k.js";
+import { ai as m, L as i, W as u, Z as R } from "./form-BpHElSwH.js";
+import { u as T, R as C, s as d, T as p } from "./rich-content-rac.module-CdiaAjxG.js";
+import { a7 as g } from "./form-element-classes-BXNs5k3q.js";
 const h = {
   colorPalette: R(),
   customStyles: u()

package/dist/component/{rich-text-rac-BRuLnyN4.js → rich-text-rac-BG376ww9.js}

@@ -1,5 +1,5 @@
 import e from "react";
-import { R as t } from "./rich-text-field-rac-CFCRiMl_.js";
+import { R as t } from "./rich-text-field-rac-C4RrbyEX.js";
 const R = () => /* @__PURE__ */ e.createElement(t, null);
 export {
   R as RichTextRAC