From 7d58f202b02765f6f4223a92111a3b69e15d007e Mon Sep 17 00:00:00 2001
From: Jerome Raffin <raffin.jerome@gmail.com>
Date: Mon, 5 Feb 2024 17:25:10 +0100
Subject: [PATCH] fix: toggle icon misalignment

---
 packages/Core/src/theme/toggles.ts | 3 ---
 packages/Toggle/src/index.tsx      | 2 +-
 packages/Toggle/src/styles.ts      | 5 ++++-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts
index 4308c662bc..311530a10d 100644
--- a/packages/Core/src/theme/toggles.ts
+++ b/packages/Core/src/theme/toggles.ts
@@ -91,17 +91,14 @@ export const getToggles = (theme: WuiTheme): ThemeToggles => {
     icon: {
       position: {
         xs: {
-          top: '5px',
           left: '2px',
           right: '2px',
         },
         sm: {
-          top: '1px',
           left: '4px',
           right: '4px',
         },
         md: {
-          top: '4px',
           left: '4px',
           right: '4px',
         },
diff --git a/packages/Toggle/src/index.tsx b/packages/Toggle/src/index.tsx
index 412dc99b34..33dde5326d 100644
--- a/packages/Toggle/src/index.tsx
+++ b/packages/Toggle/src/index.tsx
@@ -22,7 +22,7 @@ export const Toggle = forwardRef<'input', ToggleProps>(
     return (
       <S.Wrapper onClick={onClick}>
         {hasIcon && (
-          <S.IconWrapper checked={checked} size={size}>
+          <S.IconWrapper checked={checked} onClick={onClick} size={size}>
             {checked ? checkedIcon : uncheckedIcon}
           </S.IconWrapper>
         )}
diff --git a/packages/Toggle/src/styles.ts b/packages/Toggle/src/styles.ts
index 859c0347ba..92b5ebf1cb 100644
--- a/packages/Toggle/src/styles.ts
+++ b/packages/Toggle/src/styles.ts
@@ -72,7 +72,10 @@ export const IconWrapper = styled.box.withConfig({ shouldForwardProp })<{
   ({ checked, size }) => css`
     position: absolute;
     z-index: 1;
-    top: ${th(`toggles.icon.position.${size}.top`)};
+    display: flex;
+    align-items: center;
+    height: ${th(`toggles.item.sizes.${size}.height`)};
+    bottom: 0;
 
     > svg,
     i {