From 3e62507b481862f1a126d46af75f44554d0b73e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Wlekli=C5=84ski?=
 <114148518+mwleklinskiVL@users.noreply.github.com>
Date: Fri, 3 Nov 2023 13:39:03 +0100
Subject: [PATCH] Chore/review components (#93)

* chore: NO-JIRA fix correct type when importing package

* chore: TET-400 fix SocialIcons size

* chore: TET-396 RadioButton corrections

* chore: TET-383 fix Avatar correction

* chore: TET-405 change StatusDot stroked to hasStroke

* fix: TET-405 StatusDot Test fix

* fix: TET-385 fix Button

* fix: TET-398 clear button in TextInput

* fix: TET-403 change helperText beforeIcon to hasBeforeIcon

* fix: TET-382 change AlerBanner Positive to Success intent

* fix: TET-384 add wrapper for vertical divider

* fix: TET-402 fix height of the toast

* fix: TET-402 change location of typo in config Toast

* fix: TET-395 change size of a ring to smaller (from 2px to 1px)

* fix: TET-384 grid presentation and emphasis order

* fix: TET-384 change color of border Badge

* fix: TET-390 fix presentation of an IconButton, fix BareButton

* fix: TET-386 adjust Checkbox component

* feat: TET-399 extract useTextInput hook and use it to create Select component

* chore: NO-JIRA add bg to text Input

* fix: NO-JIRA fix export file

* chore: NO-JIRA: change React.FC to FC

* chore: NO-JIRA update readme
---
 README.md                                     | 35 +++++++
 package.json                                  |  2 +-
 .../AlertBanner/AlertBanner.stories.tsx       |  9 +-
 .../AlertBanner/AlertBanner.styles.ts         | 10 +-
 .../AlertBanner/AlertBanner.test.tsx          |  4 +-
 .../types/AlertBannerIntent.type.ts           |  2 +-
 src/components/Avatar/Avatar.stories.tsx      |  5 +-
 src/components/Avatar/Avatar.styles.ts        |  2 +-
 src/components/Avatar/Avatar.tsx              |  2 +-
 .../Avatar/types/AvatarAppearance.type.ts     | 35 +++----
 src/components/Badge/Badge.stories.tsx        |  9 ++
 src/components/Badge/Badge.styles.ts          |  2 +-
 src/components/Badge/Badge.tsx                |  6 +-
 src/components/Button/Button.stories.tsx      | 10 ++
 src/components/Button/Button.styles.ts        |  4 +-
 src/components/Button/Button.tsx              |  6 +-
 .../stylesBuilder/stylesBuilder.test.ts       |  2 +-
 src/components/Checkbox/Checkbox.props.ts     |  9 +-
 src/components/Checkbox/Checkbox.stories.tsx  | 13 ++-
 src/components/Checkbox/Checkbox.test.tsx     | 23 +++--
 src/components/Checkbox/Checkbox.tsx          | 16 +++-
 .../CheckboxGroup/CheckboxGroup.tsx           | 14 ++-
 src/components/Counter/Counter.tsx            |  2 +-
 src/components/Divider/Divider.stories.tsx    |  5 +
 src/components/Divider/Divider.tsx            |  2 +-
 src/components/HelperText/HelperText.props.ts |  2 +-
 .../HelperText/HelperText.stories.tsx         |  2 +-
 src/components/HelperText/HelperText.test.tsx | 10 +-
 src/components/HelperText/HelperText.tsx      |  4 +-
 .../IconButton/IconButton.styles.ts           |  6 +-
 src/components/IconButton/IconButton.tsx      |  6 +-
 .../InlineBanner/InlineBanner.styles.ts       |  1 +
 src/components/InlineBanner/InlineBanner.tsx  |  9 +-
 .../InlineMessage/InlineMessage.tsx           |  6 +-
 .../InlineSearchInput/InlineSearchInput.tsx   |  6 +-
 src/components/Label/Label.tsx                |  4 +-
 src/components/Loader/Loader.tsx              | 10 +-
 src/components/Popover/Popover.styles.ts      |  2 +-
 src/components/Popover/Popover.tsx            |  2 +-
 .../RadioButton/RadioButton.stories.tsx       |  1 +
 src/components/RadioButton/RadioButton.tsx    | 22 ++++-
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  8 +-
 src/components/SearchInput/SearchInput.tsx    |  8 +-
 src/components/Select/Select.test.tsx         |  6 +-
 src/components/Select/Select.tsx              | 92 +++++++++++++++++--
 src/components/SocialButton/SocialButton.tsx  |  2 +-
 src/components/SocialButton/socials/Apple.tsx |  4 +-
 .../SocialButton/socials/Facebook.tsx         | 14 +--
 src/components/SocialButton/socials/Figma.tsx | 22 ++---
 .../SocialButton/socials/Github.tsx           |  4 +-
 .../SocialButton/socials/Google.tsx           | 20 ++--
 .../SocialButton/socials/Twitter.tsx          |  4 +-
 .../SocialButton/socials/WithLoader.tsx       |  2 +-
 .../SocialButton/socials/socials.ts           |  6 +-
 src/components/StatusDot/StatusDot.props.ts   |  3 +-
 .../StatusDot/StatusDot.stories.tsx           |  4 +-
 src/components/StatusDot/StatusDot.styles.ts  |  4 +-
 src/components/StatusDot/StatusDot.test.tsx   |  4 +-
 src/components/StatusDot/StatusDot.tsx        |  8 +-
 .../StatusDot/stylesBuilder/stylesBuilder.ts  |  8 +-
 src/components/Tag/Tag.tsx                    | 10 +-
 src/components/TextInput/TextInput.styles.ts  |  1 +
 src/components/TextInput/TextInput.tsx        | 64 ++++---------
 src/components/TextInput/useTextInput.ts      | 67 ++++++++++++++
 src/components/Toast/Toast.styles.ts          |  4 +-
 src/components/Toast/Toast.tsx                |  2 +-
 .../Toast/stylesBuilder/stylesBuilder.ts      |  8 +-
 src/docs-components/AlertBannerDocs.tsx       |  8 +-
 src/docs-components/AvatarDocs.tsx            |  4 +-
 src/docs-components/BadgeDocs.tsx             | 60 +++++++-----
 src/docs-components/ButtonDocs/ButtonDocs.tsx |  4 +-
 src/docs-components/ButtonDocs/ButtonRow.tsx  |  2 +-
 src/docs-components/CheckboxDocs.tsx          | 58 +++++++-----
 src/docs-components/HelperTextDocs.tsx        |  2 +-
 src/docs-components/IconButtonDocs.tsx        |  1 +
 src/docs-components/RadioButtonDocs.tsx       | 35 ++++---
 src/docs-components/StatusDotDocs.tsx         |  2 +-
 src/docs-components/TagDocs.tsx               |  4 +-
 src/docs-components/TetDocs.tsx               |  2 +-
 src/docs-components/common/Cols.tsx           |  8 +-
 src/docs-components/common/Hero.tsx           |  2 +-
 src/docs-components/common/SectionHeader.tsx  |  8 +-
 src/docs-components/common/States.tsx         | 52 +++++++----
 src/index.ts                                  |  1 +
 84 files changed, 626 insertions(+), 328 deletions(-)
 create mode 100644 src/components/TextInput/useTextInput.ts

diff --git a/README.md b/README.md
index cd335c65..15780f65 100644
--- a/README.md
+++ b/README.md
@@ -191,6 +191,41 @@ If you want to dive deeper into the components Tetrisly offers, check out our of
 
 You can also check out our Storybook, which is our Documentation for React components (now in progress): [Tetrisly Storybook](https://virtuslab.github.io/tetrisly-react/?path=/docs/alertbanner--docs)
 
+## Customization
+
+All Tetrisly components have a `custom` prop. It makes it possible to customize the component without the need to create a new one. Below you can see an example of Button customization
+
+### Button
+
+If you want to change any of button styles, you can make it by passing custom props with object based on
+specific component config.
+
+For instance, to change background-color of appereance="primary" intent="secondary" variant to pink, just pass
+refferenced object structure:
+
+```jsx
+<Button
+  label="Button label"
+  appearance="primary"
+  intent="success"
+  custom={{
+    variants: {
+      appearance: {
+        primary: {
+          intent: {
+            success: {
+              backgroundColor: 'raspberry-0', // you can also pass any color value not included in default theme
+            },
+          },
+        },
+      },
+    },
+  }}
+/>
+```
+
+we are still working on it, thanks for your feedback here!
+
 ### Useful links
 
 - [Tetrisly Storybook](https://storybook.tetrisly.com/)
diff --git a/package.json b/package.json
index 70abdb2e..ef691bdb 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
   "exports": {
     ".": {
       "import": "./dist/tetrisly-react.es.js",
-      "require": "./dist/tetrisly-react.umd.cjs"
+      "require": "./dist/tetrisly-react.umd.js"
     }
   },
   "repository": {
diff --git a/src/components/AlertBanner/AlertBanner.stories.tsx b/src/components/AlertBanner/AlertBanner.stories.tsx
index ff3b4261..a09c883d 100644
--- a/src/components/AlertBanner/AlertBanner.stories.tsx
+++ b/src/components/AlertBanner/AlertBanner.stories.tsx
@@ -23,6 +23,13 @@ const meta = {
       },
     ],
   },
+  argTypes: {
+    intent: {
+      options: ['none', 'success', 'warning', 'negative'],
+      defaultValue: 'none',
+      control: { type: 'radio' },
+    },
+  },
   parameters: {
     docs: {
       description: {
@@ -46,7 +53,7 @@ export const Default: Story = {};
 
 export const Positive: Story = {
   args: {
-    intent: 'positive',
+    intent: 'success',
   },
 };
 
diff --git a/src/components/AlertBanner/AlertBanner.styles.ts b/src/components/AlertBanner/AlertBanner.styles.ts
index 4ec1bba4..2de57dba 100644
--- a/src/components/AlertBanner/AlertBanner.styles.ts
+++ b/src/components/AlertBanner/AlertBanner.styles.ts
@@ -23,7 +23,7 @@ export const defaultConfig = {
       backgroundColor: '$color-background-neutral-strong',
       color: '$color-content-primary-inverted',
     },
-    positive: {
+    success: {
       backgroundColor: '$color-background-positive-strong',
       color: '$color-content-primary-inverted',
     },
@@ -53,13 +53,13 @@ export const defaultConfig = {
   },
 } satisfies AlertBannerConfig;
 
-export const resolveIconName = (intent: AlertBannerIntent): IconName<20> => {
-  const iconConfig: Record<AlertBannerIntent, IconName<20>> = {
+export const resolveIconName = (intent: AlertBannerIntent) => {
+  const iconConfig = {
     none: '20-info-fill',
-    positive: '20-info-fill',
+    success: '20-check-circle-fill',
     warning: '20-warning-fill',
     negative: '20-alert-fill',
-  };
+  } satisfies Record<AlertBannerIntent, IconName<20>>;
 
   return iconConfig[intent];
 };
diff --git a/src/components/AlertBanner/AlertBanner.test.tsx b/src/components/AlertBanner/AlertBanner.test.tsx
index af0d8dc0..b11e30f1 100644
--- a/src/components/AlertBanner/AlertBanner.test.tsx
+++ b/src/components/AlertBanner/AlertBanner.test.tsx
@@ -53,9 +53,9 @@ describe('AlertBanner', () => {
     expect(alertBanner).toHaveStyle('background-color: rgb(85, 95, 109);');
   });
 
-  it('should render correct intent color (positive)', () => {
+  it('should render correct intent color (success)', () => {
     const alertBanner = getAlertBanner(
-      <AlertBanner text="Alert" intent="positive" />,
+      <AlertBanner text="Alert" intent="success" />,
     );
     expect(alertBanner).toHaveStyle('color: rgb(255,255,255);');
     expect(alertBanner).toHaveStyle('background-color:  rgb(29, 124, 77);');
diff --git a/src/components/AlertBanner/types/AlertBannerIntent.type.ts b/src/components/AlertBanner/types/AlertBannerIntent.type.ts
index 67b0d85d..ba47c21d 100644
--- a/src/components/AlertBanner/types/AlertBannerIntent.type.ts
+++ b/src/components/AlertBanner/types/AlertBannerIntent.type.ts
@@ -1 +1 @@
-export type AlertBannerIntent = 'none' | 'positive' | 'warning' | 'negative';
+export type AlertBannerIntent = 'none' | 'success' | 'warning' | 'negative';
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
index 62ce878b..bf2e0094 100644
--- a/src/components/Avatar/Avatar.stories.tsx
+++ b/src/components/Avatar/Avatar.stories.tsx
@@ -17,9 +17,12 @@ const meta = {
     img: { if: { arg: 'appearance', eq: 'image' } },
     initials: { if: { arg: 'appearance', neq: 'image' } },
     emphasis: { if: { arg: 'appearance', neq: 'image' } },
+    appearance: {
+      options: appearances,
+      control: { type: 'select' },
+    },
   },
   parameters: {
-    controls: { sort: 'alpha' },
     docs: {
       description: {
         component:
diff --git a/src/components/Avatar/Avatar.styles.ts b/src/components/Avatar/Avatar.styles.ts
index 59f6e2f1..97219011 100644
--- a/src/components/Avatar/Avatar.styles.ts
+++ b/src/components/Avatar/Avatar.styles.ts
@@ -119,7 +119,7 @@ export const defaultConfig = {
     orange: {
       emphasis: {
         high: {
-          color: '$color-nonSemantic-white-content-primary',
+          color: '$color-nonSemantic-grey-content-primary',
           backgroundColor: '$color-nonSemantic-orange-background-strong',
         },
         low: {
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index dcfc429d..8eeabe13 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { AvatarProps } from './Avatar.props';
 import { stylesBuilder } from './stylesBuilder';
diff --git a/src/components/Avatar/types/AvatarAppearance.type.ts b/src/components/Avatar/types/AvatarAppearance.type.ts
index e25e7f97..00108887 100644
--- a/src/components/Avatar/types/AvatarAppearance.type.ts
+++ b/src/components/Avatar/types/AvatarAppearance.type.ts
@@ -1,17 +1,20 @@
-export type AvatarAppearanceColors =
-  | 'blue'
-  | 'green'
-  | 'grey'
-  | 'red'
-  | 'orange'
-  | 'raspberry'
-  | 'magenta'
-  | 'purple'
-  | 'grape'
-  | 'violet'
-  | 'cyan'
-  | 'teal'
-  | 'aquamarine'
-  | 'emerald';
+export const avatarAppearanceColors = [
+  'blue',
+  'green',
+  'grey',
+  'red',
+  'orange',
+  'raspberry',
+  'magenta',
+  'purple',
+  'grape',
+  'violet',
+  'cyan',
+  'teal',
+  'aquamarine',
+  'emerald',
+] as const;
 
-export type AvatarAppearance = AvatarAppearanceColors | 'image';
+export type AvatarAppearanceColors = (typeof avatarAppearanceColors)[number];
+
+export type AvatarAppearance = 'image' | AvatarAppearanceColors;
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 01acc2f7..21cc936a 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Badge } from './Badge';
+import type { BadgeEmphasis } from './BadgeEmphasis.type';
 
 import { BadgeDocs } from '@/docs-components/BadgeDocs';
 import { TetDocs } from '@/docs-components/TetDocs';
@@ -9,6 +10,14 @@ const meta = {
   title: 'Badge',
   component: Badge,
   tags: ['autodocs'],
+  argTypes: {
+    emphasis: {
+      control: {
+        type: 'select',
+        options: ['high', 'medium', 'low'] satisfies BadgeEmphasis[],
+      },
+    },
+  },
   parameters: {
     docs: {
       description: {
diff --git a/src/components/Badge/Badge.styles.ts b/src/components/Badge/Badge.styles.ts
index 84980b9f..e821e272 100644
--- a/src/components/Badge/Badge.styles.ts
+++ b/src/components/Badge/Badge.styles.ts
@@ -271,7 +271,7 @@ export const defaultConfig = {
         },
         medium: {
           border: '1px solid',
-          borderColor: '$color-nonSemantic-grey-border-strong',
+          borderColor: '$color-nonSemantic-grey-border-subtle',
           color: '$color-nonSemantic-grey-content-primary',
           backgroundColor: '$color-nonSemantic-white-background-strong',
         },
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 23367160..220cad8a 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,11 +1,11 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { BadgeProps } from './Badge.props';
+import type { BadgeProps } from './Badge.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
 export const Badge: FC<BadgeProps & MarginProps> = ({
   appearance,
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index c05997a3..0fab6d26 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -23,6 +23,16 @@ const meta = {
       defaultValue: 'medium',
       control: { type: 'radio' },
     },
+    variant: {
+      options: ['default', 'ghost', 'bare'],
+      defaultValue: 'default',
+      control: { type: 'radio' },
+    },
+    intent: {
+      options: ['none', 'success', 'destructive'],
+      defaultValue: 'none',
+      control: { type: 'radio' },
+    },
   },
   parameters: {
     docs: {
diff --git a/src/components/Button/Button.styles.ts b/src/components/Button/Button.styles.ts
index c5aba8d7..ea288cee 100644
--- a/src/components/Button/Button.styles.ts
+++ b/src/components/Button/Button.styles.ts
@@ -178,7 +178,7 @@ const size = {
 
 const commonConfig = {
   display: 'inline-flex',
-  gap: '$space-component-gap-small',
+  gap: '$space-component-gap-xSmall',
   w: 'fit-content',
   justifyContent: 'center',
   alignItems: 'center',
@@ -304,7 +304,7 @@ const defaultButtonConfig = {
 
 const ghostButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-medium',
+  borderRadius: '$border-radius-large',
   backgroundColor: {
     _: 'transparent',
     hover: '$color-action-ghost-hover',
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index fb786988..b6abe707 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { ButtonProps } from './Button.props';
+import type { ButtonProps } from './Button.props';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 import { Loader } from '../Loader';
@@ -67,7 +67,7 @@ export const Button: FC<ButtonProps & MarginProps> = ({
       )}
       {beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
       {children}
-      {dropdown && <Icon name="20-chevron-down" />}
+      {dropdown && <Icon name="20-chevron-down-small" />}
       {afterIcon && !dropdown && <Icon name={afterIcon} />}
     </tet.button>
   );
diff --git a/src/components/Button/stylesBuilder/stylesBuilder.test.ts b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
index 348b9228..bbfdc889 100644
--- a/src/components/Button/stylesBuilder/stylesBuilder.test.ts
+++ b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
@@ -27,7 +27,7 @@ describe('stylesBuilder', () => {
         boxShadow: '$elevation-bottom-100',
         color: '$color-action-inverted-normal',
         display: 'inline-flex',
-        gap: '$space-component-gap-small',
+        gap: '$space-component-gap-xSmall',
         justifyContent: 'center',
         opacity: {
           disabled: '$opacity-disabled',
diff --git a/src/components/Checkbox/Checkbox.props.ts b/src/components/Checkbox/Checkbox.props.ts
index 7201ec84..2568a1cf 100644
--- a/src/components/Checkbox/Checkbox.props.ts
+++ b/src/components/Checkbox/Checkbox.props.ts
@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from 'react';
 
 import type { CheckboxConfig } from './Checkbox.styles';
+import { HelperTextProps } from '../HelperText';
 
 export type CheckboxProps = {
   isChecked?: boolean;
@@ -13,5 +14,11 @@ export type CheckboxProps = {
 > &
   (
     | { label?: string; helperText?: never }
-    | { label: string; helperText?: string }
+    | {
+        label: string;
+        helperText?: Pick<
+          HelperTextProps,
+          'hasBeforeIcon' | 'counter' | 'text'
+        >;
+      }
   );
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index a274888e..8e15917a 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -11,6 +11,14 @@ const meta = {
   title: 'Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: {
+        type: 'select',
+        options: [undefined, 'disabled', 'alert'],
+      },
+    },
+  },
   parameters: {
     docs: {
       description: {
@@ -34,6 +42,7 @@ export const Default: Story = {};
 export const Checked: Story = {
   args: {
     isChecked: true,
+    onChange: () => {},
   },
 };
 
@@ -87,7 +96,7 @@ export const Alert: Story = {
   args: {
     state: 'alert',
     label: 'Label',
-    helperText: 'Helper text',
+    helperText: { text: 'Helper text' },
   },
 };
 
@@ -100,6 +109,6 @@ export const Label: Story = {
 export const HelperText: Story = {
   args: {
     label: 'Label',
-    helperText: 'Helper text',
+    helperText: { text: 'Helper text' },
   },
 };
diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
index a1d20e94..97903333 100644
--- a/src/components/Checkbox/Checkbox.test.tsx
+++ b/src/components/Checkbox/Checkbox.test.tsx
@@ -19,16 +19,19 @@ const getCheckbox = (jsx: JSX.Element) => {
 };
 
 describe('Checkbox', () => {
-  customPropTester(<Checkbox label="Label" helperText="Helper Text" />, {
-    containerId: 'checkbox',
-    innerElements: {
-      input: [],
-      checkboxContainer: [],
-      checkboxIcon: [],
-      label: [],
-      helperText: [],
+  customPropTester(
+    <Checkbox label="Label" helperText={{ text: 'Helper Text' }} />,
+    {
+      containerId: 'checkbox',
+      innerElements: {
+        input: [],
+        checkboxContainer: [],
+        checkboxIcon: [],
+        label: [],
+        helperText: [],
+      },
     },
-  });
+  );
 
   beforeEach(() => {
     handleEventMock.mockReset();
@@ -101,7 +104,7 @@ describe('Checkbox', () => {
 
   it('should render helper text if props provided', () => {
     const { label, helperText } = getCheckbox(
-      <Checkbox label="Label" helperText="Helper text" />,
+      <Checkbox label="Label" helperText={{ text: 'Helper text' }} />,
     );
 
     expect(label).toHaveTextContent('Label');
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 988de100..981981c3 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -34,6 +34,7 @@ export const Checkbox = forwardRef<
       label,
       helperText,
       custom,
+      onChange,
       ...restProps
     },
     checkboxForwardRef,
@@ -64,6 +65,15 @@ export const Checkbox = forwardRef<
       }
     }, [checkboxInternalRef, label]);
 
+    if (
+      (onChange === undefined && isChecked !== undefined) ||
+      (onChange !== undefined && isChecked === undefined)
+    ) {
+      console.warn(
+        'Checkbox: onChange and isChecked have to be either both provided or both not provided',
+      );
+    }
+
     const input = (
       <CheckboxContainer
         {...styles.checkboxContainer}
@@ -73,7 +83,8 @@ export const Checkbox = forwardRef<
           {...styles.input}
           type="checkbox"
           ref={checkboxRef}
-          checked={isChecked}
+          checked={isChecked && !isIndeterminate}
+          onChange={onChange}
           disabled={state === 'disabled'}
           data-state={state}
           id={checkboxId}
@@ -114,8 +125,7 @@ export const Checkbox = forwardRef<
           <HelperText
             custom={styles.helperText}
             intent={state === 'alert' ? 'alert' : 'none'}
-            beforeIcon={state === 'alert'}
-            text={helperText}
+            {...helperText}
             data-testid="checkbox-helperText"
           />
         )}
diff --git a/src/components/CheckboxGroup/CheckboxGroup.tsx b/src/components/CheckboxGroup/CheckboxGroup.tsx
index 22f8e23a..9a1700da 100644
--- a/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -1,25 +1,23 @@
 import {
   Children,
   FC,
+  ForwardRefExoticComponent,
   isValidElement,
   PropsWithChildren,
   useMemo,
 } from 'react';
 
-import type {
-  CheckboxGroupProps,
-  CheckboxGroupItemProps,
-} from './CheckboxGroup.props';
+import type { CheckboxGroupProps } from './CheckboxGroup.props';
 import { stylesBuilder } from './stylesBuilder';
-import { Checkbox } from '../Checkbox';
+import { Checkbox, type CheckboxProps } from '../Checkbox';
 import { HelperText } from '../HelperText';
 import { Label } from '../Label';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 type Props = FC<PropsWithChildren<CheckboxGroupProps & MarginProps>> & {
-  Item: FC<CheckboxGroupItemProps>;
+  Item: ForwardRefExoticComponent<CheckboxProps & MarginProps>;
 };
 
 export const CheckboxGroup: Props = ({
@@ -81,4 +79,4 @@ export const CheckboxGroup: Props = ({
   );
 };
 
-CheckboxGroup.Item = Checkbox as FC<CheckboxGroupItemProps>;
+CheckboxGroup.Item = Checkbox;
diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
index a5f0a7a5..2a8a1640 100644
--- a/src/components/Counter/Counter.tsx
+++ b/src/components/Counter/Counter.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { CounterProps } from './Counter.props';
 import { stylesBuilder } from './stylesBuilder';
diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx
index 251b228c..000c154b 100644
--- a/src/components/Divider/Divider.stories.tsx
+++ b/src/components/Divider/Divider.stories.tsx
@@ -9,6 +9,11 @@ const meta = {
   title: 'Divider',
   component: Divider,
   tags: ['autodocs'],
+  render: (args) => (
+    <tet.div h="100px">
+      <Divider {...args} />
+    </tet.div>
+  ),
   parameters: {
     docs: {
       description: {
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index f54af6d1..18ea0181 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { DividerProps } from './Divider.props';
 import { stylesBuilder } from './stylesBuilder';
diff --git a/src/components/HelperText/HelperText.props.ts b/src/components/HelperText/HelperText.props.ts
index 4aa056e3..9dcbf219 100644
--- a/src/components/HelperText/HelperText.props.ts
+++ b/src/components/HelperText/HelperText.props.ts
@@ -7,7 +7,7 @@ export type HelperTextProps = {
     current: number;
     max: number;
   };
-  beforeIcon?: boolean;
+  hasBeforeIcon?: boolean;
   text: string;
   custom?: HelperTextConfig;
 };
diff --git a/src/components/HelperText/HelperText.stories.tsx b/src/components/HelperText/HelperText.stories.tsx
index 996e1b70..877c6885 100644
--- a/src/components/HelperText/HelperText.stories.tsx
+++ b/src/components/HelperText/HelperText.stories.tsx
@@ -39,7 +39,7 @@ export const Default: Story = {};
 
 export const DefaultWithIcon: Story = {
   args: {
-    beforeIcon: true,
+    hasBeforeIcon: true,
   },
 };
 
diff --git a/src/components/HelperText/HelperText.test.tsx b/src/components/HelperText/HelperText.test.tsx
index 7e1e278a..6f37dbae 100644
--- a/src/components/HelperText/HelperText.test.tsx
+++ b/src/components/HelperText/HelperText.test.tsx
@@ -14,7 +14,7 @@ const getHelperText = (jsx: JSX.Element) => {
 };
 
 describe('HelperText', () => {
-  customPropTester(<HelperText text="Hello there" beforeIcon />, {
+  customPropTester(<HelperText text="Hello there" hasBeforeIcon />, {
     containerId: 'helper-text',
     props: {
       intent: ['none', 'success', 'alert'],
@@ -39,7 +39,7 @@ describe('HelperText', () => {
       <HelperText
         text="Hello there"
         intent="none"
-        beforeIcon
+        hasBeforeIcon
         counter={{ current: 0, max: 0 }}
       />,
     );
@@ -53,7 +53,7 @@ describe('HelperText', () => {
       <HelperText
         text="Hello there"
         intent="alert"
-        beforeIcon
+        hasBeforeIcon
         counter={{ current: 0, max: 0 }}
       />,
     );
@@ -67,7 +67,7 @@ describe('HelperText', () => {
       <HelperText
         text="Hello there"
         intent="success"
-        beforeIcon
+        hasBeforeIcon
         counter={{ current: 0, max: 0 }}
       />,
     );
@@ -78,7 +78,7 @@ describe('HelperText', () => {
 
   it('should render icon if passed as a prop', () => {
     const { icon } = getHelperText(
-      <HelperText text="Hello there" beforeIcon />,
+      <HelperText text="Hello there" hasBeforeIcon />,
     );
     expect(icon).toBeInTheDocument();
   });
diff --git a/src/components/HelperText/HelperText.tsx b/src/components/HelperText/HelperText.tsx
index aea9c916..09b20e61 100644
--- a/src/components/HelperText/HelperText.tsx
+++ b/src/components/HelperText/HelperText.tsx
@@ -10,7 +10,7 @@ import { MarginProps } from '@/types/MarginProps';
 
 export const HelperText: FC<HelperTextProps & MarginProps> = ({
   intent = 'none',
-  beforeIcon = false,
+  hasBeforeIcon = false,
   counter,
   text,
   custom,
@@ -21,7 +21,7 @@ export const HelperText: FC<HelperTextProps & MarginProps> = ({
 
   return (
     <tet.div {...styles.container} data-testid="helper-text" {...restProps}>
-      {beforeIcon && (
+      {hasBeforeIcon && (
         <tet.span
           {...styles.iconContainer}
           data-testid="helper-text-iconContainer"
diff --git a/src/components/IconButton/IconButton.styles.ts b/src/components/IconButton/IconButton.styles.ts
index c5652e69..e1e00ece 100644
--- a/src/components/IconButton/IconButton.styles.ts
+++ b/src/components/IconButton/IconButton.styles.ts
@@ -66,8 +66,10 @@ export const defaultConfig = {
   bare: {
     ...config,
     size: {
-      medium: size.medium,
-      large: size.medium,
+      medium: {
+        w: 'fit-content',
+        h: 'fit-content',
+      },
     },
   },
 } satisfies ButtonConfig;
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index a55508bb..c0884886 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { IconButtonProps } from './IconButton.props';
 import { defaultConfig } from './IconButton.styles';
-import { Button, ButtonProps } from '../Button';
+import { Button, type ButtonProps } from '../Button';
 
 import { mergeConfigWithCustom } from '@/services';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 const mapperIconButtonPropsToButtonProps = ({
   children,
diff --git a/src/components/InlineBanner/InlineBanner.styles.ts b/src/components/InlineBanner/InlineBanner.styles.ts
index 27fc1d96..a764502b 100644
--- a/src/components/InlineBanner/InlineBanner.styles.ts
+++ b/src/components/InlineBanner/InlineBanner.styles.ts
@@ -77,6 +77,7 @@ export const defaultConfig = {
     contentContainer: {
       display: 'flex',
       flexDirection: 'column',
+      maxW: '90%',
     },
     actionContainer: {
       display: 'flex',
diff --git a/src/components/InlineBanner/InlineBanner.tsx b/src/components/InlineBanner/InlineBanner.tsx
index e5deb349..389bcb90 100644
--- a/src/components/InlineBanner/InlineBanner.tsx
+++ b/src/components/InlineBanner/InlineBanner.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { InlineBannerProps } from './InlineBanner.props';
 import { resolveIconName } from './InlineBanner.styles';
@@ -30,7 +30,12 @@ export const InlineBanner: FC<InlineBannerProps & MarginProps> = ({
   const iconName = useMemo(() => resolveIconName(intent), [intent]);
 
   return (
-    <tet.div {...styles.container} data-testid="inline-banner" {...restProps}>
+    <tet.div
+      {...styles.container}
+      style={{ wordBreak: 'break-word' }}
+      data-testid="inline-banner"
+      {...restProps}
+    >
       <tet.span
         {...styles.iconContainer}
         data-testid="inline-banner-iconContainer"
diff --git a/src/components/InlineMessage/InlineMessage.tsx b/src/components/InlineMessage/InlineMessage.tsx
index db38493e..8eaab104 100644
--- a/src/components/InlineMessage/InlineMessage.tsx
+++ b/src/components/InlineMessage/InlineMessage.tsx
@@ -1,12 +1,12 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { InlineMessageProps } from './InlineMessage.props';
+import type { InlineMessageProps } from './InlineMessage.props';
 import { resolveIconName } from './InlineMessage.styles';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
 export const InlineMessage: FC<InlineMessageProps & MarginProps> = ({
   intent = 'informative',
diff --git a/src/components/InlineSearchInput/InlineSearchInput.tsx b/src/components/InlineSearchInput/InlineSearchInput.tsx
index 42bdc85b..1cd61da8 100644
--- a/src/components/InlineSearchInput/InlineSearchInput.tsx
+++ b/src/components/InlineSearchInput/InlineSearchInput.tsx
@@ -1,11 +1,11 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { InlineSearchInputProps } from './InlineSearchInput.props';
+import type { InlineSearchInputProps } from './InlineSearchInput.props';
 import { defaultConfig } from './InlineSearchInput.styles';
 import { SearchInput } from '../SearchInput';
 
 import { mergeConfigWithCustom } from '@/services';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 export const InlineSearchInput: FC<InlineSearchInputProps & MarginProps> = ({
   custom,
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index ff2fe2be..54d4af35 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,12 +1,12 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { LabelProps } from './Label.props';
 import { stylesBuilder } from './stylesBuilder';
 import { Button } from '../Button';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
 export const Label: FC<LabelProps & MarginProps> = ({
   label,
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index 2f0fe253..063fe11b 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -1,13 +1,15 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import { AnimatedProgress } from './AnimatedProgress';
-import { LoaderProps } from './Loader.props';
+import type { LoaderProps } from './Loader.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
-export const Loader: FC<LoaderProps & MarginProps> = ({
+type NewType = FC<LoaderProps & MarginProps>;
+
+export const Loader: NewType = ({
   appearance = 'primary',
   progress,
   shape,
diff --git a/src/components/Popover/Popover.styles.ts b/src/components/Popover/Popover.styles.ts
index 81c1ed7e..3e82b502 100644
--- a/src/components/Popover/Popover.styles.ts
+++ b/src/components/Popover/Popover.styles.ts
@@ -86,7 +86,7 @@ export const defaultConfig = {
       text: '$typo-body-medium',
       color: '$color-content-secondary',
       padding: '$space-component-padding-large',
-      ring: '$border-width-focus',
+      ring: '$border-width-small',
       ringColor: '$color-border-defaultA',
       boxShadow: '$elevation-bottom-300',
       backgroundColor: '$color-interaction-background-modeless',
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index e9d53f13..089dea65 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -1,5 +1,5 @@
 import { useSpace } from '@xstyled/styled-components';
-import { FC, PropsWithChildren, useMemo } from 'react';
+import { type PropsWithChildren, useMemo, type FC } from 'react';
 
 import { AnchorWrapper, PopoverContent } from './AnchorWrapper.styled';
 import type { PopoverProps } from './Popover.props';
diff --git a/src/components/RadioButton/RadioButton.stories.tsx b/src/components/RadioButton/RadioButton.stories.tsx
index 75679ecc..9ec25e45 100644
--- a/src/components/RadioButton/RadioButton.stories.tsx
+++ b/src/components/RadioButton/RadioButton.stories.tsx
@@ -32,6 +32,7 @@ export const Default: Story = {};
 export const Checked: Story = {
   args: {
     isChecked: true,
+    onChange: () => {},
   },
 };
 
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index ebcc14ee..c3b33803 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -13,7 +13,7 @@ export const RadioButton = forwardRef<
   RadioButtonProps & MarginProps
 >(
   (
-    { isChecked, state, label, helperText, custom, ...restProps },
+    { isChecked, onChange, state, label, helperText, custom, ...restProps },
     radioButtonRef,
   ) => {
     const [radioButtonProps, containerProps] = extractInputProps(restProps);
@@ -22,12 +22,28 @@ export const RadioButton = forwardRef<
 
     const radioButtonId = useId();
 
+    if (state === 'alert' && isChecked) {
+      console.warn('RadioButton: Checked alert state does not exist.');
+    }
+
+    if (
+      (isChecked !== undefined && onChange === undefined) ||
+      (isChecked === undefined && onChange !== undefined)
+    ) {
+      console.warn(
+        'RadioButton: isChecked and onChange must be both defined or both undefined.',
+      );
+    }
+
+    const isAlert = state === 'alert' && !isChecked;
+
     const input = (
       <tet.input
         type="radio"
         ref={radioButtonRef}
         id={radioButtonId}
         checked={isChecked}
+        onChange={onChange}
         disabled={state === 'disabled'}
         data-state={state}
         {...styles.radioButton}
@@ -58,8 +74,8 @@ export const RadioButton = forwardRef<
         {!!helperText && (
           <HelperText
             custom={styles.helperText}
-            intent={state === 'alert' ? 'alert' : 'none'}
-            beforeIcon={state === 'alert'}
+            intent={isAlert ? 'alert' : 'none'}
+            hasBeforeIcon={isAlert}
             text={helperText}
             data-testid="radio-button-helperText"
           />
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/src/components/RadioButtonGroup/RadioButtonGroup.tsx
index 0210dbc0..523cc028 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,10 +1,10 @@
 import {
   Children,
   cloneElement,
-  FC,
+  type FC,
   isValidElement,
-  PropsWithChildren,
-  ReactElement,
+  type PropsWithChildren,
+  type ReactElement,
   useMemo,
 } from 'react';
 
@@ -21,7 +21,7 @@ import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
 type Props = FC<PropsWithChildren<RadioButtonGroupProps & MarginProps>> & {
-  Item: React.FC<RadioButtonGroupItemProps>;
+  Item: FC<RadioButtonGroupItemProps>;
 };
 
 export const RadioButtonGroup: Props = ({
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 3c136fdb..63e51821 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SearchInputProps } from './SearchInput.props';
-import { TextInput, TextInputProps } from '../TextInput';
+import type { SearchInputProps } from './SearchInput.props';
+import { TextInput, type TextInputProps } from '../TextInput';
 
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 const SEARCH_ICON_COMPONENT: TextInputProps['beforeComponent'] = {
   type: 'Icon',
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 59d2bc62..135352d7 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -9,9 +9,9 @@ const getSelect = (jsx: JSX.Element) => {
   const { getByTestId, queryByTestId } = render(jsx);
 
   return {
-    textInput: getByTestId('text-input'),
-    input: getByTestId('text-input-input') as HTMLInputElement,
-    beforeComponent: queryByTestId('text-input-before-component'),
+    textInput: getByTestId('select'),
+    input: getByTestId('select-input') as HTMLInputElement,
+    beforeComponent: queryByTestId('select-before-component'),
   };
 };
 
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 395c12fb..0870600e 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,17 +1,91 @@
-import { FC } from 'react';
+import { Icon } from '@virtuslab/tetrisly-icons';
+import type { FC } from 'react';
 
-import { SelectProps } from './Select.props';
-import { TextInput, TextInputProps } from '../TextInput';
+import type { SelectProps } from './Select.props';
+import { Avatar } from '../Avatar';
+import { IconButton } from '../IconButton';
+import type { TextInputProps } from '../TextInput';
+import { useTextInput } from '../TextInput/useTextInput';
 
-import { MarginProps } from '@/types';
+import { tet } from '@/tetrisly';
+import type { MarginProps } from '@/types';
 
-const DROPDOWN_INDICATOR_COMPONENT: TextInputProps['afterComponent'] = {
+const DROPDOWN_INDICATOR_COMPONENT = {
   type: 'IconButton',
   props: {
     icon: '20-chevron-down-small',
   },
-};
+} satisfies TextInputProps['afterComponent'];
 
-export const Select: FC<SelectProps & MarginProps> = (props) => (
-  <TextInput afterComponent={DROPDOWN_INDICATOR_COMPONENT} {...props} />
-);
+export const Select: FC<SelectProps & MarginProps> = ({
+  state,
+  beforeComponent,
+  hasClearButton,
+  value,
+  ...props
+}) => {
+  const afterComponent = DROPDOWN_INDICATOR_COMPONENT;
+  const {
+    containerRef,
+    handleContainerClick,
+    styles,
+    containerProps,
+    innerValue,
+    handleOnChange,
+    handleOnClear,
+    textInputProps,
+  } = useTextInput({
+    beforeComponent,
+    afterComponent,
+    ...props,
+  });
+  return (
+    <tet.div
+      ref={containerRef}
+      onClick={handleContainerClick}
+      {...styles.container}
+      pl={!!beforeComponent && '0'}
+      pr="0"
+      data-testid="select"
+      data-state={state}
+      tabIndex={0}
+      {...containerProps}
+    >
+      {!!beforeComponent && (
+        <tet.span
+          {...styles.beforeComponent}
+          data-testid="select-before-component"
+        >
+          {beforeComponent.type === 'Icon' && (
+            <tet.span {...styles.icon}>
+              <Icon {...beforeComponent.props} />
+            </tet.span>
+          )}
+          {beforeComponent.type === 'Avatar' && (
+            <Avatar {...beforeComponent.props} shape="square" size="xSmall" />
+          )}
+        </tet.span>
+      )}
+      <tet.input
+        {...styles.input}
+        value={value || innerValue}
+        onChange={handleOnChange}
+        data-testid="select-input"
+        {...textInputProps}
+        disabled={state === 'disabled'}
+      />
+      {!!hasClearButton && (value || innerValue) && (
+        <IconButton
+          variant="bare"
+          icon="20-close"
+          onClick={handleOnClear}
+          {...styles.clearButton}
+          data-testid="select-clear-button"
+        />
+      )}
+      <tet.span {...styles.afterComponent} data-testid="select-after-component">
+        <IconButton variant="bare" size="medium" {...afterComponent.props} />
+      </tet.span>
+    </tet.div>
+  );
+};
diff --git a/src/components/SocialButton/SocialButton.tsx b/src/components/SocialButton/SocialButton.tsx
index b320f981..9a627614 100644
--- a/src/components/SocialButton/SocialButton.tsx
+++ b/src/components/SocialButton/SocialButton.tsx
@@ -5,7 +5,7 @@ import { socials } from './socials';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 export const SocialButton: FC<SocialButtonProps & MarginProps> = ({
   platform,
diff --git a/src/components/SocialButton/socials/Apple.tsx b/src/components/SocialButton/socials/Apple.tsx
index 7a81222a..5d67f362 100644
--- a/src/components/SocialButton/socials/Apple.tsx
+++ b/src/components/SocialButton/socials/Apple.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 import { tet } from '@/tetrisly';
diff --git a/src/components/SocialButton/socials/Facebook.tsx b/src/components/SocialButton/socials/Facebook.tsx
index feaa7a20..8e57632d 100644
--- a/src/components/SocialButton/socials/Facebook.tsx
+++ b/src/components/SocialButton/socials/Facebook.tsx
@@ -1,20 +1,20 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 export const Facebook: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="facebook-icon"
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.4061 17.8908V11.6021H12.5033L12.902 8.99995H10.4061V7.31158C10.4061 6.60029 10.7542 5.90545 11.873 5.90545H13.0083V3.69057C13.0083 3.69057 11.9781 3.51465 10.9934 3.51465C8.93797 3.51465 7.59386 4.76004 7.59386 7.01669V8.99995H5.30811V11.6021H7.59386V17.8908C3.2912 17.2157 0 13.4922 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.4922 14.7088 17.2157 10.4061 17.8908Z"
+        d="M11.4061 18.8908V12.6021H13.5033L13.902 9.99995H11.4061V8.31158C11.4061 7.60029 11.7542 6.90545 12.873 6.90545H14.0083V4.69057C14.0083 4.69057 12.9781 4.51465 11.9934 4.51465C9.93797 4.51465 8.59386 5.76004 8.59386 8.01669V9.99995H6.30811V12.6021H8.59386V18.8908C4.2912 18.2157 1 14.4922 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.4922 15.7088 18.2157 11.4061 18.8908Z"
         fill={fill}
       />
     </svg>
diff --git a/src/components/SocialButton/socials/Figma.tsx b/src/components/SocialButton/socials/Figma.tsx
index 687a1bf1..17dad1d2 100644
--- a/src/components/SocialButton/socials/Figma.tsx
+++ b/src/components/SocialButton/socials/Figma.tsx
@@ -1,40 +1,40 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 export const Figma: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="figma-icon"
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
+      width="20"
       height="20"
-      viewBox="0 0 14 20"
-      fill={fill === 'white' ? 'black' : 'white'}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M3.99999 19C5.65599 19 6.99999 17.656 6.99999 16V13H3.99999C2.344 13 1 14.344 1 16C1 17.656 2.344 19 3.99999 19Z"
+        d="M6.99999 19C8.65599 19 9.99999 17.656 9.99999 16V13H6.99999C5.344 13 4 14.344 4 16C4 17.656 5.344 19 6.99999 19Z"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        d="M1 9.99975C1 8.34375 2.344 6.99976 3.99999 6.99976H6.99999V12.9997H3.99999C2.344 12.9997 1 11.6557 1 9.99975Z"
+        d="M4 9.99975C4 8.34375 5.344 6.99976 6.99999 6.99976H9.99999V12.9997H6.99999C5.344 12.9997 4 11.6557 4 9.99975Z"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        d="M1 3.99999C1 2.344 2.344 1 3.99999 1H6.99999V6.99999H3.99999C2.344 6.99999 1 5.65599 1 3.99999Z"
+        d="M4 3.99999C4 2.344 5.344 1 6.99999 1H9.99999V6.99999H6.99999C5.344 6.99999 4 5.65599 4 3.99999Z"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        d="M7 1H9.99999C11.656 1 13 2.344 13 3.99999C13 5.65599 11.656 6.99999 9.99999 6.99999H7V1Z"
+        d="M10 1H13C14.656 1 16 2.344 16 3.99999C16 5.65599 14.656 6.99999 13 6.99999H10V1Z"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        d="M13 9.99975C13 11.6557 11.656 12.9997 9.99999 12.9997C8.344 12.9997 7 11.6557 7 9.99975C7 8.34375 8.344 6.99976 9.99999 6.99976C11.656 6.99976 13 8.34375 13 9.99975Z"
+        d="M16 9.99975C16 11.6557 14.656 12.9997 13 12.9997C11.344 12.9997 10 11.6557 10 9.99975C10 8.34375 11.344 6.99976 13 6.99976C14.656 6.99976 16 8.34375 16 9.99975Z"
         stroke={fill}
         strokeWidth="1.5"
       />
diff --git a/src/components/SocialButton/socials/Github.tsx b/src/components/SocialButton/socials/Github.tsx
index 78815b36..37e97b4d 100644
--- a/src/components/SocialButton/socials/Github.tsx
+++ b/src/components/SocialButton/socials/Github.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 export const Github: FC<SocialProps> = ({ fill, loading }) => (
diff --git a/src/components/SocialButton/socials/Google.tsx b/src/components/SocialButton/socials/Google.tsx
index d9824325..604c4210 100644
--- a/src/components/SocialButton/socials/Google.tsx
+++ b/src/components/SocialButton/socials/Google.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 import { tet } from '@/tetrisly';
@@ -17,27 +17,27 @@ export const Google: FC<SocialProps> = ({ loading }) => (
     bg="$color-action-inverted-normal"
   >
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <WithLoader loading={loading}>
         <path
-          d="M17.6175 9.20274C17.6175 8.61024 17.565 8.04774 17.475 7.50024H9V10.8827H13.8525C13.635 11.9927 12.9975 12.9302 12.0525 13.5677V15.8177H14.9475C16.6425 14.2502 17.6175 11.9402 17.6175 9.20274Z"
+          d="M18.6175 10.2027C18.6175 9.61024 18.565 9.04774 18.475 8.50024H10V11.8827H14.8525C14.635 12.9927 13.9975 13.9302 13.0525 14.5677V16.8177H15.9475C17.6425 15.2502 18.6175 12.9402 18.6175 10.2027Z"
           fill="#4285F4"
         />
         <path
-          d="M9.00027 17.9998C11.4303 17.9998 13.4628 17.1898 14.9478 15.8173L12.0528 13.5673C11.2428 14.1073 10.2153 14.4373 9.00027 14.4373C6.65277 14.4373 4.66527 12.8548 3.95277 10.7173H0.967773V13.0348C2.44527 15.9748 5.48277 17.9998 9.00027 17.9998Z"
+          d="M10.0003 18.9998C12.4303 18.9998 14.4628 18.1898 15.9478 16.8173L13.0528 14.5673C12.2428 15.1073 11.2153 15.4373 10.0003 15.4373C7.65277 15.4373 5.66527 13.8548 4.95277 11.7173H1.96777V14.0348C3.44527 16.9748 6.48277 18.9998 10.0003 18.9998Z"
           fill="#34A853"
         />
         <path
-          d="M3.9525 10.7173C3.765 10.1773 3.6675 9.59984 3.6675 8.99984C3.6675 8.39984 3.7725 7.82234 3.9525 7.28234V4.96484H0.967499C0.352499 6.17984 0 7.54484 0 8.99984C0 10.4548 0.352499 11.8198 0.967499 13.0348L3.9525 10.7173Z"
+          d="M4.9525 11.7173C4.765 11.1773 4.6675 10.5998 4.6675 9.99984C4.6675 9.39984 4.7725 8.82234 4.9525 8.28234V5.96484H1.9675C1.3525 7.17984 1 8.54484 1 9.99984C1 11.4548 1.3525 12.8198 1.9675 14.0348L4.9525 11.7173Z"
           fill="#FBBC05"
         />
         <path
-          d="M9.00027 3.5625C10.3278 3.5625 11.5128 4.02 12.4503 4.9125L15.0153 2.3475C13.4628 0.892501 11.4303 0 9.00027 0C5.48277 0 2.44527 2.025 0.967773 4.965L3.95277 7.2825C4.66527 5.145 6.65277 3.5625 9.00027 3.5625Z"
+          d="M10.0003 4.5625C11.3278 4.5625 12.5128 5.02 13.4503 5.9125L16.0153 3.3475C14.4628 1.8925 12.4303 1 10.0003 1C6.48277 1 3.44527 3.025 1.96777 5.965L4.95277 8.2825C5.66527 6.145 7.65277 4.5625 10.0003 4.5625Z"
           fill="#EA4335"
         />
       </WithLoader>
diff --git a/src/components/SocialButton/socials/Twitter.tsx b/src/components/SocialButton/socials/Twitter.tsx
index 41cc707e..d8e79eb6 100644
--- a/src/components/SocialButton/socials/Twitter.tsx
+++ b/src/components/SocialButton/socials/Twitter.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 export const Twitter: FC<SocialProps> = ({ fill, loading }) => (
diff --git a/src/components/SocialButton/socials/WithLoader.tsx b/src/components/SocialButton/socials/WithLoader.tsx
index c3d30e09..3acb885b 100644
--- a/src/components/SocialButton/socials/WithLoader.tsx
+++ b/src/components/SocialButton/socials/WithLoader.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 import { Loader } from '@/components/Loader';
 
diff --git a/src/components/SocialButton/socials/socials.ts b/src/components/SocialButton/socials/socials.ts
index 89dcd48f..b2423463 100644
--- a/src/components/SocialButton/socials/socials.ts
+++ b/src/components/SocialButton/socials/socials.ts
@@ -1,13 +1,13 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { Apple } from './Apple';
 import { Facebook } from './Facebook';
 import { Figma } from './Figma';
 import { Github } from './Github';
 import { Google } from './Google';
-import { SocialProps } from './SocialProps';
+import type { SocialProps } from './SocialProps';
 import { Twitter } from './Twitter';
-import { SocialButtonProps } from '../SocialButton.props';
+import type { SocialButtonProps } from '../SocialButton.props';
 
 export const socials = {
   Apple: {
diff --git a/src/components/StatusDot/StatusDot.props.ts b/src/components/StatusDot/StatusDot.props.ts
index c6fd111e..2db120db 100644
--- a/src/components/StatusDot/StatusDot.props.ts
+++ b/src/components/StatusDot/StatusDot.props.ts
@@ -3,6 +3,7 @@ import type { StatusDotAppearance } from './types';
 
 export type StatusDotProps = {
   appearance?: StatusDotAppearance;
-  stroked?: boolean;
+  /** You can change the color of a stroke using the custom prop */
+  hasStroke?: boolean;
   custom?: StatusDotConfig;
 };
diff --git a/src/components/StatusDot/StatusDot.stories.tsx b/src/components/StatusDot/StatusDot.stories.tsx
index c6886893..4f16f14f 100644
--- a/src/components/StatusDot/StatusDot.stories.tsx
+++ b/src/components/StatusDot/StatusDot.stories.tsx
@@ -10,7 +10,7 @@ const meta = {
   component: StatusDot,
   tags: ['autodocs'],
   args: {
-    stroked: false,
+    hasStroke: false,
   },
   parameters: {
     backgrounds: {
@@ -38,7 +38,7 @@ export const Default: Story = {
 export const Stroked: Story = {
   args: {
     appearance: 'green',
-    stroked: true,
+    hasStroke: true,
   },
   parameters: {
     backgrounds: {
diff --git a/src/components/StatusDot/StatusDot.styles.ts b/src/components/StatusDot/StatusDot.styles.ts
index ee972ec1..e0e22660 100644
--- a/src/components/StatusDot/StatusDot.styles.ts
+++ b/src/components/StatusDot/StatusDot.styles.ts
@@ -4,7 +4,7 @@ import type { BaseProps } from '@/types/BaseProps';
 
 export type StatusDotConfig = {
   appearance?: Partial<Record<StatusDotAppearance, BaseProps>>;
-  stroked?: BaseProps;
+  hasStroke?: BaseProps;
 } & BaseProps;
 
 export const defaultConfig = {
@@ -22,7 +22,7 @@ export const defaultConfig = {
       backgroundColor: '$color-nonSemantic-orange-background-strong',
     },
   },
-  stroked: {
+  hasStroke: {
     ring: '$border-width-medium',
     ringColor: '$color-border-inverted',
   },
diff --git a/src/components/StatusDot/StatusDot.test.tsx b/src/components/StatusDot/StatusDot.test.tsx
index a83574a4..b8581769 100644
--- a/src/components/StatusDot/StatusDot.test.tsx
+++ b/src/components/StatusDot/StatusDot.test.tsx
@@ -30,7 +30,7 @@ describe('StatusDot', () => {
   });
 
   it('should render border', () => {
-    const statusDotStroked = getStatusDot(<StatusDot stroked />);
+    const statusDotStroked = getStatusDot(<StatusDot hasStroke />);
     expect(statusDotStroked).toHaveStyle(
       'box-shadow: var(--x-ring-shadow,0 0 #0000),var(--x-shadow,0 0 #0000);',
     );
@@ -40,7 +40,7 @@ describe('StatusDot', () => {
     containerId: 'status-dot',
     props: {
       appearance: ['red', 'green', 'blue'],
-      stroked: [],
+      hasStroke: [],
     },
   });
 });
diff --git a/src/components/StatusDot/StatusDot.tsx b/src/components/StatusDot/StatusDot.tsx
index 6386b5fd..0a673afa 100644
--- a/src/components/StatusDot/StatusDot.tsx
+++ b/src/components/StatusDot/StatusDot.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { StatusDotProps } from './StatusDot.props';
 import { stylesBuilder } from './stylesBuilder';
@@ -8,13 +8,13 @@ import type { MarginProps } from '@/types';
 
 export const StatusDot: FC<StatusDotProps & MarginProps> = ({
   appearance = 'red',
-  stroked = false,
+  hasStroke = false,
   custom,
   ...restProps
 }) => {
   const styles = useMemo(
-    () => stylesBuilder({ appearance, stroked, custom }),
-    [appearance, stroked, custom],
+    () => stylesBuilder({ appearance, hasStroke, custom }),
+    [appearance, hasStroke, custom],
   );
 
   return (
diff --git a/src/components/StatusDot/stylesBuilder/stylesBuilder.ts b/src/components/StatusDot/stylesBuilder/stylesBuilder.ts
index f7e922e5..f5adb7bb 100644
--- a/src/components/StatusDot/stylesBuilder/stylesBuilder.ts
+++ b/src/components/StatusDot/stylesBuilder/stylesBuilder.ts
@@ -7,7 +7,7 @@ import { BaseProps } from '@/types/BaseProps';
 
 type StylesBuilderParams = {
   appearance: StatusDotAppearance;
-  stroked: StatusDotProps['stroked'];
+  hasStroke: StatusDotProps['hasStroke'];
   custom: StatusDotProps['custom'];
 };
 
@@ -17,14 +17,14 @@ type StatusDotStylesBuilder = {
 
 export const stylesBuilder = ({
   appearance,
-  stroked,
+  hasStroke,
   custom,
 }: StylesBuilderParams): StatusDotStylesBuilder => {
   const config = mergeConfigWithCustom({ defaultConfig, custom });
 
   const {
     appearance: appearanceStyles,
-    stroked: strokedStyles,
+    hasStroke: strokedStyles,
     ...restStyles
   } = config;
 
@@ -32,7 +32,7 @@ export const stylesBuilder = ({
     container: {
       ...restStyles,
       ...appearanceStyles[appearance],
-      ...(stroked && strokedStyles),
+      ...(hasStroke && strokedStyles),
     },
   };
 };
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 301dba37..4fe09243 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -1,19 +1,19 @@
 import {
-  FC,
-  KeyboardEventHandler,
-  MouseEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
   useCallback,
   useMemo,
   useRef,
+  FC,
 } from 'react';
 
 import { stylesBuilder } from './stylesBuilder';
-import { TagProps } from './Tag.props';
+import type { TagProps } from './Tag.props';
 import { Avatar } from '../Avatar';
 import { IconButton } from '../IconButton';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types';
+import type { MarginProps } from '@/types';
 
 const KEYBOARD_KEYS = {
   Enter: 'Enter',
diff --git a/src/components/TextInput/TextInput.styles.ts b/src/components/TextInput/TextInput.styles.ts
index e1fcba08..7d99b73e 100644
--- a/src/components/TextInput/TextInput.styles.ts
+++ b/src/components/TextInput/TextInput.styles.ts
@@ -23,6 +23,7 @@ export type TextInputConfig = {
 } & BaseProps;
 
 export const defaultConfig = {
+  bg: '$color-interaction-background-formField',
   display: 'flex',
   alignItems: 'center',
   h: '$size-medium',
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index b82c4b46..d9b06d80 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -1,22 +1,12 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import {
-  forwardRef,
-  useRef,
-  useCallback,
-  useState,
-  ChangeEventHandler,
-  MouseEventHandler,
-  ChangeEvent,
-  useMemo,
-} from 'react';
+import { forwardRef } from 'react';
 
-import { stylesBuilder } from './stylesBuilder';
 import { TextInputProps } from './TextInput.props';
+import { useTextInput } from './useTextInput';
 import { Avatar } from '../Avatar';
 import { Button } from '../Button';
 import { IconButton } from '../IconButton';
 
-import { extractInputProps } from '@/services';
 import { tet } from '@/tetrisly';
 import { MarginProps } from '@/types/MarginProps';
 
@@ -31,45 +21,25 @@ export const TextInput = forwardRef<
       afterComponent,
       state,
       hasClearButton,
-      custom,
       value,
-      onChange,
       ...restProps
     },
     inputRef,
   ) => {
-    const [innerValue, setInnerValue] = useState('');
-    const styles = useMemo(
-      () => stylesBuilder(custom, beforeComponent?.type, afterComponent?.type),
-      [afterComponent?.type, beforeComponent?.type, custom],
-    );
-    const [textInputProps, containerProps] = extractInputProps(restProps);
-
-    const containerRef = useRef<HTMLInputElement | null>(null);
-
-    const handleContainerClick: MouseEventHandler = useCallback(
-      (e) => {
-        if (e.target === containerRef.current) {
-          const input = containerRef.current?.querySelector('input');
-          input?.focus();
-        }
-      },
-      [containerRef],
-    );
-
-    const handleOnChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-      (e) => {
-        setInnerValue(e.target.value);
-        onChange?.(e);
-      },
-      [onChange],
-    );
-
-    const handleOnClear: MouseEventHandler<HTMLButtonElement> =
-      useCallback(() => {
-        setInnerValue('');
-        onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>);
-      }, [onChange]);
+    const {
+      containerRef,
+      handleContainerClick,
+      styles,
+      containerProps,
+      innerValue,
+      handleOnChange,
+      handleOnClear,
+      textInputProps,
+    } = useTextInput({
+      beforeComponent,
+      afterComponent,
+      ...restProps,
+    });
 
     return (
       <tet.div
@@ -77,7 +47,7 @@ export const TextInput = forwardRef<
         onClick={handleContainerClick}
         {...styles.container}
         pl={!!beforeComponent && '0'}
-        pr={!!afterComponent && '0'}
+        pr={(!!afterComponent || !!hasClearButton) && '0'}
         data-testid="text-input"
         data-state={state}
         tabIndex={0}
diff --git a/src/components/TextInput/useTextInput.ts b/src/components/TextInput/useTextInput.ts
new file mode 100644
index 00000000..b341ca90
--- /dev/null
+++ b/src/components/TextInput/useTextInput.ts
@@ -0,0 +1,67 @@
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { stylesBuilder } from './stylesBuilder';
+import { TextInputProps } from './TextInput.props';
+
+import { extractInputProps } from '@/services';
+
+export const useTextInput = ({
+  custom,
+  beforeComponent,
+  afterComponent,
+  onChange,
+  ...restProps
+}: Omit<TextInputProps, 'type' | 'state' | 'value' | 'hasClearButton'>) => {
+  const [innerValue, setInnerValue] = useState('');
+  const styles = useMemo(
+    () => stylesBuilder(custom, beforeComponent?.type, afterComponent?.type),
+    [afterComponent?.type, beforeComponent?.type, custom],
+  );
+  const [textInputProps, containerProps] = extractInputProps(restProps);
+
+  const containerRef = useRef<HTMLInputElement | null>(null);
+
+  const handleContainerClick: MouseEventHandler = useCallback(
+    (e) => {
+      if (e.target === containerRef.current) {
+        const input = containerRef.current?.querySelector('input');
+        input?.focus();
+      }
+    },
+    [containerRef],
+  );
+
+  const handleOnChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      setInnerValue(e.target.value);
+      onChange?.(e);
+    },
+    [onChange],
+  );
+
+  const handleOnClear: MouseEventHandler<HTMLButtonElement> =
+    useCallback(() => {
+      setInnerValue('');
+      onChange?.({
+        target: { value: '' },
+      } as ChangeEvent<HTMLInputElement>);
+    }, [onChange]);
+  return {
+    innerValue,
+    styles,
+    textInputProps,
+    containerProps,
+    containerRef,
+    handleContainerClick,
+    handleOnChange,
+    handleOnClear,
+  };
+};
diff --git a/src/components/Toast/Toast.styles.ts b/src/components/Toast/Toast.styles.ts
index 17544061..ac6c6a53 100644
--- a/src/components/Toast/Toast.styles.ts
+++ b/src/components/Toast/Toast.styles.ts
@@ -30,9 +30,10 @@ export type ToastConfig = {
 export const defaultConfig = {
   display: 'inline-flex',
   alignItems: 'center',
-  p: '$space-component-padding-medium $space-component-padding-large',
+  h: '48px',
   padding: '$space-component-padding-medium $space-component-padding-large',
   borderRadius: '$border-radius-large',
+  text: '$typo-body-medium',
   emphasis: {
     high: {},
     low: {
@@ -135,7 +136,6 @@ export const defaultConfig = {
           color: '$color-content-tertiary',
         },
       },
-      text: '$typo-body-medium',
     },
     closeButton: {
       ml: '$space-component-padding-large',
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 2f0881ca..41c344dd 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import { stylesBuilder } from './stylesBuilder';
 import type { ToastProps } from './Toast.props';
diff --git a/src/components/Toast/stylesBuilder/stylesBuilder.ts b/src/components/Toast/stylesBuilder/stylesBuilder.ts
index f6e72700..d0989193 100644
--- a/src/components/Toast/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Toast/stylesBuilder/stylesBuilder.ts
@@ -52,11 +52,17 @@ export const stylesBuilder = ({
     ...restIconContainerStyles,
   };
 
+  const { emphasis: emphasisMiddleDotStyles, ...restMiddleDotStyles } =
+    middleDot;
+
   return {
     container,
     actionContainer,
     iconContainer,
     closeButton,
-    middleDot,
+    middleDot: {
+      ...restMiddleDotStyles,
+      ...emphasisMiddleDotStyles[props.emphasis],
+    },
   };
 };
diff --git a/src/docs-components/AlertBannerDocs.tsx b/src/docs-components/AlertBannerDocs.tsx
index e6e59880..f636d478 100644
--- a/src/docs-components/AlertBannerDocs.tsx
+++ b/src/docs-components/AlertBannerDocs.tsx
@@ -4,9 +4,15 @@ import { capitalize } from 'lodash';
 import { SectionHeader } from './common/SectionHeader';
 
 import { AlertBanner } from '@/components/AlertBanner';
+import { AlertBannerIntent } from '@/components/AlertBanner/types';
 import { tet } from '@/tetrisly';
 
-const intents = ['none', 'positive', 'warning', 'negative'] as const;
+const intents = [
+  'none',
+  'success',
+  'warning',
+  'negative',
+] satisfies AlertBannerIntent[];
 
 export const AlertBannerDocs = () => (
   <>
diff --git a/src/docs-components/AvatarDocs.tsx b/src/docs-components/AvatarDocs.tsx
index 5a7e5929..f02c3ef1 100644
--- a/src/docs-components/AvatarDocs.tsx
+++ b/src/docs-components/AvatarDocs.tsx
@@ -4,8 +4,8 @@ import { Cols } from './common/Cols';
 import { SectionHeader } from './common/SectionHeader';
 import { Avatar } from '../components/Avatar/Avatar';
 import { AvatarProps } from '../components/Avatar/Avatar.props';
-import { appearances } from '../types/Appearance';
 
+import { avatarAppearanceColors } from '@/components/Avatar/types/AvatarAppearance.type';
 import { tet } from '@/tetrisly';
 
 const sizes = [
@@ -65,7 +65,7 @@ export const AvatarDocs = () => (
                     }}
                   />
                 )}
-                {appearances.map((appearance) => (
+                {avatarAppearanceColors.map((appearance) => (
                   <RowAvatar
                     key={`${appearance}${shape}${emphasis}`}
                     appearance={appearance}
diff --git a/src/docs-components/BadgeDocs.tsx b/src/docs-components/BadgeDocs.tsx
index 393705eb..2187ed47 100644
--- a/src/docs-components/BadgeDocs.tsx
+++ b/src/docs-components/BadgeDocs.tsx
@@ -1,7 +1,7 @@
 import { capitalize } from 'lodash';
 
 import { SectionHeader } from './common/SectionHeader';
-import { States } from './common/States';
+import { State, States } from './common/States';
 
 import { Badge } from '@/components/Badge';
 import { tet } from '@/tetrisly';
@@ -35,7 +35,12 @@ export const BadgeDocs = () => (
             gap="$dimension-500"
             flexBasis="$dimension-100"
           />
-          <tet.div py="$dimension-500" display="flex" gap="$dimension-500">
+          <tet.div
+            py="$dimension-500"
+            display="flex"
+            flexWrap="wrap"
+            gap="$dimension-500"
+          >
             {basicIntents.map((intent) => (
               <tet.div
                 key={intent}
@@ -52,36 +57,45 @@ export const BadgeDocs = () => (
             ))}
           </tet.div>
         </tet.div>
-        <tet.div px="$dimension-1000">
+        <tet.div px="$dimension-1000" w="100%">
           <SectionHeader variant="H2" as="h3" py="$dimension-500">
             Appearance
           </SectionHeader>
 
-          <tet.div overflowX="scroll">
-            <States
-              states={appearances}
-              gap="$dimension-500"
-              itemWidth="96px"
-            />
-            <tet.div py="$dimension-500" display="flex" gap="39px">
+          <tet.div>
+            <tet.div
+              py="$dimension-500"
+              display="flex"
+              gap="48px"
+              flexWrap="wrap"
+            >
               {appearances.map((appearance) => (
                 <tet.div
-                  key={appearance}
                   display="flex"
+                  gap="72px"
+                  my="20"
                   flexDirection="column"
-                  gap="$dimension-400"
-                  flexShrink="0"
                 >
-                  <Badge
-                    appearance={appearance}
-                    emphasis={emphasis}
-                    label="Badge Text"
-                  />
-                  <Badge
-                    appearance={appearance}
-                    emphasis={emphasis}
-                    icon="16-bolt"
-                  />
+                  <State state={appearance} />
+                  <tet.div
+                    key={appearance}
+                    display="flex"
+                    flexWrap="wrap"
+                    flexDirection="column"
+                    gap="$dimension-400"
+                    flexShrink="0"
+                  >
+                    <Badge
+                      appearance={appearance}
+                      emphasis={emphasis}
+                      label="Badge Text"
+                    />
+                    <Badge
+                      appearance={appearance}
+                      emphasis={emphasis}
+                      icon="16-bolt"
+                    />
+                  </tet.div>
                 </tet.div>
               ))}
             </tet.div>
diff --git a/src/docs-components/ButtonDocs/ButtonDocs.tsx b/src/docs-components/ButtonDocs/ButtonDocs.tsx
index 883f1cfa..7fc6ee61 100644
--- a/src/docs-components/ButtonDocs/ButtonDocs.tsx
+++ b/src/docs-components/ButtonDocs/ButtonDocs.tsx
@@ -1,10 +1,10 @@
 import { startCase } from 'lodash';
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { ButtonRow } from './ButtonRow';
 import { SectionHeader } from '../common/SectionHeader';
 
-import { ButtonProps } from '@/components/Button';
+import type { ButtonProps } from '@/components/Button';
 import { tet } from '@/tetrisly';
 
 const variants = ['default', 'ghost', 'bare'] as const;
diff --git a/src/docs-components/ButtonDocs/ButtonRow.tsx b/src/docs-components/ButtonDocs/ButtonRow.tsx
index 5c190f98..f2dadf19 100644
--- a/src/docs-components/ButtonDocs/ButtonRow.tsx
+++ b/src/docs-components/ButtonDocs/ButtonRow.tsx
@@ -8,7 +8,7 @@ type ButtonRowProps = Pick<ButtonProps, 'variant' | 'appearance' | 'intent'>;
 export const ButtonRow = ({ variant, appearance, intent }: ButtonRowProps) => {
   const baseProps = { variant, appearance, intent } as ButtonProps;
   return (
-    <tet.div display="flex" gap="$dimension-300" overflowX="scroll">
+    <tet.div display="flex" gap="$dimension-300" pl="5px" overflowX="scroll">
       <ButtonSizes {...baseProps} label="Button label" />
       <ButtonSizes
         {...baseProps}
diff --git a/src/docs-components/CheckboxDocs.tsx b/src/docs-components/CheckboxDocs.tsx
index a29751bb..91722d40 100644
--- a/src/docs-components/CheckboxDocs.tsx
+++ b/src/docs-components/CheckboxDocs.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { SectionHeader } from './common/SectionHeader';
 import { States } from './common/States';
 
-import { Checkbox, CheckboxProps } from '@/components/Checkbox';
+import { Checkbox } from '@/components/Checkbox';
 import { tet } from '@/tetrisly';
 
 const getYesNo = (yes: boolean) => (yes ? 'Yes' : 'No');
@@ -43,7 +43,10 @@ export const CheckboxDocs: FC = () => (
               labels={getLabels(label, helperText)}
             />
             <States
-              states={['normal', 'disabled', 'alert']}
+              states={['normal', 'disabled', 'alert'].filter(
+                (currentState) =>
+                  !(currentState === 'alert' && state === 'Checked'),
+              )}
               flexBasis="130px"
               gap="$dimension-500"
             />
@@ -57,37 +60,46 @@ export const CheckboxDocs: FC = () => (
                 <Checkbox
                   isChecked={state === 'Checked'}
                   isIndeterminate={state === 'Indeterminate'}
+                  onChange={() => {}}
                   mt="$dimension-500"
-                  {...({
-                    label: label ? 'Checkbox Label' : undefined,
-                    helperText: helperText ? 'Helper Text' : undefined,
-                  } as CheckboxProps)}
+                  label={
+                    label ? 'Checkbox Label' : (undefined as unknown as string)
+                  }
+                  helperText={helperText ? { text: 'Helper Text' } : undefined}
                 />
               </tet.div>
               <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
                 <Checkbox
                   isChecked={state === 'Checked'}
                   isIndeterminate={state === 'Indeterminate'}
+                  onChange={() => {}}
                   state="disabled"
                   mt="$dimension-500"
-                  {...({
-                    label: label ? 'Checkbox Label' : undefined,
-                    helperText: helperText ? 'Helper Text' : undefined,
-                  } as CheckboxProps)}
-                />
-              </tet.div>
-              <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
-                <Checkbox
-                  isChecked={state === 'Checked'}
-                  isIndeterminate={state === 'Indeterminate'}
-                  state="alert"
-                  mt="$dimension-500"
-                  {...({
-                    label: label ? 'Checkbox Label' : undefined,
-                    helperText: helperText ? 'Helper Text' : undefined,
-                  } as CheckboxProps)}
+                  label={
+                    label ? 'Checkbox Label' : (undefined as unknown as string)
+                  }
+                  helperText={helperText ? { text: 'Helper Text' } : undefined}
                 />
               </tet.div>
+              {state !== 'Checked' && (
+                <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
+                  <Checkbox
+                    isChecked={false}
+                    isIndeterminate={state === 'Indeterminate'}
+                    onChange={() => {}}
+                    state="alert"
+                    mt="$dimension-500"
+                    label={
+                      label
+                        ? 'Checkbox Label'
+                        : (undefined as unknown as string)
+                    }
+                    helperText={
+                      helperText ? { text: 'Helper Text' } : undefined
+                    }
+                  />
+                </tet.div>
+              )}
             </tet.div>
           </tet.div>
         ))}
diff --git a/src/docs-components/HelperTextDocs.tsx b/src/docs-components/HelperTextDocs.tsx
index 8ba915c2..e6727050 100644
--- a/src/docs-components/HelperTextDocs.tsx
+++ b/src/docs-components/HelperTextDocs.tsx
@@ -13,7 +13,7 @@ export const HelperTextDocs = () => (
           Intent: {intent}
         </SectionHeader>
         <tet.div py="$space-component-padding-4xLarge">
-          <HelperText intent={intent} text="Helper text" beforeIcon />
+          <HelperText intent={intent} text="Helper text" hasBeforeIcon />
         </tet.div>
       </tet.section>
     ))}
diff --git a/src/docs-components/IconButtonDocs.tsx b/src/docs-components/IconButtonDocs.tsx
index acf4ff7f..f9b532d0 100644
--- a/src/docs-components/IconButtonDocs.tsx
+++ b/src/docs-components/IconButtonDocs.tsx
@@ -62,6 +62,7 @@ export const IconButtonDocs = () => (
                 const iconButtonProps = {
                   appearance,
                   intent,
+                  variant,
                   icon: '20-placeholder',
                 } as IconButtonProps;
                 return (
diff --git a/src/docs-components/RadioButtonDocs.tsx b/src/docs-components/RadioButtonDocs.tsx
index 1572dfbe..e288345e 100644
--- a/src/docs-components/RadioButtonDocs.tsx
+++ b/src/docs-components/RadioButtonDocs.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { SectionHeader } from './common/SectionHeader';
 import { States } from './common/States';
 
-import { RadioButton, RadioButtonProps } from '@/components/RadioButton';
+import { RadioButton, type RadioButtonProps } from '@/components/RadioButton';
 import { tet } from '@/tetrisly';
 
 const getYesNo = (yes: boolean) => (yes ? 'Yes' : 'No');
@@ -43,7 +43,9 @@ export const RadioButtonDocs: FC = () => (
               labels={getLabels(label, helperText)}
             />
             <States
-              states={['normal', 'disabled', 'alert']}
+              states={['normal', 'disabled', 'alert'].filter(
+                (item) => !(state === 'Checked' && item === 'alert'),
+              )}
               flexBasis="130px"
               gap="$dimension-500"
             />
@@ -56,6 +58,7 @@ export const RadioButtonDocs: FC = () => (
               <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
                 <RadioButton
                   isChecked={state === 'Checked'}
+                  onChange={() => {}}
                   mt="$dimension-500"
                   {...({
                     label: label ? 'Checkbox Label' : undefined,
@@ -66,6 +69,7 @@ export const RadioButtonDocs: FC = () => (
               <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
                 <RadioButton
                   isChecked={state === 'Checked'}
+                  onChange={() => {}}
                   state="disabled"
                   mt="$dimension-500"
                   {...({
@@ -74,17 +78,20 @@ export const RadioButtonDocs: FC = () => (
                   } as RadioButtonProps)}
                 />
               </tet.div>
-              <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
-                <RadioButton
-                  isChecked={state === 'Checked'}
-                  state="alert"
-                  mt="$dimension-500"
-                  {...({
-                    label: label ? 'Checkbox Label' : undefined,
-                    helperText: helperText ? 'Helper Text' : undefined,
-                  } as RadioButtonProps)}
-                />
-              </tet.div>
+              {state !== 'Checked' && (
+                <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
+                  <RadioButton
+                    state="alert"
+                    isChecked={false}
+                    onChange={() => {}}
+                    mt="$dimension-500"
+                    {...({
+                      label: label ? 'Checkbox Label' : undefined,
+                      helperText: helperText ? 'Helper Text' : undefined,
+                    } as RadioButtonProps)}
+                  />
+                </tet.div>
+              )}
             </tet.div>
           </tet.div>
         ))}
diff --git a/src/docs-components/StatusDotDocs.tsx b/src/docs-components/StatusDotDocs.tsx
index d6d58b07..de514a8f 100644
--- a/src/docs-components/StatusDotDocs.tsx
+++ b/src/docs-components/StatusDotDocs.tsx
@@ -47,7 +47,7 @@ export const StatusDotDocs = () => (
               flexShrink="0"
               flexGrow="1"
             >
-              <StatusDot appearance={appearance} stroked />
+              <StatusDot appearance={appearance} hasStroke />
             </tet.div>
           ))}
         </tet.div>
diff --git a/src/docs-components/TagDocs.tsx b/src/docs-components/TagDocs.tsx
index b9c8a074..8ae0741c 100644
--- a/src/docs-components/TagDocs.tsx
+++ b/src/docs-components/TagDocs.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { Tag, TagProps } from '@/components/Tag';
+import { Tag, type TagProps } from '@/components/Tag';
 import { SectionHeader } from '@/docs-components/common/SectionHeader.tsx';
 import { States } from '@/docs-components/common/States.tsx';
 import { tet } from '@/tetrisly';
diff --git a/src/docs-components/TetDocs.tsx b/src/docs-components/TetDocs.tsx
index 88931c9a..1a4f1474 100644
--- a/src/docs-components/TetDocs.tsx
+++ b/src/docs-components/TetDocs.tsx
@@ -1,5 +1,5 @@
 import { Primary, Controls, Stories, useOf, Unstyled } from '@storybook/blocks';
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { z } from 'zod';
 
 import { Hero } from './common/Hero';
diff --git a/src/docs-components/common/Cols.tsx b/src/docs-components/common/Cols.tsx
index 41612a8e..98df4e80 100644
--- a/src/docs-components/common/Cols.tsx
+++ b/src/docs-components/common/Cols.tsx
@@ -1,9 +1,9 @@
-import { GapProps } from '@xstyled/styled-components';
-import { FC } from 'react';
+import type { GapProps } from '@xstyled/styled-components';
+import type { FC } from 'react';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
-import { PaddingProps } from '@/types/PaddingProps';
+import type { MarginProps } from '@/types/MarginProps';
+import type { PaddingProps } from '@/types/PaddingProps';
 
 type ColsProps = {
   columns?: number;
diff --git a/src/docs-components/common/Hero.tsx b/src/docs-components/common/Hero.tsx
index ba9c0ba0..c364e6da 100644
--- a/src/docs-components/common/Hero.tsx
+++ b/src/docs-components/common/Hero.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { Logo } from './Logo';
 import { TetrislyMark } from './TetrislyMark';
diff --git a/src/docs-components/common/SectionHeader.tsx b/src/docs-components/common/SectionHeader.tsx
index dd6f4466..334f87cc 100644
--- a/src/docs-components/common/SectionHeader.tsx
+++ b/src/docs-components/common/SectionHeader.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 
 import { tet } from '@/tetrisly';
 import { BaseProps } from '@/types';
@@ -22,12 +22,12 @@ export const SectionHeader = ({
     <tet.div display="flex" gap="8px">
       {labels.map((l, i) =>
         i !== 0 ? (
-          <>
+          <Fragment key={l}>
             <tet.span>·</tet.span>
             <tet.span>{l}</tet.span>
-          </>
+          </Fragment>
         ) : (
-          <tet.span>{l}</tet.span>
+          <tet.span key={l}>{l}</tet.span>
         ),
       )}
     </tet.div>
diff --git a/src/docs-components/common/States.tsx b/src/docs-components/common/States.tsx
index 1d8f93b2..725fa397 100644
--- a/src/docs-components/common/States.tsx
+++ b/src/docs-components/common/States.tsx
@@ -1,38 +1,50 @@
-import {
+import type {
   FlexBasisProps,
   GapProps,
   WidthProps,
 } from '@xstyled/styled-components';
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { tet } from '@/tetrisly';
 
-export const States: FC<{
+type StatesProps = {
   states: string[] | readonly string[];
   gap?: GapProps['gap'];
   itemWidth?: WidthProps['w'];
   flexBasis?: FlexBasisProps['flexBasis'];
-}> = ({ states, gap, itemWidth, flexBasis }) => (
+};
+
+export const State: FC<
+  Pick<StatesProps, 'itemWidth' | 'flexBasis'> & { state: string }
+> = ({ state, itemWidth, flexBasis }) => (
+  <tet.div w={itemWidth} flexShrink="0" flexBasis={flexBasis} flexGrow="1">
+    <tet.span text="$typo-body-medium">
+      <tet.mark
+        borderRadius="$border-radius-small"
+        bg="$color-nonSemantic-orange-background-onSubtle"
+        px="$space-component-padding-2xSmall"
+        color="$color-content-primary"
+      >
+        {state}
+      </tet.mark>
+    </tet.span>
+  </tet.div>
+);
+
+export const States: FC<StatesProps> = ({
+  states,
+  gap,
+  itemWidth,
+  flexBasis,
+}) => (
   <tet.div display="flex" gap={gap} py="$dimension-300">
     {states.map((state) => (
-      <tet.div
+      <State
         key={state}
-        w={itemWidth}
-        flexShrink="0"
+        state={state}
+        itemWidth={itemWidth}
         flexBasis={flexBasis}
-        flexGrow="1"
-      >
-        <tet.span text="$typo-body-medium">
-          <tet.mark
-            borderRadius="$border-radius-small"
-            bg="$color-nonSemantic-orange-background-onSubtle"
-            px="$space-component-padding-2xSmall"
-            color="$color-content-primary"
-          >
-            {state}
-          </tet.mark>
-        </tet.span>
-      </tet.div>
+      />
     ))}
   </tet.div>
 );
diff --git a/src/index.ts b/src/index.ts
index f44a5d0a..5de5e0f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,3 +23,4 @@ export * from './components/StatusDot';
 export * from './components/TextInput';
 export * from './components/Toast';
 export * from './tetrisly';
+export * from './theme';