@layers-app/shared 0.4.8 → 0.4.10

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

@@ -2,7 +2,20 @@ import { PropsWithChildren } from 'react';
 import { UploadFileData } from '../components/fields/UploadField/UploadField';
 import { ParsedFormConfig, PictureChoiceControl, StepData } from '../types/form';
 export type FormEditorTabType = 'steps' | 'add' | 'settings' | 'logic';
-export type FormViewLayout = 'all-slides' | 'one-slide';
+/**
+ * Цель выделения/наведения в режиме редактирования. Поддерживается ровно два
+ * уровня: целый слайд и отдельный элемент внутри него.
+ */
+export type EditorSelectionTarget = {
+    type: 'slide';
+    stepId: string;
+} | {
+    type: 'element';
+    stepId: string;
+    elementKey: string;
+};
+/** Сравнивает две цели выделения/наведения (slide / element). */
+export declare const isSameEditorTarget: (a: EditorSelectionTarget | null | undefined, b: EditorSelectionTarget | null | undefined) => boolean;
 export interface UploadFileOptionalArgs {
     stepId?: string;
     controlId?: string;
@@ -23,18 +36,31 @@ export type FormStoreState = {
     addEndStep?: () => StepData;
     onConfigChange?: (config: ParsedFormConfig) => void;
     uploadFileFn?: (file: UploadFileData, optionalArgs?: UploadFileOptionalArgs) => Promise<string>;
-    layout?: FormViewLayout;
+    /** Наведённый слайд/элемент (только в режиме редактирования) */
+    editorHover?: EditorSelectionTarget | null;
+    /** Выделенный слайд/элемент (только в режиме редактирования) */
+    editorSelection?: EditorSelectionTarget | null;
+    /** Открыть модалку добавления элемента (предоставляется редактором форм). */
+    onAddElement?: (args: {
+        stepId: string;
+        afterControlId?: string;
+        contentOnly?: boolean;
+    }) => void;
+    /** Открыть справку по переменным (предоставляется редактором форм). */
+    onVariableHelp?: () => void;
 };
 export declare const createFormStore: () => {
     useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
     api: {
         applyTheme: (theme: import("..").ThemeData) => void;
-        setLayout: (layout: FormViewLayout) => void;
+        setEditorHover: (target: EditorSelectionTarget | null) => void;
+        setEditorSelection: (target: EditorSelectionTarget | null) => void;
+        clearEditorSelection: () => void;
         patchSettingsData: (v: Partial<import("..").SettingsData>) => void;
         patchThemeData: (v: Partial<import("..").ThemeData>) => void;
         patchContainerTheme: (v: Partial<import("..").ContainerProperties>) => void;
         patchTitleProperties: (v: Partial<import("..").TextProperties>) => void;
-        patchDescriptionProperties: (v: Partial<import("..").TextProperties>) => void;
+        patchSlideTitleProperties: (v: Partial<import("..").TextProperties>) => void;
         patchCommonFontProperties: (v: Partial<import("..").TextProperties>) => void;
         setSteps: (steps: StepData[]) => void;
         addStep: (step: StepData, index?: number) => void;
@@ -43,7 +69,7 @@ export declare const createFormStore: () => {
         updateControl: <CONTROL extends import("..").Control>(stepId: string, controlId: string, updatedControl: Partial<CONTROL>) => void;
         reorderSteps: (fromId: string, toId: string) => void;
         reorderControls: (stepId: string, activeId: string, overId: string) => void;
-        addControl: (stepId: string, newControl: import("..").Control) => void;
+        addControl: (stepId: string, newControl: import("..").Control, afterControlId?: string) => void;
         removeControl: (stepId: string, controlId: string) => void;
         addCondition: (stepId: string, newCondition: import("..").Condition) => void;
         updateCondition: (stepId: string, conditionIndex: number, updatedCondition: Partial<import("..").Condition>) => void;
@@ -53,7 +79,6 @@ export declare const createFormStore: () => {
             silent?: boolean;
         }) => void;
         setActiveStepId: (stepId: string) => void;
-        setFormLayout: (layout: import("..").FormLayout) => void;
         scrollToControl: (controlId: string) => void;
         getConfig: () => Required<{
             steps?: {
@@ -105,7 +130,6 @@ export declare const createFormStore: () => {
                     variableName?: string | undefined;
                     minOptions?: number | undefined;
                     maxOptions?: number | undefined;
-                    showInput?: boolean | undefined;
                     otherOption?: boolean | undefined;
                 } | {
                     id: string;
@@ -140,7 +164,6 @@ export declare const createFormStore: () => {
                     title?: string | undefined;
                     description?: string | undefined;
                     required?: boolean | undefined;
-                    showInput?: boolean | undefined;
                     variableName?: string | undefined;
                     otherOption?: boolean | undefined;
                 } | {
@@ -156,7 +179,6 @@ export declare const createFormStore: () => {
                     icon?: string | undefined;
                     required?: boolean | undefined;
                     variableName?: string | undefined;
-                    showInput?: boolean | undefined;
                 } | {
                     id: string;
                     controlType: "upload";
@@ -241,36 +263,77 @@ export declare const createFormStore: () => {
                     label?: string | undefined;
                 } | {
                     id: string;
-                    controlType: "button";
+                    controlType: "rating";
                     title?: string | undefined;
                     description?: string | undefined;
-                    label?: string | undefined;
-                    link?: string | undefined;
-                    showIconButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
-                    alignButton?: "start" | "center" | "end" | undefined;
-                    buttons?: any[] | undefined;
-                    orientation?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-                    width?: number | undefined;
-                    enableTooltip?: boolean | undefined;
                     required?: boolean | undefined;
-                    fullWidthMobile?: boolean | undefined;
+                    variableName?: string | undefined;
+                    count?: number | undefined;
                 } | {
                     id: string;
-                    controlType: "rating";
+                    controlType: "scale";
                     title?: string | undefined;
                     description?: string | undefined;
+                    icon?: string | undefined;
                     required?: boolean | undefined;
                     variableName?: string | undefined;
-                    count?: number | undefined;
+                    min?: number | undefined;
+                    max?: number | undefined;
+                    minLabel?: string | undefined;
+                    maxLabel?: string | undefined;
+                } | {
+                    id: string;
+                    controlType: "heading";
+                    title?: string | undefined;
+                    description?: string | undefined;
+                    required?: boolean | undefined;
+                    fontSize?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                    color?: string | undefined;
+                } | {
+                    id: string;
+                    controlType: "paragraph";
+                    title?: string | undefined;
+                    description?: string | undefined;
+                    required?: boolean | undefined;
+                    variant?: "paragraph" | "note" | "caption" | undefined;
+                    fontSize?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                    color?: string | undefined;
+                    link?: string | undefined;
+                } | {
+                    id: string;
+                    controlType: "image";
+                    title?: string | undefined;
+                    description?: string | undefined;
+                    required?: boolean | undefined;
+                    image?: string | undefined;
+                    width?: "auto" | "50" | "75" | "100" | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                    radius?: number | undefined;
+                    alt?: string | undefined;
+                    link?: string | undefined;
+                } | {
+                    id: string;
+                    controlType: "divider";
+                    title?: string | undefined;
+                    description?: string | undefined;
+                    required?: boolean | undefined;
+                    lineStyle?: "line" | "dashed" | "dots" | "space" | undefined;
+                    thickness?: number | undefined;
+                    space?: "s" | "m" | "l" | undefined;
+                    color?: string | undefined;
                 })[];
                 trigger: string;
                 isStart?: boolean | undefined;
                 isEnd?: boolean | undefined;
+                title?: string | undefined;
+                headingMigrated?: boolean | undefined;
                 autoSubmit?: boolean | undefined;
                 confirmLabel?: string | undefined;
+                backLabel?: string | undefined;
                 media?: {
-                    layout?: "content" | "left" | "right" | "top" | "bottom" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | "background" | undefined;
+                    layout?: "left" | "right" | undefined;
                     brightness?: number | undefined;
                     image?: string | undefined;
                     video?: string | undefined;
@@ -291,25 +354,51 @@ export declare const createFormStore: () => {
                     listStyle?: string | undefined;
                     borderRadius?: "sm" | "md" | "lg" | undefined;
                     primaryColor?: string | undefined;
-                    title?: {
+                    slideTitle?: {
                         fontSize?: number | undefined;
                         fontWeight?: number | undefined;
                         fontFamily?: string | undefined;
                         color?: string | undefined;
+                        lineHeight?: number | undefined;
+                        letterSpacing?: number | undefined;
+                        align?: "start" | "center" | "end" | undefined;
                     } | undefined;
-                    description?: {
+                    title?: {
                         fontSize?: number | undefined;
                         fontWeight?: number | undefined;
                         fontFamily?: string | undefined;
                         color?: string | undefined;
+                        lineHeight?: number | undefined;
+                        letterSpacing?: number | undefined;
+                        align?: "start" | "center" | "end" | undefined;
                     } | undefined;
                     font?: {
                         fontSize?: number | undefined;
                         fontWeight?: number | undefined;
                         fontFamily?: string | undefined;
                         color?: string | undefined;
+                        lineHeight?: number | undefined;
+                        letterSpacing?: number | undefined;
+                        align?: "start" | "center" | "end" | undefined;
                     } | undefined;
+                    buttonFullWidth?: boolean | undefined;
+                    buttonAlign?: "start" | "center" | "end" | "between" | undefined;
+                    buttonShowBack?: boolean | undefined;
+                    buttonLayout?: "horizontal" | "vertical" | undefined;
                     container?: {
+                        background?: {
+                            bgType?: "image" | "color" | "video" | "none" | undefined;
+                            color?: string | undefined;
+                            image?: string | undefined;
+                            video?: string | undefined;
+                            videoThumb?: string | undefined;
+                            blur?: number | undefined;
+                            brightness?: number | undefined;
+                            opacity?: number | undefined;
+                            fit?: string | undefined;
+                            position?: string | undefined;
+                            blendMode?: string | undefined;
+                        } | undefined;
                         color?: string | undefined;
                         opacity?: number | undefined;
                         blur?: number | undefined;
@@ -318,26 +407,327 @@ export declare const createFormStore: () => {
                         shadowColor?: string | undefined;
                     } | undefined;
                     background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    startBackground?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    endBackground?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
                         color?: string | undefined;
                         image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
                         blur?: number | undefined;
                         brightness?: number | undefined;
                         opacity?: number | undefined;
                         fit?: string | undefined;
+                        position?: string | undefined;
                         blendMode?: string | undefined;
                     } | undefined;
+                    startContainer?: {
+                        background?: {
+                            bgType?: "image" | "color" | "video" | "none" | undefined;
+                            color?: string | undefined;
+                            image?: string | undefined;
+                            video?: string | undefined;
+                            videoThumb?: string | undefined;
+                            blur?: number | undefined;
+                            brightness?: number | undefined;
+                            opacity?: number | undefined;
+                            fit?: string | undefined;
+                            position?: string | undefined;
+                            blendMode?: string | undefined;
+                        } | undefined;
+                        color?: string | undefined;
+                        opacity?: number | undefined;
+                        blur?: number | undefined;
+                        backgroundImage?: string | undefined;
+                        shadowSize?: number | undefined;
+                        shadowColor?: string | undefined;
+                    } | undefined;
+                    endContainer?: {
+                        background?: {
+                            bgType?: "image" | "color" | "video" | "none" | undefined;
+                            color?: string | undefined;
+                            image?: string | undefined;
+                            video?: string | undefined;
+                            videoThumb?: string | undefined;
+                            blur?: number | undefined;
+                            brightness?: number | undefined;
+                            opacity?: number | undefined;
+                            fit?: string | undefined;
+                            position?: string | undefined;
+                            blendMode?: string | undefined;
+                        } | undefined;
+                        color?: string | undefined;
+                        opacity?: number | undefined;
+                        blur?: number | undefined;
+                        backgroundImage?: string | undefined;
+                        shadowSize?: number | undefined;
+                        shadowColor?: string | undefined;
+                    } | undefined;
+                    startTheme?: Record<string, unknown> | undefined;
+                    endTheme?: Record<string, unknown> | undefined;
+                    startButtonFullWidth?: boolean | undefined;
+                    slideDefaults?: Record<string, unknown> | undefined;
+                    controlDefaults?: Record<string, Record<string, unknown>> | undefined;
                     input?: {
                         backgroundColor?: string | undefined;
                         borderColor?: string | undefined;
+                        fontFamily?: string | undefined;
                     } | undefined;
                     customCSS?: string | undefined;
+                    tokens?: Record<string, string> | undefined;
                 } | undefined;
                 position?: {
                     x: number;
                     y: number;
                 } | undefined;
             }[] | undefined;
-            listStep?: {
+            theme?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                align?: "start" | "center" | "end" | undefined;
+                listStyle?: string | undefined;
+                borderRadius?: "sm" | "md" | "lg" | undefined;
+                primaryColor?: string | undefined;
+                slideTitle?: {
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                    color?: string | undefined;
+                    lineHeight?: number | undefined;
+                    letterSpacing?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                } | undefined;
+                title?: {
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                    color?: string | undefined;
+                    lineHeight?: number | undefined;
+                    letterSpacing?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                } | undefined;
+                font?: {
+                    fontSize?: number | undefined;
+                    fontWeight?: number | undefined;
+                    fontFamily?: string | undefined;
+                    color?: string | undefined;
+                    lineHeight?: number | undefined;
+                    letterSpacing?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                } | undefined;
+                buttonFullWidth?: boolean | undefined;
+                buttonAlign?: "start" | "center" | "end" | "between" | undefined;
+                buttonShowBack?: boolean | undefined;
+                buttonLayout?: "horizontal" | "vertical" | undefined;
+                container?: {
+                    background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    blur?: number | undefined;
+                    backgroundImage?: string | undefined;
+                    shadowSize?: number | undefined;
+                    shadowColor?: string | undefined;
+                } | undefined;
+                background?: {
+                    bgType?: "image" | "color" | "video" | "none" | undefined;
+                    color?: string | undefined;
+                    image?: string | undefined;
+                    video?: string | undefined;
+                    videoThumb?: string | undefined;
+                    blur?: number | undefined;
+                    brightness?: number | undefined;
+                    opacity?: number | undefined;
+                    fit?: string | undefined;
+                    position?: string | undefined;
+                    blendMode?: string | undefined;
+                } | undefined;
+                startBackground?: {
+                    bgType?: "image" | "color" | "video" | "none" | undefined;
+                    color?: string | undefined;
+                    image?: string | undefined;
+                    video?: string | undefined;
+                    videoThumb?: string | undefined;
+                    blur?: number | undefined;
+                    brightness?: number | undefined;
+                    opacity?: number | undefined;
+                    fit?: string | undefined;
+                    position?: string | undefined;
+                    blendMode?: string | undefined;
+                } | undefined;
+                endBackground?: {
+                    bgType?: "image" | "color" | "video" | "none" | undefined;
+                    color?: string | undefined;
+                    image?: string | undefined;
+                    video?: string | undefined;
+                    videoThumb?: string | undefined;
+                    blur?: number | undefined;
+                    brightness?: number | undefined;
+                    opacity?: number | undefined;
+                    fit?: string | undefined;
+                    position?: string | undefined;
+                    blendMode?: string | undefined;
+                } | undefined;
+                startContainer?: {
+                    background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    blur?: number | undefined;
+                    backgroundImage?: string | undefined;
+                    shadowSize?: number | undefined;
+                    shadowColor?: string | undefined;
+                } | undefined;
+                endContainer?: {
+                    background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    blur?: number | undefined;
+                    backgroundImage?: string | undefined;
+                    shadowSize?: number | undefined;
+                    shadowColor?: string | undefined;
+                } | undefined;
+                startTheme?: Record<string, unknown> | undefined;
+                endTheme?: Record<string, unknown> | undefined;
+                startButtonFullWidth?: boolean | undefined;
+                slideDefaults?: Record<string, unknown> | undefined;
+                controlDefaults?: Record<string, Record<string, unknown>> | undefined;
+                input?: {
+                    backgroundColor?: string | undefined;
+                    borderColor?: string | undefined;
+                    fontFamily?: string | undefined;
+                } | undefined;
+                customCSS?: string | undefined;
+                tokens?: Record<string, string> | undefined;
+            } | undefined;
+            settings?: {
+                progressBar?: boolean | undefined;
+                copyright?: boolean | undefined;
+                mainLanguage?: string | undefined;
+                recaptcha?: boolean | undefined;
+            } | undefined;
+        }>;
+        setProps: (props: FormViewerProps) => void;
+        forwardActiveStep: (steps?: number) => void;
+        backActiveStep: (steps?: number) => void;
+        resetActiveStep: () => void;
+    };
+};
+export type FormViewerProps = {
+    /** Режим для редактирования */
+    editing?: boolean;
+    /** Режим для предпросмотра */
+    preview?: boolean;
+    onConfigChange?: (config: ParsedFormConfig) => void;
+    /** Добавит конечный шаг, если его нету */
+    addEndStep?: () => StepData;
+    /** Функция для загрузки файлов пользователем */
+    uploadFileFn?: (file: UploadFileData, optionalArgs?: UploadFileOptionalArgs) => Promise<any>;
+    /** Открыть модалку добавления элемента (только редактор). */
+    onAddElement?: (args: {
+        stepId: string;
+        afterControlId?: string;
+        contentOnly?: boolean;
+    }) => void;
+    /** Открыть справку по переменным (только редактор). */
+    onVariableHelp?: () => void;
+};
+/** Необходимо оборачивать FormViewer в провайдер, иначе будет использоваться `globalFormStore` */
+export declare const FormStoreProvider: ({ children, editing, preview, store, addEndStep, onConfigChange, uploadFileFn, onAddElement, onVariableHelp, }: PropsWithChildren<FormViewerProps> & {
+    /** Можно создать и передать стор снаружи, в ином случае стор создается внутри провайдера */
+    store?: ReturnType<typeof createFormStore>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Возвращает ближайший стор для формы, если таких нет - вернёт слобальный стор */
+export declare const useFormViewerStore: () => {
+    useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
+    api: {
+        applyTheme: (theme: import("..").ThemeData) => void;
+        setEditorHover: (target: EditorSelectionTarget | null) => void;
+        setEditorSelection: (target: EditorSelectionTarget | null) => void;
+        clearEditorSelection: () => void;
+        patchSettingsData: (v: Partial<import("..").SettingsData>) => void;
+        patchThemeData: (v: Partial<import("..").ThemeData>) => void;
+        patchContainerTheme: (v: Partial<import("..").ContainerProperties>) => void;
+        patchTitleProperties: (v: Partial<import("..").TextProperties>) => void;
+        patchSlideTitleProperties: (v: Partial<import("..").TextProperties>) => void;
+        patchCommonFontProperties: (v: Partial<import("..").TextProperties>) => void;
+        setSteps: (steps: StepData[]) => void;
+        addStep: (step: StepData, index?: number) => void;
+        removeStep: (stepId: string) => void;
+        updateStep: (stepId: string, updatedStep: Partial<StepData>) => void;
+        updateControl: <CONTROL extends import("..").Control>(stepId: string, controlId: string, updatedControl: Partial<CONTROL>) => void;
+        reorderSteps: (fromId: string, toId: string) => void;
+        reorderControls: (stepId: string, activeId: string, overId: string) => void;
+        addControl: (stepId: string, newControl: import("..").Control, afterControlId?: string) => void;
+        removeControl: (stepId: string, controlId: string) => void;
+        addCondition: (stepId: string, newCondition: import("..").Condition) => void;
+        updateCondition: (stepId: string, conditionIndex: number, updatedCondition: Partial<import("..").Condition>) => void;
+        removeCondition: (stepId: string, conditionIndex: number) => void;
+        setIsMobile: (isMobile: boolean) => void;
+        setConfig: (config: ParsedFormConfig | null, { silent }?: {
+            silent?: boolean;
+        }) => void;
+        setActiveStepId: (stepId: string) => void;
+        scrollToControl: (controlId: string) => void;
+        getConfig: () => Required<{
+            steps?: {
                 id: string;
                 controls: ({
                     id: string;
@@ -386,7 +776,6 @@ export declare const createFormStore: () => {
                     variableName?: string | undefined;
                     minOptions?: number | undefined;
                     maxOptions?: number | undefined;
-                    showInput?: boolean | undefined;
                     otherOption?: boolean | undefined;
                 } | {
                     id: string;
@@ -421,7 +810,6 @@ export declare const createFormStore: () => {
                     title?: string | undefined;
                     description?: string | undefined;
                     required?: boolean | undefined;
-                    showInput?: boolean | undefined;
                     variableName?: string | undefined;
                     otherOption?: boolean | undefined;
                 } | {
@@ -437,7 +825,6 @@ export declare const createFormStore: () => {
                     icon?: string | undefined;
                     required?: boolean | undefined;
                     variableName?: string | undefined;
-                    showInput?: boolean | undefined;
                 } | {
                     id: string;
                     controlType: "upload";
@@ -522,714 +909,77 @@ export declare const createFormStore: () => {
                     label?: string | undefined;
                 } | {
                     id: string;
-                    controlType: "button";
+                    controlType: "rating";
                     title?: string | undefined;
                     description?: string | undefined;
-                    label?: string | undefined;
-                    link?: string | undefined;
-                    showIconButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
-                    alignButton?: "start" | "center" | "end" | undefined;
-                    buttons?: any[] | undefined;
-                    orientation?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-                    width?: number | undefined;
-                    enableTooltip?: boolean | undefined;
                     required?: boolean | undefined;
-                    fullWidthMobile?: boolean | undefined;
+                    variableName?: string | undefined;
+                    count?: number | undefined;
                 } | {
                     id: string;
-                    controlType: "rating";
+                    controlType: "scale";
                     title?: string | undefined;
                     description?: string | undefined;
+                    icon?: string | undefined;
                     required?: boolean | undefined;
                     variableName?: string | undefined;
-                    count?: number | undefined;
-                })[];
-                trigger: string;
-                isStart?: boolean | undefined;
-                isEnd?: boolean | undefined;
-                autoSubmit?: boolean | undefined;
-                confirmLabel?: string | undefined;
-                media?: {
-                    layout?: "content" | "left" | "right" | "top" | "bottom" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | "background" | undefined;
-                    brightness?: number | undefined;
-                    image?: string | undefined;
-                    video?: string | undefined;
-                    videoThumb?: string | undefined;
-                    color?: string | undefined;
-                    size?: number | undefined;
-                    blur?: number | undefined;
-                } | undefined;
-                conditions?: {
-                    controlId: string;
-                    operator: string;
-                    trigger: string;
-                    compareValue?: string | undefined;
-                }[] | undefined;
-                theme?: {
-                    size?: "sm" | "md" | "lg" | undefined;
-                    align?: "start" | "center" | "end" | undefined;
-                    listStyle?: string | undefined;
-                    borderRadius?: "sm" | "md" | "lg" | undefined;
-                    primaryColor?: string | undefined;
-                    title?: {
-                        fontSize?: number | undefined;
-                        fontWeight?: number | undefined;
-                        fontFamily?: string | undefined;
-                        color?: string | undefined;
-                    } | undefined;
-                    description?: {
-                        fontSize?: number | undefined;
-                        fontWeight?: number | undefined;
-                        fontFamily?: string | undefined;
-                        color?: string | undefined;
-                    } | undefined;
-                    font?: {
-                        fontSize?: number | undefined;
-                        fontWeight?: number | undefined;
-                        fontFamily?: string | undefined;
-                        color?: string | undefined;
-                    } | undefined;
-                    container?: {
-                        color?: string | undefined;
-                        opacity?: number | undefined;
-                        blur?: number | undefined;
-                        backgroundImage?: string | undefined;
-                        shadowSize?: number | undefined;
-                        shadowColor?: string | undefined;
-                    } | undefined;
-                    background?: {
-                        color?: string | undefined;
-                        image?: string | undefined;
-                        blur?: number | undefined;
-                        brightness?: number | undefined;
-                        opacity?: number | undefined;
-                        fit?: string | undefined;
-                        blendMode?: string | undefined;
-                    } | undefined;
-                    input?: {
-                        backgroundColor?: string | undefined;
-                        borderColor?: string | undefined;
-                    } | undefined;
-                    customCSS?: string | undefined;
-                } | undefined;
-                position?: {
-                    x: number;
-                    y: number;
-                } | undefined;
-            } | undefined;
-            theme?: {
-                size?: "sm" | "md" | "lg" | undefined;
-                align?: "start" | "center" | "end" | undefined;
-                listStyle?: string | undefined;
-                borderRadius?: "sm" | "md" | "lg" | undefined;
-                primaryColor?: string | undefined;
-                title?: {
-                    fontSize?: number | undefined;
-                    fontWeight?: number | undefined;
-                    fontFamily?: string | undefined;
-                    color?: string | undefined;
-                } | undefined;
-                description?: {
-                    fontSize?: number | undefined;
-                    fontWeight?: number | undefined;
-                    fontFamily?: string | undefined;
-                    color?: string | undefined;
-                } | undefined;
-                font?: {
-                    fontSize?: number | undefined;
-                    fontWeight?: number | undefined;
-                    fontFamily?: string | undefined;
-                    color?: string | undefined;
-                } | undefined;
-                container?: {
-                    color?: string | undefined;
-                    opacity?: number | undefined;
-                    blur?: number | undefined;
-                    backgroundImage?: string | undefined;
-                    shadowSize?: number | undefined;
-                    shadowColor?: string | undefined;
-                } | undefined;
-                background?: {
-                    color?: string | undefined;
-                    image?: string | undefined;
-                    blur?: number | undefined;
-                    brightness?: number | undefined;
-                    opacity?: number | undefined;
-                    fit?: string | undefined;
-                    blendMode?: string | undefined;
-                } | undefined;
-                input?: {
-                    backgroundColor?: string | undefined;
-                    borderColor?: string | undefined;
-                } | undefined;
-                customCSS?: string | undefined;
-            } | undefined;
-            settings?: {
-                slideAnimation: "vertical" | "horizontal" | "none";
-                freeNav: boolean;
-                layout: "slides" | "list";
-                enterIndicator?: any;
-                progressBar?: boolean | undefined;
-                copyright?: boolean | undefined;
-                navArrows?: boolean | undefined;
-                questionNumber?: boolean | undefined;
-                mainLanguage?: string | undefined;
-                recaptcha?: boolean | undefined;
-            } | undefined;
-        }>;
-        setProps: (props: FormViewerProps) => void;
-        forwardActiveStep: (steps?: number) => void;
-        backActiveStep: (steps?: number) => void;
-        resetActiveStep: () => void;
-    };
-};
-export type FormViewerProps = {
-    /** Режим для редактирования */
-    editing?: boolean;
-    /** Режим для предпросмотра */
-    preview?: boolean;
-    onConfigChange?: (config: ParsedFormConfig) => void;
-    /** Добавит конечный шаг, если его нету */
-    addEndStep?: () => StepData;
-    /** Как отображать форму */
-    layout?: FormViewLayout;
-    /** Функция для загрузки файлов пользователем */
-    uploadFileFn?: (file: UploadFileData, optionalArgs?: UploadFileOptionalArgs) => Promise<any>;
-};
-/** Необходимо оборачивать FormViewer в провайдер, иначе будет использоваться `globalFormStore` */
-export declare const FormStoreProvider: ({ children, editing, preview, store, addEndStep, onConfigChange, uploadFileFn, layout, }: PropsWithChildren<FormViewerProps> & {
-    /** Можно создать и передать стор снаружи, в ином случае стор создается внутри провайдера */
-    store?: ReturnType<typeof createFormStore>;
-}) => import("react/jsx-runtime").JSX.Element;
-/** Возвращает ближайший стор для формы, если таких нет - вернёт слобальный стор */
-export declare const useFormViewerStore: () => {
-    useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<FormStoreState>>;
-    api: {
-        applyTheme: (theme: import("..").ThemeData) => void;
-        setLayout: (layout: FormViewLayout) => void;
-        patchSettingsData: (v: Partial<import("..").SettingsData>) => void;
-        patchThemeData: (v: Partial<import("..").ThemeData>) => void;
-        patchContainerTheme: (v: Partial<import("..").ContainerProperties>) => void;
-        patchTitleProperties: (v: Partial<import("..").TextProperties>) => void;
-        patchDescriptionProperties: (v: Partial<import("..").TextProperties>) => void;
-        patchCommonFontProperties: (v: Partial<import("..").TextProperties>) => void;
-        setSteps: (steps: StepData[]) => void;
-        addStep: (step: StepData, index?: number) => void;
-        removeStep: (stepId: string) => void;
-        updateStep: (stepId: string, updatedStep: Partial<StepData>) => void;
-        updateControl: <CONTROL extends import("..").Control>(stepId: string, controlId: string, updatedControl: Partial<CONTROL>) => void;
-        reorderSteps: (fromId: string, toId: string) => void;
-        reorderControls: (stepId: string, activeId: string, overId: string) => void;
-        addControl: (stepId: string, newControl: import("..").Control) => void;
-        removeControl: (stepId: string, controlId: string) => void;
-        addCondition: (stepId: string, newCondition: import("..").Condition) => void;
-        updateCondition: (stepId: string, conditionIndex: number, updatedCondition: Partial<import("..").Condition>) => void;
-        removeCondition: (stepId: string, conditionIndex: number) => void;
-        setIsMobile: (isMobile: boolean) => void;
-        setConfig: (config: ParsedFormConfig | null, { silent }?: {
-            silent?: boolean;
-        }) => void;
-        setActiveStepId: (stepId: string) => void;
-        setFormLayout: (layout: import("..").FormLayout) => void;
-        scrollToControl: (controlId: string) => void;
-        getConfig: () => Required<{
-            steps?: {
-                id: string;
-                controls: ({
-                    id: string;
-                    controlType: "text";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    minLength?: number | undefined;
-                    maxLength?: number | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "date";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                    minDate?: string | undefined;
-                    maxDate?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "number";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                    min?: number | undefined;
-                    max?: number | undefined;
-                } | {
-                    id: string;
-                    controlType: "multipleChoice";
-                    options: {
-                        label: string;
-                        id: string;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                    minOptions?: number | undefined;
-                    maxOptions?: number | undefined;
-                    showInput?: boolean | undefined;
-                    otherOption?: boolean | undefined;
-                } | {
-                    id: string;
-                    controlType: "slider";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    min?: number | undefined;
-                    max?: number | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "dropdown";
-                    options: {
-                        label: string;
-                        id: string;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "choice";
-                    options: {
-                        label: string;
-                        id: string;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    required?: boolean | undefined;
-                    showInput?: boolean | undefined;
-                    variableName?: string | undefined;
-                    otherOption?: boolean | undefined;
-                } | {
-                    id: string;
-                    controlType: "pictureChoice";
-                    options: {
-                        label: string;
-                        id: string;
-                        image?: string | undefined;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                    showInput?: boolean | undefined;
-                } | {
-                    id: string;
-                    controlType: "upload";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    multiple?: boolean | undefined;
-                    maxFiles?: number | undefined;
-                    minFiles?: number | undefined;
-                    accept?: string[] | undefined;
-                    maxSize?: number | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "location";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "phone";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "email";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "yesNo";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    yesLabel?: string | undefined;
-                    noLabel?: string | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "longText";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    minLength?: number | undefined;
-                    maxLength?: number | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "start";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    showButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
-                    label?: string | undefined;
-                    showIconButton?: boolean | undefined;
-                } | {
-                    id: string;
-                    controlType: "confirm";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    required?: boolean | undefined;
-                    showButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
-                    link?: string | undefined;
-                    label?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "button";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    label?: string | undefined;
-                    link?: string | undefined;
-                    showIconButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
-                    alignButton?: "start" | "center" | "end" | undefined;
-                    buttons?: any[] | undefined;
-                    orientation?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-                    width?: number | undefined;
-                    enableTooltip?: boolean | undefined;
-                    required?: boolean | undefined;
-                    fullWidthMobile?: boolean | undefined;
-                } | {
-                    id: string;
-                    controlType: "rating";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                    count?: number | undefined;
-                })[];
-                trigger: string;
-                isStart?: boolean | undefined;
-                isEnd?: boolean | undefined;
-                autoSubmit?: boolean | undefined;
-                confirmLabel?: string | undefined;
-                media?: {
-                    layout?: "content" | "left" | "right" | "top" | "bottom" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | "background" | undefined;
-                    brightness?: number | undefined;
-                    image?: string | undefined;
-                    video?: string | undefined;
-                    videoThumb?: string | undefined;
-                    color?: string | undefined;
-                    size?: number | undefined;
-                    blur?: number | undefined;
-                } | undefined;
-                conditions?: {
-                    controlId: string;
-                    operator: string;
-                    trigger: string;
-                    compareValue?: string | undefined;
-                }[] | undefined;
-                theme?: {
-                    size?: "sm" | "md" | "lg" | undefined;
-                    align?: "start" | "center" | "end" | undefined;
-                    listStyle?: string | undefined;
-                    borderRadius?: "sm" | "md" | "lg" | undefined;
-                    primaryColor?: string | undefined;
-                    title?: {
-                        fontSize?: number | undefined;
-                        fontWeight?: number | undefined;
-                        fontFamily?: string | undefined;
-                        color?: string | undefined;
-                    } | undefined;
-                    description?: {
-                        fontSize?: number | undefined;
-                        fontWeight?: number | undefined;
-                        fontFamily?: string | undefined;
-                        color?: string | undefined;
-                    } | undefined;
-                    font?: {
-                        fontSize?: number | undefined;
-                        fontWeight?: number | undefined;
-                        fontFamily?: string | undefined;
-                        color?: string | undefined;
-                    } | undefined;
-                    container?: {
-                        color?: string | undefined;
-                        opacity?: number | undefined;
-                        blur?: number | undefined;
-                        backgroundImage?: string | undefined;
-                        shadowSize?: number | undefined;
-                        shadowColor?: string | undefined;
-                    } | undefined;
-                    background?: {
-                        color?: string | undefined;
-                        image?: string | undefined;
-                        blur?: number | undefined;
-                        brightness?: number | undefined;
-                        opacity?: number | undefined;
-                        fit?: string | undefined;
-                        blendMode?: string | undefined;
-                    } | undefined;
-                    input?: {
-                        backgroundColor?: string | undefined;
-                        borderColor?: string | undefined;
-                    } | undefined;
-                    customCSS?: string | undefined;
-                } | undefined;
-                position?: {
-                    x: number;
-                    y: number;
-                } | undefined;
-            }[] | undefined;
-            listStep?: {
-                id: string;
-                controls: ({
-                    id: string;
-                    controlType: "text";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    minLength?: number | undefined;
-                    maxLength?: number | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "date";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                    minDate?: string | undefined;
-                    maxDate?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "number";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                    min?: number | undefined;
-                    max?: number | undefined;
-                } | {
-                    id: string;
-                    controlType: "multipleChoice";
-                    options: {
-                        label: string;
-                        id: string;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                    minOptions?: number | undefined;
-                    maxOptions?: number | undefined;
-                    showInput?: boolean | undefined;
-                    otherOption?: boolean | undefined;
-                } | {
-                    id: string;
-                    controlType: "slider";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
                     min?: number | undefined;
                     max?: number | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "dropdown";
-                    options: {
-                        label: string;
-                        id: string;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "choice";
-                    options: {
-                        label: string;
-                        id: string;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    required?: boolean | undefined;
-                    showInput?: boolean | undefined;
-                    variableName?: string | undefined;
-                    otherOption?: boolean | undefined;
-                } | {
-                    id: string;
-                    controlType: "pictureChoice";
-                    options: {
-                        label: string;
-                        id: string;
-                        image?: string | undefined;
-                    }[];
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                    showInput?: boolean | undefined;
+                    minLabel?: string | undefined;
+                    maxLabel?: string | undefined;
                 } | {
                     id: string;
-                    controlType: "upload";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    multiple?: boolean | undefined;
-                    maxFiles?: number | undefined;
-                    minFiles?: number | undefined;
-                    accept?: string[] | undefined;
-                    maxSize?: number | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "location";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "phone";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "email";
+                    controlType: "heading";
                     title?: string | undefined;
                     description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "yesNo";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    yesLabel?: string | undefined;
-                    noLabel?: string | undefined;
-                    required?: boolean | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "longText";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
-                    required?: boolean | undefined;
-                    placeholder?: string | undefined;
-                    minLength?: number | undefined;
-                    maxLength?: number | undefined;
-                    variableName?: string | undefined;
-                } | {
-                    id: string;
-                    controlType: "start";
-                    title?: string | undefined;
-                    description?: string | undefined;
-                    icon?: string | undefined;
                     required?: boolean | undefined;
-                    showButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
-                    label?: string | undefined;
-                    showIconButton?: boolean | undefined;
+                    fontSize?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                    color?: string | undefined;
                 } | {
                     id: string;
-                    controlType: "confirm";
+                    controlType: "paragraph";
                     title?: string | undefined;
                     description?: string | undefined;
                     required?: boolean | undefined;
-                    showButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
+                    variant?: "paragraph" | "note" | "caption" | undefined;
+                    fontSize?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                    color?: string | undefined;
                     link?: string | undefined;
-                    label?: string | undefined;
                 } | {
                     id: string;
-                    controlType: "button";
+                    controlType: "image";
                     title?: string | undefined;
                     description?: string | undefined;
-                    label?: string | undefined;
-                    link?: string | undefined;
-                    showIconButton?: boolean | undefined;
-                    buttonIcon?: string | undefined;
-                    alignButton?: "start" | "center" | "end" | undefined;
-                    buttons?: any[] | undefined;
-                    orientation?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-                    width?: number | undefined;
-                    enableTooltip?: boolean | undefined;
                     required?: boolean | undefined;
-                    fullWidthMobile?: boolean | undefined;
+                    image?: string | undefined;
+                    width?: "auto" | "50" | "75" | "100" | undefined;
+                    align?: "start" | "center" | "end" | undefined;
+                    radius?: number | undefined;
+                    alt?: string | undefined;
+                    link?: string | undefined;
                 } | {
                     id: string;
-                    controlType: "rating";
+                    controlType: "divider";
                     title?: string | undefined;
                     description?: string | undefined;
                     required?: boolean | undefined;
-                    variableName?: string | undefined;
-                    count?: number | undefined;
+                    lineStyle?: "line" | "dashed" | "dots" | "space" | undefined;
+                    thickness?: number | undefined;
+                    space?: "s" | "m" | "l" | undefined;
+                    color?: string | undefined;
                 })[];
                 trigger: string;
                 isStart?: boolean | undefined;
                 isEnd?: boolean | undefined;
+                title?: string | undefined;
+                headingMigrated?: boolean | undefined;
                 autoSubmit?: boolean | undefined;
                 confirmLabel?: string | undefined;
+                backLabel?: string | undefined;
                 media?: {
-                    layout?: "content" | "left" | "right" | "top" | "bottom" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | "background" | undefined;
+                    layout?: "left" | "right" | undefined;
                     brightness?: number | undefined;
                     image?: string | undefined;
                     video?: string | undefined;
@@ -1250,25 +1000,51 @@ export declare const useFormViewerStore: () => {
                     listStyle?: string | undefined;
                     borderRadius?: "sm" | "md" | "lg" | undefined;
                     primaryColor?: string | undefined;
-                    title?: {
+                    slideTitle?: {
                         fontSize?: number | undefined;
                         fontWeight?: number | undefined;
                         fontFamily?: string | undefined;
                         color?: string | undefined;
+                        lineHeight?: number | undefined;
+                        letterSpacing?: number | undefined;
+                        align?: "start" | "center" | "end" | undefined;
                     } | undefined;
-                    description?: {
+                    title?: {
                         fontSize?: number | undefined;
                         fontWeight?: number | undefined;
                         fontFamily?: string | undefined;
                         color?: string | undefined;
+                        lineHeight?: number | undefined;
+                        letterSpacing?: number | undefined;
+                        align?: "start" | "center" | "end" | undefined;
                     } | undefined;
                     font?: {
                         fontSize?: number | undefined;
                         fontWeight?: number | undefined;
                         fontFamily?: string | undefined;
                         color?: string | undefined;
+                        lineHeight?: number | undefined;
+                        letterSpacing?: number | undefined;
+                        align?: "start" | "center" | "end" | undefined;
                     } | undefined;
+                    buttonFullWidth?: boolean | undefined;
+                    buttonAlign?: "start" | "center" | "end" | "between" | undefined;
+                    buttonShowBack?: boolean | undefined;
+                    buttonLayout?: "horizontal" | "vertical" | undefined;
                     container?: {
+                        background?: {
+                            bgType?: "image" | "color" | "video" | "none" | undefined;
+                            color?: string | undefined;
+                            image?: string | undefined;
+                            video?: string | undefined;
+                            videoThumb?: string | undefined;
+                            blur?: number | undefined;
+                            brightness?: number | undefined;
+                            opacity?: number | undefined;
+                            fit?: string | undefined;
+                            position?: string | undefined;
+                            blendMode?: string | undefined;
+                        } | undefined;
                         color?: string | undefined;
                         opacity?: number | undefined;
                         blur?: number | undefined;
@@ -1277,50 +1053,155 @@ export declare const useFormViewerStore: () => {
                         shadowColor?: string | undefined;
                     } | undefined;
                     background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    startBackground?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    endBackground?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
                         color?: string | undefined;
                         image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
                         blur?: number | undefined;
                         brightness?: number | undefined;
                         opacity?: number | undefined;
                         fit?: string | undefined;
+                        position?: string | undefined;
                         blendMode?: string | undefined;
                     } | undefined;
+                    startContainer?: {
+                        background?: {
+                            bgType?: "image" | "color" | "video" | "none" | undefined;
+                            color?: string | undefined;
+                            image?: string | undefined;
+                            video?: string | undefined;
+                            videoThumb?: string | undefined;
+                            blur?: number | undefined;
+                            brightness?: number | undefined;
+                            opacity?: number | undefined;
+                            fit?: string | undefined;
+                            position?: string | undefined;
+                            blendMode?: string | undefined;
+                        } | undefined;
+                        color?: string | undefined;
+                        opacity?: number | undefined;
+                        blur?: number | undefined;
+                        backgroundImage?: string | undefined;
+                        shadowSize?: number | undefined;
+                        shadowColor?: string | undefined;
+                    } | undefined;
+                    endContainer?: {
+                        background?: {
+                            bgType?: "image" | "color" | "video" | "none" | undefined;
+                            color?: string | undefined;
+                            image?: string | undefined;
+                            video?: string | undefined;
+                            videoThumb?: string | undefined;
+                            blur?: number | undefined;
+                            brightness?: number | undefined;
+                            opacity?: number | undefined;
+                            fit?: string | undefined;
+                            position?: string | undefined;
+                            blendMode?: string | undefined;
+                        } | undefined;
+                        color?: string | undefined;
+                        opacity?: number | undefined;
+                        blur?: number | undefined;
+                        backgroundImage?: string | undefined;
+                        shadowSize?: number | undefined;
+                        shadowColor?: string | undefined;
+                    } | undefined;
+                    startTheme?: Record<string, unknown> | undefined;
+                    endTheme?: Record<string, unknown> | undefined;
+                    startButtonFullWidth?: boolean | undefined;
+                    slideDefaults?: Record<string, unknown> | undefined;
+                    controlDefaults?: Record<string, Record<string, unknown>> | undefined;
                     input?: {
                         backgroundColor?: string | undefined;
                         borderColor?: string | undefined;
+                        fontFamily?: string | undefined;
                     } | undefined;
                     customCSS?: string | undefined;
+                    tokens?: Record<string, string> | undefined;
                 } | undefined;
                 position?: {
                     x: number;
                     y: number;
                 } | undefined;
-            } | undefined;
+            }[] | undefined;
             theme?: {
                 size?: "sm" | "md" | "lg" | undefined;
                 align?: "start" | "center" | "end" | undefined;
                 listStyle?: string | undefined;
                 borderRadius?: "sm" | "md" | "lg" | undefined;
                 primaryColor?: string | undefined;
-                title?: {
+                slideTitle?: {
                     fontSize?: number | undefined;
                     fontWeight?: number | undefined;
                     fontFamily?: string | undefined;
                     color?: string | undefined;
+                    lineHeight?: number | undefined;
+                    letterSpacing?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
                 } | undefined;
-                description?: {
+                title?: {
                     fontSize?: number | undefined;
                     fontWeight?: number | undefined;
                     fontFamily?: string | undefined;
                     color?: string | undefined;
+                    lineHeight?: number | undefined;
+                    letterSpacing?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
                 } | undefined;
                 font?: {
                     fontSize?: number | undefined;
                     fontWeight?: number | undefined;
                     fontFamily?: string | undefined;
                     color?: string | undefined;
+                    lineHeight?: number | undefined;
+                    letterSpacing?: number | undefined;
+                    align?: "start" | "center" | "end" | undefined;
                 } | undefined;
+                buttonFullWidth?: boolean | undefined;
+                buttonAlign?: "start" | "center" | "end" | "between" | undefined;
+                buttonShowBack?: boolean | undefined;
+                buttonLayout?: "horizontal" | "vertical" | undefined;
                 container?: {
+                    background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
                     color?: string | undefined;
                     opacity?: number | undefined;
                     blur?: number | undefined;
@@ -1329,29 +1210,102 @@ export declare const useFormViewerStore: () => {
                     shadowColor?: string | undefined;
                 } | undefined;
                 background?: {
+                    bgType?: "image" | "color" | "video" | "none" | undefined;
+                    color?: string | undefined;
+                    image?: string | undefined;
+                    video?: string | undefined;
+                    videoThumb?: string | undefined;
+                    blur?: number | undefined;
+                    brightness?: number | undefined;
+                    opacity?: number | undefined;
+                    fit?: string | undefined;
+                    position?: string | undefined;
+                    blendMode?: string | undefined;
+                } | undefined;
+                startBackground?: {
+                    bgType?: "image" | "color" | "video" | "none" | undefined;
+                    color?: string | undefined;
+                    image?: string | undefined;
+                    video?: string | undefined;
+                    videoThumb?: string | undefined;
+                    blur?: number | undefined;
+                    brightness?: number | undefined;
+                    opacity?: number | undefined;
+                    fit?: string | undefined;
+                    position?: string | undefined;
+                    blendMode?: string | undefined;
+                } | undefined;
+                endBackground?: {
+                    bgType?: "image" | "color" | "video" | "none" | undefined;
                     color?: string | undefined;
                     image?: string | undefined;
+                    video?: string | undefined;
+                    videoThumb?: string | undefined;
                     blur?: number | undefined;
                     brightness?: number | undefined;
                     opacity?: number | undefined;
                     fit?: string | undefined;
+                    position?: string | undefined;
                     blendMode?: string | undefined;
                 } | undefined;
+                startContainer?: {
+                    background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    blur?: number | undefined;
+                    backgroundImage?: string | undefined;
+                    shadowSize?: number | undefined;
+                    shadowColor?: string | undefined;
+                } | undefined;
+                endContainer?: {
+                    background?: {
+                        bgType?: "image" | "color" | "video" | "none" | undefined;
+                        color?: string | undefined;
+                        image?: string | undefined;
+                        video?: string | undefined;
+                        videoThumb?: string | undefined;
+                        blur?: number | undefined;
+                        brightness?: number | undefined;
+                        opacity?: number | undefined;
+                        fit?: string | undefined;
+                        position?: string | undefined;
+                        blendMode?: string | undefined;
+                    } | undefined;
+                    color?: string | undefined;
+                    opacity?: number | undefined;
+                    blur?: number | undefined;
+                    backgroundImage?: string | undefined;
+                    shadowSize?: number | undefined;
+                    shadowColor?: string | undefined;
+                } | undefined;
+                startTheme?: Record<string, unknown> | undefined;
+                endTheme?: Record<string, unknown> | undefined;
+                startButtonFullWidth?: boolean | undefined;
+                slideDefaults?: Record<string, unknown> | undefined;
+                controlDefaults?: Record<string, Record<string, unknown>> | undefined;
                 input?: {
                     backgroundColor?: string | undefined;
                     borderColor?: string | undefined;
+                    fontFamily?: string | undefined;
                 } | undefined;
                 customCSS?: string | undefined;
+                tokens?: Record<string, string> | undefined;
             } | undefined;
             settings?: {
-                slideAnimation: "vertical" | "horizontal" | "none";
-                freeNav: boolean;
-                layout: "slides" | "list";
-                enterIndicator?: any;
                 progressBar?: boolean | undefined;
                 copyright?: boolean | undefined;
-                navArrows?: boolean | undefined;
-                questionNumber?: boolean | undefined;
                 mainLanguage?: string | undefined;
                 recaptcha?: boolean | undefined;
             } | undefined;