@layers-app/shared 0.4.9 → 0.4.10

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

@@ -1,28 +1,31 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useTranslation as p } from "react-i18next";
-import { Button as u } from "@mantine/core";
+import { useTranslation as u } from "react-i18next";
 import { ProjectIcon as c } from "../../../ProjectIcon/ProjectIcon.js";
 import { STATIC_CLASSES as f } from "../../helpers/staticClasses.js";
 import { useSteps as l } from "../../hooks/useCreateFormContext.js";
 import { useFormViewerStore as S } from "../../store/formStore.js";
-import { EditableContent as d } from "./EditableContent/EditableContent.js";
-const x = ({
+import { FormButton as d } from "../ui/FormButton.js";
+import { EditableContent as b } from "./EditableContent/EditableContent.js";
+const N = ({
   control: t,
-  stepId: i
+  stepId: i,
+  fullWidth: a
 }) => {
-  const { t: e } = p("forms"), { handleNext: m } = l(), { useStore: a, api: s } = S(), n = a((o) => o.editing);
+  const { t: e } = u("forms"), { handleNext: m } = l(), { useStore: s, api: p } = S(), n = s((o) => o.editing);
   return /* @__PURE__ */ r(
-    u,
+    d,
     {
+      variant: "start",
+      fullWidth: a,
       className: f.SUBMIT_BUTTON,
       leftSection: t.buttonIcon && t.showIconButton ? /* @__PURE__ */ r(c, { variant: "transparent", icon: t.buttonIcon }) : void 0,
       onClick: n ? void 0 : m,
       children: n ? /* @__PURE__ */ r(
-        d,
+        b,
         {
           value: t.label?.trim() || e("start"),
           onChange: (o) => {
-            s.updateControl(i, t.id, { label: o });
+            p.updateControl(i, t.id, { label: o });
           }
         }
       ) : t.label?.trim() || e("start")
@@ -30,5 +33,5 @@ const x = ({
   );
 };
 export {
-  x as StartButton
+  N as StartButton
 };

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

@@ -1,4 +1,10 @@
 import { StartControl, StepData, ThemeData } from '../../types/form';
+/**
+ * Ряд кнопки «Начать» стартового слайда. Кнопка «Начать» — одиночный CTA:
+ * по умолчанию по контенту (не на всю ширину), выравнивание берётся из
+ * настройки кнопок темы (`buttonAlign`); «между краями» сводится к левому краю.
+ * Тема может растянуть её на всю ширину флагом `startButtonFullWidth`.
+ */
 export declare const StartField: ({ control, step, theme, }: {
     control: StartControl;
     step: StepData;

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

@@ -1 +1 @@
-{"version":3,"file":"StartField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/StartField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGrE,eAAO,MAAM,UAAU,GAAI,2BAIxB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,mDAaA,CAAC"}
+{"version":3,"file":"StartField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/StartField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG5E;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,2BAIxB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,mDAsBA,CAAC"}

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

@@ -1,21 +1,22 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Flex as a } from "@mantine/core";
-import { alignRelation as n } from "../../helpers/themeUtils.js";
-import { StartButton as e } from "./StartButton.js";
-const f = ({
-  control: r,
-  step: t,
-  theme: o
-}) => t.isStart ? /* @__PURE__ */ i(
-  a,
-  {
-    justify: n[o?.align || "center"],
-    gap: 8,
-    wrap: "wrap",
-    "data-control-id": r.id,
-    children: /* @__PURE__ */ i(e, { control: r, stepId: t.id })
-  }
-) : null;
+import { jsx as o } from "react/jsx-runtime";
+import { alignRelation as s } from "../../helpers/themeUtils.js";
+import { StartButton as d } from "./StartButton.js";
+const c = ({
+  control: t,
+  step: i,
+  theme: r
+}) => {
+  if (!i.isStart) return null;
+  const a = !!r?.startButtonFullWidth, n = r?.buttonAlign ?? "start", l = {
+    display: "flex",
+    width: "100%",
+    // При full-width кнопка сама тянется на 100% (data-full) — justify не важен.
+    justifyContent: n === "between" ? "flex-start" : s[n],
+    gap: "var(--form-button-gap)",
+    flexWrap: "wrap"
+  };
+  return /* @__PURE__ */ o("div", { style: l, "data-control-id": t.id, children: /* @__PURE__ */ o(d, { control: t, stepId: i.id, fullWidth: a }) });
+};
 export {
-  f as StartField
+  c as StartField
 };

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

@@ -1,5 +1,6 @@
-import { TextControl } from '../../types/form';
-export declare const TextField: ({ control }: {
+import { TextControl, ThemeData } from '../../types/form';
+export declare const TextField: ({ control, theme, }: {
     control: TextControl;
+    theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/TextField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,eAAO,MAAM,SAAS,GAAI,aAAa;IAAE,OAAO,EAAE,WAAW,CAAA;CAAE,4CA+B9D,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/TextField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG1D,eAAO,MAAM,SAAS,GAAI,qBAGvB;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA6BA,CAAC"}

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

@@ -1,31 +1,34 @@
-import { jsx as r } from "react/jsx-runtime";
-import { TextInput as d } from "@mantine/core";
-import { ProjectIcon as f } from "../../../ProjectIcon/ProjectIcon.js";
-import { controlsDataMap as l } from "../../helpers/controls.js";
-import { STATIC_CLASSES as u } from "../../helpers/staticClasses.js";
-import { DEFAULT_MAX as T, DEFAULT_MIN as L } from "../../helpers/steps.js";
-import { useSteps as S } from "../../hooks/useCreateFormContext.js";
-import { useInterpolateText as g } from "../../hooks/useInterpolateText.js";
-import { useFormViewerStore as h } from "../../store/formStore.js";
-const M = ({ control: t }) => {
-  const { form: n } = S(), { useStore: i } = h(), o = i((s) => s.editing), { id: e, minLength: m, maxLength: a, placeholder: p } = t, c = g(p, o);
-  return /* @__PURE__ */ r(
-    d,
+import { jsx as c } from "react/jsx-runtime";
+import { STATIC_CLASSES as d } from "../../helpers/staticClasses.js";
+import { DEFAULT_MAX as f, DEFAULT_MIN as g } from "../../helpers/steps.js";
+import { useSteps as h } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as T } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as L } from "../../store/formStore.js";
+import { FieldInput as F } from "./FieldInput.js";
+const P = ({
+  control: t,
+  theme: n
+}) => {
+  const { form: m } = h(), { useStore: s } = L(), e = s((a) => a.editing), { id: r, minLength: i, maxLength: p, placeholder: l } = t, u = T(l, e), o = m.getInputProps(r);
+  return /* @__PURE__ */ c(
+    F,
     {
-      "data-control-id": e,
-      w: "100%",
-      variant: "default",
-      className: u.BLOCK_INPUT_TEXT,
-      leftSection: t.icon ? /* @__PURE__ */ r(f, { icon: t.icon }) : l[t.controlType].icon,
-      minLength: m || L,
-      maxLength: a || T,
-      "data-autofocus": !0,
-      readOnly: o,
-      placeholder: c,
-      ...n.getInputProps(e)
+      controlId: r,
+      theme: n,
+      className: d.BLOCK_INPUT_TEXT,
+      dataAutofocus: !0,
+      readOnly: e,
+      placeholder: u,
+      minLength: i || g,
+      maxLength: p || f,
+      value: o.value ?? "",
+      error: o.error,
+      onChange: o.onChange,
+      onFocus: o.onFocus,
+      onBlur: o.onBlur
     }
   );
 };
 export {
-  M as TextField
+  P as TextField
 };

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

@@ -1 +1 @@
-{"version":3,"file":"UploadField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/UploadField/UploadField.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA2B,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAW1E,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAK/D,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,qBAGzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAsNA,CAAC"}
+{"version":3,"file":"UploadField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/UploadField/UploadField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1E,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAO/D,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAKF,eAAO,MAAM,WAAW,GAAI,qBAGzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA4NA,CAAC"}

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

@@ -1,36 +1,34 @@
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { useCallback as S, useMemo as B } from "react";
-import { useTranslation as V } from "react-i18next";
-import { useMantineTheme as W, parseThemeColor as A, alpha as _, Stack as M, Group as $, Box as G, Text as L, InputError as X } from "@mantine/core";
-import { Dropzone as h } from "@mantine/dropzone";
-import { getMaxUploadSize as q } from "../../../../../config/envConfig.js";
-import { showNotification as f } from "@mantine/notifications";
-import { IconUpload as H, IconX as J, IconCloudUpload as K } from "@tabler/icons-react";
-import { formatBytes as C } from "../../../../../helpers/formatBytes.js";
-import { useEvent as P } from "../../../../../hooks/useEvent.js";
-import { getRandomId as Q } from "../../../helpers/steps.js";
-import { useSteps as Y } from "../../../hooks/useCreateFormContext.js";
-import { useFormViewerStore as Z } from "../../../store/formStore.js";
-import { UploadFile as ee } from "./UploadFile/UploadFile.js";
-import oe from "../../../FormViewer.module.css.js";
-const te = () => q() ?? 25 * 1024 * 1024, Fe = ({
+import { useCallback as z, useMemo as R } from "react";
+import { useTranslation as k } from "react-i18next";
+import { Dropzone as f } from "@mantine/dropzone";
+import { showNotification as u } from "@mantine/notifications";
+import { IconUpload as N, IconX as V, IconCloudUpload as W } from "@tabler/icons-react";
+import { getMaxUploadSize as A } from "../../../../../config/envConfig.js";
+import { formatBytes as j } from "../../../../../helpers/formatBytes.js";
+import { useEvent as B } from "../../../../../hooks/useEvent.js";
+import { getRandomId as _ } from "../../../helpers/steps.js";
+import { useSteps as $ } from "../../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as X } from "../../../store/formStore.js";
+import { FormInputError as q } from "../../ui/FormInputError.js";
+import { FormText as M } from "../../ui/FormText.js";
+import { UploadFile as G } from "./UploadFile/UploadFile.js";
+import H from "../../../FormViewer.module.css.js";
+const J = () => A() ?? 25 * 1024 * 1024, de = ({
   control: s,
-  theme: d
+  theme: S
 }) => {
-  const { t: o } = V("forms"), { form: a } = Y(), { id: r } = s, T = a.values[r], I = a.errors[r], m = s.maxSize || te(), t = s.maxFiles ?? 1, g = s.minFiles ?? 0, U = !!s.multiple || t > 1, l = s.accept && s.accept.length ? s.accept : void 0, { useStore: y } = Z(), E = y((e) => e.editing), R = y((e) => e.preview), b = W(), O = A({
-    color: d?.primaryColor || "",
-    theme: b
-  }), j = y((e) => e.uploadFileFn), F = P((e) => {
+  const { t: o } = k("forms"), { form: a } = $(), { id: r } = s, I = a.values[r], O = a.errors[r], d = s.maxSize || J(), t = s.maxFiles ?? 1, h = s.minFiles ?? 0, L = !!s.multiple || t > 1, l = s.accept && s.accept.length ? s.accept : void 0, { useStore: y } = X(), U = y((e) => e.editing), C = y((e) => e.preview), T = y((e) => e.uploadFileFn), g = B((e) => {
     const c = a.values[r]?.findIndex(
-      (u) => u.id === e.id
+      (m) => m.id === e.id
     );
     c !== -1 && a.setFieldValue(`${r}.${c}`, e);
-  }), k = S(
+  }), D = z(
     (e) => {
       if (e.some(
         (p) => p.errors.some((n) => n.code === "file-invalid-type")
       )) {
-        f({
+        u({
           color: "blue",
           message: l ? o("uploadOption.typeNotSupportedWithList", {
             types: l.join(", ")
@@ -41,9 +39,9 @@ const te = () => q() ?? 25 * 1024 * 1024, Fe = ({
       if (e.some(
         (p) => p.errors.some((n) => n.code === "file-too-large")
       )) {
-        f({
+        u({
           message: o("uploadOption.fileTooLarge", {
-            size: C(m)
+            size: j(d)
           })
         });
         return;
@@ -51,17 +49,17 @@ const te = () => q() ?? 25 * 1024 * 1024, Fe = ({
       if (e.some(
         (p) => p.errors.some((n) => n.code === "too-many-files")
       )) {
-        f({
+        u({
           message: o("uploadOption.tooManyFiles", { count: t })
         });
         return;
       }
     },
-    [l, m, t, o]
-  ), x = S(
+    [l, d, t, o]
+  ), x = z(
     (e) => {
-      j?.(e).then((c) => {
-        F({
+      T?.(e).then((c) => {
+        g({
           ...e,
           url: c,
           isError: !1,
@@ -69,7 +67,7 @@ const te = () => q() ?? 25 * 1024 * 1024, Fe = ({
           isSuccess: !0
         });
       }).catch(() => {
-        F({
+        g({
           ...e,
           isError: !0,
           isLoading: !1,
@@ -77,80 +75,99 @@ const te = () => q() ?? 25 * 1024 * 1024, Fe = ({
         });
       });
     },
-    [F, j]
-  ), w = S(
+    [g, T]
+  ), E = z(
     (e) => {
-      const c = a.values[r]?.length || 0, u = typeof t == "number" ? Math.max(0, t - c) : 1 / 0;
-      if (u === 0) {
-        f({
+      const c = a.values[r]?.length || 0, m = typeof t == "number" ? Math.max(0, t - c) : 1 / 0;
+      if (m === 0) {
+        u({
           message: o("uploadOption.tooManyFiles", { count: t })
         });
         return;
       }
-      const z = e.slice(0, u);
-      z.forEach((p) => {
+      const F = e.slice(0, m);
+      F.forEach((p) => {
         const n = {
-          id: Q(),
+          id: _(),
           file: p,
           isError: !1,
           isLoading: !0,
           isSuccess: !1
         };
         a.insertListItem(r, n), x(n);
-      }), z.length < e.length && f({
+      }), F.length < e.length && u({
         message: o("uploadOption.tooManyFiles", { count: t })
       });
     },
     [a, x, r, t, o]
-  ), D = B(() => [
-    o("uploadOption.maxSize", { size: C(m) }),
-    g ? o("uploadOption.minFilesWithCount", { count: g }) : "",
+  ), b = R(() => [
+    o("uploadOption.maxSize", { size: j(d) }),
+    h ? o("uploadOption.minFilesWithCount", { count: h }) : "",
     t ? o("uploadOption.maxFilesWithCount", { count: t }) : "",
     l ? o("uploadOption.accept", { types: l.join(", ") }) : ""
-  ].filter(Boolean).join(" · "), [g, t, l, o, m]), N = {
-    "--primary-color": O.value,
-    "--primary-color-hover": _(O.value, 0.05)
+  ].filter(Boolean).join(" · "), [h, t, l, o, d]), w = {
+    "--primary-color": "var(--form-accent)",
+    "--primary-color-hover": "color-mix(in srgb, var(--primary-color) 5%, transparent)"
   };
-  return /* @__PURE__ */ v(M, { gap: 8, "data-control-id": r, w: "100%", children: [
-    (T?.length ?? 0) < t && /* @__PURE__ */ i(
-      h,
-      {
-        radius: d?.borderRadius,
-        __size: d?.size,
-        disabled: E || R,
-        onDrop: w,
-        onReject: k,
-        maxFiles: t,
-        maxSize: m,
-        accept: l,
-        multiple: U,
-        unstyled: !0,
-        className: oe.dropzone,
-        style: N,
-        children: /* @__PURE__ */ i($, { justify: "center", py: 24, children: /* @__PURE__ */ v(M, { justify: "center", align: "center", gap: 8, children: [
-          /* @__PURE__ */ v(G, { c: "var(--primary-color)", children: [
-            /* @__PURE__ */ i(h.Accept, { children: /* @__PURE__ */ i(H, { size: 70, stroke: 1.2 }) }),
-            /* @__PURE__ */ i(h.Reject, { children: /* @__PURE__ */ i(J, { size: 70, stroke: 1.2 }) }),
-            /* @__PURE__ */ i(h.Idle, { children: /* @__PURE__ */ i(K, { size: 70, stroke: 1.2 }) })
-          ] }),
-          /* @__PURE__ */ i(L, { size: "xl", inline: !0, ta: "center", c: d?.title?.color, children: o("uploadOption.title") }),
-          /* @__PURE__ */ i(L, { size: "sm", c: d?.description?.color, mt: 4, children: D })
-        ] }) })
-      }
-    ),
-    T?.map((e) => /* @__PURE__ */ i(
-      ee,
-      {
-        file: e,
-        id: r,
-        onReload: x,
-        theme: d
-      },
-      e.id
-    )),
-    I && /* @__PURE__ */ i(X, { children: I })
-  ] });
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      "data-control-id": r,
+      style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" },
+      children: [
+        (I?.length ?? 0) < t && /* @__PURE__ */ i(
+          f,
+          {
+            __size: S?.size,
+            disabled: U || C,
+            onDrop: E,
+            onReject: D,
+            maxFiles: t,
+            maxSize: d,
+            accept: l,
+            multiple: L,
+            unstyled: !0,
+            className: H.dropzone,
+            style: w,
+            children: /* @__PURE__ */ v(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  gap: 8,
+                  padding: "24px 0"
+                },
+                children: [
+                  /* @__PURE__ */ v("div", { style: { color: "var(--primary-color)" }, children: [
+                    /* @__PURE__ */ i(f.Accept, { children: /* @__PURE__ */ i(N, { size: 70, stroke: 1.2 }) }),
+                    /* @__PURE__ */ i(f.Reject, { children: /* @__PURE__ */ i(V, { size: 70, stroke: 1.2 }) }),
+                    /* @__PURE__ */ i(f.Idle, { children: /* @__PURE__ */ i(W, { size: 70, stroke: 1.2 }) })
+                  ] }),
+                  /* @__PURE__ */ i(M, { size: "xl", inline: !0, ta: "center", c: "var(--form-color-text)", children: o("uploadOption.title") }),
+                  /* @__PURE__ */ i(M, { size: "sm", ta: "center", c: "var(--form-color-text)", mt: 4, children: b })
+                ]
+              }
+            )
+          }
+        ),
+        I?.map((e) => /* @__PURE__ */ i(
+          G,
+          {
+            file: e,
+            id: r,
+            onReload: x,
+            theme: S
+          },
+          e.id
+        )),
+        O && /* @__PURE__ */ i(q, { children: O })
+      ]
+    }
+  );
 };
 export {
-  Fe as UploadField
+  de as UploadField
 };

package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhD,eAAO,MAAM,UAAU,GAAI,gCAKxB;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAqEA,CAAC"}
+{"version":3,"file":"UploadFile.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhD,eAAO,MAAM,UAAU,GAAI,gCAKxB;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAgEA,CAAC"}

package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.js

@@ -1,62 +1,62 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useTranslation as g } from "react-i18next";
-import { Card as v, ThemeIcon as a, Box as w, Text as d, Loader as y, Tooltip as m, ActionIcon as u, Divider as T } from "@mantine/core";
-import { IMAGE_MIME_TYPE as b } from "@mantine/dropzone";
-import { IconFileText as C, IconCheck as k, IconReload as A, IconTrash as E } from "@tabler/icons-react";
-import { formatBytes as B } from "../../../../../../helpers/formatBytes.js";
-import { useSteps as L } from "../../../../hooks/useCreateFormContext.js";
-import M from "./UploadFile.module.css.js";
-const N = ({
-  file: r,
+import { useTranslation as I } from "react-i18next";
+import { IMAGE_MIME_TYPE as z } from "@mantine/dropzone";
+import { IconFileText as x, IconCheck as N, IconReload as y, IconTrash as b } from "@tabler/icons-react";
+import { formatBytes as g } from "../../../../../../helpers/formatBytes.js";
+import { useSteps as k } from "../../../../hooks/useCreateFormContext.js";
+import { FormLoader as T } from "../../../ui/FormLoader.js";
+import { FormText as l } from "../../../ui/FormText.js";
+import i from "./UploadFile.module.css.js";
+const V = ({
+  file: t,
   id: o,
-  onReload: h,
-  theme: i
+  onReload: m,
+  theme: d
 }) => {
-  const { t } = g("forms"), { form: l } = L(), { isError: p, isLoading: f, isSuccess: n, url: s } = r, x = l.values[o].findIndex((z) => z.id === r.id), I = () => {
-    l.removeListItem(o, x);
+  const { t: s } = I("forms"), { form: r } = k(), { isError: u, isLoading: f, isSuccess: n, url: a } = t, p = r.values[o].findIndex((h) => h.id === t.id), v = () => {
+    r.removeListItem(o, p);
   };
-  return /* @__PURE__ */ c(
-    v,
-    {
-      withBorder: !0,
-      style: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 12
-      },
-      children: [
-        n && s && b.includes(r.file.type) ? /* @__PURE__ */ e(
-          "div",
-          {
-            className: M.image,
-            style: {
-              backgroundImage: `url(${window.location.origin}/v1/attachments/${s.id})`
-            },
-            "data-radius": i?.borderRadius
-          }
-        ) : /* @__PURE__ */ e(a, { size: 40, variant: "light", children: /* @__PURE__ */ e(C, { size: "50%" }) }),
-        /* @__PURE__ */ c(w, { miw: 0, flex: 1, children: [
-          /* @__PURE__ */ e(d, { truncate: !0, size: i?.size, children: r.file.name }),
-          /* @__PURE__ */ e(d, { c: "dimmed", size: "xs", children: B(r.file.size) })
-        ] }),
-        f && /* @__PURE__ */ e(y, { color: i?.primaryColor, size: 28 }),
-        n && /* @__PURE__ */ e(a, { color: "green", radius: "xl", children: /* @__PURE__ */ e(k, { size: 16 }) }),
-        p && /* @__PURE__ */ e(m, { label: t("retry"), withArrow: !0, children: /* @__PURE__ */ e(
-          u,
-          {
-            color: "red",
-            radius: "xl",
-            onClick: () => h?.(r),
-            children: /* @__PURE__ */ e(A, { size: 16 })
-          }
-        ) }),
-        /* @__PURE__ */ e(T, { orientation: "vertical" }),
-        /* @__PURE__ */ e(m, { label: t("delete"), withArrow: !0, children: /* @__PURE__ */ e(u, { color: "red", variant: "subtle", onClick: I, children: /* @__PURE__ */ e(E, { size: 18 }) }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ c("div", { className: i.card, children: [
+    n && a && z.includes(t.file.type) ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: i.image,
+        style: {
+          backgroundImage: `url(${window.location.origin}/v1/attachments/${a.id})`
+        }
+      }
+    ) : /* @__PURE__ */ e("div", { className: i.fileIcon, children: /* @__PURE__ */ e(x, { size: "50%" }) }),
+    /* @__PURE__ */ c("div", { className: i.info, children: [
+      /* @__PURE__ */ e(l, { truncate: !0, size: d?.size || "md", children: t.file.name }),
+      /* @__PURE__ */ e(l, { c: "var(--form-color-muted)", size: "xs", children: g(t.file.size) })
+    ] }),
+    f && /* @__PURE__ */ e(T, { size: 28 }),
+    n && /* @__PURE__ */ e("div", { className: i.statusOk, children: /* @__PURE__ */ e(N, { size: 16 }) }),
+    u && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: i.iconBtn,
+        "data-variant": "filled",
+        title: s("retry"),
+        onClick: () => m?.(t),
+        children: /* @__PURE__ */ e(y, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: i.vDivider }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: i.iconBtn,
+        "data-variant": "subtle",
+        title: s("delete"),
+        onClick: v,
+        children: /* @__PURE__ */ e(b, { size: 18 })
+      }
+    )
+  ] });
 };
 export {
-  N as UploadFile
+  V as UploadFile
 };

package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.module.css.js

@@ -1,7 +1,19 @@
-const e = "_image_jcfli_1", a = {
-  image: e
+const t = "_card_tuowp_1", o = "_image_tuowp_23", _ = "_fileIcon_tuowp_47", n = "_info_tuowp_71", i = "_statusOk_tuowp_83", c = "_iconBtn_tuowp_109", s = "_vDivider_tuowp_167", e = {
+  card: t,
+  image: o,
+  fileIcon: _,
+  info: n,
+  statusOk: i,
+  iconBtn: c,
+  vDivider: s
 };
 export {
-  a as default,
-  e as image
+  t as card,
+  e as default,
+  _ as fileIcon,
+  c as iconBtn,
+  o as image,
+  n as info,
+  i as statusOk,
+  s as vDivider
 };

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

@@ -1,5 +1,6 @@
-import { YesNoControl } from '../../types/form';
-export declare const YesNoField: ({ control }: {
+import { ThemeData, YesNoControl } from '../../types/form';
+export declare const YesNoField: ({ control, theme, }: {
     control: YesNoControl;
+    theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=YesNoField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"YesNoField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/YesNoField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,eAAO,MAAM,UAAU,GAAI,aAAa;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4CAgChE,CAAC"}
+{"version":3,"file":"YesNoField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/YesNoField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAK3D,eAAO,MAAM,UAAU,GAAI,qBAGxB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA6CA,CAAC"}