@layers-app/shared 0.2.4 → 0.2.6

package/dist/components/FilePicker/FilePicker.module.css.js

@@ -1,13 +1,15 @@
-const t = "_itemImage_3fqzc_1", o = "_originalTab_3fqzc_14", a = "_customTab_3fqzc_20", c = "_button_3fqzc_28", _ = {
+const t = "_itemImage_1me1c_1", o = "_imageAuthor_1me1c_14", a = "_originalTab_1me1c_22", e = "_customTab_1me1c_28", m = "_button_1me1c_36", _ = {
   itemImage: t,
-  originalTab: o,
-  customTab: a,
-  button: c
+  imageAuthor: o,
+  originalTab: a,
+  customTab: e,
+  button: m
 };
 export {
-  c as button,
-  a as customTab,
+  m as button,
+  e as customTab,
   _ as default,
+  o as imageAuthor,
   t as itemImage,
-  o as originalTab
+  a as originalTab
 };

package/dist/components/FilePicker/FilePickerGoogleDrive.d.ts

@@ -0,0 +1,22 @@
+interface GoogleDriveFile {
+    id: string;
+    name: string;
+    mimeType: string;
+    thumbnailLink?: string;
+    iconLink?: string;
+}
+interface FilePickerGoogleDriveProps {
+    isConnected: boolean;
+    connectedEmail?: string;
+    files: GoogleDriveFile[];
+    isLoading: boolean;
+    hasMore: boolean;
+    isImporting: boolean;
+    onSearch: (query: string) => void;
+    onLoadMore: () => void;
+    onSelect: (file: GoogleDriveFile) => void;
+    error: string | null;
+}
+export declare const FilePickerGoogleDrive: ({ isConnected, files, isLoading, hasMore, isImporting, onSearch, onLoadMore, onSelect, error, }: FilePickerGoogleDriveProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilePickerGoogleDrive.d.ts.map

package/dist/components/FilePicker/FilePickerGoogleDrive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePickerGoogleDrive.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerGoogleDrive.tsx"],"names":[],"mappings":"AA6BA,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,0BAA0B;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,GAAI,iGAUnC,0BAA0B,4CAmH5B,CAAC"}

package/dist/components/FilePicker/FilePickerGoogleDrive.js

@@ -0,0 +1,86 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useState as C, useRef as D, useEffect as y, useCallback as I } from "react";
+import { useTranslation as T } from "react-i18next";
+import { Search01Icon as G } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as R } from "@hugeicons/react";
+import { Center as h, Stack as a, Loader as g, Text as l, TextInput as V, Box as p, SimpleGrid as F, AspectRatio as L, Button as P } from "@mantine/core";
+import { useDebouncedValue as j } from "@mantine/hooks";
+import { NoData as w } from "../NoData/NoData.js";
+import { FilePickerSkeletonLoader as B } from "./FilePickerSkeletonLoader.js";
+import N from "./FilePicker.module.css.js";
+const O = ({
+  isConnected: f,
+  files: o,
+  isLoading: n,
+  hasMore: v,
+  isImporting: x,
+  onSearch: c,
+  onLoadMore: k,
+  onSelect: b,
+  error: s
+}) => {
+  const { t } = T("ui"), [m, S] = C(""), [u] = j(m, 800), d = D(c);
+  d.current = c, y(() => {
+    d.current(u);
+  }, [u]);
+  const z = I(
+    (r) => {
+      S(r.currentTarget.value);
+    },
+    []
+  );
+  return x ? /* @__PURE__ */ e(h, { h: 200, children: /* @__PURE__ */ i(a, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ e(g, { size: "sm" }),
+    /* @__PURE__ */ e(l, { size: "sm", c: "dimmed", children: t("externalDrive.importing", {
+      defaultValue: "Importing file..."
+    }) })
+  ] }) }) : f ? /* @__PURE__ */ i(a, { gap: "sm", children: [
+    s && /* @__PURE__ */ e(l, { size: "xs", c: "red", children: s }),
+    /* @__PURE__ */ e(
+      V,
+      {
+        leftSection: n ? /* @__PURE__ */ e(g, { size: 16 }) : /* @__PURE__ */ e(R, { size: 16, icon: G }),
+        maxLength: 50,
+        placeholder: t("externalDrive.searchFiles", {
+          defaultValue: "Search Google Drive"
+        }),
+        "data-autofocus": !0,
+        value: m,
+        onChange: z
+      }
+    ),
+    /* @__PURE__ */ i(p, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
+      !!o.length && /* @__PURE__ */ i(a, { gap: 8, children: [
+        /* @__PURE__ */ e(F, { cols: 4, spacing: 10, children: o.map((r) => /* @__PURE__ */ e(
+          L,
+          {
+            onClick: () => b(r),
+            ratio: 120 / 65,
+            className: N.itemImage,
+            style: {
+              backgroundImage: r.thumbnailLink ? `url(${r.thumbnailLink})` : void 0,
+              backgroundColor: r.thumbnailLink ? void 0 : "var(--mantine-color-gray-light)"
+            }
+          },
+          r.id
+        )) }),
+        v && /* @__PURE__ */ e(P, { variant: "subtle", loading: n, onClick: k, children: t("loadMore") })
+      ] }),
+      !o.length && !n && /* @__PURE__ */ e(p, { pb: 16, children: /* @__PURE__ */ e(
+        w,
+        {
+          size: 120,
+          illustration: "noImage",
+          description: t("changeCover.noResult"),
+          titleProps: { size: "xs", c: "dimmed" }
+        }
+      ) }),
+      !o.length && n && /* @__PURE__ */ e(B, {})
+    ] })
+  ] }) : /* @__PURE__ */ e(h, { h: 200, children: /* @__PURE__ */ e(a, { align: "center", gap: "sm", children: /* @__PURE__ */ e(l, { size: "sm", c: "dimmed", ta: "center", children: t("externalDrive.goToSettings", {
+    defaultValue: "Connect Google Drive in Settings to import files"
+  }) }) }) });
+};
+export {
+  O as FilePickerGoogleDrive
+};

package/dist/components/FilePicker/FilePickerUnsplash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePickerUnsplash.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUnsplash.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,kBAAkB,GAAI,yBAGhC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CAwGA,CAAC"}
+{"version":3,"file":"FilePickerUnsplash.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUnsplash.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,kBAAkB,GAAI,yBAGhC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CAwHA,CAAC"}

package/dist/components/FilePicker/FilePickerUnsplash.js

@@ -1,94 +1,111 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { useState as l, useMemo as x, useEffect as f, useCallback as S } from "react";
-import { useTranslation as P } from "react-i18next";
-import { Search01Icon as z } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as L } from "@hugeicons/react";
-import { Stack as b, TextInput as T, Loader as j, Box as C, SimpleGrid as D, AspectRatio as M, Button as q } from "@mantine/core";
-import { useDebouncedValue as w, useDebouncedCallback as B } from "@mantine/hooks";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useState as m, useMemo as z, useEffect as k, useCallback as T } from "react";
+import { useTranslation as L } from "react-i18next";
+import { Search01Icon as j } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as B } from "@hugeicons/react";
+import { Stack as C, TextInput as D, Loader as M, Box as c, SimpleGrid as N, AspectRatio as _, Text as b, Button as q } from "@mantine/core";
+import { useDebouncedValue as w, useDebouncedCallback as A } from "@mantine/hooks";
 import { NoData as F } from "../NoData/NoData.js";
-import { FilePickerSkeletonLoader as N } from "./FilePickerSkeletonLoader.js";
-import { useUnsplashPhotos as Q } from "./api/unsplashApi.js";
-import R from "./FilePicker.module.css.js";
-const k = (n) => (n || []).reduce((s, t) => (s[t.id] = t, s), {}), K = ({
-  onChange: n,
+import { FilePickerSkeletonLoader as Q } from "./FilePickerSkeletonLoader.js";
+import { useUnsplashPhotos as R } from "./api/unsplashApi.js";
+import y from "./FilePicker.module.css.js";
+const x = (l) => (l || []).reduce((s, o) => (s[o.id] = o, s), {}), X = ({
+  onChange: l,
   clientId: s
 }) => {
-  const { t } = P("ui"), [m, y] = l(""), [u] = w(m, 800), [I, p] = l(1), [d, h] = l({}), { data: r, isLoading: a } = Q(
+  const { t: o } = L("ui"), [u, v] = m(""), [h] = w(u, 800), [I, p] = m(1), [d, g] = m({}), { data: r, isLoading: n } = R(
     {
-      query: u,
+      query: h,
       page: I,
       per_page: 24,
       order_by: "popular"
     },
     s
-  ), i = x(
-    () => Object.values({ ...d, ...k(r?.items) }),
+  ), i = z(
+    () => Object.values({ ...d, ...x(r?.items) }),
     [d, r?.items]
-  ), g = B(() => {
+  ), f = A(() => {
     setTimeout(() => {
-      h((e) => ({ ...e, ...k(r?.items) }));
+      g((e) => ({ ...e, ...x(r?.items) }));
     }, 0);
   }, 100);
-  f(() => {
-    g();
-  }, [r?.items, g]), f(() => {
-    h({});
-  }, [u]);
-  const v = S(
+  k(() => {
+    f();
+  }, [r?.items, f]), k(() => {
+    g({});
+  }, [h]);
+  const S = T(
     (e) => {
-      y(e.currentTarget.value), p(1);
+      v(e.currentTarget.value), p(1);
     },
     []
   );
-  return /* @__PURE__ */ c(b, { gap: "sm", children: [
-    /* @__PURE__ */ o(
-      T,
+  return /* @__PURE__ */ a(C, { gap: "sm", children: [
+    /* @__PURE__ */ t(
+      D,
       {
-        leftSection: a ? /* @__PURE__ */ o(j, { size: 16 }) : /* @__PURE__ */ o(L, { size: 16, icon: z }),
+        leftSection: n ? /* @__PURE__ */ t(M, { size: 16 }) : /* @__PURE__ */ t(B, { size: 16, icon: j }),
         maxLength: 50,
-        placeholder: t("changeCover.searchImage"),
+        placeholder: o("changeCover.searchImage"),
         "data-autofocus": !0,
-        value: m,
-        onChange: v
+        value: u,
+        onChange: S
       }
     ),
-    /* @__PURE__ */ c(C, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
-      !!i.length && /* @__PURE__ */ c(b, { gap: 8, children: [
-        /* @__PURE__ */ o(D, { cols: 4, spacing: 10, children: i.map((e) => /* @__PURE__ */ o(
-          M,
-          {
-            onClick: () => n?.(e.urls.regular),
-            ratio: 120 / 65,
-            className: R.itemImage,
-            style: {
-              backgroundImage: `url(${e.urls.small})`
+    /* @__PURE__ */ a(c, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
+      !!i.length && /* @__PURE__ */ a(C, { gap: 8, children: [
+        /* @__PURE__ */ t(N, { cols: 4, spacing: 10, children: i.map((e) => /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ t(
+            _,
+            {
+              onClick: () => l?.(e.urls.regular),
+              ratio: 120 / 65,
+              className: y.itemImage,
+              style: {
+                backgroundImage: `url(${e.urls.small})`
+              }
             }
-          },
-          e.id
-        )) }),
-        r?.hasMore && /* @__PURE__ */ o(
+          ),
+          /* @__PURE__ */ t(c, { className: y.imageAuthor, children: /* @__PURE__ */ a(b, { truncate: !0, c: "gray", size: "xs", children: [
+            o("changeCover.photoBy"),
+            " ",
+            /* @__PURE__ */ t(
+              b,
+              {
+                component: "a",
+                inherit: !0,
+                href: e.user.links.html,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                onClick: (P) => P.stopPropagation(),
+                children: e.user.name
+              }
+            )
+          ] }) })
+        ] }, e.id)) }),
+        r?.hasMore && /* @__PURE__ */ t(
           q,
           {
             variant: "subtle",
-            loading: a,
+            loading: n,
             onClick: () => p((e) => e + 1),
-            children: t("loadMore")
+            children: o("loadMore")
           }
         )
       ] }),
-      !i.length && !a && /* @__PURE__ */ o(C, { pb: 16, children: /* @__PURE__ */ o(
+      !i.length && !n && /* @__PURE__ */ t(c, { pb: 16, children: /* @__PURE__ */ t(
         F,
         {
           size: 120,
           illustration: "noImage",
-          description: t("changeCover.noResult"),
+          description: o("changeCover.noResult"),
           titleProps: { size: "xs", c: "dimmed" }
         }
       ) }),
-      !i.length && a && /* @__PURE__ */ o(N, {})
+      !i.length && n && /* @__PURE__ */ t(Q, {})
     ] })
   ] });
 };
 export {
-  K as FilePickerUnsplash
+  X as FilePickerUnsplash
 };

package/dist/components/FilePicker/types.d.ts

@@ -29,5 +29,5 @@ export type FilePickerLocales = {
         invalidLink?: string;
     };
 };
-export type FileType = 'file' | 'image' | 'audio' | 'video';
+export type FileType = 'file' | 'image' | 'audio' | 'video' | 'avatar';
 //# sourceMappingURL=types.d.ts.map

package/dist/components/FilePicker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM,EAAE;QACN,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM,EAAE;QACN,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC"}

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

@@ -1,18 +1,18 @@
-const t = "_themeProvider_13pry_1", o = "_root_13pry_7", e = "_container_13pry_36", n = "_media_13pry_42", _ = "_background_13pry_46", r = "_stepRoot_13pry_59", s = "_content_13pry_104", c = "_mediaInner_13pry_169", p = "_stepTitle_13pry_332", i = "_stepDescription_13pry_355", a = "_stepIndicator_13pry_369", d = "_stepIndicatorIcon_13pry_386", l = "_focusBox_13pry_405", y = "_dropzone_13pry_414", u = "_allSlidesLayout_13pry_432", I = "_allSlidesLayoutStep_13pry_438", m = {
+const t = "_themeProvider_1lm79_1", o = "_root_1lm79_7", e = "_container_1lm79_36", n = "_media_1lm79_42", _ = "_background_1lm79_46", s = "_stepRoot_1lm79_59", c = "_content_1lm79_104", l = "_mediaInner_1lm79_169", i = "_stepTitle_1lm79_332", a = "_stepDescription_1lm79_355", r = "_stepIndicator_1lm79_369", d = "_stepIndicatorIcon_1lm79_386", m = "_focusBox_1lm79_405", p = "_dropzone_1lm79_414", u = "_allSlidesLayout_1lm79_432", I = "_allSlidesLayoutStep_1lm79_438", S = {
   themeProvider: t,
   root: o,
   container: e,
   media: n,
   background: _,
-  stepRoot: r,
-  content: s,
-  mediaInner: c,
-  stepTitle: p,
-  stepDescription: i,
-  stepIndicator: a,
+  stepRoot: s,
+  content: c,
+  mediaInner: l,
+  stepTitle: i,
+  stepDescription: a,
+  stepIndicator: r,
   stepIndicatorIcon: d,
-  focusBox: l,
-  dropzone: y,
+  focusBox: m,
+  dropzone: p,
   allSlidesLayout: u,
   allSlidesLayoutStep: I
 };
@@ -21,17 +21,17 @@ export {
   I as allSlidesLayoutStep,
   _ as background,
   e as container,
-  s as content,
-  m as default,
-  y as dropzone,
-  l as focusBox,
+  c as content,
+  S as default,
+  p as dropzone,
+  m as focusBox,
   n as media,
-  c as mediaInner,
+  l as mediaInner,
   o as root,
-  i as stepDescription,
-  a as stepIndicator,
+  a as stepDescription,
+  r as stepIndicator,
   d as stepIndicatorIcon,
-  r as stepRoot,
-  p as stepTitle,
+  s as stepRoot,
+  i as stepTitle,
   t as themeProvider
 };

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

@@ -1,4 +1,4 @@
-import { PictureChoiceControlItem, ThemeData } from '../../../types/form';
+import { PictureChoiceControl, PictureChoiceControlItem, ThemeData } from '../../../types/form';
 export type PictureChoiceCardProps = {
     label: string;
     showInput?: boolean;
@@ -8,6 +8,8 @@ export type PictureChoiceCardProps = {
     controlId: string;
     id: string;
     theme?: ThemeData;
+    stepId: string;
+    options: PictureChoiceControl['options'];
 };
-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, stepId, options, }: PictureChoiceCardProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=PictureChoiceCard.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"PictureChoiceCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/ChoiceField/PictureChoiceCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,SAAS,EACV,MAAM,qBAAqB,CAAC;AAG7B,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;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,iBAAiB,gIAYzB,sBAAsB,6CAkD1B,CAAC"}

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

@@ -1,37 +1,62 @@
-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(
+import { jsx as v } from "react/jsx-runtime";
+import { memo as F, useCallback as U } from "react";
+import { useSteps as b } from "../../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as x } from "../../../store/formStore.js";
+import { PictureSelectableCard as P } from "../SelectableCard/PictureSelectableCard.js";
+const L = F(
   ({
-    label: i,
-    showInput: r,
-    onUpdate: l,
-    onRemove: c,
-    image: a,
+    label: n,
+    showInput: c,
+    onUpdate: u,
+    onRemove: m,
+    image: p,
     controlId: e,
-    id: t,
-    theme: s
+    id: o,
+    theme: f,
+    stepId: t,
+    options: i
   }) => {
-    const { form: m, setValue: n } = f(), o = m.values[e] === t;
-    return /* @__PURE__ */ u(
-      C,
+    const { form: d, setValue: C } = b(), { useStore: h } = x(), s = h((r) => r.uploadFileFn), a = d.values[e] === o, S = () => {
+      C(e, a ? null : o);
+    }, V = U(
+      (r, k) => {
+        const l = r[0];
+        return s?.(
+          {
+            file: l,
+            id: l.name,
+            isError: !1,
+            isLoading: !0,
+            isSuccess: !1
+          },
+          {
+            stepId: t,
+            controlId: e,
+            optionId: o,
+            setOpen: k,
+            pictureChoiceOptions: i
+          }
+        );
+      },
+      [e, o, s, i, t]
+    );
+    return /* @__PURE__ */ v(
+      P,
       {
-        label: i,
-        hasInput: r,
+        label: n,
+        hasInput: c,
         inputType: "radio",
-        active: o,
-        onClick: () => {
-          n(e, o ? null : t);
-        },
-        onUpdate: l,
-        onRemove: c,
-        image: a,
-        theme: s
+        active: a,
+        onClick: S,
+        onUpdate: u,
+        onRemove: m,
+        image: p,
+        theme: f,
+        onUpload: V
       }
     );
   }
 );
 export {
-  P as PictureChoiceCard
+  L as PictureChoiceCard
 };

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

@@ -1 +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"}
+{"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,4CAqGA,CAAC"}

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

@@ -13,42 +13,44 @@ import { DragOptions as j } from "../DragOptions/DragOptions.js";
 import { PictureChoiceCard as k } from "./PictureChoiceCard.js";
 const Y = ({
   control: I,
-  step: d,
+  step: t,
   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, {
+  const { t: C } = A("forms"), { id: r, options: o, showInput: l } = I, { api: s, useStore: g } = N(), n = g((i) => i.editing), { form: x } = B(), c = x.errors[r], O = (i) => {
+    const { active: e, over: d } = i;
+    if (e.id !== d?.id && o) {
+      const E = o.findIndex((p) => p.id === e.id), v = o.findIndex((p) => p.id === d?.id), w = L(o, E, v);
+      s.updateControl(t.id, r, {
         options: w
       });
     }
-  }, f = M(), S = h(() => i?.map((o) => ({
-    id: o.id || "",
+  }, f = M(), S = h(() => o?.map((i) => ({
+    id: i.id || "",
     element: /* @__PURE__ */ a(
       k,
       {
-        ...o,
-        label: t ? o.label : f(o.label),
+        ...i,
+        label: n ? i.label : f(i.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
+        onUpdate: n ? (e) => {
+          s.updateControl(t.id, r, {
+            options: o.map(
+              (d) => d.id === i.id ? { ...d, ...e } : d
             )
           });
         } : void 0,
-        onRemove: t ? () => {
-          s.updateControl(d.id, r, {
-            options: i.filter((n) => n.id !== o.id)
+        onRemove: n ? () => {
+          s.updateControl(t.id, r, {
+            options: o.filter((e) => e.id !== i.id)
           });
-        } : void 0
+        } : void 0,
+        stepId: t.id,
+        options: o
       }
     )
-  })), [s, t, r, f, i, l, d.id, m]);
+  })), [s, n, r, f, o, l, t.id, m]);
   return /* @__PURE__ */ b(
     R,
     {
@@ -60,20 +62,20 @@ const Y = ({
         /* @__PURE__ */ a(
           j,
           {
-            editable: t,
+            editable: n,
             options: S,
             onDragEnd: O,
             isGrid: !0,
             align: m?.align
           }
         ),
-        t && /* @__PURE__ */ a(T, { mx: -8, children: /* @__PURE__ */ a(
+        n && /* @__PURE__ */ a(T, { mx: -8, children: /* @__PURE__ */ a(
           P,
           {
             onClick: () => {
-              s.updateControl(d.id, r, {
+              s.updateControl(t.id, r, {
                 options: [
-                  ...i || [],
+                  ...o || [],
                   {
                     id: _(),
                     label: C("newOption")

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

@@ -1,4 +1,4 @@
-const s = "_dragOptions_1a1vw_1", t = {
+const s = "_dragOptions_gdwk6_1", t = {
   dragOptions: s
 };
 export {

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

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { FileWithPath } from '@mantine/dropzone';
 import { PictureChoiceControlItem, ThemeData } from '../../../types/form';
 type PictureSelectableCardProps = {
     label: string;
@@ -11,12 +12,14 @@ type PictureSelectableCardProps = {
     onRemove?: () => void;
     onUpdate?: (v: Partial<PictureChoiceControlItem>) => void;
     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, }: PictureSelectableCardProps) => import("react/jsx-runtime").JSX.Element>;
-export declare const UploadOptionImageButton: ({ children, onUpdate, onRemove, hasImage, }: PropsWithChildren<{
+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;
+    onUpload?: (files: FileWithPath[], setOpened: (state: boolean) => void) => void;
 }>) => 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;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"}
+{"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;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;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,4CAsBD,CAAC"}