From a557a9de37b8d764f122e3ea690459a6212de203 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Tue, 23 Jan 2024 13:49:15 +0100
Subject: [PATCH 1/3] BREAKING CHANGE(components): use switch group to support
 switch label

---
 package-lock.json                        | 326 +++++++++++++++++------
 package.json                             |   1 +
 src/components/toggle/toggle.stories.tsx |  62 +++--
 src/components/toggle/toggle.tsx         |  43 ++-
 4 files changed, 333 insertions(+), 99 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 057d7316..0c283c61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
                 "@storybook/addon-links": "^7.6.3",
                 "@storybook/addon-mdx-gfm": "^7.6.3",
                 "@storybook/blocks": "^7.6.3",
+                "@storybook/client-api": "^7.6.3",
                 "@storybook/react": "^7.6.3",
                 "@storybook/react-vite": "^7.6.3",
                 "@storybook/testing-library": "^0.2.2",
@@ -5337,6 +5338,33 @@
                 "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
             }
         },
+        "node_modules/@storybook/addon-essentials/node_modules/@storybook/manager-api": {
+            "version": "7.6.3",
+            "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.3.tgz",
+            "integrity": "sha512-soDH7GZuukkhYRGzlw4jhCm5EzjfkuIAtb37/DFplqxuVbvlyJEVzkMUM2KQO7kq0/8GlWPiZ5mn56wagYyhKQ==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/channels": "7.6.3",
+                "@storybook/client-logger": "7.6.3",
+                "@storybook/core-events": "7.6.3",
+                "@storybook/csf": "^0.1.2",
+                "@storybook/global": "^5.0.0",
+                "@storybook/router": "7.6.3",
+                "@storybook/theming": "7.6.3",
+                "@storybook/types": "7.6.3",
+                "dequal": "^2.0.2",
+                "lodash": "^4.17.21",
+                "memoizerific": "^1.11.3",
+                "semver": "^7.3.7",
+                "store2": "^2.14.2",
+                "telejson": "^7.2.0",
+                "ts-dedent": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
         "node_modules/@storybook/addon-essentials/node_modules/@storybook/node-logger": {
             "version": "7.6.3",
             "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.3.tgz",
@@ -5347,6 +5375,54 @@
                 "url": "https://opencollective.com/storybook"
             }
         },
+        "node_modules/@storybook/addon-essentials/node_modules/@storybook/router": {
+            "version": "7.6.3",
+            "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.3.tgz",
+            "integrity": "sha512-NZfhJqsXYca9mZCL/LGx6FmZDbrxX2S4ImW7Tqdtcc/sSlZ0BpCDkNUTesCA287cmoKMhXZRh/+bU+C2h2a+bw==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/client-logger": "7.6.3",
+                "memoizerific": "^1.11.3",
+                "qs": "^6.10.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
+        "node_modules/@storybook/addon-essentials/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@storybook/addon-essentials/node_modules/semver": {
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+            "dev": true,
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@storybook/addon-essentials/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
         "node_modules/@storybook/addon-highlight": {
             "version": "7.6.3",
             "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.3.tgz",
@@ -5515,6 +5591,48 @@
                 "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
             }
         },
+        "node_modules/@storybook/blocks/node_modules/@storybook/manager-api": {
+            "version": "7.6.3",
+            "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.3.tgz",
+            "integrity": "sha512-soDH7GZuukkhYRGzlw4jhCm5EzjfkuIAtb37/DFplqxuVbvlyJEVzkMUM2KQO7kq0/8GlWPiZ5mn56wagYyhKQ==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/channels": "7.6.3",
+                "@storybook/client-logger": "7.6.3",
+                "@storybook/core-events": "7.6.3",
+                "@storybook/csf": "^0.1.2",
+                "@storybook/global": "^5.0.0",
+                "@storybook/router": "7.6.3",
+                "@storybook/theming": "7.6.3",
+                "@storybook/types": "7.6.3",
+                "dequal": "^2.0.2",
+                "lodash": "^4.17.21",
+                "memoizerific": "^1.11.3",
+                "semver": "^7.3.7",
+                "store2": "^2.14.2",
+                "telejson": "^7.2.0",
+                "ts-dedent": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
+        "node_modules/@storybook/blocks/node_modules/@storybook/router": {
+            "version": "7.6.3",
+            "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.3.tgz",
+            "integrity": "sha512-NZfhJqsXYca9mZCL/LGx6FmZDbrxX2S4ImW7Tqdtcc/sSlZ0BpCDkNUTesCA287cmoKMhXZRh/+bU+C2h2a+bw==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/client-logger": "7.6.3",
+                "memoizerific": "^1.11.3",
+                "qs": "^6.10.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
         "node_modules/@storybook/blocks/node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5533,6 +5651,39 @@
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
             "dev": true
         },
+        "node_modules/@storybook/blocks/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@storybook/blocks/node_modules/semver": {
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+            "dev": true,
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@storybook/blocks/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
         "node_modules/@storybook/builder-manager": {
             "version": "7.6.3",
             "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.3.tgz",
@@ -6053,6 +6204,106 @@
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
             "dev": true
         },
+        "node_modules/@storybook/client-api": {
+            "version": "7.6.10",
+            "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-7.6.10.tgz",
+            "integrity": "sha512-Y9z6Uy4h3/hDAUVBEEGLLbbvnSKQJhr4Sn1wJ328PhMppcZ1+GW1iGphFBmthm+O0cun1Zevl18Y081kqiGzSQ==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/client-logger": "7.6.10",
+                "@storybook/preview-api": "7.6.10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
+        "node_modules/@storybook/client-api/node_modules/@storybook/channels": {
+            "version": "7.6.10",
+            "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.10.tgz",
+            "integrity": "sha512-ITCLhFuDBKgxetuKnWwYqMUWlU7zsfH3gEKZltTb+9/2OAWR7ez0iqU7H6bXP1ridm0DCKkt2UMWj2mmr9iQqg==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/client-logger": "7.6.10",
+                "@storybook/core-events": "7.6.10",
+                "@storybook/global": "^5.0.0",
+                "qs": "^6.10.0",
+                "telejson": "^7.2.0",
+                "tiny-invariant": "^1.3.1"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
+        "node_modules/@storybook/client-api/node_modules/@storybook/client-logger": {
+            "version": "7.6.10",
+            "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.10.tgz",
+            "integrity": "sha512-U7bbpu21ntgePMz/mKM18qvCSWCUGCUlYru8mgVlXLCKqFqfTeP887+CsPEQf29aoE3cLgDrxqbRJ1wxX9kL9A==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/global": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
+        "node_modules/@storybook/client-api/node_modules/@storybook/core-events": {
+            "version": "7.6.10",
+            "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.10.tgz",
+            "integrity": "sha512-yccDH67KoROrdZbRKwxgTswFMAco5nlCyxszCDASCLygGSV2Q2e+YuywrhchQl3U6joiWi3Ps1qWu56NeNafag==",
+            "dev": true,
+            "dependencies": {
+                "ts-dedent": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
+        "node_modules/@storybook/client-api/node_modules/@storybook/preview-api": {
+            "version": "7.6.10",
+            "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.10.tgz",
+            "integrity": "sha512-5A3etoIwZCx05yuv3KSTv1wynN4SR4rrzaIs/CTBp3BC4q1RBL+Or/tClk0IJPXQMlx/4Y134GtNIBbkiDofpw==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/channels": "7.6.10",
+                "@storybook/client-logger": "7.6.10",
+                "@storybook/core-events": "7.6.10",
+                "@storybook/csf": "^0.1.2",
+                "@storybook/global": "^5.0.0",
+                "@storybook/types": "7.6.10",
+                "@types/qs": "^6.9.5",
+                "dequal": "^2.0.2",
+                "lodash": "^4.17.21",
+                "memoizerific": "^1.11.3",
+                "qs": "^6.10.0",
+                "synchronous-promise": "^2.0.15",
+                "ts-dedent": "^2.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
+        "node_modules/@storybook/client-api/node_modules/@storybook/types": {
+            "version": "7.6.10",
+            "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.10.tgz",
+            "integrity": "sha512-hcS2HloJblaMpCAj2axgGV+53kgSRYPT0a1PG1IHsZaYQILfHSMmBqM8XzXXYTsgf9250kz3dqFX1l0n3EqMlQ==",
+            "dev": true,
+            "dependencies": {
+                "@storybook/channels": "7.6.10",
+                "@types/babel__core": "^7.0.0",
+                "@types/express": "^4.7.0",
+                "file-system-cache": "2.3.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/storybook"
+            }
+        },
         "node_modules/@storybook/client-logger": {
             "version": "7.6.3",
             "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.3.tgz",
@@ -6702,66 +6953,6 @@
                 "url": "https://opencollective.com/storybook"
             }
         },
-        "node_modules/@storybook/manager-api": {
-            "version": "7.6.3",
-            "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.3.tgz",
-            "integrity": "sha512-soDH7GZuukkhYRGzlw4jhCm5EzjfkuIAtb37/DFplqxuVbvlyJEVzkMUM2KQO7kq0/8GlWPiZ5mn56wagYyhKQ==",
-            "dev": true,
-            "dependencies": {
-                "@storybook/channels": "7.6.3",
-                "@storybook/client-logger": "7.6.3",
-                "@storybook/core-events": "7.6.3",
-                "@storybook/csf": "^0.1.2",
-                "@storybook/global": "^5.0.0",
-                "@storybook/router": "7.6.3",
-                "@storybook/theming": "7.6.3",
-                "@storybook/types": "7.6.3",
-                "dequal": "^2.0.2",
-                "lodash": "^4.17.21",
-                "memoizerific": "^1.11.3",
-                "semver": "^7.3.7",
-                "store2": "^2.14.2",
-                "telejson": "^7.2.0",
-                "ts-dedent": "^2.0.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/storybook"
-            }
-        },
-        "node_modules/@storybook/manager-api/node_modules/lru-cache": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-            "dev": true,
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/@storybook/manager-api/node_modules/semver": {
-            "version": "7.5.4",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-            "dev": true,
-            "dependencies": {
-                "lru-cache": "^6.0.0"
-            },
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/@storybook/manager-api/node_modules/yallist": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-            "dev": true
-        },
         "node_modules/@storybook/mdx2-csf": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.0.0.tgz",
@@ -6956,21 +7147,6 @@
             "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
             "dev": true
         },
-        "node_modules/@storybook/router": {
-            "version": "7.6.3",
-            "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.3.tgz",
-            "integrity": "sha512-NZfhJqsXYca9mZCL/LGx6FmZDbrxX2S4ImW7Tqdtcc/sSlZ0BpCDkNUTesCA287cmoKMhXZRh/+bU+C2h2a+bw==",
-            "dev": true,
-            "dependencies": {
-                "@storybook/client-logger": "7.6.3",
-                "memoizerific": "^1.11.3",
-                "qs": "^6.10.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/storybook"
-            }
-        },
         "node_modules/@storybook/telemetry": {
             "version": "7.6.3",
             "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.3.tgz",
diff --git a/package.json b/package.json
index 8348b9d2..bfea4f65 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
         "@storybook/addon-links": "^7.6.3",
         "@storybook/addon-mdx-gfm": "^7.6.3",
         "@storybook/blocks": "^7.6.3",
+        "@storybook/client-api": "^7.6.3",
         "@storybook/react": "^7.6.3",
         "@storybook/react-vite": "^7.6.3",
         "@storybook/testing-library": "^0.2.2",
diff --git a/src/components/toggle/toggle.stories.tsx b/src/components/toggle/toggle.stories.tsx
index 15562e8a..2f59bd07 100644
--- a/src/components/toggle/toggle.stories.tsx
+++ b/src/components/toggle/toggle.stories.tsx
@@ -2,8 +2,9 @@
 import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
 
-import { Toggle, ToggleProps } from "./toggle";
+import { Toggle } from "./toggle";
 
 const meta: Meta<typeof Toggle> = {
     title: "Toggle",
@@ -11,29 +12,52 @@ const meta: Meta<typeof Toggle> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof Toggle>;
-
-const ToggleWithHook = ({ checked, disabled }: ToggleProps) => {
-    const [isChecked, setIsChecked] = React.useState(false);
-
-    React.useEffect(() => {
-        setIsChecked(checked);
-    }, [checked]);
-
-    return (
-        <Toggle
-            checked={isChecked}
-            disabled={disabled}
-            onChange={() => setIsChecked(!isChecked)}
-            ariaLabel="Enable notifications"
-        />
-    );
+
+type ToggleWithHookProps = {
+    checked: boolean;
+    disabled: boolean;
 };
 
+type Story = StoryObj<ToggleWithHookProps>;
+
 export const Default: Story = {
-    render: (args) => <ToggleWithHook {...args} />,
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [{ checked }, updateArgs] = useArgs();
+        const handleOnChange = () => updateArgs({ checked: !checked });
+        return (
+            <Toggle>
+                <Toggle.Switch
+                    checked={args.checked}
+                    disabled={args.disabled}
+                    onChange={handleOnChange}
+                    ariaLabel="Enable notifications"
+                />
+                <Toggle.Label>notifications</Toggle.Label>
+            </Toggle>
+        );
+    },
     args: {
         checked: false,
         disabled: false,
     },
 };
+
+export const WithoutLabel: Story = {
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [{ checked }, updateArgs] = useArgs();
+        const handleOnChange = () => updateArgs({ checked: !checked });
+        return (
+            <Toggle.Switch
+                checked={args.checked}
+                disabled={args.disabled}
+                onChange={handleOnChange}
+                ariaLabel="Enable notifications"
+            />
+        );
+    },
+    args: {
+        ...Default.args,
+    },
+};
diff --git a/src/components/toggle/toggle.tsx b/src/components/toggle/toggle.tsx
index ca6d6e28..93363147 100644
--- a/src/components/toggle/toggle.tsx
+++ b/src/components/toggle/toggle.tsx
@@ -2,23 +2,39 @@ import React from "react";
 import { Switch as HeadlessSwitch } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
-export interface ToggleProps {
+interface LabelProps {
+    children: React.ReactNode;
+    passive?: boolean;
+}
+
+const Label = ({ children, passive = false }: LabelProps) => {
+    return (
+        <HeadlessSwitch.Label
+            className={classNames(
+                "paragraph-200 cursor-pointer text-neutral-800 ui-disabled:text-danger-600"
+            )}
+            passive={passive}
+        >
+            {children}
+        </HeadlessSwitch.Label>
+    );
+};
+
+export interface SwitchProps {
     checked: boolean;
     onChange: () => void;
     disabled?: boolean;
     ariaLabel: string;
 }
 
-export const Toggle = ({ checked = false, onChange, disabled = false, ariaLabel }: ToggleProps) => {
+const Switch = ({ checked = false, onChange, disabled = false, ariaLabel }: SwitchProps) => {
     return (
         <HeadlessSwitch
             checked={checked}
             disabled={disabled}
             onChange={onChange}
             className={classNames(
-                "relative inline-flex h-4 w-7 items-center rounded-full",
-                !checked && "bg-neutral-400 hover:bg-neutral-500 disabled:bg-neutral-100",
-                checked && "bg-primary-500 hover:bg-primary-600 disabled:bg-neutral-100"
+                "relative inline-flex h-4 w-7 items-center rounded-full ui-checked:bg-primary-500 ui-checked:hover:bg-primary-600 ui-checked:disabled:bg-neutral-100 ui-not-checked:bg-neutral-400 ui-not-checked:hover:bg-neutral-500 ui-not-checked:disabled:bg-neutral-100"
             )}
         >
             <span className="sr-only">{ariaLabel}</span>
@@ -35,3 +51,20 @@ export const Toggle = ({ checked = false, onChange, disabled = false, ariaLabel
         </HeadlessSwitch>
     );
 };
+
+export interface ToggleProps {
+    children?: React.ReactNode;
+}
+
+const Toggle = ({ children }: ToggleProps) => {
+    return (
+        <HeadlessSwitch.Group>
+            <div className="flex items-center gap-3">{children}</div>
+        </HeadlessSwitch.Group>
+    );
+};
+
+Toggle.Switch = Switch;
+Toggle.Label = Label;
+
+export { Toggle };

From 79576c377f67f4a6a9c0f55dc104749f34c4ac9e Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Tue, 23 Jan 2024 13:52:14 +0100
Subject: [PATCH 2/3] fix(stories): use new toggle switch

---
 src/components/dialog/dialog.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/dialog.stories.tsx b/src/components/dialog/dialog.stories.tsx
index 5e0f17fa..c3f60d9f 100644
--- a/src/components/dialog/dialog.stories.tsx
+++ b/src/components/dialog/dialog.stories.tsx
@@ -111,7 +111,7 @@ export const WithLongContent: Story = {
     args: {
         children: (
             <>
-                <Toggle checked ariaLabel="test" onChange={noop} />
+                <Toggle.Switch checked ariaLabel="test" onChange={noop} />
                 <p className="py-10">Paragraph Content</p>
                 <FormField>
                     <FormField.LabelGroup>
@@ -166,7 +166,7 @@ export const WithLongContent: Story = {
                 </p>
                 <span>litipsum.com</span>
                 <Alert title="Some important information" intent="info" />
-                <Toggle checked={false} ariaLabel="test" onChange={noop} />
+                <Toggle.Switch checked={false} ariaLabel="test" onChange={noop} />
             </>
         ),
     },

From 970ce3ea3c6e754b505a31c1cec158e007ab01aa Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Tue, 23 Jan 2024 13:53:27 +0100
Subject: [PATCH 3/3] fix(stories): use new toggle switch

---
 src/components/panel/panel.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panel/panel.stories.tsx b/src/components/panel/panel.stories.tsx
index 9ddd2498..d429a275 100644
--- a/src/components/panel/panel.stories.tsx
+++ b/src/components/panel/panel.stories.tsx
@@ -33,7 +33,7 @@ export const WithComponents: Story = {
                 <Button variant="primary" onClick={noop}>
                     Button A
                 </Button>
-                <Toggle checked ariaLabel="test" onChange={noop} />
+                <Toggle.Switch checked ariaLabel="test" onChange={noop} />
                 <Button variant="secondary" onClick={noop}>
                     Button B
                 </Button>