@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/FormViewer/helpers/staticClasses.js

@@ -0,0 +1,48 @@
+const e = "layers-", o = {
+  // Form structure
+  PAGE: `${e}page`,
+  START: `${e}start`,
+  END: `${e}end`,
+  // Navigation
+  SUBMIT_BUTTON: `${e}submit-button`,
+  // Form elements
+  REQUIRED_INDICATOR: `${e}required-indicator`,
+  VALIDATION_ERROR: `${e}validation-error`,
+  // Blocks
+  BLOCK: `${e}block`,
+  BLOCK_TEXT: `${e}block-text`,
+  BLOCK_TITLE: `${e}block-title`,
+  BLOCK_IMAGE: `${e}block-image`,
+  // Media layout specific classes
+  MEDIA_LAYOUT_CONTENT: `${e}media-layout-content`,
+  MEDIA_LAYOUT_LEFT: `${e}media-layout-left`,
+  MEDIA_LAYOUT_RIGHT: `${e}media-layout-right`,
+  MEDIA_LAYOUT_FULL_LEFT: `${e}media-layout-full-left`,
+  MEDIA_LAYOUT_FULL_RIGHT: `${e}media-layout-full-right`,
+  MEDIA_LAYOUT_BACKGROUND: `${e}media-layout-background`,
+  MEDIA_LAYOUT_TOP: `${e}media-layout-top`,
+  MEDIA_LAYOUT_BOTTOM: `${e}media-layout-bottom`,
+  MEDIA_LAYOUT_FULL_TOP: `${e}media-layout-full-top`,
+  MEDIA_LAYOUT_FULL_BOTTOM: `${e}media-layout-full-bottom`,
+  // Multiple choice
+  BLOCK_MULTIPLE_CHOICE: `${e}block-multiple-choice`,
+  MULTIPLE_CHOICE_OPTION: `${e}multiple-choice-option`,
+  MULTIPLE_CHOICE_OPTION_SELECTED: `${e}multiple-choice-option-selected`,
+  NUMBER_BADGE: `${e}number-badge`,
+  // Checkboxes
+  CHECKBOX: `${e}checkbox`,
+  CHECKBOX_SELECTED: `${e}checkbox-selected`,
+  // Radio buttons
+  RADIO: `${e}radio`,
+  RADIO_SELECTED: `${e}radio-selected`,
+  // Input fields
+  BLOCK_INPUT_TEXT: `${e}block-input-text`,
+  BLOCK_INPUT_NUMBER: `${e}block-input-number`,
+  BLOCK_INPUT_EMAIL: `${e}block-input-email`,
+  BLOCK_TEXTAREA: `${e}block-textarea`
+}, T = (t) => `${e}page-${t}`, _ = (...t) => t.filter(Boolean).join(" ");
+export {
+  o as STATIC_CLASSES,
+  _ as combineClasses,
+  T as getPageNumberClass
+};

package/dist/components/FormViewer/helpers/steps.d.ts

@@ -252,6 +252,7 @@ export declare const getFirstStep: (steps: StepData[]) => {
             fit?: string | undefined;
             blendMode?: string | undefined;
         } | undefined;
+        borderRadius?: "sm" | "md" | "lg" | undefined;
         container?: {
             color?: string | undefined;
             opacity?: number | undefined;
@@ -260,7 +261,6 @@ export declare const getFirstStep: (steps: StepData[]) => {
             shadowSize?: number | undefined;
             shadowColor?: string | undefined;
         } | undefined;
-        borderRadius?: "sm" | "md" | "lg" | undefined;
         font?: {
             color?: string | undefined;
             fontSize?: number | undefined;

package/dist/components/FormViewer/helpers/steps.js

@@ -0,0 +1,55 @@
+import { randomId as o } from "@mantine/hooks";
+const _ = (t) => t.find((n) => n.isStart) || t.at(0), i = "__end_step__", r = "__start_step__", c = (t) => ({
+  id: r,
+  trigger: "",
+  isStart: !0,
+  theme: {
+    align: "center"
+  },
+  controls: [
+    {
+      title: t("defaultStartStep.title", { ns: "forms" }),
+      description: t("defaultStartStep.description", { ns: "forms" }),
+      id: e(),
+      controlType: "start",
+      buttonIcon: "i=player-play"
+    }
+  ]
+}), T = (t) => ({
+  id: e(),
+  trigger: "",
+  isEnd: !0,
+  controls: [
+    {
+      id: e(),
+      title: t("defaultEndStep.title", { ns: "forms" }),
+      description: t("defaultEndStep.description", { ns: "forms" }),
+      controlType: "confirm",
+      showButton: !0,
+      buttonIcon: "i=square-check",
+      link: "https://layers.md/"
+    }
+  ],
+  theme: {
+    align: "center"
+  }
+}), I = 0, E = 1, D = 9999, a = 99, d = "CREATE_CONDITION_FORM", p = "EDIT_CONDITION_FORM", l = 20, O = (t) => [1, 2, 3].map((n) => t("option") + " " + n).join(`
+`), e = () => o().split("-")[1], S = 100, N = 100;
+export {
+  d as CREATE_CONDITION_FORM_ID,
+  i as DEFAULT_END_STEP_ID,
+  D as DEFAULT_MAX,
+  S as DEFAULT_MEDIA_BRIGHTNESS,
+  N as DEFAULT_MEDIA_SIZE,
+  I as DEFAULT_MIN,
+  E as DEFAULT_OPTIONS_MIN,
+  a as DEFAULT_OPTION_MAX_LENGTH,
+  r as DEFAULT_START_STEP_ID,
+  p as EDIT_CONDITION_FORM_ID,
+  l as MAX_OPTIONS_COUNT,
+  O as getDefaultDropdownOptions,
+  T as getDefaultEndStep,
+  c as getDefaultStartStep,
+  _ as getFirstStep,
+  e as getRandomId
+};

package/dist/components/FormViewer/helpers/themeUtils.js

@@ -0,0 +1,8 @@
+const e = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+export {
+  e as alignRelation
+};

package/dist/components/FormViewer/helpers/validation.js

@@ -0,0 +1,87 @@
+import { useCallback as s } from "react";
+import { useTranslation as u } from "react-i18next";
+import { isNumber as i, isNil as a } from "lodash-es";
+const D = () => {
+  const { t: e } = u();
+  return { getValidation: s(
+    (r) => {
+      if (r.controlType === "text")
+        return o(r, e);
+      if (r.controlType === "phone")
+        return f(r, e);
+      if (r.controlType === "number")
+        return l(r, e);
+      if (r.controlType === "multipleChoice")
+        return R(r, e);
+      if (r.controlType === "pictureChoice")
+        return h(r, e);
+      if (r.controlType === "choice")
+        return d(r, e);
+      if (r.controlType === "upload")
+        return _(r, e);
+      if (r.controlType === "email")
+        return I(r, e);
+      if (r.controlType === "yesNo")
+        return T(r, e);
+      if (r.controlType === "date")
+        return c(r, e);
+      if (r.controlType === "dropdown")
+        return g(r, e);
+      if (r.controlType === "location")
+        return m(r, e);
+      if (r.controlType === "longText")
+        return o(r, e);
+      if (r.controlType === "slider")
+        return l(r, e);
+      if (r.controlType === "rating")
+        return E(r, e);
+    },
+    [e]
+  ) };
+}, o = (e, n) => (r) => {
+  const t = (r || "").trim();
+  return e.required && !t.length ? n("errors.REQUIRED", { ns: "forms" }) : i(e.minLength) && t && t.length < e.minLength ? n("errors.MIN_LENGTH_LIMIT", {
+    min: e.minLength,
+    ns: "forms"
+  }) : i(e.maxLength) && t && t.length > e.maxLength ? n("errors.MAX_LENGTH_LIMIT", {
+    max: e.maxLength,
+    ns: "forms"
+  }) : null;
+}, m = (e, n) => (r) => {
+  const t = (r || "").trim();
+  return e.required && !t.length ? n("errors.REQUIRED", { ns: "forms" }) : null;
+}, f = (e, n) => (r) => {
+  const t = (r || "").trim();
+  return e.required && !t.length ? n("errors.REQUIRED", { ns: "forms" }) : t && !/^\+?\d{1,29}$/.test(t) ? n("errors.INVALID_PHONE", { ns: "forms" }) : null;
+}, I = (e, n) => (r) => {
+  const t = (r || "").trim();
+  return e.required && !t.length ? n("errors.REQUIRED", { ns: "forms" }) : r && !L(r) ? n("errors.INVALID_EMAIL", { ns: "forms" }) : null;
+}, l = (e, n) => (r) => e.required && !i(r) ? n("errors.REQUIRED", { ns: "forms" }) : null, E = (e, n) => (r) => e.required && !i(r) ? n("errors.REQUIRED", { ns: "forms" }) : null, d = (e, n) => (r) => e.required && !r ? n("errors.CHOICE_REQUIRED", { ns: "forms" }) : null, g = (e, n) => (r) => e.required && !r ? n("errors.CHOICE_REQUIRED", { ns: "forms" }) : null, c = (e, n) => (r) => e.required && !r ? n("errors.REQUIRED", { ns: "forms" }) : null, R = (e, n) => (r) => e.required && !r.length ? n("errors.CHOICE_REQUIRED", { ns: "forms" }) : i(e.minOptions) && r.length < e.minOptions ? n("errors.MIN_CHOICE_LIMIT", {
+  count: e.minOptions - r.length,
+  ns: "forms"
+}) : null, h = (e, n) => (r) => e.required && !r ? n("errors.CHOICE_REQUIRED", { ns: "forms" }) : null, T = (e, n) => (r) => e.required && a(r) ? n("errors.CHOICE_REQUIRED", { ns: "forms" }) : null, _ = (e, n) => (r) => e.required && !r.length ? n("errors.REQUIRED", { ns: "forms" }) : e.maxFiles && r.length > e.maxFiles ? n("errors.MAX_FILES_LIMIT", {
+  count: e.maxFiles,
+  ns: "forms"
+}) : e.minFiles && r.length < e.minFiles ? n("errors.MIN_FILES_LIMIT", {
+  count: e.minFiles,
+  ns: "forms"
+}) : e.maxSize && r.some((t) => t.size > (e?.maxSize || 0)) ? n("errors.MAX_FILE_SIZE_LIMIT", {
+  size: e.maxSize,
+  ns: "forms"
+}) : null, L = (e) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(e), U = (e) => new Promise((n) => {
+  const r = new Image();
+  r.src = e, r.onload = () => n(!0), r.onerror = () => n(!1);
+}), x = (e) => {
+  try {
+    return !!new URL(e);
+  } catch {
+    return !1;
+  }
+};
+export {
+  o as getTextValidation,
+  U as isImageUrl,
+  L as isValidEmail,
+  x as isValidUrl,
+  D as useValidation
+};

package/dist/components/FormViewer/hooks/useActiveControl.js

@@ -0,0 +1,9 @@
+import { useFormViewerStore as o } from "../store/formStore.js";
+import { activeControlReselect as r } from "../store/selectors.js";
+const c = () => {
+  const { useStore: e } = o();
+  return e(r);
+};
+export {
+  c as useActiveControl
+};

package/dist/components/FormViewer/hooks/useActiveStep.d.ts

@@ -250,6 +250,7 @@ export declare const useActiveStep: () => {
             fit?: string | undefined;
             blendMode?: string | undefined;
         } | undefined;
+        borderRadius?: "sm" | "md" | "lg" | undefined;
         container?: {
             color?: string | undefined;
             opacity?: number | undefined;
@@ -258,7 +259,6 @@ export declare const useActiveStep: () => {
             shadowSize?: number | undefined;
             shadowColor?: string | undefined;
         } | undefined;
-        borderRadius?: "sm" | "md" | "lg" | undefined;
         font?: {
             color?: string | undefined;
             fontSize?: number | undefined;

package/dist/components/FormViewer/hooks/useActiveStep.js

@@ -0,0 +1,9 @@
+import { useFormViewerStore as t } from "../store/formStore.js";
+import { activeStepReselect as r } from "../store/selectors.js";
+const c = () => {
+  const { useStore: e } = t();
+  return e(r);
+};
+export {
+  c as useActiveStep
+};

package/dist/components/FormViewer/hooks/useCreateFormContext.js

@@ -0,0 +1,78 @@
+import { jsx as C } from "react/jsx-runtime";
+import { createContext as h, useContext as V, useState as b, useCallback as m } from "react";
+import { useForm as E } from "@mantine/form";
+import F from "js-confetti";
+import { getNextStep as g } from "../helpers/conditions.js";
+import { useValidation as y } from "../helpers/validation.js";
+import { useFormViewerStore as A } from "../store/formStore.js";
+import { stepsReselect as T } from "../store/selectors.js";
+import { useActiveStep as j } from "./useActiveStep.js";
+const d = h(
+  null
+), G = () => V(d), w = {
+  number: "",
+  text: "",
+  date: null,
+  multipleChoice: [],
+  slider: null,
+  dropdown: null,
+  choice: null,
+  pictureChoice: null,
+  upload: [],
+  location: "",
+  phone: "",
+  email: "",
+  longText: "",
+  yesNo: null,
+  confirm: null,
+  start: null,
+  button: null,
+  rating: null
+}, I = ({
+  onSubmit: s,
+  onValuesChange: u
+}) => {
+  const { useStore: a, api: i } = A(), { currentSteps: l } = a(T), n = j(), [f, p] = b("next"), { getValidation: x } = y(), r = E({
+    initialValues: l?.reduce(
+      (e, o) => (o.controls?.forEach((t) => {
+        e[t.id] = w[t.controlType];
+      }), e),
+      {
+        submissionId: crypto.randomUUID()
+      }
+    ),
+    validate: l?.reduce((e, o) => (o.controls?.forEach((t) => e[t.id] = x(t)), e), {}),
+    onValuesChange: u
+  }), c = m(() => {
+    if (!n || (n.controls || []).map((t) => r.validateField(t.id)).some((t) => t.hasError)) return;
+    const o = g(n, l, r);
+    p("next"), setTimeout(() => {
+      i.setActiveStepId(o?.id || "");
+    }, 0), o?.isEnd && (s?.(r.getValues()), new F().addConfetti());
+  }, [n, i, l, r, s]), S = m(() => {
+    p("prev"), setTimeout(() => i.backActiveStep(), 0);
+  }, [i]), v = m(
+    (e, o) => {
+      r.setFieldValue(e, o), n?.autoSubmit && c();
+    },
+    [n?.autoSubmit, r, c]
+  );
+  return {
+    handleNext: c,
+    handlePrev: S,
+    anim: f,
+    form: r,
+    setValue: v
+  };
+}, H = ({
+  children: s,
+  ...u
+}) => {
+  const a = I(u);
+  return /* @__PURE__ */ C(d.Provider, { value: a, children: s });
+};
+export {
+  H as FormContextProvider,
+  d as StepsContext,
+  G as useSteps
+};

package/dist/components/FormViewer/hooks/useFormGlobalTheme.js

@@ -0,0 +1,132 @@
+import { useMemo as r } from "react";
+import { generateColors as a } from "@mantine/colors-generator";
+import { createTheme as d, Flex as u, ActionIcon as l, ThemeIcon as m, Card as f, InputError as c, Progress as p, Select as x, NumberInput as z, Textarea as b, TextInput as P, Button as h, Text as R, Title as T, DEFAULT_THEME as g } from "@mantine/core";
+import { DateInput as y } from "@mantine/dates";
+import { scopeCustomCss as F } from "../helpers/cssScoping.js";
+import { useFormViewerStore as I } from "../store/formStore.js";
+import { themeReselect as S } from "../store/selectors.js";
+const B = ({ innerId: t }) => {
+  const { useStore: s } = I(), e = s(S), i = r(() => {
+    const n = a(e?.primaryColor || ""), o = "custom";
+    return d({
+      ...g,
+      fontFamily: `"${e.font?.fontFamily || "Roboto"}", sans-serif`,
+      // fontWeight: theme.font?.fontWeight,
+      headings: {
+        fontWeight: String(e.font?.fontWeight) || "700",
+        fontFamily: `"${e.font?.fontFamily || "Roboto"}", sans-serif`
+      },
+      primaryColor: "custom",
+      colors: {
+        custom: n
+      },
+      defaultRadius: e.borderRadius,
+      components: {
+        Title: T.extend({
+          defaultProps: {
+            style: {
+              fontFamily: e.title?.fontFamily,
+              fontWeight: e.title?.fontWeight
+            }
+          }
+        }),
+        Text: R.extend({
+          defaultProps: {
+            style: {
+              fontFamily: e.font?.fontFamily,
+              fontWeight: e.font?.fontWeight
+            }
+          }
+        }),
+        Button: h.extend({
+          defaultProps: {
+            color: o,
+            size: e.size,
+            fw: e.font?.fontWeight,
+            radius: e.borderRadius
+          }
+        }),
+        TextInput: P.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        DateInput: y.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        Textarea: b.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        NumberInput: z.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        Select: x.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        Progress: p.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        InputError: c.extend({
+          defaultProps: {
+            color: o,
+            size: e.size
+          }
+        }),
+        Card: f.extend({
+          defaultProps: {
+            radius: e.borderRadius
+          }
+        }),
+        ThemeIcon: m.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        ActionIcon: l.extend({
+          defaultProps: {
+            radius: e.borderRadius,
+            color: o,
+            size: e.size
+          }
+        }),
+        Flex: u.extend({
+          defaultProps: {
+            align: "center",
+            gap: 8
+          }
+        })
+      }
+    });
+  }, [e]);
+  return {
+    customStyles: r(() => F(e.customCSS || "", `#forms-provider-${t}`), [e.customCSS, t]),
+    mantineTheme: i
+  };
+};
+export {
+  B as useFormGlobalTheme
+};

package/dist/components/FormViewer/hooks/useFormMobile.js

@@ -0,0 +1,15 @@
+import { useEffect as i } from "react";
+import { useElementSize as s } from "@mantine/hooks";
+import { useFormViewerStore as m } from "../store/formStore.js";
+const p = () => {
+  const { api: o } = m(), { ref: r, width: t } = s(), e = t < 800;
+  return i(() => {
+    o.setIsMobile(e);
+  }, [o, e]), {
+    ref: r,
+    isMobile: e
+  };
+};
+export {
+  p as useFormMobile
+};

package/dist/components/FormViewer/hooks/useInterpolateText.js

@@ -0,0 +1,57 @@
+import { useMemo as m, useCallback as d } from "react";
+import { isValid as f } from "date-fns";
+import { useFormViewerStore as v } from "../store/formStore.js";
+import { controlsReselect as h } from "../store/selectors.js";
+import { useSteps as g } from "./useCreateFormContext.js";
+const N = (i, o = !1) => {
+  const a = b();
+  return m(() => o ? i || "" : a(i), [o, a, i]);
+}, b = () => {
+  const { form: i } = g(), { useStore: o } = v(), a = o(h);
+  return d(
+    (u) => {
+      const p = a.reduce(
+        (t, e) => {
+          const n = "variableName" in e && e.variableName || e.id;
+          if (e.controlType === "dropdown") {
+            const r = e.options?.find(
+              (s) => s.id === i.values[e.id]
+            );
+            return t[n] = r?.label || "", t;
+          }
+          if (e.controlType === "choice") {
+            const r = e.options?.find(
+              (s) => s.id === i.values[e.id]
+            );
+            return t[n] = r?.label || "", t;
+          }
+          if (e.controlType === "multipleChoice") {
+            const r = e.options?.filter(
+              (s) => i.values[e.id]?.includes(s.id)
+            );
+            return t[n] = r?.map((s) => s.label).join(", ") || "", t;
+          }
+          if (e.controlType === "date") {
+            const r = new Date(i.values[e.id]);
+            return t[n] = f(r) ? r.toLocaleDateString() : "", t;
+          }
+          return t[n] = i.values[e.id], t;
+        },
+        {}
+      );
+      return (u || "").replace(
+        /(\{{2,})([a-zA-Z0-9_]+)(\}{2,})/g,
+        (t, e, n, r) => {
+          if (e.length < 2 || r.length < 2) return t;
+          const s = Math.max(0, e.length - 2), l = Math.max(0, r.length - 2);
+          return "{".repeat(s) + (p[n] ?? "") + "}".repeat(l);
+        }
+      );
+    },
+    [a, i.values]
+  );
+};
+export {
+  b as useInterpolate,
+  N as useInterpolateText
+};

package/dist/components/FormViewer/store/formStore.d.ts

@@ -78,6 +78,7 @@ export declare const createFormStore: () => {
                     fit?: string | undefined;
                     blendMode?: string | undefined;
                 } | undefined;
+                borderRadius?: "sm" | "md" | "lg" | undefined;
                 container?: {
                     color?: string | undefined;
                     opacity?: number | undefined;
@@ -86,7 +87,6 @@ export declare const createFormStore: () => {
                     shadowSize?: number | undefined;
                     shadowColor?: string | undefined;
                 } | undefined;
-                borderRadius?: "sm" | "md" | "lg" | undefined;
                 font?: {
                     color?: string | undefined;
                     fontSize?: number | undefined;
@@ -360,6 +360,7 @@ export declare const createFormStore: () => {
                         fit?: string | undefined;
                         blendMode?: string | undefined;
                     } | undefined;
+                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     container?: {
                         color?: string | undefined;
                         opacity?: number | undefined;
@@ -368,7 +369,6 @@ export declare const createFormStore: () => {
                         shadowSize?: number | undefined;
                         shadowColor?: string | undefined;
                     } | undefined;
-                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     font?: {
                         color?: string | undefined;
                         fontSize?: number | undefined;
@@ -641,6 +641,7 @@ export declare const createFormStore: () => {
                         fit?: string | undefined;
                         blendMode?: string | undefined;
                     } | undefined;
+                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     container?: {
                         color?: string | undefined;
                         opacity?: number | undefined;
@@ -649,7 +650,6 @@ export declare const createFormStore: () => {
                         shadowSize?: number | undefined;
                         shadowColor?: string | undefined;
                     } | undefined;
-                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     font?: {
                         color?: string | undefined;
                         fontSize?: number | undefined;
@@ -756,6 +756,7 @@ export declare const useFormViewerStore: () => {
                     fit?: string | undefined;
                     blendMode?: string | undefined;
                 } | undefined;
+                borderRadius?: "sm" | "md" | "lg" | undefined;
                 container?: {
                     color?: string | undefined;
                     opacity?: number | undefined;
@@ -764,7 +765,6 @@ export declare const useFormViewerStore: () => {
                     shadowSize?: number | undefined;
                     shadowColor?: string | undefined;
                 } | undefined;
-                borderRadius?: "sm" | "md" | "lg" | undefined;
                 font?: {
                     color?: string | undefined;
                     fontSize?: number | undefined;
@@ -1038,6 +1038,7 @@ export declare const useFormViewerStore: () => {
                         fit?: string | undefined;
                         blendMode?: string | undefined;
                     } | undefined;
+                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     container?: {
                         color?: string | undefined;
                         opacity?: number | undefined;
@@ -1046,7 +1047,6 @@ export declare const useFormViewerStore: () => {
                         shadowSize?: number | undefined;
                         shadowColor?: string | undefined;
                     } | undefined;
-                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     font?: {
                         color?: string | undefined;
                         fontSize?: number | undefined;
@@ -1319,6 +1319,7 @@ export declare const useFormViewerStore: () => {
                         fit?: string | undefined;
                         blendMode?: string | undefined;
                     } | undefined;
+                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     container?: {
                         color?: string | undefined;
                         opacity?: number | undefined;
@@ -1327,7 +1328,6 @@ export declare const useFormViewerStore: () => {
                         shadowSize?: number | undefined;
                         shadowColor?: string | undefined;
                     } | undefined;
-                    borderRadius?: "sm" | "md" | "lg" | undefined;
                     font?: {
                         color?: string | undefined;
                         fontSize?: number | undefined;