@layers-app/shared 0.4.8 → 0.4.10

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

@@ -0,0 +1,38 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { combineClasses as N, STATIC_CLASSES as b } from "../../helpers/staticClasses.js";
+import { useSteps as L } from "../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as I } from "../../store/formStore.js";
+import t from "./fieldStyles.module.css.js";
+const T = 1, _ = 10, g = 20, R = ({
+  control: n
+}) => {
+  const { form: a } = L(), { useStore: h } = I(), i = h((s) => s.editing), { id: r, minLabel: c, maxLabel: l } = n, o = n.min ?? T, v = n.max ?? _, d = Math.min(v, o + g - 1), A = d >= o ? Array.from({ length: d - o + 1 }, (s, f) => o + f) : [], m = a.getInputProps(r), S = m.value, p = a.errors[r];
+  return /* @__PURE__ */ u("div", { className: t.field, "data-control-id": r, children: [
+    /* @__PURE__ */ e("div", { className: t.scaleRow, children: A.map((s) => /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: t.scaleBtn,
+        "data-active": S === s || void 0,
+        "data-disabled": i || void 0,
+        onClick: i ? void 0 : () => m.onChange(s),
+        children: s
+      },
+      s
+    )) }),
+    (c || l) && /* @__PURE__ */ u("div", { className: t.scaleLabels, children: [
+      /* @__PURE__ */ e("span", { children: c }),
+      /* @__PURE__ */ e("span", { children: l })
+    ] }),
+    p ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: N(t.error, b.VALIDATION_ERROR),
+        children: p
+      }
+    ) : null
+  ] });
+};
+export {
+  R as ScaleField
+};

package/dist/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.d.ts

@@ -4,7 +4,6 @@ import { PictureChoiceControlItem, ThemeData } from '../../../types/form';
 type PictureSelectableCardProps = {
     label: string;
     inputType?: 'radio' | 'checkbox';
-    hasInput?: boolean;
     disabled?: boolean;
     active?: boolean;
     onClick: () => void;
@@ -14,12 +13,16 @@ type PictureSelectableCardProps = {
     theme?: ThemeData;
     onUpload?: (files: FileWithPath[], setOpened: (state: boolean) => void) => void;
 };
-export declare const PictureSelectableCard: import("react").MemoExoticComponent<({ label, active, disabled, hasInput, image, onClick, inputType, onUpdate, onRemove, theme, onUpload, }: PictureSelectableCardProps) => import("react/jsx-runtime").JSX.Element>;
-export declare const UploadOptionImageButton: ({ children, onUpdate, onRemove, hasImage, onUpload, }: PropsWithChildren<{
-    onUpdate?: (v: Partial<PictureChoiceControlItem>) => void;
-    onRemove?: () => void;
-    hasImage?: boolean;
+export declare const PictureSelectableCard: import("react").MemoExoticComponent<({ label, active, disabled, image, onClick, inputType, onUpdate, onRemove, onUpload, }: PictureSelectableCardProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * Обёртка над картинкой опции picture-choice в режиме редактора: клик по
+ * картинке сразу открывает системный диалог выбора файла (без выпадающего
+ * меню-источников), при наведении — оверлей с иконкой; во время загрузки —
+ * лоадер.
+ */
+export declare const UploadImageTrigger: ({ children, onUpload, hasImage, }: PropsWithChildren<{
     onUpload?: (files: FileWithPath[], setOpened: (state: boolean) => void) => void;
+    hasImage?: boolean;
 }>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PictureSelectableCard.d.ts.map

package/dist/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PictureSelectableCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAYzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAM1E,KAAK,0BAA0B,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,YAAY,EAAE,EACrB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,KAChC,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,qBAAqB,+IAa7B,0BAA0B,6CAsI9B,CAAC;AAeF,eAAO,MAAM,uBAAuB,GAAI,uDAMrC,iBAAiB,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,YAAY,EAAE,EACrB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,KAChC,IAAI,CAAC;CACX,CAAC,4CAoBD,CAAC"}
+{"version":3,"file":"PictureSelectableCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjD,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAK1E,KAAK,0BAA0B,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,YAAY,EAAE,EACrB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,KAChC,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,qBAAqB,8HAW7B,0BAA0B,6CAsE9B,CAAC;AAqBF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,mCAIhC,iBAAiB,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,YAAY,EAAE,EACrB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,4CAyDD,CAAC"}

package/dist/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.js

@@ -1,161 +1,119 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { memo as x, useMemo as _ } from "react";
-import { useMantineTheme as k, parseThemeColor as z, Radio as N, alpha as h, Checkbox as P, Flex as A, ActionIcon as D } from "@mantine/core";
-import { IconTrash as H, IconPhoto as B } from "@tabler/icons-react";
-import { useAsyncStatus as w } from "../../../../../hooks/useAsyncStatus.js";
-import { combineClasses as I, STATIC_CLASSES as s } from "../../../helpers/staticClasses.js";
-import { useFormViewerStore as K } from "../../../store/formStore.js";
-import { EditableContent as M } from "../EditableContent/EditableContent.js";
-import u from "./SelectableCard.module.css.js";
-import { FilePicker as X } from "../../../../FilePicker/FilePicker.js";
-const Y = x(
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { memo as I, useRef as b } from "react";
+import { Loader as y } from "@mantine/core";
+import { IconCheck as k, IconTrash as N, IconPhotoPlus as S, IconPhoto as L } from "@tabler/icons-react";
+import { useAsyncStatus as O } from "../../../../../hooks/useAsyncStatus.js";
+import { combineClasses as P, STATIC_CLASSES as m } from "../../../helpers/staticClasses.js";
+import { useFormViewerStore as T } from "../../../store/formStore.js";
+import { EditableContent as v } from "../EditableContent/EditableContent.js";
+import t from "../fieldStyles.module.css.js";
+const F = I(
   ({
-    label: i,
-    active: r,
-    disabled: c,
-    hasInput: C,
-    image: t,
-    onClick: E,
-    inputType: n,
-    onUpdate: e,
-    onRemove: m,
-    theme: a,
-    onUpload: S
+    label: a,
+    active: n,
+    disabled: l,
+    image: r,
+    onClick: d,
+    inputType: p,
+    onUpdate: s,
+    onRemove: c,
+    onUpload: h
   }) => {
-    const { useStore: f } = K(), y = f((d) => d.editing), T = k(), l = z({
-      color: a?.primaryColor || "",
-      theme: T
-    }), b = _(() => n === "radio" ? /* @__PURE__ */ o(
-      N,
-      {
-        style: {
-          "--color": l.value,
-          "--color-shadow": h(l.value, 0.5)
-        },
-        classNames: {
-          radio: I(
-            u.radio,
-            s.RADIO,
-            r ? s.RADIO_SELECTED : ""
-          )
-        },
-        disabled: c,
-        size: a?.size,
-        color: a?.primaryColor,
-        checked: r,
-        readOnly: !0,
-        radius: "xl"
-      }
-    ) : /* @__PURE__ */ o(
-      P,
-      {
-        styles: {
-          input: {
-            "--color": l.value,
-            "--color-shadow": h(l.value, 0.5)
-          }
-        },
-        classNames: {
-          input: I(
-            u.checkbox,
-            s.CHECKBOX,
-            r ? s.CHECKBOX_SELECTED : ""
-          )
-        },
-        disabled: c,
-        size: a?.size,
-        color: a?.primaryColor,
-        checked: r,
-        readOnly: !0
-      }
-    ), [
-      r,
-      l.value,
-      c,
-      n,
-      a?.primaryColor,
-      a?.size
-    ]), v = {
-      "--text-color": l.value,
-      "--border-color": l.value,
-      "--bg-color": h(l.value, 0.05)
-    }, O = e || m, L = I(
-      u.card,
-      n === "radio" ? s.MULTIPLE_CHOICE_OPTION : s.CHECKBOX,
-      r ? n === "radio" ? s.MULTIPLE_CHOICE_OPTION_SELECTED : s.CHECKBOX_SELECTED : ""
-    );
-    return /* @__PURE__ */ p(
+    const { useStore: u } = T(), o = u((C) => C.editing), i = !!(s || c), g = p === "checkbox";
+    return /* @__PURE__ */ f(
       "div",
       {
-        style: v,
-        className: L,
-        "data-active": r,
-        "data-disabled": c,
-        onClick: O ? void 0 : E,
-        "data-radius": a?.borderRadius,
+        className: P(
+          t.picCard,
+          g ? m.CHECKBOX : m.MULTIPLE_CHOICE_OPTION,
+          n ? g ? m.CHECKBOX_SELECTED : m.MULTIPLE_CHOICE_OPTION_SELECTED : ""
+        ),
+        "data-active": n,
+        "data-disabled": l,
+        "data-editable": i,
+        onClick: i || l ? void 0 : d,
         children: [
-          y ? /* @__PURE__ */ o(
-            F,
-            {
-              hasImage: !!t,
-              onUpdate: (d) => e?.({ image: d.image }),
-              onRemove: () => e?.({ image: void 0 }),
-              onUpload: S,
-              children: /* @__PURE__ */ o(g, { image: t })
-            }
-          ) : /* @__PURE__ */ o(g, { image: t }),
-          /* @__PURE__ */ p("div", { className: u.controls, children: [
-            C && b,
-            O ? /* @__PURE__ */ p(A, { miw: 0, flex: 1, children: [
-              e && /* @__PURE__ */ o(
-                M,
-                {
-                  value: i,
-                  placeholder: "Option",
-                  onChange: (d) => {
-                    e?.({ label: d });
-                  }
+          n && !i ? /* @__PURE__ */ e("span", { className: t.picBadge, children: /* @__PURE__ */ e(k, { size: 14, stroke: 3 }) }) : null,
+          o ? /* @__PURE__ */ e(x, { onUpload: h, hasImage: !!r, children: /* @__PURE__ */ e(E, { image: r, showPlaceholder: !1 }) }) : /* @__PURE__ */ e(E, { image: r }),
+          /* @__PURE__ */ e("div", { className: t.picFooter, children: i ? /* @__PURE__ */ f("div", { className: t.optionEdit, children: [
+            s && /* @__PURE__ */ e(
+              v,
+              {
+                value: a,
+                placeholder: "Option",
+                onChange: (C) => {
+                  s?.({ label: C });
                 }
-              ),
-              m && /* @__PURE__ */ o(D, { color: "red", variant: "subtle", onClick: m, children: /* @__PURE__ */ o(H, { size: "1em" }) })
-            ] }) : i
-          ] })
+              }
+            ),
+            c && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: t.trashBtn,
+                onClick: c,
+                children: /* @__PURE__ */ e(N, { size: "1em" })
+              }
+            )
+          ] }) : /* @__PURE__ */ e("span", { className: t.picLabel, children: a }) })
         ]
       }
     );
   }
-), g = ({ image: i }) => /* @__PURE__ */ o(
+), E = ({
+  image: a,
+  showPlaceholder: n = !0
+}) => /* @__PURE__ */ e(
   "div",
   {
-    className: u.image,
+    className: t.picImage,
     style: {
-      backgroundImage: `url(${i})`
+      backgroundImage: a ? `url(${a})` : void 0
     },
-    children: !i && /* @__PURE__ */ o(B, { size: 32, color: "var(--primary-color)" })
+    children: !a && n && /* @__PURE__ */ e(L, { size: 32 })
   }
-), F = ({
-  children: i,
-  onUpdate: r,
-  onRemove: c,
-  hasImage: C,
-  onUpload: t
+), x = ({
+  children: a,
+  onUpload: n,
+  hasImage: l
 }) => {
-  const { isLoading: E, onSubmit: n } = w();
-  return /* @__PURE__ */ o(
-    X,
+  const r = b(null), { isLoading: d, onSubmit: p } = O(), s = () => r.current?.click(), c = (o) => {
+    o.stopPropagation(), s();
+  }, h = (o) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), s());
+  }, u = (o) => {
+    const i = Array.from(o.target.files ?? []);
+    o.target.value = "", i.length && p(async () => n?.(i, () => {
+    }));
+  };
+  return /* @__PURE__ */ f(
+    "div",
     {
-      hasImage: C,
-      onChange: (e) => r?.({
-        image: e
-      }),
-      onRemove: c,
-      onUpload: (e, m) => n(async () => t?.(e, m)),
-      uploading: E,
-      children: i
+      className: t.picUpload,
+      "data-loading": d,
+      "data-empty": !l,
+      role: "button",
+      tabIndex: 0,
+      onClick: c,
+      onKeyDown: h,
+      children: [
+        a,
+        /* @__PURE__ */ e("div", { className: t.picUploadOverlay, "aria-hidden": !0, children: /* @__PURE__ */ e("span", { className: t.picUploadBadge, children: d ? /* @__PURE__ */ e(y, { size: "xs", color: "white" }) : /* @__PURE__ */ e(S, { size: 18 }) }) }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: r,
+            type: "file",
+            accept: "image/*",
+            hidden: !0,
+            onChange: u
+          }
+        )
+      ]
     }
   );
 };
 export {
-  Y as PictureSelectableCard,
-  F as UploadOptionImageButton
+  F as PictureSelectableCard,
+  x as UploadImageTrigger
 };

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

@@ -2,7 +2,6 @@ import { ChoiceControlItem, ThemeData } from '../../../types/form';
 type SelectableCardProps = {
     label: string;
     inputType?: 'radio' | 'checkbox';
-    hasInput?: boolean;
     disabled?: boolean;
     active?: boolean;
     onClick: () => void;
@@ -10,6 +9,6 @@ type SelectableCardProps = {
     onUpdate?: (v: Partial<ChoiceControlItem>) => void;
     theme?: ThemeData;
 };
-export declare const SelectableCard: import("react").MemoExoticComponent<({ label, active, disabled, hasInput, onClick, inputType, onUpdate, onRemove, theme, }: SelectableCardProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const SelectableCard: import("react").MemoExoticComponent<({ label, active, disabled, onClick, inputType, onUpdate, onRemove, theme, }: SelectableCardProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=SelectableCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKnE,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,8HAWtB,mBAAmB,6CAoHvB,CAAC"}
+{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMnE,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,oHAUtB,mBAAmB,6CAoFvB,CAAC"}

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

@@ -1,110 +1,83 @@
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { memo as L, useMemo as S } from "react";
-import { useMantineTheme as _, parseThemeColor as b, Radio as v, alpha as t, Checkbox as y, Flex as k, ActionIcon as z } from "@mantine/core";
-import { IconTrash as H } from "@tabler/icons-react";
-import { combineClasses as E, STATIC_CLASSES as e } from "../../../helpers/staticClasses.js";
-import { EditableContent as N } from "../EditableContent/EditableContent.js";
-import i from "./SelectableCard.module.css.js";
-const D = L(
+import { jsxs as C, jsx as o } from "react/jsx-runtime";
+import { memo as I } from "react";
+import { IconTrash as b, IconCheck as N } from "@tabler/icons-react";
+import { combineClasses as c, STATIC_CLASSES as e } from "../../../helpers/staticClasses.js";
+import { EditableContent as T } from "../EditableContent/EditableContent.js";
+import { useFieldTokens as L } from "../fieldTheme.js";
+import a from "../fieldStyles.module.css.js";
+const P = I(
   ({
-    label: d,
-    active: l,
-    disabled: s,
-    hasInput: O,
-    onClick: h,
-    inputType: c,
-    onUpdate: C,
-    onRemove: n,
-    theme: o
+    label: n,
+    active: r,
+    disabled: l,
+    onClick: d,
+    inputType: E,
+    onUpdate: t,
+    onRemove: i,
+    theme: p
   }) => {
-    const p = _(), m = C || n, r = b({
-      color: o?.primaryColor || "",
-      theme: p
-    }), T = S(() => c === "radio" ? /* @__PURE__ */ a(
-      v,
-      {
-        style: {
-          "--color": r.value,
-          "--color-shadow": t(r.value, 0.5)
-        },
-        classNames: {
-          radio: i.radio
-        },
-        disabled: s,
-        size: o?.size,
-        color: o?.primaryColor,
-        checked: l,
-        readOnly: !0,
-        radius: "xl"
-      }
-    ) : /* @__PURE__ */ a(
-      y,
+    const { markIconSize: k } = L(p), h = !!(t || i), s = E === "checkbox", m = c(
+      a.mark,
+      s ? a.markCheckbox : a.markRadio,
+      s ? e.CHECKBOX : e.RADIO
+    );
+    return h ? /* @__PURE__ */ C(
+      "div",
       {
-        styles: {
-          input: {
-            "--color": r.value,
-            "--color-shadow": t(r.value, 0.5)
-          }
-        },
-        radius: "md",
-        classNames: {
-          input: E(
-            i.checkbox,
-            e.CHECKBOX,
-            l ? e.CHECKBOX_SELECTED : ""
+        className: c(
+          a.optionRow,
+          s ? e.CHECKBOX : e.MULTIPLE_CHOICE_OPTION
+        ),
+        "data-editable": "true",
+        children: [
+          /* @__PURE__ */ o("span", { className: m }),
+          /* @__PURE__ */ o("div", { className: a.optionLabel, children: t && /* @__PURE__ */ o(
+            T,
+            {
+              value: n,
+              placeholder: "Option",
+              onChange: (O) => {
+                t?.({ label: O });
+              }
+            }
+          ) }),
+          i && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: a.trashBtn,
+              onClick: i,
+              children: /* @__PURE__ */ o(b, { size: "1em" })
+            }
           )
-        },
-        disabled: s,
-        size: o?.size,
-        color: o?.primaryColor,
-        checked: l,
-        readOnly: !0
+        ]
       }
-    ), [
-      l,
-      r.value,
-      s,
-      c,
-      o?.primaryColor,
-      o?.size
-    ]), f = {
-      "--text-color": r.value,
-      "--border-color": r.value,
-      "--bg-color": t(r.value, 0.05)
-    }, x = E(
-      i.card,
-      c === "radio" ? e.MULTIPLE_CHOICE_OPTION : e.CHECKBOX,
-      l ? c === "radio" ? e.MULTIPLE_CHOICE_OPTION_SELECTED : e.CHECKBOX_SELECTED : ""
-    );
-    return /* @__PURE__ */ a(
+    ) : /* @__PURE__ */ C(
       "div",
       {
-        onClick: m || s ? void 0 : h,
-        style: f,
-        className: x,
-        "data-active": l,
-        "data-disabled": s,
-        "data-radius": o?.borderRadius,
-        children: /* @__PURE__ */ u("div", { className: i.controls, children: [
-          O && T,
-          m ? /* @__PURE__ */ u(k, { miw: 0, flex: 1, children: [
-            C && /* @__PURE__ */ a(
-              N,
-              {
-                value: d,
-                placeholder: "Option",
-                onChange: (I) => {
-                  C?.({ label: I });
-                }
-              }
-            ),
-            n && /* @__PURE__ */ a(z, { color: "red", variant: "subtle", onClick: n, children: /* @__PURE__ */ a(H, { size: "1em" }) })
-          ] }) : d
-        ] })
+        className: c(
+          a.optionRow,
+          s ? e.CHECKBOX : e.MULTIPLE_CHOICE_OPTION,
+          r ? s ? e.CHECKBOX_SELECTED : e.MULTIPLE_CHOICE_OPTION_SELECTED : ""
+        ),
+        "data-active": r,
+        "data-disabled": l,
+        onClick: l ? void 0 : d,
+        children: [
+          /* @__PURE__ */ o("span", { className: m, children: r && (s ? /* @__PURE__ */ o(
+            N,
+            {
+              className: a.markCheck,
+              size: k,
+              stroke: 3
+            }
+          ) : /* @__PURE__ */ o("span", { className: a.markDot })) }),
+          /* @__PURE__ */ o("span", { className: a.optionLabel, children: n })
+        ]
       }
     );
   }
 );
 export {
-  D as SelectableCard
+  P as SelectableCard
 };

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

@@ -1,5 +1,5 @@
 import { SliderControl, ThemeData } from '../../types/form';
-export declare const SliderField: ({ control, theme, }: {
+export declare const SliderField: ({ control, }: {
     control: SliderControl;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/SliderField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE5D,eAAO,MAAM,WAAW,GAAI,qBAGzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAkCA,CAAC"}
+{"version":3,"file":"SliderField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/SliderField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAI5D,eAAO,MAAM,WAAW,GAAI,cAEzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAiDA,CAAC"}

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

@@ -1,32 +1,48 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { useMemo as c } from "react";
-import { Box as d, Slider as f, InputError as x } from "@mantine/core";
-import { isNumber as m } from "lodash-es";
-import { useSteps as N } from "../../hooks/useCreateFormContext.js";
-const I = ({
-  control: n,
-  theme: s
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { clamp as m, useMove as v } from "@mantine/hooks";
+import { combineClasses as N, STATIC_CLASSES as x } from "../../helpers/staticClasses.js";
+import { useSteps as S } from "../../hooks/useCreateFormContext.js";
+import s from "./fieldStyles.module.css.js";
+const y = ({
+  control: o
 }) => {
-  const { form: i } = N(), { id: e, min: r, max: o } = n, p = c(() => !m(r) || !m(o) || isNaN(r) || isNaN(o) ? [] : [
-    { value: r, label: r },
-    { value: o, label: o }
-  ], [r, o]), t = i.getInputProps(e), a = t.value ?? r ?? 0;
-  return /* @__PURE__ */ u(d, { flex: 1, w: "100%", pb: 12, "data-control-id": e, children: [
-    /* @__PURE__ */ l(
-      f,
+  const { form: c } = S(), { id: l } = o, e = o.min ?? 0, i = o.max ?? 100, d = c.errors[l], n = c.values[l], t = typeof n == "number" ? n : e, f = i > e ? m((t - e) / (i - e), 0, 1) : 0, { ref: p } = v(({ x: u }) => {
+    if (i <= e) return;
+    const h = Math.round(e + m(u, 0, 1) * (i - e));
+    c.setFieldValue(l, h);
+  });
+  return /* @__PURE__ */ a("div", { className: s.field, "data-control-id": l, children: [
+    /* @__PURE__ */ a("div", { className: s.sliderRoot, children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: s.sliderTrack,
+          ref: p,
+          style: { "--slider-fraction": f },
+          children: [
+            /* @__PURE__ */ r("div", { className: s.sliderFilled }),
+            /* @__PURE__ */ r("div", { className: s.sliderThumb })
+          ]
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: s.sliderLabels, children: [
+        /* @__PURE__ */ r("span", { children: e }),
+        /* @__PURE__ */ r("span", { className: s.sliderValue, children: t }),
+        /* @__PURE__ */ r("span", { children: i })
+      ] })
+    ] }),
+    d && /* @__PURE__ */ r(
+      "div",
       {
-        color: s?.primaryColor,
-        size: s?.size,
-        min: r,
-        max: o,
-        marks: p,
-        ...t,
-        value: a
+        className: N(
+          s.error,
+          x.VALIDATION_ERROR
+        ),
+        children: d
       }
-    ),
-    i.errors[e] && /* @__PURE__ */ l(x, { size: s?.size, mt: 4, children: i.errors[e] })
+    )
   ] });
 };
 export {
-  I as SliderField
+  y as SliderField
 };

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

@@ -1,6 +1,7 @@
 import { StartControl } from '../../types/form';
-export declare const StartButton: ({ control, stepId, }: {
+export declare const StartButton: ({ control, stepId, fullWidth, }: {
     control: StartControl;
     stepId: string;
+    fullWidth?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StartButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StartButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/StartButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,eAAO,MAAM,WAAW,GAAI,sBAGzB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CAChB,4CA4BA,CAAC"}
+{"version":3,"file":"StartButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/StartButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIhD,eAAO,MAAM,WAAW,GAAI,iCAIzB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,4CA8BA,CAAC"}