@layers-app/shared 0.1.5 → 0.2.1

package/dist/components/FormViewer/components/StepTitle.js

@@ -0,0 +1,118 @@
+import { jsxs as o, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { useMemo as E } from "react";
+import { createPortal as R } from "react-dom";
+import { useTranslation as S } from "react-i18next";
+import { useMantineTheme as q, parseThemeColor as z, Flex as u } from "@mantine/core";
+import { IconArrowRight as w } from "@tabler/icons-react";
+import { motion as h } from "framer-motion";
+import { isNumber as A } from "lodash-es";
+import { combineClasses as y, STATIC_CLASSES as n } from "../helpers/staticClasses.js";
+import { useInterpolateText as F } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as D } from "../store/formStore.js";
+import { questionNumberReselect as L } from "../store/selectors.js";
+import { EditableContent as M } from "./fields/EditableContent/EditableContent.js";
+import m from "../FormViewer.module.css.js";
+const J = ({
+  originalStepId: g,
+  control: i,
+  theme: a
+}) => {
+  const { t: x } = S("forms"), l = q(), { useStore: s, api: T } = D(), I = s((t) => t.config.settings), c = s((t) => t.isMobile), p = s((t) => t.editing), f = s(L)[i.id], e = a?.title, N = E(() => {
+    const t = z({
+      color: e?.color || "",
+      theme: l
+    }), d = e?.fontSize;
+    return {
+      "--color": t.value || "auto",
+      "--font-size": d ? `${d}px` : `var(--font-size-${a?.size})`,
+      "--font-weight": e?.fontWeight,
+      "--font-family": e?.fontFamily
+    };
+  }, [
+    a?.size,
+    l,
+    e?.color,
+    e?.fontFamily,
+    e?.fontSize,
+    e?.fontWeight
+  ]), b = F(i.title, p);
+  return /* @__PURE__ */ o(C, { children: [
+    R(
+      /* @__PURE__ */ r(
+        "link",
+        {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css2?family=${e?.fontFamily}:wght@100..900&display=swap`
+        }
+      ),
+      document.head
+    ),
+    /* @__PURE__ */ o(
+      "h1",
+      {
+        className: y(m.stepTitle, n.BLOCK_TITLE),
+        style: N,
+        "data-mobile": c,
+        children: [
+          I.questionNumber && A(f) && /* @__PURE__ */ o(
+            "span",
+            {
+              className: y(
+                m.stepIndicator,
+                n.NUMBER_BADGE
+              ),
+              "data-mobile": c,
+              children: [
+                f,
+                /* @__PURE__ */ r(w, { className: m.stepIndicatorIcon })
+              ]
+            }
+          ),
+          p ? /* @__PURE__ */ o(u, { children: [
+            /* @__PURE__ */ r(
+              M,
+              {
+                value: i.title,
+                placeholder: x("stepTitlePlaceholder"),
+                onChange: (t) => {
+                  T.updateControl(g, i.id, { title: t });
+                }
+              }
+            ),
+            i.required && /* @__PURE__ */ r(
+              h.span,
+              {
+                className: n.REQUIRED_INDICATOR,
+                style: { color: "red", marginLeft: 4 },
+                initial: { opacity: 0, x: -30 },
+                animate: { opacity: 1, x: -10 },
+                exit: { opacity: 0, x: -30 },
+                transition: { duration: 0.2 },
+                children: "*"
+              },
+              "required-edit"
+            )
+          ] }) : /* @__PURE__ */ o(u, { children: [
+            b,
+            i.required && /* @__PURE__ */ r(
+              h.span,
+              {
+                className: n.REQUIRED_INDICATOR,
+                style: { color: "red", marginLeft: 4 },
+                initial: { opacity: 0, x: -10 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: -10 },
+                transition: { duration: 0.2 },
+                children: "*"
+              },
+              "required-view"
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  J as StepTitle
+};

package/dist/components/FormViewer/components/fields/AddOptionButton.d.ts

@@ -1,3 +1,4 @@
 export declare const AddOptionButton: ({ onClick }: {
     onClick: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddOptionButton.d.ts.map

package/dist/components/FormViewer/components/fields/AddOptionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddOptionButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/AddOptionButton.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4CAiBnE,CAAC"}

package/dist/components/FormViewer/components/fields/AddOptionButton.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { Button as i } from "@mantine/core";
+const u = ({ onClick: t }) => {
+  const { t: o } = n("forms");
+  return /* @__PURE__ */ r(
+    i,
+    {
+      color: "gray",
+      variant: "subtle",
+      fullWidth: !0,
+      justify: "flex-start",
+      td: "underline",
+      w: "fit-content",
+      ml: 6,
+      px: 4,
+      onClick: t,
+      children: o("addOption")
+    }
+  );
+};
+export {
+  u as AddOptionButton
+};

package/dist/components/FormViewer/components/fields/ButtonField/ButtonField.d.ts

@@ -4,3 +4,4 @@ export declare const ButtonField: ({ control, step, theme, }: {
     step: StepData;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonField.d.ts.map

package/dist/components/FormViewer/components/fields/ButtonField/ButtonField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/ButtonField/ButtonField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKzE,eAAO,MAAM,WAAW,GAAI,2BAIzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAqFA,CAAC"}

package/dist/components/FormViewer/components/fields/ButtonField/ButtonField.js

@@ -0,0 +1,63 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useSearchParams as W } from "react-router-dom";
+import { Flex as j } from "@mantine/core";
+import { InnerButton as F } from "./InnerButton.js";
+const w = 8, $ = ({
+  control: e,
+  step: x,
+  theme: g
+}) => {
+  const [f] = W(), c = (f.get("view") || "").toLowerCase(), m = c === "mobile" || c === "m", l = (m || window.innerWidth < 992) && e.fullWidthMobile, d = l ? "column" : e.orientation ?? "row", o = d.startsWith("row"), h = (t) => t === "end" ? "flex-end" : t === "center" ? "center" : "flex-start", s = e.buttons ?? [], r = s.map((t) => Math.min(Math.max(t.width ?? 100, 1), 100)), u = r.reduce((t, i) => t + i, 0), b = o && u > 100 ? r.map((t) => t / u * 100) : r, P = 30;
+  let n = b.slice();
+  if (o && m) {
+    n = n.map((i) => Math.max(i, P));
+    const t = n.reduce((i, a) => i + a, 0);
+    if (t > 100) {
+      const i = 100 / t;
+      n = n.map((a) => a * i);
+    }
+  }
+  const M = o && s.length > 0 ? w * (s.length - 1) / s.length : 0, B = o ? { justify: h(e.alignButton), align: "stretch" } : { align: "stretch", justify: h(e.alignButton) };
+  return /* @__PURE__ */ p(
+    j,
+    {
+      direction: d,
+      wrap: "nowrap",
+      gap: w,
+      w: "100%",
+      "data-control-id": e.id,
+      ...B,
+      children: s.map((t, i) => {
+        const a = l ? 100 : n[i], S = o ? {
+          flex: `0 0 calc(${a}% - ${M}px)`,
+          minWidth: 0,
+          maxWidth: "100%",
+          alignSelf: e.alignButton ?? "stretch",
+          boxSizing: "border-box",
+          transition: "flex-basis 200ms ease"
+        } : {
+          width: `${a}%`,
+          minWidth: 0,
+          maxWidth: "100%",
+          alignSelf: e.alignButton ?? "stretch",
+          boxSizing: "border-box",
+          transition: "width 200ms ease"
+        };
+        return /* @__PURE__ */ p(
+          F,
+          {
+            control: e,
+            buttonControl: t,
+            step: x,
+            wrapperStyle: S,
+            theme: g
+          },
+          t.id
+        );
+      })
+    }
+  );
+};
+export {
+  $ as ButtonField
+};

package/dist/components/FormViewer/components/fields/ButtonField/InnerButton.d.ts

@@ -7,3 +7,4 @@ export declare const InnerButton: ({ buttonControl, control, step, wrapperStyle,
     wrapperStyle?: CSSProperties;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InnerButton.d.ts.map

package/dist/components/FormViewer/components/fields/ButtonField/InnerButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InnerButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/ButtonField/InnerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGzE,eAAO,MAAM,WAAW,GAAI,wDAMzB;IACD,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAqEA,CAAC"}

package/dist/components/FormViewer/components/fields/ButtonField/InnerButton.js

@@ -0,0 +1,70 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Tooltip as h, Button as w } from "@mantine/core";
+import { ProjectIcon as I } from "../../../../ProjectIcon/ProjectIcon.js";
+import { STATIC_CLASSES as T } from "../../../helpers/staticClasses.js";
+import { useFormViewerStore as g } from "../../../store/formStore.js";
+import { EditableContent as v } from "../EditableContent/EditableContent.js";
+const P = ({
+  buttonControl: e,
+  control: a,
+  step: c,
+  wrapperStyle: l,
+  theme: t
+}) => {
+  const { useStore: d, api: m } = g(), s = d((i) => i.editing), r = e.label?.trim(), p = (i) => m.updateControl(c.id, a?.id ?? "", i), u = (i, f) => {
+    const S = a?.buttons?.map(
+      (n) => n.id === i ? { ...n, ...f } : n
+    );
+    p({ buttons: S });
+  };
+  return /* @__PURE__ */ o("div", { style: l, children: /* @__PURE__ */ o(
+    h,
+    {
+      label: r,
+      disabled: !e.enableTooltip,
+      withArrow: !0,
+      withinPortal: !0,
+      multiline: !0,
+      maw: 320,
+      children: /* @__PURE__ */ o(
+        w,
+        {
+          w: "100%",
+          p: r ? 8 : 0,
+          color: t?.primaryColor,
+          size: t?.size,
+          radius: t?.borderRadius,
+          styles: {
+            section: {
+              margin: r ? void 0 : 0
+            }
+          },
+          className: T.SUBMIT_BUTTON,
+          leftSection: e.buttonIcon && e.showIconButton ? /* @__PURE__ */ o(
+            I,
+            {
+              variant: "transparent",
+              icon: e.buttonIcon
+            }
+          ) : void 0,
+          ...!s && e.link ? {
+            component: "a",
+            href: e.link,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          } : {},
+          children: s && r ? /* @__PURE__ */ o(
+            v,
+            {
+              value: r,
+              onChange: (i) => u?.(e.id, { label: i })
+            }
+          ) : r
+        }
+      )
+    }
+  ) });
+};
+export {
+  P as InnerButton
+};

package/dist/components/FormViewer/components/fields/ChoiceField/ChoiceCard.d.ts

@@ -8,4 +8,5 @@ export type ChoiceCardProps = {
     controlId: string;
     theme?: ThemeData;
 };
-export declare const ChoiceCard: import('react').MemoExoticComponent<({ label, showInput, onUpdate, onRemove, controlId, id, theme, }: ChoiceCardProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChoiceCard: import("react").MemoExoticComponent<({ label, showInput, onUpdate, onRemove, controlId, id, theme, }: ChoiceCardProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ChoiceCard.d.ts.map

package/dist/components/FormViewer/components/fields/ChoiceField/ChoiceCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/ChoiceField/ChoiceCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGnE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,wGASlB,eAAe,6CAsBnB,CAAC"}

package/dist/components/FormViewer/components/fields/ChoiceField/ChoiceCard.js

@@ -0,0 +1,35 @@
+import { jsx as n } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { useSteps as u } from "../../../hooks/useCreateFormContext.js";
+import { SelectableCard as f } from "../SelectableCard/SelectableCard.js";
+const x = p(
+  ({
+    label: i,
+    showInput: l,
+    onUpdate: r,
+    onRemove: a,
+    controlId: e,
+    id: o,
+    theme: s
+  }) => {
+    const { form: c, setValue: m } = u(), t = c.values[e] === o;
+    return /* @__PURE__ */ n(
+      f,
+      {
+        label: i,
+        hasInput: l,
+        inputType: "radio",
+        active: t,
+        onClick: () => {
+          m(e, t ? null : o);
+        },
+        onUpdate: r,
+        onRemove: a,
+        theme: s
+      }
+    );
+  }
+);
+export {
+  x as ChoiceCard
+};

package/dist/components/FormViewer/components/fields/ChoiceField/ChoiceField.d.ts

@@ -4,3 +4,4 @@ export declare const ChoiceField: ({ control, step, theme, }: {
     step: StepData;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChoiceField.d.ts.map

package/dist/components/FormViewer/components/fields/ChoiceField/ChoiceField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/ChoiceField/ChoiceField.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,aAAa,EAEb,QAAQ,EACR,SAAS,EACV,MAAM,qBAAqB,CAAC;AAK7B,eAAO,MAAM,WAAW,GAAI,2BAIzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAsJA,CAAC"}

package/dist/components/FormViewer/components/fields/ChoiceField/ChoiceField.js

@@ -0,0 +1,135 @@
+import { jsx as n, jsxs as R } from "react/jsx-runtime";
+import { useMemo as O } from "react";
+import { useTranslation as D } from "react-i18next";
+import { arrayMove as V } from "@dnd-kit/sortable";
+import { Stack as _, TextInput as B, Box as M, InputError as N } from "@mantine/core";
+import { STATIC_CLASSES as g } from "../../../helpers/staticClasses.js";
+import { getRandomId as j } from "../../../helpers/steps.js";
+import { useSteps as k } from "../../../hooks/useCreateFormContext.js";
+import { useInterpolate as z } from "../../../hooks/useInterpolateText.js";
+import { useFormViewerStore as F } from "../../../store/formStore.js";
+import { AddOptionButton as P } from "../AddOptionButton.js";
+import { DragOptions as U } from "../DragOptions/DragOptions.js";
+import { ChoiceCard as x } from "./ChoiceCard.js";
+const to = ({
+  control: v,
+  step: e,
+  theme: s
+}) => {
+  const { t: p } = D("forms"), { form: f } = k(), { id: i, options: t, showInput: m, otherOption: I } = v, { useStore: b, api: d } = F(), a = b((o) => o.editing), C = f.errors[i], c = f.values[i], S = (o) => {
+    const { active: r, over: l } = o;
+    if (r.id !== l?.id && t) {
+      const T = t.findIndex((u) => u.id === r.id), A = t.findIndex((u) => u.id === l?.id), L = V(t, T, A);
+      d.updateControl(e.id, i, {
+        options: L
+      });
+    }
+  }, h = z(), E = O(() => [
+    ...(t || []).map((o) => ({
+      id: o.id || "",
+      element: /* @__PURE__ */ n(
+        x,
+        {
+          ...o,
+          label: a ? o.label : h(o.label),
+          controlId: i,
+          showInput: m,
+          theme: s,
+          onUpdate: a ? (r) => {
+            d.updateControl(e.id, i, {
+              options: t.map(
+                (l) => l.id === o.id ? { ...l, ...r } : l
+              )
+            });
+          } : void 0,
+          onRemove: a ? () => {
+            d.updateControl(e.id, i, {
+              options: t.filter((r) => r.id !== o.id)
+            });
+          } : void 0
+        }
+      )
+    })),
+    ...I ? [
+      {
+        id: "other",
+        element: /* @__PURE__ */ n(
+          x,
+          {
+            label: p("otherOption"),
+            controlId: i,
+            showInput: m,
+            theme: s,
+            id: "other"
+          }
+        )
+      }
+    ] : []
+  ], [
+    d,
+    a,
+    i,
+    h,
+    t,
+    I,
+    m,
+    e.id,
+    p,
+    s
+  ]), w = O(() => t?.find((o) => o.id === c)?.label, [c, t]);
+  return /* @__PURE__ */ R(
+    _,
+    {
+      gap: 8,
+      w: "fit-content",
+      "data-control-id": i,
+      className: g.BLOCK_MULTIPLE_CHOICE,
+      children: [
+        /* @__PURE__ */ n(
+          U,
+          {
+            editable: a,
+            options: E,
+            onDragEnd: S,
+            align: s?.align
+          }
+        ),
+        c === "other" && /* @__PURE__ */ n(
+          B,
+          {
+            size: s?.size,
+            value: w,
+            onChange: (o) => {
+              d.updateControl(e.id, i, {
+                options: t.map(
+                  (r) => r.id === "other" ? { ...r, label: o.target.value } : r
+                )
+              });
+            },
+            placeholder: p("otherOptionPlaceholder")
+          }
+        ),
+        a && /* @__PURE__ */ n(M, { mx: -8, children: /* @__PURE__ */ n(
+          P,
+          {
+            onClick: () => {
+              d.updateControl(e.id, i, {
+                options: [
+                  ...t || [],
+                  {
+                    id: j(),
+                    label: p("newOption")
+                  }
+                ]
+              });
+            }
+          }
+        ) }),
+        C && /* @__PURE__ */ n(N, { className: g.VALIDATION_ERROR, children: C })
+      ]
+    }
+  );
+};
+export {
+  to as ChoiceField
+};

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceCard.d.ts

@@ -9,4 +9,5 @@ export type PictureChoiceCardProps = {
     id: string;
     theme?: ThemeData;
 };
-export declare const PictureChoiceCard: import('react').MemoExoticComponent<({ label, showInput, onUpdate, onRemove, image, controlId, id, theme, }: PictureChoiceCardProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const PictureChoiceCard: import("react").MemoExoticComponent<({ label, showInput, onUpdate, onRemove, image, controlId, id, theme, }: PictureChoiceCardProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=PictureChoiceCard.d.ts.map

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureChoiceCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/ChoiceField/PictureChoiceCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG1E,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+GAUzB,sBAAsB,6CAuB1B,CAAC"}

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceCard.js

@@ -0,0 +1,37 @@
+import { jsx as u } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { useSteps as f } from "../../../hooks/useCreateFormContext.js";
+import { PictureSelectableCard as C } from "../SelectableCard/PictureSelectableCard.js";
+const P = p(
+  ({
+    label: i,
+    showInput: r,
+    onUpdate: l,
+    onRemove: c,
+    image: a,
+    controlId: e,
+    id: t,
+    theme: s
+  }) => {
+    const { form: m, setValue: n } = f(), o = m.values[e] === t;
+    return /* @__PURE__ */ u(
+      C,
+      {
+        label: i,
+        hasInput: r,
+        inputType: "radio",
+        active: o,
+        onClick: () => {
+          n(e, o ? null : t);
+        },
+        onUpdate: l,
+        onRemove: c,
+        image: a,
+        theme: s
+      }
+    );
+  }
+);
+export {
+  P as PictureChoiceCard
+};

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceField.d.ts

@@ -4,3 +4,4 @@ export declare const PictureChoiceField: ({ control, step, theme, }: {
     step: StepData;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PictureChoiceField.d.ts.map

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureChoiceField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/ChoiceField/PictureChoiceField.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,oBAAoB,EAEpB,QAAQ,EACR,SAAS,EACV,MAAM,qBAAqB,CAAC;AAK7B,eAAO,MAAM,kBAAkB,GAAI,2BAIhC;IACD,OAAO,EAAE,oBAAoB,CAAC;IAC9B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAoGA,CAAC"}

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceField.js

@@ -0,0 +1,93 @@
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { useMemo as h } from "react";
+import { useTranslation as A } from "react-i18next";
+import { arrayMove as L } from "@dnd-kit/sortable";
+import { Stack as R, Box as T, InputError as D } from "@mantine/core";
+import { STATIC_CLASSES as u } from "../../../helpers/staticClasses.js";
+import { getRandomId as _ } from "../../../helpers/steps.js";
+import { useSteps as B } from "../../../hooks/useCreateFormContext.js";
+import { useInterpolate as M } from "../../../hooks/useInterpolateText.js";
+import { useFormViewerStore as N } from "../../../store/formStore.js";
+import { AddOptionButton as P } from "../AddOptionButton.js";
+import { DragOptions as j } from "../DragOptions/DragOptions.js";
+import { PictureChoiceCard as k } from "./PictureChoiceCard.js";
+const Y = ({
+  control: I,
+  step: d,
+  theme: m
+}) => {
+  const { t: C } = A("forms"), { id: r, options: i, showInput: l } = I, { api: s, useStore: g } = N(), t = g((o) => o.editing), { form: x } = B(), c = x.errors[r], O = (o) => {
+    const { active: n, over: e } = o;
+    if (n.id !== e?.id && i) {
+      const E = i.findIndex((p) => p.id === n.id), v = i.findIndex((p) => p.id === e?.id), w = L(i, E, v);
+      s.updateControl(d.id, r, {
+        options: w
+      });
+    }
+  }, f = M(), S = h(() => i?.map((o) => ({
+    id: o.id || "",
+    element: /* @__PURE__ */ a(
+      k,
+      {
+        ...o,
+        label: t ? o.label : f(o.label),
+        controlId: r,
+        showInput: l,
+        theme: m,
+        onUpdate: t ? (n) => {
+          s.updateControl(d.id, r, {
+            options: i.map(
+              (e) => e.id === o.id ? { ...e, ...n } : e
+            )
+          });
+        } : void 0,
+        onRemove: t ? () => {
+          s.updateControl(d.id, r, {
+            options: i.filter((n) => n.id !== o.id)
+          });
+        } : void 0
+      }
+    )
+  })), [s, t, r, f, i, l, d.id, m]);
+  return /* @__PURE__ */ b(
+    R,
+    {
+      gap: 8,
+      w: "100%",
+      "data-control-id": r,
+      className: u.BLOCK_MULTIPLE_CHOICE,
+      children: [
+        /* @__PURE__ */ a(
+          j,
+          {
+            editable: t,
+            options: S,
+            onDragEnd: O,
+            isGrid: !0,
+            align: m?.align
+          }
+        ),
+        t && /* @__PURE__ */ a(T, { mx: -8, children: /* @__PURE__ */ a(
+          P,
+          {
+            onClick: () => {
+              s.updateControl(d.id, r, {
+                options: [
+                  ...i || [],
+                  {
+                    id: _(),
+                    label: C("newOption")
+                  }
+                ]
+              });
+            }
+          }
+        ) }),
+        c && /* @__PURE__ */ a(D, { className: u.VALIDATION_ERROR, children: c })
+      ]
+    }
+  );
+};
+export {
+  Y as PictureChoiceField
+};

package/dist/components/FormViewer/components/fields/ConfirmButton.d.ts

@@ -4,3 +4,4 @@ export declare const ConfirmButton: ({ step, control, theme, }: {
     control: ConfirmControl;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConfirmButton.d.ts.map

package/dist/components/FormViewer/components/fields/ConfirmButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/ConfirmButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGvE,eAAO,MAAM,aAAa,GAAI,2BAI3B;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,mDA6CA,CAAC"}