@wix/form-elements 1.63.0 → 1.64.0

package/dist/component/{service-dropdown-rac-BLnflnUr.js → service-dropdown-rac-DUiNIbdv.js}

@@ -1,35 +1,35 @@
-import t, { useRef as P, useMemo as g, useCallback as S, useEffect as T } from "react";
-import { RicosViewer as A } from "@wix/ricos/viewer";
-import u from "classnames";
-import { ad as w, ar as b, F as M, ah as y, ab as H, h as U } from "./form-DzjdnO7t.js";
-import { u as V } from "./use-service-options-base-Ci9gIluo.js";
-import { D as m } from "./dropdown-field-headless-Js5TxdU4.js";
-import { C as q } from "./chevron-down-icon-CcpVm6B-.js";
-import { E as x } from "./error-icon-hZxQ6DEy.js";
-import { H as k } from "./custom-focus-class-_483Pkwp.js";
-import { s as n } from "./field-rac.module-DtugsLiL.js";
-import { r as B, H as W, q as Q, u as Y, l as j, h as z } from "./form-element-classes-Bi-nNM8q.js";
-const G = "00000000-0000-0000-0000-000000000000", J = (e) => {
-  const { actions: r } = w(), { t: C } = b(), { addOther: i, addOtherLabel: p } = e, c = p || C("add-other.default-other-option-label"), a = P(!0), E = g(() => {
+import t, { useRef as P, useMemo as g, useCallback as h, useEffect as T } from "react";
+import { RicosViewer as w } from "@wix/ricos/viewer";
+import m from "classnames";
+import { ae as A, as as b, F as M, ai as y, ab as U, h as V } from "./form-9yjqDnxY.js";
+import { u as x } from "./use-service-options-base-BYVuKRj2.js";
+import { D as d } from "./dropdown-field-headless-DReo519l.js";
+import { C as H } from "./chevron-down-icon-CcpVm6B-.js";
+import { E as k } from "./error-icon-hZxQ6DEy.js";
+import { H as q } from "./custom-focus-class-_483Pkwp.js";
+import { s as n } from "./field-rac.module-CWkwwhq4.js";
+import { t as B, J as W, s as j, w as J, n as Q, j as Y } from "./form-element-classes-KRzHUNLu.js";
+const z = "00000000-0000-0000-0000-000000000000", G = (e) => {
+  const { actions: r } = A(), { t: C } = b(), { addOther: i, addOtherLabel: p } = e, c = p || C("add-other.default-other-option-label"), a = P(!0), E = g(() => {
     var s;
-    return ((s = e.options) == null ? void 0 : s.map((d) => d.id ?? "")) ?? [];
+    return ((s = e.options) == null ? void 0 : s.map((u) => u.id ?? "")) ?? [];
   }, [
     e.options
-  ]), O = S((s) => i ? [
+  ]), O = h((s) => i ? [
     ...s,
     {
       value: c,
       label: c,
-      id: G
+      id: z
     }
   ] : s, [
     i,
     c
-  ]), { isLoading: f, options: l, isEmpty: D, shouldRender: I, setIsLoading: F, setOptions: L, setIsEmpty: h, processOptions: _ } = V({
+  ]), { isLoading: f, options: l, isEmpty: D, shouldRender: I, setIsLoading: F, setOptions: L, setIsEmpty: S, processOptions: _ } = x({
     fieldType: M.SERVICES_DROPDOWN,
     isEditor: e.isEditor,
     postProcessOptions: O
-  }), R = S(async () => {
+  }), R = h(async () => {
     if (a.current && (r != null && r.fetchServices) && E.length > 0) {
       a.current = !1, F(!0);
       let s;
@@ -37,12 +37,12 @@ const G = "00000000-0000-0000-0000-000000000000", J = (e) => {
         s = await r.fetchServices({
           serviceIds: E
         });
-      } catch (d) {
-        console.error(d);
+      } catch (u) {
+        console.error(u);
       }
       if (s) {
-        const d = _(s);
-        h(!i && d.length === 0), L(d);
+        const u = _(s);
+        S(!i && u.length === 0), L(u);
       } else
         a.current = !0;
       F(!1);
@@ -54,25 +54,25 @@ const G = "00000000-0000-0000-0000-000000000000", J = (e) => {
     i,
     F,
     L,
-    h
+    S
   ]);
   T(() => {
     if (!e.isEditor && l.length > 0) {
       const s = i ? l.length - 1 : l.length;
-      h(s === 0);
+      S(s === 0);
     }
   }, [
     l,
     i,
-    h,
+    S,
     e.isEditor
   ]);
-  const v = S(() => {
+  const v = h(() => {
     e.onFocus && e.onFocus(), a.current && R();
   }, [
     R,
     e.onFocus
-  ]), N = S(
+  ]), N = h(
     (s) => {
       e.onChange && e.onChange(s), a.current = !0;
     },
@@ -90,7 +90,7 @@ const G = "00000000-0000-0000-0000-000000000000", J = (e) => {
     shouldRender: I
   };
 }, o = ({ children: e }) => {
-  const r = y(), { addOther: C } = r, i = H(), p = r.isEditor || i.isEditor || i.isComposer, { isLoading: c, options: a, isEmpty: E, onFocus: O, onChange: f, shouldRender: l } = J({
+  const r = y(), { addOther: C } = r, i = U(), p = r.isEditor || i.isEditor || i.isComposer, { isLoading: c, options: a, isEmpty: E, onFocus: O, onChange: f, shouldRender: l } = G({
     ...r,
     isEditor: p
   }), D = g(() => ({
@@ -106,36 +106,36 @@ const G = "00000000-0000-0000-0000-000000000000", J = (e) => {
     O,
     f
   ]);
-  return !p && E && !C || !l ? null : /* @__PURE__ */ t.createElement(U.Provider, {
+  return !p && E && !C || !l ? null : /* @__PURE__ */ t.createElement(V.Provider, {
     value: {
       v2: D
     }
-  }, /* @__PURE__ */ t.createElement(m, null, e));
+  }, /* @__PURE__ */ t.createElement(d, null, e));
 };
-o.Label = m.Label;
-o.Trigger = m.Trigger;
-o.Options = m.Options;
-o.Description = m.Description;
-o.Error = m.Error;
-const K = ({ content: e, locale: r }) => /* @__PURE__ */ t.createElement(A, {
+o.Label = d.Label;
+o.Trigger = d.Trigger;
+o.Options = d.Options;
+o.Description = d.Description;
+o.Error = d.Error;
+const K = ({ content: e, locale: r }) => /* @__PURE__ */ t.createElement(w, {
   content: e,
   locale: r
 }), X = () => /* @__PURE__ */ t.createElement(o, null, /* @__PURE__ */ t.createElement(o.Label, {
-  className: u(B, n.label)
+  className: m(B, n.label)
 }, /* @__PURE__ */ t.createElement(o.Label.Required, {
-  className: u(W, n.requiredMark)
+  className: m(W, n.requiredMark)
 })), /* @__PURE__ */ t.createElement(o.Trigger, {
-  className: u(Q, n.input, n.dropdownTrigger)
-}, /* @__PURE__ */ t.createElement(q, {
+  className: m(j, n.input, n.dropdownTrigger)
+}, /* @__PURE__ */ t.createElement(H, {
   className: n.dropdownIcon
 })), /* @__PURE__ */ t.createElement(o.Options, {
-  className: u(Y, n.selectPopover, n.dropdownPopover)
+  className: m(J, n.selectPopover, n.dropdownPopover)
 }, /* @__PURE__ */ t.createElement(o.Options.Option, {
-  className: u(n.selectOption, k)
+  className: m(n.selectOption, q)
 })), /* @__PURE__ */ t.createElement(o.Error, {
-  className: u(j, n.error)
-}, /* @__PURE__ */ t.createElement(x, null), /* @__PURE__ */ t.createElement(o.Error.Text, null)), /* @__PURE__ */ t.createElement(o.Description, {
-  className: u(z, n.description)
+  className: m(Q, n.error)
+}, /* @__PURE__ */ t.createElement(k, null), /* @__PURE__ */ t.createElement(o.Error.Text, null)), /* @__PURE__ */ t.createElement(o.Description, {
+  className: m(Y, n.description)
 }, K)), le = () => /* @__PURE__ */ t.createElement(X, null);
 export {
   le as ServiceDropdownRAC

package/dist/component/services-multi-choice-rac-B7y9s2l8.js

@@ -0,0 +1,76 @@
+import e, { useEffect as C, useMemo as I } from "react";
+import { RicosViewer as L } from "@wix/ricos/viewer";
+import r from "classnames";
+import { F as R, ai as F, h as d } from "./form-9yjqDnxY.js";
+import { u as D } from "./use-service-options-base-BYVuKRj2.js";
+import { C as i } from "./checkbox-group-field-headless-BDAFpX5F.js";
+import { E as h } from "./error-icon-hZxQ6DEy.js";
+import { s as n } from "./field-rac.module-CWkwwhq4.js";
+import { t as f, J as N, N as b, O as M, P as A, s as v, n as x, j as P } from "./form-element-classes-KRzHUNLu.js";
+import { o as _ } from "./options-rac.module-KM-VT_KY.js";
+const T = (o) => {
+  var S;
+  const { isLoading: s, options: a, isEmpty: c, shouldRender: E, setOptions: l, setIsEmpty: m, setHasInitialDataLoaded: p } = D({
+    fieldType: R.SERVICES_MULTI_CHOICE,
+    isEditor: o.isEditor
+  }), u = (S = o.options) == null ? void 0 : S.every((O) => O.label && O.id);
+  return C(() => {
+    if (u && o.options) {
+      l(o.options), m(o.options.length === 0), p(!0);
+      return;
+    }
+  }, [
+    u,
+    o.options,
+    l,
+    m,
+    p
+  ]), {
+    isLoading: s,
+    options: a,
+    isEmpty: c,
+    shouldRender: E
+  };
+}, t = ({ children: o }) => {
+  const s = F(), { options: a, isEmpty: c, shouldRender: E } = T(s), l = I(() => ({
+    ...s,
+    options: a
+  }), [
+    s,
+    a
+  ]);
+  return !s.isEditor && c || !E ? null : /* @__PURE__ */ e.createElement(d.Provider, {
+    value: {
+      v2: l
+    }
+  }, /* @__PURE__ */ e.createElement(i, null, o));
+};
+t.Label = i.Label;
+t.Options = i.Options;
+t.Description = i.Description;
+t.Error = i.Error;
+const k = ({ content: o, locale: s }) => /* @__PURE__ */ e.createElement(L, {
+  content: o,
+  locale: s
+}), y = () => /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(t.Label, {
+  className: r(f, n.label)
+}, /* @__PURE__ */ e.createElement(t.Label.Required, {
+  className: r(N, n.requiredMark)
+})), /* @__PURE__ */ e.createElement(t.Options, {
+  className: r(b, _.options)
+}, /* @__PURE__ */ e.createElement(t.Options.Option, null, /* @__PURE__ */ e.createElement(t.Options.Option.Checkbox, {
+  className: n.checkbox
+}, /* @__PURE__ */ e.createElement(t.Options.Option.Checkbox.Input, {
+  className: r(M, n.checkboxInput)
+}), /* @__PURE__ */ e.createElement(t.Options.Option.Checkbox.Label, {
+  className: r(A, _.optionLabel)
+})), /* @__PURE__ */ e.createElement(t.Options.Option.OtherInput, {
+  inputClassName: r(v, n.input)
+}))), /* @__PURE__ */ e.createElement(t.Error, {
+  className: r(x, n.error)
+}, /* @__PURE__ */ e.createElement(h, null), /* @__PURE__ */ e.createElement(t.Error.Text, null)), /* @__PURE__ */ e.createElement(t.Description, {
+  className: r(P, n.description)
+}, k)), Q = () => /* @__PURE__ */ e.createElement(y, null);
+export {
+  Q as ServicesMultiChoiceRAC
+};

package/dist/component/{signature-rac-Bb5IaS28.js → signature-rac-CydpvQJZ.js}

@@ -4,14 +4,14 @@ import v from "classnames";
 import { useHover as ve, useFocusRing as xe, mergeProps as Se } from "react-aria";
 import { RadioGroup as Fe, Button as fe, TextField as Ae, Input as _e, RadioField as Pe, RadioButton as Ne } from "react-aria-components";
 import he from "signature_pad";
-import { z as Ue, ad as Oe, ab as Be, ap as ge, E as ce, e as G, ah as A, ae as H, aj as Ee, ar as Me } from "./form-DzjdnO7t.js";
+import { z as Ue, ae as Oe, ab as Be, aq as ge, E as ce, e as G, ai as A, af as H, ak as Ee, as as Me } from "./form-9yjqDnxY.js";
 import { f as T, a as F } from "./find-child-C60k4CxG.js";
-import { D as We, E as He } from "./field-error-headless-DTKnr5Zx.js";
-import { L as Ye } from "./field-label-headless-DV4aNd5Y.js";
+import { D as We, E as He } from "./field-error-headless-DrnFrGun.js";
+import { L as Ye } from "./field-label-headless-BIYf1BIh.js";
 import { D as ke } from "./data-hooks-Dkw1pbRj.js";
 import { E as $e } from "./error-icon-hZxQ6DEy.js";
-import { s as V } from "./field-rac.module-DtugsLiL.js";
-import { r as ue, H as Ve, q as B, V as ze, l as Ze, h as Xe } from "./form-element-classes-Bi-nNM8q.js";
+import { s as z } from "./field-rac.module-CWkwwhq4.js";
+import { t as ue, J as ze, s as B, X as Ve, n as Xe, j as Ze } from "./form-element-classes-KRzHUNLu.js";
 const Ge = typeof s.useId == "function" ? s.useId : () => W(Ue()).current;
 var w = /* @__PURE__ */ (function(e) {
   return e.TEXT = "text/plain", e.POINTS = "points/json", e;
@@ -43,7 +43,7 @@ const qe = (e) => {
   ]);
 };
 function je(e) {
-  const a = z(1, 1).getContext("2d");
+  const a = V(1, 1).getContext("2d");
   a.fillStyle = e, a.fillRect(0, 0, 1, 1);
   const n = a.getImageData(0, 0, 1, 1);
   return n.data[0] * 65536 + n.data[1] * 256 + n.data[2];
@@ -72,7 +72,7 @@ function J(e, t) {
   const p = a.getImageData(l, d, h, E), L = document.createElement("canvas"), y = L.getContext("2d");
   return L.width = h, L.height = E, t ? (y.fillStyle = t, y.fillRect(0, 0, h, E)) : y.clearRect(0, 0, h, E), y.putImageData(p, 0, 0), L;
 }
-function z(e, t, a) {
+function V(e, t, a) {
   const n = document.createElement("canvas");
   if (n.width = e, n.height = t, a) {
     const r = n.getContext("2d", {
@@ -86,7 +86,7 @@ function Qe(e, t) {
   return new Promise((a, n) => {
     const r = new Image();
     r.onload = () => {
-      const o = z(r.width, r.height), i = o.getContext("2d", {
+      const o = V(r.width, r.height), i = o.getContext("2d", {
         willReadFrequently: !0
       });
       i == null || i.drawImage(r, 0, 0), a(o);
@@ -94,7 +94,7 @@ function Qe(e, t) {
   });
 }
 function de(e, t, a, n) {
-  const r = e.width, o = e.height, i = 1, l = a / o, c = Math.min(l, i), d = r * c, u = o * c, f = z(d, u), m = f.getContext("2d");
+  const r = e.width, o = e.height, i = 1, l = a / o, c = Math.min(l, i), d = r * c, u = o * c, f = V(d, u), m = f.getContext("2d");
   return n && m && (m.fillStyle = n, m.fillRect(0, 0, d, u)), m == null || m.drawImage(e, 0, 0, r, o, 0, 0, d, u), f;
 }
 function me(e, t) {
@@ -187,7 +187,7 @@ async function ot(e, t) {
     return e;
   const n = a.mimeType;
   if (n === w.TEXT) {
-    const r = z(M * 20, M, 1);
+    const r = V(M * 20, M, 1);
     nt(r, a.data, "black", t, "white");
     const o = J(r, "white");
     return (o == null ? void 0 : o.toDataURL("image/jpeg", 0.7)) ?? null;
@@ -199,7 +199,7 @@ async function ot(e, t) {
     const o = r.map((u) => ({
       ...u,
       penColor: "black"
-    })), i = z(M * 20, M, Math.max(window.devicePixelRatio || 1, 1));
+    })), i = V(M * 20, M, Math.max(window.devicePixelRatio || 1, 1));
     new he(i).fromData(o);
     const c = J(i);
     return c ? de(c, void 0, M, "white").toDataURL("image/jpeg", 0.7) : null;
@@ -348,12 +348,12 @@ const dt = (e) => {
     renderInput: () => r,
     renderDescription: () => /* @__PURE__ */ s.createElement(s.Fragment, null, i, o)
   });
-}, Z = ({ children: e }) => {
+}, X = ({ children: e }) => {
   const { value: t, onChange: a, target: n, readOnly: r } = A(), { signatureMode: o, setSignatureMode: i, handleClear: l, clearable: c, signatureView: d, signatureValueForView: u, handleChange: f, handleBeforeChange: m } = lt({
     target: n,
     value: t,
     onChange: a
-  }), h = T(e, Z.Header), E = T(e, Z.Value), p = {
+  }), h = T(e, X.Header), E = T(e, X.Value), p = {
     signatureMode: o,
     setSignatureMode: i,
     handleClear: l,
@@ -364,8 +364,8 @@ const dt = (e) => {
     handleBeforeChange: m
   };
   return /* @__PURE__ */ s.createElement(s.Fragment, null, !r && F(h, p), F(E, p));
-}, X = ({ children: e, className: t, ...a }) => {
-  const { signatureMode: n, setSignatureMode: r, clearable: o, handleClear: i } = a, { uploadEnabled: l } = A(), c = T(e, X.Tabs), d = T(e, X.Clear);
+}, Z = ({ children: e, className: t, ...a }) => {
+  const { signatureMode: n, setSignatureMode: r, clearable: o, handleClear: i } = a, { uploadEnabled: l } = A(), c = T(e, Z.Tabs), d = T(e, Z.Clear);
   return /* @__PURE__ */ s.createElement("div", {
     className: t
   }, F(c, {
@@ -653,13 +653,13 @@ const dt = (e) => {
   }, e));
 };
 g.Label = Ye;
-g.Input = Z;
+g.Input = X;
 g.Description = We;
 g.Error = He;
-Z.Header = X;
-Z.Value = P;
-X.Tabs = _;
-X.Clear = gt;
+X.Header = Z;
+X.Value = P;
+Z.Tabs = _;
+Z.Clear = gt;
 _.Draw = pt;
 _.Type = ft;
 _.Upload = ht;
@@ -740,9 +740,9 @@ const Tt = () => {
 }), Ot = () => {
   const e = Tt();
   return /* @__PURE__ */ s.createElement(g, null, /* @__PURE__ */ s.createElement(g.Label, {
-    className: v(ue, V.label)
+    className: v(ue, z.label)
   }, /* @__PURE__ */ s.createElement(g.Label.Required, {
-    className: v(Ve, V.requiredMark)
+    className: v(ze, z.requiredMark)
   })), /* @__PURE__ */ s.createElement(g.Input, null, /* @__PURE__ */ s.createElement(g.Input.Header, {
     className: C.header
   }, /* @__PURE__ */ s.createElement(g.Input.Header.Tabs, {
@@ -783,11 +783,11 @@ const Tt = () => {
     className: v(B, C.uploadBox),
     imageAlt: e.imageAlt
   }, /* @__PURE__ */ s.createElement(g.Input.Value.Upload.Button, {
-    className: v(ze, V.uploadButton)
+    className: v(Ve, z.uploadButton)
   }, e.uploadLabel)))), /* @__PURE__ */ s.createElement(g.Error, {
-    className: v(Ze, V.error)
+    className: v(Xe, z.error)
   }, /* @__PURE__ */ s.createElement($e, null), /* @__PURE__ */ s.createElement(g.Error.Text, null)), /* @__PURE__ */ s.createElement(g.Description, {
-    className: v(Xe, V.description)
+    className: v(Ze, z.description)
   }, Ut));
 }, Jt = () => /* @__PURE__ */ s.createElement(Ot, null);
 export {

package/dist/component/{submit-button-rac-Bjyi8sUA.js → submit-button-rac-OO53h4H8.js}

@@ -1,9 +1,9 @@
 import t from "react";
 import l from "classnames";
-import { ah as c } from "./form-DzjdnO7t.js";
+import { ai as c } from "./form-9yjqDnxY.js";
 import { ProgressBar as N, Button as S } from "react-aria-components";
 import { f as i } from "./find-child-C60k4CxG.js";
-import { X as d, W as g, Z as f } from "./form-element-classes-Bi-nNM8q.js";
+import { Z as d, Y as g, $ as f } from "./form-element-classes-KRzHUNLu.js";
 function x(e) {
   const s = "calc(50% - 2px)";
   return /* @__PURE__ */ t.createElement(N, {
@@ -72,16 +72,16 @@ const u = ({ children: e }) => {
     isDisabled: v || p,
     "data-in-progress": p
   }, p && _ ? _ : a);
-}, h = ({ className: e }) => /* @__PURE__ */ t.createElement("span", {
+}, C = ({ className: e }) => /* @__PURE__ */ t.createElement("span", {
   className: e
 }, /* @__PURE__ */ t.createElement(x, null));
-B.Loader = h;
+B.Loader = C;
 m.PreviousButton = b;
 m.NextButton = E;
 m.SubmitButton = B;
 u.SubmitButton = m;
-const C = "_navigationContainer_1yuje_1", y = "_rowSpacing_1yuje_6", P = "_navigationButton_1yuje_10", T = "_nextButton_1yuje_24", L = "_previousButton_1yuje_47", w = "_button_1yuje_90", j = "_buttonNoSteps_1yuje_122", k = "_buttonWithSteps_1yuje_126", F = "_progress_1yuje_153", r = {
-  navigationContainer: C,
+const h = "_navigationContainer_1yuje_1", y = "_rowSpacing_1yuje_6", P = "_navigationButton_1yuje_10", T = "_nextButton_1yuje_24", L = "_previousButton_1yuje_47", w = "_button_1yuje_90", j = "_buttonNoSteps_1yuje_122", k = "_buttonWithSteps_1yuje_126", F = "_progress_1yuje_153", r = {
+  navigationContainer: h,
   rowSpacing: y,
   navigationButton: P,
   nextButton: T,

package/dist/component/{tags-field-rac-C_VO3_69.js → tags-field-rac-eX3d3JEH.js}

@@ -1,75 +1,75 @@
 import { RicosViewer as j } from "@wix/ricos/viewer";
 import _ from "classnames";
-import e, { useMemo as F, useState as Q, useRef as M, useLayoutEffect as w, useCallback as k } from "react";
-import { CheckboxGroup as z, TextField as J, Input as K, CheckboxField as X, CheckboxButton as Y } from "react-aria-components";
-import { ah as y, ae as Z, ar as T, ab as ee, aj as te } from "./form-DzjdnO7t.js";
+import e, { useMemo as F, useState as J, useRef as M, useLayoutEffect as Q, useCallback as k } from "react";
+import { CheckboxGroup as w, TextField as z, Input as K, CheckboxField as X, CheckboxButton as Y } from "react-aria-components";
+import { ai as y, af as Z, as as v, ab as ee, ak as te } from "./form-9yjqDnxY.js";
 import { f, a as q } from "./find-child-C60k4CxG.js";
-import { E as x, D as B } from "./field-error-headless-DTKnr5Zx.js";
-import { L as P } from "./field-label-headless-DV4aNd5Y.js";
+import { E as x, D as B } from "./field-error-headless-DrnFrGun.js";
+import { L as P } from "./field-label-headless-BIYf1BIh.js";
 import { F as ae } from "./fieldset-headless-CD3fds9J.js";
 import { N as D } from "./options-layout-constants-DEfIEJWD.js";
 import { E as ne } from "./error-icon-hZxQ6DEy.js";
-import { s as S } from "./field-rac.module-DtugsLiL.js";
-import { r as re, H as oe, S as se, T as le, U as ie, q as ce, l as ue, h as de } from "./form-element-classes-Bi-nNM8q.js";
+import { s as S } from "./field-rac.module-CWkwwhq4.js";
+import { t as oe, J as re, U as se, V as le, W as ie, s as ce, n as ue, j as de } from "./form-element-classes-KRzHUNLu.js";
 import { o as me } from "./options-rac.module-KM-VT_KY.js";
 const g = "Other", pe = (t, a) => {
   const c = a.length + 2;
-  return (t.find((r) => r.startsWith(`${a}: `)) || "").slice(c);
-}, he = (t) => t.map((a) => a.value ?? a.label), $ = ({ className: t, ...a }) => {
+  return (t.find((o) => o.startsWith(`${a}: `)) || "").slice(c);
+}, he = (t) => t.map((a) => a.value ?? a.label), W = ({ className: t, ...a }) => {
   const { label: l } = a;
   return /* @__PURE__ */ e.createElement("span", {
     className: t
   }, l);
-}, W = ({ className: t }) => {
-  const { value: a, onChange: l, addOtherLabel: c, addOtherPlaceholder: i, otherInputCharacterLimit: r, disabled: u, readOnly: b, hasError: d } = y(), { t: m } = T(), o = c || m("add-other.default-other-option-label") || g, p = F(() => pe(a || [], o), [
+}, $ = ({ className: t }) => {
+  const { value: a, onChange: l, addOtherLabel: c, addOtherPlaceholder: i, otherInputCharacterLimit: o, disabled: u, readOnly: b, hasError: d } = y(), { t: m } = v(), r = c || m("add-other.default-other-option-label") || g, p = F(() => pe(a || [], r), [
     a,
-    o
-  ]), [n, L] = Q(p), h = M(l);
-  w(() => {
+    r
+  ]), [n, L] = J(p), h = M(l);
+  Q(() => {
     h.current = l;
   });
   const I = k((E) => {
     L(E);
-    const C = (a || []).filter((O) => !O.startsWith(`${o}:`) && O !== o), R = E ? `${o}: ${E}` : o;
+    const C = (a || []).filter((O) => !O.startsWith(`${r}:`) && O !== r), R = E ? `${r}: ${E}` : r;
     h.current([
       ...C,
       R
     ]);
   }, [
     a,
-    o
+    r
   ]);
-  return /* @__PURE__ */ e.createElement(J, {
+  return /* @__PURE__ */ e.createElement(z, {
     value: n,
     onChange: I,
     isDisabled: u,
     isReadOnly: b,
     isInvalid: d,
-    "aria-label": o
+    "aria-label": r
   }, /* @__PURE__ */ e.createElement(K, {
     "data-hook": "tags-other-input",
     "data-filled": n ? !0 : void 0,
     placeholder: i,
-    maxLength: r,
+    maxLength: o,
     className: t
   }));
-}, v = ({ children: t, className: a, ...l }) => {
-  const { value: c, label: i, isOther: r, isFirstOption: u } = l, { id: b, value: d, onChange: m, options: o, disabled: p, readOnly: n, hasError: L } = y(), h = M(null);
+}, T = ({ children: t, className: a, ...l }) => {
+  const { value: c, label: i, isOther: o, isFirstOption: u } = l, { id: b, value: d, onChange: m, options: r, disabled: p, readOnly: n, hasError: L } = y(), h = M(null);
   te(() => {
     var O;
     u && ((O = h.current) == null || O.focus({
       preventScroll: !0
     }));
   }, b);
-  const I = f(t, $), E = F(() => d || [], [
+  const I = f(t, W), E = F(() => d || [], [
     d
-  ]), C = F(() => r ? E.find((O) => O === i || O.startsWith(`${i}: `)) || i : c, [
-    r,
+  ]), C = F(() => o ? E.find((O) => O === i || O.startsWith(`${i}: `)) || i : c, [
+    o,
     E,
     i,
     c
   ]), R = k((O) => {
-    const G = he(o || []), V = E.filter((H) => G.includes(H));
+    const G = he(r || []), V = E.filter((H) => G.includes(H));
     m(O ? [
       ...V,
       i
@@ -77,27 +77,27 @@ const g = "Other", pe = (t, a) => {
   }, [
     i,
     m,
-    o,
+    r,
     E
   ]);
   return /* @__PURE__ */ e.createElement(X, {
     inputRef: h,
     value: C,
-    onChange: r ? R : void 0,
+    onChange: o ? R : void 0,
     isDisabled: p,
     isReadOnly: n,
     isInvalid: L
   }, /* @__PURE__ */ e.createElement(Y, {
     className: a,
-    "data-hook": `tags-${r ? g : c}`
+    "data-hook": `tags-${o ? g : c}`
   }, q(I, {
     value: c,
     label: i,
-    isOther: r,
+    isOther: o,
     isFirstOption: u
   })));
 }, A = ({ children: t, className: a }) => {
-  const { options: l, addOther: c, addOtherLabel: i, numberOfColumns: r = D.FREE_FLOW } = y(), { isMobile: u } = ee(), { t: b } = T(), d = u && r !== D.FREE_FLOW ? D.ONE : r, m = i || b("add-other.default-other-option-label") || g, o = f(t, v), p = F(() => {
+  const { options: l, addOther: c, addOtherLabel: i, numberOfColumns: o = D.FREE_FLOW } = y(), { isMobile: u } = ee(), { t: b } = v(), d = u && o !== D.FREE_FLOW ? D.ONE : o, m = i || b("add-other.default-other-option-label") || g, r = f(t, T), p = F(() => {
     const n = l || [];
     return c ? [
       ...n,
@@ -117,7 +117,7 @@ const g = "Other", pe = (t, a) => {
     "data-columns": d
   }, p.map((n, L) => {
     const h = n.value ?? n.label;
-    return q(o, {
+    return q(r, {
       key: n.isOther ? g : h,
       value: h,
       label: n.label,
@@ -126,7 +126,7 @@ const g = "Other", pe = (t, a) => {
     });
   }));
 }, U = ({ children: t, className: a }) => {
-  const { addOther: l, addOtherLabel: c, hasError: i, readOnly: r, value: u } = y(), { t: b } = T(), d = c || b("add-other.default-other-option-label") || g, m = f(t, A), o = f(t, W), p = F(() => !l || !u ? !1 : u.some((n) => n === d || n.startsWith(`${d}:`)), [
+  const { addOther: l, addOtherLabel: c, hasError: i, readOnly: o, value: u } = y(), { t: b } = v(), d = c || b("add-other.default-other-option-label") || g, m = f(t, A), r = f(t, $), p = F(() => !l || !u ? !1 : u.some((n) => n === d || n.startsWith(`${d}:`)), [
     l,
     u,
     d
@@ -134,10 +134,10 @@ const g = "Other", pe = (t, a) => {
   return /* @__PURE__ */ e.createElement("div", {
     className: a,
     "data-invalid": i,
-    "data-readonly": r
-  }, m, p && o);
+    "data-readonly": o
+  }, m, p && r);
 }, s = ({ children: t }) => {
-  const { id: a, value: l, onChange: c, FieldLayout: i, required: r, disabled: u, readOnly: b, hasError: d, onBlur: m, onFocus: o } = y(), { inputId: p, labelId: n, ariaDescribedBy: L } = Z(), h = F(() => l || [], [
+  const { id: a, value: l, onChange: c, FieldLayout: i, required: o, disabled: u, readOnly: b, hasError: d, onBlur: m, onFocus: r } = y(), { inputId: p, labelId: n, ariaDescribedBy: L } = Z(), h = F(() => l || [], [
     l
   ]), I = f(t, P), E = f(t, U), C = f(t, B), R = f(t, x);
   return /* @__PURE__ */ e.createElement(i, {
@@ -147,27 +147,27 @@ const g = "Other", pe = (t, a) => {
       id: p,
       ariaLabelledBy: n,
       ariaDescribedBy: L,
-      required: r,
+      required: o,
       onBlur: m,
-      onFocus: o
-    }, /* @__PURE__ */ e.createElement(z, {
+      onFocus: r
+    }, /* @__PURE__ */ e.createElement(w, {
       "aria-labelledby": n,
       value: h,
       onChange: c,
       isDisabled: u,
       isReadOnly: b,
-      isRequired: r,
+      isRequired: o,
       isInvalid: d
     }, E)),
     renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, R, C)
   });
 };
-A.Option = v;
-v.Label = $;
+A.Option = T;
+T.Label = W;
 s.Label = P;
 s.Control = U;
 s.Options = A;
-s.OtherInput = W;
+s.OtherInput = $;
 s.Description = B;
 s.Error = x;
 const Ee = "_control_lyoqm_1", Oe = "_options_lyoqm_7", be = "_option_lyoqm_7", N = {
@@ -178,9 +178,9 @@ const Ee = "_control_lyoqm_1", Oe = "_options_lyoqm_7", be = "_option_lyoqm_7",
   content: t,
   locale: a
 }), Ve = () => /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement(s.Label, {
-  className: _(re, S.label)
+  className: _(oe, S.label)
 }, /* @__PURE__ */ e.createElement(s.Label.Required, {
-  className: _(oe, S.requiredMark)
+  className: _(re, S.requiredMark)
 })), /* @__PURE__ */ e.createElement(s.Control, {
   className: N.control
 }, /* @__PURE__ */ e.createElement(s.Options, {

package/dist/component/{tags-rac-CKiutCWe.js → tags-rac-CdIB_48Z.js}

@@ -1,5 +1,5 @@
 import e from "react";
-import { T as r } from "./tags-field-rac-C_VO3_69.js";
+import { T as r } from "./tags-field-rac-eX3d3JEH.js";
 const a = () => /* @__PURE__ */ e.createElement(r, null);
 export {
   a as TagsRAC