From 05e5227cb88c3e69d009a70f070a73f95eda9e27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Wed, 8 Nov 2023 18:05:43 +0100
Subject: [PATCH 01/13] fix(Button): border radius token TET-513

---
 src/components/Button/Button.styles.ts        | 167 +++++++++++++++++-
 src/components/Button/Button.tsx              |   4 +-
 .../stylesBuilder/stylesBuilder.test.ts       |   7 +-
 .../Button/stylesBuilder/stylesBuilder.ts     |  39 +++-
 .../ButtonDocs/ButtonSizes.tsx                |   6 +-
 .../ButtonDocs/LoadingButton.tsx              |  14 --
 src/docs-components/IconButtonDocs.tsx        |  20 +--
 7 files changed, 213 insertions(+), 44 deletions(-)
 delete mode 100644 src/docs-components/ButtonDocs/LoadingButton.tsx

diff --git a/src/components/Button/Button.styles.ts b/src/components/Button/Button.styles.ts
index ea288cee..9c04ef19 100644
--- a/src/components/Button/Button.styles.ts
+++ b/src/components/Button/Button.styles.ts
@@ -1,5 +1,9 @@
+import { LoaderProps } from '../Loader';
+
 import { BaseProps } from '@/types/BaseProps';
 
+type LoaderAppearance = Pick<LoaderProps, 'appearance'>;
+
 export type DefaultButtonConfig = {
   appearance?: {
     primary?: {
@@ -39,6 +43,37 @@ export type DefaultButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
+  innerElements?: {
+    loader?: {
+      appearance?: {
+        primary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        secondary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        inverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+      };
+    };
+  };
 } & BaseProps;
 
 export type GhostButtonConfig = {
@@ -83,6 +118,42 @@ export type GhostButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
+  innerElements?: {
+    loader?: {
+      appearance?: {
+        primary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        secondary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        inverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        reverseInverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+      };
+    };
+  };
 } & BaseProps;
 
 export type BareButtonConfig = {
@@ -122,6 +193,42 @@ export type BareButtonConfig = {
       hasAfterIcon?: BaseProps;
     } & BaseProps;
   };
+  innerElements?: {
+    loader?: {
+      appearance?: {
+        primary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+                success?: LoaderAppearance;
+                destructive?: LoaderAppearance;
+              };
+            };
+        secondary?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        inverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+        reverseInverted?:
+          | LoaderAppearance
+          | {
+              intent?: {
+                none?: LoaderAppearance;
+              };
+            };
+      };
+    };
+  };
 } & BaseProps;
 
 const size = {
@@ -178,7 +285,8 @@ const size = {
 
 const commonConfig = {
   display: 'inline-flex',
-  gap: '$space-component-gap-xSmall',
+  borderRadius: '$border-radius-large',
+  gap: '$space-component-gap-small',
   w: 'fit-content',
   justifyContent: 'center',
   alignItems: 'center',
@@ -207,7 +315,6 @@ const commonConfig = {
 
 const defaultButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-medium',
   boxShadow: '$elevation-bottom-100',
   appearance: {
     primary: {
@@ -300,11 +407,25 @@ const defaultButtonConfig = {
     },
   },
   size,
+  innerElements: {
+    loader: {
+      appearance: {
+        primary: {
+          appearance: 'white',
+        },
+        secondary: {
+          appearance: 'greyscale',
+        },
+        inverted: {
+          appearance: 'greyscale',
+        },
+      },
+    },
+  },
 } satisfies DefaultButtonConfig;
 
 const ghostButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-large',
   backgroundColor: {
     _: 'transparent',
     hover: '$color-action-ghost-hover',
@@ -384,6 +505,26 @@ const ghostButtonConfig = {
     },
   },
   size,
+  innerElements: {
+    loader: {
+      appearance: {
+        primary: {
+          appearance: 'greyscale',
+          intent: {
+            none: {
+              appearance: 'primary',
+            },
+          },
+        },
+        secondary: {
+          appearance: 'greyscale',
+        },
+        inverted: {
+          appearance: 'greyscale',
+        },
+      },
+    },
+  },
 } satisfies GhostButtonConfig;
 
 const bareButtonConfig = {
@@ -473,6 +614,26 @@ const bareButtonConfig = {
       hasAfterIcon: {},
     },
   },
+  innerElements: {
+    loader: {
+      appearance: {
+        primary: {
+          appearance: 'greyscale',
+          intent: {
+            none: {
+              appearance: 'primary',
+            },
+          },
+        },
+        secondary: {
+          appearance: 'greyscale',
+        },
+        inverted: {
+          appearance: 'greyscale',
+        },
+      },
+    },
+  },
 } satisfies BareButtonConfig;
 
 export type ButtonConfig = {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b6abe707..626ab9fb 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -57,13 +57,13 @@ export const Button: FC<ButtonProps & MarginProps> = ({
     <tet.button
       data-testid="button"
       {...styles.container}
-      disabled={['disabled', 'loading'].includes(state ?? '')}
+      disabled={state ? ['disabled', 'loading'].includes(state) : false}
       data-state={state}
       style={{ textUnderlineOffset: '3px', textDecorationThickness: '1px' }}
       {...rest}
     >
       {state === 'loading' && (
-        <Loader appearance="greyscale" size="small" shape="circle" />
+        <Loader {...styles.loader} size="small" shape="circle" />
       )}
       {beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
       {children}
diff --git a/src/components/Button/stylesBuilder/stylesBuilder.test.ts b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
index bbfdc889..1c358923 100644
--- a/src/components/Button/stylesBuilder/stylesBuilder.test.ts
+++ b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
@@ -23,11 +23,11 @@ describe('stylesBuilder', () => {
           loading: '$color-action-primary-loading',
           selected: '$color-action-primary-selected',
         },
-        borderRadius: '$border-radius-medium',
+        borderRadius: '$border-radius-large',
         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',
@@ -56,6 +56,9 @@ describe('stylesBuilder', () => {
         w: 'fit-content',
         whiteSpace: 'nowrap',
       },
+      loader: {
+        appearance: 'white',
+      },
     });
   });
 });
diff --git a/src/components/Button/stylesBuilder/stylesBuilder.ts b/src/components/Button/stylesBuilder/stylesBuilder.ts
index c0bda5e3..934aa644 100644
--- a/src/components/Button/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Button/stylesBuilder/stylesBuilder.ts
@@ -1,3 +1,4 @@
+import { LoaderProps } from '../../Loader';
 import { ButtonProps } from '../Button.props';
 import { defaultConfig } from '../Button.styles';
 
@@ -17,6 +18,32 @@ type ButtonStylesBulderInput = {
 
 type ButtonStylesBuilder = {
   container: BaseProps;
+  loader: Pick<LoaderProps, 'appearance'>;
+};
+
+const getLoaderProps = (
+  loader: object,
+  props: Pick<ButtonStylesBulderInput, 'appearance' | 'intent'>,
+) => {
+  let loaderProps: Pick<LoaderProps, 'appearance'> = {};
+
+  if (!('appearance' in loader)) return loader;
+
+  const loaderAppearance =
+    loader?.appearance?.[props.appearance as keyof typeof loader.appearance];
+
+  if (loaderAppearance) {
+    if ('intent' in loaderAppearance) {
+      const { intent: loaderIntent } = loaderAppearance;
+
+      loaderProps =
+        loaderIntent?.[props.intent as keyof typeof loaderIntent] || {};
+    } else {
+      loaderProps = loaderAppearance;
+    }
+  }
+
+  return loaderProps;
 };
 
 export const stylesBuilder = (
@@ -26,7 +53,13 @@ export const stylesBuilder = (
     defaultConfig,
     custom: props.custom,
   });
-  const { appearance, size, ...container } = variants[props.variant];
+
+  const {
+    appearance,
+    size,
+    innerElements: { loader },
+    ...container
+  } = variants[props.variant];
 
   const { hasDropdownIndicator, hasBeforeIcon, hasAfterIcon, ...sizeStyles } =
     fallbackKey(
@@ -68,5 +101,9 @@ export const stylesBuilder = (
       ...appearanceStyles,
       ...intentStyles,
     },
+    loader: getLoaderProps(loader, {
+      appearance: props.appearance,
+      intent: props.intent,
+    }),
   };
 };
diff --git a/src/docs-components/ButtonDocs/ButtonSizes.tsx b/src/docs-components/ButtonDocs/ButtonSizes.tsx
index 419bf8dd..e8a34d93 100644
--- a/src/docs-components/ButtonDocs/ButtonSizes.tsx
+++ b/src/docs-components/ButtonDocs/ButtonSizes.tsx
@@ -1,6 +1,4 @@
-import { LoadingButton } from './LoadingButton';
-
-import { ButtonProps } from '@/components/Button';
+import { Button, ButtonProps } from '@/components/Button';
 import { tet } from '@/tetrisly';
 
 const getButtonSizes = (variant: ButtonProps['variant']) => {
@@ -23,7 +21,7 @@ export const ButtonSizes = ({ variant, ...buttonProps }: ButtonProps) => (
     py="$dimension-500"
   >
     {getButtonSizes(variant).map((size) => (
-      <LoadingButton
+      <Button
         key={size}
         {...({ ...buttonProps, size, variant } as ButtonProps)}
       />
diff --git a/src/docs-components/ButtonDocs/LoadingButton.tsx b/src/docs-components/ButtonDocs/LoadingButton.tsx
deleted file mode 100644
index b1b2d30c..00000000
--- a/src/docs-components/ButtonDocs/LoadingButton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useLoading } from '../hooks/useLoading';
-
-import { Button, ButtonProps } from '@/components/Button';
-
-export const LoadingButton = (props: ButtonProps) => {
-  const [isLoading, startLoading] = useLoading();
-  return (
-    <Button
-      {...props}
-      state={isLoading ? 'loading' : undefined}
-      onClick={startLoading}
-    />
-  );
-};
diff --git a/src/docs-components/IconButtonDocs.tsx b/src/docs-components/IconButtonDocs.tsx
index f9b532d0..20d3c6b8 100644
--- a/src/docs-components/IconButtonDocs.tsx
+++ b/src/docs-components/IconButtonDocs.tsx
@@ -1,8 +1,6 @@
 import { capitalize, startCase } from 'lodash';
-import { ComponentProps } from 'react';
 
 import { SectionHeader } from './common/SectionHeader';
-import { useLoading } from './hooks/useLoading';
 
 import { IconButton, IconButtonProps } from '@/components/IconButton';
 import { tet } from '@/tetrisly';
@@ -21,17 +19,6 @@ const getIntents = (appearance: ReturnType<typeof getAppearances>[number]) => {
   return ['none'] as const;
 };
 
-const LoadingIconButton = (props: ComponentProps<typeof IconButton>) => {
-  const [isLoading, startLoading] = useLoading();
-  return (
-    <IconButton
-      {...props}
-      state={isLoading ? 'loading' : undefined}
-      onClick={startLoading}
-    />
-  );
-};
-
 export const IconButtonDocs = () => (
   <>
     {variants.map((variant) => (
@@ -82,10 +69,7 @@ export const IconButtonDocs = () => (
                           'Dropdown: false',
                         ]}
                       />
-                      <LoadingIconButton
-                        mt="$dimension-500"
-                        {...iconButtonProps}
-                      />
+                      <IconButton mt="$dimension-500" {...iconButtonProps} />
                     </tet.div>
                     <tet.div py="$dimension-500">
                       <SectionHeader
@@ -97,7 +81,7 @@ export const IconButtonDocs = () => (
                           'Dropdown: true',
                         ]}
                       />
-                      <LoadingIconButton
+                      <IconButton
                         mt="$dimension-500"
                         {...iconButtonProps}
                         hasDropdownIndicator

From f565c911956fba4d3d4c648a97f75d30b5c42e2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Wed, 8 Nov 2023 18:05:56 +0100
Subject: [PATCH 02/13] fix(Toast): middle dot color TET-524

---
 src/components/Toast/Toast.styles.ts              | 15 +++++++++++----
 src/components/Toast/Toast.tsx                    |  4 ++--
 .../Toast/stylesBuilder/stylesBuilder.ts          |  8 ++++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Toast/Toast.styles.ts b/src/components/Toast/Toast.styles.ts
index ac6c6a53..327895cf 100644
--- a/src/components/Toast/Toast.styles.ts
+++ b/src/components/Toast/Toast.styles.ts
@@ -1,5 +1,4 @@
 import type { ToastEmphasis, ToastIntent } from './types';
-import { BareButtonProps } from '../Button/Button.props';
 
 import type { BaseProps } from '@/types/BaseProps';
 import type { IconName } from '@/utility-types/IconName';
@@ -19,9 +18,8 @@ export type ToastConfig = {
     } & BaseProps;
     actionContainer?: BaseProps;
     middleDot?: {
-      emphasis: Partial<
-        Record<ToastEmphasis, BaseProps | Partial<BareButtonProps>>
-      >;
+      emphasis: Partial<Record<ToastEmphasis, BaseProps>>;
+      intent: Partial<Record<ToastIntent, BaseProps>>;
     } & BaseProps;
     closeButton?: BaseProps;
   };
@@ -136,6 +134,15 @@ export const defaultConfig = {
           color: '$color-content-tertiary',
         },
       },
+      intent: {
+        neutral: {},
+        informative: {},
+        success: {},
+        warning: {
+          color: '$color-content-secondary',
+        },
+        negative: {},
+      },
     },
     closeButton: {
       ml: '$space-component-padding-large',
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 41c344dd..09129d89 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -57,9 +57,9 @@ export const Toast: FC<ToastProps & MarginProps> = ({
           <Button variant="bare" appearance={appearance} {...firstAction} />
           {secondAction && (
             <>
-              <tet.div {...styles.middleDot} data-testid="toast-middleDot">
+              <tet.span {...styles.middleDot} data-testid="toast-middleDot">
                 &middot;
-              </tet.div>
+              </tet.span>
               <Button
                 variant="bare"
                 appearance={appearance}
diff --git a/src/components/Toast/stylesBuilder/stylesBuilder.ts b/src/components/Toast/stylesBuilder/stylesBuilder.ts
index d0989193..a6251daf 100644
--- a/src/components/Toast/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Toast/stylesBuilder/stylesBuilder.ts
@@ -52,8 +52,11 @@ export const stylesBuilder = ({
     ...restIconContainerStyles,
   };
 
-  const { emphasis: emphasisMiddleDotStyles, ...restMiddleDotStyles } =
-    middleDot;
+  const {
+    emphasis: emphasisMiddleDotStyles,
+    intent: intentMiddleDotStyles,
+    ...restMiddleDotStyles
+  } = middleDot;
 
   return {
     container,
@@ -63,6 +66,7 @@ export const stylesBuilder = ({
     middleDot: {
       ...restMiddleDotStyles,
       ...emphasisMiddleDotStyles[props.emphasis],
+      ...intentMiddleDotStyles[props.intent],
     },
   };
 };

From 3a14e73e88e8b16dfd60f6968f1c0c09cce3b9d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Thu, 9 Nov 2023 11:09:32 +0100
Subject: [PATCH 03/13] fix(Popover): blured story example TET-517

---
 src/components/Popover/Popover.stories.tsx |  3 ++-
 src/components/Popover/Popover.styles.ts   | 24 +++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
index c6e499ad..7c4bdad9 100644
--- a/src/components/Popover/Popover.stories.tsx
+++ b/src/components/Popover/Popover.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
   tags: ['autodocs'],
   args: {
     content: (
-      <tet.div display="flex" gap="12px" alignItems="center">
+      <tet.div display="flex" gap="12px" alignItems="center" w="324px">
         <Avatar
           appearance="image"
           img={{
@@ -39,6 +39,7 @@ const meta = {
           size="small"
           beforeIcon="20-check-large"
           label="Following"
+          ml="auto"
         />
       </tet.div>
     ),
diff --git a/src/components/Popover/Popover.styles.ts b/src/components/Popover/Popover.styles.ts
index 3e82b502..ad0894b6 100644
--- a/src/components/Popover/Popover.styles.ts
+++ b/src/components/Popover/Popover.styles.ts
@@ -18,15 +18,15 @@ export const defaultConfig = {
     top: {
       align: {
         start: {
-          transform: 'translate(0%, -100%)',
+          transform: 'translate(0%, -100%) translateZ(0)',
           left: '50%',
         },
         center: {
-          transform: 'translate(-50%, -100%)',
+          transform: 'translate(-50%, -100%) translateZ(0)',
           left: '50%',
         },
         end: {
-          transform: 'translate(-100%, -100%)',
+          transform: 'translate(-100%, -100%) translateZ(0)',
           left: '50%',
         },
       },
@@ -34,15 +34,15 @@ export const defaultConfig = {
     bottom: {
       align: {
         start: {
-          transform: 'translate(0%, 100%)',
+          transform: 'translate(0%, 100%) translateZ(0)',
           left: '50%',
         },
         center: {
-          transform: 'translate(-50%, 100%)',
+          transform: 'translate(-50%, 100%) translateZ(0)',
           left: '50%',
         },
         end: {
-          transform: 'translate(-100%, 100%)',
+          transform: 'translate(-100%, 100%) translateZ(0)',
           left: '50%',
         },
       },
@@ -50,15 +50,15 @@ export const defaultConfig = {
     left: {
       align: {
         start: {
-          transform: 'translate(-100%, 0%)',
+          transform: 'translate(-100%, 0%) translateZ(0)',
           top: '50%',
         },
         center: {
-          transform: 'translate(-100%, -50%)',
+          transform: 'translate(-100%, -50%) translateZ(0)',
           top: '50%',
         },
         end: {
-          transform: 'translate(-100%, -100%)',
+          transform: 'translate(-100%, -100%) translateZ(0)',
           top: '50%',
         },
       },
@@ -66,15 +66,15 @@ export const defaultConfig = {
     right: {
       align: {
         start: {
-          transform: 'translate(100%, 0%)',
+          transform: 'translate(100%, 0%) translateZ(0)',
           top: '50%',
         },
         center: {
-          transform: 'translate(100%, -50%)',
+          transform: 'translate(100%, -50%) translateZ(0)',
           top: '50%',
         },
         end: {
-          transform: 'translate(100%, -100%)',
+          transform: 'translate(100%, -100%) translateZ(0)',
           top: '50%',
         },
       },

From 0e0317750a1f662d843bc6c5dba60da8f80c9e1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Thu, 9 Nov 2023 11:18:15 +0100
Subject: [PATCH 04/13] test(Popover): updated test TET-517

---
 src/components/Popover/Popover.test.tsx | 40 +++++++++++++++++--------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx
index 4e3cc7c1..0e720bd1 100644
--- a/src/components/Popover/Popover.test.tsx
+++ b/src/components/Popover/Popover.test.tsx
@@ -33,78 +33,94 @@ describe('Popover', () => {
 
   it('should render content on the top centered', () => {
     const { content } = getPopover(<Popover content="Popover" />);
-    expect(content).toHaveStyle('transform: translate(-50%,-100%)');
+    expect(content).toHaveStyle(
+      'transform: translate(-50%,-100%) translateZ(0)',
+    );
   });
 
   it('should render content on the top start', () => {
     const { content } = getPopover(<Popover content="Popover" align="start" />);
-    expect(content).toHaveStyle('transform: translate(0%,-100%)');
+    expect(content).toHaveStyle('transform: translate(0%,-100%) translateZ(0)');
   });
 
   it('should render content on the top end', () => {
     const { content } = getPopover(<Popover content="Popover" align="end" />);
-    expect(content).toHaveStyle('transform: translate(-100%,-100%)');
+    expect(content).toHaveStyle(
+      'transform: translate(-100%,-100%) translateZ(0)',
+    );
   });
 
   it('should render content on the bottom centered', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="bottom" />,
     );
-    expect(content).toHaveStyle('transform: translate(-50%,100%)');
+    expect(content).toHaveStyle(
+      'transform: translate(-50%,100%) translateZ(0)',
+    );
   });
 
   it('should render content on the bottom start', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="bottom" align="start" />,
     );
-    expect(content).toHaveStyle('transform: translate(0%,100%)');
+    expect(content).toHaveStyle('transform: translate(0%,100%) translateZ(0)');
   });
 
   it('should render content on the bottom end', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="bottom" align="end" />,
     );
-    expect(content).toHaveStyle('transform: translate(-100%,100%)');
+    expect(content).toHaveStyle(
+      'transform: translate(-100%,100%) translateZ(0)',
+    );
   });
 
   it('should render content on the left centered', () => {
     const { content } = getPopover(<Popover content="Popover" origin="left" />);
-    expect(content).toHaveStyle('transform: translate(-100%,-50%)');
+    expect(content).toHaveStyle(
+      'transform: translate(-100%,-50%) translateZ(0)',
+    );
   });
 
   it('should render content on the left start', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="left" align="start" />,
     );
-    expect(content).toHaveStyle('transform: translate(-100%,0%)');
+    expect(content).toHaveStyle('transform: translate(-100%,0%) translateZ(0)');
   });
 
   it('should render content on the left end', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="left" align="end" />,
     );
-    expect(content).toHaveStyle('transform: translate(-100%,-100%)');
+    expect(content).toHaveStyle(
+      'transform: translate(-100%,-100%) translateZ(0)',
+    );
   });
 
   it('should render content on the right centered', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="right" />,
     );
-    expect(content).toHaveStyle('transform: translate(100%,-50%)');
+    expect(content).toHaveStyle(
+      'transform: translate(100%,-50%) translateZ(0)',
+    );
   });
 
   it('should render content on the right start', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="right" align="start" />,
     );
-    expect(content).toHaveStyle('transform: translate(100%,0%)');
+    expect(content).toHaveStyle('transform: translate(100%,0%) translateZ(0)');
   });
 
   it('should render content on the right end', () => {
     const { content } = getPopover(
       <Popover content="Popover" origin="right" align="end" />,
     );
-    expect(content).toHaveStyle('transform: translate(100%,-100%)');
+    expect(content).toHaveStyle(
+      'transform: translate(100%,-100%) translateZ(0)',
+    );
   });
 
   it('should render correct offset (top)', () => {

From f6649a06b6ea83e6c9f5ffa89f40dd60728e00b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Thu, 9 Nov 2023 12:08:37 +0100
Subject: [PATCH 05/13] fix(InlineSearchInput): added padding, clear button is
 absolut now, hover TET-516

---
 .../InlineSearchInput/InlineSearchInput.styles.ts     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/InlineSearchInput/InlineSearchInput.styles.ts b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
index cec3a197..c0fac490 100644
--- a/src/components/InlineSearchInput/InlineSearchInput.styles.ts
+++ b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
@@ -1,11 +1,15 @@
 import { SearchInputProps } from '../SearchInput';
 
 export const defaultConfig: SearchInputProps['custom'] = {
+  position: 'relative',
   display: 'inline-flex',
   h: '$size-small',
   padding: '$space-component-padding-xSmall $space-component-padding-small',
   backgroundColor: {
-    hover: '$color-interaction-ghost-hover',
+    hover: {
+      _: '$color-interaction-ghost-hover',
+      focusWithin: '$color-interaction-background-formField',
+    },
   },
   ring: {
     _: 'unset',
@@ -20,8 +24,13 @@ export const defaultConfig: SearchInputProps['custom'] = {
       minWidth: '50px',
       backgroundColor: 'unset',
       padding: 'unset',
+      paddingRight: '36px',
       display: 'inline-block',
     },
+    clearButton: {
+      position: 'absolute',
+      right: '$space-component-padding-small',
+    },
     beforeComponent: {
       spacing: {
         Icon: {

From ab8ceea5ea079ae95c486a852119b61d77c1e894 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Thu, 9 Nov 2023 15:07:13 +0100
Subject: [PATCH 06/13] fix(Avatar): different rounding on small square size,
 centering of one initial letter TET-514

---
 src/components/Avatar/Avatar.styles.ts | 17 ++++++++++++++---
 src/components/Avatar/Avatar.tsx       |  9 ++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/Avatar/Avatar.styles.ts b/src/components/Avatar/Avatar.styles.ts
index 97219011..d4b802c8 100644
--- a/src/components/Avatar/Avatar.styles.ts
+++ b/src/components/Avatar/Avatar.styles.ts
@@ -1,11 +1,18 @@
-import type { AvatarAppearance, AvatarShape } from './types';
+import type { AvatarAppearance, AvatarShape, AvatarSize } from './types';
 
 import type { BaseProps } from '@/types/BaseProps';
 import { Emphasis } from '@/types/Emphasis';
 import { Size } from '@/types/Size';
 
 export type AvatarConfig = {
-  shape?: Partial<Record<AvatarShape, BaseProps>>;
+  shape?: Partial<
+    Record<
+      AvatarShape,
+      BaseProps & {
+        size?: Partial<Record<AvatarSize, BaseProps>>;
+      }
+    >
+  >;
   size?: Partial<Record<Size, BaseProps>>;
   appearance?: Partial<
     Record<
@@ -31,7 +38,11 @@ export const defaultConfig = {
       borderRadius: '$border-radius-full',
     },
     square: {
-      borderRadius: '$border-radius-large',
+      borderRadius: {
+        _: '$border-radius-large',
+        '&[data-size="xSmall"]': '$border-radius-medium',
+        '&[data-size="2xSmall"]': '$border-radius-medium',
+      },
     },
   },
   size: {
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 8eeabe13..251100ad 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -26,7 +26,14 @@ export const Avatar: FC<AvatarProps & MarginProps> = ({
   );
 
   return (
-    <tet.div {...styles.container} data-testid="avatar" {...restProps}>
+    <tet.div
+      {...styles.container}
+      data-testid="avatar"
+      data-size={size}
+      // if we have a single letter, we don't want to add letter spacing to better center the letter
+      letterSpacing={initials?.length === 1 ? 'normal' : undefined}
+      {...restProps}
+    >
       {img ? (
         <tet.img {...styles.image} data-testid="avatar-image" {...img} />
       ) : (

From 81c39d5fa838b71295fc28e3d4c4797db8f10f33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Thu, 9 Nov 2023 15:10:58 +0100
Subject: [PATCH 07/13] fix(SocialButton): text styles TET-522

---
 src/components/SocialButton/SocialButton.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SocialButton/SocialButton.styles.ts b/src/components/SocialButton/SocialButton.styles.ts
index 699957fc..543cadd1 100644
--- a/src/components/SocialButton/SocialButton.styles.ts
+++ b/src/components/SocialButton/SocialButton.styles.ts
@@ -18,6 +18,7 @@ export const defaultConfig = {
   flexShrink: 0,
   borderRadius: '$border-radius-large',
   boxShadow: '$elevation-bottom-100',
+  text: '$typo-body-medium',
   opacity: {
     _: 1,
     hover: 0.8,

From ad6c4e923678901332479eaf41dafc64e3574773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Thu, 9 Nov 2023 15:24:43 +0100
Subject: [PATCH 08/13] fix(InlineBanner): icon vertical align, close button
 position TET-515

---
 src/components/InlineBanner/InlineBanner.styles.ts  | 13 ++++++++-----
 .../InlineBanner/stylesBuilder/stylesBuilder.ts     |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/InlineBanner/InlineBanner.styles.ts b/src/components/InlineBanner/InlineBanner.styles.ts
index a764502b..d40b135b 100644
--- a/src/components/InlineBanner/InlineBanner.styles.ts
+++ b/src/components/InlineBanner/InlineBanner.styles.ts
@@ -18,11 +18,12 @@ export type InlineBannerConfig = {
     closeButton?: BaseProps;
   };
   spacing?: {
-    closeButton?: BaseProps;
+    container?: BaseProps;
   };
 } & BaseProps;
 
 export const defaultConfig = {
+  position: 'relative',
   display: 'flex',
   p: '$space-component-padding-xLarge',
   gap: '$space-component-gap-large',
@@ -53,7 +54,7 @@ export const defaultConfig = {
   },
   innerElements: {
     iconContainer: {
-      h: 'xSmall',
+      h: '$size-xSmall',
       display: 'flex',
       alignItems: 'center',
       intent: {
@@ -110,12 +111,14 @@ export const defaultConfig = {
       },
     },
     closeButton: {
-      ml: 'auto',
+      position: 'absolute',
+      top: '$space-component-padding-large',
+      right: '$space-component-padding-large',
     },
   },
   spacing: {
-    closeButton: {
-      pr: '$space-component-padding-large',
+    container: {
+      pr: '$space-component-padding-6xLarge',
     },
   },
 } satisfies InlineBannerConfig;
diff --git a/src/components/InlineBanner/stylesBuilder/stylesBuilder.ts b/src/components/InlineBanner/stylesBuilder/stylesBuilder.ts
index 747fedd0..d7d9484a 100644
--- a/src/components/InlineBanner/stylesBuilder/stylesBuilder.ts
+++ b/src/components/InlineBanner/stylesBuilder/stylesBuilder.ts
@@ -57,7 +57,7 @@ export const stylesBuilder = ({
     container: {
       ...restProps,
       ...intentStyles[intent],
-      ...(hasCloseButton && spacing.closeButton),
+      ...(hasCloseButton && spacing.container),
     },
     iconContainer: iconContainerStyles,
     contentContainer,

From 4a54a3f59c5a941efa0519ca65ca4a26f2b6c9b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Fri, 10 Nov 2023 10:35:11 +0100
Subject: [PATCH 09/13] fix(Select): height and paddings TET-521

---
 src/components/Select/Select.styles.ts       | 13 +++++++++++++
 src/components/Select/Select.tsx             |  9 +++++++++
 src/components/TextInput/TextInput.styles.ts |  1 +
 3 files changed, 23 insertions(+)
 create mode 100644 src/components/Select/Select.styles.ts

diff --git a/src/components/Select/Select.styles.ts b/src/components/Select/Select.styles.ts
new file mode 100644
index 00000000..89ba8cc3
--- /dev/null
+++ b/src/components/Select/Select.styles.ts
@@ -0,0 +1,13 @@
+import type { TextInputProps } from '../TextInput';
+
+export const defaultConfig: TextInputProps['custom'] = {
+  innerElements: {
+    afterComponent: {
+      spacing: {
+        IconButton: {
+          marginRight: '$space-component-padding-medium',
+        },
+      },
+    },
+  },
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 0870600e..4a9a73b5 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -2,11 +2,13 @@ import { Icon } from '@virtuslab/tetrisly-icons';
 import type { FC } from 'react';
 
 import type { SelectProps } from './Select.props';
+import { defaultConfig } from './Select.styles';
 import { Avatar } from '../Avatar';
 import { IconButton } from '../IconButton';
 import type { TextInputProps } from '../TextInput';
 import { useTextInput } from '../TextInput/useTextInput';
 
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types';
 
@@ -22,9 +24,13 @@ export const Select: FC<SelectProps & MarginProps> = ({
   beforeComponent,
   hasClearButton,
   value,
+  custom: customProps,
   ...props
 }) => {
   const afterComponent = DROPDOWN_INDICATOR_COMPONENT;
+
+  const custom = mergeConfigWithCustom({ defaultConfig, custom: customProps });
+
   const {
     containerRef,
     handleContainerClick,
@@ -37,8 +43,10 @@ export const Select: FC<SelectProps & MarginProps> = ({
   } = useTextInput({
     beforeComponent,
     afterComponent,
+    custom,
     ...props,
   });
+
   return (
     <tet.div
       ref={containerRef}
@@ -78,6 +86,7 @@ export const Select: FC<SelectProps & MarginProps> = ({
         <IconButton
           variant="bare"
           icon="20-close"
+          size="medium"
           onClick={handleOnClear}
           {...styles.clearButton}
           data-testid="select-clear-button"
diff --git a/src/components/TextInput/TextInput.styles.ts b/src/components/TextInput/TextInput.styles.ts
index 7d99b73e..29818902 100644
--- a/src/components/TextInput/TextInput.styles.ts
+++ b/src/components/TextInput/TextInput.styles.ts
@@ -29,6 +29,7 @@ export const defaultConfig = {
   h: '$size-medium',
   padding: '$space-component-padding-small $space-component-padding-large',
   flexShrink: 0,
+  ringInset: true,
   ring: '$border-width-small',
   ringColor: {
     _: '$color-interaction-border-neutral-normal',

From a795e9acebc075c40a161b2fd608c21947dcac8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Fri, 10 Nov 2023 12:10:32 +0100
Subject: [PATCH 10/13] fix(SearchInput): right padding TET-520

---
 src/components/InlineSearchInput/InlineSearchInput.styles.ts | 4 ++--
 src/components/SearchInput/SearchInput.stories.tsx           | 2 +-
 src/components/TextInput/TextInput.styles.ts                 | 3 ++-
 src/components/TextInput/TextInput.tsx                       | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/InlineSearchInput/InlineSearchInput.styles.ts b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
index c0fac490..ab29df70 100644
--- a/src/components/InlineSearchInput/InlineSearchInput.styles.ts
+++ b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
@@ -22,8 +22,8 @@ export const defaultConfig: SearchInputProps['custom'] = {
       w: 'unset',
       h: 'unset',
       minWidth: '50px',
-      backgroundColor: 'unset',
-      padding: 'unset',
+      backgroundColor: 'transparent',
+      padding: 0,
       paddingRight: '36px',
       display: 'inline-block',
     },
diff --git a/src/components/SearchInput/SearchInput.stories.tsx b/src/components/SearchInput/SearchInput.stories.tsx
index 9912a33b..6349023f 100644
--- a/src/components/SearchInput/SearchInput.stories.tsx
+++ b/src/components/SearchInput/SearchInput.stories.tsx
@@ -60,7 +60,7 @@ export const Dropdown: Story = {
   },
 };
 
-export const Icon: Story = {
+export const IconButton: Story = {
   args: {
     afterComponent: {
       type: 'IconButton',
diff --git a/src/components/TextInput/TextInput.styles.ts b/src/components/TextInput/TextInput.styles.ts
index 29818902..c1c493b4 100644
--- a/src/components/TextInput/TextInput.styles.ts
+++ b/src/components/TextInput/TextInput.styles.ts
@@ -67,7 +67,8 @@ export const defaultConfig = {
       color: {
         placeholder: '$color-content-tertiary',
       },
-      backgroundColor: '$color-interaction-background-formField',
+      p: 0,
+      backgroundColor: 'transparent',
     },
     icon: {
       color: '$color-content-secondary',
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index d9b06d80..345439b2 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -47,7 +47,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}

From 99b0e47f24056b525bb75cb5576809b09d2e3a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Fri, 10 Nov 2023 12:31:53 +0100
Subject: [PATCH 11/13] fix(Checkbox): removed red border in alert state if
 checked TET-519

---
 src/components/Checkbox/Checkbox.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Checkbox/Checkbox.styles.ts b/src/components/Checkbox/Checkbox.styles.ts
index b874de84..931f6b9d 100644
--- a/src/components/Checkbox/Checkbox.styles.ts
+++ b/src/components/Checkbox/Checkbox.styles.ts
@@ -63,6 +63,7 @@ export const defaultConfig = {
         alert: {
           _: '$color-interaction-border-alert',
           hover: '$color-interaction-border-alert',
+          checked: '$color-interaction-ghost-normal',
         },
         indeterminate: 'transparent',
       },

From 876042cb30bffb030dd637c0493c6e21442e2d6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Fri, 10 Nov 2023 13:18:54 +0100
Subject: [PATCH 12/13] fix(RadioButton): removed red border in alert state if
 checked TET-518

---
 src/components/RadioButton/RadioButton.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/RadioButton/RadioButton.styles.ts b/src/components/RadioButton/RadioButton.styles.ts
index f1742700..577dfd29 100644
--- a/src/components/RadioButton/RadioButton.styles.ts
+++ b/src/components/RadioButton/RadioButton.styles.ts
@@ -52,6 +52,7 @@ export const defaultConfig = {
         alert: {
           _: '$color-interaction-border-alert',
           hover: '$color-interaction-border-alert',
+          checked: '$color-interaction-default-normal',
         },
       },
       outlineStyle: {

From 20a0c0a7ee50de113350f7af1d8e39f9c2878dc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Pot=C4=99pa?= <adrian.potepa@gmail.com>
Date: Mon, 13 Nov 2023 13:59:35 +0100
Subject: [PATCH 13/13] fix(TextInput): placeholder opacity on firefox browser,
 width set to 100% TET-523

---
 src/components/InlineSearchInput/InlineSearchInput.styles.ts | 1 +
 src/components/TextInput/TextInput.styles.ts                 | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/components/InlineSearchInput/InlineSearchInput.styles.ts b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
index ab29df70..1bc194b6 100644
--- a/src/components/InlineSearchInput/InlineSearchInput.styles.ts
+++ b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
@@ -3,6 +3,7 @@ import { SearchInputProps } from '../SearchInput';
 export const defaultConfig: SearchInputProps['custom'] = {
   position: 'relative',
   display: 'inline-flex',
+  w: 'auto',
   h: '$size-small',
   padding: '$space-component-padding-xSmall $space-component-padding-small',
   backgroundColor: {
diff --git a/src/components/TextInput/TextInput.styles.ts b/src/components/TextInput/TextInput.styles.ts
index c1c493b4..781f3010 100644
--- a/src/components/TextInput/TextInput.styles.ts
+++ b/src/components/TextInput/TextInput.styles.ts
@@ -26,6 +26,7 @@ export const defaultConfig = {
   bg: '$color-interaction-background-formField',
   display: 'flex',
   alignItems: 'center',
+  w: '100%',
   h: '$size-medium',
   padding: '$space-component-padding-small $space-component-padding-large',
   flexShrink: 0,
@@ -69,6 +70,9 @@ export const defaultConfig = {
       },
       p: 0,
       backgroundColor: 'transparent',
+      opacity: {
+        placeholder: 1,
+      },
     },
     icon: {
       color: '$color-content-secondary',