diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
new file mode 100644
index 0000000..20531fa
--- /dev/null
+++ b/.github/workflows/ci.yaml
@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.0.3
+
+      - name: Install Prettier
+        run: npm install --save-dev prettier
+
+      - name: Run Prettier check
+        run: prettier --check .
diff --git a/.gitignore b/.gitignore
index 4f602fb..58e729f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,10 @@ build/
 .vite/
 .yarn/
 
+# Yarn Plug'n'Play
+.pnp.loader.mjs
+.pnp.cjs
+
 # Compiled Java class files
 *.class
 
diff --git a/.prettierrc b/.prettierrc
index a561663..b7754ba 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,13 @@
 {
     "singleQuote": true,
     "tabWidth": 4,
-    "printWidth": 120
+    "printWidth": 120,
+    "overrides": [
+        {
+            "files": ["*.yaml", "*.yml", "*.json"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
 }
diff --git a/LICENSE.md b/LICENSE.md
index 1246a35..95d9221 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -2,9 +2,9 @@ Copyright (c) 2025 Kacper Podpora
 
 Portions of this repository are licensed as follows:
 
-* All software that resides under a "components-sdk/" directory is licensed under the license defined in "components-sdk/LICENSE.md".
+-   All software that resides under a "components-sdk/" directory is licensed under the license defined in "components-sdk/LICENSE.md".
 
-* All software outside the above-mentioned directories is available under the MIT license as set forth below.
+-   All software outside the above-mentioned directories is available under the MIT license as set forth below.
 
 MIT License
 
diff --git a/README.md b/README.md
index 1bd97bd..09f5a0f 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,11 @@
 
 This monorepo contains two main packages:
 
-- [website](/website/) – Open-source, public-facing website, licensed under [MIT](./website/LICENSE).
-- [components-sdk](/components-sdk/) – Source-available components SDK, licensed under the [PolyForm Noncommercial License 1.0.0](https://polyformproject.org/licenses/noncommercial/1.0.0/).
+-   [website](/website/) – Open-source, public-facing website, licensed under [MIT](./website/LICENSE).
+-   [components-sdk](/components-sdk/) – Source-available components SDK, licensed under the [PolyForm Noncommercial License 1.0.0](https://polyformproject.org/licenses/noncommercial/1.0.0/).
 
 ## 📦 Installation
 
-
 First, install the dependencies of the monorepo:
 
 ```bash
@@ -30,8 +29,8 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 ## ⚠️ Commercial use
 
-Although the `website/` project is licensed under the permissive MIT License, it depends on the `components-sdk/` package, which is **licensed under the PolyForm Noncommercial License 1.0.0**. 
+Although the `website/` project is licensed under the permissive MIT License, it depends on the `components-sdk/` package, which is **licensed under the PolyForm Noncommercial License 1.0.0**.
 
-This means that while the website code itself allows for commercial use, any distribution or deployment that includes or relies on `components-sdk/` is subject to the more restrictive non-commercial terms. 
+This means that while the website code itself allows for commercial use, any distribution or deployment that includes or relies on `components-sdk/` is subject to the more restrictive non-commercial terms.
 
 As a result, you **cannot use, deploy, or distribute the website for commercial purposes** unless you remove the dependency on `components-sdk/` or obtain a separate commercial license for it. Please review the license terms carefully before using this repository in a commercial context.
diff --git a/components-sdk/LICENSE.md b/components-sdk/LICENSE.md
index 1a71cb6..34b411e 100644
--- a/components-sdk/LICENSE.md
+++ b/components-sdk/LICENSE.md
@@ -13,7 +13,7 @@ your licenses.
 The licensor grants you a copyright license for the
 software to do everything you might do with the software
 that would otherwise infringe the licensor's copyright
-in it for any permitted purpose.  However, you may
+in it for any permitted purpose. However, you may
 only distribute the software according to [Distribution
 License](#distribution-license) and make changes or new works
 based on the software according to [Changes and New Works
@@ -22,7 +22,7 @@ License](#changes-and-new-works-license).
 ## Distribution License
 
 The licensor grants you an additional copyright license
-to distribute copies of the software.  Your license
+to distribute copies of the software. Your license
 to distribute covers distributing the software with
 changes and new works permitted by [Changes and New Works
 License](#changes-and-new-works-license).
@@ -33,7 +33,7 @@ You must ensure that anyone who gets a copy of any part of
 the software from you also gets a copy of these terms or the
 URL for them above, as well as copies of any plain-text lines
 beginning with `Required Notice:` that the licensor provided
-with the software.  For example:
+with the software. For example:
 
 > Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
 
@@ -79,7 +79,7 @@ law. These terms do not limit them.
 
 These terms do not allow you to sublicense or transfer any of
 your licenses to anyone else, or prevent the licensor from
-granting licenses to anyone else.  These terms do not imply
+granting licenses to anyone else. These terms do not imply
 any other licenses.
 
 ## Patent Defense
@@ -97,15 +97,15 @@ violated any of these terms, or done anything with the software
 not covered by your licenses, your licenses can nonetheless
 continue if you come into full compliance with these terms,
 and take practical steps to correct past violations, within
-32 days of receiving notice.  Otherwise, all your licenses
+32 days of receiving notice. Otherwise, all your licenses
 end immediately.
 
 ## No Liability
 
-***As far as the law allows, the software comes as is, without
+**_As far as the law allows, the software comes as is, without
 any warranty or condition, and the licensor will not be liable
 to you for any damages arising out of these terms or the use
-or nature of the software, under any kind of legal claim.***
+or nature of the software, under any kind of legal claim._**
 
 ## Definitions
 
@@ -119,10 +119,10 @@ terms.
 **Your company** is any legal entity, sole proprietorship,
 or other kind of organization that you work for, plus all
 organizations that have control over, are under the control of,
-or are under common control with that organization.  **Control**
+or are under common control with that organization. **Control**
 means ownership of substantially all the assets of an entity,
 or the power to direct its management and policies by vote,
-contract, or otherwise.  Control can be direct or indirect.
+contract, or otherwise. Control can be direct or indirect.
 
 **Your licenses** are all the licenses granted to you for the
 software under these terms.
diff --git a/components-sdk/playground/App.tsx b/components-sdk/playground/App.tsx
index 600ab14..044f2d0 100644
--- a/components-sdk/playground/App.tsx
+++ b/components-sdk/playground/App.tsx
@@ -1,39 +1,48 @@
-import {Capsule} from "../src/Capsule";
-import {Component, TextDisplayComponent} from "../src/utils/componentTypes";
-import {useMemo, useState} from "react";
-import {DummyStateManager} from "./StateManager.impl";
-import {DummyBetterInput} from "./BetterInput.impl";
-import {DummyEmojiPicker} from "./EmojiPicker.impl";
-import {DummyEmojiShow} from "./EmojiShow.impl";
+import { Capsule } from '../src/Capsule';
+import { Component, TextDisplayComponent } from '../src/utils/componentTypes';
+import { useMemo, useState } from 'react';
+import { DummyStateManager } from './StateManager.impl';
+import { DummyBetterInput } from './BetterInput.impl';
+import { DummyEmojiPicker } from './EmojiPicker.impl';
+import { DummyEmojiShow } from './EmojiShow.impl';
 
 function App() {
-    const stateManager = useMemo(()=> new DummyStateManager(), [])
+    const stateManager = useMemo(() => new DummyStateManager(), []);
 
-    const [state, setState] = useState<string | Component[]>([{
-      "type": 10,
-      "content": "Never trust a robot with a banana."
-    } as TextDisplayComponent])
+    const [state, setState] = useState<string | Component[]>([
+        {
+            type: 10,
+            content: 'Never trust a robot with a banana.',
+        } as TextDisplayComponent,
+    ]);
 
-    return <div>
-        {Array.isArray(state) && <Capsule
-            state={state}
-            key={JSON.stringify(state)}
-            stateManager={stateManager}
-            stateKey={[]}
-            BetterInput={DummyBetterInput}
-            EmojiPicker={DummyEmojiPicker}
-            EmojiShow={DummyEmojiShow}
-            getFile={undefined}
-            setFile={undefined}
-        />}
-        <textarea value={typeof state === "string" ? state : JSON.stringify(state, undefined, 4)} onChange={ev => {
-            try {
-                setState(JSON.parse(ev.target.value))
-            } catch (e) {
-                setState(ev.target.value)
-            }
-        }} />
-    </div>
+    return (
+        <div>
+            {Array.isArray(state) && (
+                <Capsule
+                    state={state}
+                    key={JSON.stringify(state)}
+                    stateManager={stateManager}
+                    stateKey={[]}
+                    BetterInput={DummyBetterInput}
+                    EmojiPicker={DummyEmojiPicker}
+                    EmojiShow={DummyEmojiShow}
+                    getFile={undefined}
+                    setFile={undefined}
+                />
+            )}
+            <textarea
+                value={typeof state === 'string' ? state : JSON.stringify(state, undefined, 4)}
+                onChange={(ev) => {
+                    try {
+                        setState(JSON.parse(ev.target.value));
+                    } catch (e) {
+                        setState(ev.target.value);
+                    }
+                }}
+            />
+        </div>
+    );
 }
 
 export default App;
diff --git a/components-sdk/playground/BetterInput.impl.tsx b/components-sdk/playground/BetterInput.impl.tsx
index f863bff..a80ea1c 100644
--- a/components-sdk/playground/BetterInput.impl.tsx
+++ b/components-sdk/playground/BetterInput.impl.tsx
@@ -1,12 +1,14 @@
-import {BetterInput} from "../src/polyfills/BetterInput";
+import { BetterInput } from '../src/polyfills/BetterInput';
 
-export const DummyBetterInput: BetterInput = ({onChange, value}) => {
-    return <textarea
-        // @ts-ignore this attribute works, and is used by CSS
-        type={'text'}
-        rows={1}
-        maxLength={2000}
-        onChange={onChange}
-        value={value}
-    />
-}
+export const DummyBetterInput: BetterInput = ({ onChange, value }) => {
+    return (
+        <textarea
+            // @ts-ignore this attribute works, and is used by CSS
+            type={'text'}
+            rows={1}
+            maxLength={2000}
+            onChange={onChange}
+            value={value}
+        />
+    );
+};
diff --git a/components-sdk/playground/EmojiPicker.impl.tsx b/components-sdk/playground/EmojiPicker.impl.tsx
index ab5a586..bba022b 100644
--- a/components-sdk/playground/EmojiPicker.impl.tsx
+++ b/components-sdk/playground/EmojiPicker.impl.tsx
@@ -1,5 +1,5 @@
-import {EmojiPicker} from "../src/polyfills/EmojiPicker";
+import { EmojiPicker } from '../src/polyfills/EmojiPicker';
 
-export const DummyEmojiPicker: EmojiPicker = ({onSelect}) => {
-    return <div>lorem ipsum</div>
-}
+export const DummyEmojiPicker: EmojiPicker = ({ onSelect }) => {
+    return <div>lorem ipsum</div>;
+};
diff --git a/components-sdk/playground/EmojiShow.impl.tsx b/components-sdk/playground/EmojiShow.impl.tsx
index bfc12be..d6ecaac 100644
--- a/components-sdk/playground/EmojiShow.impl.tsx
+++ b/components-sdk/playground/EmojiShow.impl.tsx
@@ -1,5 +1,5 @@
-import {EmojiShow} from "../src/polyfills/EmojiShow";
+import { EmojiShow } from '../src/polyfills/EmojiShow';
 
 export const DummyEmojiShow: EmojiShow = ({}) => {
-    return <div>:o</div>
-}
+    return <div>:o</div>;
+};
diff --git a/components-sdk/playground/StateManager.impl.ts b/components-sdk/playground/StateManager.impl.ts
index 089bedb..f1f2e88 100644
--- a/components-sdk/playground/StateManager.impl.ts
+++ b/components-sdk/playground/StateManager.impl.ts
@@ -1,4 +1,4 @@
-import {stateKeyType, StateManager} from "../src/polyfills/StateManager";
+import { stateKeyType, StateManager } from '../src/polyfills/StateManager';
 
 export class DummyStateManager implements StateManager {
     deleteKey(props: {
@@ -6,18 +6,18 @@ export class DummyStateManager implements StateManager {
         decoupleFrom?: string | undefined;
         removeKeyParent?: stateKeyType | undefined;
     }) {
-        console.log("deleteKey", props);
+        console.log('deleteKey', props);
     }
 
-    appendKey<T>(props: { key: stateKeyType; value: T; }) {
-        console.log("appendKey", props);
+    appendKey<T>(props: { key: stateKeyType; value: T }) {
+        console.log('appendKey', props);
     }
 
-    setKey<T>(props: { key: stateKeyType; value: T; }) {
-        console.log("setKey", props);
+    setKey<T>(props: { key: stateKeyType; value: T }) {
+        console.log('setKey', props);
     }
 
-    wrapKey<T>(props: { key: stateKeyType; toArray: boolean; innerKey: string; value: T; }) {
-        console.log("wrapKey", props);
+    wrapKey<T>(props: { key: stateKeyType; toArray: boolean; innerKey: string; value: T }) {
+        console.log('wrapKey', props);
     }
-}
\ No newline at end of file
+}
diff --git a/components-sdk/playground/index.css b/components-sdk/playground/index.css
index ef20889..bf9fa7a 100644
--- a/components-sdk/playground/index.css
+++ b/components-sdk/playground/index.css
@@ -11,12 +11,14 @@ body {
     background-color: #07080e;
     background-attachment: fixed;
     color: #b4b7b9;
-    font-family: "gg sans",Whitney,"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: 'gg sans', Whitney, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 1.4rem;
     padding: 0;
     overflow-x: hidden;
 }
 
-*, ::after, ::before {
-	box-sizing: border-box;
-}
\ No newline at end of file
+*,
+::after,
+::before {
+    box-sizing: border-box;
+}
diff --git a/components-sdk/playground/main.tsx b/components-sdk/playground/main.tsx
index e950322..3383e3c 100644
--- a/components-sdk/playground/main.tsx
+++ b/components-sdk/playground/main.tsx
@@ -1,4 +1,4 @@
-import {createRoot} from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 
diff --git a/components-sdk/src/Capsule.module.css b/components-sdk/src/Capsule.module.css
index 6b3eb3c..06481df 100644
--- a/components-sdk/src/Capsule.module.css
+++ b/components-sdk/src/Capsule.module.css
@@ -1,200 +1,197 @@
-
 .preview {
-  padding: 2rem 4rem;
-  border-radius: 8px;
-  color: #dcddde;
-  background: #36393f;
-  font-family: "gg sans",Whitney,"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-
-  font-size: 1.6rem;
-  line-height: 2.2rem;
-  letter-spacing: normal;
-  font-weight: 400;
-  position: relative;
-
-  [type="text"], [role="textbox"] {
-    padding: 0;
-    min-height: 0;
-    border: unset;
-    box-shadow: unset !important;
-    background: none;
-
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    font-weight: inherit;
-    color: inherit;
-    outline: unset;
-    width: 100%;
-    resize: none;
-
-    &::placeholder {
-      font-style: italic !important;
-      color: gray !important;
-    }
-
-    [data-slate-placeholder="true"] {
-      top: 0 !important; /* the same as padding-top */
+    padding: 2rem 4rem;
+    border-radius: 8px;
+    color: #dcddde;
+    background: #36393f;
+    font-family: 'gg sans', Whitney, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    font-size: 1.6rem;
+    line-height: 2.2rem;
+    letter-spacing: normal;
+    font-weight: 400;
+    position: relative;
+
+    [type='text'],
+    [role='textbox'] {
+        padding: 0;
+        min-height: 0;
+        border: unset;
+        box-shadow: unset !important;
+        background: none;
+
+        font-size: inherit;
+        font-family: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        font-weight: inherit;
+        color: inherit;
+        outline: unset;
+        width: 100%;
+        resize: none;
+
+        &::placeholder {
+            font-style: italic !important;
+            color: gray !important;
+        }
+
+        [data-slate-placeholder='true'] {
+            top: 0 !important; /* the same as padding-top */
+        }
     }
-
-  }
-
 }
 
 .component {
-  margin-right: 2rem;
-  position: relative;
-  margin-bottom: 8px;
+    margin-right: 2rem;
+    position: relative;
+    margin-bottom: 8px;
 }
 .component_remove {
-  position: absolute;
-  right: -2rem;
-  top: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 21px;
-  height: 21px;
-  margin-right: -5px;
-  opacity: 0.6;
-  border-radius: 3px;
-  &:hover {
-    opacity: 1;
-    background: #D15B06;
-  }
+    position: absolute;
+    right: -2rem;
+    top: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 21px;
+    height: 21px;
+    margin-right: -5px;
+    opacity: 0.6;
+    border-radius: 3px;
+    &:hover {
+        opacity: 1;
+        background: #d15b06;
+    }
 }
 
 .large_button_ctx.noright {
-  right: unset;
+    right: unset;
 }
 .emoji {
-  width: 19px;
-  height: 19px;
-  display: flex;
-  img {
-    vertical-align: baseline;
-  }
+    width: 19px;
+    height: 19px;
+    display: flex;
+    img {
+        vertical-align: baseline;
+    }
 }
 
 .large_button {
-  background: #2f3136;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
-  margin: 2px 0;
-  padding: 0.8rem 1.6rem;
-  max-width: 100%;
-
-  .emoji {
-    margin-right: 1rem;
-  }
-
-  .text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: left;
-  cursor: pointer;
-  position: relative;
-  user-select: none;
-  height: 4rem;
-  text-wrap: nowrap;
-
-  &.small {
-    margin-left: 1rem;
-    .large_button_icon  {
-      margin: 0;
+    background: #2f3136;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+    margin: 2px 0;
+    padding: 0.8rem 1.6rem;
+    max-width: 100%;
+
+    .emoji {
+        margin-right: 1rem;
     }
-    .large_button_ctx {
-      right: unset;
+
+    .text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
-  }
-
-  &.inline {
-    width: 100%;
-    max-width: unset;
-    padding: 0.4rem 0.9rem;
-    background: unset;
-    background: rgba(0, 0,0 , 0.03);
-  }
-
-  &.pseudo {
-    margin: 0;
-    padding: 0;
-    height: unset;
-    border: unset;
-    box-shadow: unset;
-    background: none;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: left;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+    height: 4rem;
     text-wrap: nowrap;
 
-    .large_button_icon {
-      margin: 0;
-      transition: transform 0.3s ease-in-out;
-      &:hover {
-        transform: rotate(-0.5turn);
-      }
+    &.small {
+        margin-left: 1rem;
+        .large_button_icon {
+            margin: 0;
+        }
+        .large_button_ctx {
+            right: unset;
+        }
     }
-    .large_button_ctx {
-      left: unset;
-      right: 0;
+
+    &.inline {
+        width: 100%;
+        max-width: unset;
+        padding: 0.4rem 0.9rem;
+        background: unset;
+        background: rgba(0, 0, 0, 0.03);
     }
-  }
 
-  .large_button_icon {
-    width: 2rem;
-    height: 2rem;
-    margin-right: 1rem;
-  }
+    &.pseudo {
+        margin: 0;
+        padding: 0;
+        height: unset;
+        border: unset;
+        box-shadow: unset;
+        background: none;
+        text-wrap: nowrap;
+
+        .large_button_icon {
+            margin: 0;
+            transition: transform 0.3s ease-in-out;
+            &:hover {
+                transform: rotate(-0.5turn);
+            }
+        }
+        .large_button_ctx {
+            left: unset;
+            right: 0;
+        }
+    }
 
+    .large_button_icon {
+        width: 2rem;
+        height: 2rem;
+        margin-right: 1rem;
+    }
 }
 
 .large_button_ctx {
-  position: absolute;
-  top: 2.3rem;
-  left: 2.3rem;
-  right: -2.3rem;
-  background: #1c1d20;
-  color: #eee;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-  z-index: 99;
-  overflow: hidden;
-  cursor: default;
-  min-width: max-content;
-  user-select: none;
+    position: absolute;
+    top: 2.3rem;
+    left: 2.3rem;
+    right: -2.3rem;
+    background: #1c1d20;
+    color: #eee;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    z-index: 99;
+    overflow: hidden;
+    cursor: default;
+    min-width: max-content;
+    user-select: none;
 }
 
 .large_button_ctx_item {
-  display: flex;
-  align-items: stretch;
-  cursor: pointer;
-  .large_button_ctx_item_img {
-    padding-left: 1rem;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    img {
-      width: 2rem;
-      height: 2rem;
+    align-items: stretch;
+    cursor: pointer;
+    .large_button_ctx_item_img {
+        padding-left: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            width: 2rem;
+            height: 2rem;
+        }
     }
-  }
-
-  &.separator {
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    padding-top: 0;
-  }
-  &:hover {
-    background: #26292c;
-  }
-  .large_button_ctx_item_text {
-    font-size: 1.4rem;
-    color: #dcddde;
-    padding: 1rem;
-  }
-}
\ No newline at end of file
+
+    &.separator {
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        padding-top: 0;
+    }
+    &:hover {
+        background: #26292c;
+    }
+    .large_button_ctx_item_text {
+        font-size: 1.4rem;
+        color: #dcddde;
+        padding: 1rem;
+    }
+}
diff --git a/components-sdk/src/Capsule.tsx b/components-sdk/src/Capsule.tsx
index 30753f2..ad028d8 100644
--- a/components-sdk/src/Capsule.tsx
+++ b/components-sdk/src/Capsule.tsx
@@ -1,22 +1,23 @@
-import Styles from './Capsule.module.css'
-import {TextDisplay} from "./components/TextDisplay";
-import {Thumbnail} from "./components/Thumbnail";
-import {MediaGallery} from "./components/MediaGallery";
-import {Separator} from "./components/Separator";
-import {Section} from "./components/Section";
-import {Container} from "./components/Container";
-import {Button} from "./components/Button";
-import {ActionRow} from "./components/ActionRow";
-import {StringSelect} from "./components/StringSelect";
-import {File} from "./components/File"
-import {CapsuleInner} from "./CapsuleInner";
-import {generateRandomAnimal, randomSentence, uuidv4} from "./utils/randomGen";
-import {stateKeyType, StateManager} from "./polyfills/StateManager";
+import Styles from './Capsule.module.css';
+import { TextDisplay } from './components/TextDisplay';
+import { Thumbnail } from './components/Thumbnail';
+import { MediaGallery } from './components/MediaGallery';
+import { Separator } from './components/Separator';
+import { Section } from './components/Section';
+import { Container } from './components/Container';
+import { Button } from './components/Button';
+import { ActionRow } from './components/ActionRow';
+import { StringSelect } from './components/StringSelect';
+import { File } from './components/File';
+import { CapsuleInner } from './CapsuleInner';
+import { generateRandomAnimal, randomSentence, uuidv4 } from './utils/randomGen';
+import { stateKeyType, StateManager } from './polyfills/StateManager';
 import {
     ActionRowComponent,
     ButtonComponent,
     Component,
-    ContainerComponent, FileComponent,
+    ContainerComponent,
+    FileComponent,
     MediaGalleryComponent,
     MediaGalleryItem,
     PassProps,
@@ -24,7 +25,7 @@ import {
     StringSelectComponent,
     TextDisplayComponent,
     ThumbnailComponent,
-} from "./utils/componentTypes";
+} from './utils/componentTypes';
 
 export const SPACING_SMALL = 1;
 export const SPACING_LARGE = 2;
@@ -35,55 +36,60 @@ const _Button = {
     label: '',
     emoji: null,
     disabled: false,
-} as ButtonComponent
+} as ButtonComponent;
 
 const _Image = {
     media: {
-        url: ''
+        url: '',
     },
     description: null,
     spoiler: false,
-} as MediaGalleryItem
+} as MediaGalleryItem;
 
-const _StringSelect = () => ({
-    type: 3,
-    custom_id: uuidv4(),
-    options: [
-        {
-            label: generateRandomAnimal(),
-            value: uuidv4(),
-            description: null,
-            emoji: null,
-            default: false,
-        }
-    ],
-    placeholder: "",
-    min_values: 1,
-    max_values: 1,
-    disabled: false,
-} as StringSelectComponent)
+const _StringSelect = () =>
+    ({
+        type: 3,
+        custom_id: uuidv4(),
+        options: [
+            {
+                label: generateRandomAnimal(),
+                value: uuidv4(),
+                description: null,
+                emoji: null,
+                default: false,
+            },
+        ],
+        placeholder: '',
+        min_values: 1,
+        max_values: 1,
+        disabled: false,
+    } as StringSelectComponent);
 
 export const default_settings = {
     Button: () => ({
         type: 1,
-        components: [{
-            ..._Button,
-            custom_id: uuidv4(),
-            label: generateRandomAnimal()
-        }]
+        components: [
+            {
+                ..._Button,
+                custom_id: uuidv4(),
+                label: generateRandomAnimal(),
+            },
+        ],
     }),
     LinkButton: () => ({
         type: 1,
-        components: [{
-            ..._Button,
-            style: 5,
-            url: 'https://google.com',
-            label: generateRandomAnimal()
-        }]
+        components: [
+            {
+                ..._Button,
+                style: 5,
+                url: 'https://google.com',
+                label: generateRandomAnimal(),
+            },
+        ],
     }),
     StringSelect: () => ({
         type: 1,
-        components: [_StringSelect()]
+        components: [_StringSelect()],
     }),
     TextDisplay: () => ({
         type: 10,
@@ -91,25 +97,23 @@ export const default_settings = {
     }),
     Thumbnail: {
         type: 11,
-        ..._Image
+        ..._Image,
     },
     MediaGallery: {
         type: 12,
-        items: [
-            _Image
-        ]
+        items: [_Image],
     },
     File: {
         type: 13,
         file: {
-            url: ''
+            url: '',
         },
         spoiler: false,
     },
     Separator: {
         type: 14,
         divider: true,
-        spacing: SPACING_SMALL
+        spacing: SPACING_SMALL,
     },
     Container: {
         type: 17,
@@ -118,24 +122,24 @@ export const default_settings = {
         components: [],
     },
 } as {
-    Button: () => ActionRowComponent<ButtonComponent>,
-    LinkButton: () => ActionRowComponent<ButtonComponent>,
-    StringSelect: () => ActionRowComponent<StringSelectComponent>,
-    TextDisplay: () => TextDisplayComponent,
-    Thumbnail: ThumbnailComponent,
-    MediaGallery: MediaGalleryComponent,
-    Separator: SeparatorComponent,
-    Container:ContainerComponent,
-    File: FileComponent
-}
+    Button: () => ActionRowComponent<ButtonComponent>;
+    LinkButton: () => ActionRowComponent<ButtonComponent>;
+    StringSelect: () => ActionRowComponent<StringSelectComponent>;
+    TextDisplay: () => TextDisplayComponent;
+    Thumbnail: ThumbnailComponent;
+    MediaGallery: MediaGalleryComponent;
+    Separator: SeparatorComponent;
+    Container: ContainerComponent;
+    File: FileComponent;
+};
 
 export type ComponentsProps = {
-    state: Component,
-    stateKey: stateKeyType,
-    passProps: PassProps,
-    stateManager: StateManager,
-    removeKeyParent?: stateKeyType,
-}
+    state: Component;
+    stateKey: stateKeyType;
+    passProps: PassProps;
+    stateManager: StateManager;
+    removeKeyParent?: stateKeyType;
+};
 
 export const COMPONENTS = {
     1: ActionRow,
@@ -149,22 +153,25 @@ export const COMPONENTS = {
     17: Container,
     13: File,
 } as unknown as {
-    [K: number]: (props: ComponentsProps) => JSX.Element
-}
+    [K: number]: (props: ComponentsProps) => JSX.Element;
+};
 
 export const SECTIONABLE = [
-    10 // TextDisplay,
-]
+    10, // TextDisplay,
+];
 
-export function Capsule(props : {
-    stateManager: StateManager,
-    stateKey: stateKeyType,
-    state: Component[],
-    className?: string | null,
-} & PassProps) {
+export function Capsule(
+    props: {
+        stateManager: StateManager;
+        stateKey: stateKeyType;
+        state: Component[];
+        className?: string | null;
+    } & PassProps
+) {
     const cls = props.className ? ' ' + props.className : '';
 
-    return <div className={Styles.preview + cls}>
+    return (
+        <div className={Styles.preview + cls}>
             <CapsuleInner
                 state={props.state}
                 stateKey={props.stateKey}
@@ -173,4 +180,5 @@ export function Capsule(props : {
                 passProps={props}
             />
         </div>
-    }
\ No newline at end of file
+    );
+}
diff --git a/components-sdk/src/CapsuleButton.tsx b/components-sdk/src/CapsuleButton.tsx
index d8f1384..c459693 100644
--- a/components-sdk/src/CapsuleButton.tsx
+++ b/components-sdk/src/CapsuleButton.tsx
@@ -1,97 +1,174 @@
-import Styles from "./Capsule.module.css";
-import Icons from "./icons/Icons.svg";
-import TextDisplayIcon from "./icons/TextDisplay.svg";
-import UploadIcon from "./icons/Upload.svg";
-import ContainerIcon from "./icons/Container.svg";
-import MediaGalleryIcon from "./icons/MediaGallery.svg";
-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 {default_settings} from "./Capsule";
-import {useCallback, useEffect, useRef, useState} from "react";
-import {Component} from "./utils/componentTypes";
+import Styles from './Capsule.module.css';
+import Icons from './icons/Icons.svg';
+import TextDisplayIcon from './icons/TextDisplay.svg';
+import UploadIcon from './icons/Upload.svg';
+import ContainerIcon from './icons/Container.svg';
+import MediaGalleryIcon from './icons/MediaGallery.svg';
+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 { default_settings } from './Capsule';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Component } from './utils/componentTypes';
 import { useStateOpen } from './utils/useStateOpen';
 
 export type capsuleButtonCtx = 'main' | 'container' | 'inline' | 'button-row' | 'frame';
 
 type props = {
-    context: capsuleButtonCtx,
-    callback: (data: Component) => any,
-    className?: string
+    context: capsuleButtonCtx;
+    callback: (data: Component) => any;
+    className?: string;
 };
 
-export function CapsuleButton({context, callback, className} : props) {
-    const {open, setOpen, ignoreRef} = useStateOpen(false);
-    const cls = className ? " " + className : "";
+export function CapsuleButton({ context, callback, className }: props) {
+    const { open, setOpen, ignoreRef } = useStateOpen(false);
+    const cls = className ? ' ' + className : '';
     const btn_select = useRef<HTMLDivElement>(null);
 
     return (
-        <div className={Styles.large_button + cls} onClick={(ev) => {
-            setOpen(!(btn_select.current && btn_select.current.contains(ev.target as HTMLElement)));
-        }} ref={ignoreRef}>
-            <img  className={Styles.large_button_icon} src={Icons} alt=""/>
-            {context === "main" && "Add component"}
-            {context === "inline" && "Add inline component"}
-            {context === "container" && "Add content"}
-            {context === "button-row" && "Add button"}
+        <div
+            className={Styles.large_button + cls}
+            onClick={(ev) => {
+                setOpen(!(btn_select.current && btn_select.current.contains(ev.target as HTMLElement)));
+            }}
+            ref={ignoreRef}
+        >
+            <img className={Styles.large_button_icon} src={Icons} alt="" />
+            {context === 'main' && 'Add component'}
+            {context === 'inline' && 'Add inline component'}
+            {context === 'container' && 'Add content'}
+            {context === 'button-row' && 'Add button'}
 
-            { open && <div className={Styles.large_button_ctx} ref={btn_select}>
-                {['main', 'inline', 'container'].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}>Content</div>
-                </div>}
-                {['main'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(default_settings.Container)
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={ContainerIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>Container</div>
-                </div>}
-                {['main', 'container'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(default_settings.MediaGallery)
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={MediaGalleryIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>Image</div>
-                </div>}
-                {['main', 'container'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(default_settings.File)
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={UploadIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>File</div>
-                </div>}
-                {['main', 'container'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(default_settings.Separator)
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={SeparatorIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>Separator</div>
-                </div>}
-                {['main', 'frame', 'container', 'button-row'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(context==='frame' ? default_settings.Button().components[0] : default_settings.Button())
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={ButtonIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>Button</div>
-                </div>}
-                {['main', 'frame', 'container', 'button-row'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(context==='frame' ? default_settings.LinkButton().components[0] : default_settings.LinkButton())
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={LinkButtonIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>Button link</div>
-                </div>}
-                {['main', 'container', 'container'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(default_settings.StringSelect())
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={SelectIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>Select menu</div>
-                </div>}
-                {['frame'].includes(context) && <div className={Styles.large_button_ctx_item} onClick={() => {
-                    callback(default_settings.Thumbnail)
-                }}>
-                    <div className={Styles.large_button_ctx_item_img}><img src={MediaGalleryIcon} alt=""/></div>
-                    <div className={Styles.large_button_ctx_item_text}>Thumbnail</div>
-                </div>}
-            </div>}
+            {open && (
+                <div className={Styles.large_button_ctx} ref={btn_select}>
+                    {['main', 'inline', 'container'].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}>Content</div>
+                        </div>
+                    )}
+                    {['main'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(default_settings.Container);
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={ContainerIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>Container</div>
+                        </div>
+                    )}
+                    {['main', 'container'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(default_settings.MediaGallery);
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={MediaGalleryIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>Image</div>
+                        </div>
+                    )}
+                    {['main', 'container'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(default_settings.File);
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={UploadIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>File</div>
+                        </div>
+                    )}
+                    {['main', 'container'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(default_settings.Separator);
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={SeparatorIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>Separator</div>
+                        </div>
+                    )}
+                    {['main', 'frame', 'container', 'button-row'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(
+                                    context === 'frame'
+                                        ? default_settings.Button().components[0]
+                                        : default_settings.Button()
+                                );
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={ButtonIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>Button</div>
+                        </div>
+                    )}
+                    {['main', 'frame', 'container', 'button-row'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(
+                                    context === 'frame'
+                                        ? default_settings.LinkButton().components[0]
+                                        : default_settings.LinkButton()
+                                );
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={LinkButtonIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>Button link</div>
+                        </div>
+                    )}
+                    {['main', 'container', 'container'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(default_settings.StringSelect());
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={SelectIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>Select menu</div>
+                        </div>
+                    )}
+                    {['frame'].includes(context) && (
+                        <div
+                            className={Styles.large_button_ctx_item}
+                            onClick={() => {
+                                callback(default_settings.Thumbnail);
+                            }}
+                        >
+                            <div className={Styles.large_button_ctx_item_img}>
+                                <img src={MediaGalleryIcon} alt="" />
+                            </div>
+                            <div className={Styles.large_button_ctx_item_text}>Thumbnail</div>
+                        </div>
+                    )}
+                </div>
+            )}
         </div>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/components-sdk/src/CapsuleInner.tsx b/components-sdk/src/CapsuleInner.tsx
index 6d093d4..282e3c2 100644
--- a/components-sdk/src/CapsuleInner.tsx
+++ b/components-sdk/src/CapsuleInner.tsx
@@ -1,81 +1,114 @@
-import {COMPONENTS, SECTIONABLE} from "./Capsule";
-import CapsuleStyles from "./Capsule.module.css";
-import {CapsuleButton, capsuleButtonCtx} from "./CapsuleButton";
-import {SectionFrame} from "./components/Section";
-import {Fragment, ReactElement} from "react";
-import {stateKeyType, StateManager} from "./polyfills/StateManager"
-import {Component, ComponentType, PassProps} from "./utils/componentTypes";
-import TimesSolid from "./icons/times-solid.svg"
-
+import { COMPONENTS, SECTIONABLE } from './Capsule';
+import CapsuleStyles from './Capsule.module.css';
+import { CapsuleButton, capsuleButtonCtx } from './CapsuleButton';
+import { SectionFrame } from './components/Section';
+import { Fragment, ReactElement } from 'react';
+import { stateKeyType, StateManager } from './polyfills/StateManager';
+import { Component, ComponentType, PassProps } from './utils/componentTypes';
+import TimesSolid from './icons/times-solid.svg';
 
 type commonProps = {
-    showSectionButton?: boolean,
-    stateManager: StateManager,
-    removeKeyParent?: stateKeyType,
-    passProps: PassProps,
-    buttonContext: capsuleButtonCtx,
-    buttonClassName?: string
-}
+    showSectionButton?: boolean;
+    stateManager: StateManager;
+    removeKeyParent?: stateKeyType;
+    passProps: PassProps;
+    buttonContext: capsuleButtonCtx;
+    buttonClassName?: string;
+};
 
 type props = {
-    state: Component[],
-    stateKey: stateKeyType,
-} & commonProps
-
-export function CapsuleInner({state, stateKey, stateManager, showSectionButton = true, removeKeyParent, passProps, buttonContext, buttonClassName}: props) {
+    state: Component[];
+    stateKey: stateKeyType;
+} & commonProps;
 
+export function CapsuleInner({
+    state,
+    stateKey,
+    stateManager,
+    showSectionButton = true,
+    removeKeyParent,
+    passProps,
+    buttonContext,
+    buttonClassName,
+}: props) {
     return (
         <>
-        {state.map((component, i) => <CapsuleInnerItem
-            key={`${component.id || i}`}
-            state={component}
-            stateKey={[...stateKey, i]}
-            stateManager={stateManager}
-            showSectionButton={showSectionButton}
-            removeKeyParent={removeKeyParent}
-            passProps={passProps}
-            buttonContext={buttonContext}
-        />)}
-
-        <CapsuleButton context={buttonContext} className={buttonClassName} callback={value => stateManager.appendKey({key: stateKey, value})} />
+            {state.map((component, i) => (
+                <CapsuleInnerItem
+                    key={`${component.id || i}`}
+                    state={component}
+                    stateKey={[...stateKey, i]}
+                    stateManager={stateManager}
+                    showSectionButton={showSectionButton}
+                    removeKeyParent={removeKeyParent}
+                    passProps={passProps}
+                    buttonContext={buttonContext}
+                />
+            ))}
 
-        {/* CapsuleButton is inline, so you can add more buttons after <CapsuleInner .../> */}
+            <CapsuleButton
+                context={buttonContext}
+                className={buttonClassName}
+                callback={(value) => stateManager.appendKey({ key: stateKey, value })}
+            />
 
+            {/* CapsuleButton is inline, so you can add more buttons after <CapsuleInner .../> */}
         </>
     );
 }
 
 type itemProps = {
-    state: Component,
-    stateKey: stateKeyType,
+    state: Component;
+    stateKey: stateKeyType;
 } & commonProps;
 
-function CapsuleInnerItem({state, stateKey, stateManager, showSectionButton, removeKeyParent, passProps}: itemProps) {
+function CapsuleInnerItem({ state, stateKey, stateManager, showSectionButton, removeKeyParent, passProps }: itemProps) {
     const Component = COMPONENTS[state.type];
-    if (typeof Component === "undefined") return null;
+    if (typeof Component === 'undefined') return null;
 
-    return <div className={CapsuleStyles.component}>
-        <div className={CapsuleStyles.component_remove} onClick={() => {
-            if (state.type === 9 || state.type === 17) {
-                stateManager.deleteKey({key: stateKey, decoupleFrom: 'components', removeKeyParent});
-                return;
-            }
+    return (
+        <div className={CapsuleStyles.component}>
+            <div
+                className={CapsuleStyles.component_remove}
+                onClick={() => {
+                    if (state.type === 9 || state.type === 17) {
+                        stateManager.deleteKey({ key: stateKey, decoupleFrom: 'components', removeKeyParent });
+                        return;
+                    }
 
-            stateManager.deleteKey({key: stateKey, removeKeyParent});
-        }}><img width={14} height={14} src={TimesSolid} alt={'x'}/></div>
-        <MaybeSection type={state.type} showSectionButton={showSectionButton} stateKey={stateKey} stateManager={stateManager}>
-            <Component state={state} stateKey={stateKey} stateManager={stateManager} passProps={passProps}/>
-        </MaybeSection>
-    </div>
+                    stateManager.deleteKey({ key: stateKey, removeKeyParent });
+                }}
+            >
+                <img width={14} height={14} src={TimesSolid} alt={'x'} />
+            </div>
+            <MaybeSection
+                type={state.type}
+                showSectionButton={showSectionButton}
+                stateKey={stateKey}
+                stateManager={stateManager}
+            >
+                <Component state={state} stateKey={stateKey} stateManager={stateManager} passProps={passProps} />
+            </MaybeSection>
+        </div>
+    );
 }
 
-function MaybeSection({showSectionButton, type, stateKey, stateManager, children}: {
-    showSectionButton: itemProps['showSectionButton'],
-    stateKey: itemProps['stateKey'],
-    stateManager: itemProps['stateManager']
-    type: ComponentType,
-    children: ReactElement
+function MaybeSection({
+    showSectionButton,
+    type,
+    stateKey,
+    stateManager,
+    children,
+}: {
+    showSectionButton: itemProps['showSectionButton'];
+    stateKey: itemProps['stateKey'];
+    stateManager: itemProps['stateManager'];
+    type: ComponentType;
+    children: ReactElement;
 }): ReactElement {
-    return (showSectionButton && SECTIONABLE.includes(type)) ?
-        <SectionFrame stateKey={stateKey} stateManager={stateManager} children={children} /> : children
-}
\ No newline at end of file
+    return showSectionButton && SECTIONABLE.includes(type) ? (
+        <SectionFrame stateKey={stateKey} stateManager={stateManager} children={children} />
+    ) : (
+        children
+    );
+}
diff --git a/components-sdk/src/components/ActionRow.module.css b/components-sdk/src/components/ActionRow.module.css
index 9ce7a0e..a4608a9 100644
--- a/components-sdk/src/components/ActionRow.module.css
+++ b/components-sdk/src/components/ActionRow.module.css
@@ -1,5 +1,5 @@
 .action_row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
\ No newline at end of file
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
diff --git a/components-sdk/src/components/ActionRow.tsx b/components-sdk/src/components/ActionRow.tsx
index 788e290..53fd219 100644
--- a/components-sdk/src/components/ActionRow.tsx
+++ b/components-sdk/src/components/ActionRow.tsx
@@ -1,21 +1,44 @@
-import {COMPONENTS, ComponentsProps} from "../Capsule";
-import Styles from "./ActionRow.module.css";
-import {CapsuleButton} from "../CapsuleButton";
-import {ActionRowComponent, ActionRowPossible, ButtonComponent, Component} from "../utils/componentTypes";
+import { COMPONENTS, ComponentsProps } from '../Capsule';
+import Styles from './ActionRow.module.css';
+import { CapsuleButton } from '../CapsuleButton';
+import { ActionRowComponent, ActionRowPossible, ButtonComponent, Component } from '../utils/componentTypes';
 
-export function ActionRow({state, stateKey, stateManager, passProps} : ComponentsProps & {state: ActionRowComponent<ActionRowPossible>}) {
-    const selectButton = (state?.components || []).find(component => component.type === 3);
+export function ActionRow({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+}: ComponentsProps & { state: ActionRowComponent<ActionRowPossible> }) {
+    const selectButton = (state?.components || []).find((component) => component.type === 3);
 
     return (
-        <div className={selectButton ? '' : Styles.action_row }>
-        {(state?.components || []).map((component, index) => {
-            const Component = COMPONENTS[component.type];
-            if (typeof Component === "undefined") return null;
-            return <Component key={component.custom_id} stateKey={[...stateKey, "components", index]} passProps={passProps} stateManager={stateManager} state={component} removeKeyParent={stateKey} />
-        })}
-
-        {!selectButton && <CapsuleButton context={'button-row'} callback={val => stateManager.appendKey({key: [...stateKey, "components"], value: (val as ActionRowComponent<ButtonComponent>).components[0]})} />}
+        <div className={selectButton ? '' : Styles.action_row}>
+            {(state?.components || []).map((component, index) => {
+                const Component = COMPONENTS[component.type];
+                if (typeof Component === 'undefined') return null;
+                return (
+                    <Component
+                        key={component.custom_id}
+                        stateKey={[...stateKey, 'components', index]}
+                        passProps={passProps}
+                        stateManager={stateManager}
+                        state={component}
+                        removeKeyParent={stateKey}
+                    />
+                );
+            })}
 
+            {!selectButton && (
+                <CapsuleButton
+                    context={'button-row'}
+                    callback={(val) =>
+                        stateManager.appendKey({
+                            key: [...stateKey, 'components'],
+                            value: (val as ActionRowComponent<ButtonComponent>).components[0],
+                        })
+                    }
+                />
+            )}
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/components-sdk/src/components/Button.module.css b/components-sdk/src/components/Button.module.css
index ac67393..3843f09 100644
--- a/components-sdk/src/components/Button.module.css
+++ b/components-sdk/src/components/Button.module.css
@@ -1,71 +1,76 @@
 .blue {
-  background: #5865F2;
-  border: 1px solid rgba(255,255,255, 0.2);
+    background: #5865f2;
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .green {
-  background: #248045;
-  border: 1px solid rgba(255,255,255, 0.2);
+    background: #248045;
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .grey {
-  background: #4E5058;
-  border: 1px solid rgba(255,255,255, 0.1);
+    background: #4e5058;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .red {
-  background: #DA373C;
-  border: 1px solid rgba(255,255,255, 0.25);
+    background: #da373c;
+    border: 1px solid rgba(255, 255, 255, 0.25);
 }
 
 .blue_disabled {
-  background: rgb(88, 101, 242, 0.4);
+    background: rgb(88, 101, 242, 0.4);
 }
 .green_disabled {
-  background: rgb(36, 128, 69, 0.4);
+    background: rgb(36, 128, 69, 0.4);
 }
 .grey_disabled {
-  background: rgb(78, 80, 88, 0.4);
+    background: rgb(78, 80, 88, 0.4);
 }
 .red_disabled {
-  background: rgb(218, 55, 60, 0.4);
+    background: rgb(218, 55, 60, 0.4);
 }
 
-.blue, .green, .grey, .red {
-  color: #fff;
+.blue,
+.green,
+.grey,
+.red {
+    color: #fff;
 }
 
-.blue_disabled, .green_disabled, .grey_disabled, .red_disabled {
-  color: #aaa;
-  border: 1px solid rgba(255,255,255, 0.1);
+.blue_disabled,
+.green_disabled,
+.grey_disabled,
+.red_disabled {
+    color: #aaa;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.input[type="text"] {
-  padding: 0.8rem 1.6rem;
-  width: 200px;
+.input[type='text'] {
+    padding: 0.8rem 1.6rem;
+    width: 200px;
 }
 
 .link_btn {
-  line-height: 100%;
-  .text {
-    width: fit-content;
-
-  }
+    line-height: 100%;
+    .text {
+        width: fit-content;
+    }
 
-  .link {
-    font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    .link {
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 .menu_label {
-  position: relative;
-  padding-right: 7px;
-  img {
-    width: 25px;
-    height: 25px;
-    padding: 7px;
-    cursor: pointer;
-    position: absolute;
-    top:0;
-    right: 0;
-  }
+    position: relative;
+    padding-right: 7px;
+    img {
+        width: 25px;
+        height: 25px;
+        padding: 7px;
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
 }
diff --git a/components-sdk/src/components/Button.tsx b/components-sdk/src/components/Button.tsx
index 7c88ee6..1924efc 100644
--- a/components-sdk/src/components/Button.tsx
+++ b/components-sdk/src/components/Button.tsx
@@ -1,27 +1,30 @@
-import Styles from "./Button.module.css";
-import CapsuleStyles from "../Capsule.module.css";
+import Styles from './Button.module.css';
+import CapsuleStyles from '../Capsule.module.css';
 import {
-    Dispatch, forwardRef,
+    Dispatch,
+    forwardRef,
     Fragment,
-    MutableRefObject, RefObject,
+    MutableRefObject,
+    RefObject,
     SetStateAction,
     useCallback,
-    useEffect, useImperativeHandle,
+    useEffect,
+    useImperativeHandle,
     useLayoutEffect,
     useRef,
-    useState
+    useState,
 } from 'react';
-import ColorBlue from "../icons/ColorBlue.svg";
-import ColorGrey from "../icons/ColorGrey.svg";
-import ColorGreen from "../icons/ColorGreen.svg";
-import ColorRed from "../icons/ColorRed.svg";
-import Icons from "../icons/Icons.svg";
-import {ButtonComponent, ButtonStyle, EmojiObject} from "../utils/componentTypes";
-import {ComponentsProps} from "../Capsule";
-import {stateKeyType} from "../polyfills/StateManager";
-import TrashIcon from "../icons/Trash.svg";
+import ColorBlue from '../icons/ColorBlue.svg';
+import ColorGrey from '../icons/ColorGrey.svg';
+import ColorGreen from '../icons/ColorGreen.svg';
+import ColorRed from '../icons/ColorRed.svg';
+import Icons from '../icons/Icons.svg';
+import { ButtonComponent, ButtonStyle, EmojiObject } from '../utils/componentTypes';
+import { ComponentsProps } from '../Capsule';
+import { stateKeyType } from '../polyfills/StateManager';
+import TrashIcon from '../icons/Trash.svg';
 import { useStateOpen } from '../utils/useStateOpen';
-import TimesSolid from "../icons/times-solid.svg"
+import TimesSolid from '../icons/times-solid.svg';
 
 /*
 
@@ -35,17 +38,18 @@ import TimesSolid from "../icons/times-solid.svg"
  */
 
 function getColor(style: ButtonStyle, disabled: boolean) {
-    if (disabled) switch (style) {
-        case 1:
-            return Styles.blue_disabled;
-        case 2:
-        case 5:
-            return Styles.grey_disabled;
-        case 3:
-            return Styles.green_disabled;
-        case 4:
-            return Styles.red_disabled;
-    }
+    if (disabled)
+        switch (style) {
+            case 1:
+                return Styles.blue_disabled;
+            case 2:
+            case 5:
+                return Styles.grey_disabled;
+            case 3:
+                return Styles.green_disabled;
+            case 4:
+                return Styles.red_disabled;
+        }
 
     switch (style) {
         case 1:
@@ -60,14 +64,16 @@ function getColor(style: ButtonStyle, disabled: boolean) {
     }
 }
 
-
-export function Button(
-    {state, stateKey, stateManager, removeKeyParent = undefined, passProps} :
-    ComponentsProps & {state: ButtonComponent}
-) {
-    const {open, setOpen, ignoreRef, closeLockRef} = useStateOpen(0);
+export function Button({
+    state,
+    stateKey,
+    stateManager,
+    removeKeyParent = undefined,
+    passProps,
+}: ComponentsProps & { state: ButtonComponent }) {
+    const { open, setOpen, ignoreRef, closeLockRef } = useStateOpen(0);
     const btn_select = useRef<HTMLDivElement>(null);
-    const Comp = passProps.EmojiShow
+    const Comp = passProps.EmojiShow;
 
     // LINK BUTTON START
 
@@ -81,133 +87,258 @@ export function Button(
 
     return (
         <div
-            className={CapsuleStyles.large_button  + ' ' + getColor(state.style, state.disabled)}
+            className={CapsuleStyles.large_button + ' ' + getColor(state.style, state.disabled)}
             onClick={(ev) => {
                 if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
-                setOpen(1)
-            }} ref={ignoreRef}
+                setOpen(1);
+            }}
+            ref={ignoreRef}
         >
-            {state.emoji !== null && <div className={CapsuleStyles.emoji}>
-                <Comp passProps={passProps} emoji={state.emoji}/>
-            </div>}
-            {/**/}
-            {state.style === 5 ? <>
-                <div className={CapsuleStyles.text + ' ' + Styles.link_btn}>
-                    <div className={Styles.text} ref={textRef}>{state.label}</div>
-                    <div className={Styles.link} style={{width: textWidth}}>{(state.url || "").replace("https://", "").replace("http://", "")}</div>
+            {state.emoji !== null && (
+                <div className={CapsuleStyles.emoji}>
+                    <Comp passProps={passProps} emoji={state.emoji} />
                 </div>
+            )}
+            {/**/}
+            {state.style === 5 ? (
+                <>
+                    <div className={CapsuleStyles.text + ' ' + Styles.link_btn}>
+                        <div className={Styles.text} ref={textRef}>
+                            {state.label}
+                        </div>
+                        <div className={Styles.link} style={{ width: textWidth }}>
+                            {(state.url || '').replace('https://', '').replace('http://', '')}
+                        </div>
+                    </div>
 
-                <div style={{paddingLeft: '10px'}}><i className="fas fa-arrow-up-right-from-square" style={{fontSize: 12}}></i></div>
-            </> : <div className={CapsuleStyles.text}>{state.label}</div>}
+                    <div style={{ paddingLeft: '10px' }}>
+                        <i className="fas fa-arrow-up-right-from-square" style={{ fontSize: 12 }}></i>
+                    </div>
+                </>
+            ) : (
+                <div className={CapsuleStyles.text}>{state.label}</div>
+            )}
 
-            {!!open && <div className={CapsuleStyles.large_button_ctx + ' ' + CapsuleStyles.noright} ref={btn_select}>
-                {open === 1 && <MenuFirst 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}/>}
-            </div>}
+            {!!open && (
+                <div className={CapsuleStyles.large_button_ctx + ' ' + CapsuleStyles.noright} ref={btn_select}>
+                    {open === 1 && (
+                        <MenuFirst
+                            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}
+                        />
+                    )}
+                </div>
+            )}
         </div>
-    )
+    );
 }
 
-function MenuFirst({state, stateKey, stateManager, setOpen, removeKeyParent} : {
-    state: ButtonComponent,
-    setOpen: Dispatch<SetStateAction<number>>,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
-    removeKeyParent?: stateKeyType,
+function MenuFirst({
+    state,
+    stateKey,
+    stateManager,
+    setOpen,
+    removeKeyParent,
+}: {
+    state: ButtonComponent;
+    setOpen: Dispatch<SetStateAction<number>>;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
+    removeKeyParent?: stateKeyType;
 }) {
-    return <>
-        {state.style !== 5 && <Fragment>
-            <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-                stateManager.setKey({key: [...stateKey, "style"], value: 1})
-            }}>
-                <div className={CapsuleStyles.large_button_ctx_item_img}><img src={ColorBlue} alt=""/></div>
-                <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to blue</div>
-            </div>
-            <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-                stateManager.setKey({key: [...stateKey, "style"], value: 2})
-            }}>
-                <div className={CapsuleStyles.large_button_ctx_item_img}><img src={ColorGrey} alt=""/></div>
-                <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to grey</div>
-            </div>
-            <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-                stateManager.setKey({key: [...stateKey, "style"], value: 3})
-            }}>
-                <div className={CapsuleStyles.large_button_ctx_item_img}><img src={ColorGreen} alt=""/></div>
-                <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to green</div>
+    return (
+        <>
+            {state.style !== 5 && (
+                <Fragment>
+                    <div
+                        className={CapsuleStyles.large_button_ctx_item}
+                        onClick={() => {
+                            stateManager.setKey({ key: [...stateKey, 'style'], value: 1 });
+                        }}
+                    >
+                        <div className={CapsuleStyles.large_button_ctx_item_img}>
+                            <img src={ColorBlue} alt="" />
+                        </div>
+                        <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to blue</div>
+                    </div>
+                    <div
+                        className={CapsuleStyles.large_button_ctx_item}
+                        onClick={() => {
+                            stateManager.setKey({ key: [...stateKey, 'style'], value: 2 });
+                        }}
+                    >
+                        <div className={CapsuleStyles.large_button_ctx_item_img}>
+                            <img src={ColorGrey} alt="" />
+                        </div>
+                        <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to grey</div>
+                    </div>
+                    <div
+                        className={CapsuleStyles.large_button_ctx_item}
+                        onClick={() => {
+                            stateManager.setKey({ key: [...stateKey, 'style'], value: 3 });
+                        }}
+                    >
+                        <div className={CapsuleStyles.large_button_ctx_item_img}>
+                            <img src={ColorGreen} alt="" />
+                        </div>
+                        <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to green</div>
+                    </div>
+                    <div
+                        className={CapsuleStyles.large_button_ctx_item}
+                        onClick={() => {
+                            stateManager.setKey({ key: [...stateKey, 'style'], value: 4 });
+                        }}
+                    >
+                        <div className={CapsuleStyles.large_button_ctx_item_img}>
+                            <img src={ColorRed} alt="" />
+                        </div>
+                        <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to red</div>
+                    </div>
+                </Fragment>
+            )}
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={() => {
+                    stateManager.setKey({ key: [...stateKey, 'disabled'], value: !state.disabled });
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>
+                    {state.disabled ? 'Mark as enabled' : 'Mark as disabled'}
+                </div>
             </div>
-            <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-                stateManager.setKey({key: [...stateKey, "style"], value: 4})
-            }}>
-                <div className={CapsuleStyles.large_button_ctx_item_img}><img src={ColorRed} alt=""/></div>
-                <div className={CapsuleStyles.large_button_ctx_item_text}>Set theme to red</div>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(2);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Set emoji</div>
             </div>
-        </Fragment>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-            stateManager.setKey({key: [...stateKey, "disabled"], value: !state.disabled})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
+            {state.emoji !== null && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    onClick={(ev) => {
+                        stateManager.setKey({ key: [...stateKey, 'emoji'], value: null });
+                    }}
+                >
+                    <div className={CapsuleStyles.large_button_ctx_item_img}>
+                        <img src={Icons} alt="" />
+                    </div>
+                    <div className={CapsuleStyles.large_button_ctx_item_text}>Clear emoji</div>
+                </div>
+            )}
             <div
-                className={CapsuleStyles.large_button_ctx_item_text}>{state.disabled ? "Mark as enabled" : "Mark as disabled"}</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(2);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Set emoji</div>
-        </div>
-        {state.emoji !== null && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            stateManager.setKey({key: [...stateKey, "emoji"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Clear emoji</div>
-        </div>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(3);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Change label</div>
-        </div>
-        {state.style === 5 && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(4);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Change url</div>
-        </div>}
-        {!!removeKeyParent && <div className={CapsuleStyles.large_button_ctx_item} 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}>Delete</div>
-        </div>}
-    </>
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(3);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Change label</div>
+            </div>
+            {state.style === 5 && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    onClick={(ev) => {
+                        setOpen(4);
+                        ev.stopPropagation();
+                    }}
+                >
+                    <div className={CapsuleStyles.large_button_ctx_item_img}>
+                        <img src={Icons} alt="" />
+                    </div>
+                    <div className={CapsuleStyles.large_button_ctx_item_text}>Change url</div>
+                </div>
+            )}
+            {!!removeKeyParent && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    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}>Delete</div>
+                </div>
+            )}
+        </>
+    );
 }
 
-export function MenuEmoji({stateKey, stateManager, passProps} : {
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
-    passProps: ComponentsProps['passProps']
+export function MenuEmoji({
+    stateKey,
+    stateManager,
+    passProps,
+}: {
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
+    passProps: ComponentsProps['passProps'];
 }) {
     const Comp = passProps.EmojiPicker;
-    return <Comp
-        passProps={passProps}
-        onSelect={(emoji: EmojiObject) => {
-            stateManager.setKey({key: stateKey, value: emoji});
-        }}
-    />
+    return (
+        <Comp
+            passProps={passProps}
+            onSelect={(emoji: EmojiObject) => {
+                stateManager.setKey({ key: stateKey, value: emoji });
+            }}
+        />
+    );
 }
 
-export function MenuLabel({state, stateKey, stateManager, setOpen, nullable = false, closeLockRef} : {
-    state: string,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
-    setOpen: Dispatch<SetStateAction<number>>,
-    nullable?: boolean,
-    closeLockRef: RefObject<any>
+export function MenuLabel({
+    state,
+    stateKey,
+    stateManager,
+    setOpen,
+    nullable = false,
+    closeLockRef,
+}: {
+    state: string;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
+    setOpen: Dispatch<SetStateAction<number>>;
+    nullable?: boolean;
+    closeLockRef: RefObject<any>;
 }) {
     const ref = useRef<HTMLInputElement>(null);
     useImperativeHandle(closeLockRef, () => true);
@@ -215,18 +346,22 @@ export function MenuLabel({state, stateKey, stateManager, setOpen, nullable = fa
     useEffect(() => {
         if (ref.current) ref.current.focus();
     }, [ref.current]);
-    return <div className={Styles.menu_label}>
-        <input
-            ref={ref}
-            type="text"
-            value={state}
-            className={Styles.input}
-            placeholder="abcdefg"
-            onChange={(ev) => stateManager.setKey({
-                key: stateKey,
-                value: nullable ? (ev.target.value || null) : ev.target.value
-            })}
-        />
-        <img width={30} height={30} src={TimesSolid} alt={'x'} onClick={() => setOpen(0)} />
-    </div>
-}
\ No newline at end of file
+    return (
+        <div className={Styles.menu_label}>
+            <input
+                ref={ref}
+                type="text"
+                value={state}
+                className={Styles.input}
+                placeholder="abcdefg"
+                onChange={(ev) =>
+                    stateManager.setKey({
+                        key: stateKey,
+                        value: nullable ? ev.target.value || null : ev.target.value,
+                    })
+                }
+            />
+            <img width={30} height={30} src={TimesSolid} alt={'x'} onClick={() => setOpen(0)} />
+        </div>
+    );
+}
diff --git a/components-sdk/src/components/Container.module.css b/components-sdk/src/components/Container.module.css
index 6f68560..e2e241d 100644
--- a/components-sdk/src/components/Container.module.css
+++ b/components-sdk/src/components/Container.module.css
@@ -1,22 +1,21 @@
 .embed {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  padding: 16px;
-  position: relative;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 16px;
+    position: relative;
 
-  .bar {
-    position: absolute;
-    left: 1px;
-    top: 1px;
-    bottom: 1px;
-    width: 4px;
-    border-radius: 9px 0 0 9px;
-  }
+    .bar {
+        position: absolute;
+        left: 1px;
+        top: 1px;
+        bottom: 1px;
+        width: 4px;
+        border-radius: 9px 0 0 9px;
+    }
 
-  &.spoiler {
-    background-image:
-        radial-gradient(at 0% 0%, hsla(231, 46%, 22%, 0.6) 0, transparent 59%),
-        radial-gradient(at 50% 50%, hsla(321, 40%, 25%, 0.4) 0, transparent 55%);
-  }
-}
\ No newline at end of file
+    &.spoiler {
+        background-image: radial-gradient(at 0% 0%, hsla(231, 46%, 22%, 0.6) 0, transparent 59%),
+            radial-gradient(at 50% 50%, hsla(321, 40%, 25%, 0.4) 0, transparent 55%);
+    }
+}
diff --git a/components-sdk/src/components/Container.tsx b/components-sdk/src/components/Container.tsx
index ac46651..85b0d79 100644
--- a/components-sdk/src/components/Container.tsx
+++ b/components-sdk/src/components/Container.tsx
@@ -1,56 +1,76 @@
-import Styles from "./Container.module.css";
-import {CapsuleInner} from "../CapsuleInner";
-import ColorIcon from "../icons/Color.svg";
-import SpoilerIcon from "../icons/Spoiler.svg";
-import CapsuleStyles from "../Capsule.module.css";
-import ColorActiveIcon from "../icons/ColorActive.svg";
-import SpoilerActiveIcon from "../icons/SpoilerActive.svg";
-import {ChromePicker} from "react-color";
-import {ComponentsProps} from "../Capsule";
-import {ContainerComponent} from "../utils/componentTypes";
+import Styles from './Container.module.css';
+import { CapsuleInner } from '../CapsuleInner';
+import ColorIcon from '../icons/Color.svg';
+import SpoilerIcon from '../icons/Spoiler.svg';
+import CapsuleStyles from '../Capsule.module.css';
+import ColorActiveIcon from '../icons/ColorActive.svg';
+import SpoilerActiveIcon from '../icons/SpoilerActive.svg';
+import { ChromePicker } from 'react-color';
+import { ComponentsProps } from '../Capsule';
+import { ContainerComponent } from '../utils/componentTypes';
 import { useStateOpen } from '../utils/useStateOpen';
 
-
-export function Container({state, stateKey, stateManager, passProps} : ComponentsProps & {state: ContainerComponent}) {
+export function Container({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+}: ComponentsProps & { state: ContainerComponent }) {
     const hasColor = state.accent_color !== null;
-    const colorHex = "#" + Number(state.accent_color || 0).toString(16).padStart(6, '0');
-    const {open: pickerOpen, setOpen: setPickerOpen, ignoreRef: picker} = useStateOpen(false);
+    const colorHex =
+        '#' +
+        Number(state.accent_color || 0)
+            .toString(16)
+            .padStart(6, '0');
+    const { open: pickerOpen, setOpen: setPickerOpen, ignoreRef: picker } = useStateOpen(false);
 
-    return <div className={Styles.embed + ' ' + (state.spoiler ? Styles.spoiler : "")}>
-        {hasColor && <div className={Styles.bar} style={{backgroundColor: colorHex}} />}
+    return (
+        <div className={Styles.embed + ' ' + (state.spoiler ? Styles.spoiler : '')}>
+            {hasColor && <div className={Styles.bar} style={{ backgroundColor: colorHex }} />}
 
-        <CapsuleInner
-            state={state?.components || []}
-            stateKey={[...stateKey, "components"]}
-            stateManager={stateManager}
-            showSectionButton={true}
-            removeKeyParent={stateKey}
-            buttonContext={'container'}
-            // buttonClassName={CapsuleStyles.inline}
-            passProps={passProps}
-        />
-        <div className={CapsuleStyles.large_button + " " + CapsuleStyles.small} onClick={() => setPickerOpen(true)}>
-            { pickerOpen && <div className={CapsuleStyles.large_button_ctx} ref={picker}>
-                <ChromePicker
-                    color={colorHex}
-                    onChange={(ev: any) => {
-                        stateManager.setKey({
-                            key: [...stateKey, "accent_color"],
-                            value: parseInt(ev.hex.replace("#", ""), 16) || null
-                        })
-                    }}
-                    disableAlpha={true}
-                />
-            </div>}
-            <img  className={CapsuleStyles.large_button_icon} src={hasColor ? ColorActiveIcon : ColorIcon} alt=""/>
-        </div>
+            <CapsuleInner
+                state={state?.components || []}
+                stateKey={[...stateKey, 'components']}
+                stateManager={stateManager}
+                showSectionButton={true}
+                removeKeyParent={stateKey}
+                buttonContext={'container'}
+                // buttonClassName={CapsuleStyles.inline}
+                passProps={passProps}
+            />
+            <div className={CapsuleStyles.large_button + ' ' + CapsuleStyles.small} onClick={() => setPickerOpen(true)}>
+                {pickerOpen && (
+                    <div className={CapsuleStyles.large_button_ctx} ref={picker}>
+                        <ChromePicker
+                            color={colorHex}
+                            onChange={(ev: any) => {
+                                stateManager.setKey({
+                                    key: [...stateKey, 'accent_color'],
+                                    value: parseInt(ev.hex.replace('#', ''), 16) || null,
+                                });
+                            }}
+                            disableAlpha={true}
+                        />
+                    </div>
+                )}
+                <img className={CapsuleStyles.large_button_icon} src={hasColor ? ColorActiveIcon : ColorIcon} alt="" />
+            </div>
 
-        <div className={CapsuleStyles.large_button + " " + CapsuleStyles.small} onClick={() => stateManager.setKey({
-            key: [...stateKey, "spoiler"],
-            value: !state.spoiler
-        })}>
-            <img className={CapsuleStyles.large_button_icon} src={state.spoiler ? SpoilerActiveIcon : SpoilerIcon} alt=""/>
+            <div
+                className={CapsuleStyles.large_button + ' ' + CapsuleStyles.small}
+                onClick={() =>
+                    stateManager.setKey({
+                        key: [...stateKey, 'spoiler'],
+                        value: !state.spoiler,
+                    })
+                }
+            >
+                <img
+                    className={CapsuleStyles.large_button_icon}
+                    src={state.spoiler ? SpoilerActiveIcon : SpoilerIcon}
+                    alt=""
+                />
+            </div>
         </div>
-
-    </div>
-}
\ No newline at end of file
+    );
+}
diff --git a/components-sdk/src/components/File.module.css b/components-sdk/src/components/File.module.css
index e25e6c9..435dcda 100644
--- a/components-sdk/src/components/File.module.css
+++ b/components-sdk/src/components/File.module.css
@@ -1,28 +1,28 @@
 .file {
-  background: #43464d;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  border-radius: 8px;
-  padding: 15px;
-  position: relative;
-  width: 100%;
-  max-width: 290px;
+    background: #43464d;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 8px;
+    padding: 15px;
+    position: relative;
+    width: 100%;
+    max-width: 290px;
 
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-  font-weight: 500;
-
-  .file_icon {
+    cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: center;
-  }
+    justify-content: flex-start;
+    gap: 10px;
+    font-weight: 500;
+
+    .file_icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 
-  .file_text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-wrap: nowrap;
-  }
-}
\ No newline at end of file
+    .file_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-wrap: nowrap;
+    }
+}
diff --git a/components-sdk/src/components/File.tsx b/components-sdk/src/components/File.tsx
index 1c48c60..78468b8 100644
--- a/components-sdk/src/components/File.tsx
+++ b/components-sdk/src/components/File.tsx
@@ -1,41 +1,39 @@
-import {ComponentsProps} from "../Capsule";
-import {FileComponent} from "../utils/componentTypes";
-import {useFilePicker} from "use-file-picker";
-import {SelectedFiles} from "use-file-picker/types";
-import Styles from "./File.module.css"
-import FileIcon from "../icons/FileIcon.svg"
+import { ComponentsProps } from '../Capsule';
+import { FileComponent } from '../utils/componentTypes';
+import { useFilePicker } from 'use-file-picker';
+import { SelectedFiles } from 'use-file-picker/types';
+import Styles from './File.module.css';
+import FileIcon from '../icons/FileIcon.svg';
 
 function sanitizeFilename(input: string) {
-  return input
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .replace(/[^\x00-\x7F]/g, '')
-      .replace(/[^A-Za-z0-9._-]+/g, '_')
-      .replace(/_+/g, '_')
-      .replace(/^_+|_+$/g, '');
+    return input
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^\x00-\x7F]/g, '')
+        .replace(/[^A-Za-z0-9._-]+/g, '_')
+        .replace(/_+/g, '_')
+        .replace(/^_+|_+$/g, '');
 }
 
-
-export function File({state, stateManager, stateKey, passProps} : ComponentsProps & {state: FileComponent}) {
-
+export function File({ state, stateManager, stateKey, passProps }: ComponentsProps & { state: FileComponent }) {
     const { openFilePicker: openFileSelector } = useFilePicker({
         multiple: false,
         accept: ['.png', '.jpg', '.jpeg'],
         readFilesContent: false,
-        onFilesSelected: ({ plainFiles } : SelectedFiles<undefined>) => {
+        onFilesSelected: ({ plainFiles }: SelectedFiles<undefined>) => {
             const link = passProps.setFile(sanitizeFilename(plainFiles[0].name) || 'file.bin', plainFiles[0]);
-            stateManager.setKey({key: [...stateKey, "file", "url"], value: link})
+            stateManager.setKey({ key: [...stateKey, 'file', 'url'], value: link });
         },
     });
 
-    const url = state.file.url.startsWith("attachment://") ? state.file.url.slice(13) : '';
+    const url = state.file.url.startsWith('attachment://') ? state.file.url.slice(13) : '';
 
-    return <div onClick={() => openFileSelector()} className={Styles.file}>
-        <div className={Styles.file_icon}>
-            <img src={FileIcon} width={32} height={32} alt=''/>
+    return (
+        <div onClick={() => openFileSelector()} className={Styles.file}>
+            <div className={Styles.file_icon}>
+                <img src={FileIcon} width={32} height={32} alt="" />
+            </div>
+            <div className={Styles.file_text}>{url || 'Click to upload file'}</div>
         </div>
-        <div className={Styles.file_text}>
-            {url || "Click to upload file"}
-        </div>
-    </div>
-}
\ No newline at end of file
+    );
+}
diff --git a/components-sdk/src/components/MediaGallery.module.css b/components-sdk/src/components/MediaGallery.module.css
index d5d99d8..3b8998f 100644
--- a/components-sdk/src/components/MediaGallery.module.css
+++ b/components-sdk/src/components/MediaGallery.module.css
@@ -1,76 +1,73 @@
 .gallery_item {
-  position: relative;
-  cursor: pointer;
-  aspect-ratio: 1;
-  & > img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    background: rgba(0,0,0, 0.1);
-    border-radius: 8px;
-    min-width: 90px;
-    min-height: 90px;
-  }
-}
-
-.gallery {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: 1rem;
-  grid-auto-flow: row dense;
-
-  &.alone {
-    display: block;
-    .gallery_item {
-      aspect-ratio: unset;
-      & > img {
-        width: unset;
-        height: unset;
-        max-width: 100%;
-        max-height: 300px;
+    position: relative;
+    cursor: pointer;
+    aspect-ratio: 1;
+    & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        background: rgba(0, 0, 0, 0.1);
         border-radius: 8px;
-      }
-    }
-  }
-  &.one {
-    .gallery_item:nth-child(1) {
-      grid-column-end: span 12;
-      aspect-ratio: 3/2;
+        min-width: 90px;
+        min-height: 90px;
     }
-  }
+}
 
+.gallery {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+    grid-auto-flow: row dense;
 
-  &.two {
-    .gallery_item:nth-child(1) {
-      grid-column-end: span 6;
+    &.alone {
+        display: block;
+        .gallery_item {
+            aspect-ratio: unset;
+            & > img {
+                width: unset;
+                height: unset;
+                max-width: 100%;
+                max-height: 300px;
+                border-radius: 8px;
+            }
+        }
     }
-    .gallery_item:nth-child(2) {
-      grid-column-end: span 6;
+    &.one {
+        .gallery_item:nth-child(1) {
+            grid-column-end: span 12;
+            aspect-ratio: 3/2;
+        }
     }
-  }
-  &.three {
-    .gallery_item:nth-child(1) {
-      grid-column: 1 / span 8;
-      grid-row: 1 / span 2;
-    }
-    .gallery_item:nth-child(2) {
-      grid-column: 9 / span 4;
 
+    &.two {
+        .gallery_item:nth-child(1) {
+            grid-column-end: span 6;
+        }
+        .gallery_item:nth-child(2) {
+            grid-column-end: span 6;
+        }
     }
-    .gallery_item:nth-child(3) {
-      grid-column: 9 / span 4;
-
+    &.three {
+        .gallery_item:nth-child(1) {
+            grid-column: 1 / span 8;
+            grid-row: 1 / span 2;
+        }
+        .gallery_item:nth-child(2) {
+            grid-column: 9 / span 4;
+        }
+        .gallery_item:nth-child(3) {
+            grid-column: 9 / span 4;
+        }
     }
-  }
-  &.four {
-    .gallery_item {
-      aspect-ratio: 3/2;
-      grid-column-end: span 6;
+    &.four {
+        .gallery_item {
+            aspect-ratio: 3/2;
+            grid-column-end: span 6;
+        }
     }
-  }
 }
 
 .gallery .gallery_item {
-  grid-column-end: span 4;
-}
\ No newline at end of file
+    grid-column-end: span 4;
+}
diff --git a/components-sdk/src/components/MediaGallery.tsx b/components-sdk/src/components/MediaGallery.tsx
index d40b54d..0fb1f71 100644
--- a/components-sdk/src/components/MediaGallery.tsx
+++ b/components-sdk/src/components/MediaGallery.tsx
@@ -1,34 +1,43 @@
-import Styles from "./MediaGallery.module.css";
-import {Thumbnail} from "./Thumbnail";
-import {ComponentsProps} from "../Capsule";
-import {MediaGalleryComponent} from "../utils/componentTypes";
+import Styles from './MediaGallery.module.css';
+import { Thumbnail } from './Thumbnail';
+import { ComponentsProps } from '../Capsule';
+import { MediaGalleryComponent } from '../utils/componentTypes';
 
 function getClass(len: number) {
     if (len === 1) return Styles.alone;
     if (len === 3) return Styles.three;
     if (len === 4) return Styles.four;
 
-     if (len % 3 === 0) return '';
-     if (len % 3 === 1) return Styles.one;
-     if (len % 3 === 2) return Styles.two;
+    if (len % 3 === 0) return '';
+    if (len % 3 === 1) return Styles.one;
+    if (len % 3 === 2) return Styles.two;
 }
 
 // TODO make key more specific
 //   it can't be state.media.url, as this key is used in Input
 //   it can't be index as image flickers on higher sibling removal
 
-export function MediaGallery({state, stateKey, stateManager, passProps} : ComponentsProps & {state: MediaGalleryComponent}) {
-    return  <div className={Styles.gallery + ' ' + getClass((state?.items || []).length) }>
-        {(state?.items || []).map((component, index) => {
-            return <Thumbnail
-                key={`${index}`}
-                className={Styles.gallery_item}
-                removeKeyParent={stateKey}
-                state={component}
-                stateKey={[...stateKey, 'items', index]}
-                stateManager={stateManager}
-                passProps={passProps}
-            />
-        })}
-    </div>
+export function MediaGallery({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+}: ComponentsProps & { state: MediaGalleryComponent }) {
+    return (
+        <div className={Styles.gallery + ' ' + getClass((state?.items || []).length)}>
+            {(state?.items || []).map((component, index) => {
+                return (
+                    <Thumbnail
+                        key={`${index}`}
+                        className={Styles.gallery_item}
+                        removeKeyParent={stateKey}
+                        state={component}
+                        stateKey={[...stateKey, 'items', index]}
+                        stateManager={stateManager}
+                        passProps={passProps}
+                    />
+                );
+            })}
+        </div>
+    );
 }
diff --git a/components-sdk/src/components/Section.module.css b/components-sdk/src/components/Section.module.css
index 381b418..653d6af 100644
--- a/components-sdk/src/components/Section.module.css
+++ b/components-sdk/src/components/Section.module.css
@@ -1,7 +1,5 @@
 .section {
-  display: grid;
-  grid-template-columns: 1fr min-content;
-  gap: 1rem;
-
+    display: grid;
+    grid-template-columns: 1fr min-content;
+    gap: 1rem;
 }
-
diff --git a/components-sdk/src/components/Section.tsx b/components-sdk/src/components/Section.tsx
index e6cd07a..bd75249 100644
--- a/components-sdk/src/components/Section.tsx
+++ b/components-sdk/src/components/Section.tsx
@@ -1,64 +1,69 @@
-import CapsuleStyles from "../Capsule.module.css";
-import {COMPONENTS, ComponentsProps} from "../Capsule";
-import Styles from "./Section.module.css";
-import {CapsuleButton} from "../CapsuleButton";
-import {CapsuleInner} from "../CapsuleInner";
-import {SectionComponent} from "../utils/componentTypes";
-import {ReactNode} from "react";
+import CapsuleStyles from '../Capsule.module.css';
+import { COMPONENTS, ComponentsProps } from '../Capsule';
+import Styles from './Section.module.css';
+import { CapsuleButton } from '../CapsuleButton';
+import { CapsuleInner } from '../CapsuleInner';
+import { SectionComponent } from '../utils/componentTypes';
+import { ReactNode } from 'react';
 
-export function Section({state, stateKey, stateManager, passProps} : ComponentsProps & {state: SectionComponent}) {
+export function Section({ state, stateKey, stateManager, passProps }: ComponentsProps & { state: SectionComponent }) {
     const Accessory = COMPONENTS[state.accessory.type];
-    if (typeof Accessory === "undefined") return null;
+    if (typeof Accessory === 'undefined') return null;
 
-    return <div className={Styles.section}>
-        <div className={Styles.left}>
-            <CapsuleInner
-                state={state?.components || []}
-                stateKey={[...stateKey, "components"]}
-                stateManager={stateManager}
-                showSectionButton={false}
-                removeKeyParent={stateKey}
-                buttonContext={'inline'}
-                buttonClassName={CapsuleStyles.inline}
-                passProps={passProps}
-            />
+    return (
+        <div className={Styles.section}>
+            <div className={Styles.left}>
+                <CapsuleInner
+                    state={state?.components || []}
+                    stateKey={[...stateKey, 'components']}
+                    stateManager={stateManager}
+                    showSectionButton={false}
+                    removeKeyParent={stateKey}
+                    buttonContext={'inline'}
+                    buttonClassName={CapsuleStyles.inline}
+                    passProps={passProps}
+                />
+            </div>
+            <div className={Styles.right}>
+                <Accessory
+                    state={state.accessory}
+                    stateKey={[...stateKey, 'accessory']}
+                    stateManager={stateManager}
+                    passProps={passProps}
+                />
+            </div>
         </div>
-        <div className={Styles.right}>
-            <Accessory
-                state={state.accessory}
-                stateKey={[...stateKey, "accessory"]}
-                stateManager={stateManager}
-                passProps={passProps}
-            />
-        </div>
-
-    </div>
+    );
 }
-export function SectionFrame({children, stateKey, stateManager} : {
-    children: ReactNode,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
+export function SectionFrame({
+    children,
+    stateKey,
+    stateManager,
+}: {
+    children: ReactNode;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
 }) {
-    return <div className={Styles.section}>
-        <div className={Styles.left}>
-            {children}
-        </div>
-        <div className={Styles.right}>
-
-            <CapsuleButton
-                context={'frame'}
-                className={CapsuleStyles.pseudo}
-                callback={accessory => stateManager.wrapKey({
-                    key: stateKey,
-                    toArray: true,
-                    innerKey: 'components',
-                    value: {
-                        type: 9,
-                        accessory
+    return (
+        <div className={Styles.section}>
+            <div className={Styles.left}>{children}</div>
+            <div className={Styles.right}>
+                <CapsuleButton
+                    context={'frame'}
+                    className={CapsuleStyles.pseudo}
+                    callback={(accessory) =>
+                        stateManager.wrapKey({
+                            key: stateKey,
+                            toArray: true,
+                            innerKey: 'components',
+                            value: {
+                                type: 9,
+                                accessory,
+                            },
+                        })
                     }
-                })}
-            />
-
+                />
+            </div>
         </div>
-    </div>
-}
\ No newline at end of file
+    );
+}
diff --git a/components-sdk/src/components/Separator.module.css b/components-sdk/src/components/Separator.module.css
index eae9bf7..3683240 100644
--- a/components-sdk/src/components/Separator.module.css
+++ b/components-sdk/src/components/Separator.module.css
@@ -2,40 +2,38 @@
 }
 
 .separator {
-  height: 20px;
-  width: 50%;
-  margin: 0 auto;
-  background: rgba(0,0,0, 0.1);
-  cursor: pointer;
-  &:hover {
-    background: rgba(0,0,0, 0.2);
-  }
-  text-align: center;
-  font-size: 11px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
+    height: 20px;
+    width: 50%;
+    margin: 0 auto;
+    background: rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    &:hover {
+        background: rgba(0, 0, 0, 0.2);
+    }
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
 }
 
 .separator_hide {
-
 }
 
 .separator_line {
-  margin: 10px 0;
-
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  align-items: center;
+    margin: 10px 0;
 
-  .line {
-    height: 2px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    background: rgb(28, 32, 40);
-    width: 100%;
-    grid-column: 2;
-  }
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    align-items: center;
 
-}
\ No newline at end of file
+    .line {
+        height: 2px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        background: rgb(28, 32, 40);
+        width: 100%;
+        grid-column: 2;
+    }
+}
diff --git a/components-sdk/src/components/Separator.tsx b/components-sdk/src/components/Separator.tsx
index e4d3f25..e0d8175 100644
--- a/components-sdk/src/components/Separator.tsx
+++ b/components-sdk/src/components/Separator.tsx
@@ -1,23 +1,38 @@
 import Styles from './Separator.module.css';
-import {ComponentsProps, SPACING_LARGE, SPACING_SMALL} from "../Capsule";
-import {SeparatorComponent} from "../utils/componentTypes";
+import { ComponentsProps, SPACING_LARGE, SPACING_SMALL } from '../Capsule';
+import { SeparatorComponent } from '../utils/componentTypes';
 
-export function Separator({state, stateKey, stateManager} : ComponentsProps & {state: SeparatorComponent}) {
-    return <div className={Styles.separator_container}>
-        <div style={state.spacing === SPACING_LARGE ? {height: 50} : {height: 20}} ></div>
-        <div className={Styles.separator_line}>
-            <div><input type="checkbox" checked={state.divider} onChange={(ev) => stateManager.setKey({
-                key: [...stateKey, "divider"],
-                value: ev.target.checked
-            })} /></div>
-            <div className={Styles.line} style={!state.divider? {background: 'unset'} : {}}></div>
+export function Separator({ state, stateKey, stateManager }: ComponentsProps & { state: SeparatorComponent }) {
+    return (
+        <div className={Styles.separator_container}>
+            <div style={state.spacing === SPACING_LARGE ? { height: 50 } : { height: 20 }}></div>
+            <div className={Styles.separator_line}>
+                <div>
+                    <input
+                        type="checkbox"
+                        checked={state.divider}
+                        onChange={(ev) =>
+                            stateManager.setKey({
+                                key: [...stateKey, 'divider'],
+                                value: ev.target.checked,
+                            })
+                        }
+                    />
+                </div>
+                <div className={Styles.line} style={!state.divider ? { background: 'unset' } : {}}></div>
+            </div>
+            <div
+                className={Styles.separator}
+                style={state.spacing === SPACING_LARGE ? { height: 50 } : {}}
+                onClick={() =>
+                    stateManager.setKey({
+                        key: [...stateKey, 'spacing'],
+                        value: state.spacing === SPACING_LARGE ? SPACING_SMALL : SPACING_LARGE,
+                    })
+                }
+            >
+                Click to change margin
+            </div>
         </div>
-        <div className={Styles.separator} style={state.spacing === SPACING_LARGE ? {height: 50} : {}}
-             onClick={() => stateManager.setKey({
-                key: [...stateKey, "spacing"],
-                value: state.spacing === SPACING_LARGE ? SPACING_SMALL : SPACING_LARGE
-            })}>
-            Click to change margin
-        </div>
-    </div>
-}
\ No newline at end of file
+    );
+}
diff --git a/components-sdk/src/components/StringSelect.module.css b/components-sdk/src/components/StringSelect.module.css
index cc4947c..2e3223e 100644
--- a/components-sdk/src/components/StringSelect.module.css
+++ b/components-sdk/src/components/StringSelect.module.css
@@ -1,112 +1,114 @@
 .select {
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 5px;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  user-select: none;
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 5px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    user-select: none;
 }
 
 .icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  img {
-    width: 2.2rem;
-    height: 2.2rem;
-  }
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+        width: 2.2rem;
+        height: 2.2rem;
+    }
 }
 
 .select_option {
-  background: #36393f;
-
-  border-radius: 4px;
+    background: #36393f;
 
-  padding: 0.8rem 1rem;
-  cursor: pointer;
-  color: #fff;
+    border-radius: 4px;
 
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
+    padding: 0.8rem 1rem;
+    cursor: pointer;
+    color: #fff;
 
-  position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
 
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+    position: relative;
 
-  .text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    .desc {
-      color: #8e8e99;
-    }
-  }
-
-  .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;
-  }
-
-  &:hover, &.open {
-    background: rgba(255, 255, 255, 0.05);
-  }
-
-  &.blue {
-    background: #34396f;
-    border: 1px solid rgba(82, 93, 226, 0.7);
-  }
-
-  &.disabled {
-    background: #2b2d32;
-    color: #828387;
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    .desc {
-      color: #47474e;
+
+    .text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        .desc {
+            color: #8e8e99;
+        }
     }
-  }
 
-  &.select_default {
-    color: #ccc;
-    background: unset;
+    .with_badge {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        min-width: 0;
+        gap: 1rem;
+    }
 
-    &:hover, &.open {
-      background: rgba(0, 0, 0, 0.2);
+    .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;
+    }
+
+    &:hover,
+    &.open {
+        background: rgba(255, 255, 255, 0.05);
     }
-  }
-
-  &.select_new {
-    color: #ccc;
-    border: unset;
-    background: unset;
-    box-shadow: unset;
-    display: inline-flex;
-    align-items: center;
-    gap: 1rem;
 
-    &:hover {
-      background: rgba(0, 0, 0, 0.2);
+    &.blue {
+        background: #34396f;
+        border: 1px solid rgba(82, 93, 226, 0.7);
+    }
+
+    &.disabled {
+        background: #2b2d32;
+        color: #828387;
+        border: 1px solid rgba(255, 255, 255, 0.07);
+        .desc {
+            color: #47474e;
+        }
+    }
+
+    &.select_default {
+        color: #ccc;
+        background: unset;
+
+        &:hover,
+        &.open {
+            background: rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    &.select_new {
+        color: #ccc;
+        border: unset;
+        background: unset;
+        box-shadow: unset;
+        display: inline-flex;
+        align-items: center;
+        gap: 1rem;
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.2);
+        }
     }
-  }
 }
 
 .menu_range {
-  width: 200px;
-  padding: 0 20px;
-}
\ No newline at end of file
+    width: 200px;
+    padding: 0 20px;
+}
diff --git a/components-sdk/src/components/StringSelect.tsx b/components-sdk/src/components/StringSelect.tsx
index a4caeb4..f0059e7 100644
--- a/components-sdk/src/components/StringSelect.tsx
+++ b/components-sdk/src/components/StringSelect.tsx
@@ -1,247 +1,458 @@
-import Styles from "./StringSelect.module.css"
-import CapsuleStyles from "../Capsule.module.css"
-import Icons from "../icons/Icons.svg"
-import EditIcon from "../icons/Edit.svg"
-import {Dispatch, SetStateAction, useCallback, useEffect, useRef, useState} from "react";
-import {ComponentsProps, default_settings} from "../Capsule";
-import {MenuEmoji, MenuLabel} from "./Button";
-import {StringSelectComponent, StringSelectComponentOption} from "../utils/componentTypes";
-import {stateKeyType} from "../polyfills/StateManager";
-import Slider from "rc-slider";
-import TrashIcon from "../icons/Trash.svg";
+import Styles from './StringSelect.module.css';
+import CapsuleStyles from '../Capsule.module.css';
+import Icons from '../icons/Icons.svg';
+import EditIcon from '../icons/Edit.svg';
+import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+import { ComponentsProps, default_settings } from '../Capsule';
+import { MenuEmoji, MenuLabel } from './Button';
+import { StringSelectComponent, StringSelectComponentOption } from '../utils/componentTypes';
+import { stateKeyType } from '../polyfills/StateManager';
+import Slider from 'rc-slider';
+import TrashIcon from '../icons/Trash.svg';
 import { useStateOpen } from '../utils/useStateOpen';
 
-export function StringSelect({state, stateKey, stateManager, passProps} : ComponentsProps & {state: StringSelectComponent}) {
+export function StringSelect({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+}: ComponentsProps & { state: StringSelectComponent }) {
     useEffect(() => {
         if (state.min_values > state.max_values) {
-            stateManager.setKey({key: [...stateKey, "max_values"], value: state.min_values})
+            stateManager.setKey({ key: [...stateKey, 'max_values'], value: state.min_values });
         }
     }, [state.min_values]);
 
     useEffect(() => {
         if (state.max_values < state.min_values) {
-            stateManager.setKey({key: [...stateKey, "min_values"], value: state.max_values})
+            stateManager.setKey({ key: [...stateKey, 'min_values'], value: state.max_values });
         }
     }, [state.max_values]);
 
-    return <div>
-        <div className={Styles.select}>
-            <GlobalSettings state={state} stateKey={stateKey} stateManager={stateManager} />
-
-            {state.disabled && <div className={Styles.disabled}>
-                ⚠️ This component will be greyed out and disabled for all users.
-            </div>}
-
-            {state.options.map((option, index) => <StringSelectOption
-                key={option.value}
-                state={option}
-                stateKey={[...stateKey, "options", index]}
-                stateManager={stateManager}
-                passProps={passProps}
-            />)}
-
-            <div>
-                <div className={Styles.select_option + ' ' + Styles.select_new} onClick={() => {
-                    stateManager.appendKey({key: [...stateKey, "options"], value: default_settings.StringSelect().components[0].options[0]});
-                }}>
-                    <div className={Styles.icon}>
-                        <img src={Icons} alt=""/>
+    return (
+        <div>
+            <div className={Styles.select}>
+                <GlobalSettings state={state} stateKey={stateKey} stateManager={stateManager} />
+
+                {state.disabled && (
+                    <div className={Styles.disabled}>
+                        ⚠️ This component will be greyed out and disabled for all users.
+                    </div>
+                )}
+
+                {state.options.map((option, index) => (
+                    <StringSelectOption
+                        key={option.value}
+                        state={option}
+                        stateKey={[...stateKey, 'options', index]}
+                        stateManager={stateManager}
+                        passProps={passProps}
+                    />
+                ))}
+
+                <div>
+                    <div
+                        className={Styles.select_option + ' ' + Styles.select_new}
+                        onClick={() => {
+                            stateManager.appendKey({
+                                key: [...stateKey, 'options'],
+                                value: default_settings.StringSelect().components[0].options[0],
+                            });
+                        }}
+                    >
+                        <div className={Styles.icon}>
+                            <img src={Icons} alt="" />
+                        </div>
+                        <div className={Styles.text}>New option</div>
                     </div>
-                    <div className={Styles.text}>New option</div>
                 </div>
             </div>
         </div>
-    </div>
+    );
 }
 
-function GlobalSettings({state, stateKey, stateManager} : {
-    state: StringSelectComponent,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
+function GlobalSettings({
+    state,
+    stateKey,
+    stateManager,
+}: {
+    state: StringSelectComponent;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
 }) {
-    const {open, setOpen, ignoreRef, closeLockRef} = useStateOpen(0);
+    const { open, setOpen, ignoreRef, closeLockRef } = useStateOpen(0);
     const btn_select = useRef<HTMLDivElement>(null);
 
-    return <div className={Styles.select_option + ' ' + Styles.select_default + (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.icon}><img src={EditIcon} alt="(Edit)"/></div>
-        <div className={Styles.with_badge}>
-            <div className={Styles.text}>{state.placeholder || "Global settings"}</div>
-            <div className={Styles.badge}>{state.min_values === state.max_values ? state.min_values : `${state.min_values} – ${state.max_values}` }</div>
+    return (
+        <div
+            className={Styles.select_option + ' ' + Styles.select_default + (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.icon}>
+                <img src={EditIcon} alt="(Edit)" />
+            </div>
+            <div className={Styles.with_badge}>
+                <div className={Styles.text}>{state.placeholder || 'Global settings'}</div>
+                <div className={Styles.badge}>
+                    {state.min_values === state.max_values
+                        ? state.min_values
+                        : `${state.min_values} – ${state.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={state.min_values}
+                            stateKey={[...stateKey, 'min_values']}
+                            stateManager={stateManager}
+                        />
+                    )}
+                    {open === 4 && (
+                        <MenuRange
+                            min={1}
+                            max={state.options.length}
+                            state={state.max_values}
+                            stateKey={[...stateKey, 'max_values']}
+                            stateManager={stateManager}
+                        />
+                    )}
+                </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={state.min_values} stateKey={[...stateKey, 'min_values']} stateManager={stateManager}/>}
-            {open === 4 && <MenuRange min={1} max={state.options.length} state={state.max_values} stateKey={[...stateKey, 'max_values']} stateManager={stateManager}/>}
-        </div>}
-
-    </div>
+    );
 }
 
-export function MenuRange({min, max, state, stateKey, stateManager} : {
-    min: number,
-    max: number,
-    state: number,
-    stateKey: stateKeyType,
-    stateManager: ComponentsProps['stateManager']
+export function MenuRange({
+    min,
+    max,
+    state,
+    stateKey,
+    stateManager,
+}: {
+    min: number;
+    max: number;
+    state: number;
+    stateKey: stateKeyType;
+    stateManager: ComponentsProps['stateManager'];
 }) {
-    return <div className={Styles.menu_range}>
-        <Slider min={min} max={max} step={1} marks={Array.from({length: max+1}, (_, i) => i)}
+    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})}
-        />
-    </div>
+                onChange={(no: any) => stateManager.setKey({ key: stateKey, value: no })}
+            />
+        </div>
+    );
 }
 
-function GlobalSettingsFirst({state, stateKey, stateManager, setOpen} : {
-    state: StringSelectComponent,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
-    setOpen: Dispatch<SetStateAction<number>>,
+function GlobalSettingsFirst({
+    state,
+    stateKey,
+    stateManager,
+    setOpen,
+}: {
+    state: StringSelectComponent;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
+    setOpen: Dispatch<SetStateAction<number>>;
 }) {
-
-    return <>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-            stateManager.setKey({key: [...stateKey, "disabled"], value: !state.disabled})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
+    return (
+        <>
             <div
-                className={CapsuleStyles.large_button_ctx_item_text}>{state.disabled ? "Mark everything as enabled" : "Mark everything as disabled"}</div>
-        </div>
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={() => {
+                    stateManager.setKey({ key: [...stateKey, 'disabled'], value: !state.disabled });
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>
+                    {state.disabled ? 'Mark everything as enabled' : 'Mark everything as disabled'}
+                </div>
+            </div>
 
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(2);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Change placeholder</div>
-        </div>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(2);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Change placeholder</div>
+            </div>
 
-        {!!state.placeholder && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            stateManager.setKey({key: [...stateKey, "placeholder"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Clear placeholder</div>
-        </div>}
-
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(3);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Set number of minimum options to be selected</div>
-        </div>
+            {!!state.placeholder && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    onClick={(ev) => {
+                        stateManager.setKey({ key: [...stateKey, 'placeholder'], value: null });
+                    }}
+                >
+                    <div className={CapsuleStyles.large_button_ctx_item_img}>
+                        <img src={Icons} alt="" />
+                    </div>
+                    <div className={CapsuleStyles.large_button_ctx_item_text}>Clear placeholder</div>
+                </div>
+            )}
 
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(4);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Set number of maxiumum options to be selected</div>
-        </div>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(3);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>
+                    Set number of minimum options to be selected
+                </div>
+            </div>
 
-    </>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(4);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>
+                    Set number of maxiumum options to be selected
+                </div>
+            </div>
+        </>
+    );
 }
 
-function StringSelectOption({state, stateKey, stateManager, passProps} : {
-    state: StringSelectComponentOption,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
-    passProps: ComponentsProps['passProps']
+function StringSelectOption({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+}: {
+    state: StringSelectComponentOption;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
+    passProps: ComponentsProps['passProps'];
 }) {
-    const {open, setOpen, ignoreRef, closeLockRef} = useStateOpen(0);
+    const { open, setOpen, ignoreRef, closeLockRef } = useStateOpen(0);
     const btn_select = useRef<HTMLDivElement>(null);
     const Comp = passProps.EmojiShow;
 
     return (
-        <div className={Styles.select_option + (open ? " " + Styles.open : "") + (state.default ? " " + Styles.blue : "") + (state.disabled ? " " + Styles.disabled : "")} onClick={(ev) => {
-            if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
-            setOpen(1)
-        }} ref={useRef}>
-            {state.emoji !== null && <div className={CapsuleStyles.emoji}>
-                <Comp passProps={passProps} emoji={state.emoji} />
-            </div>}
+        <div
+            className={
+                Styles.select_option +
+                (open ? ' ' + Styles.open : '') +
+                (state.default ? ' ' + Styles.blue : '') +
+                (state.disabled ? ' ' + Styles.disabled : '')
+            }
+            onClick={(ev) => {
+                if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
+                setOpen(1);
+            }}
+            ref={useRef}
+        >
+            {state.emoji !== null && (
+                <div className={CapsuleStyles.emoji}>
+                    <Comp passProps={passProps} emoji={state.emoji} />
+                </div>
+            )}
             <div className={Styles.text}>
                 {state.label} {!!state.description && <span className={Styles.desc}>&bull; {state.description}</span>}
             </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 && <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}/>}
-            </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 && (
+                        <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}
+                        />
+                    )}
+                </div>
+            )}
         </div>
-    )
+    );
 }
 
-function MenuFirst({state, stateKey, stateManager, setOpen} : {
-    state: StringSelectComponentOption,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
-    setOpen: Dispatch<SetStateAction<number>>,
+function MenuFirst({
+    state,
+    stateKey,
+    stateManager,
+    setOpen,
+}: {
+    state: StringSelectComponentOption;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
+    setOpen: Dispatch<SetStateAction<number>>;
 }) {
-
-    return <>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-            if (state.disabled) {
-                stateManager.setKey({key: [...stateKey, "disabled"], value: false})
-            }else{
-                stateManager.setKey({key: [...stateKey, "disabled"], value: true})
-                stateManager.setKey({key: [...stateKey, "default"], value: false})
-            }
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
+    return (
+        <>
             <div
-                className={CapsuleStyles.large_button_ctx_item_text}>{state.disabled ? "Mark as enabled" : "Mark as disabled"}</div>
-        </div>
-        {!state.disabled && <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-            stateManager.setKey({key: [...stateKey, "default"], value: !state.default})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={() => {
+                    if (state.disabled) {
+                        stateManager.setKey({ key: [...stateKey, 'disabled'], value: false });
+                    } else {
+                        stateManager.setKey({ key: [...stateKey, 'disabled'], value: true });
+                        stateManager.setKey({ key: [...stateKey, 'default'], value: false });
+                    }
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>
+                    {state.disabled ? 'Mark as enabled' : 'Mark as disabled'}
+                </div>
+            </div>
+            {!state.disabled && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    onClick={() => {
+                        stateManager.setKey({ key: [...stateKey, 'default'], value: !state.default });
+                    }}
+                >
+                    <div className={CapsuleStyles.large_button_ctx_item_img}>
+                        <img src={Icons} alt="" />
+                    </div>
+                    <div className={CapsuleStyles.large_button_ctx_item_text}>
+                        {state.default ? 'Unselect this by default' : 'Select this by default'}
+                    </div>
+                </div>
+            )}
             <div
-                className={CapsuleStyles.large_button_ctx_item_text}>{state.default ? "Unselect this by default" : "Select this by default"}</div>
-        </div>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(2);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Set emoji</div>
-        </div>
-        {state.emoji !== null && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            stateManager.setKey({key: [...stateKey, "emoji"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Clear emoji</div>
-        </div>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(3);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Change label</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            setOpen(4);
-            ev.stopPropagation();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Change description</div>
-        </div>
-        {state.description !== null && <div className={CapsuleStyles.large_button_ctx_item} onClick={(ev) => {
-            stateManager.setKey({key: [...stateKey, "description"], value: null})
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={Icons} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Clear description</div>
-        </div>}
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={() => {
-            stateManager.deleteKey({key: stateKey});
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={TrashIcon} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Delete</div>
-        </div>
-    </>
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(2);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Set emoji</div>
+            </div>
+            {state.emoji !== null && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    onClick={(ev) => {
+                        stateManager.setKey({ key: [...stateKey, 'emoji'], value: null });
+                    }}
+                >
+                    <div className={CapsuleStyles.large_button_ctx_item_img}>
+                        <img src={Icons} alt="" />
+                    </div>
+                    <div className={CapsuleStyles.large_button_ctx_item_text}>Clear emoji</div>
+                </div>
+            )}
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(3);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Change label</div>
+            </div>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    setOpen(4);
+                    ev.stopPropagation();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={Icons} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Change description</div>
+            </div>
+            {state.description !== null && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    onClick={(ev) => {
+                        stateManager.setKey({ key: [...stateKey, 'description'], value: null });
+                    }}
+                >
+                    <div className={CapsuleStyles.large_button_ctx_item_img}>
+                        <img src={Icons} alt="" />
+                    </div>
+                    <div className={CapsuleStyles.large_button_ctx_item_text}>Clear description</div>
+                </div>
+            )}
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={() => {
+                    stateManager.deleteKey({ key: stateKey });
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={TrashIcon} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Delete</div>
+            </div>
+        </>
+    );
 }
diff --git a/components-sdk/src/components/TextDisplay.module.css b/components-sdk/src/components/TextDisplay.module.css
index 87a4263..afb4c1e 100644
--- a/components-sdk/src/components/TextDisplay.module.css
+++ b/components-sdk/src/components/TextDisplay.module.css
@@ -1,4 +1,4 @@
 .text_display {
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.27);
-  border-radius: 3px;
-}
\ No newline at end of file
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.27);
+    border-radius: 3px;
+}
diff --git a/components-sdk/src/components/TextDisplay.tsx b/components-sdk/src/components/TextDisplay.tsx
index 7387593..12b67a0 100644
--- a/components-sdk/src/components/TextDisplay.tsx
+++ b/components-sdk/src/components/TextDisplay.tsx
@@ -1,20 +1,23 @@
-import {ComponentsProps} from "../Capsule";
-import {TextDisplayComponent} from "../utils/componentTypes";
-import Styles from "./TextDisplay.module.css";
+import { ComponentsProps } from '../Capsule';
+import { TextDisplayComponent } from '../utils/componentTypes';
+import Styles from './TextDisplay.module.css';
 
-
-export function TextDisplay(
-    {state, stateKey, stateManager, passProps} : ComponentsProps & {state: TextDisplayComponent}
-) {
+export function TextDisplay({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+}: ComponentsProps & { state: TextDisplayComponent }) {
     const Comp = passProps.BetterInput;
-    return <div className={Styles.text_display}>
-        <Comp
-            onChange={(ev) => {
-                stateManager.setKey({key: [...stateKey, 'content'], value: ev.target.value})
-            }}
-            value={state?.content || ""}
-            passProps={passProps}
-        />
-    </div>
-
-}
\ No newline at end of file
+    return (
+        <div className={Styles.text_display}>
+            <Comp
+                onChange={(ev) => {
+                    stateManager.setKey({ key: [...stateKey, 'content'], value: ev.target.value });
+                }}
+                value={state?.content || ''}
+                passProps={passProps}
+            />
+        </div>
+    );
+}
diff --git a/components-sdk/src/components/Thumbnail.module.css b/components-sdk/src/components/Thumbnail.module.css
index 1bf8730..953ae41 100644
--- a/components-sdk/src/components/Thumbnail.module.css
+++ b/components-sdk/src/components/Thumbnail.module.css
@@ -1,37 +1,36 @@
 .thumbnail {
-  width: 90px;
-  height: 90px;
-  background: #2f3136;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  padding: 2px;
-  position: relative;
-  & > img {
-    width: 100%;
-    height: 100%;
-    min-width: 90px;
-    min-height: 90px;
-    border-radius: 6px;
-    object-fit: contain;
-  }
+    width: 90px;
+    height: 90px;
+    background: #2f3136;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding: 2px;
+    position: relative;
+    & > img {
+        width: 100%;
+        height: 100%;
+        min-width: 90px;
+        min-height: 90px;
+        border-radius: 6px;
+        object-fit: contain;
+    }
 }
 
 .spoiler {
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    inset: 3px;
-    backdrop-filter: blur(3px);
-    border-radius: 8px;
-    background-image:
-        radial-gradient(at 0% 0%, hsla(231, 46%, 22%, 1) 0, transparent 100%),
-        radial-gradient(at 50% 50%, hsla(321, 40%, 25%, 1) 0, transparent 100%);
-    outline: 1px solid rgba(255, 255, 255, 0.2);
-  }
-}
\ No newline at end of file
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        inset: 3px;
+        backdrop-filter: blur(3px);
+        border-radius: 8px;
+        background-image: radial-gradient(at 0% 0%, hsla(231, 46%, 22%, 1) 0, transparent 100%),
+            radial-gradient(at 50% 50%, hsla(321, 40%, 25%, 1) 0, transparent 100%);
+        outline: 1px solid rgba(255, 255, 255, 0.2);
+    }
+}
diff --git a/components-sdk/src/components/Thumbnail.tsx b/components-sdk/src/components/Thumbnail.tsx
index c253453..b039e57 100644
--- a/components-sdk/src/components/Thumbnail.tsx
+++ b/components-sdk/src/components/Thumbnail.tsx
@@ -1,99 +1,183 @@
-import Styles from "./Thumbnail.module.css";
-import ThumbnailIcon from "../icons/Thumbnail.svg";
-import TrashIcon from "../icons/Trash.svg";
-import UploadImage from "../icons/UploadImage.svg";
-import Url from "../icons/Url.svg";
-import AddDescription from "../icons/AddDescription.svg";
-import {Dispatch, SetStateAction, useCallback, useEffect, useRef, useState} from "react";
-import CapsuleStyles from "../Capsule.module.css";
-import {MenuLabel} from "./Button";
-import Icons from "../icons/Icons.svg";
-import {ComponentsProps, default_settings} from "../Capsule";
-import {MediaGalleryItem, ThumbnailComponent} from "../utils/componentTypes";
-import {stateKeyType} from "../polyfills/StateManager";
-import {useFileUpload} from "../utils/useFileUpload";
-import SpoilerActiveIcon from "../icons/SpoilerActive.svg";
-import SpoilerIcon from "../icons/Spoiler.svg";
+import Styles from './Thumbnail.module.css';
+import ThumbnailIcon from '../icons/Thumbnail.svg';
+import TrashIcon from '../icons/Trash.svg';
+import UploadImage from '../icons/UploadImage.svg';
+import Url from '../icons/Url.svg';
+import AddDescription from '../icons/AddDescription.svg';
+import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+import CapsuleStyles from '../Capsule.module.css';
+import { MenuLabel } from './Button';
+import Icons from '../icons/Icons.svg';
+import { ComponentsProps, default_settings } from '../Capsule';
+import { MediaGalleryItem, ThumbnailComponent } from '../utils/componentTypes';
+import { stateKeyType } from '../polyfills/StateManager';
+import { useFileUpload } from '../utils/useFileUpload';
+import SpoilerActiveIcon from '../icons/SpoilerActive.svg';
+import SpoilerIcon from '../icons/Spoiler.svg';
 import { useStateOpen } from '../utils/useStateOpen';
 
-
-export function Thumbnail({state, stateKey, stateManager, passProps, removeKeyParent = undefined, className=undefined} : Omit<ComponentsProps, 'state'> & {state: MediaGalleryItem | ThumbnailComponent, className?: string}) {
-    const {open, setOpen, ignoreRef, closeLockRef} = useStateOpen(0);
+export function Thumbnail({
+    state,
+    stateKey,
+    stateManager,
+    passProps,
+    removeKeyParent = undefined,
+    className = undefined,
+}: Omit<ComponentsProps, 'state'> & { state: MediaGalleryItem | ThumbnailComponent; className?: string }) {
+    const { open, setOpen, ignoreRef, closeLockRef } = useStateOpen(0);
     const btn_select = useRef<HTMLDivElement>(null);
 
-    const {src, setSrc, openFileSelector} = useFileUpload(
+    const { src, setSrc, openFileSelector } = useFileUpload(
         state.media.url,
-        [...stateKey, "media", "url"],
-        passProps?.getFile, passProps?.setFile, stateManager
+        [...stateKey, 'media', 'url'],
+        passProps?.getFile,
+        passProps?.setFile,
+        stateManager
     );
 
-    return <div className={(className || Styles.thumbnail) + ' ' + (state.spoiler ? Styles.spoiler : '')}
-    onClick={(ev) => {
-        if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
-        setOpen(1)
-    }} ref={ignoreRef}>
-        <img src={src || ThumbnailIcon} alt=""/>
-        {!!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} openFileSelector={openFileSelector}/>}
-            {open === 2 && <MenuLabel closeLockRef={closeLockRef} state={state.media.url} stateKey={[...stateKey, "media", "url"]} stateManager={stateManager} setOpen={setOpen}/>}
-            {open === 3 && <MenuLabel closeLockRef={closeLockRef} state={state.description || ""} stateKey={[...stateKey, "description"]} stateManager={stateManager} nullable={true} setOpen={setOpen}/>}
-        </div>}
-
-    </div>
+    return (
+        <div
+            className={(className || Styles.thumbnail) + ' ' + (state.spoiler ? Styles.spoiler : '')}
+            onClick={(ev) => {
+                if (btn_select.current && btn_select.current.contains(ev.target as HTMLElement)) return;
+                setOpen(1);
+            }}
+            ref={ignoreRef}
+        >
+            <img src={src || ThumbnailIcon} alt="" />
+            {!!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}
+                            openFileSelector={openFileSelector}
+                        />
+                    )}
+                    {open === 2 && (
+                        <MenuLabel
+                            closeLockRef={closeLockRef}
+                            state={state.media.url}
+                            stateKey={[...stateKey, 'media', 'url']}
+                            stateManager={stateManager}
+                            setOpen={setOpen}
+                        />
+                    )}
+                    {open === 3 && (
+                        <MenuLabel
+                            closeLockRef={closeLockRef}
+                            state={state.description || ''}
+                            stateKey={[...stateKey, 'description']}
+                            stateManager={stateManager}
+                            nullable={true}
+                            setOpen={setOpen}
+                        />
+                    )}
+                </div>
+            )}
+        </div>
+    );
 }
 
-
-
-function MenuFirst({state, stateKey, stateManager, setOpen, openFileSelector, removeKeyParent} : {
-    state: MediaGalleryItem | ThumbnailComponent,
-    stateKey: ComponentsProps['stateKey'],
-    stateManager: ComponentsProps['stateManager'],
-    setOpen: Dispatch<SetStateAction<number>>,
-    openFileSelector: () => any,
-    removeKeyParent?: stateKeyType
+function MenuFirst({
+    state,
+    stateKey,
+    stateManager,
+    setOpen,
+    openFileSelector,
+    removeKeyParent,
+}: {
+    state: MediaGalleryItem | ThumbnailComponent;
+    stateKey: ComponentsProps['stateKey'];
+    stateManager: ComponentsProps['stateManager'];
+    setOpen: Dispatch<SetStateAction<number>>;
+    openFileSelector: () => any;
+    removeKeyParent?: stateKeyType;
 }) {
-    return <>
-        <div className={CapsuleStyles.large_button_ctx_item} 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}>Set image url</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} onClick={ev => {
-            openFileSelector();
-        }}>
-            <div className={CapsuleStyles.large_button_ctx_item_img}><img src={UploadImage} alt=""/></div>
-            <div className={CapsuleStyles.large_button_ctx_item_text}>Upload image</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} 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}>Add description</div>
-        </div>
-        <div className={CapsuleStyles.large_button_ctx_item} 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 ? "Remove spoiler" : "Set spoiler"}</div>
-        </div>
-        {!!removeKeyParent && <div className={CapsuleStyles.large_button_ctx_item} 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}>Delete</div>
-        </div>}
-        {!!removeKeyParent && <div className={CapsuleStyles.large_button_ctx_item + ' ' + CapsuleStyles.separator} 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}>Add new image</div>
-        </div>}
-    </>
-}
\ No newline at end of file
+    return (
+        <>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                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}>Set image url</div>
+            </div>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                onClick={(ev) => {
+                    openFileSelector();
+                }}
+            >
+                <div className={CapsuleStyles.large_button_ctx_item_img}>
+                    <img src={UploadImage} alt="" />
+                </div>
+                <div className={CapsuleStyles.large_button_ctx_item_text}>Upload image</div>
+            </div>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                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}>Add description</div>
+            </div>
+            <div
+                className={CapsuleStyles.large_button_ctx_item}
+                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 ? 'Remove spoiler' : 'Set spoiler'}
+                </div>
+            </div>
+            {!!removeKeyParent && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item}
+                    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}>Delete</div>
+                </div>
+            )}
+            {!!removeKeyParent && (
+                <div
+                    className={CapsuleStyles.large_button_ctx_item + ' ' + CapsuleStyles.separator}
+                    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}>Add new image</div>
+                </div>
+            )}
+        </>
+    );
+}
diff --git a/components-sdk/src/css.d.ts b/components-sdk/src/css.d.ts
index f57bdae..60260a3 100644
--- a/components-sdk/src/css.d.ts
+++ b/components-sdk/src/css.d.ts
@@ -1 +1 @@
-declare module "*.module.css";
\ No newline at end of file
+declare module '*.module.css';
diff --git a/components-sdk/src/index.ts b/components-sdk/src/index.ts
index 5bca568..a09e370 100644
--- a/components-sdk/src/index.ts
+++ b/components-sdk/src/index.ts
@@ -1,10 +1,10 @@
 export { Capsule } from './Capsule';
-export * from "./utils/componentTypes";
+export * from './utils/componentTypes';
 
 // Polyfills
 
-export type {BetterInput} from "./polyfills/BetterInput";
-export type {EmojiPicker} from "./polyfills/EmojiPicker";
-export type {EmojiShow} from "./polyfills/EmojiShow";
-export type {stateKeyType, StateManager} from "./polyfills/StateManager";
-export type {getFileType, setFileType} from "./polyfills/files";
+export type { BetterInput } from './polyfills/BetterInput';
+export type { EmojiPicker } from './polyfills/EmojiPicker';
+export type { EmojiShow } from './polyfills/EmojiShow';
+export type { stateKeyType, StateManager } from './polyfills/StateManager';
+export type { getFileType, setFileType } from './polyfills/files';
diff --git a/components-sdk/src/polyfills/BetterInput.ts b/components-sdk/src/polyfills/BetterInput.ts
index 732a02b..dfac80c 100644
--- a/components-sdk/src/polyfills/BetterInput.ts
+++ b/components-sdk/src/polyfills/BetterInput.ts
@@ -1,24 +1,21 @@
-import {FC} from "react";
-import {PassProps} from "../utils/componentTypes";
+import { FC } from 'react';
+import { PassProps } from '../utils/componentTypes';
 
 interface EventValue {
-    value: string
+    value: string;
 }
 
 interface EventValueTarget {
-    target: EventValue
+    target: EventValue;
 }
 
 export interface BetterInputProps {
-    passProps: PassProps,
-    onChange: (ev: EventValueTarget) => any,
-    value: string
+    passProps: PassProps;
+    onChange: (ev: EventValueTarget) => any;
+    value: string;
 }
 
-export type BetterInput = FC<BetterInputProps>
-
-
-
+export type BetterInput = FC<BetterInputProps>;
 
 /*
 import BetterInput from "@internal/BetterInput";
@@ -38,4 +35,4 @@ export function TextDisplay({state, setState, options_standard, hideTrack}) {
         />
     </div>
 }
- */
\ No newline at end of file
+ */
diff --git a/components-sdk/src/polyfills/EmojiPicker.ts b/components-sdk/src/polyfills/EmojiPicker.ts
index 802abf3..5fd2d22 100644
--- a/components-sdk/src/polyfills/EmojiPicker.ts
+++ b/components-sdk/src/polyfills/EmojiPicker.ts
@@ -1,12 +1,12 @@
-import {FC} from "react";
-import {EmojiObject, PassProps} from "../utils/componentTypes";
+import { FC } from 'react';
+import { EmojiObject, PassProps } from '../utils/componentTypes';
 
 export interface EmojiPickerProps {
-    passProps: PassProps,
-    onSelect: (emoji: EmojiObject) => any,
+    passProps: PassProps;
+    onSelect: (emoji: EmojiObject) => any;
 }
 
-export type EmojiPicker = FC<EmojiPickerProps>
+export type EmojiPicker = FC<EmojiPickerProps>;
 
 /*
 export function MenuEmoji({stateKey, stateManager, guild_emojis} : {
@@ -33,4 +33,4 @@ export function MenuEmoji({stateKey, stateManager, guild_emojis} : {
     />
 }
 
- */
\ No newline at end of file
+ */
diff --git a/components-sdk/src/polyfills/EmojiShow.ts b/components-sdk/src/polyfills/EmojiShow.ts
index d827604..c55063f 100644
--- a/components-sdk/src/polyfills/EmojiShow.ts
+++ b/components-sdk/src/polyfills/EmojiShow.ts
@@ -1,10 +1,9 @@
-import {FC} from "react";
-import {EmojiObject, PassProps} from "../utils/componentTypes";
+import { FC } from 'react';
+import { EmojiObject, PassProps } from '../utils/componentTypes';
 
 export interface EmojiShowProps {
-    passProps: PassProps,
-    emoji: EmojiObject
-
+    passProps: PassProps;
+    emoji: EmojiObject;
 }
 
-export type EmojiShow = FC<EmojiShowProps>
+export type EmojiShow = FC<EmojiShowProps>;
diff --git a/components-sdk/src/polyfills/README.md b/components-sdk/src/polyfills/README.md
index ec501d8..547fff5 100644
--- a/components-sdk/src/polyfills/README.md
+++ b/components-sdk/src/polyfills/README.md
@@ -18,4 +18,4 @@ These interfaces serve as guidelines for expected behavior and structure. You’
 
 [StateManager.ts](StateManager.ts) — A lightweight reducer-style state manager for handling state changes in components.
 
-[files.ts](files.ts) — Functions for uploaded files storage
\ No newline at end of file
+[files.ts](files.ts) — Functions for uploaded files storage
diff --git a/components-sdk/src/polyfills/StateManager.ts b/components-sdk/src/polyfills/StateManager.ts
index 86f75bb..7c5f4db 100644
--- a/components-sdk/src/polyfills/StateManager.ts
+++ b/components-sdk/src/polyfills/StateManager.ts
@@ -1,25 +1,26 @@
-export type stateKeyType = (string | number)[]
-
+export type stateKeyType = (string | number)[];
 
 export interface StateManager {
-    deleteKey({key, decoupleFrom, removeKeyParent}: {
-        key: stateKeyType,
-        decoupleFrom?: string,
-        removeKeyParent?: stateKeyType
-    }): void,
-    appendKey<T>({key, value}: {
-        key: stateKeyType,
-        value: T
-    }): void,
-    setKey<T>({key, value}: {
-        key: stateKeyType,
-        value: T
-    }): void,
-    wrapKey<T>({key, toArray, innerKey, value}: {
-        key: stateKeyType,
-        toArray: boolean,
-        innerKey: string,
-        value: T
-    }): void,
+    deleteKey({
+        key,
+        decoupleFrom,
+        removeKeyParent,
+    }: {
+        key: stateKeyType;
+        decoupleFrom?: string;
+        removeKeyParent?: stateKeyType;
+    }): void;
+    appendKey<T>({ key, value }: { key: stateKeyType; value: T }): void;
+    setKey<T>({ key, value }: { key: stateKeyType; value: T }): void;
+    wrapKey<T>({
+        key,
+        toArray,
+        innerKey,
+        value,
+    }: {
+        key: stateKeyType;
+        toArray: boolean;
+        innerKey: string;
+        value: T;
+    }): void;
 }
-
diff --git a/components-sdk/src/polyfills/files.ts b/components-sdk/src/polyfills/files.ts
index d6c8ad9..b3f6c99 100644
--- a/components-sdk/src/polyfills/files.ts
+++ b/components-sdk/src/polyfills/files.ts
@@ -1,3 +1,2 @@
-
-export type getFileType = (fileName: string) => Blob | MediaSource
-export type setFileType = (randomName: string, file: File) => string
\ No newline at end of file
+export type getFileType = (fileName: string) => Blob | MediaSource;
+export type setFileType = (randomName: string, file: File) => string;
diff --git a/components-sdk/src/svg.d.ts b/components-sdk/src/svg.d.ts
index 692d88b..bff9471 100644
--- a/components-sdk/src/svg.d.ts
+++ b/components-sdk/src/svg.d.ts
@@ -1 +1 @@
-declare module "*.svg";
\ No newline at end of file
+declare module '*.svg';
diff --git a/components-sdk/src/utils/componentTypes.ts b/components-sdk/src/utils/componentTypes.ts
index 3cc570e..fb36568 100644
--- a/components-sdk/src/utils/componentTypes.ts
+++ b/components-sdk/src/utils/componentTypes.ts
@@ -1,150 +1,150 @@
-import {BetterInput} from "../polyfills/BetterInput";
-import {EmojiPicker} from "../polyfills/EmojiPicker";
-import {EmojiShow} from "../polyfills/EmojiShow";
-import {getFileType, setFileType} from "../polyfills/files";
+import { BetterInput } from '../polyfills/BetterInput';
+import { EmojiPicker } from '../polyfills/EmojiPicker';
+import { EmojiShow } from '../polyfills/EmojiShow';
+import { getFileType, setFileType } from '../polyfills/files';
 
 export enum ComponentType {
-  ACTION_ROW = 1,
-  BUTTON = 2,
-  STRING_SELECT = 3,
+    ACTION_ROW = 1,
+    BUTTON = 2,
+    STRING_SELECT = 3,
 
-  SECTION = 9,
-  TEXT_DISPLAY = 10,
-  THUMBNAIL = 11,
-  MEDIA_GALLERY = 12,
-  FILE = 13,
-  SEPARATOR = 14,
-  CONTAINER = 17
+    SECTION = 9,
+    TEXT_DISPLAY = 10,
+    THUMBNAIL = 11,
+    MEDIA_GALLERY = 12,
+    FILE = 13,
+    SEPARATOR = 14,
+    CONTAINER = 17,
 }
 
 export type PassProps = {
-  getFile: getFileType,
-  setFile: setFileType,
-  BetterInput: BetterInput,
-  EmojiPicker: EmojiPicker,
-  EmojiShow: EmojiShow
-}
+    getFile: getFileType;
+    setFile: setFileType;
+    BetterInput: BetterInput;
+    EmojiPicker: EmojiPicker;
+    EmojiShow: EmojiShow;
+};
 
 export enum ButtonStyle {
-  BLUE = 1,
-  GREY = 2,
-  GREEN = 3,
-  RED = 4,
-  URL = 5
+    BLUE = 1,
+    GREY = 2,
+    GREEN = 3,
+    RED = 4,
+    URL = 5,
 }
 
 export interface EmojiObject {
-  id: string | null,
-  name: string
+    id: string | null;
+    name: string;
 }
 
-export type ActionRowPossible = ButtonComponent | StringSelectComponent
+export type ActionRowPossible = ButtonComponent | StringSelectComponent;
 
 export interface ActionRowComponent<T extends Component> extends Component {
-  type: ComponentType.ACTION_ROW,
-  components: T[]
+    type: ComponentType.ACTION_ROW;
+    components: T[];
 }
 
 export interface ButtonComponent extends Component {
-  type: ComponentType.BUTTON,
-  style: ButtonStyle,
-  label: string,
-  emoji: EmojiObject | null,
-  disabled: boolean,
-  custom_id?: string,
-  url?: string
+    type: ComponentType.BUTTON;
+    style: ButtonStyle;
+    label: string;
+    emoji: EmojiObject | null;
+    disabled: boolean;
+    custom_id?: string;
+    url?: string;
 }
 
 export interface StringSelectComponentOption {
-  label: string,
-  value: string,
-  description: string | null,
-  emoji: EmojiObject | null,
-  default: boolean,
-  disabled: boolean
+    label: string;
+    value: string;
+    description: string | null;
+    emoji: EmojiObject | null;
+    default: boolean;
+    disabled: boolean;
 }
 
 export interface StringSelectComponent extends Component {
-  type: ComponentType.STRING_SELECT,
-  custom_id: string,
-  options: StringSelectComponentOption[],
-  placeholder?: string,
-  min_values: number,
-  max_values: number,
-  disabled?: boolean
+    type: ComponentType.STRING_SELECT;
+    custom_id: string;
+    options: StringSelectComponentOption[];
+    placeholder?: string;
+    min_values: number;
+    max_values: number;
+    disabled?: boolean;
 }
 
 export interface UnfurledMediaItem {
-  // Supports arbitrary urls _and_ attachment://<filename> references
-  url: string;
+    // Supports arbitrary urls _and_ attachment://<filename> references
+    url: string;
 }
 
 export interface Component {
-  type: ComponentType,
-  id?: number //int32, auto generated via increment if not provided
+    type: ComponentType;
+    id?: number; //int32, auto generated via increment if not provided
 }
 
 export interface SectionComponent extends Component {
-  type: ComponentType.SECTION,
-  // DO NOT hardcode assumptions this will always be TextDisplayComponents.
-  // We could potentially add other components in the future
-  components: TextDisplayComponent[],
-  // DO NOT hardcode assumptions that this will only be Thumbnail.
-  // Eventually this will support Button and others
-  accessory: ThumbnailComponent | ButtonComponent
+    type: ComponentType.SECTION;
+    // DO NOT hardcode assumptions this will always be TextDisplayComponents.
+    // We could potentially add other components in the future
+    components: TextDisplayComponent[];
+    // DO NOT hardcode assumptions that this will only be Thumbnail.
+    // Eventually this will support Button and others
+    accessory: ThumbnailComponent | ButtonComponent;
 }
 
 export interface TextDisplayComponent extends Component {
-  type: ComponentType.TEXT_DISPLAY;
-  content: string;
+    type: ComponentType.TEXT_DISPLAY;
+    content: string;
 }
 
 export interface ThumbnailComponent extends Component {
-  type: ComponentType.THUMBNAIL;
-  media: UnfurledMediaItem;
-  description: string | null;
-  spoiler?: boolean
+    type: ComponentType.THUMBNAIL;
+    media: UnfurledMediaItem;
+    description: string | null;
+    spoiler?: boolean;
 }
 
 export interface MediaGalleryItem {
-  media: UnfurledMediaItem;
-  description: string | null;
-  spoiler?: boolean;
+    media: UnfurledMediaItem;
+    description: string | null;
+    spoiler?: boolean;
 }
 
 export interface MediaGalleryComponent extends Component {
-  type: ComponentType.MEDIA_GALLERY;
-  items: MediaGalleryItem[];
+    type: ComponentType.MEDIA_GALLERY;
+    items: MediaGalleryItem[];
 }
 
 export enum SeparatorSpacingSize {
-  SMALL = 1,
-  LARGE = 2,
+    SMALL = 1,
+    LARGE = 2,
 }
 
 export interface SeparatorComponent extends Component {
-  type: ComponentType.SEPARATOR;
-  divider?: boolean;
-  spacing?: SeparatorSpacingSize;
+    type: ComponentType.SEPARATOR;
+    divider?: boolean;
+    spacing?: SeparatorSpacingSize;
 }
 
 export interface FileComponent extends Component {
-  type: ComponentType.FILE;
-  // The UnfurledMediaItem ONLY supports attachment://<filename> references
-  file: UnfurledMediaItem;
-  spoiler?: boolean;
+    type: ComponentType.FILE;
+    // The UnfurledMediaItem ONLY supports attachment://<filename> references
+    file: UnfurledMediaItem;
+    spoiler?: boolean;
 }
 
 export interface ContainerComponent extends Component {
-  type: ComponentType.CONTAINER;
-  accent_color: number | null;
-  spoiler?: boolean;
-  components: Array<
-    ActionRowComponent<ActionRowPossible>
-    | TextDisplayComponent
-    | SectionComponent
-    | MediaGalleryComponent
-    | SeparatorComponent
-    // | FileComponent
-  >;
-}
\ No newline at end of file
+    type: ComponentType.CONTAINER;
+    accent_color: number | null;
+    spoiler?: boolean;
+    components: Array<
+        | ActionRowComponent<ActionRowPossible>
+        | TextDisplayComponent
+        | SectionComponent
+        | MediaGalleryComponent
+        | SeparatorComponent
+        // | FileComponent
+    >;
+}
diff --git a/components-sdk/src/utils/randomGen.ts b/components-sdk/src/utils/randomGen.ts
index 30e934f..ad39563 100644
--- a/components-sdk/src/utils/randomGen.ts
+++ b/components-sdk/src/utils/randomGen.ts
@@ -1,38 +1,317 @@
-const adjectives = ['Furry', 'Ferocious', 'Dangerous', 'Poisonous', 'Tame', 'Agile', 'Clever', 'Aggressive',
-    'Tiny', 'Domestic', 'Wild', 'Herbivorous', 'Carnivorous', 'Adorable', 'Aggressive', 'Agile', 'Beautiful', 'Bossy',
-    'Candid', 'Carnivorous', 'Clever', 'Cold', 'Cold-Blooded', 'Colorful', 'Cuddly', 'Curious', 'Cute', 'Dangerous',
-    'Deadly', 'Domestic', 'Dominant', 'Energetic', 'Fast', 'Feisty', 'Ferocious', 'Fierce', 'Fluffy', 'Friendly',
-    'Furry', 'Fuzzy', 'Grumpy', 'Hairy', 'Heavy', 'Herbivorous', 'Jealous', 'Large', 'Lazy', 'Loud', 'Lovable',
-    'Loving', 'Malicious', 'Maternal', 'Mean', 'Messy', 'Nocturnal', 'Noisy', 'Nosy', 'Picky', 'Playful', 'Poisonous',
-    'Quick', 'Rough', 'Sassy', 'Scaly', 'Short', 'Shy', 'Slimy', 'Slow', 'Small', 'Smart', 'Smelly', 'Soft', 'Spikey',
-    'Stinky', 'Strong', 'Stubborn', 'Submissive', 'Tall', 'Tame', 'Tenacious', 'Territorial', 'Tiny', 'Vicious',
-    'Warm', 'Wild']
-
-
-const animals = ['Aardvark', 'Albatross', 'Alligator', 'Alpaca', 'Ant', 'Anteater', 'Antelope', 'Ape',
-    'Armadillo', 'Donkey', 'Baboon', 'Badger', 'Barracuda', 'Bat', 'Bear', 'Beaver', 'Bee', 'Bison', 'Boar',
-    'Buffalo', 'Butterfly', 'Camel', 'Capybara', 'Caribou', 'Cassowary', 'Cat', 'Caterpillar', 'Cattle', 'Chamois',
-    'Cheetah', 'Chicken', 'Chimpanzee', 'Chinchilla', 'Chough', 'Clam', 'Cobra', 'Cockroach', 'Cod', 'Cormorant',
-    'Coyote', 'Crab', 'Crane', 'Crocodile', 'Crow', 'Curlew', 'Deer', 'Dinosaur', 'Dog', 'Dogfish', 'Dolphin',
-    'Dotterel', 'Dove', 'Dragonfly', 'Duck', 'Dugong', 'Dunlin', 'Eagle', 'Echidna', 'Eel', 'Eland', 'Elephant',
-    'Elk', 'Emu', 'Falcon', 'Ferret', 'Finch', 'Fish', 'Flamingo', 'Fly', 'Fox', 'Frog', 'Gaur', 'Gazelle', 'Gerbil',
-    'Giraffe', 'Gnat', 'Gnu', 'Goat', 'Goldfinch', 'Goldfish', 'Goose', 'Gorilla', 'Goshawk', 'Grasshopper', 'Grouse',
-    'Guanaco', 'Gull', 'Hamster', 'Hare', 'Hawk', 'Hedgehog', 'Heron', 'Herring', 'Hippopotamus', 'Hornet', 'Horse',
-    'Human', 'Hummingbird', 'Hyena', 'Ibex', 'Ibis', 'Jackal', 'Jaguar', 'Jay', 'Jellyfish', 'Kangaroo', 'Kingfisher',
-    'Koala', 'Kookabura', 'Kouprey', 'Kudu', 'Lapwing', 'Lark', 'Lemur', 'Leopard', 'Lion', 'Llama', 'Lobster',
-    'Locust', 'Loris', 'Louse', 'Lyrebird', 'Magpie', 'Mallard', 'Manatee', 'Mandrill', 'Mantis', 'Marten', 'Meerkat',
-    'Mink', 'Mole', 'Mongoose', 'Monkey', 'Moose', 'Mosquito', 'Mouse', 'Mule', 'Narwhal', 'Newt', 'Nightingale',
-    'Octopus', 'Okapi', 'Opossum', 'Oryx', 'Ostrich', 'Otter', 'Owl', 'Oyster', 'Panther', 'Parrot', 'Partridge',
-    'Peafowl', 'Pelican', 'Penguin', 'Pheasant', 'Pig', 'Pigeon', 'Pony', 'Porcupine', 'Porpoise', 'Quail', 'Quelea',
-    'Quetzal', 'Rabbit', 'Raccoon', 'Rail', 'Ram', 'Rat', 'Raven', 'Red Deer', 'Red Panda', 'Reindeer', 'Rhinoceros',
-    'Rook', 'Salamander', 'Salmon', 'Sand Dollar', 'Sandpiper', 'Sardine', 'Scorpion', 'Seahorse', 'Seal', 'Shark',
-    'Sheep', 'Shrew', 'Skunk', 'Snail', 'Snake', 'Sparrow', 'Spider', 'Spoonbill', 'Squid', 'Squirrel', 'Starling',
-    'Stingray', 'Stinkbug', 'Stork', 'Swallow', 'Swan', 'Tapir', 'Tarsier', 'Termite', 'Tiger', 'Toad', 'Trout',
-    'Turkey', 'Turtle', 'Viper', 'Vulture', 'Wallaby', 'Walrus', 'Wasp', 'Weasel', 'Whale', 'Wildcat', 'Wolf',
-    'Wolverine', 'Wombat', 'Woodcock', 'Woodpecker', 'Worm', 'Wren', 'Yak', 'Zebra']
-;
-
+const adjectives = [
+    'Furry',
+    'Ferocious',
+    'Dangerous',
+    'Poisonous',
+    'Tame',
+    'Agile',
+    'Clever',
+    'Aggressive',
+    'Tiny',
+    'Domestic',
+    'Wild',
+    'Herbivorous',
+    'Carnivorous',
+    'Adorable',
+    'Aggressive',
+    'Agile',
+    'Beautiful',
+    'Bossy',
+    'Candid',
+    'Carnivorous',
+    'Clever',
+    'Cold',
+    'Cold-Blooded',
+    'Colorful',
+    'Cuddly',
+    'Curious',
+    'Cute',
+    'Dangerous',
+    'Deadly',
+    'Domestic',
+    'Dominant',
+    'Energetic',
+    'Fast',
+    'Feisty',
+    'Ferocious',
+    'Fierce',
+    'Fluffy',
+    'Friendly',
+    'Furry',
+    'Fuzzy',
+    'Grumpy',
+    'Hairy',
+    'Heavy',
+    'Herbivorous',
+    'Jealous',
+    'Large',
+    'Lazy',
+    'Loud',
+    'Lovable',
+    'Loving',
+    'Malicious',
+    'Maternal',
+    'Mean',
+    'Messy',
+    'Nocturnal',
+    'Noisy',
+    'Nosy',
+    'Picky',
+    'Playful',
+    'Poisonous',
+    'Quick',
+    'Rough',
+    'Sassy',
+    'Scaly',
+    'Short',
+    'Shy',
+    'Slimy',
+    'Slow',
+    'Small',
+    'Smart',
+    'Smelly',
+    'Soft',
+    'Spikey',
+    'Stinky',
+    'Strong',
+    'Stubborn',
+    'Submissive',
+    'Tall',
+    'Tame',
+    'Tenacious',
+    'Territorial',
+    'Tiny',
+    'Vicious',
+    'Warm',
+    'Wild',
+];
 
+const animals = [
+    'Aardvark',
+    'Albatross',
+    'Alligator',
+    'Alpaca',
+    'Ant',
+    'Anteater',
+    'Antelope',
+    'Ape',
+    'Armadillo',
+    'Donkey',
+    'Baboon',
+    'Badger',
+    'Barracuda',
+    'Bat',
+    'Bear',
+    'Beaver',
+    'Bee',
+    'Bison',
+    'Boar',
+    'Buffalo',
+    'Butterfly',
+    'Camel',
+    'Capybara',
+    'Caribou',
+    'Cassowary',
+    'Cat',
+    'Caterpillar',
+    'Cattle',
+    'Chamois',
+    'Cheetah',
+    'Chicken',
+    'Chimpanzee',
+    'Chinchilla',
+    'Chough',
+    'Clam',
+    'Cobra',
+    'Cockroach',
+    'Cod',
+    'Cormorant',
+    'Coyote',
+    'Crab',
+    'Crane',
+    'Crocodile',
+    'Crow',
+    'Curlew',
+    'Deer',
+    'Dinosaur',
+    'Dog',
+    'Dogfish',
+    'Dolphin',
+    'Dotterel',
+    'Dove',
+    'Dragonfly',
+    'Duck',
+    'Dugong',
+    'Dunlin',
+    'Eagle',
+    'Echidna',
+    'Eel',
+    'Eland',
+    'Elephant',
+    'Elk',
+    'Emu',
+    'Falcon',
+    'Ferret',
+    'Finch',
+    'Fish',
+    'Flamingo',
+    'Fly',
+    'Fox',
+    'Frog',
+    'Gaur',
+    'Gazelle',
+    'Gerbil',
+    'Giraffe',
+    'Gnat',
+    'Gnu',
+    'Goat',
+    'Goldfinch',
+    'Goldfish',
+    'Goose',
+    'Gorilla',
+    'Goshawk',
+    'Grasshopper',
+    'Grouse',
+    'Guanaco',
+    'Gull',
+    'Hamster',
+    'Hare',
+    'Hawk',
+    'Hedgehog',
+    'Heron',
+    'Herring',
+    'Hippopotamus',
+    'Hornet',
+    'Horse',
+    'Human',
+    'Hummingbird',
+    'Hyena',
+    'Ibex',
+    'Ibis',
+    'Jackal',
+    'Jaguar',
+    'Jay',
+    'Jellyfish',
+    'Kangaroo',
+    'Kingfisher',
+    'Koala',
+    'Kookabura',
+    'Kouprey',
+    'Kudu',
+    'Lapwing',
+    'Lark',
+    'Lemur',
+    'Leopard',
+    'Lion',
+    'Llama',
+    'Lobster',
+    'Locust',
+    'Loris',
+    'Louse',
+    'Lyrebird',
+    'Magpie',
+    'Mallard',
+    'Manatee',
+    'Mandrill',
+    'Mantis',
+    'Marten',
+    'Meerkat',
+    'Mink',
+    'Mole',
+    'Mongoose',
+    'Monkey',
+    'Moose',
+    'Mosquito',
+    'Mouse',
+    'Mule',
+    'Narwhal',
+    'Newt',
+    'Nightingale',
+    'Octopus',
+    'Okapi',
+    'Opossum',
+    'Oryx',
+    'Ostrich',
+    'Otter',
+    'Owl',
+    'Oyster',
+    'Panther',
+    'Parrot',
+    'Partridge',
+    'Peafowl',
+    'Pelican',
+    'Penguin',
+    'Pheasant',
+    'Pig',
+    'Pigeon',
+    'Pony',
+    'Porcupine',
+    'Porpoise',
+    'Quail',
+    'Quelea',
+    'Quetzal',
+    'Rabbit',
+    'Raccoon',
+    'Rail',
+    'Ram',
+    'Rat',
+    'Raven',
+    'Red Deer',
+    'Red Panda',
+    'Reindeer',
+    'Rhinoceros',
+    'Rook',
+    'Salamander',
+    'Salmon',
+    'Sand Dollar',
+    'Sandpiper',
+    'Sardine',
+    'Scorpion',
+    'Seahorse',
+    'Seal',
+    'Shark',
+    'Sheep',
+    'Shrew',
+    'Skunk',
+    'Snail',
+    'Snake',
+    'Sparrow',
+    'Spider',
+    'Spoonbill',
+    'Squid',
+    'Squirrel',
+    'Starling',
+    'Stingray',
+    'Stinkbug',
+    'Stork',
+    'Swallow',
+    'Swan',
+    'Tapir',
+    'Tarsier',
+    'Termite',
+    'Tiger',
+    'Toad',
+    'Trout',
+    'Turkey',
+    'Turtle',
+    'Viper',
+    'Vulture',
+    'Wallaby',
+    'Walrus',
+    'Wasp',
+    'Weasel',
+    'Whale',
+    'Wildcat',
+    'Wolf',
+    'Wolverine',
+    'Wombat',
+    'Woodcock',
+    'Woodpecker',
+    'Worm',
+    'Wren',
+    'Yak',
+    'Zebra',
+];
 export function generateRandomAnimal() {
     const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
     const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
@@ -41,50 +320,56 @@ export function generateRandomAnimal() {
 
 export function uuidv4() {
     let d = new Date().getTime();
-    let d2 = (performance && performance.now && (performance.now() * 1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
-    return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    let d2 = (performance && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+    return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         let r = Math.random() * 16;
-        if(d > 0){
-            r = (d + r)%16 | 0;
-            d = Math.floor(d/16);
+        if (d > 0) {
+            r = (d + r) % 16 | 0;
+            d = Math.floor(d / 16);
         } else {
-            r = (d2 + r)%16 | 0;
-            d2 = Math.floor(d2/16);
+            r = (d2 + r) % 16 | 0;
+            d2 = Math.floor(d2 / 16);
         }
-        return (c==='x' ? r : (r&0x7|0x8)).toString(16);
+        return (c === 'x' ? r : (r & 0x7) | 0x8).toString(16);
     });
 }
 
-const DICTIONARY: {[a: string]: string[]} = {
-  FEELINGS: ["confused", "thrilled", "awkward", "jealous", "lazy", "excited"],
-  ACTIONS: ["lick a cactus", "hug a stranger", "scream into the void", "dance with socks on your hands", "talk to a plant"],
-  SUBJECTS: ["cat", "lizard", "grandma", "robot", "alien", "time traveler"],
-  OBJECTS: ["toaster", "banana", "invisible unicorn", "giant spaghetti", "emotional potato"],
-  VERBS: ["explode", "teleport", "vanish", "become famous", "write a novel", "sing opera"],
-  PLACES: ["the moon", "a haunted IKEA", "your dreams", "Area 51", "a parallel universe"],
-  QUOTES: [
-    "If life gives you ${OBJECTS}, make ${OBJECTS} soup.",
-    "Never trust a ${SUBJECTS} with a ${OBJECTS}.",
-    "Always ${ACTIONS} before you ${VERBS}.",
-    "They said I couldn't ${VERBS}, so I went to ${PLACES} and became a ${SUBJECTS}.",
-    "True wisdom comes from ${ACTIONS} during ${FEELINGS} times.",
-    "Behind every ${SUBJECTS}, there's a ${FEELINGS} ${OBJECTS}."
-  ]
+const DICTIONARY: { [a: string]: string[] } = {
+    FEELINGS: ['confused', 'thrilled', 'awkward', 'jealous', 'lazy', 'excited'],
+    ACTIONS: [
+        'lick a cactus',
+        'hug a stranger',
+        'scream into the void',
+        'dance with socks on your hands',
+        'talk to a plant',
+    ],
+    SUBJECTS: ['cat', 'lizard', 'grandma', 'robot', 'alien', 'time traveler'],
+    OBJECTS: ['toaster', 'banana', 'invisible unicorn', 'giant spaghetti', 'emotional potato'],
+    VERBS: ['explode', 'teleport', 'vanish', 'become famous', 'write a novel', 'sing opera'],
+    PLACES: ['the moon', 'a haunted IKEA', 'your dreams', 'Area 51', 'a parallel universe'],
+    QUOTES: [
+        'If life gives you ${OBJECTS}, make ${OBJECTS} soup.',
+        'Never trust a ${SUBJECTS} with a ${OBJECTS}.',
+        'Always ${ACTIONS} before you ${VERBS}.',
+        "They said I couldn't ${VERBS}, so I went to ${PLACES} and became a ${SUBJECTS}.",
+        'True wisdom comes from ${ACTIONS} during ${FEELINGS} times.',
+        "Behind every ${SUBJECTS}, there's a ${FEELINGS} ${OBJECTS}.",
+    ],
 };
 
 function getRandom(arr: string[]) {
-  return arr[Math.floor(Math.random() * arr.length)];
+    return arr[Math.floor(Math.random() * arr.length)];
 }
 
 export function randomSentence() {
-  let sentence = getRandom(DICTIONARY.QUOTES);
-  const matches = sentence.match(/\${\w+}/g);
+    let sentence = getRandom(DICTIONARY.QUOTES);
+    const matches = sentence.match(/\${\w+}/g);
 
-  matches?.forEach((match) => {
-    const key = match.replace("${", "").replace("}", "");
-    const replacement = getRandom(DICTIONARY[key] || ["something"]);
-    sentence = sentence.replace(match, replacement);
-  });
+    matches?.forEach((match) => {
+        const key = match.replace('${', '').replace('}', '');
+        const replacement = getRandom(DICTIONARY[key] || ['something']);
+        sentence = sentence.replace(match, replacement);
+    });
 
-  return sentence
+    return sentence;
 }
diff --git a/components-sdk/src/utils/useFileUpload.ts b/components-sdk/src/utils/useFileUpload.ts
index f2474a2..ac3b6c9 100644
--- a/components-sdk/src/utils/useFileUpload.ts
+++ b/components-sdk/src/utils/useFileUpload.ts
@@ -1,10 +1,10 @@
-import {useFilePicker} from "use-file-picker";
-import {useEffect, useState} from "react";
-import ThumbnailIcon from "../icons/Thumbnail.svg";
-import {stateKeyType, StateManager} from "../polyfills/StateManager";
-import {uuidv4} from "./randomGen";
-import {SelectedFiles} from "use-file-picker/types";
-import {getFileType, setFileType} from "../polyfills/files";
+import { useFilePicker } from 'use-file-picker';
+import { useEffect, useState } from 'react';
+import ThumbnailIcon from '../icons/Thumbnail.svg';
+import { stateKeyType, StateManager } from '../polyfills/StateManager';
+import { uuidv4 } from './randomGen';
+import { SelectedFiles } from 'use-file-picker/types';
+import { getFileType, setFileType } from '../polyfills/files';
 
 export function useFileUpload(
     state: string,
@@ -19,16 +19,16 @@ export function useFileUpload(
         multiple: false,
         accept: ['.png', '.jpg', '.jpeg'],
         readFilesContent: false,
-        onFilesSelected: ({ plainFiles } : SelectedFiles<undefined>) => {
+        onFilesSelected: ({ plainFiles }: SelectedFiles<undefined>) => {
             const name = uuidv4();
             const ext = plainFiles[0].type.split('/')[1] || 'bin';
             const link = setFile(`${name}.${ext}`, plainFiles[0]);
-            stateManager.setKey({key: stateKey, value: link})
+            stateManager.setKey({ key: stateKey, value: link });
         },
     });
 
     useEffect(() => {
-        if (!state.startsWith("attachment://")) {
+        if (!state.startsWith('attachment://')) {
             setSrc(state);
             return;
         }
@@ -36,11 +36,12 @@ export function useFileUpload(
         const fileName = state.slice(13);
         const objectURL = URL.createObjectURL(getFile(fileName));
         setSrc(objectURL);
-        return () => URL.revokeObjectURL(objectURL)
+        return () => URL.revokeObjectURL(objectURL);
     }, [state]);
 
     return {
-        src, setSrc, openFileSelector
-    }
-
+        src,
+        setSrc,
+        openFileSelector,
+    };
 }
diff --git a/components-sdk/src/utils/useStateOpen.ts b/components-sdk/src/utils/useStateOpen.ts
index 8eefe7f..cfad62b 100644
--- a/components-sdk/src/utils/useStateOpen.ts
+++ b/components-sdk/src/utils/useStateOpen.ts
@@ -1,26 +1,29 @@
 import { Dispatch, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
 
 export function useStateOpen<T>(defaultValue: T): {
-    open: T
-    setOpen: Dispatch<SetStateAction<T>>,
-    ignoreRef: MutableRefObject<HTMLDivElement | null>,
-    closeLockRef: MutableRefObject<any>
+    open: T;
+    setOpen: Dispatch<SetStateAction<T>>;
+    ignoreRef: MutableRefObject<HTMLDivElement | null>;
+    closeLockRef: MutableRefObject<any>;
 } {
     const [open, setOpen] = useState(defaultValue);
     const ignoreRef = useRef<HTMLDivElement>(null);
     const closeLockRef = useRef<HTMLDivElement>(null);
 
-    const documentClick = useCallback((ev: MouseEvent) => {
-        if (ignoreRef.current && ignoreRef.current.contains(ev.target as HTMLElement)) return;
-        if (closeLockRef.current) return; // if there is any input you cannot close manually
-        setOpen(defaultValue);
-    }, [ignoreRef.current]);
+    const documentClick = useCallback(
+        (ev: MouseEvent) => {
+            if (ignoreRef.current && ignoreRef.current.contains(ev.target as HTMLElement)) return;
+            if (closeLockRef.current) return; // if there is any input you cannot close manually
+            setOpen(defaultValue);
+        },
+        [ignoreRef.current]
+    );
 
     const documentKeyDown = useCallback((ev: KeyboardEvent) => {
-        if (ev.key == "Enter" || ev.key == "Escape") {
+        if (ev.key == 'Enter' || ev.key == 'Escape') {
             setOpen(defaultValue);
         }
-    }, [])
+    }, []);
 
     useEffect(() => {
         document.addEventListener('mousedown', documentClick);
@@ -28,8 +31,8 @@ export function useStateOpen<T>(defaultValue: T): {
         return () => {
             document.removeEventListener('mousedown', documentClick);
             document.removeEventListener('keydown', documentKeyDown);
-        }
+        };
     }, []);
 
-    return { open, setOpen, ignoreRef, closeLockRef }
-}
\ No newline at end of file
+    return { open, setOpen, ignoreRef, closeLockRef };
+}
diff --git a/components-sdk/tsconfig.json b/components-sdk/tsconfig.json
index 9bbf3d4..b5feac3 100644
--- a/components-sdk/tsconfig.json
+++ b/components-sdk/tsconfig.json
@@ -1,20 +1,20 @@
 {
-    "compilerOptions": {
-        "target": "ESNext",
-        "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "allowJs": false,
-        "skipLibCheck": true,
-        "esModuleInterop": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx"
-    },
-    "include": ["./src"]
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
 }
diff --git a/components-sdk/vite.config.ts b/components-sdk/vite.config.ts
index 0427664..429b0d6 100644
--- a/components-sdk/vite.config.ts
+++ b/components-sdk/vite.config.ts
@@ -2,21 +2,21 @@
 import react from '@vitejs/plugin-react';
 // @ts-ignore
 import path from 'node:path';
-import {defineConfig} from 'vite';
+import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import postcssNesting from 'postcss-nesting';
 
 export default defineConfig({
     plugins: [
         react({
-          jsxRuntime: 'classic',
+            jsxRuntime: 'classic',
         }),
         dts({
             insertTypesEntry: true,
-        })
+        }),
     ],
     esbuild: {
-        jsxInject: `import React from 'react'`
+        jsxInject: `import React from 'react'`,
     },
     build: {
         sourcemap: true,
@@ -24,26 +24,24 @@ export default defineConfig({
             entry: path.resolve(__dirname, 'src/index.ts'),
             name: 'components-sdk',
             formats: ['es', 'umd'],
-            fileName: format => `components-sdk.${format}.js`
+            fileName: (format) => `components-sdk.${format}.js`,
         },
         rollupOptions: {
             external: (source) => {
-                if(source.startsWith("/") || source.startsWith(".")) return null;
+                if (source.startsWith('/') || source.startsWith('.')) return null;
                 return true;
             },
             output: {
                 globals: {
                     react: 'React',
-                    'react-dom': 'ReactDOM'
+                    'react-dom': 'ReactDOM',
                 },
             },
         },
     },
     css: {
         postcss: {
-            plugins: [
-                postcssNesting
-            ],
+            plugins: [postcssNesting],
         },
     },
 });
diff --git a/package.json b/package.json
index 178b310..5307f1a 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,19 @@
 {
-    "name": "builders",
-    "private": true,
-    "scripts": {
-        "build": "cd components-sdk && yarn build && cd ..",
-        "dev": "cd website && yarn dev"
-    },
-    "workspaces": {
-        "packages": [
-            "components-sdk",
-            "website"
-        ]
-    },
-    "devDependencies": {
-        "prettier": "2.5.1",
-        "pretty-quick": "3.1.3"
-    },
-    "packageManager": "yarn@4.9.1"
+  "name": "builders",
+  "private": true,
+  "scripts": {
+    "build": "cd components-sdk && yarn build && cd ..",
+    "dev": "cd website && yarn dev"
+  },
+  "workspaces": {
+    "packages": [
+      "components-sdk",
+      "website"
+    ]
+  },
+  "devDependencies": {
+    "prettier": "2.5.1",
+    "pretty-quick": "3.1.3"
+  },
+  "packageManager": "yarn@4.9.1"
 }
diff --git a/website/README.md b/website/README.md
index 95e31d5..7be3658 100644
--- a/website/README.md
+++ b/website/README.md
@@ -2,10 +2,10 @@
 
 ## TODO
 
-- [ ] Drag and drop
-- [ ] Support file component
-- [ ] Support channel and user select components
-- [ ] Dev mode - hides JSON and gives code-gen for popular Discord libraries
-- [ ] Encode the data in a base64 query param
+-   [ ] Drag and drop
+-   [ ] Support file component
+-   [ ] Support channel and user select components
+-   [ ] Dev mode - hides JSON and gives code-gen for popular Discord libraries
+-   [ ] Encode the data in a base64 query param
 
-Contributions are welcome.
\ No newline at end of file
+Contributions are welcome.
diff --git a/website/index.html b/website/index.html
index e1085f1..4cabf62 100644
--- a/website/index.html
+++ b/website/index.html
@@ -1,31 +1,46 @@
 <!DOCTYPE html>
-<html translate='no' class='notranslate'>
-  <head>
-  	<meta charset='UTF-8'>
-  	<meta name='viewport' content='width=device-width,initial-scale=1'>
-  	<title>discord.builders · Use new components in your Discord webhooks</title>
-  	<meta name='theme-color' content='#5865F2'>
-  	<meta name='google' content='notranslate'>
-  	<meta name="color-scheme" content="light dark">
-  	<meta name="darkreader-lock">
-  	<meta name='description' content='Use new Discord components in messages for free and stylize your server however your want.'>
-  	<meta property='og:description' content='Use new Discord components in messages for free and stylize your server however your want.'>
-  	<meta property='twitter:description' content='Use new Discord components in messages for free and stylize your server however your want.'>
-  	<meta property='twitter:domain' content='discord.builders'>
-  	<meta property='twitter:url' content='https://discord.builders/'>
-  	<meta property='twitter:card' content='summary_large_image'>
-  	<meta property='og:title' content='Use new components in your Discord webhooks'>
-  	<meta property='twitter:title' content='Use new components in your Discord webhooks'>
-  	<meta property='og:type' content='website'>
-  	<meta property='og:url' content='https://discord.builders/'>
-  	<meta property='og:site_name' content='discord.builders – Discord Embed Builder'>
-  	<link rel='preconnect' href='https://fonts.googleapis.com'>
-  	<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
-  	<link href='https://fonts.googleapis.com/css2?family=Merienda:wght@300;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,700&family=Hind:wght@300;500;700&display=swap' rel='stylesheet'>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap" rel="stylesheet">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+<html translate="no" class="notranslate">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>discord.builders · Use new components in your Discord webhooks</title>
+        <meta name="theme-color" content="#5865F2" />
+        <meta name="google" content="notranslate" />
+        <meta name="color-scheme" content="light dark" />
+        <meta name="darkreader-lock" />
+        <meta
+            name="description"
+            content="Use new Discord components in messages for free and stylize your server however your want."
+        />
+        <meta
+            property="og:description"
+            content="Use new Discord components in messages for free and stylize your server however your want."
+        />
+        <meta
+            property="twitter:description"
+            content="Use new Discord components in messages for free and stylize your server however your want."
+        />
+        <meta property="twitter:domain" content="discord.builders" />
+        <meta property="twitter:url" content="https://discord.builders/" />
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="og:title" content="Use new components in your Discord webhooks" />
+        <meta property="twitter:title" content="Use new components in your Discord webhooks" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://discord.builders/" />
+        <meta property="og:site_name" content="discord.builders – Discord Embed Builder" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,700&family=Hind:wght@300;500;700&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap"
+            rel="stylesheet"
+        />
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
diff --git a/website/package.json b/website/package.json
index 81f8dfc..01217c4 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,32 +1,32 @@
 {
-    "name": "website",
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@reduxjs/toolkit": "^1.8.5",
-        "components-sdk": "*",
-        "emoji-mart": "^3.0.1",
-        "rc-slider": "^9.7.5",
-        "react": "^18.2.0",
-        "react-color": "^2.19.3",
-        "react-dom": "^18.2.0",
-        "react-error-boundary": "^5.0.0",
-        "react-redux": "^8.0.2",
-        "react-textarea-autosize": "^8.3.4",
-        "use-file-picker": "^2.1.2"
-    },
-    "devDependencies": {
-        "@types/emoji-mart": "^3.0.1",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
-        "@vitejs/plugin-react": "1.2.0",
-        "postcss-nesting": "^13.0.1",
-        "typescript": "4.6.3",
-        "vite": "2.8.6"
-    }
+  "name": "website",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
+    "components-sdk": "*",
+    "emoji-mart": "^3.0.1",
+    "rc-slider": "^9.7.5",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^5.0.0",
+    "react-redux": "^8.0.2",
+    "react-textarea-autosize": "^8.3.4",
+    "use-file-picker": "^2.1.2"
+  },
+  "devDependencies": {
+    "@types/emoji-mart": "^3.0.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "1.2.0",
+    "postcss-nesting": "^13.0.1",
+    "typescript": "4.6.3",
+    "vite": "2.8.6"
+  }
 }
diff --git a/website/src/App.module.css b/website/src/App.module.css
index ba21086..6e8b280 100644
--- a/website/src/App.module.css
+++ b/website/src/App.module.css
@@ -1,78 +1,77 @@
 .app {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  min-height: 100vh;
-
-  .preview {
-    border-radius: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     min-height: 100vh;
-  }
-  .json {
-    padding: 2rem 4rem;
-    background: #2f3136;
-    font-size: 15px;
-    overflow: hidden;
-    min-width: 0;
-    word-wrap: anywhere;
-    height: 100vh;
-    overflow-y: auto;
-    position: sticky;
-    top: 0;
-    right: 0;
-
-    h1 {
-      font-size: 2.4rem;
-      margin: 0;
-      color: #fff;
-    }
 
-    .data {
-      white-space: pre-wrap;
+    .preview {
+        border-radius: 0;
+        min-height: 100vh;
     }
-
-    .input_pair {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      margin-bottom: 2rem;
-
-      input {
-        padding: 0.8rem 1.6rem;
+    .json {
+        padding: 2rem 4rem;
         background: #2f3136;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-        border-radius: 4px 0 0 4px;
-        color: #dcddde;
-        font-size: inherit;
-        line-height: inherit;
-        letter-spacing: inherit;
-        font-weight: inherit;
-        font-family: inherit;
-        width: 100%;
-        outline: none;
+        font-size: 15px;
+        overflow: hidden;
+        min-width: 0;
+        word-wrap: anywhere;
+        height: 100vh;
+        overflow-y: auto;
+        position: sticky;
+        top: 0;
+        right: 0;
 
-        &::placeholder {
-          font-style: italic !important;
-          color: gray !important;
+        h1 {
+            font-size: 2.4rem;
+            margin: 0;
+            color: #fff;
         }
-      }
 
-      button {
-        background: #5865F2;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        box-shadow: 0 0 2px rgba(0, 0, 0, 0.4), 0 0 40px rgba(88, 101, 242, 0.32);
-        border-radius: 0 4px 4px 0;
-        padding: 0.8rem 2.5rem;
-        color: #fff;
-        font-size: inherit;
-        line-height: inherit;
-        letter-spacing: inherit;
-        font-weight: inherit;
-        cursor: pointer;
-        &:hover {
-          background: #4752C4;
+        .data {
+            white-space: pre-wrap;
         }
-      }
 
+        .input_pair {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            margin-bottom: 2rem;
+
+            input {
+                padding: 0.8rem 1.6rem;
+                background: #2f3136;
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+                border-radius: 4px 0 0 4px;
+                color: #dcddde;
+                font-size: inherit;
+                line-height: inherit;
+                letter-spacing: inherit;
+                font-weight: inherit;
+                font-family: inherit;
+                width: 100%;
+                outline: none;
+
+                &::placeholder {
+                    font-style: italic !important;
+                    color: gray !important;
+                }
+            }
+
+            button {
+                background: #5865f2;
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                box-shadow: 0 0 2px rgba(0, 0, 0, 0.4), 0 0 40px rgba(88, 101, 242, 0.32);
+                border-radius: 0 4px 4px 0;
+                padding: 0.8rem 2.5rem;
+                color: #fff;
+                font-size: inherit;
+                line-height: inherit;
+                letter-spacing: inherit;
+                font-weight: inherit;
+                cursor: pointer;
+                &:hover {
+                    background: #4752c4;
+                }
+            }
+        }
     }
-  }
 }
diff --git a/website/src/App.tsx b/website/src/App.tsx
index 0b256b3..ba5a5d9 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -1,26 +1,26 @@
-import {Capsule} from "components-sdk";
-import {useCallback, useEffect, useMemo, useRef} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {actions, DisplaySliceManager, RootState} from "./state";
-import {BetterInput} from "./BetterInput";
-import {EmojiPicker} from "./EmojiPicker";
-import {EmojiShow} from "./EmojiShow";
-import Styles from './App.module.css'
-import {webhookImplementation} from "./webhook.impl";
-import {ErrorBoundary} from "react-error-boundary";
+import { Capsule } from 'components-sdk';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { actions, DisplaySliceManager, RootState } from './state';
+import { BetterInput } from './BetterInput';
+import { EmojiPicker } from './EmojiPicker';
+import { EmojiShow } from './EmojiShow';
+import Styles from './App.module.css';
+import { webhookImplementation } from './webhook.impl';
+import { ErrorBoundary } from 'react-error-boundary';
 
 webhookImplementation.init();
 
 function App() {
     const dispatch = useDispatch();
     const stateManager = useMemo(() => new DisplaySliceManager(dispatch), [dispatch]);
-    const state = useSelector((state: RootState) => state.display.data)
+    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 currentHash = useRef<string | null>(null);
 
     const setFile = useCallback(webhookImplementation.setFile, []);
-    const getFile = useCallback(webhookImplementation.getFile, [])
+    const getFile = useCallback(webhookImplementation.getFile, []);
     useEffect(() => {
         webhookImplementation.clean(state);
         if (currentHash === null) {
@@ -30,24 +30,23 @@ function App() {
 
         const getData = setTimeout(() => {
             const value = btoa(encodeURIComponent(JSON.stringify(state)));
-            currentHash.current = value;  // infinite loop resolver
+            currentHash.current = value; // infinite loop resolver
             document.location.hash = value;
-        }, 600)
+        }, 600);
 
-        return () => clearTimeout(getData)
+        return () => clearTimeout(getData);
     }, [state]);
 
-
     useEffect(() => {
-        const getData = setTimeout(() => localStorage.setItem("discord.builders__webhookToken", webhookUrl), 1000)
-        return () => clearTimeout(getData)
+        const getData = setTimeout(() => localStorage.setItem('discord.builders__webhookToken', webhookUrl), 1000);
+        return () => clearTimeout(getData);
     }, [webhookUrl]);
 
     useEffect(() => {
-        const handleChange = (event: {newURL: string}) => {
+        const handleChange = (event: { newURL: string }) => {
             const newHash = new URL(event.newURL).hash.substring(1);
             if (newHash === currentHash.current) return;
-            console.log("Loaded state from URL");
+            console.log('Loaded state from URL');
 
             let value;
             try {
@@ -56,66 +55,83 @@ function App() {
                 value = [];
             }
 
-            dispatch(actions.setKey({key: ['data'], value}))
+            dispatch(actions.setKey({ key: ['data'], value }));
             currentHash.current = event.newURL.substring(1);
         };
 
-        handleChange({newURL: window.location.toString()})
+        handleChange({ newURL: window.location.toString() });
         window.addEventListener('hashchange', handleChange);
         return () => window.removeEventListener('hashchange', handleChange);
-    }, [])
+    }, []);
 
     let parsed_url: URL | null = null;
     try {
         parsed_url = new URL(webhookUrl);
-        parsed_url.search = '?with_components=true'
-    } catch (e) {
-    }
-
-    return <div className={Styles.app}>
-        <ErrorBoundary fallback={<></>}>
-            <Capsule state={state}
-                     stateManager={stateManager}
-                     stateKey={['data']}
-                     getFile={getFile}
-                     setFile={setFile}
-                     BetterInput={BetterInput}
-                     EmojiPicker={EmojiPicker}
-                     EmojiShow={EmojiShow}
-                     className={Styles.preview}
-            />
-        </ErrorBoundary>
-        <div className={Styles.json}>
-            <h1>Message builder</h1>
-            <p style={{marginBottom: '2rem', marginTop: '1rem'}}>Warning: Non-link buttons and select menus are not
-                allowed when sending message via webhook.</p>
-
-            <div className={Styles.input_pair}>
-                <div className={Styles.input}>
-                    <input placeholder={"Webhook link"} type="text" value={webhookUrl}
-                           onChange={ev => dispatch(actions.setWebhookUrl(ev.target.value))}/>
+        parsed_url.search = '?with_components=true';
+    } catch (e) {}
+
+    return (
+        <div className={Styles.app}>
+            <ErrorBoundary fallback={<></>}>
+                <Capsule
+                    state={state}
+                    stateManager={stateManager}
+                    stateKey={['data']}
+                    getFile={getFile}
+                    setFile={setFile}
+                    BetterInput={BetterInput}
+                    EmojiPicker={EmojiPicker}
+                    EmojiShow={EmojiShow}
+                    className={Styles.preview}
+                />
+            </ErrorBoundary>
+            <div className={Styles.json}>
+                <h1>Message builder</h1>
+                <p style={{ marginBottom: '2rem', marginTop: '1rem' }}>
+                    Warning: Non-link buttons and select menus are not allowed when sending message via webhook.
+                </p>
+
+                <div className={Styles.input_pair}>
+                    <div className={Styles.input}>
+                        <input
+                            placeholder={'Webhook link'}
+                            type="text"
+                            value={webhookUrl}
+                            onChange={(ev) => dispatch(actions.setWebhookUrl(ev.target.value))}
+                        />
+                    </div>
+                    <button
+                        disabled={!parsed_url}
+                        onClick={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();
+                            dispatch(actions.setWebhookResponse(error_data));
+                        }}
+                    >
+                        Send
+                    </button>
                 </div>
-                <button disabled={!parsed_url} onClick={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();
-                    dispatch(actions.setWebhookResponse(error_data))
-                }}>
-                    Send
-                </button>
+                {!!response && (
+                    <div
+                        className={Styles.data}
+                        style={{
+                            marginBottom: '2rem',
+                            color: '#dd9898',
+                        }}
+                    >
+                        {JSON.stringify(response, undefined, 4)}
+                    </div>
+                )}
+                <div className={Styles.data}>{JSON.stringify(state, undefined, 4)}</div>
             </div>
-
-            {!!response && <div className={Styles.data}
-                                style={{
-                                    marginBottom: '2rem',
-                                    color: '#dd9898'
-                                }}>{JSON.stringify(response, undefined, 4)}</div>}
-            <div className={Styles.data}>{JSON.stringify(state, undefined, 4)}</div>
         </div>
-    </div>
+    );
 }
 
 export default App;
diff --git a/website/src/BetterInput.tsx b/website/src/BetterInput.tsx
index 112cf10..d0e1695 100644
--- a/website/src/BetterInput.tsx
+++ b/website/src/BetterInput.tsx
@@ -1,13 +1,15 @@
-import {BetterInput as BetterInputType} from "components-sdk";
-import TextareaAutosize from "react-textarea-autosize";
+import { BetterInput as BetterInputType } from 'components-sdk';
+import TextareaAutosize from 'react-textarea-autosize';
 
-export const BetterInput: BetterInputType = ({onChange, value}) => {
-    return <TextareaAutosize
-        // @ts-ignore this attribute works, and is used by CSS
-        type={'text'}
-        rows={1}
-        maxLength={2000}
-        onChange={onChange}
-        value={value}
-    />
-}
+export const BetterInput: BetterInputType = ({ onChange, value }) => {
+    return (
+        <TextareaAutosize
+            // @ts-ignore this attribute works, and is used by CSS
+            type={'text'}
+            rows={1}
+            maxLength={2000}
+            onChange={onChange}
+            value={value}
+        />
+    );
+};
diff --git a/website/src/EmojiPicker.tsx b/website/src/EmojiPicker.tsx
index 662d0ba..17355f8 100644
--- a/website/src/EmojiPicker.tsx
+++ b/website/src/EmojiPicker.tsx
@@ -1,6 +1,6 @@
-import {EmojiPicker as EmojiPickerType} from "components-sdk";
+import { EmojiPicker as EmojiPickerType } from 'components-sdk';
 
-import {Picker} from "emoji-mart";
+import { Picker } from 'emoji-mart';
 
 const notFound = () => (
     <div className="emoji-mart-no-results">
@@ -9,55 +9,54 @@ const notFound = () => (
                 style={{
                     width: 38,
                     height: 38,
-                    display: "inline-block",
+                    display: 'inline-block',
                     backgroundImage: 'url("https://cdn.discordapp.com/emojis/811160357682675792.png?size=64")',
-                    backgroundSize: "contain"
+                    backgroundSize: 'contain',
                 }}
             />
         </span>
         <div className="emoji-mart-no-results-label">No Emoji Found</div>
     </div>
-)
-
-export const EmojiPicker: EmojiPickerType = ({onSelect}) => {
+);
 
+export const EmojiPicker: EmojiPickerType = ({ onSelect }) => {
     return (
         // @ts-ignore probably react version and emoji-mart don't match
-        <div className={"emoji-picker"}><Picker
-            // @ts-ignore it requires Class-component, but function works well
-            notFound={notFound}
-            theme='dark'
-            set='twitter'
-            title='Pick your emoji…'
-            perLine={8}
-            color={'#86c232'}
-            emoji={'point_up'}
-            autoFocus={true}
-            emojiSize={24}
-            defaultSkin={1}
-            native={false}
-            sheetSize={64}
-            showPreview={true}
-            showSkinTones={true}
-            emojiTooltip={false}
-            useButton={true}
-            enableFrequentEmojiSort={false}
-            onSelect={(emoji: any) => {
-                if (emoji.custom === true) {
-                    const [name, id] = emoji.short_names[0].split(":");
-                    onSelect({
-                        name: name,
-                        id: id,
-                    })
-                } else {
-                    onSelect({
-                        name: emoji.native,
-                        id: null
-                    })
-                }
-            }}
-        />
-
+        <div className={'emoji-picker'}>
+            <Picker
+                // @ts-ignore it requires Class-component, but function works well
+                notFound={notFound}
+                theme="dark"
+                set="twitter"
+                title="Pick your emoji…"
+                perLine={8}
+                color={'#86c232'}
+                emoji={'point_up'}
+                autoFocus={true}
+                emojiSize={24}
+                defaultSkin={1}
+                native={false}
+                sheetSize={64}
+                showPreview={true}
+                showSkinTones={true}
+                emojiTooltip={false}
+                useButton={true}
+                enableFrequentEmojiSort={false}
+                onSelect={(emoji: any) => {
+                    if (emoji.custom === true) {
+                        const [name, id] = emoji.short_names[0].split(':');
+                        onSelect({
+                            name: name,
+                            id: id,
+                        });
+                    } else {
+                        onSelect({
+                            name: emoji.native,
+                            id: null,
+                        });
+                    }
+                }}
+            />
         </div>
-    )
-}
+    );
+};
diff --git a/website/src/EmojiShow.tsx b/website/src/EmojiShow.tsx
index 8796051..3d0759f 100644
--- a/website/src/EmojiShow.tsx
+++ b/website/src/EmojiShow.tsx
@@ -1,22 +1,22 @@
-import {EmojiShow as EmojiShowType} from "components-sdk";
-import {useCallback} from "react";
-import {Emoji, getEmojiDataFromNative} from "emoji-mart";
-import data from "emoji-mart/data/twitter.json";
+import { EmojiShow as EmojiShowType } from 'components-sdk';
+import { useCallback } from 'react';
+import { Emoji, getEmojiDataFromNative } from 'emoji-mart';
+import data from 'emoji-mart/data/twitter.json';
 
-export const EmojiShow: EmojiShowType = ({emoji}) => {
+export const EmojiShow: EmojiShowType = ({ emoji }) => {
     const getEmojiData = useCallback((emoji: any) => {
-        return getEmojiDataFromNative(emoji, 'twitter', data)
-    }, [])
+        return getEmojiDataFromNative(emoji, 'twitter', data);
+    }, []);
 
-    if (emoji.id !== null) return <img alt={`Discord emoji: ${emoji.name}`}
-         src={`https://cdn.discordapp.com/emojis/${emoji.id}`}
-         width={19}
-         height={19}
-    />
+    if (emoji.id !== null)
+        return (
+            <img
+                alt={`Discord emoji: ${emoji.name}`}
+                src={`https://cdn.discordapp.com/emojis/${emoji.id}`}
+                width={19}
+                height={19}
+            />
+        );
 
-    return <Emoji
-        set={'twitter'}
-        emoji={getEmojiData(emoji.name)}
-        size={19}
-    />
-}
+    return <Emoji set={'twitter'} emoji={getEmojiData(emoji.name)} size={19} />;
+};
diff --git a/website/src/fonts/LICENSE.md b/website/src/fonts/LICENSE.md
index 7ecc294..5225a16 100644
--- a/website/src/fonts/LICENSE.md
+++ b/website/src/fonts/LICENSE.md
@@ -3,17 +3,17 @@
 ## Missing files
 
 ```
-.  
-├── ggsans-Bold.woff2  
-├── ggsans-BoldItalic.woff2  
-├── ggsans-ExtraBold.woff2  
-├── ggsans-ExtraBoldItalic.woff2  
-├── ggsans-Medium.woff2  
-├── ggsans-MediumItalic.woff2  
-├── ggsans-Normal.woff2  
-├── ggsans-NormalItalic.woff2  
-├── ggsans-Semibold.woff2  
-├── ggsans-SemiboldItalic.woff2  
+.
+├── ggsans-Bold.woff2
+├── ggsans-BoldItalic.woff2
+├── ggsans-ExtraBold.woff2
+├── ggsans-ExtraBoldItalic.woff2
+├── ggsans-Medium.woff2
+├── ggsans-MediumItalic.woff2
+├── ggsans-Normal.woff2
+├── ggsans-NormalItalic.woff2
+├── ggsans-Semibold.woff2
+├── ggsans-SemiboldItalic.woff2
 ```
 
 ## License
@@ -25,7 +25,8 @@ Per Discord Inc.'s licensing terms:
 > “By using gg sans you agree to their use solely on Discord Inc. related brand materials and will not use them for any other purpose whatsoever. You must not modify, adapt, alter, convert, translate or otherwise change the gg sans font software. You must not send or share gg sans with any persons or organization, or any third party who is not commissioned by, or directly associated with, Discord Inc. either as a supplier, partner, franchisee, contractor, or otherwise.”
 
 Accordingly:
-- **You may not use this font in this project unless you are directly associated with Discord Inc.**
-- **The font is not included or redistributed with this project.**
+
+-   **You may not use this font in this project unless you are directly associated with Discord Inc.**
+-   **The font is not included or redistributed with this project.**
 
 For more information, please visit: [https://discord.com/branding](https://discord.com/branding)
diff --git a/website/src/global.d.ts b/website/src/global.d.ts
index 79f7734..be9b6ff 100644
--- a/website/src/global.d.ts
+++ b/website/src/global.d.ts
@@ -1,7 +1,7 @@
 export declare global {
-  interface Window {
-    uploadedFiles: {
-      [name: string]: File
+    interface Window {
+        uploadedFiles: {
+            [name: string]: File;
+        };
     }
-  }
 }
diff --git a/website/src/index.css b/website/src/index.css
index 67b8738..c256e12 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -11,7 +11,7 @@ body {
     background-color: #07080e;
     background-attachment: fixed;
     color: #b4b7b9;
-    font-family: "gg sans", Whitney, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'gg sans', Whitney, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 1.4rem;
     padding: 0;
     overflow-x: hidden;
@@ -97,8 +97,9 @@ body {
     font-display: swap;
 }
 
-
-*, ::after, ::before {
+*,
+::after,
+::before {
     box-sizing: border-box;
 }
 
@@ -116,7 +117,6 @@ body {
     filter: invert(100%);
 }
 
-
 .emoji-picker {
     text-wrap: auto;
 
@@ -144,14 +144,14 @@ body {
     }
 
     .emoji-mart-dark .emoji-mart-search input {
-    /*    border: 1px solid #232629;*/
-    /*    border-radius: 6px;*/
-    /*    outline: none;*/
-    /*    background: #232629;*/
-    /*    color: #b4b7b9;*/
-    /*    width: 100%;*/
-    /*    padding: 6px 15px;*/
-    /*    font-weight: 700;*/
+        /*    border: 1px solid #232629;*/
+        /*    border-radius: 6px;*/
+        /*    outline: none;*/
+        /*    background: #232629;*/
+        /*    color: #b4b7b9;*/
+        /*    width: 100%;*/
+        /*    padding: 6px 15px;*/
+        /*    font-weight: 700;*/
         font-family: inherit;
         font-size: 14px;
     }
diff --git a/website/src/main.tsx b/website/src/main.tsx
index ddf4e9d..f5cfc82 100644
--- a/website/src/main.tsx
+++ b/website/src/main.tsx
@@ -1,16 +1,16 @@
-import ReactDOM from 'react-dom'
-import 'emoji-mart/css/emoji-mart.css'
-import 'components-sdk/components-sdk.css'
-import './index.css'
-import App from './App'
-import {store} from './state'
-import {Provider} from 'react-redux'
+import ReactDOM from 'react-dom';
+import 'emoji-mart/css/emoji-mart.css';
+import 'components-sdk/components-sdk.css';
+import './index.css';
+import App from './App';
+import { store } from './state';
+import { Provider } from 'react-redux';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+    <React.StrictMode>
+        <Provider store={store}>
+            <App />
+        </Provider>
+    </React.StrictMode>,
+    document.getElementById('root')
+);
diff --git a/website/src/state.ts b/website/src/state.ts
index 5e778d6..0949f1d 100644
--- a/website/src/state.ts
+++ b/website/src/state.ts
@@ -1,9 +1,9 @@
-import {Component, stateKeyType, StateManager} from "components-sdk";
-import {configureStore, createSlice, PayloadAction} from '@reduxjs/toolkit'
+import { Component, stateKeyType, StateManager } from 'components-sdk';
+import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-type wrapKeyType<T> = { key: stateKeyType; toArray: boolean; innerKey: string; value: T; };
-type setKeyType<T> = { key: stateKeyType; value: T; };
-type appendKeyType<T> = { key: stateKeyType; value: T; };
+type wrapKeyType<T> = { key: stateKeyType; toArray: boolean; innerKey: string; value: T };
+type setKeyType<T> = { key: stateKeyType; value: T };
+type appendKeyType<T> = { key: stateKeyType; value: T };
 type deleteKeyType = {
     key: stateKeyType;
     decoupleFrom?: string | undefined;
@@ -17,19 +17,18 @@ const __deleteKeyHelper = (state: any, key: stateKeyType) => {
             current = current[key[i]];
             continue;
         }
-       current.splice(key[i], 1);
+        current.splice(key[i], 1);
     }
-}
+};
 
 export const displaySlice = createSlice({
     name: 'display',
     initialState: () => ({
         data: [] as Component[],
-        webhookUrl: localStorage.getItem("discord.builders__webhookToken") || "", // Toolkit run this function so type is string
-        webhookResponse: null as object | null
+        webhookUrl: localStorage.getItem('discord.builders__webhookToken') || '', // Toolkit run this function so type is string
+        webhookResponse: null as object | null,
     }),
     reducers: {
-
         wrapKey(state, action: PayloadAction<wrapKeyType<any>>) {
             const key = action.payload.key;
             let current: any = state;
@@ -41,8 +40,8 @@ export const displaySlice = createSlice({
 
                 current[key[i]] = {
                     ...action.payload.value,
-                    [action.payload.innerKey]: action.payload.toArray ? [current[key[i]]] : current[key[i]]
-                }
+                    [action.payload.innerKey]: action.payload.toArray ? [current[key[i]]] : current[key[i]],
+                };
             }
         },
 
@@ -53,7 +52,8 @@ export const displaySlice = createSlice({
                 if (i === key.length - 1) {
                     current[key[i]] = action.payload.value;
                 } else {
-                    if (typeof current[key[i]] === "undefined") current[key[i]] = typeof key[i + 1] === "number" ? [] : {};
+                    if (typeof current[key[i]] === 'undefined')
+                        current[key[i]] = typeof key[i + 1] === 'number' ? [] : {};
                     current = current[key[i]];
                 }
             }
@@ -67,7 +67,7 @@ export const displaySlice = createSlice({
                     if (!current[key[i]]) current[key[i]] = [];
                     current[key[i]].push(action.payload.value);
                     current[key[i]].length - 1;
-                    return
+                    return;
                 } else {
                     current = current[key[i]];
                 }
@@ -85,33 +85,34 @@ export const displaySlice = createSlice({
 
                 if (Array.isArray(current)) {
                     const key_i = key[i] as number;
-                    if (action.payload.decoupleFrom) current.splice(key_i, 1, ...current[key_i][action.payload.decoupleFrom]);
-                    else current.splice(key_i, 1)
-                    if (action.payload.removeKeyParent && current.length === 0) __deleteKeyHelper(state, action.payload.removeKeyParent)
-                } else
-                    delete current[key[i]];
+                    if (action.payload.decoupleFrom)
+                        current.splice(key_i, 1, ...current[key_i][action.payload.decoupleFrom]);
+                    else current.splice(key_i, 1);
+                    if (action.payload.removeKeyParent && current.length === 0)
+                        __deleteKeyHelper(state, action.payload.removeKeyParent);
+                } else delete current[key[i]];
             }
         },
 
         setWebhookUrl(state, action: PayloadAction<string>) {
-            state.webhookUrl = action.payload
+            state.webhookUrl = action.payload;
         },
 
         setWebhookResponse(state, action: PayloadAction<object>) {
-            state.webhookResponse = action.payload
-        }
-    }
-})
+            state.webhookResponse = action.payload;
+        },
+    },
+});
 export const actions = displaySlice.actions;
 
 export const store = configureStore({
     reducer: {
-        display: displaySlice.reducer
+        display: displaySlice.reducer,
     },
-})
+});
 
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
 
 export class DisplaySliceManager implements StateManager {
     private readonly dispatch: AppDispatch;
@@ -123,22 +124,21 @@ export class DisplaySliceManager implements StateManager {
 
     deleteKey(props: deleteKeyType) {
         this.dispatch(displaySlice.actions.deleteKey(props));
-        console.log("deleteKey", props);
+        console.log('deleteKey', props);
     }
 
     appendKey<T>(props: appendKeyType<T>) {
         this.dispatch(displaySlice.actions.appendKey(props));
-        console.log("appendKey", props);
+        console.log('appendKey', props);
     }
 
     setKey<T>(props: setKeyType<T>) {
         this.dispatch(displaySlice.actions.setKey(props));
-        console.log("setKey", props);
+        console.log('setKey', props);
     }
 
     wrapKey<T>(props: wrapKeyType<T>) {
         this.dispatch(displaySlice.actions.wrapKey(props));
-        console.log("wrapKey", props);
+        console.log('wrapKey', props);
     }
 }
-
diff --git a/website/src/webhook.impl.ts b/website/src/webhook.impl.ts
index a563be2..8b9ff1f 100644
--- a/website/src/webhook.impl.ts
+++ b/website/src/webhook.impl.ts
@@ -1,13 +1,13 @@
 import {
     Component,
     ComponentType,
-    ContainerComponent, FileComponent,
+    ContainerComponent,
+    FileComponent,
     getFileType,
     MediaGalleryComponent,
     SectionComponent,
-    setFileType
-} from "components-sdk";
-
+    setFileType,
+} from 'components-sdk';
 
 export const webhookImplementation = {
     getFile: ((name) => {
@@ -15,42 +15,41 @@ export const webhookImplementation = {
     }) as getFileType,
 
     setFile: ((name, file) => {
-        window.uploadedFiles[name] = file
-        return `attachment://${name}`
+        window.uploadedFiles[name] = file;
+        return `attachment://${name}`;
     }) as setFileType,
 
     scrapFiles(data: Component | Component[]): string[] {
-        if (Array.isArray(data)) return data.flatMap(obj => this.scrapFiles(obj));
+        if (Array.isArray(data)) return data.flatMap((obj) => this.scrapFiles(obj));
 
         if (data.type === ComponentType.SECTION) {
             const dataAsSection = data as SectionComponent;
-            if (dataAsSection.accessory.type !== ComponentType.THUMBNAIL) return []
+            if (dataAsSection.accessory.type !== ComponentType.THUMBNAIL) return [];
 
             const url = dataAsSection.accessory.media.url;
-            if (url.startsWith("attachment://")) return [url.slice(13)]
+            if (url.startsWith('attachment://')) return [url.slice(13)];
         } else if (data.type === ComponentType.FILE) {
             const dataAsSection = data as FileComponent;
 
             const url = dataAsSection.file.url;
-            if (url.startsWith("attachment://")) return [url.slice(13)]
+            if (url.startsWith('attachment://')) return [url.slice(13)];
         } else if (data.type === ComponentType.MEDIA_GALLERY) {
             const dataAsGallery = data as MediaGalleryComponent;
 
             return dataAsGallery.items
-                .filter(item => item.media.url.startsWith("attachment://"))
-                .map(item => item.media.url.slice(13))
+                .filter((item) => item.media.url.startsWith('attachment://'))
+                .map((item) => item.media.url.slice(13));
         } else if (data.type === ComponentType.CONTAINER) {
             const dataAsContainer = data as ContainerComponent;
-            return this.scrapFiles(dataAsContainer.components)
+            return this.scrapFiles(dataAsContainer.components);
         }
-        return []
+        return [];
     },
 
     init() {
-        if (!window.uploadedFiles) window.uploadedFiles = {}
+        if (!window.uploadedFiles) window.uploadedFiles = {};
     },
 
-
     clean(state: Component[]) {
         const files = this.scrapFiles(state);
         for (const file of Object.keys(window.uploadedFiles)) {
@@ -63,18 +62,17 @@ export const webhookImplementation = {
 
         const data = JSON.stringify({
             components: state,
-            flags: 32768
+            flags: 32768,
         });
 
-        if (!files.length) return {method: "POST", body: data, headers: {"Content-Type": "application/json"}}
+        if (!files.length) return { method: 'POST', body: data, headers: { 'Content-Type': 'application/json' } };
 
         const form = new FormData();
         form.append('payload_json', data);
         files.map((filename, idx) => {
             const blob = window.uploadedFiles[filename];
             form.append(`files[${idx}]`, blob, filename);
-        })
-        return {method: "POST", body: form, headers: {}}
-    }
-
-}
\ No newline at end of file
+        });
+        return { method: 'POST', body: form, headers: {} };
+    },
+};
diff --git a/website/tsconfig.json b/website/tsconfig.json
index b01212b..817b6f9 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,24 +1,24 @@
 {
-    "compilerOptions": {
-        "target": "ESNext",
-        "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "allowJs": false,
-        "skipLibCheck": true,
-        "esModuleInterop": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "baseUrl": ".",
-        "paths": {
-          "components-sdk": ["../components-sdk/src/index"]
-        }
-    },
-    "include": ["./src"]
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "components-sdk": ["../components-sdk/src/index"]
+    }
+  },
+  "include": ["./src"]
 }
diff --git a/website/vite.config.ts b/website/vite.config.ts
index 21d8cc8..23f1f17 100644
--- a/website/vite.config.ts
+++ b/website/vite.config.ts
@@ -1,29 +1,31 @@
-import {defineConfig} from 'vite';
+import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import {resolve} from "node:path";
+import { resolve } from 'node:path';
 import postcssNesting from 'postcss-nesting';
 
-
-export default defineConfig(({command, mode}) => ({
-    plugins: [react({
-      jsxRuntime: 'classic',
-    })],
+export default defineConfig(({ command, mode }) => ({
+    plugins: [
+        react({
+            jsxRuntime: 'classic',
+        }),
+    ],
 
     esbuild: {
-        jsxInject: `import React from 'react'`
+        jsxInject: `import React from 'react'`,
     },
-    resolve: (command === 'serve' && mode === 'development') ? {
-        // Make library auto-reload only on yarn dev
-        alias: [
-            // .* is to not double import css files
-            {find: /^components-sdk.*$/, replacement: resolve(__dirname, '../components-sdk/src')},
-        ],
-    } : undefined,
+    resolve:
+        command === 'serve' && mode === 'development'
+            ? {
+                  // Make library auto-reload only on yarn dev
+                  alias: [
+                      // .* is to not double import css files
+                      { find: /^components-sdk.*$/, replacement: resolve(__dirname, '../components-sdk/src') },
+                  ],
+              }
+            : undefined,
     css: {
         postcss: {
-            plugins: [
-                postcssNesting
-            ],
+            plugins: [postcssNesting],
         },
     },
 }));