@wix/form-elements 1.62.0 → 1.64.0

package/dist/component/{text-input-headless-BsL6OYhp.js → text-input-headless-Bs9m7QFg.js}

@@ -1,12 +1,12 @@
 import t, { useRef as L } from "react";
-import { TextField as R, Input as g } from "react-aria-components";
-import { ag as d, ad as c, ai as v } from "./form-D6A2hUbV.js";
+import { TextField as R, Input as v } from "react-aria-components";
+import { ai as d, af as c, ak as T } from "./form-9yjqDnxY.js";
 import { f as a } from "./find-child-C60k4CxG.js";
-import { D as T, E as h } from "./field-error-headless-DP4WSQU3.js";
-import { L as x } from "./field-label-headless-BKmi7Fjg.js";
+import { D as g, E as h } from "./field-error-headless-DrnFrGun.js";
+import { L as x } from "./field-label-headless-BIYf1BIh.js";
 const e = ({ children: r }) => {
-  const { id: s, value: i, onChange: l, disabled: u, readOnly: n, required: o, hasError: p, onBlur: m, onFocus: b, FieldLayout: f } = d(), { labelId: E } = c(), I = a(r, e.Label), F = a(r, e.Input), y = a(r, e.Description), D = a(r, e.Error);
-  return /* @__PURE__ */ t.createElement(f, {
+  const { id: s, value: i, onChange: l, disabled: u, readOnly: n, required: o, hasError: p, onBlur: m, onFocus: f, FieldLayout: b } = d(), { labelId: E } = c(), I = a(r, e.Label), F = a(r, e.Input), y = a(r, e.Description), D = a(r, e.Error);
+  return /* @__PURE__ */ t.createElement(b, {
     fieldId: s,
     renderLabel: () => I,
     renderInput: () => /* @__PURE__ */ t.createElement(R, {
@@ -18,16 +18,16 @@ const e = ({ children: r }) => {
       isRequired: o,
       isInvalid: p,
       onBlur: m,
-      onFocus: b
+      onFocus: f
     }, F),
     renderDescription: () => /* @__PURE__ */ t.createElement(t.Fragment, null, D, y)
   });
 }, B = ({ className: r }) => {
   const { id: s, placeholder: i } = d(), { inputId: l, ariaDescribedBy: u } = c(), n = L(null);
-  return v(() => {
+  return T(() => {
     var o;
     (o = n.current) == null || o.focus();
-  }, s), /* @__PURE__ */ t.createElement(g, {
+  }, s), /* @__PURE__ */ t.createElement(v, {
     ref: n,
     id: l,
     "aria-describedby": u,
@@ -37,7 +37,7 @@ const e = ({ children: r }) => {
 };
 e.Label = x;
 e.Input = B;
-e.Description = T;
+e.Description = g;
 e.Error = h;
 export {
   e as T

package/dist/component/{text-input-rac-Bu8kXhrN.js → text-input-rac-DK4nEw4D.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { T as e } from "./text-input-field-rac-wYvY_eBR.js";
+import { T as e } from "./text-input-field-rac-onGUXC9J.js";
 const o = () => /* @__PURE__ */ t.createElement(e, null);
 export {
   o as TextInputRAC

package/dist/component/{time-input-rac-PWXUi1qL.js → time-input-rac-BCG9ktFa.js}

@@ -1,35 +1,35 @@
-import e, { useCallback as H, useRef as q, useContext as V } from "react";
-import { RicosViewer as v } from "@wix/ricos/viewer";
+import e, { useCallback as H, useRef as V, useContext as k } from "react";
+import { RicosViewer as q } from "@wix/ricos/viewer";
 import c from "classnames";
-import { parseTime as x } from "@internationalized/date";
-import { TimeField as B, DateInput as U, DateSegment as h, TimeFieldStateContext as k } from "react-aria-components";
-import { ag as p, ad as j, aq as T, ai as Q } from "./form-D6A2hUbV.js";
+import { parseTime as v } from "@internationalized/date";
+import { TimeField as x, DateInput as B, DateSegment as h, TimeFieldStateContext as U } from "react-aria-components";
+import { ai as p, af as j, as as T, ak as J } from "./form-9yjqDnxY.js";
 import { f as m, a as F } from "./find-child-C60k4CxG.js";
-import { D as z, E as G } from "./field-error-headless-DP4WSQU3.js";
-import { L as J } from "./field-label-headless-BKmi7Fjg.js";
+import { D as Q, E as z } from "./field-error-headless-DrnFrGun.js";
+import { L as G } from "./field-label-headless-BIYf1BIh.js";
 import { E as K } from "./error-icon-hZxQ6DEy.js";
 import { H as S } from "./custom-focus-class-_483Pkwp.js";
-import { s as E } from "./field-rac.module-DtugsLiL.js";
-import { r as W, H as X, q as Y, l as Z, h as $ } from "./form-element-classes-Bi-nNM8q.js";
+import { s as E } from "./field-rac.module-CWkwwhq4.js";
+import { t as W, J as X, s as Y, n as Z, j as $ } from "./form-element-classes-KRzHUNLu.js";
 const r = ({ children: t }) => {
-  const { id: n, value: s, onChange: o, disabled: i, readOnly: l, required: a, onBlur: d, onFocus: f, use24HourFormat: b, FieldLayout: I, hasError: g } = p(), { inputId: C, ariaDescribedBy: L, labelId: D } = j(), R = H((M) => {
+  const { id: n, value: l, onChange: o, disabled: i, readOnly: s, required: a, onBlur: d, onFocus: f, use24HourFormat: b, FieldLayout: I, hasError: C } = p(), { inputId: L, ariaDescribedBy: g, labelId: D } = j(), R = H((M) => {
     const w = ae(M);
     o(w);
   }, [
     o
-  ]), N = m(t, r.Label), y = m(t, r.Time), P = m(t, r.Description), A = m(t, r.Error), O = ne(s);
+  ]), N = m(t, r.Label), y = m(t, r.Time), P = m(t, r.Description), A = m(t, r.Error), O = ne(l);
   return /* @__PURE__ */ e.createElement(I, {
     fieldId: n,
     renderLabel: () => N,
-    renderInput: () => /* @__PURE__ */ e.createElement(B, {
+    renderInput: () => /* @__PURE__ */ e.createElement(x, {
       "aria-labelledby": D,
-      id: C,
-      "aria-describedby": L,
+      id: L,
+      "aria-describedby": g,
       value: O,
       onChange: R,
       isDisabled: i,
-      isReadOnly: l,
-      isInvalid: g,
+      isReadOnly: s,
+      isInvalid: C,
       isRequired: a,
       onBlur: d,
       onFocus: f,
@@ -38,10 +38,10 @@ const r = ({ children: t }) => {
     renderDescription: () => /* @__PURE__ */ e.createElement(e.Fragment, null, A, P)
   });
 }, u = ({ children: t, className: n }) => {
-  const { hasError: s } = p(), o = m(t, u.Hour), i = m(t, u.Minute), l = m(t, u.Period);
-  return /* @__PURE__ */ e.createElement(U, {
+  const { hasError: l } = p(), o = m(t, u.Hour), i = m(t, u.Minute), s = m(t, u.Period);
+  return /* @__PURE__ */ e.createElement(B, {
     className: n,
-    "data-invalid": s || void 0
+    "data-invalid": l || void 0
   }, (a) => {
     switch (a.type) {
       case "hour":
@@ -53,7 +53,7 @@ const r = ({ children: t }) => {
           segment: a
         }) || /* @__PURE__ */ e.createElement(e.Fragment, null);
       case "dayPeriod":
-        return F(l, {
+        return F(s, {
           segment: a
         }) || /* @__PURE__ */ e.createElement(e.Fragment, null);
       case "literal":
@@ -65,12 +65,12 @@ const r = ({ children: t }) => {
     }
   });
 }, ee = ({ className: t, ...n }) => {
-  const { id: s, hidePlaceholder: o } = p(), { segment: i } = n, { t: l } = T(), a = q(null);
-  Q(() => {
+  const { id: l, hidePlaceholder: o } = p(), { segment: i } = n, { t: s } = T(), a = V(null);
+  J(() => {
     var f;
     (f = a.current) == null || f.focus();
-  }, s);
-  const d = o ? void 0 : l("field.date.placeholder.hour");
+  }, l);
+  const d = o ? void 0 : s("field.date.placeholder.hour");
   return /* @__PURE__ */ e.createElement(h, {
     ref: a,
     segment: i,
@@ -80,16 +80,16 @@ const r = ({ children: t }) => {
     }
   });
 }, te = ({ className: t, ...n }) => {
-  const { hidePlaceholder: s } = p(), { segment: o } = n, { t: i } = T(), l = s ? void 0 : i("field.date.placeholder.minute");
+  const { hidePlaceholder: l } = p(), { segment: o } = n, { t: i } = T(), s = l ? void 0 : i("field.date.placeholder.minute");
   return /* @__PURE__ */ e.createElement(h, {
     segment: o,
     className: t,
-    ...l && {
-      placeholder: l
+    ...s && {
+      placeholder: s
     }
   });
 }, re = ({ className: t, ...n }) => {
-  const { hidePlaceholder: s } = p(), { segment: o } = n, { t: i } = T(), l = V(k), a = s ? void 0 : i("field.date.placeholder.period"), d = () => l == null ? void 0 : l.increment("dayPeriod");
+  const { hidePlaceholder: l } = p(), { segment: o } = n, { t: i } = T(), s = k(U), a = l ? void 0 : i("field.date.placeholder.period"), d = () => s == null ? void 0 : s.increment("dayPeriod");
   return /* @__PURE__ */ e.createElement(h, {
     segment: o,
     className: t,
@@ -102,15 +102,15 @@ const r = ({ children: t }) => {
 u.Hour = ee;
 u.Minute = te;
 u.Period = re;
-r.Label = J;
+r.Label = G;
 r.Time = u;
-r.Description = z;
-r.Error = G;
+r.Description = Q;
+r.Error = z;
 function ne(t) {
   if (!t)
     return null;
   try {
-    return x(t);
+    return v(t);
   } catch {
     return null;
   }
@@ -118,19 +118,19 @@ function ne(t) {
 function ae(t) {
   if (!t)
     return null;
-  const n = String(t.hour).padStart(2, "0"), s = String(t.minute).padStart(2, "0"), o = String(t.second).padStart(2, "0");
+  const n = String(t.hour).padStart(2, "0"), l = String(t.minute).padStart(2, "0"), o = String(t.second).padStart(2, "0");
   return [
     n,
-    s,
+    l,
     o
   ].join(":");
 }
-const oe = "_time_1wbmw_1", le = "_hour_1wbmw_14", se = "_minute_1wbmw_15", ie = "_period_1wbmw_16", _ = {
+const oe = "_time_1wbmw_1", se = "_hour_1wbmw_14", le = "_minute_1wbmw_15", ie = "_period_1wbmw_16", _ = {
   time: oe,
-  hour: le,
-  minute: se,
+  hour: se,
+  minute: le,
   period: ie
-}, ce = ({ content: t, locale: n }) => /* @__PURE__ */ e.createElement(v, {
+}, ce = ({ content: t, locale: n }) => /* @__PURE__ */ e.createElement(q, {
   content: t,
   locale: n
 }), me = () => /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement(r.Label, {
@@ -149,7 +149,7 @@ const oe = "_time_1wbmw_1", le = "_hour_1wbmw_14", se = "_minute_1wbmw_15", ie =
   className: c(Z, E.error)
 }, /* @__PURE__ */ e.createElement(K, null), /* @__PURE__ */ e.createElement(r.Error.Text, null)), /* @__PURE__ */ e.createElement(r.Description, {
   className: c($, E.description)
-}, ce)), Ce = () => /* @__PURE__ */ e.createElement(me, null);
+}, ce)), Le = () => /* @__PURE__ */ e.createElement(me, null);
 export {
-  Ce as TimeInputRAC
+  Le as TimeInputRAC
 };

package/dist/component/{url-input-field-rac-B4qgrssx.js → url-input-field-rac-mUkrVTcL.js}

@@ -1,18 +1,18 @@
-import { RicosViewer as h } from "@wix/ricos/viewer";
+import { RicosViewer as O } from "@wix/ricos/viewer";
 import l from "classnames";
-import r, { useCallback as O, useRef as N } from "react";
+import r, { useCallback as h, useRef as N } from "react";
 import { TextField as y, Input as A } from "react-aria-components";
-import { ag as d, ad as E, ai as B } from "./form-D6A2hUbV.js";
+import { ai as E, af as d, ak as k } from "./form-9yjqDnxY.js";
 import { f as u } from "./find-child-C60k4CxG.js";
-import { D as M, E as P } from "./field-error-headless-DP4WSQU3.js";
-import { L as T } from "./field-label-headless-BKmi7Fjg.js";
-import { u as g } from "./use-invoke-callback-UH73A_J3.js";
-import { E as k } from "./error-icon-hZxQ6DEy.js";
-import { s } from "./field-rac.module-DtugsLiL.js";
-import { r as q, H as v, q as U, l as x, h as w } from "./form-element-classes-Bi-nNM8q.js";
-const H = (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 } = d(), { labelId: R } = E(), p = g(f), b = u(t, e.Label), D = u(t, e.Input), _ = u(t, e.Description), C = u(t, e.Error), S = O(() => {
-    a(H(n)), p();
+import { D as B, E as M } from "./field-error-headless-DrnFrGun.js";
+import { L as P } from "./field-label-headless-BIYf1BIh.js";
+import { u as T } from "./use-invoke-callback-UH73A_J3.js";
+import { E as v } from "./error-icon-hZxQ6DEy.js";
+import { s } from "./field-rac.module-CWkwwhq4.js";
+import { t as U, J as g, s as q, n as x, j as w } from "./form-element-classes-KRzHUNLu.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(() => {
+    a(V(n)), p();
   }, [
     p,
     a,
@@ -34,9 +34,9 @@ const H = (t) => t ? `https://${String(t).replace(/^https?:\/\//, "")}` : "", e
     }, D),
     renderDescription: () => /* @__PURE__ */ r.createElement(r.Fragment, null, C, _)
   });
-}, V = ({ className: t }) => {
-  const { id: o, placeholder: n } = d(), { inputId: a, ariaDescribedBy: m } = E(), i = N(null);
-  return B(() => {
+}, W = ({ className: t }) => {
+  const { id: o, placeholder: n } = E(), { inputId: a, ariaDescribedBy: m } = d(), i = N(null);
+  return k(() => {
     var c;
     (c = i.current) == null || c.focus();
   }, o), /* @__PURE__ */ r.createElement(A, {
@@ -48,24 +48,24 @@ const H = (t) => t ? `https://${String(t).replace(/^https?:\/\//, "")}` : "", e
     placeholder: n
   });
 };
-e.Label = T;
-e.Input = V;
-e.Description = M;
-e.Error = P;
-const W = ({ content: t, locale: o }) => /* @__PURE__ */ r.createElement(h, {
+e.Label = P;
+e.Input = W;
+e.Description = B;
+e.Error = M;
+const $ = ({ content: t, locale: o }) => /* @__PURE__ */ r.createElement(O, {
   content: t,
   locale: o
 }), te = () => /* @__PURE__ */ r.createElement(e, null, /* @__PURE__ */ r.createElement(e.Label, {
-  className: l(q, s.label)
+  className: l(U, s.label)
 }, /* @__PURE__ */ r.createElement(e.Label.Required, {
-  className: l(v, s.requiredMark)
+  className: l(g, s.requiredMark)
 })), /* @__PURE__ */ r.createElement(e.Input, {
-  className: l(U, s.input)
+  className: l(q, s.input)
 }), /* @__PURE__ */ r.createElement(e.Error, {
   className: l(x, s.error)
-}, /* @__PURE__ */ r.createElement(k, null), /* @__PURE__ */ r.createElement(e.Error.Text, null)), /* @__PURE__ */ r.createElement(e.Description, {
+}, /* @__PURE__ */ r.createElement(v, null), /* @__PURE__ */ r.createElement(e.Error.Text, null)), /* @__PURE__ */ r.createElement(e.Description, {
   className: l(w, s.description)
-}, W));
+}, $));
 export {
   te as U
 };

package/dist/component/{url-input-rac-Bo51kTsG.js → url-input-rac-Cl7LFYlr.js}

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

package/dist/component/{use-service-options-base-Du6B6AP9.js → use-service-options-base-BYVuKRj2.js}

@@ -1,7 +1,7 @@
 import { useState as o, useCallback as D, useEffect as m, useMemo as b } from "react";
-import { af as v } from "./form-D6A2hUbV.js";
-const k = (I) => {
-  const { fieldType: L, isEditor: t = !1, postProcessOptions: i, customFetchLogic: a, onInitialDataLoaded: n } = I, [O, h] = o(!1), [g, p] = o([]), [E, f] = o(!1), [c, u] = o(!1), s = v(L), r = D((e) => {
+import { ah as v } from "./form-9yjqDnxY.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) => ({
       value: l.id ?? "",
       label: l.name ?? "",
@@ -14,7 +14,7 @@ const k = (I) => {
   m(() => {
     if (s != null && s.services) {
       const e = r(s.services);
-      p(e), f(e.length === 0), u(!0), n && n(e);
+      p(e), u(e.length === 0), f(!0), n && n(e);
     }
   }, [
     s,
@@ -31,15 +31,15 @@ const k = (I) => {
     c
   ]);
   return {
-    isLoading: O,
+    isLoading: L,
     options: g,
     isEmpty: E,
     hasInitialDataLoaded: c,
     shouldRender: y,
-    setIsLoading: h,
+    setIsLoading: O,
     setOptions: p,
-    setIsEmpty: f,
-    setHasInitialDataLoaded: u,
+    setIsEmpty: u,
+    setHasInitialDataLoaded: f,
     processOptions: r
   };
 };

package/dist/form.d.ts

@@ -6907,11 +6907,13 @@ type FormHandle = {
     validateStep?: (stepId: string) => Promise<boolean>;
     getValues?: () => FormValues;
 };
+type ElementProps = Record<string, unknown>;
 type FormProps = {
     id?: string;
     className?: string;
     compId?: string;
     form?: FormSchema;
+    elementProps?: ElementProps;
     values: FormValues;
     onChange: (values: FormValues) => void;
     errors: ValidationError[];
@@ -6927,4 +6929,4 @@ declare const defaultProps: {};
 declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormHandle>>;
 
 export { Form as default, defaultProps };
-export type { FormHandle, FormProps, FormSchema, FormSubmission, FormValue, FormValues, ValidationError };
+export type { ElementProps, FormHandle, FormProps, FormSchema, FormSubmission, FormValue, FormValues, ValidationError };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/form-elements",
-  "version": "1.62.0",
+  "version": "1.64.0",
   "description": "The Wix Forms rendering element for Builder apps, loaded at runtime as @wix/form-elements/Form",
   "license": "MIT",
   "files": [
@@ -10,13 +10,6 @@
     "README.md"
   ],
   "type": "module",
-  "imports": {
-    "#prebuilt-form": {
-      "types": "./src/extensions/form/form.tsx",
-      "default": "./dist/component/form.js"
-    },
-    "#prebuilt-form/style.css": "./dist/component/form.css"
-  },
   "exports": {
     "./Form": {
       "types": "./dist/form.d.ts",
@@ -87,8 +80,6 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
-    "@babel/core": "^7.29.0",
-    "@babel/types": "^7.29.0",
     "@size-limit/file": "^14.0.0",
     "@storybook/react-vite": "^10.6.0",
     "@testing-library/dom": "^10.4.1",
@@ -119,7 +110,6 @@
     "@wix/sdk-types": "^1.17.12",
     "@wix/services-manager-react": "^1.0.8",
     "@wix/sled-playwright": "^1.394.0",
-    "esbuild": "^0.25.0",
     "oxfmt": "^0.62.0",
     "oxlint": "^1.77.0",
     "publint": "^0.3.24",
@@ -131,9 +121,7 @@
     "size-limit": "^14.0.0",
     "storybook": "^10.6.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "unplugin": "^3.0.0",
     "vite": "^6.4.3",
-    "vite-plugin-dynamic-import": "^1.6.0",
     "vitest": "^4.1.11"
   },
   "peerDependencies": {
@@ -163,5 +151,5 @@
       ]
     }
   },
-  "falconPackageHash": "c65576a8141b17fc1016326b69860c9fa683dccb46939aebe36ee985"
+  "falconPackageHash": "098a9a84be69ae07ff11774bc84010816990bb2013beab3e8ba5018d"
 }