windmill-components 1.86.0 → 1.89.0

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

@@ -0,0 +1,1643 @@
+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 type { Size } from '../../svelte-grid/types';
+import type { ResultAppInput, StaticAppInput } from '../../inputType';
+export type BaseComponent<T extends string> = {
+    type: T;
+};
+type ClickableComponent = {
+    recomputeIds: string[] | undefined;
+};
+export type TextComponent = BaseComponent<'textcomponent'>;
+export type TextInputComponent = BaseComponent<'textinputcomponent'>;
+export type TextareaInputComponent = BaseComponent<'textareainputcomponent'>;
+export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
+export type EmailInputComponent = BaseComponent<'emailinputcomponent'>;
+export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
+export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
+export type CurrencyComponent = BaseComponent<'currencycomponent'>;
+export type SliderComponent = BaseComponent<'slidercomponent'>;
+export type RangeComponent = BaseComponent<'rangecomponent'>;
+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 RunFormComponent = BaseComponent<'runformcomponent'>;
+export type BarChartComponent = BaseComponent<'barchartcomponent'>;
+export type PieChartComponent = BaseComponent<'piechartcomponent'>;
+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 ImageComponent = BaseComponent<'imagecomponent'>;
+export type InputComponent = BaseComponent<'inputcomponent'>;
+export type SelectComponent = BaseComponent<'resourceselectcomponent'>;
+export type ResourceSelectComponent = BaseComponent<'selectcomponent'>;
+export type MultiSelectComponent = BaseComponent<'multiselectcomponent'>;
+export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
+export type RadioComponent = BaseComponent<'radiocomponent'>;
+export type IconComponent = BaseComponent<'iconcomponent'>;
+export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'>;
+export type VerticalDividerComponent = BaseComponent<'verticaldividercomponent'>;
+export type FileInputComponent = BaseComponent<'fileinputcomponent'>;
+export type TabsComponent = BaseComponent<'tabscomponent'> & {
+    tabs: string[];
+};
+export type ContainerComponent = BaseComponent<'containercomponent'>;
+export type DrawerComponent = BaseComponent<'drawercomponent'>;
+export type MapComponent = BaseComponent<'mapcomponent'>;
+export type VerticalSplitPanesComponent = BaseComponent<'verticalsplitpanescomponent'> & {
+    panes: number[];
+};
+export type HorizontalSplitPanesComponent = BaseComponent<'horizontalsplitpanescomponent'> & {
+    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 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;
+export type AppComponentConfig<T extends TypedComponent['type']> = {
+    name: string;
+    icon: any;
+    /**
+     * Dimensions key formula:
+     * [**mobile width**]:[**mobile height**]-[**desktop width**]:[**desktop height**]
+     */
+    dims: AppComponentDimensions;
+    /**
+     * If `true` then the wrapper will allow items to flow outside of it's borders.
+     *
+     * *For example when the component has a popup like `Select`*
+     */
+    initialData: InitialAppComponent;
+    customCss: ComponentCustomCSS<T>;
+};
+export interface InitialAppComponent extends Partial<Aligned> {
+    componentInput?: StaticAppInput | ResultAppInput | undefined;
+    configuration: StaticRichConfigurations;
+    numberOfSubgrids?: number;
+    recomputeIds?: boolean;
+    actionButtons?: boolean;
+    tabs?: string[];
+    panes?: number[];
+}
+export declare const selectOptions: {
+    buttonColorOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
+    tabsKindOptions: string[];
+    buttonSizeOptions: string[];
+    tableSearchOptions: string[];
+    chartThemeOptions: string[];
+    textStyleOptions: string[];
+    currencyOptions: string[];
+    localeOptions: string[];
+    objectFitOptions: string[];
+    splitPanelOptions: string[];
+};
+export declare const components: {
+    readonly displaycomponent: {
+        readonly name: "Rich Result";
+        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 componentInput: {
+                readonly type: "static";
+                readonly fieldType: "object";
+                readonly value: {
+                    readonly foo: 42;
+                };
+            };
+            readonly configuration: {};
+        };
+    };
+    readonly containercomponent: {
+        readonly name: "Container";
+        readonly icon: typeof BoxSelect;
+        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: 1;
+        };
+    };
+    readonly textcomponent: {
+        readonly name: "Text";
+        readonly icon: typeof Type;
+        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 text: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly horizontalAlignment: "left";
+            readonly verticalAlignment: "top";
+            readonly componentInput: {
+                readonly type: "static";
+                readonly fieldType: "template";
+                readonly value: "Hello ${ctx.username}";
+            };
+            readonly configuration: {
+                readonly style: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                    readonly value: "Title" | "Subtitle" | "Body" | "Label" | "Caption";
+                };
+                readonly copyButton: {
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly fieldType: "boolean";
+                    readonly onlyStatic: true;
+                };
+                readonly tooltip: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                    readonly tooltip: "Tooltip text if not empty";
+                };
+            };
+        };
+    };
+    readonly buttoncomponent: {
+        readonly name: "Button";
+        readonly icon: typeof Inspect;
+        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 componentInput: {
+                readonly type: "runnable";
+                readonly fieldType: "any";
+                readonly fields: {};
+                readonly runnable: undefined;
+            };
+            readonly recomputeIds: undefined;
+            readonly configuration: {
+                readonly label: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Press me";
+                };
+                readonly color: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    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 disabled: {
+                    readonly fieldType: "boolean";
+                    readonly type: "eval";
+                    readonly expr: "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 triggerOnAppLoad: {
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly fieldType: "boolean";
+                    readonly onlyStatic: true;
+                };
+                readonly onSuccess: {
+                    readonly type: "oneOf";
+                    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";
+                    };
+                    readonly configuration: {
+                        readonly none: {};
+                        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 success";
+                            };
+                        };
+                        readonly sendToast: {
+                            readonly message: {
+                                readonly tooltip: "The message of the toast to diplay";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "Hello there";
+                            };
+                        };
+                    };
+                };
+            };
+            readonly horizontalAlignment: import("../../types").HorizontalAlignment;
+            readonly verticalAlignment: import("../../types").VerticalAlignment;
+        };
+    };
+    readonly formcomponent: {
+        readonly name: "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: {
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly button: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly horizontalAlignment: "center";
+            readonly componentInput: {
+                readonly type: "runnable";
+                readonly fieldType: "any";
+                readonly fields: {};
+                readonly runnable: undefined;
+            };
+            readonly recomputeIds: undefined;
+            readonly configuration: {
+                readonly label: {
+                    readonly type: "static";
+                    readonly value: "Submit";
+                    readonly fieldType: "text";
+                };
+                readonly color: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly value: "dark";
+                    readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
+                };
+                readonly size: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly value: "xs";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                };
+                readonly onSuccess: {
+                    readonly type: "oneOf";
+                    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";
+                    };
+                    readonly configuration: {
+                        readonly none: {};
+                        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 success";
+                            };
+                        };
+                        readonly sendToast: {
+                            readonly message: {
+                                readonly tooltip: "The message of the toast to diplay";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "Hello there";
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+    readonly formbuttoncomponent: {
+        readonly name: "Modal Form";
+        readonly icon: typeof PlusSquare;
+        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 popup: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly horizontalAlignment: "center";
+            readonly verticalAlignment: "center";
+            readonly componentInput: {
+                readonly type: "runnable";
+                readonly fieldType: "any";
+                readonly fields: {};
+                readonly runnable: undefined;
+            };
+            readonly recomputeIds: undefined;
+            readonly configuration: {
+                readonly label: {
+                    readonly type: "static";
+                    readonly value: "Open popup";
+                    readonly fieldType: "text";
+                };
+                readonly color: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly value: "dark";
+                    readonly selectOptions: ("blue" | "red" | "dark" | "light" | "green" | "gray" | "none")[];
+                };
+                readonly size: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly value: "xs";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                };
+                readonly onSuccess: {
+                    readonly type: "oneOf";
+                    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";
+                    };
+                    readonly configuration: {
+                        readonly none: {};
+                        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 success";
+                            };
+                        };
+                        readonly sendToast: {
+                            readonly message: {
+                                readonly tooltip: "The message of the toast to diplay";
+                                readonly fieldType: "text";
+                                readonly type: "static";
+                                readonly value: "";
+                                readonly placeholder: "Hello there";
+                            };
+                        };
+                    };
+                };
+                readonly disabled: {
+                    readonly fieldType: "boolean";
+                    readonly type: "eval";
+                    readonly expr: "false";
+                };
+            };
+        };
+    };
+    readonly piechartcomponent: {
+        readonly name: "Pie Chart";
+        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 theme: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "select";
+                    readonly selectOptions: string[];
+                    readonly value: "theme1";
+                };
+                readonly doughnutStyle: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                };
+            };
+            readonly componentInput: {
+                readonly type: "static";
+                readonly fieldType: "object";
+                readonly value: {
+                    readonly data: readonly [25, 50, 25];
+                    readonly labels: readonly ["Pie", "Charts", "<3"];
+                };
+            };
+        };
+    };
+    readonly barchartcomponent: {
+        readonly name: "Bar/Line Chart";
+        readonly icon: typeof BarChart4;
+        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 theme: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "select";
+                    readonly selectOptions: string[];
+                    readonly value: "theme1";
+                };
+                readonly line: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                };
+            };
+            readonly componentInput: {
+                readonly type: "static";
+                readonly fieldType: "object";
+                readonly value: {
+                    readonly data: readonly [25, 50, 25];
+                    readonly labels: readonly ["Bar", "Charts", "<3"];
+                };
+            };
+        };
+    };
+    readonly htmlcomponent: {
+        readonly name: "HTML";
+        readonly icon: typeof Code2;
+        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 componentInput: {
+                readonly type: "static";
+                readonly fieldType: "template";
+                readonly value: "<img\nsrc=\"https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80\"\n>\n<h1 class=\"absolute top-4 left-2 text-white\">\nHello ${ctx.username}\n</h1>";
+            };
+            readonly configuration: {};
+        };
+    };
+    readonly vegalitecomponent: {
+        readonly name: "Vega Lite";
+        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 initialData: {
+            readonly componentInput: {
+                readonly type: "static";
+                readonly fieldType: "object";
+                readonly value: {
+                    readonly data: {
+                        readonly values: readonly [{
+                            readonly a: "A";
+                            readonly b: 28;
+                        }, {
+                            readonly a: "B";
+                            readonly b: 55;
+                        }, {
+                            readonly a: "C";
+                            readonly b: 43;
+                        }, {
+                            readonly a: "D";
+                            readonly b: 91;
+                        }];
+                    };
+                    readonly mark: "bar";
+                    readonly encoding: {
+                        readonly x: {
+                            readonly field: "a";
+                            readonly type: "ordinal";
+                        };
+                        readonly y: {
+                            readonly field: "b";
+                            readonly type: "quantitative";
+                        };
+                    };
+                };
+            };
+            readonly configuration: {
+                readonly canvas: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly tooltip: "Use the canvas renderer instead of the svg one for more interactive plots";
+                };
+            };
+        };
+    };
+    readonly plotlycomponent: {
+        readonly name: "Plotly";
+        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 initialData: {
+            readonly componentInput: {
+                readonly type: "static";
+                readonly fieldType: "object";
+                readonly value: {
+                    readonly type: "bar";
+                    readonly x: readonly [1, 2, 3, 4];
+                    readonly y: readonly [5, 10, 2, 8];
+                    readonly marker: {
+                        readonly color: "#C8A2C8";
+                        readonly line: {
+                            readonly width: 2.5;
+                        };
+                    };
+                };
+            };
+            readonly configuration: {
+                readonly layout: {
+                    readonly type: "static";
+                    readonly fieldType: "object";
+                    readonly value: {};
+                    readonly tooltip: "Layout options for the plot. See https://plotly.com/javascript/reference/layout/ for more information";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly timeseriescomponent: {
+        readonly name: "Timeseries";
+        readonly icon: typeof GripHorizontal;
+        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 logarithmicScale: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                };
+                readonly zoomable: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                };
+                readonly pannable: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                };
+            };
+            readonly componentInput: StaticAppInput;
+        };
+    };
+    readonly scatterchartcomponent: {
+        readonly name: "Scatter Chart";
+        readonly icon: typeof GripHorizontal;
+        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 zoomable: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                };
+                readonly pannable: {
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                };
+            };
+            readonly componentInput: StaticAppInput;
+        };
+    };
+    readonly tablecomponent: {
+        readonly name: "Table";
+        readonly icon: typeof Table2;
+        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 tableHeader: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly tableBody: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly tableFooter: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {
+                readonly search: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                    readonly value: string;
+                    readonly tooltip: "Search can be configured in the following ways: Disabled: The search is disabled,By Runnable: The search is done in the backend, or by component: The search is done in the frontend.";
+                };
+                readonly pagination: {
+                    readonly type: "oneOf";
+                    readonly selected: "auto";
+                    readonly labels: {
+                        readonly auto: "Auto";
+                        readonly manual: "Manual";
+                    };
+                    readonly configuration: {
+                        readonly auto: {
+                            readonly pageSize: {
+                                readonly type: "static";
+                                readonly fieldType: "number";
+                                readonly value: 20;
+                                readonly onlyStatic: true;
+                                readonly tooltip: "Number of rows per page";
+                            };
+                        };
+                        readonly manual: {
+                            readonly pageCount: {
+                                readonly type: "static";
+                                readonly fieldType: "number";
+                                readonly value: -1;
+                                readonly tooltip: "Number of pages (-1 if you do not know)";
+                            };
+                        };
+                    };
+                };
+            };
+            readonly componentInput: StaticAppInput;
+            readonly actionButtons: true;
+        };
+    };
+    readonly aggridcomponent: {
+        readonly name: "AgGrid Table";
+        readonly icon: typeof Table2;
+        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 initialData: {
+            readonly configuration: {
+                readonly columnDefs: StaticAppInput;
+                readonly allEditable: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly onlyStatic: true;
+                    readonly tooltip: "Configure all columns as Editable by users";
+                };
+                readonly pagination: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly onlyStatic: true;
+                };
+            };
+            readonly componentInput: StaticAppInput;
+        };
+    };
+    readonly checkboxcomponent: {
+        readonly name: "Toggle";
+        readonly icon: typeof ToggleLeft;
+        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 text: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly label: {
+                    readonly type: "static";
+                    readonly value: "Label";
+                    readonly fieldType: "text";
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "boolean";
+                };
+            };
+            readonly horizontalAlignment: import("../../types").HorizontalAlignment;
+            readonly verticalAlignment: import("../../types").VerticalAlignment;
+        };
+    };
+    readonly textinputcomponent: {
+        readonly name: "Text Input";
+        readonly icon: typeof TextCursorInput;
+        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 class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly value: "Type...";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "text";
+                };
+            };
+        };
+    };
+    readonly textareainputcomponent: {
+        readonly name: "Textarea";
+        readonly icon: typeof TextCursorInput;
+        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 class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly value: "Type...";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "text";
+                };
+            };
+        };
+    };
+    readonly selectcomponent: {
+        readonly name: "Select";
+        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 style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly items: StaticAppInput;
+                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: "Manually add new value ";
+                };
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Select an item";
+                    readonly onlyStatic: true;
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "object";
+                };
+            };
+        };
+    };
+    readonly multiselectcomponent: {
+        readonly name: "Multi Select";
+        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 style: "";
+            };
+        };
+        readonly initialData: {
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly items: StaticAppInput;
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Select items";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly resourceselectcomponent: {
+        readonly name: "Resource Select";
+        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 style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly items: StaticAppInput;
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Select an item";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly numberinputcomponent: {
+        readonly name: "Number";
+        readonly icon: typeof Binary;
+        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 class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly value: "Type...";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "number";
+                };
+                readonly min: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "number";
+                };
+                readonly max: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "number";
+                };
+                readonly step: {
+                    readonly type: "static";
+                    readonly value: 1;
+                    readonly fieldType: "number";
+                    readonly tooltip: "Spread between each number suggestion";
+                };
+            };
+        };
+    };
+    readonly currencycomponent: {
+        readonly name: "Currency";
+        readonly icon: typeof DollarSign;
+        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 class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "number";
+                };
+                readonly isNegativeAllowed: {
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly fieldType: "boolean";
+                    readonly onlyStatic: true;
+                };
+                readonly currency: {
+                    readonly type: "static";
+                    readonly value: "USD";
+                    readonly fieldType: "select";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                };
+                readonly locale: {
+                    readonly type: "static";
+                    readonly value: "en-US";
+                    readonly fieldType: "select";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                    readonly tooltip: "Currency format";
+                };
+            };
+        };
+    };
+    readonly slidercomponent: {
+        readonly name: "Slider";
+        readonly icon: typeof SlidersHorizontal;
+        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 bar: {
+                readonly style: "";
+            };
+            readonly handle: {
+                readonly style: "";
+            };
+            readonly limits: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly value: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly min: {
+                    readonly type: "static";
+                    readonly value: 0;
+                    readonly fieldType: "number";
+                    readonly onlyStatic: true;
+                };
+                readonly max: {
+                    readonly type: "static";
+                    readonly value: 42;
+                    readonly fieldType: "number";
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: 20;
+                    readonly fieldType: "number";
+                };
+                readonly step: {
+                    readonly type: "static";
+                    readonly value: 1;
+                    readonly fieldType: "number";
+                    readonly tooltip: "Spread between each number suggestion";
+                };
+            };
+        };
+    };
+    readonly rangecomponent: {
+        readonly name: "Range";
+        readonly icon: typeof SlidersHorizontal;
+        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 handles: {
+                readonly style: "";
+            };
+            readonly bar: {
+                readonly style: "";
+            };
+            readonly limits: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly values: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly min: {
+                    readonly type: "static";
+                    readonly value: 0;
+                    readonly fieldType: "number";
+                };
+                readonly max: {
+                    readonly type: "static";
+                    readonly value: 42;
+                    readonly fieldType: "number";
+                };
+                readonly defaultLow: {
+                    readonly type: "static";
+                    readonly value: 10;
+                    readonly fieldType: "number";
+                };
+                readonly defaultHigh: {
+                    readonly type: "static";
+                    readonly value: 20;
+                    readonly fieldType: "number";
+                };
+                readonly step: {
+                    readonly type: "static";
+                    readonly value: 1;
+                    readonly fieldType: "number";
+                    readonly tooltip: "Spread between each number suggestion";
+                };
+            };
+        };
+    };
+    readonly passwordinputcomponent: {
+        readonly name: "Password";
+        readonly icon: typeof Lock;
+        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 class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly value: "Password";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly emailinputcomponent: {
+        readonly name: "Email Input";
+        readonly icon: typeof AtSignIcon;
+        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 class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly placeholder: {
+                    readonly type: "static";
+                    readonly value: "Email";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "text";
+                };
+            };
+        };
+    };
+    readonly dateinputcomponent: {
+        readonly name: "Date";
+        readonly icon: typeof Calendar;
+        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 class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly minDate: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "date";
+                };
+                readonly maxDate: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "date";
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "date";
+                };
+            };
+        };
+    };
+    readonly tabscomponent: {
+        readonly name: "Tabs";
+        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 tabRow: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly allTabs: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly selectedTab: {
+                readonly class: "";
+                readonly style: "";
+            };
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly configuration: {
+                readonly tabsKind: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                    readonly value: string;
+                };
+            };
+            readonly componentInput: undefined;
+            readonly numberOfSubgrids: 2;
+            readonly tabs: string[];
+        };
+    };
+    readonly iconcomponent: {
+        readonly name: "Icon";
+        readonly icon: typeof Smile;
+        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 icon: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly horizontalAlignment: "center";
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly icon: {
+                    readonly type: "static";
+                    readonly value: "Smile";
+                    readonly fieldType: "icon-select";
+                };
+                readonly color: {
+                    readonly type: "static";
+                    readonly value: "currentColor";
+                    readonly fieldType: "color";
+                };
+                readonly size: {
+                    readonly type: "static";
+                    readonly value: 24;
+                    readonly fieldType: "number";
+                    readonly onlyStatic: true;
+                };
+                readonly strokeWidth: {
+                    readonly type: "static";
+                    readonly value: 2;
+                    readonly fieldType: "number";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly horizontaldividercomponent: {
+        readonly name: "Divider X";
+        readonly icon: typeof SeparatorHorizontal;
+        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 divider: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly size: {
+                    readonly type: "static";
+                    readonly value: 2;
+                    readonly fieldType: "number";
+                    readonly onlyStatic: true;
+                };
+                readonly color: {
+                    readonly type: "static";
+                    readonly value: "#00000060";
+                    readonly fieldType: "color";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly verticaldividercomponent: {
+        readonly name: "Divider Y";
+        readonly icon: typeof SeparatorVertical;
+        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 divider: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly horizontalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly size: {
+                    readonly type: "static";
+                    readonly value: 2;
+                    readonly fieldType: "number";
+                    readonly onlyStatic: true;
+                };
+                readonly color: {
+                    readonly type: "static";
+                    readonly value: "#00000060";
+                    readonly fieldType: "color";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly fileinputcomponent: {
+        readonly name: "File Input";
+        readonly icon: typeof Paperclip;
+        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 componentInput: undefined;
+            readonly configuration: {
+                readonly acceptedFileTypes: {
+                    readonly type: "static";
+                    readonly value: string[];
+                    readonly fieldType: "array";
+                    readonly onlyStatic: true;
+                };
+                readonly allowMultiple: {
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly fieldType: "boolean";
+                    readonly tooltip: "If allowed, the user will be able to select more than one file";
+                    readonly onlyStatic: true;
+                };
+                readonly text: {
+                    readonly type: "static";
+                    readonly value: "Drag and drop files or click to select them";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                };
+            };
+        };
+    };
+    readonly imagecomponent: {
+        readonly name: "Image";
+        readonly icon: typeof Image;
+        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 image: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly source: {
+                    readonly type: "static";
+                    readonly value: "/logo.svg";
+                    readonly fieldType: "text";
+                    readonly fileUpload: {
+                        readonly accept: "image/*";
+                        readonly convertTo: "base64";
+                    };
+                };
+                readonly imageFit: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    readonly selectOptions: string[];
+                    readonly value: "contain";
+                };
+                readonly altText: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "text";
+                    readonly onlyStatic: true;
+                    readonly tooltip: "This text will appear if the image can't be loaded for any reason";
+                };
+            };
+        };
+    };
+    readonly drawercomponent: {
+        readonly name: "Drawer";
+        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 container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly horizontalAlignment: "center";
+            readonly verticalAlignment: "center";
+            readonly configuration: {
+                readonly drawerTitle: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Drawer title";
+                    readonly onlyStatic: true;
+                };
+                readonly label: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "Press me";
+                };
+                readonly color: {
+                    readonly fieldType: "select";
+                    readonly type: "static";
+                    readonly onlyStatic: true;
+                    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 disabled: {
+                    readonly fieldType: "boolean";
+                    readonly type: "eval";
+                    readonly expr: "false";
+                };
+            };
+            readonly componentInput: undefined;
+            readonly numberOfSubgrids: 1;
+        };
+    };
+    readonly mapcomponent: {
+        readonly name: "Map";
+        readonly icon: typeof MapPin;
+        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 map: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly longitude: {
+                    readonly fieldType: "number";
+                    readonly type: "static";
+                    readonly value: 15;
+                };
+                readonly latitude: {
+                    readonly fieldType: "number";
+                    readonly type: "static";
+                    readonly value: 50;
+                };
+                readonly zoom: {
+                    readonly fieldType: "number";
+                    readonly type: "static";
+                    readonly value: 3;
+                };
+                readonly markers: StaticAppInput;
+            };
+        };
+    };
+    readonly verticalsplitpanescomponent: {
+        readonly name: "Vertical Split Panes";
+        readonly icon: typeof FlipHorizontal;
+        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 panes: number[];
+            readonly numberOfSubgrids: 2;
+        };
+    };
+    readonly horizontalsplitpanescomponent: {
+        readonly name: "Horizontal Split Panes";
+        readonly icon: typeof FlipVertical;
+        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 panes: number[];
+            readonly numberOfSubgrids: 2;
+        };
+    };
+    readonly pdfcomponent: {
+        readonly name: "PDF";
+        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 initialData: {
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly source: {
+                    readonly type: "static";
+                    readonly value: "/dummy.pdf";
+                    readonly fieldType: "text";
+                    readonly fileUpload: {
+                        readonly accept: "application/pdf";
+                        readonly convertTo: "base64";
+                    };
+                };
+                readonly zoom: {
+                    readonly fieldType: "number";
+                    readonly type: "static";
+                    readonly value: 100;
+                };
+            };
+        };
+    };
+};
+export declare const ccomponents: {
+    [Property in keyof typeof components]: AppComponentConfig<Property>;
+};
+export {};