windmill-components 1.89.1 → 1.103.0

package/package/components/apps/editor/component/components.d.ts

@@ -1,13 +1,13 @@
 import type { IntRange } from '../../../../common';
 import type { NARROW_GRID_COLUMNS, WIDE_GRID_COLUMNS } from '../../gridUtils';
-import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon } from 'lucide-svelte';
-import type { Aligned, BaseAppComponent, ComponentCustomCSS, GridItem, StaticRichConfigurations } from '../../types';
+import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive } from 'lucide-svelte';
+import type { Aligned, BaseAppComponent, ComponentCustomCSS, GridItem, RichConfiguration, StaticRichConfigurations } from '../../types';
 import type { Size } from '../../svelte-grid/types';
-import type { ResultAppInput, StaticAppInput } from '../../inputType';
+import type { AppInputSpec, ResultAppInput, StaticAppInput } from '../../inputType';
 export type BaseComponent<T extends string> = {
     type: T;
 };
-type ClickableComponent = {
+export type RecomputeOthersSource = {
     recomputeIds: string[] | undefined;
 };
 export type TextComponent = BaseComponent<'textcomponent'>;
@@ -24,24 +24,28 @@ export type HtmlComponent = BaseComponent<'htmlcomponent'>;
 export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>;
 export type PlotlyComponent = BaseComponent<'plotlycomponent'>;
 export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
-export type ButtonComponent = BaseComponent<'buttoncomponent'> & ClickableComponent;
-export type FormComponent = BaseComponent<'formcomponent'> & ClickableComponent;
-export type FormButtonComponent = BaseComponent<'formbuttoncomponent'> & ClickableComponent;
+export type ButtonComponent = BaseComponent<'buttoncomponent'> & RecomputeOthersSource;
+export type DownloadComponent = BaseComponent<'downloadcomponent'>;
+export type FormComponent = BaseComponent<'formcomponent'> & RecomputeOthersSource;
+export type FormButtonComponent = BaseComponent<'formbuttoncomponent'> & RecomputeOthersSource;
 export type RunFormComponent = BaseComponent<'runformcomponent'>;
 export type BarChartComponent = BaseComponent<'barchartcomponent'>;
 export type PieChartComponent = BaseComponent<'piechartcomponent'>;
+export type ChartJsComponent = BaseComponent<'chartjscomponent'>;
 export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>;
 export type TableComponent = BaseComponent<'tablecomponent'> & {
     actionButtons: (BaseAppComponent & ButtonComponent & GridItem)[];
 };
 export type AggridComponent = BaseComponent<'aggridcomponent'>;
 export type DisplayComponent = BaseComponent<'displaycomponent'>;
+export type LogComponent = BaseComponent<'logcomponent'>;
+export type FlowStatusComponent = BaseComponent<'flowstatuscomponent'>;
 export type ImageComponent = BaseComponent<'imagecomponent'>;
 export type InputComponent = BaseComponent<'inputcomponent'>;
-export type SelectComponent = BaseComponent<'resourceselectcomponent'>;
-export type ResourceSelectComponent = BaseComponent<'selectcomponent'>;
+export type SelectComponent = BaseComponent<'selectcomponent'> & RecomputeOthersSource;
+export type ResourceSelectComponent = BaseComponent<'resourceselectcomponent'> & RecomputeOthersSource;
 export type MultiSelectComponent = BaseComponent<'multiselectcomponent'>;
-export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
+export type CheckboxComponent = BaseComponent<'checkboxcomponent'> & RecomputeOthersSource;
 export type RadioComponent = BaseComponent<'radiocomponent'>;
 export type IconComponent = BaseComponent<'iconcomponent'>;
 export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'>;
@@ -49,6 +53,7 @@ export type VerticalDividerComponent = BaseComponent<'verticaldividercomponent'>
 export type FileInputComponent = BaseComponent<'fileinputcomponent'>;
 export type TabsComponent = BaseComponent<'tabscomponent'> & {
     tabs: string[];
+    disabledTabs: RichConfiguration[];
 };
 export type ContainerComponent = BaseComponent<'containercomponent'>;
 export type DrawerComponent = BaseComponent<'drawercomponent'>;
@@ -60,7 +65,17 @@ export type HorizontalSplitPanesComponent = BaseComponent<'horizontalsplitpanesc
     panes: number[];
 };
 export type PdfComponent = BaseComponent<'pdfcomponent'>;
-export type TypedComponent = DisplayComponent | TextInputComponent | TextareaInputComponent | PasswordInputComponent | EmailInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | ResourceSelectComponent | MultiSelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent | DrawerComponent | MapComponent | VerticalSplitPanesComponent | HorizontalSplitPanesComponent | PdfComponent;
+export type ModalComponent = BaseComponent<'modalcomponent'>;
+export type StepperComponent = BaseComponent<'steppercomponent'> & {
+    tabs: string[];
+};
+export type ConditionalWrapperComponent = BaseComponent<'conditionalwrapper'> & {
+    conditions: RichConfiguration[];
+};
+export type Schemaformcomponent = BaseComponent<'schemaformcomponent'>;
+export type SelectTabComponent = BaseComponent<'selecttabcomponent'>;
+export type SelectStepComponent = BaseComponent<'selectstepcomponent'>;
+export type TypedComponent = DisplayComponent | LogComponent | FlowStatusComponent | TextInputComponent | TextareaInputComponent | PasswordInputComponent | EmailInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | ResourceSelectComponent | MultiSelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent | DrawerComponent | MapComponent | VerticalSplitPanesComponent | HorizontalSplitPanesComponent | PdfComponent | ModalComponent | StepperComponent | Schemaformcomponent | SelectTabComponent | ConditionalWrapperComponent | SelectStepComponent | DownloadComponent | ChartJsComponent;
 export type AppComponent = BaseAppComponent & TypedComponent;
 export type AppComponentDimensions = `${IntRange<1, typeof NARROW_GRID_COLUMNS>}:${number}-${IntRange<1, typeof WIDE_GRID_COLUMNS>}:${number}`;
 export declare function getRecommendedDimensionsByComponent(componentType: AppComponent['type'], column: number): Size;
@@ -80,6 +95,13 @@ export type AppComponentConfig<T extends TypedComponent['type']> = {
     initialData: InitialAppComponent;
     customCss: ComponentCustomCSS<T>;
 };
+export type PresetComponentConfig = {
+    name: string;
+    icon: any;
+    targetComponent: keyof typeof components;
+    configuration: object;
+    type: string;
+};
 export interface InitialAppComponent extends Partial<Aligned> {
     componentInput?: StaticAppInput | ResultAppInput | undefined;
     configuration: StaticRichConfigurations;
@@ -88,6 +110,7 @@ export interface InitialAppComponent extends Partial<Aligned> {
     actionButtons?: boolean;
     tabs?: string[];
     panes?: number[];
+    conditions?: AppInputSpec<'boolean', boolean>[];
 }
 export declare const selectOptions: {
     buttonColorOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
@@ -100,6 +123,8 @@ export declare const selectOptions: {
     localeOptions: string[];
     objectFitOptions: string[];
     splitPanelOptions: string[];
+    formorientationOptions: string[];
+    chartTypeOptions: (keyof import("chart.js").ChartTypeRegistry)[];
 };
 export declare const components: {
     readonly displaycomponent: {
@@ -127,6 +152,54 @@ export declare const components: {
             readonly configuration: {};
         };
     };
+    readonly logcomponent: {
+        readonly name: "Log";
+        readonly icon: typeof Monitor;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly header: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {};
+            readonly componentInput: {
+                readonly type: "runnable";
+                readonly fieldType: "any";
+                readonly fields: {};
+                readonly runnable: undefined;
+            };
+        };
+    };
+    readonly flowstatuscomponent: {
+        readonly name: "Flow Status";
+        readonly icon: typeof Monitor;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly header: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {};
+            readonly componentInput: {
+                readonly type: "runnable";
+                readonly fieldType: "any";
+                readonly fields: {};
+                readonly runnable: undefined;
+            };
+        };
+    };
     readonly containercomponent: {
         readonly name: "Container";
         readonly icon: typeof BoxSelect;
@@ -194,6 +267,10 @@ export declare const components: {
                 readonly style: "";
                 readonly class: "";
             };
+            readonly container: {
+                readonly style: "";
+                readonly class: "";
+            };
         };
         readonly initialData: {
             readonly componentInput: {
@@ -202,7 +279,7 @@ export declare const components: {
                 readonly fields: {};
                 readonly runnable: undefined;
             };
-            readonly recomputeIds: undefined;
+            readonly recomputeIds: true;
             readonly configuration: {
                 readonly label: {
                     readonly type: "static";
@@ -212,9 +289,9 @@ export declare const components: {
                 readonly color: {
                     readonly fieldType: "select";
                     readonly type: "static";
-                    readonly onlyStatic: true;
                     readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
                     readonly value: "blue";
+                    readonly tooltip: "Theses presets can be overwritten with custom styles.";
                 };
                 readonly size: {
                     readonly fieldType: "select";
@@ -228,11 +305,12 @@ export declare const components: {
                     readonly type: "static";
                     readonly onlyStatic: true;
                     readonly value: false;
+                    readonly tooltip: "This will make the button fill the container width and height. Height and width can be overwritten with custom styles.";
                 };
                 readonly disabled: {
                     readonly fieldType: "boolean";
-                    readonly type: "eval";
-                    readonly expr: "false";
+                    readonly type: "static";
+                    readonly value: false;
                 };
                 readonly beforeIcon: {
                     readonly type: "static";
@@ -257,10 +335,12 @@ export declare const components: {
                     readonly tooltip: "Action to perform on success";
                     readonly selected: "none";
                     readonly labels: {
-                        readonly none: "Do nothing";
-                        readonly gotoUrl: "Go to an url";
-                        readonly setTab: "Set the tab of a tabs component";
-                        readonly sendToast: "Display a toast notification";
+                        none: string;
+                        errorOverlay: string;
+                        gotoUrl: string;
+                        setTab: string;
+                        sendToast: string;
+                        sendErrorToast: string;
                     };
                     readonly configuration: {
                         readonly none: {};
@@ -298,6 +378,65 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly value: "";
                                 readonly placeholder: "Hello there";
+                                readonly noVariablePicker: true;
+                            };
+                        };
+                    };
+                };
+                readonly onError: {
+                    readonly type: "oneOf";
+                    readonly tooltip: "Action to perform on error";
+                    readonly selected: "errorOverlay";
+                    readonly labels: {
+                        none: string;
+                        errorOverlay: string;
+                        gotoUrl: string;
+                        setTab: string;
+                        sendToast: string;
+                        sendErrorToast: string;
+                    };
+                    readonly configuration: {
+                        readonly errorOverlay: {};
+                        readonly gotoUrl: {
+                            readonly url: {
+                                readonly tooltip: "Go to the given url, absolute or relative";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "/apps/get/foo";
+                            };
+                            readonly newTab: {
+                                readonly tooltip: "Open the url in a new tab";
+                                readonly fieldType: "boolean";
+                                readonly type: "static";
+                                readonly value: true;
+                            };
+                        };
+                        readonly setTab: {
+                            readonly setTab: {
+                                readonly type: "static";
+                                readonly value: {
+                                    id: string;
+                                    index: number;
+                                }[];
+                                readonly fieldType: "array";
+                                readonly subFieldType: "tab-select";
+                                readonly tooltip: "Set the tabs id and index to go to on error";
+                            };
+                        };
+                        readonly sendErrorToast: {
+                            readonly message: {
+                                readonly tooltip: "The message of the toast to diplay";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "Hello there";
+                            };
+                            readonly appendError: {
+                                readonly tooltip: "Append the error message to the toast";
+                                readonly fieldType: "boolean";
+                                readonly type: "static";
+                                readonly value: true;
                             };
                         };
                     };
@@ -307,8 +446,76 @@ export declare const components: {
             readonly verticalAlignment: import("../../types").VerticalAlignment;
         };
     };
+    readonly downloadcomponent: {
+        readonly name: "Download Button";
+        readonly icon: typeof Download;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly button: {
+                readonly style: "";
+                readonly class: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {
+                readonly source: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "text";
+                    readonly fileUpload: {
+                        readonly accept: "*";
+                        readonly convertTo: "base64";
+                    };
+                    readonly placeholder: "Enter URL or upload file";
+                };
+                readonly filename: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "windmill.file";
+                };
+                readonly label: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Press me";
+                };
+                readonly color: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
+                    readonly value: "blue";
+                };
+                readonly size: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                    readonly value: "xs";
+                };
+                readonly fillContainer: {
+                    readonly fieldType: "boolean";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly value: false;
+                };
+                readonly beforeIcon: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "icon-select";
+                    readonly onlyStatic: true;
+                };
+                readonly afterIcon: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "icon-select";
+                    readonly onlyStatic: true;
+                };
+            };
+            readonly horizontalAlignment: import("../../types").HorizontalAlignment;
+            readonly verticalAlignment: import("../../types").VerticalAlignment;
+        };
+    };
     readonly formcomponent: {
-        readonly name: "Form";
+        readonly name: "Submit form";
         readonly icon: typeof FormInput;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
         readonly customCss: {
@@ -329,7 +536,7 @@ export declare const components: {
                 readonly fields: {};
                 readonly runnable: undefined;
             };
-            readonly recomputeIds: undefined;
+            readonly recomputeIds: true;
             readonly configuration: {
                 readonly label: {
                     readonly type: "static";
@@ -339,7 +546,6 @@ export declare const components: {
                 readonly color: {
                     readonly fieldType: "select";
                     readonly type: "static";
-                    readonly onlyStatic: true;
                     readonly value: "dark";
                     readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
                 };
@@ -355,10 +561,12 @@ export declare const components: {
                     readonly tooltip: "Action to perform on success";
                     readonly selected: "none";
                     readonly labels: {
-                        readonly none: "Do nothing";
-                        readonly gotoUrl: "Go to an url";
-                        readonly setTab: "Set the tab of a tabs component";
-                        readonly sendToast: "Display a toast notification";
+                        none: string;
+                        errorOverlay: string;
+                        gotoUrl: string;
+                        setTab: string;
+                        sendToast: string;
+                        sendErrorToast: string;
                     };
                     readonly configuration: {
                         readonly none: {};
@@ -396,6 +604,65 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly value: "";
                                 readonly placeholder: "Hello there";
+                                readonly noVariablePicker: true;
+                            };
+                        };
+                    };
+                };
+                readonly onError: {
+                    readonly type: "oneOf";
+                    readonly tooltip: "Action to perform on error";
+                    readonly selected: "errorOverlay";
+                    readonly labels: {
+                        none: string;
+                        errorOverlay: string;
+                        gotoUrl: string;
+                        setTab: string;
+                        sendToast: string;
+                        sendErrorToast: string;
+                    };
+                    readonly configuration: {
+                        readonly errorOverlay: {};
+                        readonly gotoUrl: {
+                            readonly url: {
+                                readonly tooltip: "Go to the given url, absolute or relative";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "/apps/get/foo";
+                            };
+                            readonly newTab: {
+                                readonly tooltip: "Open the url in a new tab";
+                                readonly fieldType: "boolean";
+                                readonly type: "static";
+                                readonly value: true;
+                            };
+                        };
+                        readonly setTab: {
+                            readonly setTab: {
+                                readonly type: "static";
+                                readonly value: {
+                                    id: string;
+                                    index: number;
+                                }[];
+                                readonly fieldType: "array";
+                                readonly subFieldType: "tab-select";
+                                readonly tooltip: "Set the tabs id and index to go to on error";
+                            };
+                        };
+                        readonly sendErrorToast: {
+                            readonly message: {
+                                readonly tooltip: "The message of the toast to diplay";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "Hello there";
+                            };
+                            readonly appendError: {
+                                readonly tooltip: "Append the error message to the toast";
+                                readonly fieldType: "boolean";
+                                readonly type: "static";
+                                readonly value: true;
                             };
                         };
                     };
@@ -426,7 +693,7 @@ export declare const components: {
                 readonly fields: {};
                 readonly runnable: undefined;
             };
-            readonly recomputeIds: undefined;
+            readonly recomputeIds: true;
             readonly configuration: {
                 readonly label: {
                     readonly type: "static";
@@ -436,9 +703,9 @@ export declare const components: {
                 readonly color: {
                     readonly fieldType: "select";
                     readonly type: "static";
-                    readonly onlyStatic: true;
                     readonly value: "dark";
                     readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
+                    readonly tooltip: "Theses presets can be overwritten with custom styles.";
                 };
                 readonly size: {
                     readonly fieldType: "select";
@@ -452,10 +719,12 @@ export declare const components: {
                     readonly tooltip: "Action to perform on success";
                     readonly selected: "none";
                     readonly labels: {
-                        readonly none: "Do nothing";
-                        readonly gotoUrl: "Go to an url";
-                        readonly setTab: "Set the tab of a tabs component";
-                        readonly sendToast: "Display a toast notification";
+                        none: string;
+                        errorOverlay: string;
+                        gotoUrl: string;
+                        setTab: string;
+                        sendToast: string;
+                        sendErrorToast: string;
                     };
                     readonly configuration: {
                         readonly none: {};
@@ -493,14 +762,73 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly value: "";
                                 readonly placeholder: "Hello there";
+                                readonly noVariablePicker: true;
+                            };
+                        };
+                    };
+                };
+                readonly onError: {
+                    readonly type: "oneOf";
+                    readonly tooltip: "Action to perform on error";
+                    readonly selected: "errorOverlay";
+                    readonly labels: {
+                        none: string;
+                        errorOverlay: string;
+                        gotoUrl: string;
+                        setTab: string;
+                        sendToast: string;
+                        sendErrorToast: string;
+                    };
+                    readonly configuration: {
+                        readonly errorOverlay: {};
+                        readonly gotoUrl: {
+                            readonly url: {
+                                readonly tooltip: "Go to the given url, absolute or relative";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "/apps/get/foo";
+                            };
+                            readonly newTab: {
+                                readonly tooltip: "Open the url in a new tab";
+                                readonly fieldType: "boolean";
+                                readonly type: "static";
+                                readonly value: true;
+                            };
+                        };
+                        readonly setTab: {
+                            readonly setTab: {
+                                readonly type: "static";
+                                readonly value: {
+                                    id: string;
+                                    index: number;
+                                }[];
+                                readonly fieldType: "array";
+                                readonly subFieldType: "tab-select";
+                                readonly tooltip: "Set the tabs id and index to go to on error";
+                            };
+                        };
+                        readonly sendErrorToast: {
+                            readonly message: {
+                                readonly tooltip: "The message of the toast to diplay";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "Hello there";
+                            };
+                            readonly appendError: {
+                                readonly tooltip: "Append the error message to the toast";
+                                readonly fieldType: "boolean";
+                                readonly type: "static";
+                                readonly value: true;
                             };
                         };
                     };
                 };
                 readonly disabled: {
                     readonly fieldType: "boolean";
-                    readonly type: "eval";
-                    readonly expr: "false";
+                    readonly type: "static";
+                    readonly value: false;
                 };
             };
         };
@@ -541,6 +869,39 @@ export declare const components: {
             };
         };
     };
+    readonly chartjscomponent: {
+        readonly name: "ChartJs";
+        readonly icon: typeof PieChart;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {
+                readonly type: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "select";
+                    readonly selectOptions: (keyof import("chart.js").ChartTypeRegistry)[];
+                    readonly value: "pie";
+                };
+            };
+            readonly componentInput: {
+                readonly type: "static";
+                readonly fieldType: "object";
+                readonly value: {
+                    readonly labels: readonly ["Pie", "Charts", "<3"];
+                    readonly datasets: readonly [{
+                        readonly data: readonly [25, 50, 25];
+                        readonly backgroundColor: readonly ["#FF6384", "#4BC0C0", "#FFCE56"];
+                    }];
+                };
+            };
+        };
+    };
     readonly barchartcomponent: {
         readonly name: "Bar/Line Chart";
         readonly icon: typeof BarChart4;
@@ -840,6 +1201,7 @@ export declare const components: {
         };
         readonly initialData: {
             readonly componentInput: undefined;
+            readonly recomputeIds: true;
             readonly configuration: {
                 readonly label: {
                     readonly type: "static";
@@ -918,9 +1280,11 @@ export declare const components: {
         readonly customCss: {
             readonly input: {
                 readonly style: "";
+                readonly tooltip: "https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md";
             };
         };
         readonly initialData: {
+            readonly recomputeIds: true;
             readonly verticalAlignment: "center";
             readonly componentInput: undefined;
             readonly configuration: {
@@ -931,7 +1295,7 @@ export declare const components: {
                     readonly value: false;
                     readonly onlyStatic: true;
                     readonly tooltip: "Allows user to manually add new value";
-                    readonly customTitle: "Manually add new value ";
+                    readonly customTitle: "User creatable";
                 };
                 readonly placeholder: {
                     readonly type: "static";
@@ -944,6 +1308,13 @@ export declare const components: {
                     readonly value: undefined;
                     readonly fieldType: "object";
                 };
+                readonly fullWidth: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: true;
+                    readonly onlyStatic: true;
+                    readonly tooltip: "Set the width of the options popup to 100% of the select width";
+                };
             };
         };
     };
@@ -952,8 +1323,9 @@ export declare const components: {
         readonly icon: typeof List;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
         readonly customCss: {
-            readonly input: {
+            readonly multiselect: {
                 readonly style: "";
+                readonly tooltip: "See https://multiselect.janosh.dev/#with-css-variables for the available variables";
             };
         };
         readonly initialData: {
@@ -966,6 +1338,21 @@ export declare const components: {
                     readonly value: "Select items";
                     readonly onlyStatic: true;
                 };
+                readonly create: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly onlyStatic: true;
+                    readonly tooltip: "Allows user to manually add new value";
+                    readonly customTitle: "User creatable";
+                };
+                readonly allowOverflow: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: true;
+                    readonly onlyStatic: true;
+                    readonly tooltip: "If too many items, the box overflow its container instead of having an internal scroll";
+                };
             };
         };
     };
@@ -989,6 +1376,13 @@ export declare const components: {
                     readonly value: "Select an item";
                     readonly onlyStatic: true;
                 };
+                readonly fullWidth: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: true;
+                    readonly onlyStatic: true;
+                    readonly tooltip: "Set the width of the options popup to 100% of the select width";
+                };
             };
         };
     };
@@ -1294,6 +1688,7 @@ export declare const components: {
                     readonly onlyStatic: true;
                     readonly selectOptions: string[];
                     readonly value: string;
+                    readonly tooltip: "Tabs can be configured to be either horizontal (tabs), vertical (sidebar), or invisible.";
                 };
             };
             readonly componentInput: undefined;
@@ -1301,6 +1696,28 @@ export declare const components: {
             readonly tabs: string[];
         };
     };
+    readonly steppercomponent: {
+        readonly name: "Stepper";
+        readonly icon: typeof ListOrdered;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {};
+            readonly componentInput: {
+                readonly type: "runnable";
+                readonly fieldType: "any";
+                readonly fields: {};
+                readonly runnable: undefined;
+            };
+            readonly numberOfSubgrids: 2;
+            readonly tabs: string[];
+        };
+    };
     readonly iconcomponent: {
         readonly name: "Icon";
         readonly icon: typeof Smile;
@@ -1324,11 +1741,13 @@ export declare const components: {
                     readonly type: "static";
                     readonly value: "Smile";
                     readonly fieldType: "icon-select";
+                    readonly tooltip: "The icons can be found at https://lucide.dev/";
                 };
                 readonly color: {
                     readonly type: "static";
                     readonly value: "currentColor";
                     readonly fieldType: "color";
+                    readonly tooltip: "The color of the icon can be overridden by the `background-color` property in the styling menu";
                 };
                 readonly size: {
                     readonly type: "static";
@@ -1357,6 +1776,7 @@ export declare const components: {
             readonly divider: {
                 readonly class: "";
                 readonly style: "";
+                readonly tooltip: "`background-color` and `height` are handled by the component configuration";
             };
         };
         readonly initialData: {
@@ -1368,12 +1788,14 @@ export declare const components: {
                     readonly value: 2;
                     readonly fieldType: "number";
                     readonly onlyStatic: true;
+                    readonly tooltip: "The height of the divider in pixels can be overridden by the `height` property in the styling menu";
                 };
                 readonly color: {
                     readonly type: "static";
                     readonly value: "#00000060";
                     readonly fieldType: "color";
                     readonly onlyStatic: true;
+                    readonly tooltip: "The color of the divider can be overridden by the `background-color` property in the styling menu";
                 };
             };
         };
@@ -1401,12 +1823,14 @@ export declare const components: {
                     readonly value: 2;
                     readonly fieldType: "number";
                     readonly onlyStatic: true;
+                    readonly tooltip: "The width of the divider in pixels can be overridden by the `width` property in the styling menu";
                 };
                 readonly color: {
                     readonly type: "static";
                     readonly value: "#00000060";
                     readonly fieldType: "color";
                     readonly onlyStatic: true;
+                    readonly tooltip: "The color of the divider can be overridden by the `background-color` property in the styling menu";
                 };
             };
         };
@@ -1474,6 +1898,7 @@ export declare const components: {
                     readonly onlyStatic: true;
                     readonly selectOptions: string[];
                     readonly value: "contain";
+                    readonly tooltip: "The image fit property can be overridden by the `object-fit` property in the styling menu";
                 };
                 readonly altText: {
                     readonly type: "static";
@@ -1490,6 +1915,10 @@ export declare const components: {
         readonly icon: typeof SidebarClose;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
         readonly customCss: {
+            readonly button: {
+                readonly style: "";
+                readonly class: "";
+            };
             readonly container: {
                 readonly class: "";
                 readonly style: "";
@@ -1513,9 +1942,9 @@ export declare const components: {
                 readonly color: {
                     readonly fieldType: "select";
                     readonly type: "static";
-                    readonly onlyStatic: true;
                     readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
                     readonly value: "blue";
+                    readonly tooltip: "The color of the button can be overridden by the `background-color` property in the styling menu";
                 };
                 readonly size: {
                     readonly fieldType: "select";
@@ -1529,11 +1958,12 @@ export declare const components: {
                     readonly type: "static";
                     readonly onlyStatic: true;
                     readonly value: false;
+                    readonly tooltip: "This will make the button fill the container width and height. Height and width can be overwritten with custom styles.";
                 };
                 readonly disabled: {
                     readonly fieldType: "boolean";
-                    readonly type: "eval";
-                    readonly expr: "false";
+                    readonly type: "static";
+                    readonly value: false;
                 };
             };
             readonly componentInput: undefined;
@@ -1627,6 +2057,7 @@ export declare const components: {
                         readonly accept: "application/pdf";
                         readonly convertTo: "base64";
                     };
+                    readonly placeholder: "Enter URL or upload file";
                 };
                 readonly zoom: {
                     readonly fieldType: "number";
@@ -1636,8 +2067,242 @@ export declare const components: {
             };
         };
     };
+    readonly modalcomponent: {
+        readonly name: "Modal";
+        readonly icon: typeof SidebarClose;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly button: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly buttonContainer: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly popup: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly horizontalAlignment: "center";
+            readonly verticalAlignment: "center";
+            readonly configuration: {
+                readonly modalTitle: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Modal title";
+                    readonly onlyStatic: true;
+                };
+                readonly buttonLabel: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Press me";
+                };
+                readonly buttonColor: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
+                    readonly value: "blue";
+                    readonly tooltip: "Theses presets can be overwritten with custom styles.";
+                };
+                readonly buttonSize: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                    readonly value: "xs";
+                };
+                readonly buttonFillContainer: {
+                    readonly fieldType: "boolean";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly value: false;
+                    readonly tooltip: "This will make the button fill the container width and height. Height and width can be overwritten with custom styles.";
+                };
+                readonly buttonDisabled: {
+                    readonly fieldType: "boolean";
+                    readonly type: "static";
+                    readonly value: false;
+                };
+            };
+            readonly componentInput: undefined;
+            readonly numberOfSubgrids: 1;
+        };
+    };
+    readonly schemaformcomponent: {
+        readonly name: "Form";
+        readonly icon: typeof FileText;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly label: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly description: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly componentInput: {
+                readonly type: "static";
+                readonly fieldType: "schema";
+                readonly value: {
+                    readonly properties: {
+                        readonly first_name: {
+                            readonly type: "string";
+                            readonly description: "your name";
+                            readonly default: "default";
+                        };
+                    };
+                    readonly required: readonly [];
+                };
+            };
+            readonly configuration: {
+                readonly displayType: {
+                    readonly fieldType: "boolean";
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly onlyStatic: true;
+                    readonly tooltip: "This will diplay the type and/or the format on the field next to the label.";
+                };
+                readonly largeGap: {
+                    readonly fieldType: "boolean";
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly onlyStatic: true;
+                    readonly tooltip: "This will add a large gap between the form elements.";
+                };
+            };
+        };
+    };
+    readonly selecttabcomponent: {
+        readonly name: "Select Tab";
+        readonly icon: typeof List;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly tabRow: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly allTabs: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly selectedTab: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly items: StaticAppInput;
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: {
+                        value: string;
+                        label: string;
+                    } | undefined;
+                    readonly fieldType: "object";
+                };
+                readonly tabSize: {
+                    readonly type: "static";
+                    readonly value: "sm";
+                    readonly fieldType: "select";
+                    readonly selectOptions: string[];
+                    readonly tooltip: "Size of the tabs can be overwritten with custom styles using `font-size` in CSS or using tailwind classes.";
+                };
+            };
+        };
+    };
+    readonly selectstepcomponent: {
+        readonly name: "Select Step";
+        readonly icon: typeof List;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly tabRow: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly allTabs: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly selectedTab: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly items: StaticAppInput;
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: {
+                        value: string;
+                        label: string;
+                    } | undefined;
+                    readonly fieldType: "object";
+                };
+            };
+        };
+    };
+    readonly conditionalwrapper: {
+        readonly name: "Conditional tabs";
+        readonly icon: typeof Split;
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-4:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-8:${number}` | `2:${number}-9:${number}` | `2:${number}-10:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-4:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-8:${number}` | `1:${number}-9:${number}` | `1:${number}-10:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-4:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-8:${number}` | `3:${number}-9:${number}` | `3:${number}-10:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {};
+            readonly componentInput: undefined;
+            readonly numberOfSubgrids: 2;
+            readonly conditions: AppInputSpec<"boolean", boolean>[];
+        };
+    };
+};
+export declare const presetComponents: {
+    sidebartabscomponent: {
+        name: string;
+        icon: typeof PanelLeft;
+        targetComponent: "tabscomponent";
+        configuration: {
+            tabsKind: {
+                value: string;
+            };
+        };
+        type: string;
+    };
+    invisibletabscomponent: {
+        name: string;
+        icon: typeof PanelTopInactive;
+        targetComponent: "tabscomponent";
+        configuration: {
+            tabsKind: {
+                value: string;
+            };
+        };
+        type: string;
+    };
+};
+export declare const presets: {
+    [Property in keyof typeof presetComponents]: PresetComponentConfig;
 };
 export declare const ccomponents: {
     [Property in keyof typeof components]: AppComponentConfig<Property>;
 };
-export {};