@react-form-builder/designer/dist/index.js

OptimaJet Form Designer. Develop front-end drag and drop forms with ease. User-friendly interface reduce the learning curve for your team.

var Uo = Object.defineProperty;
var Jo = (e, t, n) => t in e ? Uo(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var L = (e, t, n) => (Jo(e, typeof t != "symbol" ? t + "" : t, n), n), wt = (e, t, n) => {
  if (!t.has(e))
    throw TypeError("Cannot " + n);
};
var K = (e, t, n) => (wt(e, t, "read from private field"), n ? n.call(e) : t.get(e)), le = (e, t, n) => {
  if (t.has(e))
    throw TypeError("Cannot add the same private member more than once");
  t instanceof WeakSet ? t.add(e) : t.set(e, n);
}, ye = (e, t, n, o) => (wt(e, t, "write to private field"), o ? o.call(e, n) : t.set(e, n), n);
var Ke = (e, t, n) => (wt(e, t, "access private method"), n);
import { jsx as r, jsxs as m, Fragment as F } from "@emotion/react/jsx-runtime";
import v from "@emotion/styled";
import { createNonNullableContext as De, forwardRef as we, namedObserver as w, useStore as N, toLabeledValues as Bt, KeySymbol as Ko, ComponentStore as Te, timeFormat as yt, ActionEventArgsDeclaration as Go, IFormDataDeclaration as qo, useComponentData as O, isPromise as Xo, DataValidator as Yo, isProperty as Xt, isValidatorPropertyBlockType as xt, className as Qo, useTooltipType as Dt, ComponentDataProvider as Ie, key as er, createAnnotation as tr, getValidatorPropertyBlockType as nr, boolean as or, Language as de, BiDi as me, nameObservable as He, BuilderView as Ln, ActionDefinition as Sn, treeForEach as kt, isContainer as Mn, PersistedFormVersion as rr, screenModel as Yt, CalculableResult as Me, initFormFields as ir, generateUniqueName as sr, AsyncFunction as An, calculatePropertyValue as ar, getFluentCompatibleId as cr, testFluentLocalization as lr, getFluentData as dr, nameAutorun as xe, DefaultWrapper as ur, checkSlotCondition as Qt, groupBy as mr, ComponentTree as Pe, TemplateField as hr, slotModel as pr, node as gr, toArray as Cr, findTreeElementDepth as fr, emotionCache as en, loadResource as En, unloadResource as vr, ViewerPropsProvider as Tn, StoreProvider as br, useDisposable as wr, Store as yr, FormViewerPropsStore as xr, ComponentState as kr, getChildren as Lr, useViewerProps as Sr, BuilderContextProvider as Mr, FormViewer as Ar, getKey as Er, ComponentData as Tr, oneOf as Pn, useErrorModel as Pr, tooltipType as Fr, SuppressResizeObserverErrors as Rr } from "@react-form-builder/core";
import { BuilderView as k5 } from "@react-form-builder/core";
import * as C from "react";
import { useCallback as p, useState as E, useEffect as A, cloneElement as Fn, useRef as J, useMemo as M, useReducer as Rn, createElement as zr, Component as Vr, useImperativeHandle as Br, Suspense as Dr } from "react";
import { Checkbox as rt, Table as Ee, InputPicker as Ne, IconButton as U, InputNumber as it, Input as te, Button as H, Form as ee, Whisper as pe, Tooltip as $e, InputGroup as X, TagInput as Ir, Popover as It, DatePicker as zn, SelectPicker as Hr, Animation as Vn, ButtonGroup as se, List as Bn, Dropdown as V, Divider as Nr, TagPicker as $r, RadioGroup as jr, Radio as Or, Message as st, Schema as et, CustomProvider as Wr, useToaster as _r, Modal as Z, Row as Zr, Col as Ur, Nav as Dn, Loader as Jr } from "rsuite";
import { cx as D, css as at } from "@emotion/css";
import { observer as Kr } from "mobx-react";
import { Resizable as Gr } from "re-resizable";
import { upperFirst as In, isObject as Hn, assign as ct, isEmpty as Nn, startCase as $n, isUndefined as lt, cloneDeep as qr, toUpper as jn, replace as Xr, camelCase as Yr } from "lodash-es";
import { computed as Qr, makeAutoObservable as dt, observable as Le, action as Fe, reaction as On, autorun as ke, makeObservable as e1 } from "mobx";
import { debounceTime as t1, distinctUntilChanged as n1, Subject as o1 } from "rxjs";
import { Close as re, Plus as je, Icon as Ht, Code as Wn, Check as r1, Copy as i1, ArrowUpLine as _n, ArrowDownLine as ut, RemindFill as s1, SortUp as a1, SortDown as c1, ArrowRightLine as l1, Danger as d1, Export as u1, Import as m1, FileDownload as h1, FileUpload as p1, Search as g1, ExpandOutline as C1, CollaspedOutline as f1 } from "@rsuite/icons";
import * as Zn from "@fortawesome/free-solid-svg-icons/faCode.js";
import * as v1 from "@fortawesome/free-solid-svg-icons/faGlobe.js";
import * as Ge from "@fortawesome/free-solid-svg-icons/faMarker.js";
import { useTranslation as P, initReactI18next as b1 } from "react-i18next";
import { css as Oe, CacheProvider as w1 } from "@emotion/react";
import { RgbaColorPicker as y1 } from "react-colorful";
import { faMarker as x1, faGlobe as k1, faBars as L1 } from "@fortawesome/free-solid-svg-icons";
import tn, { t as S1 } from "i18next";
import * as M1 from "@fortawesome/free-solid-svg-icons/faCheck.js";
import { format as A1, parse as E1 } from "date-fns";
import { constrainedEditor as T1 } from "constrained-editor-plugin";
import P1, { loader as F1 } from "@monaco-editor/react";
import "monaco-editor";
import R1 from "i18next-browser-languagedetector";
import z1 from "i18next-resources-to-backend";
import { arEG as V1, deDE as B1, enUS as Un, itIT as D1, faIR as I1, frFR as H1, esES as N1, zhCN as $1 } from "rsuite/esm/locales/index.js";
import * as Jn from "@fortawesome/free-solid-svg-icons/faPlay.js";
import { useDrag as j1, useDrop as Kn, useDragLayer as mt, DndProvider as O1 } from "react-dnd";
import { getEmptyImage as W1, HTML5Backend as _1 } from "react-dnd-html5-backend";
import { createPortal as Z1 } from "react-dom";
import * as U1 from "@fortawesome/free-regular-svg-icons/faClone.js";
import * as J1 from "@fortawesome/free-regular-svg-icons/faTrashAlt.js";
import Gn from "scroll-into-view-if-needed";
import * as K1 from "@fortawesome/free-solid-svg-icons/faRedo.js";
import * as Et from "@fortawesome/free-solid-svg-icons/faSave.js";
import * as G1 from "@fortawesome/free-solid-svg-icons/faUndo.js";
import * as q1 from "@fortawesome/free-solid-svg-icons/faTrash.js";
import { saveAs as X1 } from "file-saver";
import qn from "jszip";
import * as Xn from "@fortawesome/free-solid-svg-icons/faPaintBrush.js";
import * as Y1 from "@fortawesome/free-solid-svg-icons/faMoon.js";
import * as Q1 from "@fortawesome/free-solid-svg-icons/faSun.js";
import * as ei from "@fortawesome/free-solid-svg-icons/faDesktop.js";
import * as ti from "@fortawesome/free-solid-svg-icons/faMobile.js";
import * as ni from "@fortawesome/free-solid-svg-icons/faTablet.js";
import * as oi from "@fortawesome/free-solid-svg-icons/faList.js";
import * as ri from "@fortawesome/free-solid-svg-icons/faPlusCircle.js";
import * as ii from "@fortawesome/free-solid-svg-icons/faSitemap.js";
import * as si from "@fortawesome/free-solid-svg-icons/faSlidersH.js";
import * as ai from "@fortawesome/free-solid-svg-icons/faBolt.js";
import * as ci from "@fortawesome/free-solid-svg-icons/faCircle.js";
import * as li from "@fortawesome/free-solid-svg-icons/faSpellCheck.js";
const [
  /**
   * **Internal use only.**
   */
  y,
  /**
   * **Internal use only.**
   */
  di
] = De("BuildStoreContext"), oe = (e, t) => {
  t.displayName = e;
  const n = t, o = `FE_${e}`;
  return (i) => {
    var h;
    const a = (h = y().props.customization) == null ? void 0 : h[e];
    if (!a)
      return /* @__PURE__ */ r(n, { ...i, className: D(o, i.className) });
    if (a.hidden)
      return null;
    const { style: c, customRenderer: l } = a, d = D(o, i == null ? void 0 : i.className, a.className, at`${c}`, e), u = /* @__PURE__ */ r(n, { ...i, className: d });
    return l ? l(u, t, i) : u;
  };
}, _ = (e, t) => oe(e, Kr(t)), { Cell: ui } = Ee, mi = ({ rowData: e, dataKey: t, rowIndex: n, onChange: o, type: i, ...s }) => {
  const a = e[t] ?? "", c = p((d) => {
    e[t] = d, o == null || o(d, t, n);
  }, [t, o, e, n]);
  return /* @__PURE__ */ r(We, { ...s, children: /* @__PURE__ */ r(i === "number" ? it : te, { value: a, onChange: c, size: "sm" }) });
}, f5 = ({ rowData: e, dataKey: t, rowIndex: n, onChange: o, ...i }) => {
  const s = e[t] ?? !1, a = p((c, l) => {
    e[t] = l, o == null || o(l, t, n);
  }, [t, o, e, n]);
  return /* @__PURE__ */ r(We, { ...i, children: /* @__PURE__ */ r(gi, { inline: !0, checked: s, onChange: a }) });
}, hi = ({ rowData: e, dataKey: t, rowIndex: n, options: o, onChange: i, ...s }) => {
  const a = e[t] ?? "", c = p((l) => {
    e[t] = l, i == null || i(l, t, n);
  }, [t, i, e, n]);
  return /* @__PURE__ */ r(We, { ...s, children: /* @__PURE__ */ r(
    Ne,
    {
      value: a,
      data: o,
      onChange: c,
      cleanable: !1,
      creatable: !0,
      block: !0,
      size: "sm",
      placement: "auto"
    }
  ) });
}, pi = ({ rowData: e, rowIndex: t, onAction: n, icon: o, ...i }) => /* @__PURE__ */ r(We, { ...i, children: /* @__PURE__ */ r(
  U,
  {
    appearance: "subtle",
    size: "sm",
    onClick: () => n(t),
    icon: o()
  }
) }), We = v(ui)`
  padding: 0;

  & .rs-table-cell-content {
    padding: 9px 3px;
  }
`, gi = v(rt)`
  & .rs-checkbox-wrapper {
    left: 4px;
    top: 6px;
  }
`, { ErrorMessage: Ci } = ee, { Column: fi, HeaderCell: vi } = Ee, Nt = (e) => {
  const [t, n] = E({}), [o, i] = E(!1), {
    data: s = [],
    onChange: a,
    columns: c,
    label: l,
    errorMessage: d,
    autoAdd: u,
    hideHeader: h,
    onAdd: g,
    onRemove: f,
    ...b
  } = e, { autoHeight: x, maxHeight: k } = t, S = h ? 0 : e.headerHeight ?? 40, W = e.rowHeight ?? 46, q = e.maxRows ?? 5, ne = s.length <= q, ae = e.renderEmpty ? S + W : 0, bt = S + W * q, Je = s.length > q ? bt : ae, G = p((Q) => {
    if (u) {
      const qt = Q[Q.length - 1];
      (!qt || Object.values(qt).some((Zo) => Zo)) && Q.push({});
    }
    a == null || a(Q);
  }, [u, a]), ce = p(() => {
    n({
      autoHeight: ne,
      maxHeight: Je
    });
  }, [Je, ne]), R = p(() => {
    G == null || G([...s, {}]), i(!0), ce(), g == null || g(s.length);
  }, [s, G, ce, g]), z = p((Q) => {
    s.splice(Q, 1), G == null || G(s), ce(), f == null || f(Q);
  }, [s, G, ce, f]), Y = () => c == null ? void 0 : c.map((Q) => Fn(Q, {
    onChange: () => G == null ? void 0 : G([...s])
  })), _o = () => {
    const Q = {};
    return o && (Q.y = Number.MAX_SAFE_INTEGER, i(!1)), Q;
  };
  return A(ce, []), /* @__PURE__ */ m("div", { children: [
    !!l && /* @__PURE__ */ r("label", { children: l }),
    /* @__PURE__ */ m(
      bi,
      {
        data: s,
        headerHeight: S,
        rowHeight: W,
        height: k,
        autoHeight: x,
        shouldUpdateScroll: _o,
        className: D({ hideHeader: h }),
        ...b,
        children: [
          Y(),
          /* @__PURE__ */ m(fi, { width: 34, children: [
            /* @__PURE__ */ r(vi, { children: /* @__PURE__ */ r("div", {}) }),
            /* @__PURE__ */ r(pi, { onAction: z, icon: () => /* @__PURE__ */ r(re, {}) })
          ] })
        ]
      }
    ),
    !!d && /* @__PURE__ */ r(Ci, { show: !!d, placement: "bottomStart", children: d }),
    !u && /* @__PURE__ */ r(H, { appearance: "default", size: "sm", onClick: R, style: { marginTop: 10 }, block: !0, children: /* @__PURE__ */ r(je, {}) })
  ] });
}, bi = v(Ee)`
  .rs-table-cell, .rs-table-row {
    background-color: transparent !important;
  }

  &.hideHeader {
    margin-bottom: -40px;

    .rs-table-header-row-wrapper {
      display: none !important;
    }

    .rs-table-body-row-wrapper {
      top: 0 !important;
    }
  }
`, { Column: wi, HeaderCell: yi } = Ee, $t = (e) => e.map(({ name: t, input: n, title: o, inputProps: i = {} }) => {
  const s = n ?? mi;
  return /* @__PURE__ */ m(wi, { flexGrow: 1, children: [
    /* @__PURE__ */ r(yi, { children: o ?? In(t) }),
    /* @__PURE__ */ r(s, { dataKey: t, ...i })
  ] }, t);
});
let xi = 0;
function ki(e) {
  const t = ++xi;
  return e ? `${e}${t}` : `${t}`;
}
function Yn(e) {
  const t = J(null);
  return t.current || (t.current = ki(e)), t.current;
}
const [
  /**
   * **Internal use only.**
   */
  Li,
  /**
   * **Internal use only.**
   */
  Qn
] = De("TooltipPlacementContext"), eo = ({ hint: e, children: t, ...n }) => e ? /* @__PURE__ */ r(he, { hint: e, children: /* @__PURE__ */ r(nn, { ...n, hinted: !0, children: t }) }) : /* @__PURE__ */ r(nn, { ...n, children: t }), he = ({ hint: e, children: t, ...n }) => {
  const o = Li(), i = n.placement ?? o;
  return e ? /* @__PURE__ */ r(pe, { speaker: /* @__PURE__ */ r($e, { children: e }), placement: i, trigger: "hover", children: t }) : /* @__PURE__ */ r(F, { children: t });
}, ht = ({ hint: e, hintPlacement: t, ...n }) => /* @__PURE__ */ r(he, { hint: e, placement: t ?? "bottom", children: /* @__PURE__ */ r(U, { ...n, size: "xs" }) }), nn = v.label`
  min-width: 80px;

  ${({ hinted: e }) => e && `
    :hover {
      text-decoration: underline;
      text-decoration-style: dotted;
    }
  `};
`, T = (e) => {
  const [t, { exists: n }] = P();
  return (o) => {
    const i = `${e}.${o}`;
    return n(i) ? t(i) : "";
  };
}, jt = 5, j = v.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: ${({ gap: e }) => e ?? jt}px;
`, ie = v.div`
  display: flex;
  gap: ${({ gap: e }) => e ?? jt}px;
  ${({ stretchElements: e }) => e && "& > * { flex: 1; }"};
  ${({ spaceBetween: e }) => e && "justify-content: space-between"};
`, to = v.div`
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;

  & > label {
    width: 100px;
    min-width: 80px;
  }
`, no = Oe`
  && {
    display: flex;
    position: relative;
    background-color: var(--rs-btn-default-bg);
    border-radius: 10px;
    padding: 8px;
    padding-inline-start: 12px;
    align-items: center;
    user-select: none;
    justify-content: space-between;
  }
`, oo = Oe`
  && {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: ${jt}px;
  }
`, Si = Oe`
  && > * {
    cursor: pointer;

    :hover {
      background-color: var(--rs-btn-default-hover-bg);
    }
  }
`, Re = v.div`
  ${no}
`, Ot = v.div`
  ${oo}
  ${({ clickable: e = !1 }) => e && Si}
`, Mi = we(({ faIcon: e, size: t, ...n }, o) => {
  const { width: i, height: s, svgPathData: a } = Ai(e);
  return /* @__PURE__ */ r(
    "svg",
    {
      viewBox: `0 0 ${i} ${s}`,
      width: `${t ?? 1}em`,
      height: `${t ?? 1}em`,
      fill: "currentColor",
      ...n,
      ref: o,
      children: /* @__PURE__ */ r("path", { d: a })
    }
  );
}), Ai = (e) => {
  if (e != null && e.icon) {
    const [t, n, , , o] = e.icon;
    return { width: t, height: n, svgPathData: o };
  }
  return e;
}, I = we(({ icon: e, size: t, ...n }, o) => /* @__PURE__ */ r(Ht, { as: Mi, ref: o, faIcon: e, size: t, ...n })), Ei = at`
  &:after {
    padding-left: 3px;
    content: "*";
    color: red;
  }
`, Ti = {
  disabled: {
    hint: "neitherCalculableNorLocalizable",
    icon: Ge,
    color: "var(--rs-btn-default-disabled-bg)"
  },
  calculation: {
    hint: "editCalculable",
    color: "var(--rs-btn-primary-bg)",
    icon: Zn
  },
  localization: {
    hint: "editLocalizable",
    color: "var(--rs-btn-primary-bg)",
    icon: v1
  },
  calculable: {
    hint: "hintCalculable",
    icon: Ge
  },
  localizable: {
    hint: "hintLocalizable",
    icon: Ge
  },
  calculableAndLocalizable: {
    hint: "hintCalculableAndLocalizable",
    icon: Ge
  }
}, Pi = (e) => {
  const { annotation: t, getComputeCode: n, setComputeCode: o, disableCompute: i, getComputeType: s, hasComputeCode: a, componentData: c } = e, l = y(), d = !t.calculable && !t.localizable, u = T("propertiesEditor.codeButton"), h = s(), g = M(() => {
    const x = h === "function" && a("function"), k = h === "localization" && a("localization");
    return d ? "disabled" : x ? "calculation" : k ? "localization" : t.calculable && t.localizable ? "calculableAndLocalizable" : t.calculable ? "calculable" : t.localizable ? "localizable" : "disabled";
  }, [t.calculable, t.localizable, d, a, h]), f = M(() => {
    const { hint: x, icon: k, color: S } = Ti[g];
    return { icon: k, color: S, hint: u(x) };
  }, [g, u]), b = p(() => l.currentEditable = new po(
    i,
    o,
    n,
    s,
    a,
    t,
    c.key
  ), [t, c.key, i, n, s, a, o, l]);
  return /* @__PURE__ */ r(he, { hint: f.hint, children: /* @__PURE__ */ r(
    Di,
    {
      onClick: b,
      disabled: d,
      icon: /* @__PURE__ */ r(I, { icon: f.icon, color: f.color }),
      size: "xs",
      appearance: "subtle"
    }
  ) });
}, Fi = _("PropertyCodeButton", Pi), Ri = oe("PropertyLabel", eo), zi = (e) => /* @__PURE__ */ r("div", { style: { width: "100%" }, ...e }), Vi = oe("PropertyInput", zi), Bi = (e) => {
  const { annotation: t, children: n, style: o } = e, { className: i, ...s } = e, a = Yn("id-"), c = e.componentData.model.type, l = T(`annotation.${t.key}`), d = T(`${c}.${t.key}`), u = (g) => d(g) || l(g), h = t.required ? Ei : void 0;
  return /* @__PURE__ */ m(to, { style: o, className: i, children: [
    /* @__PURE__ */ m(ie, { gap: 10, style: { alignItems: "center" }, children: [
      /* @__PURE__ */ r(Fi, { ...s }),
      /* @__PURE__ */ r(Ri, { htmlFor: a, hint: t.hint ?? u("hint"), className: h, children: /* @__PURE__ */ r(F, { children: u("name") || t.name }) })
    ] }),
    !!n && /* @__PURE__ */ r(Vi, { children: Fn(n, { id: a }) })
  ] });
}, $ = oe("LabeledProperty", Bi), Di = v(U)`
  min-width: 24px;
  margin-inline-end: -6px;
`, Ii = [{ name: "value" }, { name: "label" }], Hi = (e) => {
  const { value: t, onChange: n, annotation: o, componentData: i } = e, { onAdd: s, onRemove: a, columns: c, calculateEditorProps: l } = o.editorProps ?? {}, d = N(), u = M(() => $t(c ?? Ii), [c]), h = p((b) => {
    s == null || s(b, i, d);
  }, [d, i, s]), g = p((b) => {
    a == null || a(b, i, d);
  }, [d, i, a]), f = (l == null ? void 0 : l(i, n)) ?? {};
  return /* @__PURE__ */ m(F, { children: [
    /* @__PURE__ */ r($, { ...e }),
    /* @__PURE__ */ r(
      Nt,
      {
        data: t,
        onChange: n,
        columns: u,
        onRemove: g,
        onAdd: h,
        ...f
      }
    )
  ] });
}, Ni = w("ArrayInput", Hi), on = (e, t) => {
  try {
    return JSON.stringify(e, null, t);
  } catch {
    return;
  }
}, $i = (e) => {
  const { value: t, onChange: n, onClean: o, onValidate: i, editorKey: s, editorTitle: a } = e, c = y(), l = M(() => (Hn(t) ? on(t, 2) : t) ?? "", [t]), d = M(() => {
    var h;
    return t ? ((h = on(t)) == null ? void 0 : h.substring(0, 50)) ?? "Error" : "";
  }, [t]), u = p(() => {
    c.editJsonCode(s, a, l, n, i);
  }, [c, s, a, n, l, i]);
  return /* @__PURE__ */ m(X, { inside: !0, size: "xs", children: [
    /* @__PURE__ */ r(te, { value: d, onClick: u, readOnly: !0, color: "var(--rs-btn-ghost-text)" }),
    /* @__PURE__ */ r(X.Button, { onClick: t ? o : u, children: t ? /* @__PURE__ */ r(re, {}) : /* @__PURE__ */ r(Wn, {}) })
  ] });
}, ji = (e) => {
  const t = JSON.parse(e);
  if (typeof t != "object" || Array.isArray(t))
    throw new Error("The value must be an object");
}, Oi = ({ rowData: e, dataKey: t, rowIndex: n, onChange: o, editorTitle: i, ...s }) => {
  const a = e[t] ?? {}, c = M(() => `${i}[${n}]`, [i, n]), l = p((u) => {
    e[t] = u, o == null || o(u, t, n);
  }, [t, o, e, n]), d = p(() => {
    l(void 0);
  }, [l]);
  return /* @__PURE__ */ r(We, { ...s, children: /* @__PURE__ */ r(
    $i,
    {
      editorKey: `${t}-${n}`,
      editorTitle: c,
      value: a,
      onChange: l,
      onClean: d,
      onValidate: ji
    }
  ) });
}, Wi = [{ name: "item", input: Oi }], _i = (e) => {
  var s;
  const { value: t, onChange: n, annotation: o } = e, i = M(() => {
    var l;
    const a = ((l = o.editorProps) == null ? void 0 : l.columns) ?? Wi, c = a == null ? void 0 : a[0];
    return c && !c.inputProps && (c.inputProps = { editorTitle: `${e.componentData.key}.${o.name}` }), $t(a);
  }, [(s = o.editorProps) == null ? void 0 : s.columns, o.name, e.componentData.key]);
  return /* @__PURE__ */ m(F, { children: [
    /* @__PURE__ */ r($, { ...e }),
    /* @__PURE__ */ r(Nt, { data: t, onChange: n, columns: i })
  ] });
}, Zi = (e) => {
  const { value: t, onChange: n, onClean: o } = e, i = T("propertiesEditor");
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(
    Ir,
    {
      value: t ?? "",
      onChange: n,
      onClean: o,
      block: !0,
      size: "xs",
      style: { width: "100%" },
      placeholder: i("setInputHint")
    }
  ) });
}, Ui = [
  "a",
  "abbr",
  "about",
  "accentHeight",
  "accept",
  "acceptCharset",
  "accessKey",
  "accumulate",
  "action",
  "additive",
  "address",
  "alignmentBaseline",
  "allowFullScreen",
  "allowReorder",
  "allowTransparency",
  "alphabetic",
  "alt",
  "altGlyph",
  "altGlyphDef",
  "altGlyphItem",
  "amplitude",
  "animate",
  "animateColor",
  "animateMotion",
  "animateTransform",
  "arabicForm",
  "area",
  "article",
  "ascent",
  "aside",
  "async",
  "attributeName",
  "attributeType",
  "audio",
  "autoCapitalize",
  "autoComplete",
  "autoCorrect",
  "autoFocus",
  "autoPlay",
  "autoReverse",
  "autoSave",
  "azimuth",
  "b",
  "base",
  "baseFrequency",
  "baselineShift",
  "baseProfile",
  "bbox",
  "bdi",
  "bdo",
  "begin",
  "bias",
  "blockquote",
  "body",
  "br",
  "button",
  "by",
  "calcMode",
  "canvas",
  "capHeight",
  "caption",
  "capture",
  "cellPadding",
  "cellSpacing",
  "challenge",
  "charSet",
  "checked",
  "circle",
  "cite",
  "classID",
  "className",
  "clip",
  "clipPath",
  "clipPathUnits",
  "clipRule",
  "code",
  "col",
  "colgroup",
  "color",
  "color-profile",
  "colorInterpolation",
  "colorInterpolationFilters",
  "colorProfile",
  "colorRendering",
  "cols",
  "colSpan",
  "content",
  "contentEditable",
  "contentScriptType",
  "contentStyleType",
  "contextMenu",
  "controls",
  "coords",
  "crossOrigin",
  "cursor",
  "cx",
  "cy",
  "d",
  "dangerouslySetInnerHTML",
  "data",
  "datalist",
  "datatype",
  "dateTime",
  "dd",
  "decelerate",
  "default",
  "defaultChecked",
  "defaultValue",
  "defer",
  "defs",
  "del",
  "desc",
  "descent",
  "details",
  "dfn",
  "dialog",
  "diffuseConstant",
  "dir",
  "direction",
  "disabled",
  "display",
  "div",
  "divisor",
  "dl",
  "dominantBaseline",
  "download",
  "draggable",
  "dt",
  "dur",
  "dx",
  "dy",
  "edgeMode",
  "elevation",
  "ellipse",
  "em",
  "embed",
  "enableBackground",
  "encType",
  "end",
  "exponent",
  "externalResourcesRequired",
  "feBlend",
  "feColorMatrix",
  "feComponentTransfer",
  "feComposite",
  "feConvolveMatrix",
  "feDiffuseLighting",
  "feDisplacementMap",
  "feDistantLight",
  "feFlood",
  "feFuncA",
  "feFuncB",
  "feFuncG",
  "feFuncR",
  "feGaussianBlur",
  "feImage",
  "feMerge",
  "feMergeNode",
  "feMorphology",
  "feOffset",
  "fePointLight",
  "feSpecularLighting",
  "feSpotLight",
  "feTile",
  "feTurbulence",
  "fieldset",
  "figcaption",
  "figure",
  "fill",
  "fillOpacity",
  "fillRule",
  "filter",
  "filterRes",
  "filterUnits",
  "floodColor",
  "floodOpacity",
  "focusable",
  "font",
  "font-face",
  "font-face-format",
  "font-face-name",
  "font-face-src",
  "font-face-uri",
  "fontFamily",
  "fontSize",
  "fontSizeAdjust",
  "fontStretch",
  "fontStyle",
  "fontVariant",
  "fontWeight",
  "footer",
  "foreignObject",
  "form",
  "formAction",
  "format",
  "formEncType",
  "formMethod",
  "formNoValidate",
  "formTarget",
  "frameBorder",
  "from",
  "fx",
  "fy",
  "g",
  "g1",
  "g2",
  "glyph",
  "glyphName",
  "glyphOrientationHorizontal",
  "glyphOrientationVertical",
  "glyphRef",
  "gradientTransform",
  "gradientUnits",
  "h1",
  "h2",
  "h3",
  "h4",
  "h5",
  "h6",
  "hanging",
  "head",
  "header",
  "headers",
  "height",
  "hgroup",
  "hidden",
  "high",
  "hkern",
  "horizAdvX",
  "horizOriginX",
  "hr",
  "href",
  "hrefLang",
  "html",
  "htmlFor",
  "httpEquiv",
  "i",
  "icon",
  "id",
  "ideographic",
  "iframe",
  "image",
  "imageRendering",
  "img",
  "in",
  "in2",
  "inlist",
  "input",
  "inputMode",
  "ins",
  "integrity",
  "intercept",
  "is",
  "itemID",
  "itemProp",
  "itemRef",
  "itemScope",
  "itemType",
  "k",
  "k1",
  "k2",
  "k3",
  "k4",
  "kbd",
  "kernelMatrix",
  "kernelUnitLength",
  "kerning",
  "keygen",
  "keyParams",
  "keyPoints",
  "keySplines",
  "keyTimes",
  "keyType",
  "kind",
  "label",
  "lang",
  "legend",
  "lengthAdjust",
  "letterSpacing",
  "li",
  "lightingColor",
  "limitingConeAngle",
  "line",
  "linearGradient",
  "link",
  "list",
  "local",
  "loop",
  "low",
  "main",
  "manifest",
  "map",
  "marginHeight",
  "marginWidth",
  "mark",
  "marker",
  "markerEnd",
  "markerHeight",
  "markerMid",
  "markerStart",
  "markerUnits",
  "markerWidth",
  "mask",
  "maskContentUnits",
  "maskUnits",
  "math",
  "mathematical",
  "max",
  "maxLength",
  "media",
  "mediaGroup",
  "menu",
  "menuitem",
  "meta",
  "metadata",
  "meter",
  "method",
  "min",
  "minLength",
  "missing-glyph",
  "mode",
  "mpath",
  "multiple",
  "muted",
  "name",
  "nav",
  "nonce",
  "noscript",
  "noValidate",
  "numOctaves",
  "object",
  "offset",
  "ol",
  "onBlur",
  "onChange",
  "onClick",
  "onFocus",
  "onInput",
  "onInvalid",
  "onKeyDown",
  "onKeyPress",
  "onKeyUp",
  "onSubmit",
  "opacity",
  "open",
  "operator",
  "optgroup",
  "optimum",
  "option",
  "order",
  "orient",
  "orientation",
  "origin",
  "output",
  "overflow",
  "overlinePosition",
  "overlineThickness",
  "p",
  "paintOrder",
  "panose1",
  "param",
  "path",
  "pathLength",
  "pattern",
  "patternContentUnits",
  "patternTransform",
  "patternUnits",
  "picture",
  "placeholder",
  "playsInline",
  "pointerEvents",
  "points",
  "pointsAtX",
  "pointsAtY",
  "pointsAtZ",
  "polygon",
  "polyline",
  "poster",
  "pre",
  "prefix",
  "preload",
  "preserveAlpha",
  "preserveAspectRatio",
  "primitiveUnits",
  "profile",
  "progress",
  "property",
  "q",
  "r",
  "radialGradient",
  "radioGroup",
  "radius",
  "rb",
  "readOnly",
  "rect",
  "refX",
  "refY",
  "rel",
  "renderingIntent",
  "repeatCount",
  "repeatDur",
  "required",
  "requiredExtensions",
  "requiredFeatures",
  "resource",
  "restart",
  "result",
  "results",
  "reversed",
  "role",
  "rotate",
  "rows",
  "rowSpan",
  "rp",
  "rt",
  "rtc",
  "ruby",
  "rx",
  "ry",
  "s",
  "samp",
  "sandbox",
  "scale",
  "scope",
  "scoped",
  "script",
  "scrolling",
  "seamless",
  "section",
  "security",
  "seed",
  "select",
  "selected",
  "set",
  "shape",
  "shapeRendering",
  "size",
  "sizes",
  "slope",
  "slot",
  "small",
  "source",
  "spacing",
  "span",
  "specularConstant",
  "specularExponent",
  "speed",
  "spellCheck",
  "spreadMethod",
  "src",
  "srcDoc",
  "srcLang",
  "srcSet",
  "start",
  "startOffset",
  "stdDeviation",
  "stemh",
  "stemv",
  "step",
  "stitchTiles",
  "stop",
  "stopColor",
  "stopOpacity",
  "strikethroughPosition",
  "strikethroughThickness",
  "string",
  "stroke",
  "strokeDasharray",
  "strokeDashoffset",
  "strokeLinecap",
  "strokeLinejoin",
  "strokeMiterlimit",
  "strokeOpacity",
  "strokeWidth",
  "strong",
  "style",
  "sub",
  "summary",
  "sup",
  "suppressContentEditableWarning",
  "surfaceScale",
  "svg",
  "switch",
  "symbol",
  "systemLanguage",
  "tabIndex",
  "table",
  "tableValues",
  "target",
  "targetX",
  "targetY",
  "tbody",
  "td",
  "template",
  "text",
  "textAnchor",
  "textarea",
  "textDecoration",
  "textLength",
  "textPath",
  "textRendering",
  "tfoot",
  "th",
  "thead",
  "time",
  "title",
  "to",
  "tr",
  "track",
  "transform",
  "tref",
  "tspan",
  "type",
  "typeof",
  "u",
  "u1",
  "u2",
  "ul",
  "underlinePosition",
  "underlineThickness",
  "unicode",
  "unicodeBidi",
  "unicodeRange",
  "unitsPerEm",
  "unselectable",
  "use",
  "useMap",
  "vAlphabetic",
  "value",
  "values",
  "var",
  "vectorEffect",
  "version",
  "vertAdvY",
  "vertOriginX",
  "vertOriginY",
  "vHanging",
  "video",
  "vIdeographic",
  "view",
  "viewBox",
  "viewTarget",
  "visibility",
  "vkern",
  "vMathematical",
  "vocab",
  "wbr",
  "width",
  "widths",
  "wmode",
  "wordSpacing",
  "wrap",
  "writingMode",
  "x",
  "x1",
  "x2",
  "xChannelSelector",
  "xHeight",
  "xlinkActuate",
  "xlinkArcrole",
  "xlinkHref",
  "xlinkRole",
  "xlinkShow",
  "xlinkTitle",
  "xlinkType",
  "xmlBase",
  "xmlLang",
  "xmlns",
  "xmlnsXlink",
  "xmlSpace",
  "y",
  "y1",
  "y2",
  "yChannelSelector",
  "z",
  "zoomAndPan"
], Ji = $t([
  {
    name: "name",
    input: hi,
    inputProps: { options: Bt(Ui, !1) }
  },
  { name: "value" }
]), Ki = ({ confirm: e }) => {
  const t = T("common");
  return /* @__PURE__ */ r(U, { icon: /* @__PURE__ */ r(r1, {}), onClick: e, color: "green", appearance: "primary", size: "xs", children: t("apply") });
}, Gi = (e) => {
  const { store: t } = e.componentData, n = !!e.getComputeType(), o = M(
    () => t.htmlAttributes ? [...t.htmlAttributes] : t.htmlAttributes,
    [t]
  ), [i, s] = E(o), [a, c] = E(!1), l = p((u) => {
    s(u), c(!0);
  }, []), d = p(() => {
    t.htmlAttributes = i, c(!1);
  }, [t, i]);
  return A(() => {
    s(o), c(!1);
  }, [o, t]), /* @__PURE__ */ m(F, { children: [
    /* @__PURE__ */ r($, { ...e, children: a && /* @__PURE__ */ r(Ki, { confirm: d }) }),
    !n && /* @__PURE__ */ r(Nt, { data: i ?? [], onChange: l, columns: Ji })
  ] });
}, qi = w("RawAttributesInput", Gi), rn = (e) => {
  const { value: t, onChange: n } = e;
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(ro, { checked: !!t, onChange: (o, i) => n(i) }) });
}, ro = v(rt)`
  && {
    height: 23px;
    display: flex;
    align-items: center;
    width: 100%;

    .rs-checkbox-checker {
      padding-left: 0;
      margin-left: -10px;
    }
  }
`, Xi = (e) => {
  const { value: t, onChange: n, onClean: o } = e, i = ts(t ?? "rgba(255, 255, 255, 0)");
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ m(X, { inside: !0, style: { width: "100%" }, size: "xs", children: [
    /* @__PURE__ */ r(pe, { placement: "auto", trigger: "hover", speaker: /* @__PURE__ */ r(It, { children: /* @__PURE__ */ r(y1, { color: i, onChange: (a) => n(es(a)) }) }), enterable: !0, children: /* @__PURE__ */ r(Yi, { color: t, readOnly: !0 }) }),
    /* @__PURE__ */ r(Qi, { onClick: o, children: /* @__PURE__ */ r(re, {}) })
  ] }) });
}, Yi = v(te)`
  && {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>');
    background-color: ${({ color: e }) => e ?? "var(--rs-btn-default-bg)"};
  }
`, Qi = v(X.Button)`
  && {
    background-color: var(--rs-btn-default-bg) !important;
    position: absolute;
    inset-inline-end: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding: 6px 8px;
  }
`;
function es(e) {
  const { r: t, g: n, b: o, a: i } = e;
  return `rgba(${t}, ${n}, ${o}, ${i})`;
}
function ts(e) {
  const t = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/, [, n, o, i, s] = t.exec(e) || [];
  return { r: Number(n), g: Number(o), b: Number(i), a: Number(s) };
}
const ns = (e) => {
  const { onChange: t, onClean: n, value: o } = e;
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(
    zn,
    {
      editable: !1,
      cleanable: !0,
      placement: "auto",
      value: o ?? null,
      onChange: t,
      onClean: n,
      size: "xs"
    }
  ) });
}, Wt = (e) => {
  const t = T("common");
  return /* @__PURE__ */ r(ht, { hint: t("edit"), icon: /* @__PURE__ */ r(I, { icon: x1 }), ...e });
}, os = (e) => {
  const t = T("common");
  return /* @__PURE__ */ r(ht, { hint: t("clone"), icon: /* @__PURE__ */ r(i1, {}), ...e });
}, pt = (e) => {
  const t = T("common");
  return /* @__PURE__ */ r(ht, { hint: t("remove"), icon: /* @__PURE__ */ r(re, {}), ...e });
};
function _t(e) {
  return M(() => Qr(e), [e]).get();
}
const [
  /**
   * **Internal use only.**
   */
  _e,
  /**
   * **Internal use only.**
   */
  rs
] = De("ActionDataContext"), Zt = ({ width: e, ...t }) => /* @__PURE__ */ r(Hr, { ...t, style: { width: e } }), is = [
  { label: "True", value: !0 },
  { label: "False", value: !1 }
], ss = ({ name: e }) => {
  var i;
  const t = _e(), n = p((s) => {
    const a = ct({}, t.args);
    delete a[e], typeof s < "u" && (a[e] = s), t.args = a;
  }, [t, e]), o = p(() => {
    n(void 0);
  }, [n]);
  return /* @__PURE__ */ r(
    Zt,
    {
      onClean: o,
      data: is,
      searchable: !1,
      value: ((i = t.args) == null ? void 0 : i[e]) ?? "",
      onSelect: n,
      size: "sm",
      width: "100%"
    }
  );
}, as = w("InputBoolean", ss), cs = ({ name: e }) => {
  var s;
  const t = _e(), n = typeof ((s = t.args) == null ? void 0 : s[e]) < "u" ? Number(t.args[e]) : "", o = p((a) => {
    const c = ct({}, t.args);
    delete c[e], (typeof a == "string" || typeof a == "number") && (c[e] = Number(a)), t.args = c;
  }, [t, e]), i = p(() => {
    o(null);
  }, [o]);
  return /* @__PURE__ */ m(X, { size: "sm", children: [
    /* @__PURE__ */ r(it, { value: n, onChange: o, onReset: i, size: "sm" }),
    /* @__PURE__ */ r(X.Button, { onClick: i, children: /* @__PURE__ */ r(re, {}) })
  ] });
}, ls = w("InputNumber", cs), ds = ({ name: e }) => {
  var i, s;
  const t = _e(), n = ((s = (i = t.args) == null ? void 0 : i[e]) == null ? void 0 : s.toString()) ?? "";
  return /* @__PURE__ */ r(X, { size: "sm", children: /* @__PURE__ */ r(te, { value: n, onChange: (a) => t.args = ct({}, t.args, { [e]: a }) }) });
}, us = w("InputString", ds), ms = (e) => {
  switch (e) {
    case "string":
      return us;
    case "number":
      return ls;
    case "boolean":
      return as;
  }
}, hs = ({ data: e }) => {
  const [t, n] = e, o = ms(n);
  return /* @__PURE__ */ m(j, { children: [
    /* @__PURE__ */ r("label", { children: t }),
    /* @__PURE__ */ r(o, { name: t })
  ] });
}, ps = w("ArgumentItem", hs), gs = () => {
  const e = _e();
  A(() => () => {
    Nn(e.args) && delete e.args;
  }, [e.args]);
}, Cs = () => {
  const e = N(), t = _e(), n = p(() => e.findAction(t), [t, e]), o = _t(n), [i, s] = Rn((c) => !c, !1), a = i ? _n : ut;
  return gs(), Object.keys(o.params).length ? /* @__PURE__ */ m("div", { onMouseDown: (c) => c.stopPropagation(), children: [
    /* @__PURE__ */ r(Vn.Collapse, { in: i, unmountOnExit: !0, children: /* @__PURE__ */ r(j, { gap: 1, style: { marginBlock: 8, paddingInline: 10 }, children: Object.entries(o.params).map((c, l) => /* @__PURE__ */ r(ps, { data: c }, l)) }) }),
    /* @__PURE__ */ r(vs, { block: !0, onClick: s, children: /* @__PURE__ */ m(F, { children: [
      S1("actions.arguments"),
      /* @__PURE__ */ r(a, { style: { marginTop: -2 } })
    ] }) })
  ] }) : null;
}, fs = w("ArgumentList", Cs), vs = v(H)`
  padding: 5px !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: var(--rs-btn-subtle-text) !important;

  &:focus {
    box-shadow: none;
    background-color: initial;
  }
`, bs = ({ data: e, onRemove: t }) => {
  const n = y(), o = N(), i = e.type === "code", s = () => {
    const a = o.form.actions[e.name];
    if (!a) {
      console.error(`Cannot find custom action: '${e.name}'`);
      return;
    }
    const c = { name: e.name, actionDefinition: a };
    n.editCodeAction(c);
  };
  return /* @__PURE__ */ m(rs, { value: e, children: [
    /* @__PURE__ */ m(ie, { style: { justifyContent: "space-between", padding: 8 }, children: [
      /* @__PURE__ */ r("b", { style: { color: "violet", marginLeft: 5 }, children: `${e.name || "Action"}` }),
      /* @__PURE__ */ m(se, { size: "xs", children: [
        i && /* @__PURE__ */ r(Wt, { onClick: s }),
        /* @__PURE__ */ r(pt, { onClick: t })
      ] })
    ] }),
    /* @__PURE__ */ r(fs, {})
  ] });
}, ws = w("ActionItem", bs);
function ys({ data: e, index: t, onRemove: n }) {
  const o = p(() => n(t), [t, n]);
  return /* @__PURE__ */ r(Ss, { index: t, children: /* @__PURE__ */ r(ws, { data: e, onRemove: o }) });
}
const xs = (e) => {
  var s;
  const t = e.annotation.key, n = (s = e.componentData.store.events) == null ? void 0 : s[t], o = p((a) => n == null ? void 0 : n.splice(a, 1), [n]), i = p((a) => {
    if (!n || !(a != null && a.oldIndex || a != null && a.newIndex))
      return;
    const c = n[a.oldIndex];
    n.splice(a.oldIndex, 1), n.splice(a.newIndex, 0, c);
  }, [n]);
  return n != null && n.length ? /* @__PURE__ */ r(Ls, { sortable: !0, onSort: i, children: n.map((a, c) => /* @__PURE__ */ r(ys, { index: c, data: a, onRemove: o }, a[Ko])) }) : null;
}, ks = w("ActionList", xs), Ls = v(Bn)`
  ${oo}
  && {
    box-shadow: none;
  }
`, Ss = v(Bn.Item)`
  ${no}
  && {
    overflow: hidden;
    padding: 0;
    box-shadow: none;
    flex-direction: column;
    align-items: initial;
  }

  &.rs-list-item-helper {
    outline: 2px solid var(--rs-btn-primary-bg);
  }
`, Ms = ({ onSelect: e, annotation: t }) => {
  var u;
  const n = N(), o = y(), i = (u = o.oneSelected) == null ? void 0 : u.store, s = t.key, a = n.form.actionNames, c = T("actions"), l = () => {
    e(), i && o.addCodeAction((h) => {
      Te.addEventHandler(i, s, { name: h.name, type: "code" });
    });
  }, d = (h) => /* @__PURE__ */ r(
    V.Item,
    {
      onClick: () => e({ name: h, type: "code" }),
      style: { position: "relative", display: "flex", justifyContent: "space-between" },
      children: /* @__PURE__ */ r("span", { style: { whiteSpace: "break-spaces" }, children: h })
    },
    h
  );
  return /* @__PURE__ */ m(V.Menu, { title: c("code"), children: [
    a == null ? void 0 : a.map(d),
    !!(a != null && a.length) && /* @__PURE__ */ r(V.Item, { disabled: !0, children: /* @__PURE__ */ r(Nr, { style: { marginTop: 0, marginBottom: 0 } }) }),
    /* @__PURE__ */ r(V.Item, { children: c("addCodeAction"), icon: /* @__PURE__ */ r(je, {}), onClick: l })
  ] });
}, As = w("CodeActionsList", Ms), Es = ({ onSelect: e }) => {
  const t = N(), n = T("actions"), o = Object.keys(t.commonActions).map(
    (i) => /* @__PURE__ */ r(V.Item, { children: i, onClick: () => e({ name: i, type: "common" }) }, i)
  );
  return /* @__PURE__ */ r(V.Menu, { title: n("common"), children: o });
}, Ts = ({ onSelect: e }) => {
  const t = N(), n = T("actions"), o = t.formViewerPropsStore.actions;
  if (!o)
    return null;
  const i = Object.keys(o).map(
    (s) => /* @__PURE__ */ r(V.Item, { children: s, onClick: () => e({ name: s, type: "custom" }) }, s)
  );
  return /* @__PURE__ */ r(V.Menu, { title: n("custom"), children: i });
}, Ps = (e) => {
  const t = T("actions"), { componentData: n, annotation: o } = e, i = n.store, s = o.key, a = J(null), c = p((l) => {
    var d;
    (d = a.current) == null || d.close(), l && Te.addEventHandler(i, s, l);
  }, [a, i, s]);
  return /* @__PURE__ */ r(
    pe,
    {
      placement: "leftStart",
      ref: a,
      trigger: "click",
      speaker: /* @__PURE__ */ r(Rs, { onSelect: c, annotation: o }),
      children: /* @__PURE__ */ r(U, { icon: /* @__PURE__ */ r(je, {}), size: "sm", children: t("addAction") })
    }
  );
}, Fs = w("AddActionButton", Ps), Rs = we(({ onSelect: e, annotation: t, ...n }, o) => /* @__PURE__ */ r(It, { ref: o, ...n, full: !0, children: /* @__PURE__ */ m(V.Menu, { children: [
  /* @__PURE__ */ r(Es, { onSelect: e, annotation: t }),
  /* @__PURE__ */ r(As, { onSelect: e, annotation: t }),
  /* @__PURE__ */ r(Ts, { onSelect: e, annotation: t })
] }) })), zs = v.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
`, Vs = v.h6`
  margin-left: 10px;
`, Bs = (e) => {
  const t = e.annotation.key;
  return /* @__PURE__ */ m(zs, { children: [
    /* @__PURE__ */ r(Vs, { children: t }),
    /* @__PURE__ */ r(ks, { ...e }),
    /* @__PURE__ */ r(Fs, { ...e })
  ] });
}, Ds = (e) => /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(Is, { ...e }) }), Is = (e) => {
  const t = N(), { id: n, value: o, onChange: i, showError: s } = e, [a, c] = E(!1), [l, d] = E(o), u = T("propertiesEditor");
  A(() => {
    d(o), c(!1);
  }, [o]);
  const h = p((k) => t.reduceScreen((S, W) => W.key === k ? S + 1 : S, 0) === 0 && k.length > 0, [t]), g = p((k) => {
    const S = h(k);
    let W;
    if (!S && k !== o) {
      const q = k.length > 0 ? "keyMustBeUnique" : "keyMustNotBeEmpty";
      W = u(q);
    }
    s == null || s(W), c(S), d(k);
  }, [o, u, s, h]), f = p(() => {
    a && (i(l), c(!1));
  }, [a, i, l]), b = p((k) => {
    k.key === "Enter" && a && f();
  }, [a, f]), x = M(() => u("applyKey"), [u]);
  return /* @__PURE__ */ m(X, { size: "xs", children: [
    /* @__PURE__ */ r(te, { id: n, value: l, onChange: g, onKeyDown: b }),
    /* @__PURE__ */ r(he, { hint: x, children: /* @__PURE__ */ r(X.Button, { disabled: !a, onClick: f, children: /* @__PURE__ */ r(
      I,
      {
        icon: M1,
        color: a ? "green" : void 0
      }
    ) }) })
  ] });
}, Hs = w("KeyInput", Ds), Ns = ({ data: e }, t) => {
  const n = e.map((o) => ({
    value: o.value,
    label: o.label
  }));
  return t.forEach((o) => {
    n.find((i) => i.value === o) || n.push({ value: o, label: $n(o) });
  }), n;
}, $s = (e) => {
  const { value: t, onChange: n, annotation: o, onClean: i } = e, s = Ns(o, t);
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(
    js,
    {
      value: t ?? [],
      data: s,
      onChange: n,
      onClean: i,
      cleanable: !0,
      creatable: !0,
      size: "xs",
      placement: "auto"
    }
  ) });
}, js = v($r)`
  width: 100%;
`, Os = (e) => {
  const { value: t, onChange: n, onClean: o, annotation: i, componentData: s } = e, a = p((h) => {
    typeof h == "string" && (h = Number(h), h = isNaN(h) ? 0 : h), n(h);
  }, [n]), { calculateEditorProps: c, ...l } = i.editorProps ?? {}, d = {
    ...l,
    ...(c == null ? void 0 : c(s)) ?? {},
    value: typeof t == "number" ? t : null
  };
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(Ws, { ...d, onChange: a, size: "xs", postfix: /* @__PURE__ */ r(re, { onClick: o, style: { cursor: "pointer" } }) }) });
}, Ws = v(it)`
  .rs-input-group-addon {
    padding: 1px 8px !important;
  }
`, sn = (e, t) => {
  try {
    return JSON.stringify(e, null, t);
  } catch {
    return;
  }
}, _s = (e) => {
  const { value: t, onChange: n, onClean: o, annotation: i } = e, s = y(), a = M(() => (Hn(t) ? sn(t, 2) : t) ?? "", [t]), c = M(() => {
    var d;
    return t ? ((d = sn(t)) == null ? void 0 : d.substring(0, 50)) ?? "Error" : "";
  }, [t]), l = p(() => {
    const d = `${e.componentData.key}.${i.name}`;
    s.editJsonCode(i.key, d, a, n);
  }, [i.key, i.name, s, n, e.componentData.key, a]);
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ m(X, { inside: !0, size: "xs", children: [
    /* @__PURE__ */ r(te, { value: c, onClick: l, readOnly: !0, color: "var(--rs-btn-ghost-text)" }),
    /* @__PURE__ */ r(X.Button, { onClick: t ? o : l, children: t ? /* @__PURE__ */ r(re, {}) : /* @__PURE__ */ r(Wn, {}) })
  ] }) });
}, Zs = w("ObjectInput", _s), Us = ({ data: e }, t) => (lt(t) || e.find((n) => n.value === t || n.label === t) || e.push({ value: t, label: t }), e), Ut = (e) => {
  const { value: t, onChange: n, annotation: o, onClean: i } = e, s = Us(o, t);
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(
    Js,
    {
      value: t ?? e.annotation.default ?? "",
      data: s,
      onChange: n,
      onClean: i,
      block: !0,
      cleanable: !0,
      creatable: !0,
      size: "xs",
      ...e.annotation.editorProps,
      placement: "autoVerticalEnd"
    }
  ) });
}, Js = v(Ne)`
  width: 100%;
`, Jt = ({ label: e, items: t, style: n, ...o }) => /* @__PURE__ */ m(Ks, { style: n, children: [
  !!e && /* @__PURE__ */ r("label", { children: e }),
  /* @__PURE__ */ r(jr, { ...o, size: "xs", inline: !0, appearance: "picker", children: t == null ? void 0 : t.map(({ value: i, label: s }, a) => /* @__PURE__ */ r(Or, { value: i, children: s ?? i }, a)) })
] }), Ks = v.div`
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  flex: 1;

  .rs-radio-group {
    width: 100%;
    justify-content: space-evenly;
  }

  .rs-radio-group-picker .rs-radio-inline {
    padding: 0;
  }

  .rs-radio-checker {
    min-height: 27px;
    max-height: 27px;
    margin: 0 7px !important;

    label {
      line-height: 14px !important;
      padding: 4px 0 !important;
    }
  }
`, Gs = (e) => {
  const { value: t, onChange: n, annotation: o } = e;
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(Jt, { items: o.data, onChange: n, value: t }) });
}, qs = (e) => {
  var d;
  const t = e.componentData.store, n = (u) => {
    if (!t.renderWhen) {
      t.renderWhen = { value: u };
      return;
    }
    t.renderWhen.value = u;
  }, o = p(() => {
    var u;
    return ((u = t.renderWhen) == null ? void 0 : u.fnSource) ?? "";
  }, [t]), i = p(() => {
    var u;
    return (u = t.renderWhen) == null ? void 0 : u.computeType;
  }, [t]), s = p((u) => u === "function" ? !!o() : !1, [o]), a = p((u) => {
    t.renderWhen ?? (t.renderWhen = {}), t.renderWhen.fnSource = u, t.renderWhen.computeType = "function";
  }, [t]), c = p(() => {
    t.renderWhen && (t.renderWhen.computeType = void 0);
  }, [t]), l = {
    annotation: e.annotation,
    componentData: e.componentData,
    getComputeCode: o,
    getComputeType: i,
    setComputeCode: a,
    disableCompute: c,
    hasComputeCode: s
  };
  return /* @__PURE__ */ r($, { ...l, children: /* @__PURE__ */ r(te, { value: ((d = t.renderWhen) == null ? void 0 : d.value) ?? "", onChange: n, size: "xs" }) });
}, Xs = w("RenderWhenEditor", qs), Ae = "other", io = ["px", "%", "em", "vw", "vh"], Kt = ["max-content", "min-content", "fit-content", "auto"], Ys = Bt([...io, ...Kt, Ae], !1), Qs = (e) => {
  const { value: t, onChange: n, onClean: o } = e, { value: i, unit: s } = ea(t), a = (d) => n(an(d, s)), c = (d) => d && n(an(i ?? 10, d)), l = s === Ae ? /* @__PURE__ */ r(te, { value: i, size: "xs", onChange: a }) : /* @__PURE__ */ r(it, { value: i, size: "xs", onChange: a });
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ m(na, { children: [
    Tt(s) && l,
    /* @__PURE__ */ r(
      oa,
      {
        value: s ?? "",
        onChange: c,
        data: Ys,
        className: D({ withValue: Tt(s) }),
        creatable: !0,
        placement: "bottomEnd",
        size: "xs",
        onClean: o
      }
    )
  ] }) });
};
function ea(e) {
  if (!e)
    return {};
  if (Kt.includes(e))
    return { unit: e };
  const t = e.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]{2,4}|%)$/i);
  if (!t)
    return { value: e, unit: Ae };
  const n = parseFloat(t[1]), o = t[2];
  return io.includes(o) ? { value: n, unit: o } : { value: `${n}${o}`, unit: Ae };
}
const Tt = (e) => typeof e < "u" && !Kt.includes(e), an = (e, t) => {
  const n = ta(e, t);
  return `${Tt(t) ? n : ""}${t === Ae ? "" : t}`;
};
function ta(e, t) {
  if (t !== Ae && typeof e == "string") {
    const n = e.match(/[+-]?\d+(\.\d+)?/);
    return parseFloat((n == null ? void 0 : n[0]) ?? "10");
  }
  return e;
}
const na = v.div`
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: center;
`, oa = v(Ne)`
  width: auto;

  &.withValue {
    width: min-content;
    min-width: 78px;
  }
`, ra = v.div`
  display: inline-grid;
  vertical-align: top;
  align-items: center;
  position: relative;
  width: 100%;

  &::after,
  & > textarea {
    min-width: 1em !important;
    width: auto !important;
    height: 100% !important;
    grid-area: 2 / 1;
    resize: none !important;
    max-height: 6em !important;
  }

  &::after {
    content: attr(data-contents) ' ';
    visibility: hidden;
    // text behaviour must match with textarea
    font-size: inherit !important;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  button {
    position: absolute;
    top: 4px;
    right: 14px;
    color: var(--rs-text-secondary);
    width: 12px;
    height: 12px;
  }
`, ia = ({ onClick: e }) => {
  const t = T("propertiesEditor"), n = M(() => t("clean"), [t]);
  return /* @__PURE__ */ r(he, { hint: n, children: /* @__PURE__ */ r("button", { className: D(["rs-picker-clean", "rs-btn-close"]), onClick: e, children: /* @__PURE__ */ r(re, {}) }) });
}, sa = (e) => {
  const { value: t = "", annotation: n, onChange: o, onClean: i } = e, s = J(null), a = J(null);
  return A(() => {
    const c = a.current;
    c && (c.dataset.contents = t);
  }, [t]), A(() => {
    const c = s.current, l = a.current;
    if (c && l) {
      const d = window.getComputedStyle(c);
      l.style.lineHeight = d.lineHeight, l.style.fontSize = d.fontSize;
    }
  }, []), /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ m(ra, { ref: a, children: [
    /* @__PURE__ */ r(
      te,
      {
        ref: s,
        rows: 1,
        name: n.key,
        value: t,
        onChange: o,
        size: "xs",
        as: "textarea",
        ...e.annotation.editorProps
      }
    ),
    /* @__PURE__ */ r(ia, { onClick: i })
  ] }) });
}, aa = (e, t) => {
  if (typeof e == "string") {
    const n = E1(e, t, /* @__PURE__ */ new Date());
    return isNaN(n.getTime()) ? (console.error("Invalid time string:", e), null) : n;
  }
  return e;
}, ca = (e) => {
  const { onChange: t, onClean: n, value: o, annotation: i } = e, s = M(() => i.editorProps ?? {}, [i]), a = M(() => aa(o, yt), [o]), c = p((l) => {
    const d = l && A1(l, yt);
    t == null || t(d);
  }, [t]);
  return /* @__PURE__ */ r($, { ...e, children: /* @__PURE__ */ r(
    zn,
    {
      editable: !1,
      cleanable: !0,
      placement: "auto",
      value: a ?? null,
      onChange: c,
      onClean: n,
      ...s,
      format: yt,
      size: "xs"
    }
  ) });
}, Pt = "fluent", la = [
  { content: Go, filePath: "ActionEventArgs" },
  { content: qo, filePath: "Form" }
];
F1.init().then((e) => {
  var g;
  la.forEach(({ content: f, filePath: b }) => {
    var x;
    (x = e == null ? void 0 : e.languages.typescript) == null || x.javascriptDefaults.addExtraLib(f, b);
  }), (g = e == null ? void 0 : e.languages.css) == null || g.scssDefaults.setOptions({ lint: { emptyRules: "ignore" } });
  con