From 0809906c5ccb53e08af866816537a0130d945525 Mon Sep 17 00:00:00 2001
From: kpodp0ra <podpora@kacper.link>
Date: Sat, 24 Jan 2026 09:56:34 +0100
Subject: [PATCH 1/4] feat: basic modal support

---
 components-sdk/src/Capsule.module.css         |  12 ++
 components-sdk/src/Capsule.tsx                | 164 ++++++++++++-----
 components-sdk/src/CapsuleButton.tsx          |  33 +++-
 .../src/components/Button.module.css          |   7 +-
 components-sdk/src/components/Button.tsx      |  98 ++++++++--
 .../src/components/FileUpload.module.css      |  46 +++++
 components-sdk/src/components/FileUpload.tsx  |  97 ++++++++++
 .../src/components/Label.module.css           |  71 ++++++++
 components-sdk/src/components/Label.tsx       | 122 +++++++++++++
 .../src/components/StringSelect.tsx           | 119 ++++--------
 .../src/components/TextDisplay.module.css     |   2 +-
 .../src/components/TextInput.module.css       |  45 +++++
 components-sdk/src/components/TextInput.tsx   | 170 ++++++++++++++++++
 components-sdk/src/components/Thumbnail.tsx   |  53 ++----
 components-sdk/src/dnd/DragContext.tsx        |   9 +-
 components-sdk/src/dnd/DragEvents.tsx         |   7 +-
 components-sdk/src/dnd/components.ts          | 160 +++++++++++------
 components-sdk/src/dnd/componentsModal.ts     |  64 +++++++
 components-sdk/src/dnd/handleDragDrop.ts      |  14 +-
 components-sdk/src/icons/FileUpload.svg       |  11 ++
 components-sdk/src/icons/MaximumActive.svg    |   3 +
 components-sdk/src/icons/MinimumActive.svg    |   3 +
 components-sdk/src/icons/Required.svg         |   1 +
 components-sdk/src/icons/RequiredActive.svg   |   1 +
 components-sdk/src/locales/en.json            |  33 +++-
 components-sdk/src/locales/pl.json            |  33 +++-
 components-sdk/src/utils/componentTypes.ts    |  19 +-
 .../src/utils/componentTypesModal.ts          | 168 +++++++++++++++++
 components-sdk/src/utils/useStateOpen.ts      |   3 +
 website/libs.config.ts                        |   6 +
 website/src/App.tsx                           | 124 ++-----------
 website/src/Codegen.tsx                       |   9 +-
 website/src/Webhook.tsx                       | 119 ++++++++++++
 website/src/defaultJsonModal.ts               |  80 +++++++++
 website/src/locales/en.json                   |   3 +-
 website/src/locales/pl.json                   |   3 +-
 website/src/state.ts                          |   8 +-
 37 files changed, 1549 insertions(+), 371 deletions(-)
 create mode 100644 components-sdk/src/components/FileUpload.module.css
 create mode 100644 components-sdk/src/components/FileUpload.tsx
 create mode 100644 components-sdk/src/components/Label.module.css
 create mode 100644 components-sdk/src/components/Label.tsx
 create mode 100644 components-sdk/src/components/TextInput.module.css
 create mode 100644 components-sdk/src/components/TextInput.tsx
 create mode 100644 components-sdk/src/dnd/componentsModal.ts
 create mode 100644 components-sdk/src/icons/FileUpload.svg
 create mode 100644 components-sdk/src/icons/MaximumActive.svg
 create mode 100644 components-sdk/src/icons/MinimumActive.svg
 create mode 100644 components-sdk/src/icons/Required.svg
 create mode 100644 components-sdk/src/icons/RequiredActive.svg
 create mode 100644 components-sdk/src/utils/componentTypesModal.ts
 create mode 100644 website/src/Webhook.tsx
 create mode 100644 website/src/defaultJsonModal.ts

diff --git a/components-sdk/src/Capsule.module.css b/components-sdk/src/Capsule.module.css
index ce1692d..b1aedb6 100644
--- a/components-sdk/src/Capsule.module.css
+++ b/components-sdk/src/Capsule.module.css
@@ -10,12 +10,24 @@
   color: #dcddde;
   background: #36393f;
   font-family: "gg sans",Whitney,"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+  overflow-wrap: anywhere;
 
   font-size: 1.6rem;
   line-height: 2.2rem;
   letter-spacing: normal;
   font-weight: 400;
   position: relative;
+
+  &.modal {
+    background: #242429;
+    .header {
+      font-size: 2.4rem;
+      color: white;
+      font-weight: bold;
+      margin-top: 1rem;
+      margin-bottom: 24px;
+    }
+  }
 }
 
 .component {
diff --git a/components-sdk/src/Capsule.tsx b/components-sdk/src/Capsule.tsx
index c10eff6..e5945e7 100644
--- a/components-sdk/src/Capsule.tsx
+++ b/components-sdk/src/Capsule.tsx
@@ -11,7 +11,7 @@ import { StringSelect } from './components/StringSelect';
 import { File } from './components/File';
 import { CapsuleInner } from './CapsuleInner';
 import { generateRandomAnimal, randomSentence, uuidv4 } from './utils/randomGen';
-import { addKeyType, appendKeyType, deleteKeyType, stateKeyType, StateManager } from './polyfills/StateManager';
+import { stateKeyType, StateManager } from './polyfills/StateManager';
 import {
     ActionRowComponent,
     ButtonComponent,
@@ -23,22 +23,33 @@ import {
     MediaGalleryComponent,
     MediaGalleryItem,
     PassProps,
+    RenderMode,
     SeparatorComponent,
     SeparatorSpacingSize,
     StringSelectComponent,
     TextDisplayComponent,
     ThumbnailComponent,
 } from './utils/componentTypes';
+import {
+    FileUploadComponent,
+    LabelComponent,
+    ModalStringSelectComponent,
+    TextInputComponent,
+    TextInputStyle,
+} from './utils/componentTypesModal';
 
 import { DragContextProvider } from './dnd/DragContext';
 import { DroppableID } from './dnd/components';
 import { KeyToDeleteType } from './dnd/types';
 import { BoundariesProps } from './dnd/boundaries';
 import { RegenerateContextProvider } from './utils/useRegenerate';
-import { useMemo } from 'react';
+import { Label } from './components/Label';
+import { useTranslation } from 'react-i18next';
+import { TextInput } from './components/TextInput';
+import { FileUpload } from './components/FileUpload';
 
 const _Button = {
-    type: 2,
+    type: ComponentType.BUTTON,
     style: ButtonStyle.GREY,
     label: '',
     emoji: null,
@@ -54,7 +65,7 @@ const _Image = {
 } as MediaGalleryItem
 
 const _StringSelect = () => ({
-    type: 3,
+    type: ComponentType.STRING_SELECT,
     custom_id: uuidv4(),
     options: [
         {
@@ -71,70 +82,119 @@ const _StringSelect = () => ({
     disabled: false,
 } as StringSelectComponent)
 
+const _TextInput = (style: TextInputStyle) => ({
+    type: ComponentType.TEXT_INPUT,
+    custom_id: uuidv4(),
+    style,
+    min_length: null,
+    max_length: null,
+    required: true,
+    value: null,
+    placeholder: null,
+});
+
+// We want this app to create components with all properties (except 'id') defined
+type Req<T> = Required<Omit<T, 'id'>>;
+
 export const default_settings = {
     Button: () => ({
-        type: 1,
+        type: ComponentType.ACTION_ROW,
         components: [{
             ..._Button,
             custom_id: uuidv4(),
-            label: generateRandomAnimal()
+            label: generateRandomAnimal(),
         }]
     }),
     LinkButton: () => ({
-        type: 1,
+        type: ComponentType.ACTION_ROW,
         components: [{
             ..._Button,
             style: ButtonStyle.URL,
             url: 'https://google.com',
-            label: generateRandomAnimal()
+            label: generateRandomAnimal(),
         }]
     }),
     StringSelect: () => ({
-        type: 1,
-        components: [_StringSelect()]
+        type: ComponentType.ACTION_ROW,
+        components: [_StringSelect()],
     }),
     TextDisplay: () => ({
-        type: 10,
+        type: ComponentType.TEXT_DISPLAY,
         content: randomSentence(),
     }),
     Thumbnail: {
-        type: 11,
-        ..._Image
+        type: ComponentType.THUMBNAIL,
+        ..._Image,
     },
     MediaGallery: {
-        type: 12,
-        items: [
-            _Image
-        ]
+        type: ComponentType.MEDIA_GALLERY,
+        items: [_Image],
     },
     File: {
-        type: 13,
+        type: ComponentType.FILE,
         file: {
             url: ''
         },
         spoiler: false,
     },
     Separator: {
-        type: 14,
+        type: ComponentType.SEPARATOR,
         divider: true,
         spacing: SeparatorSpacingSize.SMALL
     },
     Container: {
-        type: 17,
+        type: ComponentType.CONTAINER,
         accent_color: null,
         spoiler: false,
         components: [],
     },
+    ModalShortInput: () => ({
+        type: ComponentType.LABEL,
+        label: generateRandomAnimal(),
+        description: null,
+        component: _TextInput(TextInputStyle.SHORT),
+    }),
+    ModalParagraphInput: () => ({
+        type: ComponentType.LABEL,
+        label: generateRandomAnimal(),
+        description: null,
+        component: _TextInput(TextInputStyle.PARAGRAPH),
+    }),
+    ModalStringSelect: () => {
+        const {disabled, ...other} = _StringSelect();
+        return {
+            type: ComponentType.LABEL,
+            label: generateRandomAnimal(),
+            description: null,
+            component: {...other, required: true},
+        };
+    },
+    ModalFileUpload: () => ({
+        type: ComponentType.LABEL,
+        label: generateRandomAnimal(),
+        description: null,
+        component: {
+            type: ComponentType.FILE_UPLOAD,
+            custom_id: uuidv4(),
+            min_values: 1,
+            max_values: 1,
+            required: true,
+        },
+    }),
 } as {
-    Button: () => ActionRowComponent<ButtonComponent>,
-    LinkButton: () => ActionRowComponent<ButtonComponent>,
-    StringSelect: () => ActionRowComponent<StringSelectComponent>,
-    TextDisplay: () => TextDisplayComponent,
-    Thumbnail: ThumbnailComponent,
-    MediaGallery: MediaGalleryComponent,
-    Separator: SeparatorComponent,
-    Container:ContainerComponent,
-    File: FileComponent
+    Button: () => Req<ActionRowComponent<Req<ButtonComponent>>>;
+    LinkButton: () => Req<ActionRowComponent<Req<ButtonComponent>>>;
+    StringSelect: () => Req<ActionRowComponent<Req<StringSelectComponent>>>;
+    TextDisplay: () => Req<TextDisplayComponent>;
+    Thumbnail: Req<ThumbnailComponent>;
+    MediaGallery: Req<MediaGalleryComponent>;
+    Separator: Req<SeparatorComponent>;
+    Container: Req<ContainerComponent>;
+    File: Req<FileComponent>;
+    ModalShortInput: () => Req<LabelComponent<Req<TextInputComponent>>>;
+    ModalParagraphInput: () => Req<LabelComponent<Req<TextInputComponent>>>;
+    ModalStringSelect: () => Req<LabelComponent<Req<ModalStringSelectComponent>>>;
+    ModalFileUpload: () => Req<LabelComponent<Req<FileUploadComponent>>>;
 }
 
 export type ComponentsProps = {
@@ -145,23 +205,27 @@ export type ComponentsProps = {
     removeKeyParent?: stateKeyType,
     dragKeyToDeleteOverwrite?: Omit<KeyToDeleteType, 'sessionId'>, // Available only for Section accessory
     droppableId?: DroppableID, // Available only for Section accessory
+    fromLabel?: boolean  // Available only for Label component
     errors?: Record<string, any> | null,
     actionCallback?: (custom_id: string | null) => void,
 }
 
-export const COMPONENTS = {
-    1: ActionRow,
-    2: Button,
-    3: StringSelect,
-    9: Section,
-    10: TextDisplay,
-    11: Thumbnail,
-    12: MediaGallery,
-    14: Separator,
-    17: Container,
-    13: File,
-} as unknown as {
-    [K: number]: (props: ComponentsProps) => JSX.Element
+export const COMPONENTS: {
+    [K in ComponentType]: (props: Omit<ComponentsProps, 'state'> & { state: any }) => JSX.Element | null;
+} = {
+    [ComponentType.ACTION_ROW]: ActionRow,
+    [ComponentType.BUTTON]: Button,
+    [ComponentType.STRING_SELECT]: StringSelect,
+    [ComponentType.TEXT_INPUT]: TextInput,
+    [ComponentType.SECTION]: Section,
+    [ComponentType.TEXT_DISPLAY]: TextDisplay,
+    [ComponentType.THUMBNAIL]: Thumbnail,
+    [ComponentType.MEDIA_GALLERY]: MediaGallery,
+    [ComponentType.SEPARATOR]: Separator,
+    [ComponentType.CONTAINER]: Container,
+    [ComponentType.FILE]: File,
+    [ComponentType.LABEL]: Label,
+    [ComponentType.FILE_UPLOAD]: FileUpload,
 }
 
 export const SECTIONABLE = [
@@ -175,19 +239,27 @@ export function Capsule(props : {
     className?: string | null,
     passProps: PassProps,
     errors: Record<string, any> | null,
+    modalTitle?: string
 } & BoundariesProps ) {
+    const isModal = props.passProps.renderMode === RenderMode.MODAL;
+
     const cls = props.className ? ' ' + props.className : '';
+    const modCls = isModal ? ' ' + Styles.modal : '';
 
-    return <div className={Styles.preview + cls}>
-        <RegenerateContextProvider stateManager={props.stateManager}>{stateMng => <DragContextProvider stateManager={stateMng} boundaries={props.boundaries}>
+    return <div className={Styles.preview + modCls + cls}>
+        {!!(isModal && props.modalTitle) && <div className={Styles.header}>
+            {props.modalTitle}
+        </div>}
+        <RegenerateContextProvider stateManager={props.stateManager}>{stateMng => <DragContextProvider stateManager={stateMng} boundaries={props.boundaries} renderMode={props.passProps.renderMode ?? RenderMode.MESSAGE}>
             <CapsuleInner
                 state={props.state}
                 stateKey={props.stateKey}
                 stateManager={stateMng}
-                buttonContext={'main'}
+                buttonContext={isModal ? 'modal' : 'main'}
                 passProps={props.passProps}
-                droppableId={DroppableID.TOP_LEVEL}
+                droppableId={isModal ? DroppableID.MODAL_TOP_LEVEL : DroppableID.TOP_LEVEL}
                 errors={props.errors}
+                showSectionButton={!isModal}
             />
         </DragContextProvider>}</RegenerateContextProvider>
     </div>
diff --git a/components-sdk/src/CapsuleButton.tsx b/components-sdk/src/CapsuleButton.tsx
index 29ef674..4e53a6d 100644
--- a/components-sdk/src/CapsuleButton.tsx
+++ b/components-sdk/src/CapsuleButton.tsx
@@ -14,7 +14,7 @@ import { Component } from './utils/componentTypes';
 import { useStateOpen } from './utils/useStateOpen';
 import { useTranslation } from 'react-i18next';
 
-export type capsuleButtonCtx = 'main' | 'container' | 'inline' | 'button-row' | 'frame';
+export type capsuleButtonCtx = 'main' | 'container' | 'inline' | 'button-row' | 'frame' | 'modal';
 
 type props = {
     context: capsuleButtonCtx,
@@ -39,6 +39,7 @@ export function CapsuleButton({context, callback, className, style, interactiveD
             {context === "inline" && t('button.add-inline')}
             {context === "container" && t('button.add-content')}
             {context === "button-row" && t('button.add-button')}
+            {context === "modal" && t('button.add-input')}
 
             { open && <div className={Styles.large_button_ctx} ref={btn_select}>
                 {['main', 'inline', 'container'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
@@ -95,6 +96,36 @@ export function CapsuleButton({context, callback, className, style, interactiveD
                     <div className={Styles.large_button_ctx_item_img}><img src={MediaGalleryIcon} alt=""/></div>
                     <div className={Styles.large_button_ctx_item_text}>{t('components.thumbnail')}</div>
                 </div>}
+                {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
+                    callback(default_settings.ModalShortInput())
+                }}>
+                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_text}>{t('components.modal.short-input')}</div>
+                </div>}
+                {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
+                    callback(default_settings.ModalParagraphInput())
+                }}>
+                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_text}>{t('components.modal.paragraph-input')}</div>
+                </div>}
+                {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
+                    callback(default_settings.TextDisplay())
+                }}>
+                    <div className={Styles.large_button_ctx_item_img}><img src={TextDisplayIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_text}>{t('components.modal.content')}</div>
+                </div>}
+                {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
+                    callback(default_settings.ModalStringSelect())
+                }}>
+                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_text}>{t('components.modal.string-select')}</div>
+                </div>}
+                {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
+                    callback(default_settings.ModalFileUpload())
+                }}>
+                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_text}>{t('components.modal.file-upload')}</div>
+                </div>}
             </div>}
         </div>
     )
diff --git a/components-sdk/src/components/Button.module.css b/components-sdk/src/components/Button.module.css
index ac67393..6d34366 100644
--- a/components-sdk/src/components/Button.module.css
+++ b/components-sdk/src/components/Button.module.css
@@ -37,11 +37,16 @@
   border: 1px solid rgba(255,255,255, 0.1);
 }
 
-.input[type="text"] {
+.input[type="text"], .input[type="number"] {
   padding: 0.8rem 1.6rem;
   width: 200px;
 }
 
+textarea.textarea {
+  padding: 0.8rem 1.6rem;
+  width: 500px;
+}
+
 .link_btn {
   line-height: 100%;
   .text {
diff --git a/components-sdk/src/components/Button.tsx b/components-sdk/src/components/Button.tsx
index e081a8d..a338062 100644
--- a/components-sdk/src/components/Button.tsx
+++ b/components-sdk/src/components/Button.tsx
@@ -1,16 +1,17 @@
 import Styles from './Button.module.css';
-import {text_display_input} from './TextDisplay.module.css';
+import { text_display_input } from './TextDisplay.module.css';
 import CapsuleStyles from '../Capsule.module.css';
 import {
     Dispatch,
-    Fragment, MouseEventHandler,
+    Fragment,
+    MouseEventHandler,
     RefObject,
     SetStateAction,
     useEffect,
     useImperativeHandle,
     useLayoutEffect,
     useRef,
-    useState
+    useState,
 } from 'react';
 import ColorBlue from '../icons/ColorBlue.svg';
 import ColorGrey from '../icons/ColorGrey.svg';
@@ -115,8 +116,8 @@ export function Button(
             {!!open && <div className={CapsuleStyles.large_button_ctx + ' ' + CapsuleStyles.noright} ref={btn_select}>
                 {open === 1 && <MenuFirst actionCallback={actionCallback} state={state} stateManager={stateManager} stateKey={stateKey} removeKeyParent={removeKeyParent} setOpen={setOpen}/>}
                 {open === 2 && <MenuEmoji stateKey={[...stateKey, 'emoji']} stateManager={stateManager} passProps={passProps}/>}
-                {open === 3 && <MenuLabel closeLockRef={closeLockRef} state={state.label || ""} stateKey={[...stateKey, 'label']} stateManager={stateManager} setOpen={setOpen}/>}
-                {open === 4 && <MenuLabel closeLockRef={closeLockRef} state={state.url || ""} stateKey={[...stateKey, 'url']} stateManager={stateManager} setOpen={setOpen}/>}
+                {open === 3 && <MenuLabel closeLockRef={closeLockRef} state={state.label || ""} stateKey={[...stateKey, 'label']} stateManager={stateManager} setOpen={setOpen} max={80}/>}
+                {open === 4 && <MenuLabel closeLockRef={closeLockRef} state={state.url || ""} stateKey={[...stateKey, 'url']} stateManager={stateManager} setOpen={setOpen} max={512}/>}
             </div>}
         </div></DragLines>
     )
@@ -184,21 +185,53 @@ function MenuFirst({state, stateKey, stateManager, setOpen, removeKeyParent, act
 }
 
 export function MenuOption({ src, text, onClick, className }: {
-    src: string;
+    src: string | null;
     text: string;
     onClick?: MouseEventHandler<HTMLDivElement>;
     className?: string;
 }) {
     return (
         <div className={CapsuleStyles.large_button_ctx_item} onClick={onClick}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}>
+            {src !== null && <div className={CapsuleStyles.large_button_ctx_item_img}>
                 <img src={src} alt="" />
-            </div>
+            </div>}
             <div className={CapsuleStyles.large_button_ctx_item_text + ' ' + className}>{text}</div>
         </div>
     );
 }
 
+export function MenuArea({state, stateKey, stateManager, setOpen, closeLockRef, max} : {
+    state: (string | number | null),
+    stateKey: ComponentsProps['stateKey'],
+    stateManager: ComponentsProps['stateManager'],
+    setOpen: Dispatch<SetStateAction<number>>,
+    closeLockRef: RefObject<any>,
+    max: number,
+}) {
+    const ref = useRef<HTMLTextAreaElement>(null);
+    useImperativeHandle(closeLockRef, () => "SHIFT");
+
+    useEffect(() => {
+        if (ref.current) ref.current.focus();
+    }, [ref.current]);
+    return <div className={Styles.menu_label}>
+        <textarea
+            ref={ref}
+            value={state ?? ""}
+            className={text_display_input + ' ' + Styles.textarea}
+            placeholder={"abcdefg"}
+            onChange={(ev) => {
+                stateManager.setKey({
+                    key: stateKey,
+                    value: ev.target.value,
+                })
+            }}
+            maxLength={max}
+        />
+        <img width={30} height={30} src={TimesSolid} alt={'x'} onClick={() => setOpen(0)} />
+    </div>
+}
+
 export function MenuEmoji({stateKey, stateManager, passProps} : {
     stateKey: ComponentsProps['stateKey'],
     stateManager: ComponentsProps['stateManager'],
@@ -213,15 +246,36 @@ export function MenuEmoji({stateKey, stateManager, passProps} : {
     />
 }
 
-export function MenuLabel({state, stateKey, stateManager, setOpen, nullable = false, closeLockRef, placeholder} : {
-    state: string,
+function processText(text: string, nullable: boolean) {
+    return nullable ? (text || null) : (text || "")
+}
+
+function processNumber(text: string, nullable: boolean, min?: number, max?: number) {
+    if (text.trim() === '' && nullable) return null;
+
+    try {
+        let no = Number(text);
+        if (min != null && no < min) no = min;
+        if (max != null && no > max) no = max;
+        return no;
+    } catch {
+        return 0;
+    }
+}
+
+export function MenuLabel({state, stateKey, stateManager, setOpen, nullable = false, closeLockRef, placeholder, number, min, max} : {
+    state: (string | number | null),
     stateKey: ComponentsProps['stateKey'],
     stateManager: ComponentsProps['stateManager'],
     setOpen: Dispatch<SetStateAction<number>>,
     nullable?: boolean,
     closeLockRef: RefObject<any>,
-    placeholder?: string
+    placeholder?: string,
+    number?: boolean,
+    min?: number,
+    max: number,
 }) {
+    const func = number ? processNumber : processText;
     const ref = useRef<HTMLInputElement>(null);
     useImperativeHandle(closeLockRef, () => true);
 
@@ -231,15 +285,21 @@ export function MenuLabel({state, stateKey, stateManager, setOpen, nullable = fa
     return <div className={Styles.menu_label}>
         <input
             ref={ref}
-            type="text"
-            value={state}
+            type={number?"number":"text"}
+            value={state ?? ""}
             className={text_display_input + ' ' + Styles.input}
-            placeholder={placeholder || "abcdefg"}
-            onChange={(ev) => stateManager.setKey({
-                key: stateKey,
-                value: nullable ? (ev.target.value || null) : ev.target.value
-            })}
+            placeholder={placeholder || (number?"1234":"abcdefg")}
+            onChange={(ev) => {
+                const val = func(ev.target.value, nullable, min, max);
+                ev.target.value = val as any;
+                stateManager.setKey({
+                    key: stateKey,
+                    value: val,
+                })
+            }}
+            min={min} max={number ? max : undefined}
+            maxLength={number ? undefined : max}
         />
         <img width={30} height={30} src={TimesSolid} alt={'x'} onClick={() => setOpen(0)} />
     </div>
-}
+}
\ No newline at end of file
diff --git a/components-sdk/src/components/FileUpload.module.css b/components-sdk/src/components/FileUpload.module.css
new file mode 100644
index 0000000..76dd4a2
--- /dev/null
+++ b/components-sdk/src/components/FileUpload.module.css
@@ -0,0 +1,46 @@
+.upload {
+  padding: 1.8rem 1.6rem;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  color: #dcddde;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  &:hover, &.open {
+    background: #101013;
+  }
+
+  .with_badge {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 0;
+    gap: 1rem;
+  }
+
+  .badge {
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    color: white;
+    border-radius: 100px;
+    font-size: 12px;
+    padding: 0 1.6rem;
+    white-space: nowrap;
+    &.invalid {
+      border-color: #F69083;
+      color: #F69083;
+    }
+  }
+
+  .icon {
+    display: flex;
+    gap: 0.8rem;
+    align-items: center;
+    img {
+      width: 3.6rem;
+      height: 3.6rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/components-sdk/src/components/FileUpload.tsx b/components-sdk/src/components/FileUpload.tsx
new file mode 100644
index 0000000..54402c9
--- /dev/null
+++ b/components-sdk/src/components/FileUpload.tsx
@@ -0,0 +1,97 @@
+import Styles from './FileUpload.module.css';
+import { ComponentsProps } from '../Capsule';
+import { FileUploadComponent } from '../utils/componentTypesModal';
+import { useTranslation } from 'react-i18next';
+import CapsuleStyles from '../Capsule.module.css';
+import { MenuOption } from './Button';
+import { useStateOpen } from '../utils/useStateOpen';
+import { Dispatch, SetStateAction, useRef } from 'react';
+import Minimum from '../icons/Minimum.svg';
+import Maximum from '../icons/Maximum.svg';
+import FileUploadIcon from '../icons/FileUpload.svg';
+import { MenuRange } from './StringSelect';
+
+export function FileUpload({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+}: ComponentsProps & { state: FileUploadComponent }) {
+    const { open, setOpen, ignoreRef, closeLockRef } = useStateOpen(0);
+    const { t } = useTranslation('components-sdk');
+    const btn_select = useRef<HTMLDivElement>(null);
+
+    const min_values = state.min_values ?? 1;
+    const max_values = state.max_values ?? 1;
+    const isInvalid = min_values > max_values;
+
+    return (
+        <div
+            className={Styles.upload + (open ? ' ' + Styles.open : '')}
+            onClick={(ev) => {
+                if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
+                setOpen(1);
+            }}
+            ref={ignoreRef}
+        >
+            <div className={Styles.with_badge}>
+                <div className={Styles.icon}>
+                    <img src={FileUploadIcon} alt={'File upload icon'} />
+                    {max_values > 1 ? t('modal.file-upload.info-multiple') : t('modal.file-upload.info-one')}
+                </div>
+                <div className={Styles.badge + ' ' + (isInvalid ? Styles.invalid : '')}>
+                    {isInvalid && t('string-select.invalid')}{' '}
+                    {min_values === max_values ? min_values : `${min_values} – ${max_values}`}
+                </div>
+            </div>
+            {!!open && (
+                <div className={CapsuleStyles.large_button_ctx + ' ' + CapsuleStyles.noright} ref={btn_select}>
+                    {open === 1 && (
+                        <MenuFirst state={state} stateKey={stateKey} stateManager={stateManager} setOpen={setOpen} />
+                    )}
+                    {open === 2 && (
+                        <MenuRange
+                            min={0}
+                            max={10}
+                            state={min_values}
+                            stateKey={[...stateKey, 'min_values']}
+                            stateManager={stateManager}
+                        />
+                    )}
+                    {open === 3 && (
+                        <MenuRange
+                            min={1}
+                            max={10}
+                            state={max_values}
+                            stateKey={[...stateKey, 'max_values']}
+                            stateManager={stateManager}
+                        />
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function MenuFirst({state, stateKey, stateManager, setOpen} : {
+    state: FileUploadComponent,
+    stateKey: ComponentsProps['stateKey'],
+    stateManager: ComponentsProps['stateManager'],
+    setOpen: Dispatch<SetStateAction<number>>,
+}) {
+
+    const {t} = useTranslation("components-sdk");
+
+    return <>
+
+        <MenuOption src={Minimum} text={t('modal.file-upload.set-minimum')} onClick={(ev) => {
+            setOpen(2);
+            ev.stopPropagation();
+        }} />
+
+        <MenuOption src={Maximum} text={t('modal.file-upload.set-maximum')} onClick={(ev) => {
+            setOpen(3);
+            ev.stopPropagation();
+        }} />
+    </>
+}
diff --git a/components-sdk/src/components/Label.module.css b/components-sdk/src/components/Label.module.css
new file mode 100644
index 0000000..7f78c86
--- /dev/null
+++ b/components-sdk/src/components/Label.module.css
@@ -0,0 +1,71 @@
+
+.label {
+  .label_text {
+    position: relative;
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: column;
+    padding-right: 32px;
+
+    &:before {
+      content: "";
+      display: none;
+      position: absolute;
+      top: -4px;
+      bottom: -4px;
+      left: 0;
+      right: 0;
+      border-radius: 4px;
+      background: #1c1d20;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+      max-width: 100%;
+    }
+
+    &.open, &:hover {
+      color: #86c232;
+    }
+
+    &.open:before, &:hover:before {
+      display: block;
+    }
+
+    margin-bottom: 8px;
+  }
+
+  .header {
+    font-size: 1.6rem;
+    position: relative;
+    font-weight: 600;
+    .required {
+      color: #ff6b6b;
+      margin-inline-start: 4px;
+    }
+  }
+  .description {
+    font-size: 1.4rem;
+    position: relative;
+    color: #a8a8a8;
+    line-height: 1.8rem;
+  }
+  .badge {
+    &.required, &.optional {
+      font-size: 1.2rem;
+      line-height: 100%;
+      padding: 2px 8px;
+      border-radius: 12px;
+      margin-top: 4px;
+    }
+
+    &.required {
+      background: #503a17;
+      color: white;
+    }
+
+    &.optional {
+      background: #175033;
+      color: white;
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/components-sdk/src/components/Label.tsx b/components-sdk/src/components/Label.tsx
new file mode 100644
index 0000000..d76cd0c
--- /dev/null
+++ b/components-sdk/src/components/Label.tsx
@@ -0,0 +1,122 @@
+import Styles from './Label.module.css';
+import { COMPONENTS, ComponentsProps } from '../Capsule';
+import { LabelComponent, LabelPossible, MODAL_SUPPORTS_REQUIRED } from '../utils/componentTypesModal';
+import { Dispatch, SetStateAction, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import CapsuleStyles from '../Capsule.module.css';
+import { MenuLabel, MenuOption } from './Button';
+import { useStateOpen } from '../utils/useStateOpen';
+import DescriptionText from '../icons/DescriptionText.svg';
+import DescriptionTextActive from '../icons/DescriptionTextActive.svg';
+import DescriptionPen from '../icons/DescriptionPen.svg';
+import RequiredActive from '../icons/RequiredActive.svg';
+import Required from '../icons/Required.svg';
+
+export function Label({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+    actionCallback,
+}: ComponentsProps & { state: LabelComponent<LabelPossible> }) {
+    const Child = COMPONENTS[state.component.type];
+    if (typeof Child === 'undefined') return null;
+    const btn_select = useRef<HTMLDivElement>(null);
+    const { open, setOpen, ignoreRef, closeLockRef } = useStateOpen(0);
+    const stateKeyChild = useMemo(() => [...stateKey, 'component'], [...stateKey]);
+
+    return (
+        <div className={Styles.label}>
+            <div
+                className={Styles.label_text + (open ? ' ' + Styles.open : '')}
+                onClick={(ev) => {
+                    if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
+                    setOpen(1);
+                }}
+                ref={ignoreRef}
+            >
+                <div className={Styles.header}>
+                    {state.label}
+                    {(state.component.required ?? true) && <span className={Styles.required}>*</span>}
+                    &nbsp;&nbsp;&nbsp;&nbsp;
+                </div>
+                <div className={Styles.description}>{state.description}</div>
+                {!!open && (
+                    <div className={CapsuleStyles.large_button_ctx + ' ' + CapsuleStyles.noright} ref={btn_select}>
+                        {open === 1 && (
+                            <MenuFirst
+                                state={state}
+                                stateKey={stateKey}
+                                stateManager={stateManager}
+                                setOpen={setOpen}
+                            />
+                        )}
+                        {open === 2 && (
+                            <MenuLabel
+                                closeLockRef={closeLockRef}
+                                state={state.label || ''}
+                                stateKey={[...stateKey, 'label']}
+                                stateManager={stateManager}
+                                setOpen={setOpen}
+                                max={45}
+                            />
+                        )}
+                        {open === 3 && (
+                            <MenuLabel
+                                closeLockRef={closeLockRef}
+                                state={state.description || ''}
+                                stateKey={[...stateKey, 'description']}
+                                stateManager={stateManager}
+                                setOpen={setOpen}
+                                max={100}
+                            />
+                        )}
+                    </div>
+                )}
+            </div>
+            <Child
+                state={state.component}
+                stateKey={stateKeyChild}
+                stateManager={stateManager}
+                passProps={passProps}
+                actionCallback={actionCallback}
+                removeKeyParent={stateKey}
+                fromLabel={true}
+            />
+        </div>
+    );
+}
+
+
+
+function MenuFirst({state, stateKey, stateManager, setOpen} : {
+    state: LabelComponent<LabelPossible>,
+    stateKey: ComponentsProps['stateKey'],
+    stateManager: ComponentsProps['stateManager'],
+    setOpen: Dispatch<SetStateAction<number>>,
+}) {
+
+    const {t} = useTranslation("components-sdk");
+
+    const requireable = MODAL_SUPPORTS_REQUIRED.includes(state.component.type);
+    const req = state.component.required ?? true;
+
+    return <>
+        <MenuOption src={DescriptionPen} text={t('modal.label.change-label')} onClick={(ev) => {
+            setOpen(2);
+            ev.stopPropagation();
+        }} />
+
+        <MenuOption src={DescriptionText} text={state.description == null ? t('modal.label.add-description') : t('modal.label.change-description')} onClick={(ev) => {
+            setOpen(3);
+            ev.stopPropagation();
+        }} />
+        {state.description != null && <MenuOption src={DescriptionTextActive} text={t('modal.label.clear-description')} onClick={() => {
+            stateManager.setKey({key: [...stateKey, "description"], value: null})
+        }} />}
+
+        {requireable && <MenuOption src={req ? RequiredActive : Required} text={req ? t('modal.label.unset-required') : t('modal.label.set-required')} onClick={() => {
+            stateManager.setKey({key: [...stateKey, "component", "required"], value: !req})
+        }} />}
+    </>
+}
diff --git a/components-sdk/src/components/StringSelect.tsx b/components-sdk/src/components/StringSelect.tsx
index a59d119..80ad3c2 100644
--- a/components-sdk/src/components/StringSelect.tsx
+++ b/components-sdk/src/components/StringSelect.tsx
@@ -32,7 +32,8 @@ export function StringSelect({
     stateManager,
     passProps,
     removeKeyParent = undefined,
-    actionCallback
+    actionCallback,
+    fromLabel,
 }: ComponentsProps & { state: StringSelectComponent }) {
     // useEffect(() => {
     //     if (state.min_values > state.max_values) {
@@ -50,7 +51,7 @@ export function StringSelect({
 
     return <div>
         <div className={Styles.select}>
-            <GlobalSettings state={state} stateKey={stateKey} stateManager={stateManager} />
+            <GlobalSettings state={state} stateKey={stateKey} stateManager={stateManager} fromLabel={fromLabel} />
 
             {state.options.map((option, index) => <StringSelectOption
                 key={option.value}
@@ -78,10 +79,11 @@ export function StringSelect({
     </div>
 }
 
-function GlobalSettings({state, stateKey, stateManager} : {
+function GlobalSettings({state, stateKey, stateManager, fromLabel} : {
     state: StringSelectComponent,
     stateKey: ComponentsProps['stateKey'],
     stateManager: ComponentsProps['stateManager'],
+    fromLabel?: boolean
 }) {
     const {open, setOpen, ignoreRef, closeLockRef} = useStateOpen(0);
     const btn_select = useRef<HTMLDivElement>(null);
@@ -100,9 +102,9 @@ function GlobalSettings({state, stateKey, stateManager} : {
             <div className={Styles.badge + ' ' + (isInvalid?Styles.invalid:'')}>{isInvalid && t('string-select.invalid')} {min_values === max_values ? min_values : `${min_values} – ${max_values}` }</div>
         </div>
         { !!open && <div className={CapsuleStyles.large_button_ctx+ ' ' + CapsuleStyles.noright} ref={btn_select}>
-            {open === 1 && <GlobalSettingsFirst state={state} stateKey={stateKey} stateManager={stateManager} setOpen={setOpen}/>}
-            {open === 2 && <MenuLabel closeLockRef={closeLockRef} state={state.placeholder || ""} stateKey={[...stateKey, 'placeholder']} stateManager={stateManager} setOpen={setOpen}/>}
-            {open === 3 && <MenuRange min={1} max={state.options.length} state={min_values} stateKey={[...stateKey, 'min_values']} stateManager={stateManager}/>}
+            {open === 1 && <GlobalSettingsFirst state={state} stateKey={stateKey} stateManager={stateManager} setOpen={setOpen} fromLabel={fromLabel}/>}
+            {open === 2 && <MenuLabel closeLockRef={closeLockRef} state={state.placeholder || ""} stateKey={[...stateKey, 'placeholder']} stateManager={stateManager} setOpen={setOpen} max={150}/>}
+            {open === 3 && <MenuRange min={0} max={state.options.length} state={min_values} stateKey={[...stateKey, 'min_values']} stateManager={stateManager}/>}
             {open === 4 && <MenuRange min={1} max={state.options.length} state={max_values} stateKey={[...stateKey, 'max_values']} stateManager={stateManager}/>}
         </div>}
 
@@ -126,61 +128,41 @@ export function MenuRange({min, max, state, stateKey, stateManager} : {
     }
 
     return <div className={Styles.menu_range}>
-        <Slider min={min} max={max} step={1} marks={Array.from({length: max+1}, (_, i) => i)}
-                value={state}
-                onChange={(no: any) => stateManager.setKey({key: stateKey, value: no})}
+        <Slider min={0} max={max-min} step={1} marks={Array.from({length: max+1-min}, (_, i) => i+min)}
+                value={state-min}
+                onChange={(no: any) => stateManager.setKey({key: stateKey, value: no+min})}
         />
     </div>
 }
 
-function GlobalSettingsFirst({state, stateKey, stateManager, setOpen} : {
+function GlobalSettingsFirst({state, stateKey, stateManager, setOpen, fromLabel} : {
     state: StringSelectComponent,
     stateKey: ComponentsProps['stateKey'],
     stateManager: ComponentsProps['stateManager'],
     setOpen: Dispatch<SetStateAction<number>>,
+    fromLabel?: boolean
 }) {
     const {t} = useTranslation("components-sdk")
 
     return <>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
+        {!fromLabel && <MenuOption src={state.disabled ? LockActive : Lock} text={state.disabled ? t("string-select.mark-enabled") : t('string-select.mark-disabled')} onClick={() => {
             stateManager.setKey({key: [...stateKey, "disabled"], value: !state.disabled})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={state.disabled ? LockActive : Lock} alt=""/></div>
-            <div
-                className={CapsuleStyles.large_button_ctx_item_text}>{state.disabled ? t("string-select.mark-enabled") : t('string-select.mark-disabled')}</div>
-        </div>
-
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />}
+        <MenuOption src={DescriptionText} text={!state.placeholder ? t('string-select.add-placeholder') : t('string-select.change-placeholder')} onClick={(ev) => {
             setOpen(2);
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={DescriptionText} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{!state.placeholder ? t('string-select.add-placeholder') : t('string-select.change-placeholder')}</div>
-        </div>
-
-        {!!state.placeholder && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />
+        {!!state.placeholder && <MenuOption src={DescriptionTextActive} text={t('string-select.clear-placeholder')} onClick={() => {
             stateManager.setKey({key: [...stateKey, "placeholder"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={DescriptionTextActive} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.clear-placeholder')}</div>
-        </div>}
-
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />}
+        <MenuOption src={Minimum} text={t('string-select.set-minimum')} onClick={(ev) => {
             setOpen(3);
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Minimum} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.set-minimum')}</div>
-        </div>
-
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />
+        <MenuOption src={Maximum} text={t('string-select.set-maximum')} onClick={(ev) => {
             setOpen(4);
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Maximum} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.set-maximum')}</div>
-        </div>
-
+        }} />
     </>
 }
 
@@ -213,8 +195,8 @@ function StringSelectOption({state, stateKey: stateParent, index, stateManager,
             { !!open && <div className={CapsuleStyles.large_button_ctx+ ' ' + CapsuleStyles.noright} ref={btn_select}>
                 {open === 1 && <MenuFirst state={state} stateKey={stateKey} stateManager={stateManager} setOpen={setOpen} removeKeyParent={removeKeyParent} actionCallback={actionCallback}/>}
                 {open === 2 && <MenuEmoji stateKey={[...stateKey, 'emoji']} stateManager={stateManager} passProps={passProps}/>}
-                {open === 3 && <MenuLabel closeLockRef={closeLockRef} state={state.label} stateKey={[...stateKey, 'label']} stateManager={stateManager} setOpen={setOpen}/>}
-                {open === 4 && <MenuLabel closeLockRef={closeLockRef} state={state.description || ""} nullable={true} stateKey={[...stateKey, "description"]} stateManager={stateManager} setOpen={setOpen}/>}
+                {open === 3 && <MenuLabel closeLockRef={closeLockRef} state={state.label} stateKey={[...stateKey, 'label']} stateManager={stateManager} setOpen={setOpen} max={100}/>}
+                {open === 4 && <MenuLabel closeLockRef={closeLockRef} state={state.description || ""} nullable={true} stateKey={[...stateKey, "description"]} stateManager={stateManager} setOpen={setOpen} max={100}/>}
             </div>}
         </div></DragLines>
     )
@@ -237,52 +219,29 @@ function MenuFirst({state, stateKey, stateManager, setOpen, removeKeyParent, act
             actionCallback(state.value || null);
             ev.stopPropagation();
         }} />}
-
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
+        <MenuOption src={state.default ? DefaultActive : Default} text={state.default ? t('string-select.default-unselect') : t('string-select.default-select')} onClick={() => {
             stateManager.setKey({key: [...stateKey, "default"], value: !state.default})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={state.default ? DefaultActive : Default} alt=""/></div>
-            <div
-                className={CapsuleStyles.large_button_ctx_item_text}>{state.default ? t('string-select.default-unselect') : t('string-select.default-select')}</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />
+        <MenuOption src={Emoji} text={state.emoji == null ? t('string-select.set-emoji') : t('string-select.change-emoji')} onClick={(ev) => {
             setOpen(2);
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Emoji} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{state.emoji == null ? t('string-select.set-emoji') : t('string-select.change-emoji')}</div>
-        </div>
-        {state.emoji != null && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />
+        {state.emoji != null && <MenuOption src={EmojiActive} text={t('string-select.clear-emoji')} onClick={() => {
             stateManager.setKey({key: [...stateKey, "emoji"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={EmojiActive} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.clear-emoji')}</div>
-        </div>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />}
+        <MenuOption src={DescriptionPen} text={t('string-select.change-label')} onClick={(ev) => {
             setOpen(3);
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={DescriptionPen} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.change-label')}</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />
+        <MenuOption src={DescriptionText} text={state.description == null ? t('string-select.add-description') : t('string-select.change-description')} onClick={(ev) => {
             setOpen(4);
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={DescriptionText} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{state.description == null ? t('string-select.add-description') : t('string-select.change-description')}</div>
-        </div>
-        {state.description != null && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />
+        {state.description != null && <MenuOption src={DescriptionTextActive} text={t('string-select.clear-description')} onClick={() => {
             stateManager.setKey({key: [...stateKey, "description"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={DescriptionTextActive} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.clear-description')}</div>
-        </div>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
+        }} />}
+        <MenuOption src={TrashIcon} text={t('string-select.delete')} onClick={() => {
             stateManager.deleteKey({key: stateKey, removeKeyParent});
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={TrashIcon} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('string-select.delete')}</div>
-        </div>
+        }} />
     </>
 }
diff --git a/components-sdk/src/components/TextDisplay.module.css b/components-sdk/src/components/TextDisplay.module.css
index 2b3479b..0f7559c 100644
--- a/components-sdk/src/components/TextDisplay.module.css
+++ b/components-sdk/src/components/TextDisplay.module.css
@@ -3,7 +3,7 @@
   border-radius: 3px;
 }
 
-.text_display_input[type="text"], .text_display_input[type="textbox"], .text_display [type="text"], .text_display [role="textbox"] {
+.text_display_input[type="text"], textarea.text_display_input, .text_display_input[type="number"], .text_display_input[type="textbox"], .text_display [type="text"], .text_display textarea, .text_display [type="number"], .text_display [role="textbox"] {
   padding: 0;
   min-height: 0;
   border: unset;
diff --git a/components-sdk/src/components/TextInput.module.css b/components-sdk/src/components/TextInput.module.css
new file mode 100644
index 0000000..c3b880d
--- /dev/null
+++ b/components-sdk/src/components/TextInput.module.css
@@ -0,0 +1,45 @@
+.textInput {
+  padding: 0.8rem 1.6rem;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  color: #dcddde;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  &:hover, &.open {
+    background: #101013;
+  }
+
+  .length {
+    position: absolute;
+    bottom: 4px;
+    right: 8px;
+    font-size: 1.2rem;
+    color: #8e8e99;
+  }
+
+  .desc {
+    font-style: italic !important;
+    color: gray !important;
+  }
+
+  .caret {
+    margin-inline-start: 1px;
+    width: 1px;
+    height: 1.6rem;
+    vertical-align: middle;
+    background: #dcddde;
+    display: inline-block;
+  }
+
+  .placeholder {
+    color: #8e8e99;
+    font-size: 1.3rem;
+  }
+
+  &.paragraph {
+    height: 100px;
+  }
+}
diff --git a/components-sdk/src/components/TextInput.tsx b/components-sdk/src/components/TextInput.tsx
new file mode 100644
index 0000000..48facb0
--- /dev/null
+++ b/components-sdk/src/components/TextInput.tsx
@@ -0,0 +1,170 @@
+import Styles from './TextInput.module.css';
+import { ComponentsProps } from '../Capsule';
+import { TextInputComponent, TextInputStyle } from '../utils/componentTypesModal';
+import { useTranslation } from 'react-i18next';
+import CapsuleStyles from '../Capsule.module.css';
+import { MenuArea, MenuLabel, MenuOption } from './Button';
+import { useStateOpen } from '../utils/useStateOpen';
+import { Dispatch, SetStateAction, useRef } from 'react';
+import Minimum from '../icons/Minimum.svg';
+import Maximum from '../icons/Maximum.svg';
+import MinimumActive from '../icons/MinimumActive.svg';
+import MaximumActive from '../icons/MaximumActive.svg';
+import AddDescription from '../icons/AddDescription.svg';
+import AddDescriptionActive from '../icons/AddDescriptionActive.svg';
+import DescriptionText from '../icons/DescriptionText.svg';
+import DescriptionTextActive from '../icons/DescriptionTextActive.svg';
+
+export function TextInput({ state, stateKey, stateManager }: ComponentsProps & { state: TextInputComponent }) {
+    const { open, setOpen, ignoreRef, closeLockRef } = useStateOpen(0);
+    const { t } = useTranslation('components-sdk');
+    const btn_select = useRef<HTMLDivElement>(null);
+
+    const len = (state.value || '').length;
+
+    return (
+        <div
+            className={
+                Styles.textInput +
+                (open ? ' ' + Styles.open : '') +
+                (state.style === TextInputStyle.PARAGRAPH ? ' ' + Styles.paragraph : '')
+            }
+            onClick={(ev) => {
+                if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
+                setOpen(1);
+            }}
+            ref={ignoreRef}
+        >
+            <div className={Styles.text}>
+                {state.value ? (
+                    <>
+                        {state.value}
+                        <span className={Styles.caret}></span>
+                    </>
+                ) : (
+                    <span className={Styles.desc}>
+                        <span className={Styles.caret}></span>
+                        {state.placeholder}
+                    </span>
+                )}
+                {!!state.max_length && (
+                    <div className={Styles.length}>
+                        {len}/{state.max_length}
+                    </div>
+                )}
+            </div>
+            {state.value && state.placeholder && (
+                <div className={Styles.placeholder}>
+                    {t('modal.text-input.placeholder-info')} {state.placeholder}
+                </div>
+            )}
+            {!!state.min_length && (
+                <div className={Styles.placeholder}>
+                    {t('modal.text-input.minimum-len-info')} {state.min_length}
+                </div>
+            )}
+            {!!open && (
+                <div className={CapsuleStyles.large_button_ctx + ' ' + CapsuleStyles.noright} ref={btn_select}>
+                    {open === 1 && (
+                        <MenuFirst state={state} stateKey={stateKey} stateManager={stateManager} setOpen={setOpen} />
+                    )}
+                    {open === 2 && (
+                        <MenuArea
+                            closeLockRef={closeLockRef}
+                            state={state.value ?? ''}
+                            stateKey={[...stateKey, 'value']}
+                            stateManager={stateManager}
+                            setOpen={setOpen}
+                            max={4000}
+                        />
+                    )}
+                    {open === 3 && (
+                        <MenuLabel
+                            closeLockRef={closeLockRef}
+                            state={state.placeholder ?? ''}
+                            stateKey={[...stateKey, 'placeholder']}
+                            stateManager={stateManager}
+                            setOpen={setOpen}
+                            max={200}
+                        />
+                    )}
+                    {open === 4 && (
+                        <MenuLabel
+                            closeLockRef={closeLockRef}
+                            state={state.min_length ?? null}
+                            stateKey={[...stateKey, 'min_length']}
+                            min={0}
+                            max={4000}
+                            nullable={true}
+                            number={true}
+                            stateManager={stateManager}
+                            setOpen={setOpen}
+                        />
+                    )}
+                    {open === 5 && (
+                        <MenuLabel
+                            closeLockRef={closeLockRef}
+                            state={state.max_length ?? null}
+                            stateKey={[...stateKey, 'max_length']}
+                            min={1}
+                            max={4000}
+                            nullable={true}
+                            number={true}
+                            stateManager={stateManager}
+                            setOpen={setOpen}
+                        />
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function MenuFirst({state, stateKey, stateManager, setOpen} : {
+    state: TextInputComponent,
+    stateKey: ComponentsProps['stateKey'],
+    stateManager: ComponentsProps['stateManager'],
+    setOpen: Dispatch<SetStateAction<number>>,
+}) {
+
+    const {t} = useTranslation("components-sdk");
+
+    return <>
+
+        <MenuOption src={DescriptionText} text={state.value ? t('modal.text-input.change-value') : t('modal.text-input.add-value')} onClick={(ev) => {
+            setOpen(2);
+            ev.stopPropagation();
+        }} />
+
+        {!!state.value && <MenuOption src={DescriptionTextActive} text={t('modal.text-input.clear-value')} onClick={() => {
+            stateManager.setKey({key: [...stateKey, "value"], value: null})
+        }} />}
+
+        <MenuOption src={AddDescription} text={state.placeholder ? t('modal.text-input.change-placeholder') : t('modal.text-input.add-placeholder')} onClick={(ev) => {
+            setOpen(3);
+            ev.stopPropagation();
+        }} />
+
+        {!!state.placeholder && <MenuOption src={AddDescriptionActive} text={t('modal.text-input.clear-placeholder')} onClick={() => {
+            stateManager.setKey({key: [...stateKey, "placeholder"], value: null})
+        }} />}
+
+        <MenuOption src={Minimum} text={state.min_length ? t('modal.text-input.change-minimum') : t('modal.text-input.set-minimum')} onClick={(ev) => {
+            setOpen(4);
+            ev.stopPropagation();
+        }} />
+
+        {!!state.min_length && <MenuOption src={MinimumActive} text={t('modal.text-input.clear-minimum')} onClick={() => {
+            stateManager.setKey({key: [...stateKey, "min_length"], value: null})
+        }} />}
+
+        <MenuOption src={Maximum} text={state.max_length ? t('modal.text-input.change-maximum') : t('modal.text-input.set-maximum')} onClick={(ev) => {
+            setOpen(5);
+            ev.stopPropagation();
+        }} />
+
+        {!!state.max_length && <MenuOption src={MaximumActive} text={t('modal.text-input.clear-maximum')} onClick={() => {
+            stateManager.setKey({key: [...stateKey, "max_length"], value: null})
+        }} />}
+    </>
+}
diff --git a/components-sdk/src/components/Thumbnail.tsx b/components-sdk/src/components/Thumbnail.tsx
index ae7a56d..8f2e60b 100644
--- a/components-sdk/src/components/Thumbnail.tsx
+++ b/components-sdk/src/components/Thumbnail.tsx
@@ -7,7 +7,7 @@ import AddDescription from '../icons/AddDescription.svg';
 import AddDescriptionActive from '../icons/AddDescriptionActive.svg';
 import { Dispatch, SetStateAction, useRef } from 'react';
 import CapsuleStyles from '../Capsule.module.css';
-import { MenuLabel } from './Button';
+import { MenuLabel, MenuOption } from './Button';
 import { ComponentsProps, default_settings } from '../Capsule';
 import { MediaGalleryItem, ThumbnailComponent } from '../utils/componentTypes';
 import { stateKeyType } from '../polyfills/StateManager';
@@ -18,7 +18,6 @@ import { useStateOpen } from '../utils/useStateOpen';
 import { ClosestType } from '../dnd/types';
 import { DragLines } from '../dnd/DragLine';
 import { useTranslation } from 'react-i18next';
-import DescriptionTextActive from '../icons/DescriptionTextActive.svg';
 
 export function Thumbnail({
     state,
@@ -89,6 +88,7 @@ export function Thumbnail({
                             stateManager={stateManager}
                             setOpen={setOpen}
                             placeholder={t('thumbnail.image-url')}
+                            max={512} // guessing, official limit unknown
                         />
                     )}
                     {open === 3 && (
@@ -99,6 +99,7 @@ export function Thumbnail({
                             stateManager={stateManager}
                             nullable={true}
                             setOpen={setOpen}
+                            max={1024}
                         />
                     )}
                 </div>
@@ -120,53 +121,33 @@ function MenuFirst({state, stateKey, stateManager, setOpen, openFileSelector, re
 }) {
     const {t} = useTranslation('components-sdk');
     return <>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={ev => {
+        <MenuOption src={Url} text={t('thumbnail.set-image-url')} onClick={ev => {
             stateManager.setKey({key: [...stateKey, "media", "url"], value: ''});
             setOpen(2)
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Url} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('thumbnail.set-image-url')}</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={ev => {
+        }} />
+        <MenuOption src={UploadImage} text={t('thumbnail.upload-image')} onClick={() => {
             openFileSelector();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={UploadImage} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('thumbnail.upload-image')}</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={ev => {
+        }} />
+        <MenuOption src={AddDescription} text={state.description ? t('thumbnail.change-description') : t('thumbnail.add-description')} onClick={ev => {
             setOpen(3)
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={AddDescription} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{state.description ? t('thumbnail.change-description') : t('thumbnail.add-description')}</div>
-        </div>
-        {!!state.description && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
+        }} />
+        {!!state.description && <MenuOption src={AddDescriptionActive} text={t('thumbnail.clear-description')} onClick={() => {
             stateManager.setKey({key: [...stateKey, "description"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={AddDescriptionActive} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('thumbnail.clear-description')}</div>
-        </div>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={ev => {
+        }} />}
+        <MenuOption src={state.spoiler ? SpoilerActiveIcon : SpoilerIcon} text={state.spoiler ? t('thumbnail.remove-spoiler') : t('thumbnail.set-spoiler')} onClick={ev => {
             stateManager.setKey({key: [...stateKey, "spoiler"], value: !state.spoiler});
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={state.spoiler ? SpoilerActiveIcon : SpoilerIcon} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{state.spoiler ? t('thumbnail.remove-spoiler') : t('thumbnail.set-spoiler')}</div>
-        </div>
-        {!!removeKeyParent && <div className={CapsuleStyles.large_button_ctx_item} onClick={ev => {
+        }} />
+        {!!removeKeyParent && <MenuOption src={TrashIcon} text={t('thumbnail.delete')} onClick={ev => {
             setOpen(0);
             stateManager.deleteKey({key: stateKey, removeKeyParent});
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={TrashIcon} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('thumbnail.delete')}</div>
-        </div>}
-        {(!!removeKeyParent && allowAddition) && <div className={CapsuleStyles.large_button_ctx_item + ' ' + CapsuleStyles.separator} onClick={ev => {
+        }} />}
+        {(!!removeKeyParent && allowAddition) && <MenuOption src={null} className={CapsuleStyles.separator} text={t('thumbnail.add-image')} onClick={ev => {
             setOpen(0);
             stateManager.appendKey({key: [...removeKeyParent, 'items'], value: default_settings.MediaGallery.items[0]});
             ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>{t('thumbnail.add-image')}</div>
-        </div>}
+        }} />}
     </>
 }
\ No newline at end of file
diff --git a/components-sdk/src/dnd/DragContext.tsx b/components-sdk/src/dnd/DragContext.tsx
index 154b0ec..543a00f 100644
--- a/components-sdk/src/dnd/DragContext.tsx
+++ b/components-sdk/src/dnd/DragContext.tsx
@@ -3,6 +3,7 @@ import { createContext, FC, ReactNode, useCallback, useContext, useMemo, useRef,
 import { StateManager } from '../polyfills/StateManager';
 import { DragEvents } from './DragEvents';
 import { BoundariesProps } from './boundaries';
+import { RenderMode } from '../utils/componentTypes';
 
 const DragContext = createContext<DragContextType | undefined>(undefined);
 
@@ -16,11 +17,13 @@ export function useDragContext(): DragContextType {
 
 export const DragContextProvider: FC<{
     children: ReactNode;
-    stateManager: StateManager
+    stateManager: StateManager;
+    renderMode: RenderMode
 } & BoundariesProps> = ({
           children,
           stateManager,
-          boundaries
+          boundaries,
+          renderMode
       }) => {
     const refs = useRef<Set<DroppableState>>(new Set());
 
@@ -46,7 +49,7 @@ export const DragContextProvider: FC<{
 
     return (
         <DragContext.Provider value={value}>
-            <DragEvents stateManager={stateManager} boundaries={boundaries}>{children}</DragEvents>
+            <DragEvents stateManager={stateManager} boundaries={boundaries} renderMode={renderMode}>{children}</DragEvents>
         </DragContext.Provider>
     );
 };
\ No newline at end of file
diff --git a/components-sdk/src/dnd/DragEvents.tsx b/components-sdk/src/dnd/DragEvents.tsx
index a0a5888..96c8168 100644
--- a/components-sdk/src/dnd/DragEvents.tsx
+++ b/components-sdk/src/dnd/DragEvents.tsx
@@ -6,6 +6,7 @@ import { useDragContext } from './DragContext';
 import { handleDragDrop } from './handleDragDrop';
 import { handleDragOver } from './handleDragOver';
 import { BoundariesProps, testBoundaries } from './boundaries';
+import { RenderMode } from '../utils/componentTypes';
 
 const handleDragStart = (e: DragEvent, { boundaries }: BoundariesProps) => {
     if (!testBoundaries(e.target, boundaries)) return;
@@ -32,7 +33,8 @@ const handleDragEnd = (
 export const DragEvents: FC<{
     children: ReactNode;
     stateManager: StateManager;
-} & BoundariesProps> = ({ children, stateManager, boundaries }) => {
+    renderMode: RenderMode;
+} & BoundariesProps> = ({ children, stateManager, boundaries, renderMode }) => {
     const { refs, visible, setVisible, keyToDelete } = useDragContext();
 
     useEffect(() => {
@@ -48,6 +50,7 @@ export const DragEvents: FC<{
             visible,
             setVisible,
             stateManager,
+            renderMode,
             keyToDelete,
             boundaries: boundaries
         });
@@ -67,7 +70,7 @@ export const DragEvents: FC<{
             window.removeEventListener('mouseup', onMouseUp);
         };
     }, [
-        visible, stateManager,
+        visible, stateManager, renderMode,
     ]);
 
     return <>{children}</>;
diff --git a/components-sdk/src/dnd/components.ts b/components-sdk/src/dnd/components.ts
index 1a9f169..952b7e0 100644
--- a/components-sdk/src/dnd/components.ts
+++ b/components-sdk/src/dnd/components.ts
@@ -2,14 +2,18 @@ import {
     Component,
     ComponentType,
     ComponentTypeUnofficial,
+    MediaGalleryComponent,
+    MediaGalleryItem,
     parseComponent,
     StringSelectComponent,
+    StringSelectComponentOption,
 } from '../utils/componentTypes';
 import { SECTIONABLE } from '../Capsule';
 import { uuidv4 } from '../utils/randomGen';
 import { DistanceProps, DistanceReturn, KeyToDeleteType } from './types';
 import { distanceCenter, distanceHorizontal, distanceVertical } from './distance';
 import { stateKeyType, StateManager } from '../polyfills/StateManager';
+import { parseModalComponent } from '../utils/componentTypesModal';
 
 /*
     * This file gathers all configuration how components can be dragged and dropped
@@ -25,6 +29,7 @@ export enum DroppableID {
     GALLERY_ITEM,
     STRING_SELECT,
     CONTAINER,
+    MODAL_TOP_LEVEL,
 }
 
 
@@ -32,6 +37,7 @@ export enum DroppableID {
 export function getDroppableOrientation(droppableId: DroppableID): (props: DistanceProps) => DistanceReturn {
     switch (droppableId) {
         case DroppableID.TOP_LEVEL:
+        case DroppableID.MODAL_TOP_LEVEL:
         case DroppableID.STRING_SELECT:
         case DroppableID.CONTAINER:
         case DroppableID.SECTION_CONTENT:
@@ -58,7 +64,18 @@ export function isValidLocation(compType: ComponentType | ComponentTypeUnofficia
     return (droppableId: DroppableID) => {
         switch (droppableId) {
             case DroppableID.TOP_LEVEL:
-                return true;
+                return compType === null || [
+                    ComponentType.ACTION_ROW, ComponentType.BUTTON, ComponentType.STRING_SELECT, ComponentType.SECTION,
+                    ComponentType.TEXT_DISPLAY, ComponentType.THUMBNAIL, ComponentType.MEDIA_GALLERY, ComponentType.FILE,
+                    ComponentType.SEPARATOR, ComponentType.CONTAINER, ComponentTypeUnofficial.MEDIA_GALLERY_ITEM,
+                    ComponentTypeUnofficial.STRING_SELECT_OPTION, ComponentType.LABEL,
+                ].includes(compType as any);
+            case DroppableID.MODAL_TOP_LEVEL:
+                return compType === null || [
+                    ComponentType.ACTION_ROW, ComponentType.STRING_SELECT, ComponentType.TEXT_INPUT, ComponentType.LABEL,
+                    ComponentType.FILE_UPLOAD, ComponentTypeUnofficial.STRING_SELECT_OPTION, ComponentType.TEXT_DISPLAY,
+                    ComponentType.SECTION
+                ].includes(compType as any);
             case DroppableID.BUTTON:
                 return compType == ComponentType.BUTTON;
             case DroppableID.SECTION_ADD_ACCESSORY:
@@ -67,7 +84,12 @@ export function isValidLocation(compType: ComponentType | ComponentTypeUnofficia
             case DroppableID.STRING_SELECT:
                 return compType == ComponentTypeUnofficial.STRING_SELECT_OPTION
             case DroppableID.CONTAINER:
-                return compType === null || compType !== ComponentType.CONTAINER;
+                return compType === null || [
+                    ComponentType.ACTION_ROW, ComponentType.BUTTON, ComponentType.STRING_SELECT, ComponentType.SECTION,
+                    ComponentType.TEXT_DISPLAY, ComponentType.THUMBNAIL, ComponentType.MEDIA_GALLERY, ComponentType.FILE,
+                    ComponentType.SEPARATOR, ComponentTypeUnofficial.MEDIA_GALLERY_ITEM, ComponentTypeUnofficial.STRING_SELECT_OPTION,
+                    ComponentType.LABEL,
+                ].includes(compType as any);
             case DroppableID.SECTION_CONTENT:
                 return SECTIONABLE.includes(compType as any)
             case DroppableID.GALLERY_ITEM:
@@ -78,68 +100,75 @@ export function isValidLocation(compType: ComponentType | ComponentTypeUnofficia
     };
 }
 
-function randomizeIds(data: any): any {
+export function randomizeIds(data: object): object;
+export function randomizeIds(data: unknown): unknown {
     if (Array.isArray(data)) {
         return data.map(randomizeIds);
     } else if (data && typeof data === 'object') {
+        // "value" in TextInput should not be randomized
+        const val = "type" in data && data.type == ComponentType.TEXT_INPUT ? ['custom_id'] : ['custom_id', 'value'];
+
         return Object.fromEntries(
             Object.entries(data).map(([key, value]) => [
                 key,
-                ['custom_id', 'value'].includes(key) ? uuidv4() : randomizeIds(value),
+                val.includes(key) ? uuidv4() : randomizeIds(value),
             ])
         );
     }
     return data;
 }
 
-export function guessComponentType(arg: object): ComponentType | ComponentTypeUnofficial | null {
-    if ('type' in arg && typeof arg.type === 'number' && arg.type in ComponentType) {
-        return arg.type;
-    }
-    if ('label' in arg && typeof arg.label === 'string' && 'value' in arg && typeof arg.value === 'string') {
-        return ComponentTypeUnofficial.STRING_SELECT_OPTION;
-    }
-    if (
+export function isOfficialComponent(arg: object): arg is Component {
+    return 'type' in arg && typeof arg.type === 'number' && arg.type in ComponentType;
+}
+
+export function isStringSelectComponentOption(arg: object): arg is StringSelectComponentOption {
+    return 'label' in arg && typeof arg.label === 'string' && 'value' in arg && typeof arg.value === 'string';
+}
+
+export function isMediaGalleryItem(arg: object): arg is MediaGalleryItem {
+    return (
         'media' in arg &&
         typeof arg.media === 'object' &&
         arg.media !== null &&
         !Array.isArray(arg.media) &&
         'url' in arg.media &&
         typeof arg.media.url === 'string'
-    ) {
-        return ComponentTypeUnofficial.MEDIA_GALLERY_ITEM;
-    }
+    )
+}
+
+export function guessComponentType(arg: object): ComponentType | ComponentTypeUnofficial | null {
+    if (isOfficialComponent(arg)) return arg.type;
+    if (isStringSelectComponentOption(arg)) return ComponentTypeUnofficial.STRING_SELECT_OPTION;
+    if (isMediaGalleryItem(arg)) return ComponentTypeUnofficial.MEDIA_GALLERY_ITEM;
     return null;
 }
 
-export function getValidObj(comp: object, droppableId: DroppableID, randomizeId: boolean) {
-    let compValid;
 
-    const compType = guessComponentType(comp);
-    if (!compType) return null;
+export function getValidObj(comp_: object, droppableId: DroppableID, randomizeId: boolean) {
+    const comp = randomizeId ? randomizeIds(comp_) : comp_;
+    const isOfficial = isOfficialComponent(comp);
+    const isMediaItem = isMediaGalleryItem(comp);
+    const isStringOption = isStringSelectComponentOption(comp);
 
-    // Don't assume that component matches the droppableId as it's not always the case
-    if (!isValidLocation(compType)(droppableId)) return null;
+    if (isMediaItem || (isOfficial && comp.type === ComponentType.THUMBNAIL)) {
+        if ([DroppableID.SECTION_ADD_ACCESSORY, DroppableID.SECTION_EDIT_ACCESSORY].includes(droppableId))
+            return parseComponent[ComponentType.THUMBNAIL](comp) ?? null;
 
-    if (randomizeId) comp = randomizeIds(comp);
+        else if (droppableId === DroppableID.GALLERY_ITEM)
+            return parseComponent[ComponentTypeUnofficial.MEDIA_GALLERY_ITEM](comp) ?? null;
 
-    if (
-        compType === ComponentType.BUTTON &&
-        ![DroppableID.BUTTON, DroppableID.SECTION_ADD_ACCESSORY, DroppableID.SECTION_EDIT_ACCESSORY].includes(
-            droppableId
-        )
-    ) {
-        compValid = parseComponent[ComponentType.ACTION_ROW]({
-            components: [comp],
-            type: ComponentType.ACTION_ROW,
-        } as Component);
-    } else if (compType === ComponentType.STRING_SELECT) { // Not possible via UI
-        compValid = parseComponent[ComponentType.ACTION_ROW]({
-            components: [comp],
-            type: ComponentType.ACTION_ROW,
-        } as Component);
-    } else if (compType === ComponentTypeUnofficial.STRING_SELECT_OPTION && droppableId !== DroppableID.STRING_SELECT) {
-        compValid = parseComponent[ComponentType.ACTION_ROW]({
+        return parseComponent[ComponentType.MEDIA_GALLERY]({
+            items: [comp],
+            type: ComponentType.MEDIA_GALLERY,
+        } as MediaGalleryComponent) ?? null;
+    }
+
+    if (isStringOption) {
+        if (droppableId === DroppableID.STRING_SELECT)
+            return parseComponent[ComponentTypeUnofficial.STRING_SELECT_OPTION](comp) ?? null;
+
+        return parseComponent[ComponentType.ACTION_ROW]({
             components: [{
                 type: ComponentType.STRING_SELECT,
                 custom_id: uuidv4(),
@@ -148,25 +177,46 @@ export function getValidObj(comp: object, droppableId: DroppableID, randomizeId:
                 ]
             } as StringSelectComponent],
             type: ComponentType.ACTION_ROW,
-        } as Component);
-    } else if ([ComponentType.THUMBNAIL, ComponentTypeUnofficial.MEDIA_GALLERY_ITEM].includes(compType)) {
-        if ([DroppableID.SECTION_ADD_ACCESSORY, DroppableID.SECTION_EDIT_ACCESSORY].includes(droppableId)) {
-            compValid = parseComponent[ComponentType.THUMBNAIL](comp);
-        } else if (droppableId === DroppableID.GALLERY_ITEM) {
-            compValid = parseComponent[ComponentTypeUnofficial.MEDIA_GALLERY_ITEM](comp);
-        } else {
-            compValid = parseComponent[ComponentType.MEDIA_GALLERY]({
-                items: [comp],
-                type: ComponentType.MEDIA_GALLERY,
-            } as Component);
+        } as Component) ?? null;
+    }
+
+    if (!isOfficial) return null;
+
+    // Only official components beyond this point
+
+    if (comp.type === ComponentType.BUTTON) {
+        if (
+            [DroppableID.BUTTON, DroppableID.SECTION_ADD_ACCESSORY, DroppableID.SECTION_EDIT_ACCESSORY]
+            .includes(droppableId)
+        )
+            return parseComponent[ComponentType.BUTTON](comp) ?? null;
+
+        return parseComponent[ComponentType.ACTION_ROW]({
+            components: [comp],
+            type: ComponentType.ACTION_ROW,
+        } as Component) ?? null;
+    }
+
+    if (comp.type === ComponentType.STRING_SELECT) {
+        return parseComponent[ComponentType.ACTION_ROW]({
+            components: [comp],
+            type: ComponentType.ACTION_ROW,
+        } as Component) ?? null;
+    }
+
+    // Select compatibility with modal components
+    if (comp.type === ComponentType.LABEL) {
+        const label = parseModalComponent[ComponentType.LABEL](comp);
+        if (label !== null && label.component.type === ComponentType.STRING_SELECT) {
+            return parseComponent[ComponentType.ACTION_ROW]({
+                components: [label.component],
+                type: ComponentType.ACTION_ROW,
+            } as Component) ?? null;
         }
-    } else {
-        // @ts-ignore We trust that guessComponentType() will ensure that comp is a valid component
-        compValid = parseComponent[compType](comp);
+        return null;
     }
-    if (!compValid) return null;
 
-    return compValid;
+    return parseComponent[comp.type](comp) ?? null;
 }
 
 function arraysEqual<T>(arr1: T[], arr2: T[]): boolean {
diff --git a/components-sdk/src/dnd/componentsModal.ts b/components-sdk/src/dnd/componentsModal.ts
new file mode 100644
index 0000000..3d06be7
--- /dev/null
+++ b/components-sdk/src/dnd/componentsModal.ts
@@ -0,0 +1,64 @@
+import { ComponentType, ComponentTypeUnofficial, parseComponent, TextDisplayComponent } from '../utils/componentTypes';
+import { LabelComponent, LabelPossible, parseModalComponent } from '../utils/componentTypesModal';
+import { generateRandomAnimal, uuidv4 } from '../utils/randomGen';
+import { DroppableID, isOfficialComponent, isStringSelectComponentOption, randomizeIds } from './components';
+
+function labelize(comp: object) {
+    return {
+        type: ComponentType.LABEL,
+        label: generateRandomAnimal(),
+        component: comp,
+    } as LabelComponent<LabelPossible>;
+}
+
+export function getValidModalObj(comp_: object, droppableId: DroppableID, randomizeId: boolean) {
+    const comp = randomizeId ? randomizeIds(comp_) : comp_;
+
+    const isOfficial = isOfficialComponent(comp);
+    const isStringOption = isStringSelectComponentOption(comp);
+
+    if (isStringOption) {
+        if (droppableId === DroppableID.STRING_SELECT)
+            return parseModalComponent[ComponentTypeUnofficial.STRING_SELECT_OPTION](comp) ?? null;
+
+        return parseModalComponent[ComponentType.LABEL](labelize({
+            type: ComponentType.STRING_SELECT,
+            custom_id: uuidv4(),
+            options: [comp]
+        })) ?? null;
+    }
+
+    if (!isOfficial) return null;
+
+    // Are top-level components are labels
+
+    // Select compatibility with chat components
+    if (comp.type === ComponentType.ACTION_ROW) {
+        const actionRow = parseComponent[ComponentType.ACTION_ROW](comp);
+        if (actionRow !== null && actionRow.components.length === 1 && actionRow.components[0].type === ComponentType.STRING_SELECT) {
+            return parseModalComponent[ComponentType.LABEL](labelize(actionRow.components[0]));
+        }
+        return null;
+    }
+
+    // Compatibility: convert sections to text displays
+    if (comp.type === ComponentType.SECTION) {
+        const sec = parseComponent[ComponentType.SECTION](comp);
+        if (sec === null) return null;
+
+        const text = sec.components.filter(c => c.type === ComponentType.TEXT_DISPLAY).map( c => c.content ).join('\n');
+        return {
+            type: ComponentType.TEXT_DISPLAY,
+            content: text,
+        } as TextDisplayComponent;
+    }
+
+    if (comp.type === ComponentType.LABEL || comp.type === ComponentType.TEXT_DISPLAY)
+        return parseModalComponent[comp.type](comp) ?? null;
+
+    return parseModalComponent[ComponentType.LABEL]({
+        type: ComponentType.LABEL,
+        label: generateRandomAnimal(),
+        component: comp,
+    } as LabelComponent<LabelPossible>) ?? null;
+}
\ No newline at end of file
diff --git a/components-sdk/src/dnd/handleDragDrop.ts b/components-sdk/src/dnd/handleDragDrop.ts
index 38c0fc1..ef75983 100644
--- a/components-sdk/src/dnd/handleDragDrop.ts
+++ b/components-sdk/src/dnd/handleDragDrop.ts
@@ -1,9 +1,10 @@
 import { ClosestType, DragContextType } from './types';
 import { StateManager } from '../polyfills/StateManager';
-import { customDropActions, getValidObj } from './components';
+import { customDropActions, getValidObj, guessComponentType, isValidLocation } from './components';
 import { default_settings } from '../Capsule';
-import { TextDisplayComponent } from '../utils/componentTypes';
+import { RenderMode, TextDisplayComponent } from '../utils/componentTypes';
 import { BoundariesProps, testBoundaries } from './boundaries';
+import { getValidModalObj } from './componentsModal';
 
 function assertValidJSON(arg: unknown): asserts arg is object {
     if (typeof arg !== 'object' || arg === null) throw new Error('Invalid component type');
@@ -36,12 +37,14 @@ export const handleDragDrop = (
         visible,
         setVisible,
         stateManager,
+        renderMode,
         keyToDelete: keyToDeleteRef,
         boundaries,
     }: {
         visible: DragContextType['visible'];
         setVisible: DragContextType['setVisible'];
         stateManager: StateManager;
+        renderMode: RenderMode;
         keyToDelete: DragContextType['keyToDelete'];
     } & BoundariesProps
 ) => {
@@ -64,7 +67,12 @@ export const handleDragDrop = (
     const comp = getJSON(e.dataTransfer);
     if (!comp) return;
 
-    const value = getValidObj(comp, visible.ref.droppableId, e.dataTransfer.dropEffect === 'copy');
+    const compType = guessComponentType(comp);
+    if (!compType) return;
+    if (!isValidLocation(compType)(visible.ref.droppableId)) return;
+
+    const compFunc = renderMode === RenderMode.MODAL ? getValidModalObj : getValidObj;
+    const value = compFunc(comp, visible.ref.droppableId, e.dataTransfer.dropEffect === 'copy');
     if (value === null) return;
 
     e.preventDefault();
diff --git a/components-sdk/src/icons/FileUpload.svg b/components-sdk/src/icons/FileUpload.svg
new file mode 100644
index 0000000..9f15053
--- /dev/null
+++ b/components-sdk/src/icons/FileUpload.svg
@@ -0,0 +1,11 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_2314)">
+<path d="M46.0667 72.3334C46.6334 72.5001 46.5334 73.3334 45.9334 73.3334H20C16.4638 73.3334 13.0724 71.9286 10.5719 69.4282C8.07145 66.9277 6.66669 63.5363 6.66669 60.0001V20.0001C6.66669 16.4639 8.07145 13.0725 10.5719 10.572C13.0724 8.07151 16.4638 6.66675 20 6.66675H45C45.9334 6.66675 46.6667 7.40008 46.6667 8.33341V16.6667C46.6667 21.087 48.4226 25.3263 51.5482 28.4519C54.6738 31.5775 58.9131 33.3334 63.3334 33.3334H71.6667C72.6 33.3334 73.3334 34.0667 73.3334 35.0001V42.6667C73.3234 42.9249 73.2387 43.1746 73.0895 43.3855C72.9404 43.5964 72.7331 43.7594 72.493 43.8547C72.253 43.9501 71.9903 43.9736 71.7371 43.9225C71.4839 43.8714 71.251 43.7478 71.0667 43.5667L70.4 42.9001C68.525 41.0274 65.9834 39.9755 63.3334 39.9755C60.6833 39.9755 58.1417 41.0274 56.2667 42.9001L42.9334 56.2334C42.0011 57.1625 41.2614 58.2664 40.7567 59.4819C40.2519 60.6974 39.9921 62.0006 39.9921 63.3167C39.9921 64.6329 40.2519 65.9361 40.7567 67.1516C41.2614 68.3671 42.0011 69.471 42.9334 70.4001C43.9334 71.4001 44.9334 71.9334 46.0667 72.3334Z" fill="#ABABAB"/>
+<path d="M72.1999 26.6666C72.2999 26.6666 72.3666 26.5666 72.3333 26.4666C71.847 25.4533 71.1934 24.5292 70.4 23.7332L56.2666 9.59991C55.4706 8.80644 54.5466 8.15284 53.5333 7.66658C53.5117 7.65377 53.4869 7.64733 53.4618 7.648C53.4367 7.64866 53.4122 7.65641 53.3913 7.67034C53.3704 7.68428 53.3539 7.70383 53.3436 7.72676C53.3334 7.74968 53.3298 7.77504 53.3333 7.79991V16.6666C53.3333 19.3187 54.3868 21.8623 56.2622 23.7376C58.1376 25.613 60.6811 26.6666 63.3333 26.6666H72.1999ZM60.9999 47.6666C61.623 47.0558 62.4608 46.7137 63.3333 46.7137C64.2058 46.7137 65.0435 47.0558 65.6666 47.6666L79 60.9999C79.4814 61.6418 79.7151 62.4358 79.6582 63.2362C79.6013 64.0366 79.2577 64.7896 78.6903 65.3569C78.1229 65.9243 77.3699 66.268 76.5696 66.3249C75.7692 66.3817 74.9752 66.148 74.3333 65.6666L66.6666 58.0666V76.6666C66.6666 77.5506 66.3154 78.3985 65.6903 79.0236C65.0652 79.6487 64.2173 79.9999 63.3333 79.9999C62.4492 79.9999 61.6014 79.6487 60.9763 79.0236C60.3511 78.3985 59.9999 77.5506 59.9999 76.6666V58.0332L52.3333 65.6999C51.6918 66.2418 50.8694 66.5216 50.0305 66.4834C49.1917 66.4451 48.3981 66.0917 47.8086 65.4937C47.219 64.8958 46.8769 64.0973 46.8506 63.258C46.8243 62.4187 47.1157 61.6003 47.6666 60.9666L60.9999 47.6332V47.6666Z" fill="#ABABAB"/>
+</g>
+<defs>
+<clipPath id="clip0_19_2314">
+<rect width="80" height="80" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/components-sdk/src/icons/MaximumActive.svg b/components-sdk/src/icons/MaximumActive.svg
new file mode 100644
index 0000000..2d10672
--- /dev/null
+++ b/components-sdk/src/icons/MaximumActive.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.7498 5.21033C89.5521 4.60862 90.5453 4.31697 91.5457 4.38806C92.546 4.45926 93.487 4.88892 94.1961 5.59803C94.9052 6.30716 95.3348 7.24812 95.406 8.24842C95.4771 9.24888 95.1845 10.2419 94.5828 11.0443L11.2498 94.3773C10.8916 94.8548 10.435 95.2498 9.9109 95.5355C9.38676 95.8213 8.80714 95.9913 8.21168 96.0336C7.61629 96.0759 7.01895 95.9894 6.45973 95.7806C5.90048 95.5719 5.39258 95.2457 4.97047 94.8236C4.54836 94.4015 4.22121 93.8937 4.01246 93.3344C3.80379 92.7752 3.71823 92.1776 3.76051 91.5824C3.80282 90.9869 3.97282 90.4074 4.25855 89.8832C4.54429 89.3591 4.9392 88.9024 5.41676 88.5443L88.7498 5.21033ZM86.0838 24.4262C86.7871 26.0089 87.1648 27.7349 87.1648 29.5004V44.4418L90.1121 47.389C91.7377 49.0155 91.738 51.6524 90.1121 53.2787L87.1648 56.226V71.1674C87.1645 74.4817 85.8483 77.6616 83.5046 80.0053C81.1609 82.3488 77.9812 83.6653 74.6668 83.6654C72.3669 83.6653 70.5023 81.8001 70.5017 79.5004C70.5019 77.2003 72.3667 75.3354 74.6668 75.3353C75.7719 75.3353 76.8324 74.896 77.614 74.1146C78.3955 73.3332 78.8344 72.2725 78.8347 71.1674V54.5004C78.8348 53.3961 79.2747 52.337 80.0554 51.556L81.2761 50.3334L80.0554 49.1127C79.2746 48.3319 78.835 47.2716 78.8347 46.1674V31.6937L86.0838 24.4262ZM70.9998 44.0004C74.3133 44.0005 76.9998 46.6868 76.9998 50.0004C76.9994 53.3137 74.3131 56.0002 70.9998 56.0004H55.9998V72.0004C55.9994 75.3137 53.3131 78.0002 49.9998 78.0004C46.6864 78.0002 44.0001 75.3137 43.9998 72.0004V66.6166L66.5593 44.0004H70.9998ZM24.6668 17.0023C26.9669 17.0025 28.8318 18.8672 28.8318 21.1674C28.8312 23.467 26.9665 25.3322 24.6668 25.3324C23.5614 25.3324 22.5012 25.7715 21.7195 26.5531C20.9382 27.3347 20.4989 28.3952 20.4988 29.5004V46.1674C20.4985 47.2716 20.0589 48.3319 19.2781 49.1127L18.0564 50.3334L19.2781 51.556C20.0587 52.337 20.4987 53.3962 20.4988 54.5004V68.5013L13.1052 75.9125C12.4932 74.4209 12.1689 72.8108 12.1687 71.1674V56.226L9.22145 53.2787C7.59546 51.6523 7.59568 49.0155 9.22145 47.389L12.1687 44.4418V29.5004C12.1688 26.1861 13.4856 23.0072 15.8289 20.6635C18.1727 18.3196 21.352 17.0024 24.6668 17.0023ZM49.9998 23.0004C53.3133 23.0005 55.9998 25.6868 55.9998 29.0004V32.9115L32.9685 56.0004H27.9998C24.6864 56.0002 22.0001 53.3137 21.9998 50.0004C21.9998 46.6868 24.6862 44.0005 27.9998 44.0004H43.9998V29.0004C43.9998 25.6867 46.6862 23.0005 49.9998 23.0004Z" fill="#3AA360"/>
+</svg>
diff --git a/components-sdk/src/icons/MinimumActive.svg b/components-sdk/src/icons/MinimumActive.svg
new file mode 100644
index 0000000..21d467f
--- /dev/null
+++ b/components-sdk/src/icons/MinimumActive.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.7498 5.21033C89.5521 4.60862 90.5453 4.31697 91.5457 4.38806C92.546 4.45926 93.487 4.88892 94.1961 5.59803C94.9052 6.30716 95.3348 7.24812 95.406 8.24842C95.4771 9.24888 95.1845 10.2419 94.5828 11.0443L11.2498 94.3773C10.8916 94.8548 10.435 95.2498 9.9109 95.5355C9.38676 95.8213 8.80714 95.9913 8.21168 96.0336C7.61629 96.0759 7.01895 95.9894 6.45973 95.7806C5.90048 95.5719 5.39258 95.2457 4.97047 94.8236C4.54836 94.4015 4.22121 93.8937 4.01246 93.3344C3.80379 92.7752 3.71823 92.1776 3.76051 91.5824C3.80282 90.9869 3.97282 90.4074 4.25855 89.8832C4.54429 89.3591 4.9392 88.9024 5.41676 88.5443L88.7498 5.21033ZM86.0838 24.4262C86.7872 26.009 87.1648 27.7349 87.1648 29.5004V44.4418L90.1121 47.389C91.7376 49.0155 91.738 51.6524 90.1121 53.2787L87.1648 56.226V71.1674C87.1645 74.4817 85.8483 77.6616 83.5046 80.0053C81.1609 82.3487 77.9811 83.6653 74.6668 83.6654C72.367 83.6652 70.5023 81.8 70.5017 79.5004C70.5019 77.2004 72.3668 75.3355 74.6668 75.3353C75.7718 75.3352 76.8325 74.8959 77.614 74.1146C78.3955 73.3332 78.8344 72.2725 78.8347 71.1674V54.5004C78.8348 53.3961 79.2747 52.337 80.0554 51.556L81.2761 50.3334L80.0554 49.1127C79.2747 48.3319 78.835 47.2715 78.8347 46.1674V31.6937L86.0838 24.4262ZM24.6668 17.0023C26.9668 17.0026 28.8318 18.8673 28.8318 21.1674C28.8312 23.4669 26.9664 25.3321 24.6668 25.3324C23.5615 25.3325 22.5011 25.7716 21.7195 26.5531C20.9382 27.3347 20.4989 28.3952 20.4988 29.5004V46.1674C20.4985 47.2716 20.0589 48.3319 19.2781 49.1127L18.0564 50.3334L19.2781 51.556C20.0586 52.337 20.4987 53.3962 20.4988 54.5004V68.5013L13.1052 75.9125C12.4931 74.4209 12.1689 72.8108 12.1687 71.1674V56.226L9.22145 53.2787C7.59557 51.6523 7.5957 49.0155 9.22145 47.389L12.1687 44.4418V29.5004C12.1688 26.1861 13.4856 23.0072 15.8289 20.6635C18.1727 18.3197 21.3521 17.0024 24.6668 17.0023ZM32.9685 56.0004H27.9998C24.6864 56.0002 22.0001 53.3137 21.9998 50.0004C21.9998 46.6868 24.6862 44.0006 27.9998 44.0004H44.9382L32.9685 56.0004ZM70.9998 44.0004C74.3133 44.0006 76.9998 46.6868 76.9998 50.0004C76.9994 53.3136 74.3131 56.0002 70.9998 56.0004H54.5896L66.5593 44.0004H70.9998Z" fill="#3AA360"/>
+</svg>
diff --git a/components-sdk/src/icons/Required.svg b/components-sdk/src/icons/Required.svg
new file mode 100644
index 0000000..6ef8250
--- /dev/null
+++ b/components-sdk/src/icons/Required.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="100"  height="100"  viewBox="0 0 24 24"  fill="#3AA360"  class="icon icon-tabler icons-tabler-filled icon-tabler-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" /></svg>
diff --git a/components-sdk/src/icons/RequiredActive.svg b/components-sdk/src/icons/RequiredActive.svg
new file mode 100644
index 0000000..5111070
--- /dev/null
+++ b/components-sdk/src/icons/RequiredActive.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="100"  height="100"  viewBox="0 0 24 24"  fill="none"  stroke="#ABABAB"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
diff --git a/components-sdk/src/locales/en.json b/components-sdk/src/locales/en.json
index 95f095a..2431372 100644
--- a/components-sdk/src/locales/en.json
+++ b/components-sdk/src/locales/en.json
@@ -59,5 +59,36 @@
   "button.change-emoji": "Change emoji",
   "button.clear-emoji": "Clear emoji",
   "button.change-label": "Change label",
-  "button.delete": "Delete"
+  "button.delete": "Delete",
+  "button.add-input": "Add question",
+  "components.modal.file-upload": "Ask for file",
+  "components.modal.short-input": "Ask for short text",
+  "components.modal.paragraph-input": "Ask for long text",
+  "components.modal.content": "Add helper text",
+  "components.modal.string-select": "Add select menu",
+  "modal.text-input.placeholder-info": "When empty: ",
+  "modal.text-input.minimum-len-info": "Minimum length: ",
+  "modal.text-input.change-value": "Change prefilled value",
+  "modal.text-input.add-value": "Add prefilled value",
+  "modal.text-input.clear-value": "Clear prefilled value",
+  "modal.text-input.change-placeholder": "Change placeholder",
+  "modal.text-input.add-placeholder": "Add placeholder",
+  "modal.text-input.clear-placeholder": "Clear placeholder",
+  "modal.text-input.set-minimum": "Set minimum length",
+  "modal.text-input.change-minimum": "Change minimum length",
+  "modal.text-input.clear-minimum": "Clear minimum length",
+  "modal.text-input.set-maximum": "Set maximum length",
+  "modal.text-input.change-maximum": "Change maximum length",
+  "modal.text-input.clear-maximum": "Clear maximum length",
+  "modal.label.change-label": "Change label",
+  "modal.label.add-description": "Add description",
+  "modal.label.change-description": "Change description",
+  "modal.label.clear-description": "Clear description",
+  "modal.label.unset-required": "Set as optional",
+  "modal.label.set-required": "Set as required",
+  "modal.label.required": "required",
+  "modal.file-upload.info-one": "Users will send here one file or image.",
+  "modal.file-upload.info-multiple": "Users will send here multiple files or images.",
+  "modal.file-upload.set-maximum": "Set maximum number of files",
+  "modal.file-upload.set-minimum": "Set minimum number of files"
 }
\ No newline at end of file
diff --git a/components-sdk/src/locales/pl.json b/components-sdk/src/locales/pl.json
index 0976af2..b0978f5 100644
--- a/components-sdk/src/locales/pl.json
+++ b/components-sdk/src/locales/pl.json
@@ -59,5 +59,36 @@
   "button.change-emoji": "Zmień emoji",
   "button.clear-emoji": "Usuń emoji",
   "button.change-label": "Zmień etykietę",
-  "button.delete": "Usuń"
+  "button.delete": "Usuń",
+  "button.add-input": "Dodaj pytanie",
+  "components.modal.file-upload": "Zapytaj o plik",
+  "components.modal.short-input": "Zapytaj o krótki tekst",
+  "components.modal.paragraph-input": "Zapytaj o długi tekst",
+  "components.modal.content": "Dodaj tekst pomocniczy",
+  "components.modal.string-select": "Dodaj menu rozwijane",
+  "modal.text-input.placeholder-info": "Gdy puste: ",
+  "modal.text-input.minimum-len-info": "Minimalna długość: ",
+  "modal.text-input.change-value": "Zmień wstępnie wpisaną wartość",
+  "modal.text-input.add-value": "Dodaj wstępnie wpisaną wartość",
+  "modal.text-input.clear-value": "Usuń wstępnie wpisaną wartość",
+  "modal.text-input.change-placeholder": "Zmień tekst przed wyborem",
+  "modal.text-input.add-placeholder": "Dodaj tekst przed wyborem",
+  "modal.text-input.clear-placeholder": "Usuń tekst przed wyborem",
+  "modal.text-input.set-minimum": "Ustaw minimalną długość",
+  "modal.text-input.change-minimum": "Zmień minimalną długość",
+  "modal.text-input.clear-minimum": "Usuń minimalną długość",
+  "modal.text-input.set-maximum": "Ustaw maksymalną długość",
+  "modal.text-input.change-maximum": "Zmień maksymalną długość",
+  "modal.text-input.clear-maximum": "Usuń maksymalną długość",
+  "modal.label.change-label": "Zmień etykietę",
+  "modal.label.add-description": "Dodaj opis",
+  "modal.label.change-description": "Zmień opis",
+  "modal.label.clear-description": "Usuń opis",
+  "modal.label.unset-required": "Ustaw jako opcjonalne",
+  "modal.label.set-required": "Ustaw jako wymagane",
+  "modal.label.required": "wymagane",
+  "modal.file-upload.info-one": "Użytkownicy wyślą tutaj jeden plik lub obrazek.",
+  "modal.file-upload.info-multiple": "Użytkownicy wyślą tutaj wiele plików lub obrazków.",
+  "modal.file-upload.set-maximum": "Ustaw maksymalną liczbę plików",
+  "modal.file-upload.set-minimum": "Ustaw minimalną liczbę plików"
 }
\ No newline at end of file
diff --git a/components-sdk/src/utils/componentTypes.ts b/components-sdk/src/utils/componentTypes.ts
index 495d84b..0a2e78d 100644
--- a/components-sdk/src/utils/componentTypes.ts
+++ b/components-sdk/src/utils/componentTypes.ts
@@ -1,13 +1,12 @@
-import { BetterInput, BetterInputProps } from '../polyfills/BetterInput';
+import { BetterInput } from '../polyfills/BetterInput';
 import { EmojiPicker } from '../polyfills/EmojiPicker';
 import { EmojiShow } from '../polyfills/EmojiShow';
 import { getFileNameType, getFileType, setFileType } from '../polyfills/files';
 import { ColorPicker } from '../polyfills/ColorPicker';
-import { FC } from 'react';
 import { ActionMenu } from '../polyfills/ActionMenu';
 
 // This fragment of code is written in dedication to the JS devs who have to deal with this mess every day.
-function isObject(arg: unknown): arg is object {
+export function isObject(arg: unknown): arg is object {
     return typeof arg === 'object' && arg !== null && !Array.isArray(arg);
 }
 
@@ -16,6 +15,7 @@ export enum ComponentType {
     ACTION_ROW = 1,
     BUTTON = 2,
     STRING_SELECT = 3,
+    TEXT_INPUT = 4,
 
     SECTION = 9,
     TEXT_DISPLAY = 10,
@@ -23,7 +23,9 @@ export enum ComponentType {
     MEDIA_GALLERY = 12,
     FILE = 13,
     SEPARATOR = 14,
-    CONTAINER = 17
+    CONTAINER = 17,
+    LABEL = 18,
+    FILE_UPLOAD = 19,
 }
 
 export enum ComponentTypeUnofficial {
@@ -42,8 +44,16 @@ export const parseComponent = {
     [ComponentType.FILE]: parseFileComponent,
     [ComponentType.SEPARATOR]: parseSeparatorComponent,
     [ComponentType.CONTAINER]: parseContainerComponent,
+    [ComponentType.TEXT_INPUT]: () => null,
+    [ComponentType.LABEL]: () => null,
+    [ComponentType.FILE_UPLOAD]: () => null,
     [ComponentTypeUnofficial.MEDIA_GALLERY_ITEM]: parseMediaGalleryItem,
     [ComponentTypeUnofficial.STRING_SELECT_OPTION]: parseStringSelectComponentOption,
+} as const;
+
+export enum RenderMode {
+    MESSAGE = 0,
+    MODAL = 1
 }
 
 export type PassProps = {
@@ -56,6 +66,7 @@ export type PassProps = {
     EmojiShow: EmojiShow,
     ActionMenu?: ActionMenu,
     interactiveDisabled: boolean,
+    renderMode?: RenderMode,
 }
 
 export enum ButtonStyle {
diff --git a/components-sdk/src/utils/componentTypesModal.ts b/components-sdk/src/utils/componentTypesModal.ts
new file mode 100644
index 0000000..1b50b57
--- /dev/null
+++ b/components-sdk/src/utils/componentTypesModal.ts
@@ -0,0 +1,168 @@
+import {
+    Component,
+    ComponentType,
+    ComponentTypeUnofficial,
+    parseBaseComponent,
+    parseComponent,
+    parseStringSelectComponentOption,
+    StringSelectComponent,
+    TextDisplayComponent,
+} from './componentTypes';
+
+export type LabelPossible = TextInputComponent | ModalStringSelectComponent | FileUploadComponent;
+
+export const parseModalComponent = {
+    [ComponentType.ACTION_ROW]: () => null,
+    [ComponentType.BUTTON]: () => null,
+    [ComponentType.STRING_SELECT]: parseStringSelectComponent,
+    [ComponentType.SECTION]: () => null,
+    [ComponentType.TEXT_DISPLAY]: parseTextDisplayComponent,
+    [ComponentType.THUMBNAIL]: () => null,
+    [ComponentType.MEDIA_GALLERY]: () => null,
+    [ComponentType.FILE]: () => null,
+    [ComponentType.SEPARATOR]: () => null,
+    [ComponentType.CONTAINER]: () => null,
+    [ComponentType.TEXT_INPUT]: parseTextInputComponent,
+    [ComponentType.LABEL]: parseLabelComponent,
+    [ComponentType.FILE_UPLOAD]: parseFileUploadComponent,
+    [ComponentTypeUnofficial.MEDIA_GALLERY_ITEM]: () => null,
+    [ComponentTypeUnofficial.STRING_SELECT_OPTION]: parseStringSelectComponentOption,
+} as const;
+
+// All components that have 'required' field supported in modals
+export const MODAL_SUPPORTS_REQUIRED: ComponentType[] = [
+    ComponentType.TEXT_INPUT,
+    ComponentType.STRING_SELECT,
+    ComponentType.FILE_UPLOAD,
+]
+
+export enum TextInputStyle {
+    SHORT = 1,
+    PARAGRAPH = 2,
+}
+
+export interface TextInputComponent extends Component {
+    type: ComponentType.TEXT_INPUT;
+    custom_id: string;
+    style: TextInputStyle;
+    // label?: string;  deprecated
+    min_length?: number | null;
+    max_length?: number | null;
+    required?: boolean;
+    value?: string | null;
+    placeholder?: string | null;
+}
+
+function parseTextInputComponent(component: Component): TextInputComponent | null {
+    if (!('custom_id' in component) || typeof component.custom_id !== 'string') return null;
+    if (
+        !('style' in component) ||
+        !(component.style === TextInputStyle.SHORT || component.style === TextInputStyle.PARAGRAPH)
+    )
+        return null;
+
+    const min_length = (
+        'min_length' in component && typeof component.min_length === 'number' &&
+        component.min_length >= 0 && component.min_length <= 4000
+    ) ? component.min_length : null;
+
+    const max_length = (
+        'max_length' in component && typeof component.max_length === 'number' &&
+        component.max_length >= 1 && component.max_length <= 4000
+    ) ? component.max_length : null;
+
+    const required = ('required' in component) ? !!component.required : true;
+    const value = ('value' in component && typeof component.value === 'string') ? component.value : null;
+    const placeholder = ('placeholder' in component && typeof component.placeholder === 'string') ? component.placeholder : null;
+
+    return {
+        type: ComponentType.TEXT_INPUT,
+        custom_id: component.custom_id,
+        style: component.style,
+        min_length,
+        max_length,
+        required,
+        value,
+        placeholder
+    }
+}
+
+
+export interface LabelComponent<T extends LabelPossible> extends Component {
+    type: ComponentType.LABEL;
+    label: string;
+    description?: string | null;
+    component: T;
+}
+
+function parseLabelComponent(component: Component): LabelComponent<LabelPossible> | null {
+    if (!('label' in component) || typeof component.label !== 'string') return null;
+    if (!('component' in component)) return null;
+    const child = parseBaseComponent(component.component);
+    if (child === null) return null;
+
+    let childParsed: LabelPossible | null = null;
+
+    switch (child.type) {
+        case ComponentType.TEXT_INPUT:
+        case ComponentType.STRING_SELECT:
+        case ComponentType.FILE_UPLOAD:
+            const func = parseModalComponent[child.type];
+            if (typeof func !== 'undefined') childParsed = func(child);
+            break;
+    }
+
+    if (childParsed === null) return null;
+
+    const description =
+        'description' in component && typeof component.description === 'string' ? component.description : null;
+
+    return {
+        type: ComponentType.LABEL,
+        label: component.label,
+        description,
+        component: childParsed,
+    };
+}
+
+export interface FileUploadComponent extends Component {
+    type: ComponentType.FILE_UPLOAD;
+    custom_id: string;
+    min_values?: number;
+    max_values?: number;
+    required?: boolean;
+}
+
+function parseFileUploadComponent(component: Component): FileUploadComponent | null {
+    if (!('custom_id' in component) || typeof component.custom_id !== 'string') return null;
+
+    const min_values = 'min_values' in component && typeof component.min_values === 'number' ? component.min_values : 1;
+    const max_values = 'max_values' in component && typeof component.max_values === 'number' ? component.max_values : 1;
+    const required = 'required' in component ? !!component.required : true;
+
+    return {
+        type: ComponentType.FILE_UPLOAD,
+        custom_id: component.custom_id,
+        min_values,
+        max_values,
+        required,
+    };
+}
+
+export type ModalStringSelectComponent = Omit<StringSelectComponent, 'disabled'> & {required?: boolean};
+
+function parseStringSelectComponent(component: Component): ModalStringSelectComponent | null {
+    const comp = parseComponent[ComponentType.STRING_SELECT](component);
+    if (comp === null) return null;
+
+    const { disabled, ...base } = comp;
+    const required = ('required' in component) ? !!component.required : true;
+    return {
+        ...base,
+        required,
+    }
+}
+
+function parseTextDisplayComponent(component: Component): TextDisplayComponent | null {
+    return parseComponent[ComponentType.TEXT_DISPLAY](component);
+}
\ No newline at end of file
diff --git a/components-sdk/src/utils/useStateOpen.ts b/components-sdk/src/utils/useStateOpen.ts
index 8eefe7f..16b76cb 100644
--- a/components-sdk/src/utils/useStateOpen.ts
+++ b/components-sdk/src/utils/useStateOpen.ts
@@ -17,6 +17,9 @@ export function useStateOpen<T>(defaultValue: T): {
     }, [ignoreRef.current]);
 
     const documentKeyDown = useCallback((ev: KeyboardEvent) => {
+        // @ts-ignore
+        if (closeLockRef.current == 'SHIFT' && ev.key == 'Enter' && !ev.shiftKey) return;
+
         if (ev.key == "Enter" || ev.key == "Escape") {
             setOpen(defaultValue);
         }
diff --git a/website/libs.config.ts b/website/libs.config.ts
index 4fde2b3..70911b3 100644
--- a/website/libs.config.ts
+++ b/website/libs.config.ts
@@ -8,6 +8,12 @@ export const libs: {
         path: string;
     };
 } = {
+    modal: {
+        name: 'JSON: Modal Format',
+        language: 'json',
+        path: '/modal'
+    },
+
     dpp: {
         name: 'C++: DPP',
         language: 'cpp',
diff --git a/website/src/App.tsx b/website/src/App.tsx
index e867979..7c1c17a 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -1,7 +1,7 @@
-import { Capsule, PassProps } from 'components-sdk';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Capsule, PassProps, RenderMode } from 'components-sdk';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { actions, DisplaySliceManager, RootState } from './state';
+import { actions, displaySlice, DisplaySliceManager, RootState } from './state';
 import { BetterInput } from './BetterInput';
 import { EmojiPicker } from './EmojiPicker';
 import { EmojiShow } from './EmojiShow';
@@ -15,31 +15,19 @@ import { useRouter } from './useRouter';
 import { Trans, useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import { supportedLngs } from '../libs.config';
-
+import defaultJson from './defaultJson';
+import defaultJsonModal from './defaultJsonModal';
+import { Webhook } from './Webhook';
 
 webhookImplementation.init();
 
-function getThreadId(webhookUrl: string) {
-    try {
-        const parsed_url = new URL(webhookUrl);
-        const parsed_query = new URLSearchParams(parsed_url.search);
-        const thread_id = parsed_query.get('thread_id');
-        return thread_id || null;
-    } catch (e) {
-        return null;
-    }
-}
-
 function App() {
     const dispatch = useDispatch();
     const stateManager = useMemo(() => new DisplaySliceManager(dispatch), [dispatch]);
     const state = useSelector((state: RootState) => state.display.data)
-    const webhookUrl = useSelector((state: RootState) => state.display.webhookUrl);
     const response = useSelector((state: RootState) => state.display.webhookResponse);
-    const showThread = useSelector((state: RootState) => state.display.showThread);
     const isDefault = useSelector((state: RootState) => state.display.isDefault);
     const [page, setPage] = useRouter();
-    const [postTitle, setPostTitle] = useState<string>("");
     useHashRouter();
 
     const setFile = useCallback(webhookImplementation.setFile, []);
@@ -55,69 +43,16 @@ function App() {
         // ActionMenu,
         EmojiShow,
         interactiveDisabled: false,
-    }), []);
-
+        renderMode: page === 'modal' ? RenderMode.MODAL : RenderMode.MESSAGE
+    }), [page]);
     useEffect(() => {
-        const getData = setTimeout(() => localStorage.setItem("discord.builders__webhookToken", webhookUrl), 1000)
-        return () => clearTimeout(getData)
-    }, [webhookUrl]);
-
-
-    let parsed_url: URL | null = null;
-    try {
-        parsed_url = new URL(webhookUrl);
-
-        if (parsed_url.pathname.startsWith('/api/webhooks/') && parsed_url.hostname === 'discord.com') {
-            parsed_url.protocol = 'https:';
-            parsed_url.pathname = '/api/v10/webhooks/' + parsed_url.pathname.slice('/api/webhooks/'.length);
-        }
-
-        const parsed_query = new URLSearchParams(parsed_url.search);
-        parsed_query.set('with_components', 'true');
-        parsed_url.search = parsed_query.toString();
-    } catch (e) {}
+        if (isDefault) dispatch(displaySlice.actions.overwriteDefaultState(page === 'modal' ? defaultJsonModal : defaultJson))
+    }, [isDefault, page]);
 
     const stateKey = useMemo(() => ['data'], [])
 
     const errors = useMemo(() => webhookImplementation.getErrors(response), [response]);
 
-    const threadId = useMemo(() => getThreadId(webhookUrl), [webhookUrl]);
-    useEffect(() => {
-        if (threadId) dispatch(actions.setShowThread())
-    }, [threadId]);
-
-    const sendMessage = async () => {
-        const req = await fetch(String(parsed_url), webhookImplementation.prepareRequest(state))
-
-        const status_code = req.status;
-        if (status_code === 204) return dispatch(actions.setWebhookResponse({"status": "204 Success"}));
-
-        const error_data = await req.json();
-
-        if (error_data?.code === 220001 && dialog.current !== null) {
-            dialog.current.showModal();
-            dispatch(actions.setWebhookResponse(null))
-            return;
-        }
-
-        dispatch(actions.setWebhookResponse(error_data))
-    }
-
-    const sendMessageWithTitle = async () => {
-        if (!postTitle) return;
-        dialog.current?.close();
-
-        const req = await fetch(String(parsed_url), webhookImplementation.prepareRequest(state, postTitle))
-
-        const status_code = req.status;
-        if (status_code === 204) return dispatch(actions.setWebhookResponse({"status": "204 Success"}));
-
-        const error_data = await req.json();
-        dispatch(actions.setWebhookResponse(error_data))
-    }
-
-    const dialog = useRef<HTMLDialogElement>(null);
-
     if (page === '404.not-found') {
         if (!window.location.href.includes('/not-found')) window.location.href = '/not-found';
         return <div><meta name="robots" content="noindex" /><h1>404 — Page not found</h1></div>;
@@ -139,7 +74,7 @@ function App() {
                 dispatch(actions.setKey({key: ['data'], value: []}));
             }}>{t('welcome.clear')}</button></p>
         </div>}
-        {(isDefault && page !== '200.home') && <div className={Styles.alert}>
+        {(isDefault && page !== '200.home' && page !== 'modal') && <div className={Styles.alert}>
             <p>{t('welcome.welcome')}</p>
             <p><Trans t={t} i18nKey={"welcome.codegen"} components={{
                 b: <b />,
@@ -147,7 +82,7 @@ function App() {
 
             <p><button onClick={() => {
                 dispatch(actions.setKey({key: ['data'], value: []}));
-            }}>Clear everything</button></p>
+            }}>{t('welcome.clear')}</button></p>
         </div>}
         <ErrorBoundary fallback={<></>}>
             <Capsule state={state}
@@ -156,6 +91,7 @@ function App() {
                      passProps={passProps}
                      className={Styles.preview}
                      errors={errors}
+                     modalTitle={t('modal.title')}
             />
         </ErrorBoundary>
         <div className={Styles.json}>
@@ -169,39 +105,7 @@ function App() {
                      src="https://img.shields.io/github/commit-activity/t/StartITBot/discord.builders?style=for-the-badge&color=248045" />
             </div></a>
 
-            <p style={{marginBottom: '0.5rem', marginTop: '4rem'}}><span style={{fontSize: 16, color: 'white', fontWeight: '500'}}>{t('webhook.title')}</span>{!showThread && <> (<span className={Styles.link} onClick={() => dispatch(actions.setShowThread())}>{t('webhook.thread')}</span>) </>}</p>
-            <div className={Styles.input_pair}>
-                <div>
-                    <input className={Styles.input} placeholder={"Webhook link"} type="text" value={webhookUrl}
-                           onChange={ev => dispatch(actions.setWebhookUrl(ev.target.value))}/>
-                </div>
-                <button className={Styles.button} disabled={parsed_url == null} onClick={sendMessage}>
-                    {t('webhook.send')}
-                </button>
-            </div>
-
-            <p style={{marginTop: '0.5rem', marginBottom: '2rem', color: 'grey'}}>{t('webhook.warning')}</p>
-
-            {showThread && <div style={{marginBottom: '2rem'}}>
-                <p style={{marginBottom: '0.5rem'}}>{t('thread.id')}</p>
-                <input className={Styles.input} type="text" value={threadId || ""} onChange={ev => dispatch(actions.setThreadId(ev.target.value))} placeholder={t('thread.placeholder')}/>
-            </div>}
-
-            <dialog ref={dialog} className={Styles.dialog}>
-                <form method="dialog"><button className={Styles.close}>✕</button></form>
-                <div>
-                    <p className={Styles.input_name}>{t('thread.post.label')}</p>
-                    <input className={Styles.input} autoFocus={true} type="text" value={postTitle} onChange={ev => setPostTitle(ev.target.value)} placeholder={t('thread.post.placeholder')}/>
-                </div>
-                <div className={Styles.button} onClick={sendMessageWithTitle}>{t('thread.post.button')}</div>
-            </dialog>
-
-            {!!response && <div className={Styles.data}
-                                style={{
-                                    marginBottom: '2rem',
-                                    color: '#dd9898'
-                                }}>{JSON.stringify(response, undefined, 4)}</div>}
-
+            {page !== 'modal' && <Webhook />}
 
             <Codegen state={state} page={page} setPage={setPage} />
 
diff --git a/website/src/Codegen.tsx b/website/src/Codegen.tsx
index e0ae4c6..78a6ece 100644
--- a/website/src/Codegen.tsx
+++ b/website/src/Codegen.tsx
@@ -2,10 +2,8 @@ import { CodeBlock, dracula } from 'react-code-blocks';
 import Styles from './App.module.css';
 import Select, { Props } from 'react-select';
 import { select_styles } from './Select';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { libs } from '../libs.config';
 import { ClientFunction, IncludeCallback } from 'ejs';
-import { RootState } from './state';
 import { OnChangeValue } from 'react-select/dist/declarations/src/types';
 import { Component } from 'components-sdk';
 import { useTranslation } from 'react-i18next';
@@ -51,6 +49,11 @@ export function Codegen({state, page, setPage} : {
             label: 'JSON',
             value: 'json',
         },
+
+        {
+            label: 'JSON for modals [ALPHA]',
+            value: 'modal',
+        },
         ...Object.keys(libComponents).map((comp) => ({
             label: libs[comp]?.name || comp,
             value: comp,
@@ -70,7 +73,7 @@ export function Codegen({state, page, setPage} : {
 
     return (
         <>
-            <p style={{marginBottom: '0.5rem', marginTop: '8rem'}}>{t('codegen.title')}</p>
+            <p style={{marginBottom: '0.5rem', marginTop: page === 'modal' ? '4rem' : '8rem'}}>{t('codegen.title')}</p>
             <Select
                 styles={select_styles}
                 options={selectOptions}
diff --git a/website/src/Webhook.tsx b/website/src/Webhook.tsx
new file mode 100644
index 0000000..3ec2df3
--- /dev/null
+++ b/website/src/Webhook.tsx
@@ -0,0 +1,119 @@
+import Styles from './App.module.css';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { webhookImplementation } from './webhook.impl';
+import { actions, RootState } from './state';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+function getThreadId(webhookUrl: string) {
+    try {
+        const parsed_url = new URL(webhookUrl);
+        const parsed_query = new URLSearchParams(parsed_url.search);
+        const thread_id = parsed_query.get('thread_id');
+        return thread_id || null;
+    } catch (e) {
+        return null;
+    }
+}
+
+export function Webhook() {
+    const {t} = useTranslation("website");
+    const dispatch = useDispatch();
+    const showThread = useSelector((state: RootState) => state.display.showThread);
+    const webhookUrl = useSelector((state: RootState) => state.display.webhookUrl);
+    const state = useSelector((state: RootState) => state.display.data);
+    const response = useSelector((state: RootState) => state.display.webhookResponse);
+    const [postTitle, setPostTitle] = useState<string>("");
+
+    const dialog = useRef<HTMLDialogElement>(null);
+
+    const threadId = useMemo(() => getThreadId(webhookUrl), [webhookUrl]);
+
+    useEffect(() => {
+        const getData = setTimeout(() => localStorage.setItem("discord.builders__webhookToken", webhookUrl), 1000)
+        return () => clearTimeout(getData)
+    }, [webhookUrl]);
+
+    useEffect(() => {
+        if (threadId) dispatch(actions.setShowThread())
+    }, [threadId]);
+
+    let parsed_url: URL | null = null;
+    try {
+        parsed_url = new URL(webhookUrl);
+
+        if (parsed_url.pathname.startsWith('/api/webhooks/') && (parsed_url.hostname === 'discord.com' || parsed_url.hostname.endsWith('.discord.com'))) {
+            parsed_url.protocol = 'https:';
+            parsed_url.pathname = '/api/v10/webhooks/' + parsed_url.pathname.slice('/api/webhooks/'.length);
+        }
+
+        const parsed_query = new URLSearchParams(parsed_url.search);
+        parsed_query.set('with_components', 'true');
+        parsed_url.search = parsed_query.toString();
+    } catch (e) {}
+
+    const sendMessage = async () => {
+        const req = await fetch(String(parsed_url), webhookImplementation.prepareRequest(state))
+
+        const status_code = req.status;
+        if (status_code === 204) return dispatch(actions.setWebhookResponse({"status": "204 Success"}));
+
+        const error_data = await req.json();
+
+        if (error_data?.code === 220001 && dialog.current !== null) {
+            dialog.current.showModal();
+            dispatch(actions.setWebhookResponse(null))
+            return;
+        }
+
+        dispatch(actions.setWebhookResponse(error_data))
+    }
+
+    const sendMessageWithTitle = async () => {
+        if (!postTitle) return;
+        dialog.current?.close();
+
+        const req = await fetch(String(parsed_url), webhookImplementation.prepareRequest(state, postTitle))
+
+        const status_code = req.status;
+        if (status_code === 204) return dispatch(actions.setWebhookResponse({"status": "204 Success"}));
+
+        const error_data = await req.json();
+        dispatch(actions.setWebhookResponse(error_data))
+    }
+
+    return <>
+        <p style={{marginBottom: '0.5rem', marginTop: '4rem'}}><span style={{fontSize: 16, color: 'white', fontWeight: '500'}}>{t('webhook.title')}</span>{!showThread && <> (<span className={Styles.link} onClick={() => dispatch(actions.setShowThread())}>{t('webhook.thread')}</span>) </>}</p>
+        <div className={Styles.input_pair}>
+            <div>
+                <input className={Styles.input} placeholder={"Webhook link"} type="text" value={webhookUrl}
+                       onChange={ev => dispatch(actions.setWebhookUrl(ev.target.value))}/>
+            </div>
+            <button className={Styles.button} disabled={parsed_url == null} onClick={sendMessage}>
+                {t('webhook.send')}
+            </button>
+        </div>
+
+        <p style={{marginTop: '0.5rem', marginBottom: '2rem', color: 'grey'}}>{t('webhook.warning')}</p>
+
+        {showThread && <div style={{marginBottom: '2rem'}}>
+            <p style={{marginBottom: '0.5rem'}}>{t('thread.id')}</p>
+            <input className={Styles.input} type="text" value={threadId || ""} onChange={ev => dispatch(actions.setThreadId(ev.target.value))} placeholder={t('thread.placeholder')}/>
+        </div>}
+
+        <dialog ref={dialog} className={Styles.dialog}>
+            <form method="dialog"><button className={Styles.close}>✕</button></form>
+            <div>
+                <p className={Styles.input_name}>{t('thread.post.label')}</p>
+                <input className={Styles.input} autoFocus={true} type="text" value={postTitle} onChange={ev => setPostTitle(ev.target.value)} placeholder={t('thread.post.placeholder')}/>
+            </div>
+            <div className={Styles.button} onClick={sendMessageWithTitle}>{t('thread.post.button')}</div>
+        </dialog>
+
+        {!!response && <div className={Styles.data}
+                            style={{
+                                marginBottom: '2rem',
+                                color: '#dd9898'
+                            }}>{JSON.stringify(response, undefined, 4)}</div>}
+    </>
+}
\ No newline at end of file
diff --git a/website/src/defaultJsonModal.ts b/website/src/defaultJsonModal.ts
new file mode 100644
index 0000000..00a7c51
--- /dev/null
+++ b/website/src/defaultJsonModal.ts
@@ -0,0 +1,80 @@
+export default [
+    {
+        "type": 10,
+        "content": "Example components:"
+    },
+    {
+        "type": 18,
+        "label": "Input",
+        "description": null,
+        "component": {
+            "type": 4,
+            "custom_id": "2655a64401304b2e80a32e10055a0b19",
+            "style": 1,
+            "min_length": null,
+            "max_length": null,
+            "required": true,
+            "value": null,
+            "placeholder": null
+        }
+    },
+    {
+        "type": 18,
+        "label": "Textarea",
+        "description": null,
+        "component": {
+            "type": 4,
+            "custom_id": "847bdc38e6d7434fdd5bcb2a4009cd86",
+            "style": 2,
+            "min_length": null,
+            "max_length": null,
+            "required": true,
+            "value": null,
+            "placeholder": null
+        }
+    },
+    {
+        "type": 18,
+        "label": "Select menu",
+        "description": null,
+        "component": {
+            "type": 3,
+            "custom_id": "99fca274f90a4070beb7086fdf335bfc",
+            "options": [
+                {
+                    "label": "Test selection",
+                    "value": "44c530edcff948c5e63764303419e252",
+                    "description": "test",
+                    "emoji": {
+                        "id": null,
+                        "name": "😜"
+                    },
+                    "default": true
+                },
+                {
+                    "label": "Other selection",
+                    "value": "c0f60f084fc44e99ec904a89f83ffaf6",
+                    "description": null,
+                    "emoji": null,
+                    "default": false
+                }
+            ],
+            "placeholder": "",
+            "min_values": 1,
+            "max_values": 3,
+            "required": true
+        }
+    },
+    {
+        "type": 18,
+        "label": "File upload",
+        "description": null,
+        "component": {
+            "type": 19,
+            "custom_id": "4e6313004fee439da8e3f65ca9b39e51",
+            "min_values": 1,
+            "max_values": 1,
+            "required": true
+        }
+    }
+]
\ No newline at end of file
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index 9638ada..c389d36 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -15,5 +15,6 @@
   "thread.post.placeholder": "Enter a title…",
   "thread.post.button": "Send message",
   "author": "Project backed by the <a>StartIT bot</a>.",
-  "codegen.title": "Generator for programmers"
+  "codegen.title": "Generator for programmers",
+  "modal.title": "Form"
 }
\ No newline at end of file
diff --git a/website/src/locales/pl.json b/website/src/locales/pl.json
index 59d9248..97f0934 100644
--- a/website/src/locales/pl.json
+++ b/website/src/locales/pl.json
@@ -15,5 +15,6 @@
   "thread.post.placeholder": "Wpisz tytuł…",
   "thread.post.button": "Wyślij wiadomość",
   "author": "Projekt rozwijany przez twórców <a>bota StartIT</a>.",
-  "codegen.title": "Generator dla programistów"
+  "codegen.title": "Generator dla programistów",
+  "modal.title": "Formularz"
 }
\ No newline at end of file
diff --git a/website/src/state.ts b/website/src/state.ts
index cc2c031..3adf0e2 100644
--- a/website/src/state.ts
+++ b/website/src/state.ts
@@ -8,8 +8,6 @@ import {
     wrapKeyType,
 } from 'components-sdk/src/polyfills/StateManager';
 
-import defaultJson from "./defaultJson"
-
 const __deleteKeyHelper = (
     state: any,
     key: stateKeyType,
@@ -52,7 +50,7 @@ function arraysEqual<T>(arr1: T[], arr2: T[]): boolean {
 export const displaySlice = createSlice({
     name: 'display',
     initialState: () => ({
-        data: defaultJson as Component[],
+        data: [] as Component[],
         isDefault: true,
         webhookUrl: localStorage.getItem("discord.builders__webhookToken") || "", // Toolkit run this function so type is string
         webhookResponse: null as object | null,
@@ -184,6 +182,10 @@ export const displaySlice = createSlice({
 
         setShowThread(state) {
             state.showThread = true;
+        },
+
+        overwriteDefaultState(state, action: PayloadAction<any>) {
+            if (state.isDefault) state.data = [...action.payload];
         }
     }
 })

From ed04d44262693a85d50151e3638c3daa735cbf24 Mon Sep 17 00:00:00 2001
From: kpodp0ra <podpora@kacper.link>
Date: Sat, 24 Jan 2026 22:37:41 +0100
Subject: [PATCH 2/4] fix: grammar

---
 components-sdk/src/locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components-sdk/src/locales/en.json b/components-sdk/src/locales/en.json
index 2431372..89890f8 100644
--- a/components-sdk/src/locales/en.json
+++ b/components-sdk/src/locales/en.json
@@ -87,8 +87,8 @@
   "modal.label.unset-required": "Set as optional",
   "modal.label.set-required": "Set as required",
   "modal.label.required": "required",
-  "modal.file-upload.info-one": "Users will send here one file or image.",
-  "modal.file-upload.info-multiple": "Users will send here multiple files or images.",
+  "modal.file-upload.info-one": "Users can send one file or image here.",
+  "modal.file-upload.info-multiple": "Users can send multiple files or images here.",
   "modal.file-upload.set-maximum": "Set maximum number of files",
   "modal.file-upload.set-minimum": "Set minimum number of files"
 }
\ No newline at end of file

From cc58cd9d7e08e1832ab1c9c84f36736ebd83ca34 Mon Sep 17 00:00:00 2001
From: kpodp0ra <podpora@kacper.link>
Date: Sat, 24 Jan 2026 23:13:26 +0100
Subject: [PATCH 3/4] fix: icons

---
 components-sdk/src/CapsuleButton.tsx    | 9 ++++++---
 components-sdk/src/icons/Input.svg      | 4 ++++
 components-sdk/src/icons/Textarea.svg   | 4 ++++
 components-sdk/src/icons/UploadFile.svg | 4 ++++
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 components-sdk/src/icons/Input.svg
 create mode 100644 components-sdk/src/icons/Textarea.svg
 create mode 100644 components-sdk/src/icons/UploadFile.svg

diff --git a/components-sdk/src/CapsuleButton.tsx b/components-sdk/src/CapsuleButton.tsx
index 4e53a6d..2a4bc0d 100644
--- a/components-sdk/src/CapsuleButton.tsx
+++ b/components-sdk/src/CapsuleButton.tsx
@@ -8,6 +8,9 @@ import SeparatorIcon from './icons/Separator.svg';
 import ButtonIcon from './icons/Button.svg';
 import LinkButtonIcon from './icons/ButtonLink.svg';
 import SelectIcon from './icons/Select.svg';
+import UploadFile from './icons/UploadFile.svg';
+import Input from './icons/Input.svg';
+import Textarea from './icons/Textarea.svg';
 import { default_settings } from './Capsule';
 import { CSSProperties, useRef } from 'react';
 import { Component } from './utils/componentTypes';
@@ -99,13 +102,13 @@ export function CapsuleButton({context, callback, className, style, interactiveD
                 {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
                     callback(default_settings.ModalShortInput())
                 }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_img}><img src={Input} alt=""/></div>
                     <div className={Styles.large_button_ctx_item_text}>{t('components.modal.short-input')}</div>
                 </div>}
                 {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
                     callback(default_settings.ModalParagraphInput())
                 }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_img}><img src={Textarea} alt=""/></div>
                     <div className={Styles.large_button_ctx_item_text}>{t('components.modal.paragraph-input')}</div>
                 </div>}
                 {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
@@ -123,7 +126,7 @@ export function CapsuleButton({context, callback, className, style, interactiveD
                 {['modal'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
                     callback(default_settings.ModalFileUpload())
                 }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
+                    <div className={Styles.large_button_ctx_item_img}><img src={UploadFile} alt=""/></div>
                     <div className={Styles.large_button_ctx_item_text}>{t('components.modal.file-upload')}</div>
                 </div>}
             </div>}
diff --git a/components-sdk/src/icons/Input.svg b/components-sdk/src/icons/Input.svg
new file mode 100644
index 0000000..ecea13b
--- /dev/null
+++ b/components-sdk/src/icons/Input.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3135 3C27.1966 3.0001 28.0435 3.31184 28.668 3.86719C29.2926 4.42263 29.6436 5.17639 29.6436 5.96191V23.5791L25.3232 20.9775V20.9795C24.9916 20.777 24.5897 20.6227 24.1416 20.5938C23.6762 20.5637 23.1768 20.6714 22.7373 20.9678C22.3528 21.2271 22.0857 21.5833 21.9268 21.9648L21.8643 22.1299L21.8164 22.293C21.7217 22.6653 21.7228 23.0365 21.7783 23.3711L21.7773 23.3701L22.7812 29.6562H6.33008C5.44685 29.6562 4.60015 29.3435 3.97559 28.7881C3.35107 28.2327 3.00008 27.4798 3 26.6943V5.96191C3 5.17639 3.351 4.42263 3.97559 3.86719C4.60014 3.31188 5.4469 3.00001 6.33008 3H26.3135ZM10.8359 8.83301C10.5498 8.83301 10.2584 8.93115 10.0566 9.19043C9.87343 9.42599 9.82324 9.72145 9.82324 9.99219V13.5811C9.82324 13.8918 9.91625 14.2022 10.165 14.4346L10.1709 14.4404L10.1768 14.4453C10.3807 14.6238 10.633 14.7402 10.9219 14.7402C11.1732 14.7401 11.3945 14.6446 11.5732 14.4863L11.5742 14.4873L11.6689 14.3926C11.8429 14.1956 11.9106 13.9481 11.9209 13.7119L12.0459 10.8828H15.3164V22.0781H12.8623C12.5752 22.0781 12.2742 22.1535 12.0449 22.3828L12.0381 22.3896L12.0312 22.3975C11.8797 22.5617 11.7794 22.7627 11.7568 22.9912L11.752 23.0908L11.7578 23.1934C11.7828 23.4293 11.8917 23.6329 12.0439 23.7969L12.0508 23.8037L12.0566 23.8105C12.2874 24.0413 12.5873 24.1279 12.8867 24.1279H19.918C20.2152 24.1279 20.5208 24.0415 20.748 23.7969C20.922 23.6096 21.0409 23.3708 21.041 23.0908C21.041 22.808 20.9198 22.5672 20.7354 22.3828C20.5144 22.1536 20.2195 22.0781 19.9424 22.0781H17.4883V10.8828H20.8027L20.9072 13.709L20.9092 13.7383C20.9347 14.0064 21.0396 14.2699 21.2676 14.4629C21.4574 14.6235 21.6879 14.7158 21.9443 14.7158C22.2247 14.7158 22.4681 14.603 22.6621 14.4229C22.9156 14.1956 23.0059 13.8848 23.0059 13.5811V9.99219C23.0059 9.72534 22.9586 9.43438 22.7852 9.2002C22.5909 8.93806 22.3046 8.83301 22.0176 8.83301H10.8359Z" fill="#ABABAB"/>
+<path d="M24.1504 29.6699C24.2887 30.5471 25.2203 31.2337 25.7674 30.8647L30.6425 27.5763C31.1896 27.2073 30.8985 26.0887 30.1405 25.6295L24.1658 22.0298C24.0177 21.9379 23.8622 21.8846 23.7139 21.8751C23.5656 21.8655 23.4293 21.8999 23.3179 21.9751C23.2064 22.0503 23.1234 22.1637 23.0768 22.3048C23.0301 22.4459 23.0212 22.61 23.0509 22.7818L24.1504 29.6699Z" fill="#ABABAB"/>
+</svg>
diff --git a/components-sdk/src/icons/Textarea.svg b/components-sdk/src/icons/Textarea.svg
new file mode 100644
index 0000000..624b1d9
--- /dev/null
+++ b/components-sdk/src/icons/Textarea.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3135 3C27.1966 3.0001 28.0435 3.31184 28.668 3.86719C29.2926 4.42263 29.6436 5.17639 29.6436 5.96191V23.5791L25.3232 20.9775V20.9795C24.9916 20.777 24.5897 20.6227 24.1416 20.5938C23.6762 20.5637 23.1768 20.6714 22.7373 20.9678C22.3528 21.2271 22.0857 21.5833 21.9268 21.9648L21.8643 22.1299L21.8164 22.293C21.7217 22.6653 21.7228 23.0365 21.7783 23.3711L21.7773 23.3701L22.7812 29.6562H6.33008C5.44685 29.6562 4.60015 29.3435 3.97559 28.7881C3.35107 28.2327 3.00008 27.4798 3 26.6943V5.96191C3 5.17639 3.351 4.42263 3.97559 3.86719C4.60014 3.31188 5.4469 3.00001 6.33008 3H26.3135ZM12.9336 24.833C12.6466 24.833 12.3455 24.9086 12.1162 25.1377L12.1094 25.1455L12.1025 25.1523C11.9294 25.3399 11.8232 25.5761 11.8232 25.8457C11.8232 26.1257 11.9414 26.3644 12.1152 26.5518L12.1221 26.5586L12.1279 26.5654C12.3587 26.7962 12.6586 26.8828 12.958 26.8828H19.9893C20.2866 26.8828 20.5921 26.7965 20.8193 26.5518C20.9933 26.3644 21.1123 26.1258 21.1123 25.8457C21.1123 25.5629 20.991 25.3221 20.8066 25.1377L20.8057 25.1387C20.5846 24.9092 20.2909 24.833 20.0137 24.833H12.9336ZM10.8359 8.83301C10.5498 8.83301 10.2584 8.93115 10.0566 9.19043C9.87343 9.42599 9.82324 9.72145 9.82324 9.99219V13.5811C9.82324 13.8918 9.91625 14.2022 10.165 14.4346L10.1709 14.4404L10.1768 14.4453C10.3807 14.6238 10.633 14.7402 10.9219 14.7402C11.1732 14.7401 11.3945 14.6446 11.5732 14.4863L11.5742 14.4873L11.6689 14.3926C11.8429 14.1956 11.9106 13.9481 11.9209 13.7119L12.0459 10.8828H15.3164V22.0781H12.8623C12.5752 22.0781 12.2742 22.1535 12.0449 22.3828L12.0381 22.3896L12.0312 22.3975C11.8797 22.5617 11.7794 22.7627 11.7568 22.9912L11.752 23.0908L11.7578 23.1934C11.7828 23.4293 11.8917 23.6329 12.0439 23.7969L12.0508 23.8037L12.0566 23.8105C12.2874 24.0413 12.5873 24.1279 12.8867 24.1279H19.918C20.2152 24.1279 20.5208 24.0415 20.748 23.7969C20.922 23.6096 21.0409 23.3708 21.041 23.0908C21.041 22.808 20.9198 22.5672 20.7354 22.3828C20.5144 22.1536 20.2195 22.0781 19.9424 22.0781H17.4883V10.8828H20.8027L20.9072 13.709L20.9092 13.7383C20.9347 14.0064 21.0396 14.2699 21.2676 14.4629C21.4574 14.6235 21.6879 14.7158 21.9443 14.7158C22.2247 14.7158 22.4681 14.603 22.6621 14.4229C22.9156 14.1956 23.0059 13.8848 23.0059 13.5811V9.99219C23.0059 9.72534 22.9586 9.43438 22.7852 9.2002C22.5909 8.93806 22.3046 8.83301 22.0176 8.83301H10.8359Z" fill="#ABABAB"/>
+<path d="M24.1504 29.6699C24.2887 30.5471 25.2203 31.2337 25.7674 30.8647L30.6425 27.5763C31.1896 27.2073 30.8985 26.0887 30.1405 25.6295L24.1658 22.0298C24.0177 21.9379 23.8622 21.8846 23.7139 21.8751C23.5656 21.8655 23.4293 21.8999 23.3179 21.9751C23.2064 22.0503 23.1234 22.1637 23.0768 22.3048C23.0301 22.4459 23.0212 22.61 23.0509 22.7818L24.1504 29.6699Z" fill="#ABABAB"/>
+</svg>
diff --git a/components-sdk/src/icons/UploadFile.svg b/components-sdk/src/icons/UploadFile.svg
new file mode 100644
index 0000000..77ff619
--- /dev/null
+++ b/components-sdk/src/icons/UploadFile.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3132 3C27.1963 3.0001 28.0433 3.31192 28.6677 3.86719C29.2923 4.42263 29.6433 5.17639 29.6433 5.96191V23.5791L25.323 20.9775V20.9795C24.9914 20.7771 24.5894 20.6227 24.1414 20.5938C23.676 20.5638 23.1765 20.6714 22.7371 20.9678C22.3527 21.2271 22.0854 21.5834 21.9265 21.9648L21.864 22.1299L21.8162 22.293C21.7214 22.6653 21.7226 23.0365 21.7781 23.3711L21.7771 23.3701L22.781 29.6562H6.32983C5.4467 29.6562 4.59985 29.3434 3.97534 28.7881C3.35091 28.2327 2.99983 27.4797 2.99976 26.6943V5.96191C2.99976 5.17645 3.35084 4.42262 3.97534 3.86719C4.59984 3.31194 5.44675 3.00007 6.32983 3H26.3132ZM12.9265 22.7373C12.6392 22.7373 12.3631 22.8477 12.1599 23.0439C11.957 23.2401 11.8426 23.5059 11.8425 23.7832C11.8425 24.0607 11.9568 24.3272 12.1599 24.5234C12.3631 24.7197 12.6392 24.8301 12.9265 24.8301H19.5955C19.8827 24.83 20.158 24.7196 20.3611 24.5234C20.5642 24.3272 20.6785 24.0607 20.6785 23.7832C20.6784 23.5059 20.5641 23.2401 20.3611 23.0439C20.158 22.8478 19.8827 22.7374 19.5955 22.7373H12.9265ZM16.2605 7.83008C15.9771 7.83012 15.7051 7.93738 15.5027 8.12891L10.0857 13.3613C9.90681 13.5602 9.81153 13.8168 9.82007 14.0801C9.82862 14.3435 9.94 14.5945 10.1316 14.7822C10.3232 14.9699 10.5816 15.0808 10.8542 15.0928C11.1268 15.1047 11.3939 15.0167 11.6023 14.8467L15.1775 11.3828V19.8594C15.1775 20.1369 15.2917 20.4034 15.4949 20.5996C15.698 20.7956 15.9733 20.9062 16.2605 20.9062C16.5478 20.9062 16.8239 20.7958 17.0271 20.5996C17.2302 20.4034 17.3445 20.1369 17.3445 19.8594V11.3936L20.9187 14.8467C21.0167 14.9555 21.1374 15.0436 21.2722 15.1055C21.407 15.1673 21.5537 15.2015 21.7029 15.2061C21.852 15.2105 22.0009 15.1854 22.1394 15.1318C22.2779 15.0783 22.4038 14.9971 22.5085 14.8945C22.6131 14.792 22.6944 14.6695 22.7478 14.5352C22.8013 14.4005 22.8259 14.2563 22.8191 14.1123C22.8123 13.9685 22.7746 13.8275 22.7087 13.6982C22.6428 13.5689 22.5493 13.4544 22.4353 13.3613L17.0193 8.12891C16.8168 7.93718 16.5441 7.83008 16.2605 7.83008Z" fill="#ABABAB"/>
+<path d="M24.1504 29.6699C24.2887 30.5471 25.2203 31.2337 25.7674 30.8647L30.6425 27.5763C31.1896 27.2073 30.8985 26.0887 30.1405 25.6295L24.1658 22.0298C24.0177 21.9379 23.8622 21.8846 23.7139 21.8751C23.5656 21.8655 23.4293 21.8999 23.3179 21.9751C23.2064 22.0503 23.1235 22.1637 23.0768 22.3048C23.0301 22.4459 23.0212 22.61 23.0509 22.7818L24.1504 29.6699Z" fill="#ABABAB"/>
+</svg>

From 8c595b2b0fca0d3386adfa289a8da4fb7f7cbfd7 Mon Sep 17 00:00:00 2001
From: Oxyde Bot's <gabsamw@oxyde-bots.xyz>
Date: Sat, 24 Jan 2026 23:20:08 +0100
Subject: [PATCH 4/4] fix: french translation

* feat: add modal language

* feat : add modal translation
---
 components-sdk/src/locales/fr.json | 33 +++++++++++++++++++++++++++++-
 website/src/locales/fr.json        |  5 +++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/components-sdk/src/locales/fr.json b/components-sdk/src/locales/fr.json
index b7138c6..6df8a99 100644
--- a/components-sdk/src/locales/fr.json
+++ b/components-sdk/src/locales/fr.json
@@ -59,5 +59,36 @@
   "button.change-emoji": "Modifier l'emoji",
   "button.clear-emoji": "Effacer l'emoji",
   "button.change-label": "Modifier l'étiquette",
-  "button.delete": "Supprimer"
+  "button.delete": "Supprimer",
+  "button.add-input": "Ajouter une question",
+  "components.modal.file-upload": "Demander un fichier",
+  "components.modal.short-input": "Saisir un texte court",
+  "components.modal.paragraph-input": "Saisir un texte long"
+  "components.modal.content": "ajouter un texte d'aide",
+  "components.modal.string-select": "Ajouter un menu de sélection",
+  "modal.text-input.placeholder-info": "When empty: ",
+  "modal.text-input.minimum-len-info": "Taille minimum : ",
+  "modal.text-input.change-value": "Changer le texte préremplis",
+  "modal.text-input.add-value": "Ajouter le texte préremplis",
+  "modal.text-input.clear-value": "Supprime le texte préremplis",
+  "modal.text-input.change-placeholder": "Changer le placeholder",
+  "modal.text-input.add-placeholder": "Ajouter le placeholder",
+  "modal.text-input.clear-placeholder": "Supprimer le placeholder",
+  "modal.text-input.set-minimum": "Définir la longueur minimal",
+  "modal.text-input.change-minimum": "Modifier la longueur minimal",
+  "modal.text-input.clear-minimum": "Supprimer la longueur minimal",
+  "modal.text-input.set-maximum": "Définir la longueur maximale",
+  "modal.text-input.change-maximum": "Modifier la longueur maximale",
+  "modal.text-input.clear-maximum": "Supprimer la longueur maximale",
+  "modal.label.change-label": "Modifier le libellé",
+  "modal.label.add-description": "Ajouter une description",
+  "modal.label.change-description": "Modifier la description",
+  "modal.label.clear-description": "Supprimer la description",
+  "modal.label.unset-required": "Rendre optionnel",
+  "modal.label.set-required": "Rendre obligatoire",
+  "modal.label.required": "obligatoire",
+  "modal.file-upload.info-one": "Les utilisateurs pourront envoyer un fichier ou une image ici.",
+  "modal.file-upload.info-multiple": "Les utilisateurs pourront envoyer plusieurs fichiers ou images ici.",
+  "modal.file-upload.set-maximum": "Définir le nombre maximum de fichiers",
+  "modal.file-upload.set-minimum": "Définir le nombre minimum de fichiers"
 }
diff --git a/website/src/locales/fr.json b/website/src/locales/fr.json
index 2491dd1..cd96628 100644
--- a/website/src/locales/fr.json
+++ b/website/src/locales/fr.json
@@ -14,6 +14,7 @@
   "thread.post.label": "Titre du message",
   "thread.post.placeholder": "Entrez un titre…",
   "thread.post.button": "Envoyer le message",
-  "author": "Projet soutenu par le <a>bot StartIT</a>.",
-  "codegen.title": "Générateur pour programmeurs"
+  "author": "Projet soutenu par <a>StartIT bot</a>.",
+  "codegen.title": "Générateur pour programmeurs",
+  "modal.title": "Formulaire"
 }