From 3706952ad5c91e6f7dad45aa7d69d4f78ce90c46 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Wed, 14 Jan 2026 15:58:40 +0100
Subject: [PATCH 1/8] feat: add Button component and styles

---
 src/components/Button/Button.tsx |   6 ++
 src/components/Button/index.ts   |   1 +
 src/components/index.ts          |   1 +
 src/styling/Button.scss          | 131 +++++++++++++++++++++++++++++++
 src/styling/base.scss            |   9 +++
 src/styling/index.scss           |   2 +
 src/styling/utils.scss           |  14 ++++
 src/styling/variables.css        | 117 +++++++--------------------
 8 files changed, 192 insertions(+), 89 deletions(-)
 create mode 100644 src/components/Button/Button.tsx
 create mode 100644 src/components/Button/index.ts
 create mode 100644 src/styling/Button.scss
 create mode 100644 src/styling/base.scss
 create mode 100644 src/styling/utils.scss

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 000000000..35d83709d
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const Button = ({ className, ...props }: ComponentProps<'button'>) => (
+  <button {...props} className={clsx('str-chat__button', className)} />
+);
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
new file mode 100644
index 000000000..8b166a86e
--- /dev/null
+++ b/src/components/Button/index.ts
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/src/components/index.ts b/src/components/index.ts
index 9f9761d4e..268588c83 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,6 +2,7 @@ export * from './AIStateIndicator';
 export * from './Attachment';
 export * from './AudioPlayback';
 export * from './Avatar';
+export * from './Button';
 export * from './Channel';
 export * from './ChannelHeader';
 export * from './ChannelList';
diff --git a/src/styling/Button.scss b/src/styling/Button.scss
new file mode 100644
index 000000000..5ab1f1f10
--- /dev/null
+++ b/src/styling/Button.scss
@@ -0,0 +1,131 @@
+@use 'utils';
+
+.str-chat {
+  .str-chat__button {
+    @include utils.button-reset;
+    position: relative;     /* creates positioning context for pseudo ::after overlay */
+    overflow: hidden;
+
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding-inline: var(--spacing-sm);
+    padding-block: var(--spacing-sm);
+    /*
+    min-width / min-height on buttons:
+      - enforce a minimum tappable area
+      - follow accessibility & platform guidelines
+      - don’t affect layout unless the button would be too small
+      - are about usability, not design polish
+     */
+    min-height: var(--button-visual-height-lg);
+    max-height: var(--button-visual-height-lg);
+
+    line-height: var(--typography-line-height-normal);
+    border-radius: var(--button-radius-lg);
+
+    font-weight: var(--font-weight-w600);
+
+    &.str-chat__button--solid {
+      &.str-chat__button--primary {
+        background-color: var(--button-type-primary-bg);
+        color: var(--button-type-primary-text);
+        border-color: var(--button-type-primary-border);
+      }
+
+      &.str-chat__button--secondary {
+        background-color: var(--button-type-secondary-bg);
+        color: var(--button-type-secondary-text);
+        border-color: var(--button-type-secondary-border);
+      }
+
+      &.str-chat__button--destructive {
+        background-color: var(--button-type-destructive-bg);
+        color: var(--button-type-destructive-text);
+        border-color: var(--button-type-destructive-border);
+      }
+
+      &:disabled {
+        background-color: var(--state-bg-disabled);
+      }
+    }
+
+    &.str-chat__button--ghost {
+      border-color: var(--button-style-ghost-border);
+      background-color: var(--button-style-ghost-bg);
+
+      &.str-chat__button--primary {
+        color: var(--button-style-ghost-text-primary);
+      }
+
+      &.str-chat__button--secondary {
+        color: var(--button-style-ghost-text-secondary);
+      }
+
+      &.str-chat__button--destructive {
+        color: var(--button-type-destructive-text-inverse);
+      }
+    }
+
+    &.str-chat__button--outline {
+      // todo: designs not available
+      //&.str-chat__button--primary {
+      //  background-color: var(--button-type-primary-bg);
+      //  color: var(--button-type-primary-text);
+      //  border-color: var(--button-type-primary-border);
+      //}
+
+      &.str-chat__button--secondary {
+        background-color: var(--button-style-outline-bg);
+        color: var(--button-style-outline-text);
+        border-color: var(--button-style-outline-border);
+      }
+
+      // todo: designs not available
+      &.str-chat__button--destructive {
+        //background-color: var(--button-type-destructive-bg);
+        color: var(--button-type-destructive-text-inverse);
+        //border-color: var(--button-type-destructive-border);
+      }
+    }
+
+    &.str-chat__button--solid,
+    &.str-chat__button--ghost {
+      &:disabled {
+        border: none;
+      }
+    }
+
+    &.str-chat__button--solid,
+    &.str-chat__button--outline,
+    &.str-chat__button--ghost {
+      border-width: 1px;
+      border-style: solid;
+
+
+      &:not(:disabled):hover {
+        @include utils.overlay-after(0.05);
+      }
+
+      &:not(:disabled):active { // pressed
+        @include utils.overlay-after(0.10);
+      }
+
+      &:not(:disabled):focus-visible { // focused
+        outline: 2px solid  var(--border-utility-focus);
+      }
+
+      &:disabled {
+        color: var(--state-text-disabled);
+        cursor: default;
+      }
+    }
+
+    &.str-chat__button--floating {
+      box-shadow: var(--light-elevation-3);
+    }
+  }
+}
+
diff --git a/src/styling/base.scss b/src/styling/base.scss
new file mode 100644
index 000000000..4d5a4771b
--- /dev/null
+++ b/src/styling/base.scss
@@ -0,0 +1,9 @@
+.str-chat {
+  box-sizing: border-box;
+  font-family: var(--typography-font-family-sans), system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
+  font-size: var(--typography-font-size-md);
+
+  * {
+    box-sizing: border-box;
+  }
+}
\ No newline at end of file
diff --git a/src/styling/index.scss b/src/styling/index.scss
index 5b1b2777d..a5263bc0d 100644
--- a/src/styling/index.scss
+++ b/src/styling/index.scss
@@ -1,2 +1,4 @@
+@use "./base";
 @use "./variables.css";
+@use "./Button";
 @import 'modern-normalize' layer(css-reset);
diff --git a/src/styling/utils.scss b/src/styling/utils.scss
new file mode 100644
index 000000000..8a511919c
--- /dev/null
+++ b/src/styling/utils.scss
@@ -0,0 +1,14 @@
+@mixin button-reset {
+  background: none;
+  border: none;
+}
+
+@mixin overlay-after($opacity, $color: black) {
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba($color, $opacity);
+    pointer-events: none;
+  }
+}
\ No newline at end of file
diff --git a/src/styling/variables.css b/src/styling/variables.css
index d8b74275a..8772e9231 100644
--- a/src/styling/variables.css
+++ b/src/styling/variables.css
@@ -115,7 +115,7 @@
     --size-480: 480px;
     --size-560: 560px;
     --size-640: 640px;
-    --radius-0: 0px;
+    --radius-0: 0;
     --radius-2: 2px;
     --radius-4: 4px;
     --radius-6: 6px;
@@ -126,7 +126,7 @@
     --radius-24: 24px;
     --radius-32: 32px;
     --radius-full: 9999px;
-    --space-0: 0px;
+    --space-0: 0;
     --space-2: 2px;
     --space-4: 4px;
     --space-8: 8px;
@@ -139,22 +139,22 @@
     --space-48: 48px;
     --space-64: 64px;
     --space-80: 80px;
-    --w100: 1px;
-    --w150: 1.5px;
-    --w200: 2px;
-    --w300: 3px;
-    --w400: 4px;
-    --w120: 1.2px;
+    --w100: 1;
+    --w150: 1.5;
+    --w200: 2;
+    --w300: 3;
+    --w400: 400;
+    --w120: 1.2;
     --font-family-geist: "Geist"; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
     --font-family-geist-mono: "Geist Mono"; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
     --font-family-sf-pro: "SF Pro"; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
     --font-family-sf-mono: "SF Mono"; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
     --font-family-roboto: "Roboto"; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */
     --font-family-roboto-mono: "Roboto Mono"; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */
-    --font-weight-400: 400;
-    --font-weight-500: 500;
-    --font-weight-600: 600;
-    --font-weight-700: 700;
+    --font-weight-w400: 400;
+    --font-weight-w500: 500;
+    --font-weight-w600: 600;
+    --font-weight-w700: 700;
     --font-size-size-10: 10px;
     --font-size-size-12: 12px;
     --font-size-size-14: 14px;
@@ -183,81 +183,20 @@
     --line-height-line-height-32: 32;
     --line-height-line-height-40: 40;
     --line-height-line-height-48: 48;
-    --typography-letter-spacing-default: 0; /** Standard tracking for all body text, UI labels, and headings. Used as the baseline spacing for all semantic text styles. */
-    --typography-letter-spacing-wide: 0.5px; /** Slightly increased tracking for uppercase labels, tags, chips, and micro text to improve clarity and visual balance. Used sparingly for emphasis or small typographic elements. */
-    --typography-font-weight-400: 400;
-    --typography-font-weight-500: 500;
-    --typography-font-weight-600: 600;
-    --typography-font-weight-700: 700;
-    /**
-     * - Base elevation level.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation of the system shadow and may not be exact.
-     */
-    --elevation-light-elevation-0: 0px 0px 0px rgba(0,0,0,0);
-    /**
-     * - Low elevation level for subtle separation.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation of the system shadow and may not be exact.
-     */
-    --elevation-light-elevation-1: 0px 1px 2px rgba(0,0,0,0.10), 0px 4px 8px rgba(0,0,0,0.06);
-    /**
-     * - Medium elevation level for raised surfaces.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation and may not be exact.
-     */
-    --elevation-light-elevation-2: 0px 2px 4px rgba(0,0,0,0.12), 0px 6px 16px rgba(0,0,0,0.06);
-    /**
-     * - High elevation level for floating surfaces.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation and may not be exact.
-     */
-    --elevation-light-elevation-3: 0px 4px 8px rgba(0,0,0,0.14), 0px 12px 24px rgba(0,0,0,0.10);
-    /**
-     * - Maximum elevation level for prominent overlays.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation and may not be exact.
-     */
-    --elevation-light-elevation-4: 0px 6px 12px rgba(0,0,0,0.16), 0px 20px 32px rgba(0,0,0,0.12);
-    /**
-     * - Base elevation level.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation of the system shadow and may not be exact.
-     */
-    --elevation-dark-elevation-0: 0px 0px 0px rgba(0,0,0,0);
-    /**
-     * - Low elevation level for subtle separation.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation of the system shadow and may not be exact.
-     */
-    --elevation-dark-elevation-1: 0px 1px 2px rgba(0,0,0,0.20), 0px 4px 8px rgba(0,0,0,0.10);
-    /**
-     * - Medium elevation level for raised surfaces.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation and may not be exact.
-     */
-    --elevation-dark-elevation-2: 0px 2px 4px rgba(0,0,0,0.22), 0px 6px 16px rgba(0,0,0,0.12);
-    /**
-     * - High elevation level for floating surfaces.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation and may not be exact.
-     */
-    --elevation-dark-elevation-3: 0px 4px 8px rgba(0,0,0,0.24), 0px 12px 24px rgba(0,0,0,0.14);
-    /**
-     * - Maximum elevation level for prominent overlays.
-     * - Android uses system elevation and renders shadows automatically.
-     * - The Figma effect style is a visual approximation and may not be exact.
-     */
-    --elevation-dark-elevation-4: 0px 6px 12px rgba(0,0,0,0.28), 0px 20px 32px rgba(0,0,0,0.16);
-    --opacity-opacity-0: 0; /** Fully transparent. Used for off-screen or hidden elements. */
-    --opacity-opacity-5: 5; /** Extremely subtle overlays, faint borders, or pressed states in dark mode. */
-    --opacity-opacity-10: 10; /** Light overlays, subtle strokes, divider enhancements. */
-    --opacity-opacity-20: 20; /** Hover states, subtle scrims, focus-ring backgrounds. */
-    --opacity-opacity-40: 40; /** Disabled text or icons, low-contrast UI elements. */
-    --opacity-opacity-60: 60; /** Strongers scrims, overlay masks behind modals. */
-    --opacity-opacity-80: 80; /** Dimmed background behind full-screen overlays. */
-    --opacity-opacity-100: 100; /** Fully opaque. */
-    --device-radius: 8px;
+    --light-elevation-0: 0 0 0 0 rgba(0,0,0,0); /** Base elevation level. */
+    --light-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.06); /** Low elevation level for subtle separation. */
+    --light-elevation-2: 0 2px 4px 0 rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.06);
+    --light-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.14), 0 12px 24px 0 rgba(0,0,0,0.1);
+    --light-elevation-4: 0 6px 12px 0 rgba(0,0,0,0.16), 0 20px 32px 0 rgba(0,0,0,0.12);
+    --dark-elevation-0: 0 0 0 0 rgba(0,0,0,0);
+    --dark-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.1);
+    --dark-elevation-2: 0 2px 4px 0 rgba(0,0,0,0.22), 0 6px 16px 0 rgba(0,0,0,0.12);
+    --dark-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.24), 0 12px 24px 0 rgba(0,0,0,0.14);
+    --dark-elevation-4: 0 6px 12px 0 rgba(0,0,0,0.28), inset 0 20px 32px 0 rgba(0,0,0,0.16);
+    --w500: 500;
+    --w600: 600;
+    --w700: 700;
+    --device-radius: 0.5rem;
     --state-hover: rgba(0, 0, 0, 0.05); /** Hover feedback overlay. */
     --state-pressed: rgba(0, 0, 0, 0.1); /** Pressed feedback overlay. */
     --state-selected: rgba(0, 0, 0, 0.1); /** Selected overlay. */
@@ -311,7 +250,6 @@
     --button-visual-height-lg: var(--size-48);
     --button-hit-target-min-height: var(--size-32);
     --button-hit-target-min-width: var(--size-32);
-    --button-type-primary-text: var(--base-white);
     --button-type-secondary-bg: var(--base-transparent);
     --button-type-destructive-text: var(--base-white);
     --button-style-ghost-bg: var(--base-transparent);
@@ -417,12 +355,13 @@
     --composer-radius-floating: var(--radius-3xl);
     --composer-bg: var(--background-elevation-elevation-1); /** Composer container background. */
     --button-type-primary-bg: var(--accent-primary);
+    --button-type-primary-text: var(--text-on-accent);
     --button-type-primary-border: var(--border-core-primary);
     --button-type-secondary-text: var(--text-primary);
     --button-type-secondary-border: var(--border-core-surface-subtle);
     --button-type-destructive-bg: var(--accent-error);
-    --button-type-destructive-border: var(--accent-error);
     --button-type-destructive-text-inverse: var(--accent-error);
+    --button-type-destructive-border: var(--accent-error);
     --button-style-ghost-text-primary: var(--accent-primary);
     --button-style-ghost-text-secondary: var(--text-primary);
     --button-style-outline-border: var(--border-core-surface-subtle);

From 3eaa8a63d897847a20d3acb6ac694485b76a7b09 Mon Sep 17 00:00:00 2001
From: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
Date: Wed, 14 Jan 2026 16:34:26 +0100
Subject: [PATCH 2/8] fix(Button): make it type="button" by default

Co-authored-by: Oliver Lazoroski <oliver.lazoroski@gmail.com>
---
 src/components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 35d83709d..5af2fe50f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -2,5 +2,5 @@ import type { ComponentProps } from 'react';
 import clsx from 'clsx';
 
 export const Button = ({ className, ...props }: ComponentProps<'button'>) => (
-  <button {...props} className={clsx('str-chat__button', className)} />
+  <button type="button" {...props} className={clsx('str-chat__button', className)} />
 );

From 9ced247e1c6eed8d2e09f7380df58f3dfa656c43 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 15 Jan 2026 10:17:41 +0100
Subject: [PATCH 3/8] refactor: move Buttons.scss next to the corresponding
 React component

---
 src/components/Button/Button.tsx                | 2 +-
 src/{ => components/Button}/styling/Button.scss | 4 ++--
 src/styling/index.scss                          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename src/{ => components/Button}/styling/Button.scss (98%)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 5af2fe50f..a0c82d2ce 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -2,5 +2,5 @@ import type { ComponentProps } from 'react';
 import clsx from 'clsx';
 
 export const Button = ({ className, ...props }: ComponentProps<'button'>) => (
-  <button type="button" {...props} className={clsx('str-chat__button', className)} />
+  <button type='button' {...props} className={clsx('str-chat__button', className)} />
 );
diff --git a/src/styling/Button.scss b/src/components/Button/styling/Button.scss
similarity index 98%
rename from src/styling/Button.scss
rename to src/components/Button/styling/Button.scss
index 5ab1f1f10..e98247c61 100644
--- a/src/styling/Button.scss
+++ b/src/components/Button/styling/Button.scss
@@ -1,4 +1,4 @@
-@use 'utils';
+@use '../../../styling/utils';
 
 .str-chat {
   .str-chat__button {
@@ -11,7 +11,7 @@
     display: flex;
     align-items: center;
     gap: var(--spacing-xs);
-    padding-inline: var(--spacing-sm);
+    padding-inline: var(--spacing-md);
     padding-block: var(--spacing-sm);
     /*
     min-width / min-height on buttons:
diff --git a/src/styling/index.scss b/src/styling/index.scss
index a5263bc0d..78c57a340 100644
--- a/src/styling/index.scss
+++ b/src/styling/index.scss
@@ -1,4 +1,4 @@
 @use "./base";
 @use "./variables.css";
-@use "./Button";
+@use "../components/Button/styling/Button";
 @import 'modern-normalize' layer(css-reset);

From dd43ae90a3e38e2f822a3bf3638d14b418f43c67 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 15 Jan 2026 11:56:17 +0100
Subject: [PATCH 4/8] fix: remove Button padding for now

---
 src/components/Button/styling/Button.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/styling/Button.scss b/src/components/Button/styling/Button.scss
index e98247c61..4c4f8a7b8 100644
--- a/src/components/Button/styling/Button.scss
+++ b/src/components/Button/styling/Button.scss
@@ -10,9 +10,10 @@
 
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: var(--spacing-xs);
-    padding-inline: var(--spacing-md);
-    padding-block: var(--spacing-sm);
+    //padding-inline: var(--spacing-md);
+    //padding-block: var(--spacing-sm);
     /*
     min-width / min-height on buttons:
       - enforce a minimum tappable area

From c7efc045a6c73e6d8bd42cf772db96ca02aaaa4f Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 15 Jan 2026 11:56:51 +0100
Subject: [PATCH 5/8] chore: remove --declarationMap from "start" script

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a157a1c7e..884c1978d 100644
--- a/package.json
+++ b/package.json
@@ -234,7 +234,7 @@
     "prettier": "prettier '**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}'",
     "prettier-fix": "yarn prettier --write",
     "fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
-    "start": "tsc --watch --sourceMap --declarationMap",
+    "start": "tsc --watch --sourceMap",
     "start:css": "sass --watch src/styling/index.scss dist/css/index.css",
     "prepare": "husky install",
     "preversion": "yarn install",

From 06487fa5aad9dd249a62e36326d064e94aca110e Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 15 Jan 2026 11:57:59 +0100
Subject: [PATCH 6/8] feat: add Icons as React components

---
 src/components/Icons/IconMicrophone.tsx         | 17 +++++++++++++++++
 src/components/Icons/IconPaperPlane.tsx         | 17 +++++++++++++++++
 src/components/Icons/IconPlus.tsx               | 14 ++++++++++++++
 src/components/Icons/index.ts                   |  2 ++
 .../Icons/styling/IconMicrophone.scss           |  7 +++++++
 .../Icons/styling/IconPaperPlane.scss           |  7 +++++++
 src/components/Icons/styling/IconPlus.scss      |  7 +++++++
 src/components/Icons/styling/index.scss         |  1 +
 src/components/index.ts                         |  1 +
 src/styling/index.scss                          |  6 ++++++
 10 files changed, 79 insertions(+)
 create mode 100644 src/components/Icons/IconMicrophone.tsx
 create mode 100644 src/components/Icons/IconPaperPlane.tsx
 create mode 100644 src/components/Icons/IconPlus.tsx
 create mode 100644 src/components/Icons/index.ts
 create mode 100644 src/components/Icons/styling/IconMicrophone.scss
 create mode 100644 src/components/Icons/styling/IconPaperPlane.scss
 create mode 100644 src/components/Icons/styling/IconPlus.scss
 create mode 100644 src/components/Icons/styling/index.scss

diff --git a/src/components/Icons/IconMicrophone.tsx b/src/components/Icons/IconMicrophone.tsx
new file mode 100644
index 000000000..bd9dda0d7
--- /dev/null
+++ b/src/components/Icons/IconMicrophone.tsx
@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const IconMicrophone = ({ className, ...props }: ComponentProps<'svg'>) => (
+  <svg
+    stroke='currentColor'
+    viewBox='0 0 20 20'
+    {...props}
+    className={clsx('str-chat__icon--microphone', className)}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M10.0007 15.8332C12.5637 15.8332 14.7662 14.2906 15.7307 12.0832M10.0007 15.8332C7.43788 15.8332 5.23527 14.2906 4.27083 12.0832M10.0007 15.8332V17.7082M10.0007 13.1248C8.04476 13.1248 6.4591 11.5392 6.4591 9.58317V5.83317C6.4591 3.87716 8.04476 2.2915 10.0007 2.2915C11.9567 2.2915 13.5424 3.87716 13.5424 5.83317V9.58317C13.5424 11.5392 11.9567 13.1248 10.0007 13.1248Z'
+      stroke='#384047'
+    />
+  </svg>
+);
diff --git a/src/components/Icons/IconPaperPlane.tsx b/src/components/Icons/IconPaperPlane.tsx
new file mode 100644
index 000000000..ae5946cf1
--- /dev/null
+++ b/src/components/Icons/IconPaperPlane.tsx
@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const IconPaperPlane = ({ className, ...props }: ComponentProps<'svg'>) => (
+  <svg
+    stroke='currentColor'
+    viewBox='0 0 20 20'
+    {...props}
+    className={clsx('str-chat__icon--paper-plane', className)}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M5.00006 9.99996H7.70839M5.00006 9.99996L2.81084 4.05778C2.54981 3.34929 3.29014 2.68668 3.96546 3.02433L16.426 9.25463C17.0402 9.56171 17.0402 10.4382 16.426 10.7453L3.96546 16.9756C3.29014 17.3133 2.54981 16.6506 2.81084 15.9421L5.00006 9.99996Z'
+      stroke='white'
+    />
+  </svg>
+);
diff --git a/src/components/Icons/IconPlus.tsx b/src/components/Icons/IconPlus.tsx
new file mode 100644
index 000000000..e1b8c434b
--- /dev/null
+++ b/src/components/Icons/IconPlus.tsx
@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const IconPlus = ({ className, ...props }: ComponentProps<'svg'>) => (
+  <svg
+    stroke='currentColor'
+    viewBox='0 0 16 16'
+    {...props}
+    className={clsx('str-chat__icon--plus', className)}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='M7.625 0.75V7.625M7.625 7.625V14.5M7.625 7.625H0.75M7.625 7.625H14.5' />
+  </svg>
+);
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
new file mode 100644
index 000000000..8b35066c2
--- /dev/null
+++ b/src/components/Icons/index.ts
@@ -0,0 +1,2 @@
+export * from './IconMicrophone';
+export * from './IconPlus';
diff --git a/src/components/Icons/styling/IconMicrophone.scss b/src/components/Icons/styling/IconMicrophone.scss
new file mode 100644
index 000000000..9994a1ec7
--- /dev/null
+++ b/src/components/Icons/styling/IconMicrophone.scss
@@ -0,0 +1,7 @@
+.str-chat {
+  .str-chat__icon--microphone {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Icons/styling/IconPaperPlane.scss b/src/components/Icons/styling/IconPaperPlane.scss
new file mode 100644
index 000000000..ad6449b71
--- /dev/null
+++ b/src/components/Icons/styling/IconPaperPlane.scss
@@ -0,0 +1,7 @@
+.str-chat {
+  .str-chat__icon--paper-plane {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Icons/styling/IconPlus.scss b/src/components/Icons/styling/IconPlus.scss
new file mode 100644
index 000000000..6e4e4ab62
--- /dev/null
+++ b/src/components/Icons/styling/IconPlus.scss
@@ -0,0 +1,7 @@
+.str-chat {
+  .str-chat__icon--plus {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Icons/styling/index.scss b/src/components/Icons/styling/index.scss
new file mode 100644
index 000000000..6ef9491b8
--- /dev/null
+++ b/src/components/Icons/styling/index.scss
@@ -0,0 +1 @@
+@use 'IconPlus';
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 268588c83..a4eb6d97d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,6 +14,7 @@ export * from './Dialog';
 export * from './EmptyStateIndicator';
 export * from './EventComponent';
 export * from './Gallery';
+export * from './Icons';
 export * from './InfiniteScrollPaginator';
 export * from './Loading';
 export * from './LoadMore';
diff --git a/src/styling/index.scss b/src/styling/index.scss
index 78c57a340..c40c37006 100644
--- a/src/styling/index.scss
+++ b/src/styling/index.scss
@@ -1,4 +1,10 @@
+// Base styles
 @use "./base";
 @use "./variables.css";
+@use "../components/Icons/styling";
+
+// Base components with base styles
 @use "../components/Button/styling/Button";
+
+// Layers have to be kept the last
 @import 'modern-normalize' layer(css-reset);

From 34c14a481e6f87f85bbbdc11bdb2d518c22aa1dc Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 15 Jan 2026 11:58:43 +0100
Subject: [PATCH 7/8] fix: adjust manually CSS variable
 --button-hit-target-min-height value for now

---
 src/styling/variables.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styling/variables.css b/src/styling/variables.css
index 8772e9231..d98c7e512 100644
--- a/src/styling/variables.css
+++ b/src/styling/variables.css
@@ -248,8 +248,8 @@
     --button-visual-height-sm: var(--size-32);
     --button-visual-height-md: var(--size-40);
     --button-visual-height-lg: var(--size-48);
-    --button-hit-target-min-height: var(--size-32);
-    --button-hit-target-min-width: var(--size-32);
+    --button-hit-target-min-height: var(--size-48); /* manually adjusted */
+    --button-hit-target-min-width: var(--size-48); /* manually adjusted */
     --button-type-secondary-bg: var(--base-transparent);
     --button-type-destructive-text: var(--base-white);
     --button-style-ghost-bg: var(--base-transparent);

From 0b3cbcdac3be0d9ec3b4021e9f659567f9253979 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 15 Jan 2026 12:02:53 +0100
Subject: [PATCH 8/8] fix: remove box-sizing rules from base.scss

---
 src/styling/base.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/styling/base.scss b/src/styling/base.scss
index 4d5a4771b..bfa3b0582 100644
--- a/src/styling/base.scss
+++ b/src/styling/base.scss
@@ -1,9 +1,4 @@
 .str-chat {
-  box-sizing: border-box;
   font-family: var(--typography-font-family-sans), system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
   font-size: var(--typography-font-size-md);
-
-  * {
-    box-sizing: border-box;
-  }
 }
\ No newline at end of file