@layers-app/shared 0.1.5 → 0.2.1

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceField.js

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

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

@@ -2,3 +2,4 @@ import { NumberControl } from '../../types/form';
 export declare const NumberField: ({ control }: {
     control: NumberControl;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NumberField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/NumberField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,WAAW,GAAI,aAAa;IAAE,OAAO,EAAE,aAAa,CAAA;CAAE,4CA4BlE,CAAC"}

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

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import { NumberInput as f } from "@mantine/core";
+import { ProjectIcon as l } from "../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as d } from "../../helpers/controls.js";
+import { STATIC_CLASSES as u } from "../../helpers/staticClasses.js";
+import { DEFAULT_MAX as S, DEFAULT_MIN as I } from "../../helpers/steps.js";
+import { useSteps as T } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as N } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as x } from "../../store/formStore.js";
+const h = ({ control: o }) => {
+  const { form: e } = T(), { useStore: m } = x(), i = m((a) => a.editing), { id: r, min: n, max: p, placeholder: c } = o, s = N(c, i);
+  return /* @__PURE__ */ t(
+    f,
+    {
+      w: "100%",
+      "data-control-id": r,
+      className: u.BLOCK_INPUT_NUMBER,
+      leftSection: o.icon ? /* @__PURE__ */ t(l, { icon: o.icon }) : d[o.controlType].icon,
+      min: n || I,
+      max: p || S,
+      placeholder: s,
+      ...e.getInputProps(r)
+    }
+  );
+};
+export {
+  h as NumberField
+};

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

@@ -2,3 +2,4 @@ import { PhoneControl } from '../../types/form';
 export declare const PhoneField: ({ control }: {
     control: PhoneControl;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PhoneField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/PhoneField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,eAAO,MAAM,UAAU,GAAI,aAAa;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4CA0BhE,CAAC"}

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

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { TextInput as s } from "@mantine/core";
+import { ProjectIcon as a } from "../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as d } from "../../helpers/controls.js";
+import { useSteps as l } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as f } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as u } from "../../store/formStore.js";
+const j = ({ control: o }) => {
+  const { form: r } = l(), { id: t, placeholder: i } = o, { useStore: n } = u(), p = n((m) => m.editing), c = f(i, p);
+  return /* @__PURE__ */ e(
+    s,
+    {
+      "data-control-id": t,
+      w: "100%",
+      variant: "default",
+      leftSection: o.icon ? /* @__PURE__ */ e(a, { icon: o.icon }) : d[o.controlType].icon,
+      placeholder: c,
+      ...r.getInputProps(t)
+    }
+  );
+};
+export {
+  j as PhoneField
+};

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

@@ -1 +1,2 @@
 export declare const ProgressLine: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ProgressLine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressLine.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/ProgressLine.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,sDAsBxB,CAAC"}

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

@@ -0,0 +1,30 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Progress as n } from "@mantine/core";
+import { useActiveStep as i } from "../../hooks/useActiveStep.js";
+import { useFormViewerStore as p } from "../../store/formStore.js";
+import { stepsReselect as c } from "../../store/selectors.js";
+function u(e, t) {
+  return e / t * 100;
+}
+const S = () => {
+  const e = i(), { useStore: t } = p(), r = t(c);
+  return e?.isEnd ? null : /* @__PURE__ */ s(
+    n,
+    {
+      radius: 0,
+      value: u(
+        r.currentSteps.findIndex((o) => o.id === e?.id) + 1,
+        r.currentSteps.length
+      ),
+      pos: "absolute",
+      top: 0,
+      w: "100%",
+      style: {
+        zIndex: 100
+      }
+    }
+  );
+};
+export {
+  S as ProgressLine
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatingField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/RatingField.tsx"],"names":[],"mappings":"AAKA,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,4CA6BA,CAAC"}

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

@@ -0,0 +1,33 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { Box as l, Rating as d, InputError as u } from "@mantine/core";
+import { clamp as a } from "lodash-es";
+import { useSteps as f } from "../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as x } from "../../store/formStore.js";
+const S = ({
+  control: i,
+  theme: t
+}) => {
+  const { form: o } = f(), { id: r, count: s } = i, { useStore: n } = x(), m = n((p) => p.editing);
+  return /* @__PURE__ */ c(l, { flex: 1, w: "100%", pb: 12, "data-control-id": r, children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        styles: {
+          root: {
+            width: "100%",
+            justifyContent: "space-between"
+          }
+        },
+        color: t?.primaryColor,
+        size: "xl",
+        count: a(s || 5, 1, 10),
+        readOnly: m,
+        ...o.getInputProps(r)
+      }
+    ),
+    o.errors[r] && /* @__PURE__ */ e(u, { size: t?.size, mt: 4, children: o.errors[r] })
+  ] });
+};
+export {
+  S as RatingField
+};

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

@@ -12,10 +12,11 @@ type PictureSelectableCardProps = {
     onUpdate?: (v: Partial<PictureChoiceControlItem>) => void;
     theme?: ThemeData;
 };
-export declare const PictureSelectableCard: import('react').MemoExoticComponent<({ label, active, disabled, hasInput, image, onClick, inputType, onUpdate, onRemove, theme, }: PictureSelectableCardProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const PictureSelectableCard: import("react").MemoExoticComponent<({ label, active, disabled, hasInput, image, onClick, inputType, onUpdate, onRemove, theme, }: PictureSelectableCardProps) => import("react/jsx-runtime").JSX.Element>;
 export declare const UploadOptionImageButton: ({ children, onUpdate, onRemove, hasImage, }: PropsWithChildren<{
     onUpdate?: (v: Partial<PictureChoiceControlItem>) => void;
     onRemove?: () => 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

@@ -0,0 +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;AAiBzD,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQ1E,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;CACnB,CAAC;AAEF,eAAO,MAAM,qBAAqB,qIAY7B,0BAA0B,6CAqI9B,CAAC;AAeF,eAAO,MAAM,uBAAuB,GAAI,6CAKrC,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;CACpB,CAAC,4CAgBD,CAAC"}

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

@@ -0,0 +1,154 @@
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { memo as y, useMemo as N } from "react";
+import { useMantineTheme as _, parseThemeColor as L, Radio as x, alpha as I, Checkbox as z, Flex as D, ActionIcon as P } from "@mantine/core";
+import { IconTrash as A, IconPhoto as B } from "@tabler/icons-react";
+import { combineClasses as p, STATIC_CLASSES as a } from "../../../helpers/staticClasses.js";
+import { useFormViewerStore as H } from "../../../store/formStore.js";
+import { EditableContent as M } from "../EditableContent/EditableContent.js";
+import m from "./SelectableCard.module.css.js";
+import { FilePicker as X } from "../../../../FilePicker/FilePicker.js";
+const w = "a2SNktIFgNCvXITBZgpup1T8mtSdJIM6TIZlndbRuRg", F = "TBp2lqNzl0orFQtaXgwymH4UDM0kbAVe", $ = y(
+  ({
+    label: s,
+    active: r,
+    disabled: i,
+    hasInput: C,
+    image: c,
+    onClick: g,
+    inputType: d,
+    onUpdate: n,
+    onRemove: u,
+    theme: e
+  }) => {
+    const { useStore: O } = H(), S = O((t) => t.editing), b = _(), l = L({
+      color: e?.primaryColor || "",
+      theme: b
+    }), f = N(() => d === "radio" ? /* @__PURE__ */ o(
+      x,
+      {
+        style: {
+          "--color": l.value,
+          "--color-shadow": I(l.value, 0.5)
+        },
+        classNames: {
+          radio: p(
+            m.radio,
+            a.RADIO,
+            r ? a.RADIO_SELECTED : ""
+          )
+        },
+        disabled: i,
+        size: e?.size,
+        color: e?.primaryColor,
+        checked: r,
+        readOnly: !0,
+        radius: "xl"
+      }
+    ) : /* @__PURE__ */ o(
+      z,
+      {
+        styles: {
+          input: {
+            "--color": l.value,
+            "--color-shadow": I(l.value, 0.5)
+          }
+        },
+        classNames: {
+          input: p(
+            m.checkbox,
+            a.CHECKBOX,
+            r ? a.CHECKBOX_SELECTED : ""
+          )
+        },
+        disabled: i,
+        size: e?.size,
+        color: e?.primaryColor,
+        checked: r,
+        readOnly: !0
+      }
+    ), [
+      r,
+      l.value,
+      i,
+      d,
+      e?.primaryColor,
+      e?.size
+    ]), k = {
+      "--text-color": l.value,
+      "--border-color": l.value,
+      "--bg-color": I(l.value, 0.05)
+    }, h = n || u, v = p(
+      m.card,
+      d === "radio" ? a.MULTIPLE_CHOICE_OPTION : a.CHECKBOX,
+      r ? d === "radio" ? a.MULTIPLE_CHOICE_OPTION_SELECTED : a.CHECKBOX_SELECTED : ""
+    );
+    return /* @__PURE__ */ E(
+      "div",
+      {
+        style: k,
+        className: v,
+        "data-active": r,
+        "data-disabled": i,
+        onClick: h ? void 0 : g,
+        "data-radius": e?.borderRadius,
+        children: [
+          S ? /* @__PURE__ */ o(
+            K,
+            {
+              hasImage: !!c,
+              onUpdate: (t) => n?.({ image: t.image }),
+              onRemove: () => n?.({ image: void 0 }),
+              children: /* @__PURE__ */ o(T, { image: c })
+            }
+          ) : /* @__PURE__ */ o(T, { image: c }),
+          /* @__PURE__ */ E("div", { className: m.controls, children: [
+            C && f,
+            h ? /* @__PURE__ */ E(D, { miw: 0, flex: 1, children: [
+              n && /* @__PURE__ */ o(
+                M,
+                {
+                  value: s,
+                  placeholder: "Option",
+                  onChange: (t) => {
+                    n?.({ label: t });
+                  }
+                }
+              ),
+              u && /* @__PURE__ */ o(P, { color: "red", variant: "subtle", onClick: u, children: /* @__PURE__ */ o(A, { size: "1em" }) })
+            ] }) : s
+          ] })
+        ]
+      }
+    );
+  }
+), T = ({ image: s }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: m.image,
+    style: {
+      backgroundImage: `url(${s})`
+    },
+    children: !s && /* @__PURE__ */ o(B, { size: 32, color: "var(--primary-color)" })
+  }
+), K = ({
+  children: s,
+  onUpdate: r,
+  onRemove: i,
+  hasImage: C
+}) => /* @__PURE__ */ o(
+  X,
+  {
+    hasImage: C,
+    onChange: (c) => r?.({
+      image: c
+    }),
+    unsplashClientId: w,
+    giphyToken: F,
+    onRemove: i,
+    children: s
+  }
+);
+export {
+  $ as PictureSelectableCard,
+  K as UploadOptionImageButton
+};

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

@@ -10,5 +10,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, hasInput, 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

@@ -0,0 +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"}

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

@@ -0,0 +1,110 @@
+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(
+  ({
+    label: d,
+    active: l,
+    disabled: s,
+    hasInput: O,
+    onClick: h,
+    inputType: c,
+    onUpdate: C,
+    onRemove: n,
+    theme: o
+  }) => {
+    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,
+      {
+        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 : ""
+          )
+        },
+        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(
+      "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
+        ] })
+      }
+    );
+  }
+);
+export {
+  D as SelectableCard
+};

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

@@ -0,0 +1,15 @@
+const o = "_card_aspur_1", c = "_image_aspur_48", s = "_controls_aspur_60", a = "_radio_aspur_82", r = "_checkbox_aspur_87", _ = {
+  card: o,
+  image: c,
+  controls: s,
+  radio: a,
+  checkbox: r
+};
+export {
+  o as card,
+  r as checkbox,
+  s as controls,
+  _ as default,
+  c as image,
+  a as radio
+};

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

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

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

@@ -0,0 +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,4CA8BA,CAAC"}

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

@@ -0,0 +1,31 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { Box as u, Slider as c, InputError as d } from "@mantine/core";
+import { isNumber as m } from "lodash-es";
+import { useSteps as f } from "../../hooks/useCreateFormContext.js";
+const j = ({
+  control: l,
+  theme: i
+}) => {
+  const { form: s } = f(), { id: e, min: r, max: o } = l, n = a(() => !m(r) || !m(o) || isNaN(r) || isNaN(o) ? [] : [
+    { value: r, label: r },
+    { value: o, label: o }
+  ], [r, o]);
+  return /* @__PURE__ */ p(u, { flex: 1, w: "100%", pb: 12, "data-control-id": e, children: [
+    /* @__PURE__ */ t(
+      c,
+      {
+        color: i?.primaryColor,
+        size: i?.size,
+        min: r,
+        max: o,
+        marks: n,
+        ...s.getInputProps(e)
+      }
+    ),
+    s.errors[e] && /* @__PURE__ */ t(d, { size: i?.size, mt: 4, children: s.errors[e] })
+  ] });
+};
+export {
+  j as SliderField
+};

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

@@ -3,3 +3,4 @@ export declare const StartButton: ({ control, stepId, }: {
     control: StartControl;
     stepId: string;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StartButton.d.ts.map

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

@@ -0,0 +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"}