@wix/form-elements 0.0.0-stage → 1.54.0

package/dist/component/signature-rac-CIRsmZhS.js

@@ -0,0 +1,795 @@
+import s, { useRef as W, useCallback as I, useState as K, useEffect as Q, useMemo as De, isValidElement as we } from "react";
+import { RicosViewer as Re } from "@wix/ricos/viewer";
+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 { y as Ue, ac as Oe, aa as Be, ao as ge, E as ce, e as q, ag as A, ad as H, ai as Ee, aq as Me } from "./form-DaOKiR16.js";
+import { f as T, a as F } from "./find-child-C60k4CxG.js";
+import { D as We, E as He } from "./field-error-headless-Dm5UCOBb.js";
+import { L as Ye } from "./field-label-headless-C7mDzdLq.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-DAPTqFDM.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";
+const qe = typeof s.useId == "function" ? s.useId : () => W(Ue()).current;
+var w = /* @__PURE__ */ (function(e) {
+  return e.TEXT = "text/plain", e.POINTS = "points/json", e;
+})({}), b = /* @__PURE__ */ (function(e) {
+  return e.DRAW = "draw", e.TYPE = "type", e.UPLOAD = "upload", e;
+})({}), S = /* @__PURE__ */ (function(e) {
+  return e.DRAW = "draw", e.TYPE = "type", e.IMAGE = "image", e.UPLOAD = "upload", e;
+})({});
+const Ge = (e) => {
+  const { actions: t, formId: a } = Oe(), n = t == null ? void 0 : t.uploadFile;
+  return I(async (r) => {
+    if (!n)
+      throw new Error("No uploadFile action");
+    const o = await n({
+      file: r,
+      formId: a,
+      uploadTarget: e
+    }), { id: i, displayName: l, url: c, isPrivate: d } = o;
+    return {
+      fileId: i,
+      displayName: l || r.name,
+      url: d ? void 0 : c,
+      fileType: r.type
+    };
+  }, [
+    n,
+    a,
+    e
+  ]);
+};
+function je(e) {
+  const a = z(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];
+}
+const Je = (e, t) => {
+  const a = je(e);
+  return (n, r) => {
+    const o = (r * t.width + n) * 4;
+    return t.data[o] * 65536 + t.data[o + 1] * 256 + t.data[o + 2] === a;
+  };
+}, Ke = (e) => (t, a) => {
+  const n = (a * e.width + t) * 4;
+  return e.data[n + 3] === 0;
+};
+function J(e, t) {
+  const a = e.getContext("2d", {
+    willReadFrequently: !0
+  }), n = e.width, r = e.height, o = a.getImageData(0, 0, n, r), i = t ? Je(t, o) : Ke(o);
+  let l = n + 1, c = -1, d = r + 1, u = -1, f = 0, m = 0;
+  for (m = 0; m < r; m++)
+    for (f = 0; f < n; f++)
+      i(f, m) || (l > f && (l = f), c < f && (c = f), d > m && (d = m), u < m && (u = m));
+  const h = c - l, E = u - d;
+  if (h < 0 || E < 0)
+    return null;
+  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) {
+  const n = document.createElement("canvas");
+  if (n.width = e, n.height = t, a) {
+    const r = n.getContext("2d", {
+      willReadFrequently: !0
+    });
+    r == null || r.scale(a, a);
+  }
+  return n;
+}
+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", {
+        willReadFrequently: !0
+      });
+      i == null || i.drawImage(r, 0, 0), a(o);
+    }, r.onerror = n, r.src = e;
+  });
+}
+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");
+  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) {
+  const a = e.getContext("2d"), n = e.offsetWidth, r = e.offsetHeight, o = Math.max(window.devicePixelRatio || 1, 1), i = n * o, l = r * o;
+  return (e.width !== i || e.height !== l) && a ? (e.width = i, e.height = l, a.scale(o, o), t == null || t.redraw(), !0) : !1;
+}
+const M = 480, et = (e) => Ce({
+  data: JSON.stringify(e),
+  mimeType: w.POINTS
+}), Le = (e) => {
+  const t = N(e);
+  if ((t == null ? void 0 : t.mimeType) === w.POINTS)
+    try {
+      return JSON.parse(t.data);
+    } catch {
+      return null;
+    }
+  return null;
+}, pe = 0.8, be = "Madefor";
+function ye(e, t) {
+  const { width: a, actualBoundingBoxAscent: n, actualBoundingBoxDescent: r } = t.measureText(e);
+  return {
+    width: a,
+    height: n + r,
+    offsetY: n
+  };
+}
+function tt(e, t) {
+  const a = t.getContext("2d"), n = t.offsetWidth || t.width, o = (t.offsetHeight || t.height) * pe, i = n * pe;
+  a.font = `${o}px ${be}`;
+  const { width: l, height: c } = ye(e, a), d = o / (l / i), u = o / (c / o);
+  return Math.min(d, u);
+}
+function nt(e, t, a = "black", n = !1, r) {
+  const o = e.getContext("2d"), i = tt(t, e);
+  o.font = `${i}px ${be}`, o.textBaseline = "top";
+  const l = e.offsetWidth || e.width, c = e.offsetHeight || e.height, { width: d, height: u, offsetY: f } = ye(t, o);
+  o.fillStyle = r, o.fillRect(0, 0, l, c), o.fillStyle = a;
+  const m = (l - d) / 2;
+  o.fillText(t, n ? l - m : m, (c - u) / 2 + f);
+}
+const Te = /^data:([^;,]+)(?:;([^,]+))?,(.+)$/;
+function at(e) {
+  return Te.test(e);
+}
+function N(e) {
+  if (!e)
+    return;
+  const t = e.match(Te);
+  if (!t)
+    return;
+  const [, a, n, r] = t;
+  return {
+    data: n === "base64" ? atob(r) : decodeURI(r),
+    mimeType: a,
+    encoding: n
+  };
+}
+function Ce({ data: e, mimeType: t, encoding: a = "text" }) {
+  const n = a === "base64" ? btoa(e) : encodeURI(e);
+  return `data:${a === "base64" ? `${t};base64` : t},${n}`;
+}
+function rt(e, t) {
+  const a = N(e);
+  if (!a)
+    return;
+  let n = a.data.length;
+  const r = new Uint8Array(n);
+  for (; n--; )
+    r[n] = a.data.charCodeAt(n);
+  const o = a.mimeType.split("/")[1] ?? "txt";
+  return new File([
+    r
+  ], `${t}.${o}`, {
+    type: a.mimeType
+  });
+}
+function ee(e, t = "temp") {
+  const a = N(e);
+  return {
+    fileId: "temp",
+    displayName: t,
+    url: e,
+    fileType: (a == null ? void 0 : a.mimeType) ?? ""
+  };
+}
+async function ot(e, t) {
+  const a = N(e);
+  if (!a)
+    return e;
+  const n = a.mimeType;
+  if (n === w.TEXT) {
+    const r = z(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;
+  }
+  if (n === w.POINTS) {
+    const r = Le(e);
+    if (!r)
+      return null;
+    const o = r.map((u) => ({
+      ...u,
+      penColor: "black"
+    })), i = z(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;
+  }
+  if (n != null && n.startsWith("image/")) {
+    const r = await Qe(e), o = J(r);
+    return o ? de(o, void 0, M).toDataURL("image/jpeg", 0.7) : null;
+  }
+  return e;
+}
+async function st(e, t) {
+  const a = await ot(e, t);
+  if (a)
+    return rt(a, "signature");
+}
+const it = ({ value: e, onChange: t, target: a }) => {
+  const [n, r] = K(e), { isRTL: o } = Be(), i = Ge(a), { setFormStatus: l } = ge(), c = W();
+  Q(() => {
+    e === ce && r(ce);
+  }, [
+    e
+  ]);
+  const d = I(() => {
+    c.current && (clearTimeout(c.current), c.current = null);
+  }, []), u = n == null ? void 0 : n[0], f = u != null && u.url ? N(u.url) : void 0, m = I(async (E) => {
+    try {
+      const p = (E == null ? void 0 : E.url) ?? "";
+      if (at(p)) {
+        const L = await st(p, o);
+        if (L) {
+          const y = await i(L);
+          t([
+            y
+          ]);
+        } else
+          r(void 0), t(void 0);
+      }
+      c.current = null;
+    } finally {
+      l(a, q.READY);
+    }
+  }, [
+    l,
+    a,
+    o,
+    i,
+    t
+  ]);
+  return {
+    handleChange: I((E) => {
+      const p = (L) => {
+        c.current = setTimeout(() => m(L), 1500);
+      };
+      E ? (c.current && (clearTimeout(c.current), c.current = null), r([
+        E
+      ]), p(E)) : (t == null || t(null), r(void 0), l(a, q.READY));
+    }, [
+      m,
+      t,
+      l,
+      a
+    ]),
+    signature: u,
+    decodedValue: f,
+    cancelUpload: d
+  };
+}, lt = ({ target: e, value: t, onChange: a }) => {
+  const { handleChange: n, cancelUpload: r, signature: o, decodedValue: i } = it({
+    value: t,
+    onChange: a,
+    target: e
+  }), [l, c] = K(() => {
+    if (o == null)
+      return b.DRAW;
+    switch (i == null ? void 0 : i.mimeType) {
+      case w.POINTS:
+        return b.DRAW;
+      case w.TEXT:
+        return b.TYPE;
+      default:
+        return b.UPLOAD;
+    }
+  }), { setFormStatus: d } = ge(), u = I(() => {
+    r(), d(e, q.BUSY);
+  }, [
+    r,
+    d,
+    e
+  ]), f = I(() => {
+    r(), n(null), d(e, q.READY);
+  }, [
+    r,
+    n,
+    d,
+    e
+  ]), m = o != null, h = ut(l, o, i), E = (() => {
+    switch (l) {
+      case b.DRAW:
+        return S.DRAW;
+      case b.TYPE:
+        return S.TYPE;
+      case b.UPLOAD:
+        return h != null ? S.IMAGE : S.UPLOAD;
+      default:
+        return S.DRAW;
+    }
+  })();
+  return {
+    signature: o,
+    decodedValue: i,
+    signatureMode: l,
+    clearable: m,
+    signatureValueForView: h,
+    signatureView: E,
+    handleChange: n,
+    setSignatureMode: c,
+    handleBeforeChange: u,
+    handleClear: f
+  };
+}, ct = {
+  [b.DRAW]: (e) => (e == null ? void 0 : e.mimeType) === w.POINTS,
+  [b.TYPE]: (e) => (e == null ? void 0 : e.mimeType) === w.TEXT,
+  [b.UPLOAD]: (e) => (e == null ? void 0 : e.mimeType) !== w.POINTS && (e == null ? void 0 : e.mimeType) !== w.TEXT
+};
+function ut(e, t, a) {
+  return t && ct[e](a) ? t : void 0;
+}
+const dt = (e) => {
+  const t = e.url ? N(e.url) : void 0;
+  return t ? t.mimeType !== w.POINTS && t.mimeType !== w.TEXT : !0;
+}, te = () => {
+  const { hoverProps: e, isHovered: t } = ve({}), { focusProps: a, isFocused: n, isFocusVisible: r } = xe({
+    within: !0
+  });
+  return {
+    ...Se(e, a),
+    "data-hovered": t || void 0,
+    "data-focus-within": n || void 0,
+    "data-focus-visible": r || void 0
+  };
+}, g = ({ children: e }) => {
+  const { id: t, FieldLayout: a } = A(), n = T(e, g.Label), r = T(e, g.Input), o = T(e, g.Description), i = T(e, g.Error);
+  return /* @__PURE__ */ s.createElement(a, {
+    fieldId: t,
+    renderLabel: () => n,
+    renderInput: () => r,
+    renderDescription: () => /* @__PURE__ */ s.createElement(s.Fragment, null, i, o)
+  });
+}, Z = ({ 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 = {
+    signatureMode: o,
+    setSignatureMode: i,
+    handleClear: l,
+    clearable: c,
+    signatureView: d,
+    signatureValueForView: u,
+    handleChange: f,
+    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);
+  return /* @__PURE__ */ s.createElement("div", {
+    className: t
+  }, F(c, {
+    signatureMode: n,
+    setSignatureMode: r,
+    uploadEnabled: l
+  }), o && F(d, {
+    handleClear: i
+  }));
+}, _ = ({ children: e, className: t, ...a }) => {
+  const { signatureMode: n, setSignatureMode: r, uploadEnabled: o } = a, { disabled: i } = A(), { labelId: l, inputId: c } = H(), d = I((h) => {
+    r(h);
+  }, [
+    r
+  ]), u = {
+    [b.DRAW]: T(e, _.Draw),
+    [b.TYPE]: T(e, _.Type),
+    [b.UPLOAD]: o ? T(e, _.Upload) : null
+  }, f = u[n], m = mt(f) ? f.props.description : void 0;
+  return /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    style: {
+      position: "absolute",
+      left: "-10000px",
+      width: "1px",
+      height: "1px",
+      overflow: "hidden"
+    }
+  }, m), /* @__PURE__ */ s.createElement(Fe, {
+    value: n,
+    onChange: d,
+    isDisabled: i,
+    "aria-labelledby": l,
+    "aria-controls": c,
+    "data-hook": ke.SIGNATURE_FIELD_MODE_SELECT,
+    className: t
+  }, u[b.DRAW], u[b.TYPE], u[b.UPLOAD]));
+}, mt = (e) => /* @__PURE__ */ we(e), ne = ({ mode: e, children: t, className: a, "aria-label": n }) => /* @__PURE__ */ s.createElement(Pe, {
+  value: e,
+  "aria-label": n
+}, /* @__PURE__ */ s.createElement(Ne, {
+  "data-hook": `signature-mode-${e}`,
+  className: a
+}, t)), pt = (e) => /* @__PURE__ */ s.createElement(ne, {
+  ...e,
+  mode: b.DRAW
+}), ft = (e) => /* @__PURE__ */ s.createElement(ne, {
+  ...e,
+  mode: b.TYPE
+}), ht = (e) => /* @__PURE__ */ s.createElement(ne, {
+  ...e,
+  mode: b.UPLOAD
+}), gt = ({ children: e, className: t, "aria-label": a, ...n }) => {
+  const { handleClear: r } = n, { disabled: o, target: i } = A(), { inputId: l } = H();
+  return /* @__PURE__ */ s.createElement(fe, {
+    onPress: r,
+    isDisabled: o,
+    "aria-label": a,
+    "aria-controls": l,
+    "data-hook": `clear-${i}`,
+    className: t
+  }, e);
+}, P = ({ children: e, className: t, ...a }) => {
+  const { signatureView: n, signatureValueForView: r, handleChange: o, handleBeforeChange: i } = a, { disabled: l, readOnly: c, onBlur: d, onFocus: u, hasError: f } = A(), m = T(e, P.Canvas), h = T(e, P.Type), E = T(e, P.Upload);
+  return /* @__PURE__ */ s.createElement("div", {
+    className: t,
+    "data-hook": "signature-input",
+    "data-invalid": f,
+    "data-disabled": l,
+    "data-readonly": c
+  }, n === S.DRAW && F(m, {
+    value: r,
+    onChange: o,
+    onBeforeChange: i,
+    disabled: l,
+    readOnly: c,
+    onBlur: d,
+    onFocus: u
+  }), n === S.TYPE && F(h, {
+    value: r,
+    onChange: o,
+    onBeforeChange: i,
+    disabled: l,
+    readOnly: c,
+    onBlur: d,
+    onFocus: u
+  }), (n === S.UPLOAD || n === S.IMAGE) && F(E, {
+    value: r,
+    onChange: o,
+    onBeforeChange: i,
+    disabled: l,
+    readOnly: c,
+    onBlur: d,
+    onFocus: u
+  }));
+}, Et = ({ className: e, emptyLabel: t, signedLabel: a, ...n }) => {
+  const { value: r, onChange: o, onBeforeChange: i, disabled: l, readOnly: c, onBlur: d, onFocus: u } = n, { id: f } = A(), { inputId: m, ariaDescribedBy: h } = H(), E = te(), p = W(), L = W(), y = W(null), x = r == null ? void 0 : r.url, [U, Y] = K(!1);
+  Ee(() => {
+    var D;
+    (D = L.current) == null || D.focus();
+  }, f);
+  const R = De(() => ({
+    throttle: 0,
+    dotSize: 2,
+    minWidth: 1,
+    maxWidth: 3,
+    velocityFilterWeight: 0.2
+  }), []), oe = I(() => {
+    var O, k, $;
+    if ((O = p.current) != null && O.isEmpty())
+      return "";
+    const D = (k = p.current) == null ? void 0 : k.toData();
+    return D ? et(D) : (($ = p.current) == null ? void 0 : $.toDataURL()) ?? "";
+  }, []), G = I(() => {
+    var O;
+    const D = (O = p.current) == null ? void 0 : O.isEmpty();
+    Y(!D), o(ee(oe()));
+  }, [
+    oe,
+    o
+  ]), j = I(() => {
+    i == null || i();
+  }, [
+    i
+  ]), Ie = I((D) => {
+    var k, $, se, ie;
+    if (D != null) {
+      if (L.current = D, p.current = new he(D, {
+        ...R,
+        penColor: getComputedStyle(D).color || void 0
+      }), me(L.current, p.current), x) {
+        const le = Le(x);
+        le && (p.current.fromData(le), Y(!0));
+      } else
+        p.current.clear(), Y(!1);
+      p.current.addEventListener("beginStroke", j), p.current.addEventListener("endStroke", G), typeof ResizeObserver < "u" && !y.current && (y.current = new ResizeObserver(() => {
+        L.current && me(L.current, p == null ? void 0 : p.current);
+      })), (k = y.current) == null || k.observe(D);
+    } else
+      ($ = y.current) == null || $.disconnect(), (se = p.current) == null || se.removeEventListener("endStroke", G), (ie = p.current) == null || ie.removeEventListener("beginStroke", j);
+  }, [
+    R,
+    x,
+    j,
+    G
+  ]);
+  return Q(() => {
+    p.current && (c || l ? p.current.off() : p.current.on());
+  }, [
+    l,
+    c
+  ]), /* @__PURE__ */ s.createElement("div", {
+    className: e,
+    ...E
+  }, /* @__PURE__ */ s.createElement("canvas", {
+    ref: Ie,
+    id: m,
+    "data-hook": "signature-canvas",
+    "data-input-id": m,
+    "data-has-value": !!x,
+    onFocus: u,
+    onBlur: d,
+    role: "img",
+    "aria-label": U ? a : t,
+    "aria-describedby": h
+  }));
+}, ae = ({ children: e, className: t, ...a }) => {
+  const { value: n, onChange: r, onBeforeChange: o, disabled: i, readOnly: l, onBlur: c, onFocus: d } = a, { id: u, required: f, hasError: m } = A(), { inputId: h, ariaDescribedBy: E, labelId: p } = H(), L = te(), y = n != null && n.url ? N(n.url) : void 0, { data: x = "" } = y ?? {
+    data: ""
+  };
+  Ee(() => {
+    const R = document.getElementById(h);
+    R == null || R.focus({
+      preventScroll: !0
+    });
+  }, u), Q(() => {
+    if (!n) {
+      const R = document.getElementById(h);
+      R && (R.value = "");
+    }
+  }, [
+    n,
+    h
+  ]);
+  const U = I((R) => {
+    o == null || o(), R.trim() ? r(ee(Ce({
+      data: R,
+      mimeType: w.TEXT
+    }))) : r(null);
+  }, [
+    o,
+    r
+  ]), Y = T(e, ae.Value);
+  return /* @__PURE__ */ s.createElement(Ae, {
+    "aria-labelledby": p,
+    value: x,
+    onChange: U,
+    onBlur: c,
+    onFocus: d,
+    isDisabled: i,
+    isReadOnly: l,
+    isRequired: f,
+    isInvalid: m,
+    validationBehavior: "aria"
+  }, /* @__PURE__ */ s.createElement("div", {
+    className: t,
+    ...L
+  }, F(Y, {
+    inputId: h,
+    ariaDescribedBy: E
+  })));
+}, Lt = ({ className: e, placeholder: t, ...a }) => {
+  const { inputId: n, ariaDescribedBy: r } = a;
+  return /* @__PURE__ */ s.createElement(_e, {
+    id: n,
+    "data-hook": "signature-text",
+    "aria-describedby": r,
+    placeholder: t,
+    className: e
+  });
+}, bt = {
+  display: "none"
+}, re = ({ children: e, className: t, imageAlt: a, ...n }) => {
+  const { value: r, onChange: o, disabled: i, readOnly: l, onBlur: c, onFocus: d } = n, { inputId: u } = H(), f = te(), m = T(e, re.Button), h = W(null), E = I((L) => {
+    const y = L.target.files;
+    if (!y || y.length === 0) {
+      o(null);
+      return;
+    }
+    const x = y[0], U = new FileReader();
+    U.onload = function() {
+      o(ee(this.result, x.name));
+    }, U.readAsDataURL(x);
+  }, [
+    o
+  ]), p = r && dt(r);
+  return /* @__PURE__ */ s.createElement("div", {
+    className: t,
+    "data-has-value": p || void 0,
+    ...f
+  }, /* @__PURE__ */ s.createElement("input", {
+    ref: h,
+    type: "file",
+    accept: "image/*",
+    onChange: E,
+    disabled: i || l,
+    style: bt,
+    "aria-hidden": "true",
+    tabIndex: -1
+  }), !p && F(m, {
+    fileInputRef: h,
+    disabled: i,
+    readOnly: l,
+    onBlur: c,
+    onFocus: d
+  }), p && (r.url ? /* @__PURE__ */ s.createElement("img", {
+    id: u,
+    src: r.url,
+    alt: r.displayName || a,
+    "data-hook": "signature-image"
+  }) : /* @__PURE__ */ s.createElement("span", {
+    id: u,
+    "data-hook": "signature-image"
+  }, r.displayName || a)));
+}, yt = ({ children: e, className: t, ...a }) => {
+  const { fileInputRef: n, disabled: r, readOnly: o, onBlur: i, onFocus: l } = a, { inputId: c, ariaDescribedBy: d, labelId: u } = H(), f = qe(), m = I(() => {
+    var h;
+    (h = n.current) == null || h.click();
+  }, [
+    n
+  ]);
+  return /* @__PURE__ */ s.createElement(fe, {
+    id: c,
+    onPress: m,
+    onBlur: i,
+    onFocus: l,
+    isDisabled: r || o,
+    "aria-labelledby": `${u} ${f}`,
+    "aria-describedby": d,
+    "data-hook": "signature-upload",
+    className: t
+  }, /* @__PURE__ */ s.createElement("span", {
+    id: f
+  }, e));
+};
+g.Label = Ye;
+g.Input = Z;
+g.Description = We;
+g.Error = He;
+Z.Header = X;
+Z.Value = P;
+X.Tabs = _;
+X.Clear = gt;
+_.Draw = pt;
+_.Type = ft;
+_.Upload = ht;
+P.Canvas = Et;
+P.Type = ae;
+P.Upload = re;
+ae.Value = Lt;
+re.Button = yt;
+const Tt = () => {
+  const { t: e } = Me();
+  return {
+    drawLabel: e("field.signature.mode.draw.label"),
+    typeLabel: e("field.signature.mode.type.label"),
+    uploadModeLabel: e("field.signature.mode.upload.label"),
+    drawDescription: e("field.signature.mode.draw.description"),
+    typeDescription: e("field.signature.mode.type.description"),
+    uploadDescription: e("field.signature.mode.upload.description"),
+    clearLabel: e("field.signature.clear-button.label"),
+    emptyLabel: e("field.signature.canvas.aria-label.empty"),
+    signedLabel: e("field.signature.canvas.aria-label.signed"),
+    placeholder: e("field.signature.text.placeholder"),
+    imageAlt: e("field.signature.a11y.state.signed"),
+    uploadLabel: e("field.signature.settings.upload-button.label")
+  };
+}, Ct = (e) => /* @__PURE__ */ s.createElement("svg", {
+  viewBox: "0 0 24 24",
+  width: 24,
+  height: 24,
+  fill: "currentColor",
+  "aria-hidden": "true",
+  ...e
+}, /* @__PURE__ */ s.createElement("path", {
+  fillRule: "evenodd",
+  d: "M13.5,3 C14.327,3 15,3.673 15,4.5 L15,4.5 L15,5 L19,5 L19,6 L18,6 L18,17.5 C18,18.879 16.878,20 15.5,20 L15.5,20 L7.5,20 C6.122,20 5,18.879 5,17.5 L5,17.5 L5,6 L4,6 L4,5 L8,5 L8,4.5 C8,3.673 8.673,3 9.5,3 L9.5,3 Z M17,6 L6,6 L6,17.5 C6,18.327 6.673,19 7.5,19 L7.5,19 L15.5,19 C16.327,19 17,18.327 17,17.5 L17,17.5 L17,6 Z M10,9 L10,16 L9,16 L9,9 L10,9 Z M14,9 L14,16 L13,16 L13,9 L14,9 Z M13.5,4 L9.5,4 C9.224,4 9,4.225 9,4.5 L9,4.5 L9,5 L14,5 L14,4.5 C14,4.225 13.776,4 13.5,4 L13.5,4 Z"
+})), It = (e) => /* @__PURE__ */ s.createElement("svg", {
+  viewBox: "0 0 24 24",
+  width: 24,
+  height: 24,
+  fill: "currentColor",
+  "aria-hidden": "true",
+  ...e
+}, /* @__PURE__ */ s.createElement("path", {
+  fillRule: "evenodd",
+  d: "M4.9937,15.9971 L4.9937,18.4971 C4.9937,18.7721 5.2177,18.9971 5.4937,18.9971 L5.4937,18.9971 L17.4937,18.9971 C17.7697,18.9971 17.9937,18.7721 17.9937,18.4971 L17.9937,18.4971 L17.9937,15.9971 L18.9937,15.9971 L18.9937,18.4971 C18.9937,19.3241 18.3207,19.9971 17.4937,19.9971 L17.4937,19.9971 L5.4937,19.9971 C4.6657,19.9971 3.9937,19.3241 3.9937,18.4971 L3.9937,18.4971 L3.9937,15.9971 L4.9937,15.9971 Z M11.9933,4 L11.9933,14.078 L15.0293,11.043 L15.7363,11.75 L11.4933,15.992 L7.2513,11.75 L7.9583,11.043 L10.9933,14.078 L10.9933,4 L11.9933,4 Z"
+})), Dt = (e) => /* @__PURE__ */ s.createElement("svg", {
+  viewBox: "0 0 24 24",
+  width: 24,
+  height: 24,
+  fill: "currentColor",
+  "aria-hidden": "true",
+  ...e
+}, /* @__PURE__ */ s.createElement("path", {
+  fillRule: "evenodd",
+  d: "M18.8525,7.543 L17.7515,8.644 L15.3565,6.248 L16.4575,5.147 C16.5555,5.05 16.6835,5.001 16.8105,5.001 C16.9385,5.001 17.0665,5.05 17.1645,5.147 L18.8525,6.835 C19.0475,7.03 19.0475,7.348 18.8525,7.543 L18.8525,7.543 Z M8.1895,18.206 C8.1185,18.276 8.0275,18.324 7.9295,18.344 L5.1275,18.873 L5.6575,16.07 C5.6755,15.972 5.7225,15.882 5.7945,15.811 L14.6495,6.955 L17.0445,9.351 L8.1895,18.206 Z M19.5595,6.128 L17.8715,4.44 C17.2865,3.856 16.3355,3.856 15.7505,4.44 L5.0875,15.103 C4.8735,15.317 4.7295,15.588 4.6745,15.886 L4.0085,19.407 C3.9775,19.569 4.0295,19.736 4.1465,19.854 C4.2415,19.948 4.3685,20 4.4995,20 C4.5305,20 4.5615,19.997 4.5925,19.991 L8.1165,19.326 C8.4145,19.269 8.6855,19.125 8.8965,18.912 L19.5595,8.25 C20.1445,7.665 20.1445,6.713 19.5595,6.128 L19.5595,6.128 Z"
+})), wt = (e) => /* @__PURE__ */ s.createElement("svg", {
+  viewBox: "0 0 20 20",
+  width: 24,
+  height: 24,
+  fill: "currentColor",
+  "aria-hidden": "true",
+  ...e
+}, /* @__PURE__ */ s.createElement("path", {
+  fillRule: "evenodd",
+  d: "M12,4 L12,5 L8,5 L8,16 L7,16 L7,5 L3,5 L3,4 L12,4 Z M18,8 L18,9 L15,9 L15,16 L14,16 L14,9 L11,9 L11,8 L18,8 Z"
+})), Rt = "_header_15ti0_1", vt = "_tabs_15ti0_8", xt = "_tab_15ti0_8", St = "_tabIcon_15ti0_74", Ft = "_clear_15ti0_81", At = "_value_15ti0_113", _t = "_box_15ti0_118", Pt = "_uploadBox_15ti0_119", Nt = "_typeInput_15ti0_230", C = {
+  header: Rt,
+  tabs: vt,
+  tab: xt,
+  tabIcon: St,
+  clear: Ft,
+  value: At,
+  box: _t,
+  uploadBox: Pt,
+  typeInput: Nt
+}, Ut = ({ content: e, locale: t }) => /* @__PURE__ */ s.createElement(Re, {
+  content: e,
+  locale: t
+}), Ot = () => {
+  const e = Tt();
+  return /* @__PURE__ */ s.createElement(g, null, /* @__PURE__ */ s.createElement(g.Label, {
+    className: v(ue, V.label)
+  }, /* @__PURE__ */ s.createElement(g.Label.Required, {
+    className: v(Ve, V.requiredMark)
+  })), /* @__PURE__ */ s.createElement(g.Input, null, /* @__PURE__ */ s.createElement(g.Input.Header, {
+    className: C.header
+  }, /* @__PURE__ */ s.createElement(g.Input.Header.Tabs, {
+    className: C.tabs
+  }, /* @__PURE__ */ s.createElement(g.Input.Header.Tabs.Draw, {
+    className: v(B, C.tab),
+    "aria-label": e.drawLabel,
+    description: e.drawDescription
+  }, /* @__PURE__ */ s.createElement(Dt, {
+    className: C.tabIcon
+  })), /* @__PURE__ */ s.createElement(g.Input.Header.Tabs.Type, {
+    className: v(B, C.tab),
+    "aria-label": e.typeLabel,
+    description: e.typeDescription
+  }, /* @__PURE__ */ s.createElement(wt, {
+    className: C.tabIcon
+  })), /* @__PURE__ */ s.createElement(g.Input.Header.Tabs.Upload, {
+    className: v(B, C.tab),
+    "aria-label": e.uploadModeLabel,
+    description: e.uploadDescription
+  }, /* @__PURE__ */ s.createElement(It, {
+    className: C.tabIcon
+  }))), /* @__PURE__ */ s.createElement(g.Input.Header.Clear, {
+    className: v(ue, C.clear),
+    "aria-label": e.clearLabel
+  }, /* @__PURE__ */ s.createElement(Ct, null))), /* @__PURE__ */ s.createElement(g.Input.Value, {
+    className: C.value
+  }, /* @__PURE__ */ s.createElement(g.Input.Value.Canvas, {
+    className: v(B, C.box),
+    emptyLabel: e.emptyLabel,
+    signedLabel: e.signedLabel
+  }), /* @__PURE__ */ s.createElement(g.Input.Value.Type, {
+    className: v(B, C.box)
+  }, /* @__PURE__ */ s.createElement(g.Input.Value.Type.Value, {
+    className: C.typeInput,
+    placeholder: e.placeholder
+  })), /* @__PURE__ */ s.createElement(g.Input.Value.Upload, {
+    className: v(B, C.uploadBox),
+    imageAlt: e.imageAlt
+  }, /* @__PURE__ */ s.createElement(g.Input.Value.Upload.Button, {
+    className: v(ze, V.uploadButton)
+  }, e.uploadLabel)))), /* @__PURE__ */ s.createElement(g.Error, {
+    className: v(Ze, V.error)
+  }, /* @__PURE__ */ s.createElement($e, null), /* @__PURE__ */ s.createElement(g.Error.Text, null)), /* @__PURE__ */ s.createElement(g.Description, {
+    className: v(Xe, V.description)
+  }, Ut));
+}, Jt = () => /* @__PURE__ */ s.createElement(Ot, null);
+export {
+  Jt as SignatureRAC
+};