From 96dade90dc6ab180cffd3b3bec7a394ff395a56e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Mon, 6 Nov 2023 10:14:26 +0100
Subject: [PATCH] Revert "Chore/review components (#93)" (#94)

This reverts commit 3e62507b481862f1a126d46af75f44554d0b73e0.
---
 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, 328 insertions(+), 626 deletions(-)
 delete mode 100644 src/components/TextInput/useTextInput.ts

diff --git a/README.md b/README.md
index 15780f65..cd335c65 100644
--- a/README.md
+++ b/README.md
@@ -191,41 +191,6 @@ 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 ef691bdb..70abdb2e 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
   "exports": {
     ".": {
       "import": "./dist/tetrisly-react.es.js",
-      "require": "./dist/tetrisly-react.umd.js"
+      "require": "./dist/tetrisly-react.umd.cjs"
     }
   },
   "repository": {
diff --git a/src/components/AlertBanner/AlertBanner.stories.tsx b/src/components/AlertBanner/AlertBanner.stories.tsx
index a09c883d..ff3b4261 100644
--- a/src/components/AlertBanner/AlertBanner.stories.tsx
+++ b/src/components/AlertBanner/AlertBanner.stories.tsx
@@ -23,13 +23,6 @@ const meta = {
       },
     ],
   },
-  argTypes: {
-    intent: {
-      options: ['none', 'success', 'warning', 'negative'],
-      defaultValue: 'none',
-      control: { type: 'radio' },
-    },
-  },
   parameters: {
     docs: {
       description: {
@@ -53,7 +46,7 @@ export const Default: Story = {};
 
 export const Positive: Story = {
   args: {
-    intent: 'success',
+    intent: 'positive',
   },
 };
 
diff --git a/src/components/AlertBanner/AlertBanner.styles.ts b/src/components/AlertBanner/AlertBanner.styles.ts
index 2de57dba..4ec1bba4 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',
     },
-    success: {
+    positive: {
       backgroundColor: '$color-background-positive-strong',
       color: '$color-content-primary-inverted',
     },
@@ -53,13 +53,13 @@ export const defaultConfig = {
   },
 } satisfies AlertBannerConfig;
 
-export const resolveIconName = (intent: AlertBannerIntent) => {
-  const iconConfig = {
+export const resolveIconName = (intent: AlertBannerIntent): IconName<20> => {
+  const iconConfig: Record<AlertBannerIntent, IconName<20>> = {
     none: '20-info-fill',
-    success: '20-check-circle-fill',
+    positive: '20-info-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 b11e30f1..af0d8dc0 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 (success)', () => {
+  it('should render correct intent color (positive)', () => {
     const alertBanner = getAlertBanner(
-      <AlertBanner text="Alert" intent="success" />,
+      <AlertBanner text="Alert" intent="positive" />,
     );
     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 ba47c21d..67b0d85d 100644
--- a/src/components/AlertBanner/types/AlertBannerIntent.type.ts
+++ b/src/components/AlertBanner/types/AlertBannerIntent.type.ts
@@ -1 +1 @@
-export type AlertBannerIntent = 'none' | 'success' | 'warning' | 'negative';
+export type AlertBannerIntent = 'none' | 'positive' | 'warning' | 'negative';
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
index bf2e0094..62ce878b 100644
--- a/src/components/Avatar/Avatar.stories.tsx
+++ b/src/components/Avatar/Avatar.stories.tsx
@@ -17,12 +17,9 @@ 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 97219011..59f6e2f1 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-grey-content-primary',
+          color: '$color-nonSemantic-white-content-primary',
           backgroundColor: '$color-nonSemantic-orange-background-strong',
         },
         low: {
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 8eeabe13..dcfc429d 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -1,4 +1,4 @@
-import { type FC, useMemo } from 'react';
+import { 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 00108887..e25e7f97 100644
--- a/src/components/Avatar/types/AvatarAppearance.type.ts
+++ b/src/components/Avatar/types/AvatarAppearance.type.ts
@@ -1,20 +1,17 @@
-export const avatarAppearanceColors = [
-  'blue',
-  'green',
-  'grey',
-  'red',
-  'orange',
-  'raspberry',
-  'magenta',
-  'purple',
-  'grape',
-  'violet',
-  'cyan',
-  'teal',
-  'aquamarine',
-  'emerald',
-] as const;
+export type AvatarAppearanceColors =
+  | 'blue'
+  | 'green'
+  | 'grey'
+  | 'red'
+  | 'orange'
+  | 'raspberry'
+  | 'magenta'
+  | 'purple'
+  | 'grape'
+  | 'violet'
+  | 'cyan'
+  | 'teal'
+  | 'aquamarine'
+  | 'emerald';
 
-export type AvatarAppearanceColors = (typeof avatarAppearanceColors)[number];
-
-export type AvatarAppearance = 'image' | AvatarAppearanceColors;
+export type AvatarAppearance = AvatarAppearanceColors | 'image';
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 21cc936a..01acc2f7 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -1,7 +1,6 @@
 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';
@@ -10,14 +9,6 @@ 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 e821e272..84980b9f 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-subtle',
+          borderColor: '$color-nonSemantic-grey-border-strong',
           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 220cad8a..23367160 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,11 +1,11 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { type FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
-import type { BadgeProps } from './Badge.props';
+import { BadgeProps } from './Badge.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import type { MarginProps } from '@/types/MarginProps';
+import { 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 0fab6d26..c05997a3 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -23,16 +23,6 @@ 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 ea288cee..c5aba8d7 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-xSmall',
+  gap: '$space-component-gap-small',
   w: 'fit-content',
   justifyContent: 'center',
   alignItems: 'center',
@@ -304,7 +304,7 @@ const defaultButtonConfig = {
 
 const ghostButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-large',
+  borderRadius: '$border-radius-medium',
   backgroundColor: {
     _: 'transparent',
     hover: '$color-action-ghost-hover',
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b6abe707..fb786988 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { type FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
-import type { ButtonProps } from './Button.props';
+import { 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-small" />}
+      {dropdown && <Icon name="20-chevron-down" />}
       {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 bbfdc889..348b9228 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-xSmall',
+        gap: '$space-component-gap-small',
         justifyContent: 'center',
         opacity: {
           disabled: '$opacity-disabled',
diff --git a/src/components/Checkbox/Checkbox.props.ts b/src/components/Checkbox/Checkbox.props.ts
index 2568a1cf..7201ec84 100644
--- a/src/components/Checkbox/Checkbox.props.ts
+++ b/src/components/Checkbox/Checkbox.props.ts
@@ -1,7 +1,6 @@
 import type { InputHTMLAttributes } from 'react';
 
 import type { CheckboxConfig } from './Checkbox.styles';
-import { HelperTextProps } from '../HelperText';
 
 export type CheckboxProps = {
   isChecked?: boolean;
@@ -14,11 +13,5 @@ export type CheckboxProps = {
 > &
   (
     | { label?: string; helperText?: never }
-    | {
-        label: string;
-        helperText?: Pick<
-          HelperTextProps,
-          'hasBeforeIcon' | 'counter' | 'text'
-        >;
-      }
+    | { label: string; helperText?: string }
   );
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 8e15917a..a274888e 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -11,14 +11,6 @@ const meta = {
   title: 'Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
-  argTypes: {
-    state: {
-      control: {
-        type: 'select',
-        options: [undefined, 'disabled', 'alert'],
-      },
-    },
-  },
   parameters: {
     docs: {
       description: {
@@ -42,7 +34,6 @@ export const Default: Story = {};
 export const Checked: Story = {
   args: {
     isChecked: true,
-    onChange: () => {},
   },
 };
 
@@ -96,7 +87,7 @@ export const Alert: Story = {
   args: {
     state: 'alert',
     label: 'Label',
-    helperText: { text: 'Helper text' },
+    helperText: 'Helper text',
   },
 };
 
@@ -109,6 +100,6 @@ export const Label: Story = {
 export const HelperText: Story = {
   args: {
     label: 'Label',
-    helperText: { text: 'Helper text' },
+    helperText: 'Helper text',
   },
 };
diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
index 97903333..a1d20e94 100644
--- a/src/components/Checkbox/Checkbox.test.tsx
+++ b/src/components/Checkbox/Checkbox.test.tsx
@@ -19,19 +19,16 @@ const getCheckbox = (jsx: JSX.Element) => {
 };
 
 describe('Checkbox', () => {
-  customPropTester(
-    <Checkbox label="Label" helperText={{ text: 'Helper Text' }} />,
-    {
-      containerId: 'checkbox',
-      innerElements: {
-        input: [],
-        checkboxContainer: [],
-        checkboxIcon: [],
-        label: [],
-        helperText: [],
-      },
+  customPropTester(<Checkbox label="Label" helperText="Helper Text" />, {
+    containerId: 'checkbox',
+    innerElements: {
+      input: [],
+      checkboxContainer: [],
+      checkboxIcon: [],
+      label: [],
+      helperText: [],
     },
-  );
+  });
 
   beforeEach(() => {
     handleEventMock.mockReset();
@@ -104,7 +101,7 @@ describe('Checkbox', () => {
 
   it('should render helper text if props provided', () => {
     const { label, helperText } = getCheckbox(
-      <Checkbox label="Label" helperText={{ text: 'Helper text' }} />,
+      <Checkbox label="Label" helperText="Helper text" />,
     );
 
     expect(label).toHaveTextContent('Label');
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 981981c3..988de100 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -34,7 +34,6 @@ export const Checkbox = forwardRef<
       label,
       helperText,
       custom,
-      onChange,
       ...restProps
     },
     checkboxForwardRef,
@@ -65,15 +64,6 @@ 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}
@@ -83,8 +73,7 @@ export const Checkbox = forwardRef<
           {...styles.input}
           type="checkbox"
           ref={checkboxRef}
-          checked={isChecked && !isIndeterminate}
-          onChange={onChange}
+          checked={isChecked}
           disabled={state === 'disabled'}
           data-state={state}
           id={checkboxId}
@@ -125,7 +114,8 @@ export const Checkbox = forwardRef<
           <HelperText
             custom={styles.helperText}
             intent={state === 'alert' ? 'alert' : 'none'}
-            {...helperText}
+            beforeIcon={state === 'alert'}
+            text={helperText}
             data-testid="checkbox-helperText"
           />
         )}
diff --git a/src/components/CheckboxGroup/CheckboxGroup.tsx b/src/components/CheckboxGroup/CheckboxGroup.tsx
index 9a1700da..22f8e23a 100644
--- a/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -1,23 +1,25 @@
 import {
   Children,
   FC,
-  ForwardRefExoticComponent,
   isValidElement,
   PropsWithChildren,
   useMemo,
 } from 'react';
 
-import type { CheckboxGroupProps } from './CheckboxGroup.props';
+import type {
+  CheckboxGroupProps,
+  CheckboxGroupItemProps,
+} from './CheckboxGroup.props';
 import { stylesBuilder } from './stylesBuilder';
-import { Checkbox, type CheckboxProps } from '../Checkbox';
+import { Checkbox } from '../Checkbox';
 import { HelperText } from '../HelperText';
 import { Label } from '../Label';
 
 import { tet } from '@/tetrisly';
-import type { MarginProps } from '@/types';
+import { MarginProps } from '@/types';
 
 type Props = FC<PropsWithChildren<CheckboxGroupProps & MarginProps>> & {
-  Item: ForwardRefExoticComponent<CheckboxProps & MarginProps>;
+  Item: FC<CheckboxGroupItemProps>;
 };
 
 export const CheckboxGroup: Props = ({
@@ -79,4 +81,4 @@ export const CheckboxGroup: Props = ({
   );
 };
 
-CheckboxGroup.Item = Checkbox;
+CheckboxGroup.Item = Checkbox as FC<CheckboxGroupItemProps>;
diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
index 2a8a1640..a5f0a7a5 100644
--- a/src/components/Counter/Counter.tsx
+++ b/src/components/Counter/Counter.tsx
@@ -1,4 +1,4 @@
-import { type FC, useMemo } from 'react';
+import { 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 000c154b..251b228c 100644
--- a/src/components/Divider/Divider.stories.tsx
+++ b/src/components/Divider/Divider.stories.tsx
@@ -9,11 +9,6 @@ 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 18ea0181..f54af6d1 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -1,4 +1,4 @@
-import { type FC, useMemo } from 'react';
+import { 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 9dcbf219..4aa056e3 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;
   };
-  hasBeforeIcon?: boolean;
+  beforeIcon?: boolean;
   text: string;
   custom?: HelperTextConfig;
 };
diff --git a/src/components/HelperText/HelperText.stories.tsx b/src/components/HelperText/HelperText.stories.tsx
index 877c6885..996e1b70 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: {
-    hasBeforeIcon: true,
+    beforeIcon: true,
   },
 };
 
diff --git a/src/components/HelperText/HelperText.test.tsx b/src/components/HelperText/HelperText.test.tsx
index 6f37dbae..7e1e278a 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" hasBeforeIcon />, {
+  customPropTester(<HelperText text="Hello there" beforeIcon />, {
     containerId: 'helper-text',
     props: {
       intent: ['none', 'success', 'alert'],
@@ -39,7 +39,7 @@ describe('HelperText', () => {
       <HelperText
         text="Hello there"
         intent="none"
-        hasBeforeIcon
+        beforeIcon
         counter={{ current: 0, max: 0 }}
       />,
     );
@@ -53,7 +53,7 @@ describe('HelperText', () => {
       <HelperText
         text="Hello there"
         intent="alert"
-        hasBeforeIcon
+        beforeIcon
         counter={{ current: 0, max: 0 }}
       />,
     );
@@ -67,7 +67,7 @@ describe('HelperText', () => {
       <HelperText
         text="Hello there"
         intent="success"
-        hasBeforeIcon
+        beforeIcon
         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" hasBeforeIcon />,
+      <HelperText text="Hello there" beforeIcon />,
     );
     expect(icon).toBeInTheDocument();
   });
diff --git a/src/components/HelperText/HelperText.tsx b/src/components/HelperText/HelperText.tsx
index 09b20e61..aea9c916 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',
-  hasBeforeIcon = false,
+  beforeIcon = false,
   counter,
   text,
   custom,
@@ -21,7 +21,7 @@ export const HelperText: FC<HelperTextProps & MarginProps> = ({
 
   return (
     <tet.div {...styles.container} data-testid="helper-text" {...restProps}>
-      {hasBeforeIcon && (
+      {beforeIcon && (
         <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 e1e00ece..c5652e69 100644
--- a/src/components/IconButton/IconButton.styles.ts
+++ b/src/components/IconButton/IconButton.styles.ts
@@ -66,10 +66,8 @@ export const defaultConfig = {
   bare: {
     ...config,
     size: {
-      medium: {
-        w: 'fit-content',
-        h: 'fit-content',
-      },
+      medium: size.medium,
+      large: size.medium,
     },
   },
 } satisfies ButtonConfig;
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index c0884886..a55508bb 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -1,11 +1,11 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
 import { IconButtonProps } from './IconButton.props';
 import { defaultConfig } from './IconButton.styles';
-import { Button, type ButtonProps } from '../Button';
+import { Button, ButtonProps } from '../Button';
 
 import { mergeConfigWithCustom } from '@/services';
-import type { MarginProps } from '@/types';
+import { MarginProps } from '@/types';
 
 const mapperIconButtonPropsToButtonProps = ({
   children,
diff --git a/src/components/InlineBanner/InlineBanner.styles.ts b/src/components/InlineBanner/InlineBanner.styles.ts
index a764502b..27fc1d96 100644
--- a/src/components/InlineBanner/InlineBanner.styles.ts
+++ b/src/components/InlineBanner/InlineBanner.styles.ts
@@ -77,7 +77,6 @@ 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 389bcb90..e5deb349 100644
--- a/src/components/InlineBanner/InlineBanner.tsx
+++ b/src/components/InlineBanner/InlineBanner.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { type FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import type { InlineBannerProps } from './InlineBanner.props';
 import { resolveIconName } from './InlineBanner.styles';
@@ -30,12 +30,7 @@ export const InlineBanner: FC<InlineBannerProps & MarginProps> = ({
   const iconName = useMemo(() => resolveIconName(intent), [intent]);
 
   return (
-    <tet.div
-      {...styles.container}
-      style={{ wordBreak: 'break-word' }}
-      data-testid="inline-banner"
-      {...restProps}
-    >
+    <tet.div {...styles.container} 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 8eaab104..db38493e 100644
--- a/src/components/InlineMessage/InlineMessage.tsx
+++ b/src/components/InlineMessage/InlineMessage.tsx
@@ -1,12 +1,12 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { type FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
-import type { InlineMessageProps } from './InlineMessage.props';
+import { InlineMessageProps } from './InlineMessage.props';
 import { resolveIconName } from './InlineMessage.styles';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 
-import type { MarginProps } from '@/types/MarginProps';
+import { 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 1cd61da8..42bdc85b 100644
--- a/src/components/InlineSearchInput/InlineSearchInput.tsx
+++ b/src/components/InlineSearchInput/InlineSearchInput.tsx
@@ -1,11 +1,11 @@
-import { type FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
-import type { InlineSearchInputProps } from './InlineSearchInput.props';
+import { InlineSearchInputProps } from './InlineSearchInput.props';
 import { defaultConfig } from './InlineSearchInput.styles';
 import { SearchInput } from '../SearchInput';
 
 import { mergeConfigWithCustom } from '@/services';
-import type { MarginProps } from '@/types';
+import { 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 54d4af35..ff2fe2be 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,12 +1,12 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { type FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import type { LabelProps } from './Label.props';
 import { stylesBuilder } from './stylesBuilder';
 import { Button } from '../Button';
 
 import { tet } from '@/tetrisly';
-import type { MarginProps } from '@/types/MarginProps';
+import { 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 063fe11b..2f0fe253 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -1,15 +1,13 @@
-import { type FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { AnimatedProgress } from './AnimatedProgress';
-import type { LoaderProps } from './Loader.props';
+import { LoaderProps } from './Loader.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import type { MarginProps } from '@/types';
+import { MarginProps } from '@/types';
 
-type NewType = FC<LoaderProps & MarginProps>;
-
-export const Loader: NewType = ({
+export const Loader: FC<LoaderProps & MarginProps> = ({
   appearance = 'primary',
   progress,
   shape,
diff --git a/src/components/Popover/Popover.styles.ts b/src/components/Popover/Popover.styles.ts
index 3e82b502..81c1ed7e 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-small',
+      ring: '$border-width-focus',
       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 089dea65..e9d53f13 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -1,5 +1,5 @@
 import { useSpace } from '@xstyled/styled-components';
-import { type PropsWithChildren, useMemo, type FC } from 'react';
+import { FC, PropsWithChildren, useMemo } 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 9ec25e45..75679ecc 100644
--- a/src/components/RadioButton/RadioButton.stories.tsx
+++ b/src/components/RadioButton/RadioButton.stories.tsx
@@ -32,7 +32,6 @@ 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 c3b33803..ebcc14ee 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -13,7 +13,7 @@ export const RadioButton = forwardRef<
   RadioButtonProps & MarginProps
 >(
   (
-    { isChecked, onChange, state, label, helperText, custom, ...restProps },
+    { isChecked, state, label, helperText, custom, ...restProps },
     radioButtonRef,
   ) => {
     const [radioButtonProps, containerProps] = extractInputProps(restProps);
@@ -22,28 +22,12 @@ 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}
@@ -74,8 +58,8 @@ export const RadioButton = forwardRef<
         {!!helperText && (
           <HelperText
             custom={styles.helperText}
-            intent={isAlert ? 'alert' : 'none'}
-            hasBeforeIcon={isAlert}
+            intent={state === 'alert' ? 'alert' : 'none'}
+            beforeIcon={state === 'alert'}
             text={helperText}
             data-testid="radio-button-helperText"
           />
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/src/components/RadioButtonGroup/RadioButtonGroup.tsx
index 523cc028..0210dbc0 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,10 +1,10 @@
 import {
   Children,
   cloneElement,
-  type FC,
+  FC,
   isValidElement,
-  type PropsWithChildren,
-  type ReactElement,
+  PropsWithChildren,
+  ReactElement,
   useMemo,
 } from 'react';
 
@@ -21,7 +21,7 @@ import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
 type Props = FC<PropsWithChildren<RadioButtonGroupProps & MarginProps>> & {
-  Item: FC<RadioButtonGroupItemProps>;
+  Item: React.FC<RadioButtonGroupItemProps>;
 };
 
 export const RadioButtonGroup: Props = ({
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 63e51821..3c136fdb 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,9 +1,9 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import type { SearchInputProps } from './SearchInput.props';
-import { TextInput, type TextInputProps } from '../TextInput';
+import { SearchInputProps } from './SearchInput.props';
+import { TextInput, TextInputProps } from '../TextInput';
 
-import type { MarginProps } from '@/types';
+import { 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 135352d7..59d2bc62 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('select'),
-    input: getByTestId('select-input') as HTMLInputElement,
-    beforeComponent: queryByTestId('select-before-component'),
+    textInput: getByTestId('text-input'),
+    input: getByTestId('text-input-input') as HTMLInputElement,
+    beforeComponent: queryByTestId('text-input-before-component'),
   };
 };
 
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 0870600e..395c12fb 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,91 +1,17 @@
-import { Icon } from '@virtuslab/tetrisly-icons';
-import type { FC } from 'react';
+import { FC } from 'react';
 
-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 { SelectProps } from './Select.props';
+import { TextInput, TextInputProps } from '../TextInput';
 
-import { tet } from '@/tetrisly';
-import type { MarginProps } from '@/types';
+import { MarginProps } from '@/types';
 
-const DROPDOWN_INDICATOR_COMPONENT = {
+const DROPDOWN_INDICATOR_COMPONENT: TextInputProps['afterComponent'] = {
   type: 'IconButton',
   props: {
     icon: '20-chevron-down-small',
   },
-} satisfies TextInputProps['afterComponent'];
-
-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>
-  );
 };
+
+export const Select: FC<SelectProps & MarginProps> = (props) => (
+  <TextInput afterComponent={DROPDOWN_INDICATOR_COMPONENT} {...props} />
+);
diff --git a/src/components/SocialButton/SocialButton.tsx b/src/components/SocialButton/SocialButton.tsx
index 9a627614..b320f981 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 type { MarginProps } from '@/types';
+import { 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 5d67f362..7a81222a 100644
--- a/src/components/SocialButton/socials/Apple.tsx
+++ b/src/components/SocialButton/socials/Apple.tsx
@@ -1,6 +1,6 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import type { SocialProps } from './SocialProps';
+import { 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 8e57632d..feaa7a20 100644
--- a/src/components/SocialButton/socials/Facebook.tsx
+++ b/src/components/SocialButton/socials/Facebook.tsx
@@ -1,20 +1,20 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import type { SocialProps } from './SocialProps';
+import { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 export const Facebook: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="facebook-icon"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
     >
       <path
-        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"
+        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"
         fill={fill}
       />
     </svg>
diff --git a/src/components/SocialButton/socials/Figma.tsx b/src/components/SocialButton/socials/Figma.tsx
index 17dad1d2..687a1bf1 100644
--- a/src/components/SocialButton/socials/Figma.tsx
+++ b/src/components/SocialButton/socials/Figma.tsx
@@ -1,40 +1,40 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import type { SocialProps } from './SocialProps';
+import { SocialProps } from './SocialProps';
 import { WithLoader } from './WithLoader';
 
 export const Figma: FC<SocialProps> = ({ fill, loading }) => (
   <WithLoader loading={loading}>
     <svg
       data-testid="figma-icon"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="20"
+      viewBox="0 0 14 20"
+      fill={fill === 'white' ? 'black' : 'white'}
     >
       <path
-        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"
+        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"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        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"
+        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"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        d="M4 3.99999C4 2.344 5.344 1 6.99999 1H9.99999V6.99999H6.99999C5.344 6.99999 4 5.65599 4 3.99999Z"
+        d="M1 3.99999C1 2.344 2.344 1 3.99999 1H6.99999V6.99999H3.99999C2.344 6.99999 1 5.65599 1 3.99999Z"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        d="M10 1H13C14.656 1 16 2.344 16 3.99999C16 5.65599 14.656 6.99999 13 6.99999H10V1Z"
+        d="M7 1H9.99999C11.656 1 13 2.344 13 3.99999C13 5.65599 11.656 6.99999 9.99999 6.99999H7V1Z"
         stroke={fill}
         strokeWidth="1.5"
       />
       <path
-        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"
+        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"
         stroke={fill}
         strokeWidth="1.5"
       />
diff --git a/src/components/SocialButton/socials/Github.tsx b/src/components/SocialButton/socials/Github.tsx
index 37e97b4d..78815b36 100644
--- a/src/components/SocialButton/socials/Github.tsx
+++ b/src/components/SocialButton/socials/Github.tsx
@@ -1,6 +1,6 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import type { SocialProps } from './SocialProps';
+import { 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 604c4210..d9824325 100644
--- a/src/components/SocialButton/socials/Google.tsx
+++ b/src/components/SocialButton/socials/Google.tsx
@@ -1,6 +1,6 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import type { SocialProps } from './SocialProps';
+import { 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
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
     >
       <WithLoader loading={loading}>
         <path
-          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"
+          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"
           fill="#4285F4"
         />
         <path
-          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"
+          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"
           fill="#34A853"
         />
         <path
-          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"
+          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"
           fill="#FBBC05"
         />
         <path
-          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"
+          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"
           fill="#EA4335"
         />
       </WithLoader>
diff --git a/src/components/SocialButton/socials/Twitter.tsx b/src/components/SocialButton/socials/Twitter.tsx
index d8e79eb6..41cc707e 100644
--- a/src/components/SocialButton/socials/Twitter.tsx
+++ b/src/components/SocialButton/socials/Twitter.tsx
@@ -1,6 +1,6 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import type { SocialProps } from './SocialProps';
+import { 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 3acb885b..c3d30e09 100644
--- a/src/components/SocialButton/socials/WithLoader.tsx
+++ b/src/components/SocialButton/socials/WithLoader.tsx
@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import { 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 b2423463..89dcd48f 100644
--- a/src/components/SocialButton/socials/socials.ts
+++ b/src/components/SocialButton/socials/socials.ts
@@ -1,13 +1,13 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
 import { Apple } from './Apple';
 import { Facebook } from './Facebook';
 import { Figma } from './Figma';
 import { Github } from './Github';
 import { Google } from './Google';
-import type { SocialProps } from './SocialProps';
+import { SocialProps } from './SocialProps';
 import { Twitter } from './Twitter';
-import type { SocialButtonProps } from '../SocialButton.props';
+import { 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 2db120db..c6fd111e 100644
--- a/src/components/StatusDot/StatusDot.props.ts
+++ b/src/components/StatusDot/StatusDot.props.ts
@@ -3,7 +3,6 @@ import type { StatusDotAppearance } from './types';
 
 export type StatusDotProps = {
   appearance?: StatusDotAppearance;
-  /** You can change the color of a stroke using the custom prop */
-  hasStroke?: boolean;
+  stroked?: boolean;
   custom?: StatusDotConfig;
 };
diff --git a/src/components/StatusDot/StatusDot.stories.tsx b/src/components/StatusDot/StatusDot.stories.tsx
index 4f16f14f..c6886893 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: {
-    hasStroke: false,
+    stroked: false,
   },
   parameters: {
     backgrounds: {
@@ -38,7 +38,7 @@ export const Default: Story = {
 export const Stroked: Story = {
   args: {
     appearance: 'green',
-    hasStroke: true,
+    stroked: true,
   },
   parameters: {
     backgrounds: {
diff --git a/src/components/StatusDot/StatusDot.styles.ts b/src/components/StatusDot/StatusDot.styles.ts
index e0e22660..ee972ec1 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>>;
-  hasStroke?: BaseProps;
+  stroked?: BaseProps;
 } & BaseProps;
 
 export const defaultConfig = {
@@ -22,7 +22,7 @@ export const defaultConfig = {
       backgroundColor: '$color-nonSemantic-orange-background-strong',
     },
   },
-  hasStroke: {
+  stroked: {
     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 b8581769..a83574a4 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 hasStroke />);
+    const statusDotStroked = getStatusDot(<StatusDot stroked />);
     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'],
-      hasStroke: [],
+      stroked: [],
     },
   });
 });
diff --git a/src/components/StatusDot/StatusDot.tsx b/src/components/StatusDot/StatusDot.tsx
index 0a673afa..6386b5fd 100644
--- a/src/components/StatusDot/StatusDot.tsx
+++ b/src/components/StatusDot/StatusDot.tsx
@@ -1,4 +1,4 @@
-import { type FC, useMemo } from 'react';
+import { 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',
-  hasStroke = false,
+  stroked = false,
   custom,
   ...restProps
 }) => {
   const styles = useMemo(
-    () => stylesBuilder({ appearance, hasStroke, custom }),
-    [appearance, hasStroke, custom],
+    () => stylesBuilder({ appearance, stroked, custom }),
+    [appearance, stroked, custom],
   );
 
   return (
diff --git a/src/components/StatusDot/stylesBuilder/stylesBuilder.ts b/src/components/StatusDot/stylesBuilder/stylesBuilder.ts
index f5adb7bb..f7e922e5 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;
-  hasStroke: StatusDotProps['hasStroke'];
+  stroked: StatusDotProps['stroked'];
   custom: StatusDotProps['custom'];
 };
 
@@ -17,14 +17,14 @@ type StatusDotStylesBuilder = {
 
 export const stylesBuilder = ({
   appearance,
-  hasStroke,
+  stroked,
   custom,
 }: StylesBuilderParams): StatusDotStylesBuilder => {
   const config = mergeConfigWithCustom({ defaultConfig, custom });
 
   const {
     appearance: appearanceStyles,
-    hasStroke: strokedStyles,
+    stroked: strokedStyles,
     ...restStyles
   } = config;
 
@@ -32,7 +32,7 @@ export const stylesBuilder = ({
     container: {
       ...restStyles,
       ...appearanceStyles[appearance],
-      ...(hasStroke && strokedStyles),
+      ...(stroked && strokedStyles),
     },
   };
 };
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 4fe09243..301dba37 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -1,19 +1,19 @@
 import {
-  type KeyboardEventHandler,
-  type MouseEventHandler,
+  FC,
+  KeyboardEventHandler,
+  MouseEventHandler,
   useCallback,
   useMemo,
   useRef,
-  FC,
 } from 'react';
 
 import { stylesBuilder } from './stylesBuilder';
-import type { TagProps } from './Tag.props';
+import { TagProps } from './Tag.props';
 import { Avatar } from '../Avatar';
 import { IconButton } from '../IconButton';
 
 import { tet } from '@/tetrisly';
-import type { MarginProps } from '@/types';
+import { 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 7d99b73e..e1fcba08 100644
--- a/src/components/TextInput/TextInput.styles.ts
+++ b/src/components/TextInput/TextInput.styles.ts
@@ -23,7 +23,6 @@ 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 d9b06d80..b82c4b46 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -1,12 +1,22 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { forwardRef } from 'react';
+import {
+  forwardRef,
+  useRef,
+  useCallback,
+  useState,
+  ChangeEventHandler,
+  MouseEventHandler,
+  ChangeEvent,
+  useMemo,
+} 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';
 
@@ -21,25 +31,45 @@ export const TextInput = forwardRef<
       afterComponent,
       state,
       hasClearButton,
+      custom,
       value,
+      onChange,
       ...restProps
     },
     inputRef,
   ) => {
-    const {
-      containerRef,
-      handleContainerClick,
-      styles,
-      containerProps,
-      innerValue,
-      handleOnChange,
-      handleOnClear,
-      textInputProps,
-    } = useTextInput({
-      beforeComponent,
-      afterComponent,
-      ...restProps,
-    });
+    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 (
       <tet.div
@@ -47,7 +77,7 @@ export const TextInput = forwardRef<
         onClick={handleContainerClick}
         {...styles.container}
         pl={!!beforeComponent && '0'}
-        pr={(!!afterComponent || !!hasClearButton) && '0'}
+        pr={!!afterComponent && '0'}
         data-testid="text-input"
         data-state={state}
         tabIndex={0}
diff --git a/src/components/TextInput/useTextInput.ts b/src/components/TextInput/useTextInput.ts
deleted file mode 100644
index b341ca90..00000000
--- a/src/components/TextInput/useTextInput.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-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 ac6c6a53..17544061 100644
--- a/src/components/Toast/Toast.styles.ts
+++ b/src/components/Toast/Toast.styles.ts
@@ -30,10 +30,9 @@ export type ToastConfig = {
 export const defaultConfig = {
   display: 'inline-flex',
   alignItems: 'center',
-  h: '48px',
+  p: '$space-component-padding-medium $space-component-padding-large',
   padding: '$space-component-padding-medium $space-component-padding-large',
   borderRadius: '$border-radius-large',
-  text: '$typo-body-medium',
   emphasis: {
     high: {},
     low: {
@@ -136,6 +135,7 @@ 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 41c344dd..2f0881ca 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { type FC, useMemo } from 'react';
+import { 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 d0989193..f6e72700 100644
--- a/src/components/Toast/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Toast/stylesBuilder/stylesBuilder.ts
@@ -52,17 +52,11 @@ export const stylesBuilder = ({
     ...restIconContainerStyles,
   };
 
-  const { emphasis: emphasisMiddleDotStyles, ...restMiddleDotStyles } =
-    middleDot;
-
   return {
     container,
     actionContainer,
     iconContainer,
     closeButton,
-    middleDot: {
-      ...restMiddleDotStyles,
-      ...emphasisMiddleDotStyles[props.emphasis],
-    },
+    middleDot,
   };
 };
diff --git a/src/docs-components/AlertBannerDocs.tsx b/src/docs-components/AlertBannerDocs.tsx
index f636d478..e6e59880 100644
--- a/src/docs-components/AlertBannerDocs.tsx
+++ b/src/docs-components/AlertBannerDocs.tsx
@@ -4,15 +4,9 @@ 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',
-  'success',
-  'warning',
-  'negative',
-] satisfies AlertBannerIntent[];
+const intents = ['none', 'positive', 'warning', 'negative'] as const;
 
 export const AlertBannerDocs = () => (
   <>
diff --git a/src/docs-components/AvatarDocs.tsx b/src/docs-components/AvatarDocs.tsx
index f02c3ef1..5a7e5929 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 = () => (
                     }}
                   />
                 )}
-                {avatarAppearanceColors.map((appearance) => (
+                {appearances.map((appearance) => (
                   <RowAvatar
                     key={`${appearance}${shape}${emphasis}`}
                     appearance={appearance}
diff --git a/src/docs-components/BadgeDocs.tsx b/src/docs-components/BadgeDocs.tsx
index 2187ed47..393705eb 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 { State, States } from './common/States';
+import { States } from './common/States';
 
 import { Badge } from '@/components/Badge';
 import { tet } from '@/tetrisly';
@@ -35,12 +35,7 @@ export const BadgeDocs = () => (
             gap="$dimension-500"
             flexBasis="$dimension-100"
           />
-          <tet.div
-            py="$dimension-500"
-            display="flex"
-            flexWrap="wrap"
-            gap="$dimension-500"
-          >
+          <tet.div py="$dimension-500" display="flex" gap="$dimension-500">
             {basicIntents.map((intent) => (
               <tet.div
                 key={intent}
@@ -57,45 +52,36 @@ export const BadgeDocs = () => (
             ))}
           </tet.div>
         </tet.div>
-        <tet.div px="$dimension-1000" w="100%">
+        <tet.div px="$dimension-1000">
           <SectionHeader variant="H2" as="h3" py="$dimension-500">
             Appearance
           </SectionHeader>
 
-          <tet.div>
-            <tet.div
-              py="$dimension-500"
-              display="flex"
-              gap="48px"
-              flexWrap="wrap"
-            >
+          <tet.div overflowX="scroll">
+            <States
+              states={appearances}
+              gap="$dimension-500"
+              itemWidth="96px"
+            />
+            <tet.div py="$dimension-500" display="flex" gap="39px">
               {appearances.map((appearance) => (
                 <tet.div
+                  key={appearance}
                   display="flex"
-                  gap="72px"
-                  my="20"
                   flexDirection="column"
+                  gap="$dimension-400"
+                  flexShrink="0"
                 >
-                  <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>
+                  <Badge
+                    appearance={appearance}
+                    emphasis={emphasis}
+                    label="Badge Text"
+                  />
+                  <Badge
+                    appearance={appearance}
+                    emphasis={emphasis}
+                    icon="16-bolt"
+                  />
                 </tet.div>
               ))}
             </tet.div>
diff --git a/src/docs-components/ButtonDocs/ButtonDocs.tsx b/src/docs-components/ButtonDocs/ButtonDocs.tsx
index 7fc6ee61..883f1cfa 100644
--- a/src/docs-components/ButtonDocs/ButtonDocs.tsx
+++ b/src/docs-components/ButtonDocs/ButtonDocs.tsx
@@ -1,10 +1,10 @@
 import { startCase } from 'lodash';
-import type { FC } from 'react';
+import { FC } from 'react';
 
 import { ButtonRow } from './ButtonRow';
 import { SectionHeader } from '../common/SectionHeader';
 
-import type { ButtonProps } from '@/components/Button';
+import { 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 f2dadf19..5c190f98 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" pl="5px" overflowX="scroll">
+    <tet.div display="flex" gap="$dimension-300" overflowX="scroll">
       <ButtonSizes {...baseProps} label="Button label" />
       <ButtonSizes
         {...baseProps}
diff --git a/src/docs-components/CheckboxDocs.tsx b/src/docs-components/CheckboxDocs.tsx
index 91722d40..a29751bb 100644
--- a/src/docs-components/CheckboxDocs.tsx
+++ b/src/docs-components/CheckboxDocs.tsx
@@ -1,9 +1,9 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
 import { SectionHeader } from './common/SectionHeader';
 import { States } from './common/States';
 
-import { Checkbox } from '@/components/Checkbox';
+import { Checkbox, CheckboxProps } from '@/components/Checkbox';
 import { tet } from '@/tetrisly';
 
 const getYesNo = (yes: boolean) => (yes ? 'Yes' : 'No');
@@ -43,10 +43,7 @@ export const CheckboxDocs: FC = () => (
               labels={getLabels(label, helperText)}
             />
             <States
-              states={['normal', 'disabled', 'alert'].filter(
-                (currentState) =>
-                  !(currentState === 'alert' && state === 'Checked'),
-              )}
+              states={['normal', 'disabled', 'alert']}
               flexBasis="130px"
               gap="$dimension-500"
             />
@@ -60,46 +57,37 @@ export const CheckboxDocs: FC = () => (
                 <Checkbox
                   isChecked={state === 'Checked'}
                   isIndeterminate={state === 'Indeterminate'}
-                  onChange={() => {}}
                   mt="$dimension-500"
-                  label={
-                    label ? 'Checkbox Label' : (undefined as unknown as string)
-                  }
-                  helperText={helperText ? { text: 'Helper Text' } : undefined}
+                  {...({
+                    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'}
-                  onChange={() => {}}
                   state="disabled"
                   mt="$dimension-500"
-                  label={
-                    label ? 'Checkbox Label' : (undefined as unknown as string)
-                  }
-                  helperText={helperText ? { text: 'Helper Text' } : undefined}
+                  {...({
+                    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)}
                 />
               </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 e6727050..8ba915c2 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" hasBeforeIcon />
+          <HelperText intent={intent} text="Helper text" beforeIcon />
         </tet.div>
       </tet.section>
     ))}
diff --git a/src/docs-components/IconButtonDocs.tsx b/src/docs-components/IconButtonDocs.tsx
index f9b532d0..acf4ff7f 100644
--- a/src/docs-components/IconButtonDocs.tsx
+++ b/src/docs-components/IconButtonDocs.tsx
@@ -62,7 +62,6 @@ 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 e288345e..1572dfbe 100644
--- a/src/docs-components/RadioButtonDocs.tsx
+++ b/src/docs-components/RadioButtonDocs.tsx
@@ -1,9 +1,9 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
 import { SectionHeader } from './common/SectionHeader';
 import { States } from './common/States';
 
-import { RadioButton, type RadioButtonProps } from '@/components/RadioButton';
+import { RadioButton, RadioButtonProps } from '@/components/RadioButton';
 import { tet } from '@/tetrisly';
 
 const getYesNo = (yes: boolean) => (yes ? 'Yes' : 'No');
@@ -43,9 +43,7 @@ export const RadioButtonDocs: FC = () => (
               labels={getLabels(label, helperText)}
             />
             <States
-              states={['normal', 'disabled', 'alert'].filter(
-                (item) => !(state === 'Checked' && item === 'alert'),
-              )}
+              states={['normal', 'disabled', 'alert']}
               flexBasis="130px"
               gap="$dimension-500"
             />
@@ -58,7 +56,6 @@ 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,
@@ -69,7 +66,6 @@ export const RadioButtonDocs: FC = () => (
               <tet.div flexBasis="130px" flexGrow="1" flexShrink="0">
                 <RadioButton
                   isChecked={state === 'Checked'}
-                  onChange={() => {}}
                   state="disabled"
                   mt="$dimension-500"
                   {...({
@@ -78,20 +74,17 @@ export const RadioButtonDocs: FC = () => (
                   } 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 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>
             </tet.div>
           </tet.div>
         ))}
diff --git a/src/docs-components/StatusDotDocs.tsx b/src/docs-components/StatusDotDocs.tsx
index de514a8f..d6d58b07 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} hasStroke />
+              <StatusDot appearance={appearance} stroked />
             </tet.div>
           ))}
         </tet.div>
diff --git a/src/docs-components/TagDocs.tsx b/src/docs-components/TagDocs.tsx
index 8ae0741c..b9c8a074 100644
--- a/src/docs-components/TagDocs.tsx
+++ b/src/docs-components/TagDocs.tsx
@@ -1,6 +1,6 @@
-import type { FC } from 'react';
+import { FC } from 'react';
 
-import { Tag, type TagProps } from '@/components/Tag';
+import { Tag, 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 1a4f1474..88931c9a 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 type { FC, PropsWithChildren } from 'react';
+import { 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 98df4e80..41612a8e 100644
--- a/src/docs-components/common/Cols.tsx
+++ b/src/docs-components/common/Cols.tsx
@@ -1,9 +1,9 @@
-import type { GapProps } from '@xstyled/styled-components';
-import type { FC } from 'react';
+import { GapProps } from '@xstyled/styled-components';
+import { FC } from 'react';
 
 import { tet } from '@/tetrisly';
-import type { MarginProps } from '@/types/MarginProps';
-import type { PaddingProps } from '@/types/PaddingProps';
+import { MarginProps } from '@/types/MarginProps';
+import { 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 c364e6da..ba9c0ba0 100644
--- a/src/docs-components/common/Hero.tsx
+++ b/src/docs-components/common/Hero.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { 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 334f87cc..dd6f4466 100644
--- a/src/docs-components/common/SectionHeader.tsx
+++ b/src/docs-components/common/SectionHeader.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode } from 'react';
+import { 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 key={l}>{l}</tet.span>
+          <tet.span>{l}</tet.span>
         ),
       )}
     </tet.div>
diff --git a/src/docs-components/common/States.tsx b/src/docs-components/common/States.tsx
index 725fa397..1d8f93b2 100644
--- a/src/docs-components/common/States.tsx
+++ b/src/docs-components/common/States.tsx
@@ -1,50 +1,38 @@
-import type {
+import {
   FlexBasisProps,
   GapProps,
   WidthProps,
 } from '@xstyled/styled-components';
-import type { FC } from 'react';
+import { FC } from 'react';
 
 import { tet } from '@/tetrisly';
 
-type StatesProps = {
+export const States: FC<{
   states: string[] | readonly string[];
   gap?: GapProps['gap'];
   itemWidth?: WidthProps['w'];
   flexBasis?: FlexBasisProps['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,
-}) => (
+}> = ({ states, gap, itemWidth, flexBasis }) => (
   <tet.div display="flex" gap={gap} py="$dimension-300">
     {states.map((state) => (
-      <State
+      <tet.div
         key={state}
-        state={state}
-        itemWidth={itemWidth}
+        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>
     ))}
   </tet.div>
 );
diff --git a/src/index.ts b/src/index.ts
index 5de5e0f1..f44a5d0a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,4 +23,3 @@ export * from './components/StatusDot';
 export * from './components/TextInput';
 export * from './components/Toast';
 export * from './tetrisly';
-export * from './theme';