@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 Br = Object.defineProperty;
var Vr = (t, e, n) => e in t ? Br(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
var S = (t, e, n) => (Vr(t, typeof e != "symbol" ? e + "" : e, n), n), kt = (t, e, n) => {
  if (!e.has(t))
    throw TypeError("Cannot " + n);
};
var V = (t, e, n) => (kt(t, e, "read from private field"), n ? n.call(t) : e.get(t)), ie = (t, e, n) => {
  if (e.has(t))
    throw TypeError("Cannot add the same private member more than once");
  e instanceof WeakSet ? e.add(t) : e.set(t, n);
}, pe = (t, e, n, o) => (kt(t, e, "write to private field"), o ? o.call(t, n) : e.set(t, n), n);
var et = (t, e, n) => (kt(t, e, "access private method"), n);
import { jsx as r, jsxs as h, Fragment as F } from "@emotion/react/jsx-runtime";
import b from "@emotion/styled";
import { createNonNullableContext as je, forwardRef as xe, namedObserver as w, useStore as j, toLabeledValues as Nt, KeySymbol as Nr, ComponentStore as De, timeFormat as St, ActionEventArgsDeclaration as Hr, IFormDataDeclaration as $r, useComponentData as O, isPromise as jr, DataValidator as Or, isProperty as en, isValidatorPropertyBlockType as Lt, className as Wr, useTooltipType as Ht, ComponentDataProvider as Oe, key as _r, createAnnotation as Zr, getValidatorPropertyBlockType as Ur, boolean as Kr, globalDefaultLanguage as Fn, Language as ge, BiDi as ue, definePreset as Jr, getKey as Gr, ComponentData as qr, nameObservable as We, BuilderView as Rn, ActionDefinition as zn, treeForEach as Mt, isContainer as Dn, PersistedFormVersion as Xr, screenModel as tn, CalculableResult as Pe, initFormFields as Yr, generateUniqueName as Qr, AsyncFunction as In, calculatePropertyValue as ei, getFluentCompatibleId as ti, testFluentLocalization as ni, getFluentData as oi, nameAutorun as Se, DefaultWrapper as ri, checkSlotCondition as nn, groupBy as ii, ComponentTree as Ie, TemplateField as si, slotModel as ai, node as li, toArray as ci, findTreeElementDepth as di, emotionCache as on, loadResource as Bn, unloadResource as ui, ViewerPropsProvider as mi, StoreProvider as hi, useDisposable as pi, Store as gi, FormViewerPropsStore as Ci, ComponentState as fi, getChildren as bi, useViewerProps as vi, BuilderContextProvider as wi, FormViewer as yi, oneOf as Vn, useErrorModel as xi, tooltipType as ki, SuppressResizeObserverErrors as Si } from "@react-form-builder/core";
import { BuilderView as M4 } from "@react-form-builder/core";
import * as C from "react";
import { useCallback as p, useState as E, useEffect as A, cloneElement as Nn, useRef as q, useMemo as M, useReducer as Hn, createElement as Li, Component as Mi, useImperativeHandle as Ei, Suspense as Ai } from "react";
import { Checkbox as ut, Table as Re, InputPicker as ze, IconButton as G, InputNumber as mt, Input as ne, Button as $, Form as X, Whisper as me, Tooltip as _e, InputGroup as Q, TagInput as Ti, Popover as $t, DatePicker as $n, SelectPicker as Pi, Animation as jn, ButtonGroup as ce, List as On, Dropdown as I, Divider as Fi, TagPicker as Ri, RadioGroup as zi, Radio as Di, Message as ht, Schema as at, CustomProvider as Ii, useToaster as Bi, Modal as J, Row as Vi, Col as Ni, Nav as Wn, Loader as Hi } from "rsuite";
import { cx as H, css as pt } from "@emotion/css";
import { observer as $i } from "mobx-react";
import { Resizable as ji } from "re-resizable";
import { upperFirst as _n, isObject as Zn, assign as gt, isEmpty as Un, startCase as Kn, isUndefined as Ct, merge as Oi, cloneDeep as Wi, toUpper as Jn, replace as _i, camelCase as Zi } from "lodash-es";
import { computed as Ui, makeAutoObservable as Ze, runInAction as rn, observable as Me, action as Be, reaction as Gn, autorun as Le, makeObservable as Ki } from "mobx";
import { debounceTime as Ji, distinctUntilChanged as Gi, Subject as qi } from "rxjs";
import { Close as se, Plus as Ue, Icon as jt, Code as qn, Check as Xi, Copy as Yi, ArrowUpLine as Xn, ArrowDownLine as ft, RemindFill as Qi, SortUp as es, SortDown as ts, ArrowRightLine as ns, Danger as os, Export as rs, Import as is, FileDownload as ss, FileUpload as as, Search as ls, ExpandOutline as cs, CollaspedOutline as ds } from "@rsuite/icons";
import * as Yn from "@fortawesome/free-solid-svg-icons/faCode.js";
import * as us from "@fortawesome/free-solid-svg-icons/faGlobe.js";
import * as tt from "@fortawesome/free-solid-svg-icons/faMarker.js";
import { useTranslation as P, initReactI18next as ms } from "react-i18next";
import { css as Ke, CacheProvider as hs } from "@emotion/react";
import { RgbaColorPicker as ps } from "react-colorful";
import { faMarker as gs, faGlobe as Cs, faBars as fs } from "@fortawesome/free-solid-svg-icons";
import sn, { t as bs } from "i18next";
import * as vs from "@fortawesome/free-solid-svg-icons/faCheck.js";
import { format as ws, parse as ys } from "date-fns";
import { constrainedEditor as xs } from "constrained-editor-plugin";
import ks, { loader as Ss } from "@monaco-editor/react";
import "monaco-editor";
import Ls from "i18next-browser-languagedetector";
import Ms from "i18next-resources-to-backend";
import { arEG as Es, deDE as As, enUS as Qn, itIT as Ts, faIR as Ps, frFR as Fs, esES as Rs, zhCN as zs } from "rsuite/esm/locales/index.js";
import * as Ds from "@fortawesome/free-solid-svg-icons/faBookmark.js";
import * as eo from "@fortawesome/free-solid-svg-icons/faPlay.js";
import { useDrag as Is, useDrop as to, useDragLayer as Je, DndProvider as Bs } from "react-dnd";
import { getEmptyImage as Vs, HTML5Backend as Ns } from "react-dnd-html5-backend";
import { createPortal as Hs } from "react-dom";
import * as $s from "@fortawesome/free-regular-svg-icons/faClone.js";
import * as js from "@fortawesome/free-regular-svg-icons/faTrashAlt.js";
import no from "scroll-into-view-if-needed";
import * as Os from "@fortawesome/free-regular-svg-icons/faBookmark.js";
import * as Ws from "@fortawesome/free-solid-svg-icons/faRedo.js";
import * as Ft from "@fortawesome/free-solid-svg-icons/faSave.js";
import * as _s from "@fortawesome/free-solid-svg-icons/faUndo.js";
import * as Zs from "@fortawesome/free-solid-svg-icons/faTrash.js";
import { saveAs as Us } from "file-saver";
import oo from "jszip";
import * as ro from "@fortawesome/free-solid-svg-icons/faPaintBrush.js";
import * as Ks from "@fortawesome/free-solid-svg-icons/faMoon.js";
import * as Js from "@fortawesome/free-solid-svg-icons/faSun.js";
import * as Gs from "@fortawesome/free-solid-svg-icons/faDesktop.js";
import * as qs from "@fortawesome/free-solid-svg-icons/faMobile.js";
import * as Xs from "@fortawesome/free-solid-svg-icons/faTablet.js";
import * as Ys from "@fortawesome/free-solid-svg-icons/faList.js";
import * as Qs from "@fortawesome/free-solid-svg-icons/faPlusCircle.js";
import * as ea from "@fortawesome/free-solid-svg-icons/faSitemap.js";
import * as ta from "@fortawesome/free-solid-svg-icons/faSlidersH.js";
import * as na from "@fortawesome/free-solid-svg-icons/faBolt.js";
import * as oa from "@fortawesome/free-solid-svg-icons/faCircle.js";
import * as ra from "@fortawesome/free-solid-svg-icons/faSpellCheck.js";
const [
  /**
   * **Internal use only.**
   */
  y,
  /**
   * **Internal use only.**
   */
  ia
] = je("BuildStoreContext"), oe = (t, e) => {
  e.displayName = t;
  const n = e, o = `FE_${t}`;
  return (i) => {
    var m;
    const a = (m = y().props.customization) == null ? void 0 : m[t];
    if (!a)
      return /* @__PURE__ */ r(n, { ...i, className: H(o, i.className) });
    if (a.hidden)
      return null;
    const { style: l, customRenderer: c } = a, d = H(o, i == null ? void 0 : i.className, a.className, pt`${l}`, t), u = /* @__PURE__ */ r(n, { ...i, className: d });
    return c ? c(u, e, i) : u;
  };
}, U = (t, e) => oe(t, $i(e)), { Cell: sa } = Re, aa = ({ rowData: t, dataKey: e, rowIndex: n, onChange: o, type: i, ...s }) => {
  const a = t[e] ?? "", l = p((d) => {
    t[e] = d, o == null || o(d, e, n);
  }, [e, o, t, n]);
  return /* @__PURE__ */ r(Ge, { ...s, children: /* @__PURE__ */ r(i === "number" ? mt : ne, { value: a, onChange: l, size: "sm" }) });
}, w4 = ({ rowData: t, dataKey: e, rowIndex: n, onChange: o, ...i }) => {
  const s = t[e] ?? !1, a = p((l, c) => {
    t[e] = c, o == null || o(c, e, n);
  }, [e, o, t, n]);
  return /* @__PURE__ */ r(Ge, { ...i, children: /* @__PURE__ */ r(da, { inline: !0, checked: s, onChange: a }) });
}, la = ({ rowData: t, dataKey: e, rowIndex: n, options: o, onChange: i, ...s }) => {
  const a = t[e] ?? "", l = p((c) => {
    t[e] = c, i == null || i(c, e, n);
  }, [e, i, t, n]);
  return /* @__PURE__ */ r(Ge, { ...s, children: /* @__PURE__ */ r(
    ze,
    {
      value: a,
      data: o,
      onChange: l,
      cleanable: !1,
      creatable: !0,
      block: !0,
      size: "sm",
      placement: "auto"
    }
  ) });
}, ca = ({ rowData: t, rowIndex: e, onAction: n, icon: o, ...i }) => /* @__PURE__ */ r(Ge, { ...i, children: /* @__PURE__ */ r(
  G,
  {
    appearance: "subtle",
    size: "sm",
    onClick: () => n(e),
    icon: o()
  }
) }), Ge = b(sa)`
  padding: 0;

  & .rs-table-cell-content {
    padding: 9px 3px;
  }
`, da = b(ut)`
  & .rs-checkbox-wrapper {
    left: 4px;
    top: 6px;
  }
`, { ErrorMessage: ua } = X, { Column: ma, HeaderCell: ha } = Re, Ot = (t) => {
  const [e, n] = E({}), [o, i] = E(!1), {
    data: s = [],
    onChange: a,
    columns: l,
    label: c,
    errorMessage: d,
    autoAdd: u,
    hideHeader: m,
    onAdd: g,
    onRemove: f,
    ...v
  } = t, { autoHeight: x, maxHeight: k } = e, L = m ? 0 : t.headerHeight ?? 40, z = t.rowHeight ?? 46, Z = t.maxRows ?? 5, K = s.length <= Z, re = t.renderEmpty ? L + z : 0, ke = L + z * Z, he = s.length > Z ? ke : re, Y = p((te) => {
    if (u) {
      const Qt = te[te.length - 1];
      (!Qt || Object.values(Qt).some((Ir) => Ir)) && te.push({});
    }
    a == null || a(te);
  }, [u, a]), de = p(() => {
    n({
      autoHeight: K,
      maxHeight: he
    });
  }, [he, K]), R = p(() => {
    Y == null || Y([...s, {}]), i(!0), de(), g == null || g(s.length);
  }, [s, Y, de, g]), D = p((te) => {
    s.splice(te, 1), Y == null || Y(s), de(), f == null || f(te);
  }, [s, Y, de, f]), ee = () => l == null ? void 0 : l.map((te) => Nn(te, {
    onChange: () => Y == null ? void 0 : Y([...s])
  })), Dr = () => {
    const te = {};
    return o && (te.y = Number.MAX_SAFE_INTEGER, i(!1)), te;
  };
  return A(de, []), /* @__PURE__ */ h("div", { children: [
    !!c && /* @__PURE__ */ r("label", { children: c }),
    /* @__PURE__ */ h(
      pa,
      {
        data: s,
        headerHeight: L,
        rowHeight: z,
        height: k,
        autoHeight: x,
        shouldUpdateScroll: Dr,
        className: H({ hideHeader: m }),
        ...v,
        children: [
          ee(),
          /* @__PURE__ */ h(ma, { width: 34, children: [
            /* @__PURE__ */ r(ha, { children: /* @__PURE__ */ r("div", {}) }),
            /* @__PURE__ */ r(ca, { onAction: D, icon: () => /* @__PURE__ */ r(se, {}) })
          ] })
        ]
      }
    ),
    !!d && /* @__PURE__ */ r(ua, { show: !!d, placement: "bottomStart", children: d }),
    !u && /* @__PURE__ */ r($, { appearance: "default", size: "sm", onClick: R, style: { marginTop: 10 }, block: !0, children: /* @__PURE__ */ r(Ue, {}) })
  ] });
}, pa = b(Re)`
  .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: ga, HeaderCell: Ca } = Re, Wt = (t) => t.map(({ name: e, input: n, title: o, inputProps: i = {} }) => {
  const s = n ?? aa;
  return /* @__PURE__ */ h(ga, { flexGrow: 1, children: [
    /* @__PURE__ */ r(Ca, { children: o ?? _n(e) }),
    /* @__PURE__ */ r(s, { dataKey: e, ...i })
  ] }, e);
});
let fa = 0;
function ba(t) {
  const e = ++fa;
  return t ? `${t}${e}` : `${e}`;
}
function io(t) {
  const e = q(null);
  return e.current || (e.current = ba(t)), e.current;
}
const [
  /**
   * **Internal use only.**
   */
  va,
  /**
   * **Internal use only.**
   */
  so
] = je("TooltipPlacementContext"), ao = ({ hint: t, children: e, ...n }) => t ? /* @__PURE__ */ r(le, { hint: t, children: /* @__PURE__ */ r(an, { ...n, hinted: !0, children: e }) }) : /* @__PURE__ */ r(an, { ...n, children: e }), le = ({ hint: t, children: e, ...n }) => {
  const o = va(), i = n.placement ?? o;
  return t ? /* @__PURE__ */ r(me, { speaker: /* @__PURE__ */ r(_e, { children: t }), placement: i, trigger: "hover", children: e }) : /* @__PURE__ */ r(F, { children: e });
}, bt = ({ hint: t, hintPlacement: e, ...n }) => /* @__PURE__ */ r(le, { hint: t, placement: e ?? "bottom", children: /* @__PURE__ */ r(G, { ...n, size: "xs" }) }), an = b.label`
  min-width: 80px;

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

  & > label {
    width: 100px;
    min-width: 80px;
  }
`, co = Ke`
  && {
    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;
  }
`, uo = Ke`
  && {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: ${_t}px;
  }
`, wa = Ke`
  && > * {
    cursor: pointer;

    :hover {
      background-color: var(--rs-btn-default-hover-bg);
    }
  }
`, Ve = b.div`
  ${co}
`, Zt = b.div`
  ${uo}
  ${({ clickable: t = !1 }) => t && wa}
`, ya = xe(({ faIcon: t, size: e, ...n }, o) => {
  const { width: i, height: s, svgPathData: a } = xa(t);
  return /* @__PURE__ */ r(
    "svg",
    {
      viewBox: `0 0 ${i} ${s}`,
      width: `${e ?? 1}em`,
      height: `${e ?? 1}em`,
      fill: "currentColor",
      ...n,
      ref: o,
      children: /* @__PURE__ */ r("path", { d: a })
    }
  );
}), xa = (t) => {
  if (t != null && t.icon) {
    const [e, n, , , o] = t.icon;
    return { width: e, height: n, svgPathData: o };
  }
  return t;
}, B = xe(({ icon: t, size: e, ...n }, o) => /* @__PURE__ */ r(jt, { as: ya, ref: o, faIcon: t, size: e, ...n })), ka = pt`
  &:after {
    padding-left: 3px;
    content: "*";
    color: red;
  }
`, Sa = {
  disabled: {
    hint: "neitherCalculableNorLocalizable",
    icon: tt,
    color: "var(--rs-btn-default-disabled-bg)"
  },
  calculation: {
    hint: "editCalculable",
    color: "var(--rs-btn-primary-bg)",
    icon: Yn
  },
  localization: {
    hint: "editLocalizable",
    color: "var(--rs-btn-primary-bg)",
    icon: us
  },
  calculable: {
    hint: "hintCalculable",
    icon: tt
  },
  localizable: {
    hint: "hintLocalizable",
    icon: tt
  },
  calculableAndLocalizable: {
    hint: "hintCalculableAndLocalizable",
    icon: tt
  }
}, La = (t) => {
  const { annotation: e, getComputeCode: n, setComputeCode: o, disableCompute: i, getComputeType: s, hasComputeCode: a, componentData: l } = t, c = y(), d = !e.calculable && !e.localizable, u = T("propertiesEditor.codeButton"), m = s(), g = M(() => {
    const x = m === "function" && a("function"), k = m === "localization" && a("localization");
    return d ? "disabled" : x ? "calculation" : k ? "localization" : e.calculable && e.localizable ? "calculableAndLocalizable" : e.calculable ? "calculable" : e.localizable ? "localizable" : "disabled";
  }, [e.calculable, e.localizable, d, a, m]), f = M(() => {
    const { hint: x, icon: k, color: L } = Sa[g];
    return { icon: k, color: L, hint: u(x) };
  }, [g, u]), v = p(() => c.currentEditable = new or(
    i,
    o,
    n,
    s,
    a,
    e,
    l.key
  ), [e, l.key, i, n, s, a, o, c]);
  return /* @__PURE__ */ r(le, { hint: f.hint, children: /* @__PURE__ */ r(
    Fa,
    {
      onClick: v,
      disabled: d,
      icon: /* @__PURE__ */ r(B, { icon: f.icon, color: f.color }),
      size: "xs",
      appearance: "subtle"
    }
  ) });
}, Ma = U("PropertyCodeButton", La), Ea = oe("PropertyLabel", ao), Aa = (t) => /* @__PURE__ */ r("div", { style: { width: "100%" }, ...t }), Ta = oe("PropertyInput", Aa), Pa = (t) => {
  const { annotation: e, children: n, style: o } = t, { className: i, ...s } = t, a = io("id-"), l = t.componentData.model.type, c = T(`annotation.${e.key}`), d = T(`${l}.${e.key}`), u = (g) => d(g) || c(g), m = e.required ? ka : void 0;
  return /* @__PURE__ */ h(lo, { style: o, className: i, children: [
    /* @__PURE__ */ h(ae, { gap: 10, style: { alignItems: "center" }, children: [
      /* @__PURE__ */ r(Ma, { ...s }),
      /* @__PURE__ */ r(Ea, { htmlFor: a, hint: e.hint ?? u("hint"), className: m, children: /* @__PURE__ */ r(F, { children: u("name") || e.name }) })
    ] }),
    !!n && /* @__PURE__ */ r(Ta, { children: Nn(n, { id: a }) })
  ] });
}, W = oe("LabeledProperty", Pa), Fa = b(G)`
  min-width: 24px;
  margin-inline-end: -6px;
`, Ra = [{ name: "value" }, { name: "label" }], za = (t) => {
  const { value: e, onChange: n, annotation: o, componentData: i } = t, { onAdd: s, onRemove: a, columns: l, calculateEditorProps: c } = o.editorProps ?? {}, d = j(), u = M(() => Wt(l ?? Ra), [l]), m = p((v) => {
    s == null || s(v, i, d);
  }, [d, i, s]), g = p((v) => {
    a == null || a(v, i, d);
  }, [d, i, a]), f = (c == null ? void 0 : c(i, n)) ?? {};
  return /* @__PURE__ */ h(F, { children: [
    /* @__PURE__ */ r(W, { ...t }),
    /* @__PURE__ */ r(
      Ot,
      {
        data: e,
        onChange: n,
        columns: u,
        onRemove: g,
        onAdd: m,
        ...f
      }
    )
  ] });
}, Da = w("ArrayInput", za), ln = (t, e) => {
  try {
    return JSON.stringify(t, null, e);
  } catch {
    return;
  }
}, Ia = (t) => {
  const { value: e, onChange: n, onClean: o, onValidate: i, editorKey: s, editorTitle: a } = t, l = y(), c = M(() => (Zn(e) ? ln(e, 2) : e) ?? "", [e]), d = M(() => {
    var m;
    return e ? ((m = ln(e)) == null ? void 0 : m.substring(0, 50)) ?? "Error" : "";
  }, [e]), u = p(() => {
    l.editJsonCode(s, a, c, n, i);
  }, [l, s, a, n, c, i]);
  return /* @__PURE__ */ h(Q, { inside: !0, size: "xs", children: [
    /* @__PURE__ */ r(ne, { value: d, onClick: u, readOnly: !0, color: "var(--rs-btn-ghost-text)" }),
    /* @__PURE__ */ r(Q.Button, { onClick: e ? o : u, children: e ? /* @__PURE__ */ r(se, {}) : /* @__PURE__ */ r(qn, {}) })
  ] });
}, Ba = (t) => {
  const e = JSON.parse(t);
  if (typeof e != "object" || Array.isArray(e))
    throw new Error("The value must be an object");
}, Va = ({ rowData: t, dataKey: e, rowIndex: n, onChange: o, editorTitle: i, ...s }) => {
  const a = t[e] ?? {}, l = M(() => `${i}[${n}]`, [i, n]), c = p((u) => {
    t[e] = u, o == null || o(u, e, n);
  }, [e, o, t, n]), d = p(() => {
    c(void 0);
  }, [c]);
  return /* @__PURE__ */ r(Ge, { ...s, children: /* @__PURE__ */ r(
    Ia,
    {
      editorKey: `${e}-${n}`,
      editorTitle: l,
      value: a,
      onChange: c,
      onClean: d,
      onValidate: Ba
    }
  ) });
}, Na = [{ name: "item", input: Va }], Ha = (t) => {
  var s;
  const { value: e, onChange: n, annotation: o } = t, i = M(() => {
    var c;
    const a = ((c = o.editorProps) == null ? void 0 : c.columns) ?? Na, l = a == null ? void 0 : a[0];
    return l && !l.inputProps && (l.inputProps = { editorTitle: `${t.componentData.key}.${o.name}` }), Wt(a);
  }, [(s = o.editorProps) == null ? void 0 : s.columns, o.name, t.componentData.key]);
  return /* @__PURE__ */ h(F, { children: [
    /* @__PURE__ */ r(W, { ...t }),
    /* @__PURE__ */ r(Ot, { data: e, onChange: n, columns: i })
  ] });
}, $a = (t) => {
  const { value: e, onChange: n, onClean: o } = t, i = T("propertiesEditor");
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(
    Ti,
    {
      value: e ?? "",
      onChange: n,
      onClean: o,
      block: !0,
      size: "xs",
      style: { width: "100%" },
      placeholder: i("setInputHint")
    }
  ) });
}, ja = [
  "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"
], Oa = Wt([
  {
    name: "name",
    input: la,
    inputProps: { options: Nt(ja, !1) }
  },
  { name: "value" }
]), Wa = ({ confirm: t }) => {
  const e = T("common");
  return /* @__PURE__ */ r(G, { icon: /* @__PURE__ */ r(Xi, {}), onClick: t, color: "green", appearance: "primary", size: "xs", children: e("apply") });
}, _a = (t) => {
  const { store: e } = t.componentData, n = !!t.getComputeType(), o = M(
    () => e.htmlAttributes ? [...e.htmlAttributes] : e.htmlAttributes,
    [e]
  ), [i, s] = E(o), [a, l] = E(!1), c = p((u) => {
    s(u), l(!0);
  }, []), d = p(() => {
    e.htmlAttributes = i, l(!1);
  }, [e, i]);
  return A(() => {
    s(o), l(!1);
  }, [o, e]), /* @__PURE__ */ h(F, { children: [
    /* @__PURE__ */ r(W, { ...t, children: a && /* @__PURE__ */ r(Wa, { confirm: d }) }),
    !n && /* @__PURE__ */ r(Ot, { data: i ?? [], onChange: c, columns: Oa })
  ] });
}, Za = w("RawAttributesInput", _a), cn = (t) => {
  const { value: e, onChange: n } = t;
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(mo, { checked: !!e, onChange: (o, i) => n(i) }) });
}, mo = b(ut)`
  && {
    height: 23px;
    display: flex;
    align-items: center;
    width: 100%;

    .rs-checkbox-checker {
      padding-left: 0;
      margin-left: -10px;
    }
  }
`, Ua = (t) => {
  const { value: e, onChange: n, onClean: o } = t, i = qa(e ?? "rgba(255, 255, 255, 0)");
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ h(Q, { inside: !0, style: { width: "100%" }, size: "xs", children: [
    /* @__PURE__ */ r(me, { placement: "auto", trigger: "hover", speaker: /* @__PURE__ */ r($t, { children: /* @__PURE__ */ r(ps, { color: i, onChange: (a) => n(Ga(a)) }) }), enterable: !0, children: /* @__PURE__ */ r(Ka, { color: e, readOnly: !0 }) }),
    /* @__PURE__ */ r(Ja, { onClick: o, children: /* @__PURE__ */ r(se, {}) })
  ] }) });
}, Ka = b(ne)`
  && {
    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: t }) => t ?? "var(--rs-btn-default-bg)"};
  }
`, Ja = b(Q.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 Ga(t) {
  const { r: e, g: n, b: o, a: i } = t;
  return `rgba(${e}, ${n}, ${o}, ${i})`;
}
function qa(t) {
  const e = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/, [, n, o, i, s] = e.exec(t) || [];
  return { r: Number(n), g: Number(o), b: Number(i), a: Number(s) };
}
const Xa = (t) => {
  const { onChange: e, onClean: n, value: o } = t;
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(
    $n,
    {
      editable: !1,
      cleanable: !0,
      placement: "auto",
      value: o ?? null,
      onChange: e,
      onClean: n,
      size: "xs"
    }
  ) });
}, Ut = (t) => {
  const e = T("common");
  return /* @__PURE__ */ r(bt, { hint: e("edit"), icon: /* @__PURE__ */ r(B, { icon: gs }), ...t });
}, Ya = (t) => {
  const e = T("common");
  return /* @__PURE__ */ r(bt, { hint: e("clone"), icon: /* @__PURE__ */ r(Yi, {}), ...t });
}, qe = (t) => {
  const e = T("common");
  return /* @__PURE__ */ r(bt, { hint: e("remove"), icon: /* @__PURE__ */ r(se, {}), ...t });
};
function Kt(t) {
  return M(() => Ui(t), [t]).get();
}
const [
  /**
   * **Internal use only.**
   */
  Xe,
  /**
   * **Internal use only.**
   */
  Qa
] = je("ActionDataContext"), Jt = ({ width: t, ...e }) => /* @__PURE__ */ r(Pi, { ...e, style: { width: t } }), e1 = [
  { label: "True", value: !0 },
  { label: "False", value: !1 }
], t1 = ({ name: t }) => {
  var i;
  const e = Xe(), n = p((s) => {
    const a = gt({}, e.args);
    delete a[t], typeof s < "u" && (a[t] = s), e.args = a;
  }, [e, t]), o = p(() => {
    n(void 0);
  }, [n]);
  return /* @__PURE__ */ r(
    Jt,
    {
      onClean: o,
      data: e1,
      searchable: !1,
      value: ((i = e.args) == null ? void 0 : i[t]) ?? "",
      onSelect: n,
      size: "sm",
      width: "100%"
    }
  );
}, n1 = w("InputBoolean", t1), o1 = ({ name: t }) => {
  var s;
  const e = Xe(), n = typeof ((s = e.args) == null ? void 0 : s[t]) < "u" ? Number(e.args[t]) : "", o = p((a) => {
    const l = gt({}, e.args);
    delete l[t], (typeof a == "string" || typeof a == "number") && (l[t] = Number(a)), e.args = l;
  }, [e, t]), i = p(() => {
    o(null);
  }, [o]);
  return /* @__PURE__ */ h(Q, { size: "sm", children: [
    /* @__PURE__ */ r(mt, { value: n, onChange: o, onReset: i, size: "sm" }),
    /* @__PURE__ */ r(Q.Button, { onClick: i, children: /* @__PURE__ */ r(se, {}) })
  ] });
}, r1 = w("InputNumber", o1), i1 = ({ name: t }) => {
  var i, s;
  const e = Xe(), n = ((s = (i = e.args) == null ? void 0 : i[t]) == null ? void 0 : s.toString()) ?? "";
  return /* @__PURE__ */ r(Q, { size: "sm", children: /* @__PURE__ */ r(ne, { value: n, onChange: (a) => e.args = gt({}, e.args, { [t]: a }) }) });
}, s1 = w("InputString", i1), a1 = (t) => {
  switch (t) {
    case "string":
      return s1;
    case "number":
      return r1;
    case "boolean":
      return n1;
  }
}, l1 = ({ data: t }) => {
  const [e, n] = t, o = a1(n);
  return /* @__PURE__ */ h(_, { children: [
    /* @__PURE__ */ r("label", { children: e }),
    /* @__PURE__ */ r(o, { name: e })
  ] });
}, c1 = w("ArgumentItem", l1), d1 = () => {
  const t = Xe();
  A(() => () => {
    Un(t.args) && delete t.args;
  }, [t.args]);
}, u1 = () => {
  const t = j(), e = Xe(), n = p(() => t.findAction(e), [e, t]), o = Kt(n), [i, s] = Hn((l) => !l, !1), a = i ? Xn : ft;
  return d1(), Object.keys(o.params).length ? /* @__PURE__ */ h("div", { onMouseDown: (l) => l.stopPropagation(), children: [
    /* @__PURE__ */ r(jn.Collapse, { in: i, unmountOnExit: !0, children: /* @__PURE__ */ r(_, { gap: 1, style: { marginBlock: 8, paddingInline: 10 }, children: Object.entries(o.params).map((l, c) => /* @__PURE__ */ r(c1, { data: l }, c)) }) }),
    /* @__PURE__ */ r(h1, { block: !0, onClick: s, children: /* @__PURE__ */ h(F, { children: [
      bs("actions.arguments"),
      /* @__PURE__ */ r(a, { style: { marginTop: -2 } })
    ] }) })
  ] }) : null;
}, m1 = w("ArgumentList", u1), h1 = b($)`
  padding: 5px !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: var(--rs-btn-subtle-text) !important;

  &:focus {
    box-shadow: none;
    background-color: initial;
  }
`, p1 = ({ data: t, onRemove: e }) => {
  const n = y(), o = j(), i = t.type === "code", s = () => {
    const a = o.form.actions[t.name];
    if (!a) {
      console.error(`Cannot find custom action: '${t.name}'`);
      return;
    }
    const l = { name: t.name, actionDefinition: a };
    n.editCodeAction(l);
  };
  return /* @__PURE__ */ h(Qa, { value: t, children: [
    /* @__PURE__ */ h(ae, { style: { justifyContent: "space-between", padding: 8 }, children: [
      /* @__PURE__ */ r("b", { style: { color: "violet", marginLeft: 5 }, children: `${t.name || "Action"}` }),
      /* @__PURE__ */ h(ce, { size: "xs", children: [
        i && /* @__PURE__ */ r(Ut, { onClick: s }),
        /* @__PURE__ */ r(qe, { onClick: e })
      ] })
    ] }),
    /* @__PURE__ */ r(m1, {})
  ] });
}, g1 = w("ActionItem", p1);
function C1({ data: t, index: e, onRemove: n }) {
  const o = p(() => n(e), [e, n]);
  return /* @__PURE__ */ r(w1, { index: e, children: /* @__PURE__ */ r(g1, { data: t, onRemove: o }) });
}
const f1 = (t) => {
  var s;
  const e = t.annotation.key, n = (s = t.componentData.store.events) == null ? void 0 : s[e], 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 l = n[a.oldIndex];
    n.splice(a.oldIndex, 1), n.splice(a.newIndex, 0, l);
  }, [n]);
  return n != null && n.length ? /* @__PURE__ */ r(v1, { sortable: !0, onSort: i, children: n.map((a, l) => /* @__PURE__ */ r(C1, { index: l, data: a, onRemove: o }, a[Nr])) }) : null;
}, b1 = w("ActionList", f1), v1 = b(On)`
  ${uo}
  && {
    box-shadow: none;
  }
`, w1 = b(On.Item)`
  ${co}
  && {
    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);
  }
`, y1 = ({ onSelect: t, annotation: e }) => {
  var u;
  const n = j(), o = y(), i = (u = o.oneSelected) == null ? void 0 : u.store, s = e.key, a = n.form.actionNames, l = T("actions"), c = () => {
    t(), i && o.addCodeAction((m) => {
      De.addEventHandler(i, s, { name: m.name, type: "code" });
    });
  }, d = (m) => /* @__PURE__ */ r(
    I.Item,
    {
      onClick: () => t({ name: m, type: "code" }),
      style: { position: "relative", display: "flex", justifyContent: "space-between" },
      children: /* @__PURE__ */ r("span", { style: { whiteSpace: "break-spaces" }, children: m })
    },
    m
  );
  return /* @__PURE__ */ h(I.Menu, { title: l("code"), children: [
    a == null ? void 0 : a.map(d),
    !!(a != null && a.length) && /* @__PURE__ */ r(I.Item, { disabled: !0, children: /* @__PURE__ */ r(Fi, { style: { marginTop: 0, marginBottom: 0 } }) }),
    /* @__PURE__ */ r(I.Item, { children: l("addCodeAction"), icon: /* @__PURE__ */ r(Ue, {}), onClick: c })
  ] });
}, x1 = w("CodeActionsList", y1), k1 = ({ onSelect: t }) => {
  const e = j(), n = T("actions"), o = Object.keys(e.commonActions).map(
    (i) => /* @__PURE__ */ r(I.Item, { children: i, onClick: () => t({ name: i, type: "common" }) }, i)
  );
  return /* @__PURE__ */ r(I.Menu, { title: n("common"), children: o });
}, S1 = ({ onSelect: t }) => {
  const e = j(), n = T("actions"), o = e.formViewerPropsStore.actions;
  if (!o)
    return null;
  const i = Object.keys(o).map(
    (s) => /* @__PURE__ */ r(I.Item, { children: s, onClick: () => t({ name: s, type: "custom" }) }, s)
  );
  return /* @__PURE__ */ r(I.Menu, { title: n("custom"), children: i });
}, L1 = (t) => {
  const e = T("actions"), { componentData: n, annotation: o } = t, i = n.store, s = o.key, a = q(null), l = p((c) => {
    var d;
    (d = a.current) == null || d.close(), c && De.addEventHandler(i, s, c);
  }, [a, i, s]);
  return /* @__PURE__ */ r(
    me,
    {
      placement: "leftStart",
      ref: a,
      trigger: "click",
      speaker: /* @__PURE__ */ r(E1, { onSelect: l, annotation: o }),
      children: /* @__PURE__ */ r(G, { icon: /* @__PURE__ */ r(Ue, {}), size: "sm", children: e("addAction") })
    }
  );
}, M1 = w("AddActionButton", L1), E1 = xe(({ onSelect: t, annotation: e, ...n }, o) => /* @__PURE__ */ r($t, { ref: o, ...n, full: !0, children: /* @__PURE__ */ h(I.Menu, { children: [
  /* @__PURE__ */ r(k1, { onSelect: t, annotation: e }),
  /* @__PURE__ */ r(x1, { onSelect: t, annotation: e }),
  /* @__PURE__ */ r(S1, { onSelect: t, annotation: e })
] }) })), A1 = b.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
`, T1 = b.h6`
  margin-left: 10px;
`, P1 = (t) => {
  const e = t.annotation.key;
  return /* @__PURE__ */ h(A1, { children: [
    /* @__PURE__ */ r(T1, { children: e }),
    /* @__PURE__ */ r(b1, { ...t }),
    /* @__PURE__ */ r(M1, { ...t })
  ] });
}, F1 = (t) => /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(R1, { ...t }) }), R1 = (t) => {
  const e = j(), { id: n, value: o, onChange: i, showError: s } = t, [a, l] = E(!1), [c, d] = E(o), u = T("propertiesEditor");
  A(() => {
    d(o), l(!1);
  }, [o]);
  const m = p((k) => e.reduceScreen((L, z) => z.key === k ? L + 1 : L, 0) === 0 && k.length > 0, [e]), g = p((k) => {
    const L = m(k);
    let z;
    if (!L && k !== o) {
      const Z = k.length > 0 ? "keyMustBeUnique" : "keyMustNotBeEmpty";
      z = u(Z);
    }
    s == null || s(z), l(L), d(k);
  }, [o, u, s, m]), f = p(() => {
    a && (i(c), l(!1));
  }, [a, i, c]), v = p((k) => {
    k.key === "Enter" && a && f();
  }, [a, f]), x = M(() => u("applyKey"), [u]);
  return /* @__PURE__ */ h(Q, { size: "xs", children: [
    /* @__PURE__ */ r(ne, { id: n, value: c, onChange: g, onKeyDown: v }),
    /* @__PURE__ */ r(le, { hint: x, children: /* @__PURE__ */ r(Q.Button, { disabled: !a, onClick: f, children: /* @__PURE__ */ r(
      B,
      {
        icon: vs,
        color: a ? "green" : void 0
      }
    ) }) })
  ] });
}, z1 = w("KeyInput", F1), D1 = ({ data: t }, e) => {
  const n = t.map((o) => ({
    value: o.value,
    label: o.label
  }));
  return e.forEach((o) => {
    n.find((i) => i.value === o) || n.push({ value: o, label: Kn(o) });
  }), n;
}, I1 = (t) => {
  const { value: e, onChange: n, annotation: o, onClean: i } = t, s = D1(o, e);
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(
    B1,
    {
      value: e ?? [],
      data: s,
      onChange: n,
      onClean: i,
      cleanable: !0,
      creatable: !0,
      size: "xs",
      placement: "auto"
    }
  ) });
}, B1 = b(Ri)`
  width: 100%;
`, V1 = (t) => {
  const { value: e, onChange: n, onClean: o, annotation: i, componentData: s } = t, a = p((m) => {
    typeof m == "string" && (m = Number(m), m = isNaN(m) ? 0 : m), n(m);
  }, [n]), { calculateEditorProps: l, ...c } = i.editorProps ?? {}, d = {
    ...c,
    ...(l == null ? void 0 : l(s)) ?? {},
    value: typeof e == "number" ? e : null
  };
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(N1, { ...d, onChange: a, size: "xs", postfix: /* @__PURE__ */ r(se, { onClick: o, style: { cursor: "pointer" } }) }) });
}, N1 = b(mt)`
  .rs-input-group-addon {
    padding: 1px 8px !important;
  }
`, dn = (t, e) => {
  try {
    return JSON.stringify(t, null, e);
  } catch {
    return;
  }
}, H1 = (t) => {
  const { value: e, onChange: n, onClean: o, annotation: i } = t, s = y(), a = M(() => (Zn(e) ? dn(e, 2) : e) ?? "", [e]), l = M(() => {
    var d;
    return e ? ((d = dn(e)) == null ? void 0 : d.substring(0, 50)) ?? "Error" : "";
  }, [e]), c = p(() => {
    const d = `${t.componentData.key}.${i.name}`;
    s.editJsonCode(i.key, d, a, n);
  }, [i.key, i.name, s, n, t.componentData.key, a]);
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ h(Q, { inside: !0, size: "xs", children: [
    /* @__PURE__ */ r(ne, { value: l, onClick: c, readOnly: !0, color: "var(--rs-btn-ghost-text)" }),
    /* @__PURE__ */ r(Q.Button, { onClick: e ? o : c, children: e ? /* @__PURE__ */ r(se, {}) : /* @__PURE__ */ r(qn, {}) })
  ] }) });
}, $1 = w("ObjectInput", H1), j1 = ({ data: t }, e) => (Ct(e) || t.find((n) => n.value === e || n.label === e) || t.push({ value: e, label: e }), t), Gt = (t) => {
  const { value: e, onChange: n, annotation: o, onClean: i } = t, s = j1(o, e);
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(
    O1,
    {
      value: e ?? t.annotation.default ?? "",
      data: s,
      onChange: n,
      onClean: i,
      block: !0,
      cleanable: !0,
      creatable: !0,
      size: "xs",
      ...t.annotation.editorProps,
      placement: "autoVerticalEnd"
    }
  ) });
}, O1 = b(ze)`
  width: 100%;
`, qt = ({ label: t, items: e, style: n, ...o }) => /* @__PURE__ */ h(W1, { style: n, children: [
  !!t && /* @__PURE__ */ r("label", { children: t }),
  /* @__PURE__ */ r(zi, { ...o, size: "xs", inline: !0, appearance: "picker", children: e == null ? void 0 : e.map(({ value: i, label: s }, a) => /* @__PURE__ */ r(Di, { value: i, children: s ?? i }, a)) })
] }), W1 = b.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;
    }
  }
`, _1 = (t) => {
  const { value: e, onChange: n, annotation: o } = t;
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(qt, { items: o.data, onChange: n, value: e }) });
}, Z1 = (t) => {
  var d;
  const e = t.componentData.store, n = (u) => {
    if (!e.renderWhen) {
      e.renderWhen = { value: u };
      return;
    }
    e.renderWhen.value = u;
  }, o = p(() => {
    var u;
    return ((u = e.renderWhen) == null ? void 0 : u.fnSource) ?? "";
  }, [e]), i = p(() => {
    var u;
    return (u = e.renderWhen) == null ? void 0 : u.computeType;
  }, [e]), s = p((u) => u === "function" ? !!o() : !1, [o]), a = p((u) => {
    e.renderWhen ?? (e.renderWhen = {}), e.renderWhen.fnSource = u, e.renderWhen.computeType = "function";
  }, [e]), l = p(() => {
    e.renderWhen && (e.renderWhen.computeType = void 0);
  }, [e]), c = {
    annotation: t.annotation,
    componentData: t.componentData,
    getComputeCode: o,
    getComputeType: i,
    setComputeCode: a,
    disableCompute: l,
    hasComputeCode: s
  };
  return /* @__PURE__ */ r(W, { ...c, children: /* @__PURE__ */ r(ne, { value: ((d = e.renderWhen) == null ? void 0 : d.value) ?? "", onChange: n, size: "xs" }) });
}, U1 = w("RenderWhenEditor", Z1), Fe = "other", ho = ["px", "%", "em", "vw", "vh"], Xt = ["max-content", "min-content", "fit-content", "auto"], K1 = Nt([...ho, ...Xt, Fe], !1), J1 = (t) => {
  const { value: e, onChange: n, onClean: o } = t, { value: i, unit: s } = G1(e), a = (d) => n(un(d, s)), l = (d) => d && n(un(i ?? 10, d)), c = s === Fe ? /* @__PURE__ */ r(ne, { value: i, size: "xs", onChange: a }) : /* @__PURE__ */ r(mt, { value: i, size: "xs", onChange: a });
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ h(X1, { children: [
    Rt(s) && c,
    /* @__PURE__ */ r(
      Y1,
      {
        value: s ?? "",
        onChange: l,
        data: K1,
        className: H({ withValue: Rt(s) }),
        creatable: !0,
        placement: "bottomEnd",
        size: "xs",
        onClean: o
      }
    )
  ] }) });
};
function G1(t) {
  if (!t)
    return {};
  if (Xt.includes(t))
    return { unit: t };
  const e = t.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]{2,4}|%)$/i);
  if (!e)
    return { value: t, unit: Fe };
  const n = parseFloat(e[1]), o = e[2];
  return ho.includes(o) ? { value: n, unit: o } : { value: `${n}${o}`, unit: Fe };
}
const Rt = (t) => typeof t < "u" && !Xt.includes(t), un = (t, e) => {
  const n = q1(t, e);
  return `${Rt(e) ? n : ""}${e === Fe ? "" : e}`;
};
function q1(t, e) {
  if (e !== Fe && typeof t == "string") {
    const n = t.match(/[+-]?\d+(\.\d+)?/);
    return parseFloat((n == null ? void 0 : n[0]) ?? "10");
  }
  return t;
}
const X1 = b.div`
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: center;
`, Y1 = b(ze)`
  width: auto;

  &.withValue {
    width: min-content;
    min-width: 78px;
  }
`, Q1 = b.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;
  }
`, el = ({ onClick: t }) => {
  const e = T("propertiesEditor"), n = M(() => e("clean"), [e]);
  return /* @__PURE__ */ r(le, { hint: n, children: /* @__PURE__ */ r("button", { className: H(["rs-picker-clean", "rs-btn-close"]), onClick: t, children: /* @__PURE__ */ r(se, {}) }) });
}, tl = (t) => {
  const { value: e = "", annotation: n, onChange: o, onClean: i } = t, s = q(null), a = q(null);
  return A(() => {
    const l = a.current;
    l && (l.dataset.contents = e);
  }, [e]), A(() => {
    const l = s.current, c = a.current;
    if (l && c) {
      const d = window.getComputedStyle(l);
      c.style.lineHeight = d.lineHeight, c.style.fontSize = d.fontSize;
    }
  }, []), /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ h(Q1, { ref: a, children: [
    /* @__PURE__ */ r(
      ne,
      {
        ref: s,
        rows: 1,
        name: n.key,
        value: e,
        onChange: o,
        size: "xs",
        as: "textarea",
        ...t.annotation.editorProps
      }
    ),
    /* @__PURE__ */ r(el, { onClick: i })
  ] }) });
}, nl = (t, e) => {
  if (typeof t == "string") {
    const n = ys(t, e, /* @__PURE__ */ new Date());
    return isNaN(n.getTime()) ? (console.error("Invalid time string:", t), null) : n;
  }
  return t;
}, ol = (t) => {
  const { onChange: e, onClean: n, value: o, annotation: i } = t, s = M(() => i.editorProps ?? {}, [i]), a = M(() => nl(o, St), [o]), l = p((c) => {
    const d = c && ws(c, St);
    e == null || e(d);
  }, [e]);
  return /* @__PURE__ */ r(W, { ...t, children: /* @__PURE__ */ r(
    $n,
    {
      editable: !1,
      cleanable: !0,
      placement: "auto",
      value: a ?? null,
      onChange: l,
      onClean: n,
      ...s,
      format: St,
      size: "xs"
    }
  ) });
}, zt = "fluent", rl = [
  { content: Hr, filePath: "ActionEventArgs" },
  { content: $r, filePath: "Form" }
];
Ss.init().then((t) => {
  var g;
  rl.forEach(({ content: f, filePath: v }) => {
    var x