From 1c797dea2f0ee7476997bcd88f32d6e742c486bf Mon Sep 17 00:00:00 2001
From: carly-bartel <carlybartel@gmail.com>
Date: Mon, 25 Nov 2024 11:51:43 -0500
Subject: [PATCH 01/15] toggle and label component started

---
 .../Form/Elements/Toggle/Toggle.scss          |  2 +-
 .../src/pages/Settings/AnnotationSettings.jsx |  3 +-
 .../src/pages/WebhookPage/WebhookList.jsx     |  2 +-
 web/libs/editor/src/common/Toggle/Toggle.scss |  2 +-
 web/libs/ui/src/index.ts                      |  2 +
 web/libs/ui/src/lib/label/label.module.scss   | 83 +++++++++++++++++++
 web/libs/ui/src/lib/label/label.tsx           | 31 +++++++
 web/libs/ui/src/lib/toggle/toggle.module.scss | 73 ++++++++++++++++
 web/libs/ui/src/lib/toggle/toggle.tsx         | 53 ++++++++++++
 9 files changed, 247 insertions(+), 4 deletions(-)
 create mode 100644 web/libs/ui/src/lib/label/label.module.scss
 create mode 100644 web/libs/ui/src/lib/label/label.tsx
 create mode 100644 web/libs/ui/src/lib/toggle/toggle.module.scss
 create mode 100644 web/libs/ui/src/lib/toggle/toggle.tsx

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss
index ec99e1759727..65be46a922c7 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss
+++ b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss
@@ -1,4 +1,4 @@
-.toggle {
+.toggle { 
   width: 42px;
   height: 24px;
   display: block;
diff --git a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx
index 9d08c1c76b1b..d747e1670e4b 100644
--- a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx
+++ b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx
@@ -1,8 +1,9 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Button } from "../../components";
-import { Form, TextArea, Toggle } from "../../components/Form";
+import { Form, TextArea } from "../../components/Form";
 import { MenubarContext } from "../../components/Menubar/Menubar";
 import { Block, Elem } from "../../utils/bem";
+import { Toggle } from "@humansignal/ui";
 
 import { ModelVersionSelector } from "./AnnotationSettings/ModelVersionSelector";
 import { ProjectContext } from "../../providers/ProjectProvider";
diff --git a/web/apps/labelstudio/src/pages/WebhookPage/WebhookList.jsx b/web/apps/labelstudio/src/pages/WebhookPage/WebhookList.jsx
index 8e983a420423..63233556dd23 100644
--- a/web/apps/labelstudio/src/pages/WebhookPage/WebhookList.jsx
+++ b/web/apps/labelstudio/src/pages/WebhookPage/WebhookList.jsx
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { LsPencil } from "../../assets/icons";
 import { IconCross } from "@humansignal/ui";
 import { Button } from "../../components";
-import { Toggle } from "../../components/Form";
+import { Toggle } from "@humansignal/ui";
 import { Block, Elem } from "../../utils/bem";
 import "./WebhookPage.scss";
 import { format } from "date-fns";
diff --git a/web/libs/editor/src/common/Toggle/Toggle.scss b/web/libs/editor/src/common/Toggle/Toggle.scss
index 559ab8d59791..dc7524474ff1 100644
--- a/web/libs/editor/src/common/Toggle/Toggle.scss
+++ b/web/libs/editor/src/common/Toggle/Toggle.scss
@@ -1,5 +1,5 @@
 .toggle {
-  width: 42px;
+  width: 42px; 
   height: 24px;
   display: block;
   min-width: 42px;
diff --git a/web/libs/ui/src/index.ts b/web/libs/ui/src/index.ts
index cb0b8bb66de7..d1b64a57b92e 100644
--- a/web/libs/ui/src/index.ts
+++ b/web/libs/ui/src/index.ts
@@ -1,4 +1,6 @@
 export * from "./lib/checkbox/checkbox";
 export * from "./lib/Toast/Toast";
+export * from "./lib/toggle/toggle";
+export * from "./lib/label/label";
 
 export * from "./assets/icons";
diff --git a/web/libs/ui/src/lib/label/label.module.scss b/web/libs/ui/src/lib/label/label.module.scss
new file mode 100644
index 000000000000..8754089ba274
--- /dev/null
+++ b/web/libs/ui/src/lib/label/label.module.scss
@@ -0,0 +1,83 @@
+.field-label {
+  margin-bottom: 0;
+
+  &__text {
+    padding: 0 16px;
+    height: 22px;
+    display: flex;
+    margin-bottom: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    justify-content: space-between;
+  }
+
+  &__description {
+    margin-top: 5px;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--sand_500);
+  }
+
+  &__field {
+    line-height: 0;
+  }
+
+  &_size_small &__text {
+    font-size: 10px;
+    margin: 0;
+    height: 14px;
+    line-height: 14px;
+  }
+
+  &_size_large &__text {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+    margin-bottom: 16px;
+  }
+
+  &_flat &__text {
+    padding: 0;
+  }
+
+  .input,
+  .select,
+  .textarea {
+    width: 100%;
+  }
+
+  &[data-required] &__text::after {
+    content: "Required";
+    color: var(--sand_500);
+  }
+
+  &_placement_right {
+    display: inline-flex;
+    flex-direction: row-reverse;
+  }
+
+  &_placement_left {
+    display: inline-flex;
+  }
+
+  &_empty &__text,
+  &_placement_right &__text,
+  &_placement_left &__text {
+    margin-bottom: 0;
+    font-size: 16px;
+    line-height: 22px;
+    height: auto;
+    align-items: center;
+  }
+
+  &_placement_right:not(.label_withDescription) &__field,
+  &_placement_left:not(.label_withDescription) &__field {
+    display: flex;
+    align-items: center;
+  }
+
+  &_placement_right.label_withDescription &__field,
+  &_placement_left.label_withDescription &__field {
+    margin-top: 5px;
+  }
+}
diff --git a/web/libs/ui/src/lib/label/label.tsx b/web/libs/ui/src/lib/label/label.tsx
new file mode 100644
index 000000000000..4221a6547c14
--- /dev/null
+++ b/web/libs/ui/src/lib/label/label.tsx
@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import styles from "./label.module.scss";
+
+export const Label = forwardRef(
+  ({ text, children, required, placement, description, size, large, style, simple, flat }) => {
+    const tagName = simple ? "div" : "label";
+    const mods = {
+      size,
+      large,
+      flat,
+      placement,
+      withDescription: !!description,
+      empty: !children,
+    };
+
+    return (
+      <div mod={mods} tag={tagName} style={style} data-required={required} className={clsx(styles.label)}>
+        <span className={clsx(styles.label_text)}>
+          <span className={clsx(styles.label_content)}>
+            {text}
+            {description && <span className={clsx(styles.label_description)}>{description}</span>}
+          </span>
+        </span>
+        <span className={clsx(styles.label_field)}>{children}</span>
+      </div>
+    );
+  },
+);
+
+export default Label;
\ No newline at end of file
diff --git a/web/libs/ui/src/lib/toggle/toggle.module.scss b/web/libs/ui/src/lib/toggle/toggle.module.scss
new file mode 100644
index 000000000000..fef50e3227ae
--- /dev/null
+++ b/web/libs/ui/src/lib/toggle/toggle.module.scss
@@ -0,0 +1,73 @@
+.toggle {
+  width: 42px; 
+  height: 24px;
+  display: block;
+  min-width: 42px;
+  max-height: 24px;
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  color: var(--toggle-color, var(--grape_500));
+  transition: box-shadow 80ms ease;
+  background: linear-gradient(0deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 5%)), var(--sand_0);
+  box-shadow: inset 0 1px 0 rgb(0 0 0 / 5%), inset 0 0 0 1px rgb(0 0 0 / 5%);
+  background: red;
+
+  &__input {
+    top: 0;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  &__indicator {
+    height: 24px;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 120ms ease;
+
+    &::before {
+      content: "";
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      transition: all 120ms ease;
+      background: var(--sand_200);
+      box-shadow: 0 5px 10px rgb(0 0 0 / 15%), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 5%);
+    }
+  }
+
+  &_checked &__indicator {
+    margin-left: 18px;
+
+    &::before {
+      width: 16px;
+      height: 16px;
+      background: currentcolor;
+      box-shadow: 0 5px 10px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%);
+    }
+  }
+
+  &_disabled {
+    box-shadow: none;
+    pointer-events: none;
+    background: var(--sand_200);
+  }
+
+  &_disabled &__indicator {
+    transition: none;
+  }
+
+  &_disabled &__indicator::before,
+  &_disabled.toggle_checked &__indicator::before {
+    box-shadow: none;
+    transition: none;
+    background-color: var(--sand_500);
+  }
+}
\ No newline at end of file
diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
new file mode 100644
index 000000000000..d46209005bb5
--- /dev/null
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -0,0 +1,53 @@
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import Label from "../label/label";
+import styles from "./toggle.module.scss";
+
+const Toggle = forwardRef(
+  (
+    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props },
+  ) => {
+    const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
+    const [isChecked, setIsChecked] = useState(defaultChecked ?? checked ?? false);
+
+    const mods = {};
+
+    useEffect(() => {
+      setIsChecked(initialChecked);
+    }, [initialChecked]);
+
+    if (isChecked) mods.checked = isChecked;
+    mods.disabled = props.disabled;
+
+    const formField = (
+      <div className={clsx(styles.toggle)} mod={mods} style={style}>
+        <input
+          {...props}
+          className={clsx(styles.toggle_input)}
+          type="checkbox"
+          checked={isChecked}
+          onChange={(e) => {
+            setIsChecked(e.target.checked);
+            onChange?.(e);
+          }}
+        />
+        <span className={clsx(styles.toggle_indicator)} />
+      </div>
+    );
+
+    return label ? (
+      <Label
+        placement="right"
+        required={required}
+        text={label}
+        children={formField}
+        description={description}
+        {...(labelProps ?? {})}
+      />
+    ) : (
+      formField
+    );
+  },
+);
+
+export default Toggle;
\ No newline at end of file

From 66f0ad318345c61a7eff13cad6d3661745101171 Mon Sep 17 00:00:00 2001
From: carly-bartel <carlybartel@gmail.com>
Date: Mon, 25 Nov 2024 19:36:52 -0500
Subject: [PATCH 02/15] debugging toggle

---
 .../Form/Elements/Toggle/Toggle.jsx           | 38 ++++++------------
 .../src/pages/Settings/AnnotationSettings.jsx |  3 +-
 web/libs/ui/src/index.ts                      |  2 +-
 web/libs/ui/src/lib/label/label.module.scss   |  6 ++-
 web/libs/ui/src/lib/label/label.tsx           | 40 +++++++++----------
 web/libs/ui/src/lib/toggle/toggle.module.scss |  1 -
 web/libs/ui/src/lib/toggle/toggle.tsx         | 27 +++++--------
 7 files changed, 50 insertions(+), 67 deletions(-)

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
index 16ce1b21ab46..1b17f84c0f12 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
@@ -4,6 +4,7 @@ import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";
 import { default as Label } from "../Label/Label";
 import "./Toggle.scss";
+import { Toggle as UiToggle } from "@humansignal/ui";
 
 const Toggle = forwardRef(
   (
@@ -38,7 +39,7 @@ const Toggle = forwardRef(
 
     classList.push(rootClass.mod(mods), className);
 
-    const formField = (
+    return (
       <FormField
         ref={label ? null : ref}
         label={label}
@@ -49,38 +50,25 @@ const Toggle = forwardRef(
         setValue={(value) => setIsChecked(value)}
         {...props}
       >
+        {/* {(ref) => (
+          <UiToggle ref={ref} {...props} label={label} labelProps={labelProps} required={required} checked={isChecked}
+          onChange={(e) => {
+            setIsChecked(e.target.checked);
+            onChange?.(e);
+          }}
+          /> 
+        )} */}
         {(ref) => (
           <div className={classList.join(" ")}>
-            <input
-              ref={ref}
-              {...props}
-              className={rootClass.elem("input")}
-              type="checkbox"
-              checked={isChecked}
-              onChange={(e) => {
+            <UiToggle ref={ref} 
+              checked={isChecked} onChange={(e) => {
                 setIsChecked(e.target.checked);
                 onChange?.(e);
-              }}
-            />
-            <span className={rootClass.elem("indicator")} />
+              }} />
           </div>
         )}
       </FormField>
     );
-
-    return label ? (
-      <Label
-        ref={ref}
-        placement="right"
-        required={required}
-        text={label}
-        children={formField}
-        description={description}
-        {...(labelProps ?? {})}
-      />
-    ) : (
-      formField
-    );
   },
 );
 
diff --git a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx
index d747e1670e4b..9d08c1c76b1b 100644
--- a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx
+++ b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx
@@ -1,9 +1,8 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Button } from "../../components";
-import { Form, TextArea } from "../../components/Form";
+import { Form, TextArea, Toggle } from "../../components/Form";
 import { MenubarContext } from "../../components/Menubar/Menubar";
 import { Block, Elem } from "../../utils/bem";
-import { Toggle } from "@humansignal/ui";
 
 import { ModelVersionSelector } from "./AnnotationSettings/ModelVersionSelector";
 import { ProjectContext } from "../../providers/ProjectProvider";
diff --git a/web/libs/ui/src/index.ts b/web/libs/ui/src/index.ts
index d1b64a57b92e..72ab72d32482 100644
--- a/web/libs/ui/src/index.ts
+++ b/web/libs/ui/src/index.ts
@@ -1,6 +1,6 @@
 export * from "./lib/checkbox/checkbox";
 export * from "./lib/Toast/Toast";
-export * from "./lib/toggle/toggle";
 export * from "./lib/label/label";
+export * from "./lib/toggle/toggle";
 
 export * from "./assets/icons";
diff --git a/web/libs/ui/src/lib/label/label.module.scss b/web/libs/ui/src/lib/label/label.module.scss
index 8754089ba274..fbefdd6402f1 100644
--- a/web/libs/ui/src/lib/label/label.module.scss
+++ b/web/libs/ui/src/lib/label/label.module.scss
@@ -1,4 +1,4 @@
-.field-label {
+.label {
   margin-bottom: 0;
 
   &__text {
@@ -11,6 +11,10 @@
     justify-content: space-between;
   }
 
+  &__content{
+    
+  }
+
   &__description {
     margin-top: 5px;
     font-size: 14px;
diff --git a/web/libs/ui/src/lib/label/label.tsx b/web/libs/ui/src/lib/label/label.tsx
index 4221a6547c14..5d1c2a261ecf 100644
--- a/web/libs/ui/src/lib/label/label.tsx
+++ b/web/libs/ui/src/lib/label/label.tsx
@@ -1,31 +1,31 @@
 import { forwardRef } from "react";
 import clsx from "clsx";
 import styles from "./label.module.scss";
-
+type LabelProps = {
+  text: string;
+  children?: any;
+  required: false;
+  placement?: "right" | "left";
+  description?: string;
+  size?: "large" | "small";
+  style?: any;
+  simple: false;
+  flat: false;
+}
 export const Label = forwardRef(
-  ({ text, children, required, placement, description, size, large, style, simple, flat }) => {
-    const tagName = simple ? "div" : "label";
-    const mods = {
-      size,
-      large,
-      flat,
-      placement,
-      withDescription: !!description,
-      empty: !children,
-    };
+  ({ text, children, required, placement="left", description, size="small", style:inlineStyle, simple, flat }:LabelProps) => {
+    const TagName = simple ? "div" : "label";
 
     return (
-      <div mod={mods} tag={tagName} style={style} data-required={required} className={clsx(styles.label)}>
-        <span className={clsx(styles.label_text)}>
-          <span className={clsx(styles.label_content)}>
+      <TagName style={inlineStyle} data-required={required} className={clsx(styles.label, { [styles.label_size_small]: size==="small", [styles.label_size_large]: size==="large", [styles.label_flat]: flat, [styles.label_placement_left]: placement==="left", [styles.label_placement_right]: placement==="right", [styles.label_withDescription]: !!description, [styles.label_empty]: !children})}>
+        <span className={clsx(styles.label__text)}>
+          <span className={clsx(styles.label__content)}>
             {text}
-            {description && <span className={clsx(styles.label_description)}>{description}</span>}
+            {description && <span className={clsx(styles.label__description)}>{description}</span>}
           </span>
         </span>
-        <span className={clsx(styles.label_field)}>{children}</span>
-      </div>
+        <span className={clsx(styles.label__field)}>{children}</span>
+      </TagName>
     );
   },
-);
-
-export default Label;
\ No newline at end of file
+);
\ No newline at end of file
diff --git a/web/libs/ui/src/lib/toggle/toggle.module.scss b/web/libs/ui/src/lib/toggle/toggle.module.scss
index fef50e3227ae..dc7524474ff1 100644
--- a/web/libs/ui/src/lib/toggle/toggle.module.scss
+++ b/web/libs/ui/src/lib/toggle/toggle.module.scss
@@ -11,7 +11,6 @@
   transition: box-shadow 80ms ease;
   background: linear-gradient(0deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 5%)), var(--sand_0);
   box-shadow: inset 0 1px 0 rgb(0 0 0 / 5%), inset 0 0 0 1px rgb(0 0 0 / 5%);
-  background: red;
 
   &__input {
     top: 0;
diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index d46209005bb5..ff65d0711a30 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -1,29 +1,25 @@
 import { forwardRef, useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
-import Label from "../label/label";
+import {Label} from "@humansignal/ui";
 import styles from "./toggle.module.scss";
 
-const Toggle = forwardRef(
+export const Toggle = forwardRef(
   (
-    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props },
+    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props }, ref
   ) => {
     const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
     const [isChecked, setIsChecked] = useState(defaultChecked ?? checked ?? false);
-
-    const mods = {};
-
+    console.log(isChecked);
     useEffect(() => {
       setIsChecked(initialChecked);
     }, [initialChecked]);
 
-    if (isChecked) mods.checked = isChecked;
-    mods.disabled = props.disabled;
-
     const formField = (
-      <div className={clsx(styles.toggle)} mod={mods} style={style}>
+      <div ref={ref} className={clsx(styles.toggle, { [styles.toggle_disabled]: props.disabled, [styles.toggle_checked]: isChecked })} style={style}>
         <input
           {...props}
-          className={clsx(styles.toggle_input)}
+          ref={ref}
+          className={clsx(styles.toggle__input)}
           type="checkbox"
           checked={isChecked}
           onChange={(e) => {
@@ -31,7 +27,7 @@ const Toggle = forwardRef(
             onChange?.(e);
           }}
         />
-        <span className={clsx(styles.toggle_indicator)} />
+        <span className={clsx(styles.toggle__indicator)} />
       </div>
     );
 
@@ -40,14 +36,11 @@ const Toggle = forwardRef(
         placement="right"
         required={required}
         text={label}
-        children={formField}
         description={description}
         {...(labelProps ?? {})}
-      />
+      >{formField}</Label>
     ) : (
       formField
     );
   },
-);
-
-export default Toggle;
\ No newline at end of file
+);
\ No newline at end of file

From e341647de7f4090b29f4d6a061e8e0d157082404 Mon Sep 17 00:00:00 2001
From: carly-bartel <carlybartel@gmail.com>
Date: Tue, 26 Nov 2024 12:59:47 -0500
Subject: [PATCH 03/15] swap instances of toggle

---
 .../Form/Elements/Toggle/Toggle.jsx           | 26 ++++++++++++-------
 .../AnnotationTab/AutoAcceptToggle.jsx        |  3 +--
 .../DynamicPreannotationsToggle.jsx           |  3 +--
 .../src/components/Settings/Settings.jsx      |  2 +-
 .../tags/object/Paragraphs/HtxParagraphs.jsx  |  2 +-
 web/libs/ui/src/lib/toggle/toggle.tsx         | 24 ++++++++++++-----
 6 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
index 1b17f84c0f12..33e6f9c6e026 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
@@ -39,7 +39,7 @@ const Toggle = forwardRef(
 
     classList.push(rootClass.mod(mods), className);
 
-    return (
+    const formField = (
       <FormField
         ref={label ? null : ref}
         label={label}
@@ -50,17 +50,10 @@ const Toggle = forwardRef(
         setValue={(value) => setIsChecked(value)}
         {...props}
       >
-        {/* {(ref) => (
-          <UiToggle ref={ref} {...props} label={label} labelProps={labelProps} required={required} checked={isChecked}
-          onChange={(e) => {
-            setIsChecked(e.target.checked);
-            onChange?.(e);
-          }}
-          /> 
-        )} */}
         {(ref) => (
           <div className={classList.join(" ")}>
-            <UiToggle ref={ref} 
+            <UiToggle ref={ref}
+              {...props}
               checked={isChecked} onChange={(e) => {
                 setIsChecked(e.target.checked);
                 onChange?.(e);
@@ -69,6 +62,19 @@ const Toggle = forwardRef(
         )}
       </FormField>
     );
+    return label ? (
+      <Label
+        ref={ref}
+        placement="right"
+        required={required}
+        text={label}
+        children={formField}
+        description={description}
+        {...(labelProps ?? {})}
+      />
+    ) : (
+      formField
+    );
   },
 );
 
diff --git a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx b/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
index 61bfbabaf415..1b82e7801455 100644
--- a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
+++ b/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx
@@ -4,7 +4,7 @@ import { IconCheck, IconCross } from "../../assets/icons";
 import { Button } from "../../common/Button/Button";
 import { Block, Elem } from "../../utils/bem";
 import { Space } from "../../common/Space/Space";
-import Toggle from "../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 
 import "./AutoAcceptToggle.scss";
 
@@ -59,7 +59,6 @@ export const AutoAcceptToggle = injector(
                   checked={store.autoAcceptSuggestions}
                   onChange={(e) => store.setAutoAcceptSuggestions(e.target.checked)}
                   label="Auto-Accept Suggestions"
-                  style={{ color: "#7F64FF" }}
                 />
               )}
             </Space>
diff --git a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
index b5982a17a089..367ddf0cf595 100644
--- a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
+++ b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx
@@ -1,7 +1,7 @@
 import { inject, observer } from "mobx-react";
 import { useEffect } from "react";
 import { Space } from "../../common/Space/Space";
-import Toggle from "../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 import ToolsManager from "../../tools/Manager";
 import { Block, Elem } from "../../utils/bem";
 import "./DynamicPreannotationsToggle.scss";
@@ -30,7 +30,6 @@ export const DynamicPreannotationsToggle = inject("store")(
                 }
               }}
               label="Auto-Annotation"
-              style={{ color: "#7F64FF" }}
             />
           </Space>
         </Elem>
diff --git a/web/libs/editor/src/components/Settings/Settings.jsx b/web/libs/editor/src/components/Settings/Settings.jsx
index 27a45e2a3eda..c1a3fec90d2a 100644
--- a/web/libs/editor/src/components/Settings/Settings.jsx
+++ b/web/libs/editor/src/components/Settings/Settings.jsx
@@ -12,7 +12,7 @@ import { triggerResizeEvent } from "../../utils/utilities";
 import EditorSettings from "../../core/settings/editorsettings";
 import * as TagSettings from "./TagSettings";
 import { LsClose } from "../../assets/icons";
-import Toggle from "../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 import { FF_DEV_3873, isFF } from "../../utils/feature-flags";
 
 const HotkeysDescription = () => {
diff --git a/web/libs/editor/src/tags/object/Paragraphs/HtxParagraphs.jsx b/web/libs/editor/src/tags/object/Paragraphs/HtxParagraphs.jsx
index b27e0046ee48..01a5becafbaf 100644
--- a/web/libs/editor/src/tags/object/Paragraphs/HtxParagraphs.jsx
+++ b/web/libs/editor/src/tags/object/Paragraphs/HtxParagraphs.jsx
@@ -8,7 +8,7 @@ import { isSelectionContainsSpan } from "../../../utils/selection-tools";
 import styles from "./Paragraphs.module.scss";
 import { AuthorFilter } from "./AuthorFilter";
 import { Phrases } from "./Phrases";
-import Toggle from "../../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 import { IconHelp } from "../../../assets/icons";
 import { Tooltip } from "../../../common/Tooltip/Tooltip";
 import { cn } from "../../../utils/bem";
diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index ff65d0711a30..6375e5e12dac 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -1,28 +1,40 @@
-import { forwardRef, useEffect, useMemo, useState } from "react";
+import { ChangeEvent, forwardRef, useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
 import {Label} from "@humansignal/ui";
 import styles from "./toggle.module.scss";
 
+type ToggleProps = {
+  className?: string;
+  label?: string;
+  labelProps: any;
+  description?: string;
+  checked: false;
+  defaultChecked: false;
+  onChange: (e:React.ChangeEvent<HTMLInputElement>) => void;
+  required: false;
+  style: any;
+  disabled: false;
+}
+
 export const Toggle = forwardRef(
   (
-    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props }, ref
+    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props }:ToggleProps, ref
   ) => {
     const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
-    const [isChecked, setIsChecked] = useState(defaultChecked ?? checked ?? false);
-    console.log(isChecked);
+    const [isChecked, setIsChecked] = useState<boolean>(defaultChecked ?? checked ?? false);
     useEffect(() => {
       setIsChecked(initialChecked);
     }, [initialChecked]);
 
     const formField = (
-      <div ref={ref} className={clsx(styles.toggle, { [styles.toggle_disabled]: props.disabled, [styles.toggle_checked]: isChecked })} style={style}>
+      <div className={clsx(styles.toggle, { [styles.toggle_disabled]: props.disabled, [styles.toggle_checked]: isChecked })} style={style}>
         <input
           {...props}
           ref={ref}
           className={clsx(styles.toggle__input)}
           type="checkbox"
           checked={isChecked}
-          onChange={(e) => {
+          onChange={(e:React.ChangeEvent<HTMLInputElement>) => {
             setIsChecked(e.target.checked);
             onChange?.(e);
           }}

From c0214230eb1268d939d3197ed4770bd850860b56 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Fri, 29 Nov 2024 12:31:50 -0500
Subject: [PATCH 04/15] cleanup

---
 .../components/Form/Elements/Label/Label.jsx  |  2 +-
 .../Form/Elements/Toggle/Toggle.jsx           | 13 +--
 .../Form/Elements/ToggleRight/ToggleRight.jsx | 87 -------------------
 .../Elements/ToggleRight/ToggleRight.scss     | 64 --------------
 .../src/components/Form/Elements/index.ts     |  1 -
 .../src/pages/ExportPage/ExportPage.jsx       | 53 -----------
 .../Common/Form/Elements/Label/Label.jsx      |  2 +-
 .../Common/Form/Elements/Toggle/Toggle.jsx    |  6 +-
 .../src/components/Label/Label.jsx            |  1 +
 web/libs/editor/src/common/Toggle/Toggle.jsx  | 57 ------------
 web/libs/editor/src/common/Toggle/Toggle.scss | 72 ---------------
 web/libs/ui/src/lib/label/label.module.scss   |  1 +
 web/libs/ui/src/lib/label/label.tsx           | 30 ++++++-
 web/libs/ui/src/lib/toggle/toggle.tsx         | 44 ++++++----
 14 files changed, 69 insertions(+), 364 deletions(-)
 delete mode 100644 web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.jsx
 delete mode 100644 web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.scss
 delete mode 100644 web/libs/editor/src/common/Toggle/Toggle.jsx
 delete mode 100644 web/libs/editor/src/common/Toggle/Toggle.scss

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx
index c3e83cc457cc..52647bb3b86c 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx
@@ -1,7 +1,7 @@
 import { createElement } from "react";
 import { cn } from "../../../../utils/bem";
 import "./Label.scss";
-
+// @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently
 const Label = ({ text, children, required, placement, description, size, large, style, simple, flat }) => {
   const rootClass = cn("label-ls");
   const classList = [rootClass];
diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
index 33e6f9c6e026..52b78c5321c8 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
@@ -1,10 +1,10 @@
 import { forwardRef, useEffect, useMemo } from "react";
+import { Toggle as UiToggle } from "@humansignal/ui";
 import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";
-import { default as Label } from "../Label/Label";
+import { Label } from "@humansignal/ui";
 import "./Toggle.scss";
-import { Toggle as UiToggle } from "@humansignal/ui";
 
 const Toggle = forwardRef(
   (
@@ -52,12 +52,15 @@ const Toggle = forwardRef(
       >
         {(ref) => (
           <div className={classList.join(" ")}>
-            <UiToggle ref={ref}
+            <UiToggle
+              ref={ref}
               {...props}
-              checked={isChecked} onChange={(e) => {
+              checked={isChecked}
+              onChange={(e) => {
                 setIsChecked(e.target.checked);
                 onChange?.(e);
-              }} />
+              }}
+            />
           </div>
         )}
       </FormField>
diff --git a/web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.jsx b/web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.jsx
deleted file mode 100644
index e07b68e1d6b7..000000000000
--- a/web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { forwardRef, useEffect, useMemo } from "react";
-import { cn } from "../../../../utils/bem";
-import { FormField } from "../../FormField";
-import { useValueTracker } from "../../Utils";
-import { default as Label } from "../Label/Label";
-import "./ToggleRight.scss";
-
-const ToggleRight = forwardRef(
-  (
-    {
-      className,
-      label,
-      labelProps,
-      description,
-      checked,
-      defaultChecked,
-      onChange,
-      validate,
-      required,
-      skip,
-      ...props
-    },
-    ref,
-  ) => {
-    const rootClass = cn("toggle-right");
-    const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
-    const [isChecked, setIsChecked] = useValueTracker(checked, defaultChecked ?? false);
-
-    const classList = [rootClass];
-    const mods = {};
-
-    useEffect(() => {
-      setIsChecked(initialChecked);
-    }, [initialChecked]);
-
-    if (isChecked) mods.checked = isChecked;
-    mods.disabled = props.disabled;
-
-    classList.push(rootClass.mod(mods), className);
-
-    const formField = (
-      <FormField
-        ref={label ? null : ref}
-        label={label}
-        name={props.name}
-        validate={validate}
-        required={required}
-        skip={skip}
-        setValue={(value) => setIsChecked(value)}
-        {...props}
-      >
-        {(ref) => (
-          <div className={classList.join(" ")}>
-            <input
-              ref={ref}
-              {...props}
-              className={rootClass.elem("input")}
-              type="checkbox"
-              checked={isChecked}
-              onChange={(e) => {
-                setIsChecked(e.target.checked);
-                onChange?.(e);
-              }}
-            />
-            <span className={rootClass.elem("indicator")} />
-          </div>
-        )}
-      </FormField>
-    );
-
-    return label ? (
-      <Label
-        ref={ref}
-        placement="right"
-        required={required}
-        text={label}
-        children={formField}
-        description={description}
-        {...(labelProps ?? {})}
-      />
-    ) : (
-      formField
-    );
-  },
-);
-
-export default ToggleRight;
diff --git a/web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.scss b/web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.scss
deleted file mode 100644
index e3cfbf1a502a..000000000000
--- a/web/apps/labelstudio/src/components/Form/Elements/ToggleRight/ToggleRight.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.toggle-right {
-  width: 42px;
-  height: 24px;
-  display: block;
-  min-width: 42px;
-  max-height: 24px;
-  border-radius: 12px;
-  position: relative;
-  cursor: pointer;
-  transition: box-shadow 80ms ease;
-  background: var(--sand_0);
-  border: 1px solid var(--sand_300);
-
-  &__input {
-    top: 0;
-    left: 0;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-
-  &__indicator {
-    height: 24px;
-    width: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 120ms ease;
-
-    &::before {
-      content: "";
-      width: 10px;
-      height: 10px;
-      border-radius: 100%;
-      transition: all 120ms ease;
-      background: var(--sand_400);
-      box-shadow: 0 5px 10px rgb(18 17 13 / 15%), inset 0 -1px 0 rgb(18 17 13 / 10%), inset 0 0 0 1px rgb(18 17 13 / 5%);
-    }
-  }
-
-  &_checked &__indicator {
-    margin-left: 18px;
-
-    &::before {
-      width: 16px;
-      height: 16px;
-      background: var(--grape_500);
-      box-shadow: 0 5px 10px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%);
-    }
-  }
-
-  &_disabled &__indicator {
-    transition: none;
-  }
-
-  &_disabled &__indicator::before {
-    background-color: var(--sand_100);
-    box-shadow: none;
-    transition: none;
-  }
-}
\ No newline at end of file
diff --git a/web/apps/labelstudio/src/components/Form/Elements/index.ts b/web/apps/labelstudio/src/components/Form/Elements/index.ts
index e83c4f215640..450b9529d3fd 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/index.ts
+++ b/web/apps/labelstudio/src/components/Form/Elements/index.ts
@@ -4,4 +4,3 @@ export { default as Label } from "./Label/Label";
 export { default as Select } from "./Select/Select";
 export { default as TextArea } from "./TextArea/TextArea";
 export { default as Toggle } from "./Toggle/Toggle";
-export { default as ToggleRight } from "./ToggleRight/ToggleRight";
diff --git a/web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsx b/web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsx
index be26347fbf63..dcfa7ce27e76 100644
--- a/web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsx
+++ b/web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsx
@@ -100,51 +100,6 @@ export const ExportPage = () => {
     }
   }, [pageParams]);
 
-  // const formatSelect = (
-  //   <Label text="Export format" style={{display: "block", width: "mix-content"}} flat>
-  //     <Dropdown.Trigger content={(
-  //       <Menu size="medium">
-  //         {Object.entries(formats).map(([key, value]) => {
-  //           return <Menu.Item key={key} onClick={() => setFormat(key)}>{value}</Menu.Item>;
-  //         })}
-  //       </Menu>
-  //     )}>
-  //       <Button size="small" style={{textAlign: "left"}}>
-  //         <span>{formats[format]}</span>
-  //       </Button>
-  //     </Dropdown.Trigger>
-  //   </Label>
-  // );
-
-  // const aggregation = (
-  //   <Form.Row columnCount={2}>
-  //     {/* TODO: We don't have api for different formats yet, so let's hide the select for now */}
-  //     {/* {formatSelect} */}
-
-  //     <RadioGroup label="Aggregation of annotations" size="small" name="aggregator_type" labelProps={{size: "large", flat: true}}>
-  //       <RadioGroup.Button value="majority_vote" checked>
-  //         Majority vote
-  //       </RadioGroup.Button>
-  //       <RadioGroup.Button value="no_aggregation">
-  //         No aggregation
-  //       </RadioGroup.Button>
-  //     </RadioGroup>
-  //   </Form.Row>
-  // );
-
-  // const exportHistory = (
-  //   <Label text="Previous exports" size="large" flat>
-  //     {previousExports.map(file => {
-  //       const basename = file.url.split('/').reverse()[0];
-  //       return (
-  //         <Button key={file.url} href={file.url} size="medium" download={basename} icon={<FaFileDownload/>}>
-  //           {basename}
-  //         </Button>
-  //       );
-  //     })}
-  //   </Label>
-  // );
-
   return (
     <Modal
       onHide={() => {
@@ -169,14 +124,6 @@ export const ExportPage = () => {
 
         <Form ref={form}>
           <Input type="hidden" name="exportType" value={currentFormat} />
-
-          {/* {aggregation} */}
-
-          {/*<Form.Row columnCount={3} style={{marginTop: 24}}>*/}
-          {/*  <Toggle label="Only finished tasks" name="finished" checked/>*/}
-          {/*  <Toggle label="Include full task descriptions" name="return_task" checked/>*/}
-          {/*  <Toggle label="Include predictions" name="return_predictions" checked/>*/}
-          {/*</Form.Row>*/}
         </Form>
 
         <Elem name="footer">
diff --git a/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx b/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx
index 030ebbba62c3..733f5b378eeb 100644
--- a/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx
+++ b/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx
@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import { Block, Elem } from "../../../../../utils/bem";
 import "./Label.scss";
-
+// @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently
 const Label = forwardRef(
   ({ text, children, required, placement, description, size, large, style, simple, flat }, ref) => {
     const tagName = simple ? "div" : "label";
diff --git a/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx b/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx
index 33c5f4b6ee34..0998badd8c18 100644
--- a/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx
+++ b/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx
@@ -1,4 +1,5 @@
 import { forwardRef, useEffect, useMemo, useState } from "react";
+import { Toggle as UiToggle } from "@humansignal/ui";
 import { cn } from "../../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";
@@ -50,18 +51,15 @@ const Toggle = forwardRef(
       >
         {({ ref }) => (
           <div className={classList.join(" ")}>
-            <input
+            <UiToggle
               ref={ref}
               {...props}
-              className={rootClass.elem("input")}
-              type="checkbox"
               checked={isChecked}
               onChange={(e) => {
                 setIsChecked(e.target.checked);
                 onChange?.(e);
               }}
             />
-            <span className={rootClass.elem("indicator")} />
           </div>
         )}
       </FormField>
diff --git a/web/libs/datamanager/src/components/Label/Label.jsx b/web/libs/datamanager/src/components/Label/Label.jsx
index 3492a79950a2..f527cf4645ca 100644
--- a/web/libs/datamanager/src/components/Label/Label.jsx
+++ b/web/libs/datamanager/src/components/Label/Label.jsx
@@ -12,6 +12,7 @@ import { Space } from "../Common/Space/Space";
 import { DataView } from "../MainView";
 import "./Label.scss";
 
+// Todo: consider renaming this file to something like LabelingWrapper as it is not a Label component
 const LabelingHeader = ({ SDK, onClick, isExplorerMode }) => {
   return (
     <Elem name="header" mod={{ labelStream: !isExplorerMode }}>
diff --git a/web/libs/editor/src/common/Toggle/Toggle.jsx b/web/libs/editor/src/common/Toggle/Toggle.jsx
deleted file mode 100644
index cfb31c74d2a0..000000000000
--- a/web/libs/editor/src/common/Toggle/Toggle.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { forwardRef, useEffect, useMemo, useState } from "react";
-import { Block, cn, Elem } from "../../utils/bem";
-import { Label } from "../Label/Label";
-import "./Toggle.scss";
-
-const Toggle = forwardRef(
-  (
-    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props },
-    ref,
-  ) => {
-    const rootClass = cn("toggle");
-    const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
-    const [isChecked, setIsChecked] = useState(defaultChecked ?? checked ?? false);
-
-    const mods = {};
-
-    useEffect(() => {
-      setIsChecked(initialChecked);
-    }, [initialChecked]);
-
-    if (isChecked) mods.checked = isChecked;
-    mods.disabled = props.disabled;
-
-    const formField = (
-      <Block name="toggle" className={className} mod={mods} style={style}>
-        <input
-          ref={ref}
-          {...props}
-          className={rootClass.elem("input")}
-          type="checkbox"
-          checked={isChecked}
-          onChange={(e) => {
-            setIsChecked(e.target.checked);
-            onChange?.(e);
-          }}
-        />
-        <Elem tag="span" name="indicator" />
-      </Block>
-    );
-
-    return label ? (
-      <Label
-        ref={ref}
-        placement="right"
-        required={required}
-        text={label}
-        children={formField}
-        description={description}
-        {...(labelProps ?? {})}
-      />
-    ) : (
-      formField
-    );
-  },
-);
-
-export default Toggle;
diff --git a/web/libs/editor/src/common/Toggle/Toggle.scss b/web/libs/editor/src/common/Toggle/Toggle.scss
deleted file mode 100644
index dc7524474ff1..000000000000
--- a/web/libs/editor/src/common/Toggle/Toggle.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.toggle {
-  width: 42px; 
-  height: 24px;
-  display: block;
-  min-width: 42px;
-  max-height: 24px;
-  border-radius: 12px;
-  position: relative;
-  cursor: pointer;
-  color: var(--toggle-color, var(--grape_500));
-  transition: box-shadow 80ms ease;
-  background: linear-gradient(0deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 5%)), var(--sand_0);
-  box-shadow: inset 0 1px 0 rgb(0 0 0 / 5%), inset 0 0 0 1px rgb(0 0 0 / 5%);
-
-  &__input {
-    top: 0;
-    left: 0;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-
-  &__indicator {
-    height: 24px;
-    width: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 120ms ease;
-
-    &::before {
-      content: "";
-      width: 10px;
-      height: 10px;
-      border-radius: 100%;
-      transition: all 120ms ease;
-      background: var(--sand_200);
-      box-shadow: 0 5px 10px rgb(0 0 0 / 15%), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 5%);
-    }
-  }
-
-  &_checked &__indicator {
-    margin-left: 18px;
-
-    &::before {
-      width: 16px;
-      height: 16px;
-      background: currentcolor;
-      box-shadow: 0 5px 10px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%);
-    }
-  }
-
-  &_disabled {
-    box-shadow: none;
-    pointer-events: none;
-    background: var(--sand_200);
-  }
-
-  &_disabled &__indicator {
-    transition: none;
-  }
-
-  &_disabled &__indicator::before,
-  &_disabled.toggle_checked &__indicator::before {
-    box-shadow: none;
-    transition: none;
-    background-color: var(--sand_500);
-  }
-}
\ No newline at end of file
diff --git a/web/libs/ui/src/lib/label/label.module.scss b/web/libs/ui/src/lib/label/label.module.scss
index fbefdd6402f1..9ac0679c465c 100644
--- a/web/libs/ui/src/lib/label/label.module.scss
+++ b/web/libs/ui/src/lib/label/label.module.scss
@@ -20,6 +20,7 @@
     font-size: 14px;
     line-height: 22px;
     color: var(--sand_500);
+    display: block;
   }
 
   &__field {
diff --git a/web/libs/ui/src/lib/label/label.tsx b/web/libs/ui/src/lib/label/label.tsx
index 5d1c2a261ecf..c7a9b425dee8 100644
--- a/web/libs/ui/src/lib/label/label.tsx
+++ b/web/libs/ui/src/lib/label/label.tsx
@@ -11,13 +11,35 @@ type LabelProps = {
   style?: any;
   simple: false;
   flat: false;
-}
+};
 export const Label = forwardRef(
-  ({ text, children, required, placement="left", description, size="small", style:inlineStyle, simple, flat }:LabelProps) => {
+  ({
+    text,
+    children,
+    required,
+    placement = "left",
+    description,
+    size = "small",
+    style: inlineStyle,
+    simple,
+    flat,
+  }: LabelProps) => {
     const TagName = simple ? "div" : "label";
 
     return (
-      <TagName style={inlineStyle} data-required={required} className={clsx(styles.label, { [styles.label_size_small]: size==="small", [styles.label_size_large]: size==="large", [styles.label_flat]: flat, [styles.label_placement_left]: placement==="left", [styles.label_placement_right]: placement==="right", [styles.label_withDescription]: !!description, [styles.label_empty]: !children})}>
+      <TagName
+        style={inlineStyle}
+        data-required={required}
+        className={clsx(styles.label, {
+          [styles.label_size_small]: size === "small",
+          [styles.label_size_large]: size === "large",
+          [styles.label_flat]: flat,
+          [styles.label_placement_left]: placement === "left",
+          [styles.label_placement_right]: placement === "right",
+          [styles.label_withDescription]: !!description,
+          [styles.label_empty]: !children,
+        })}
+      >
         <span className={clsx(styles.label__text)}>
           <span className={clsx(styles.label__content)}>
             {text}
@@ -28,4 +50,4 @@ export const Label = forwardRef(
       </TagName>
     );
   },
-);
\ No newline at end of file
+);
diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index 6375e5e12dac..65c6d1ad3456 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -1,6 +1,6 @@
-import { ChangeEvent, forwardRef, useEffect, useMemo, useState } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import clsx from "clsx";
-import {Label} from "@humansignal/ui";
+import { Label } from "@humansignal/ui";
 import styles from "./toggle.module.scss";
 
 type ToggleProps = {
@@ -10,15 +10,27 @@ type ToggleProps = {
   description?: string;
   checked: false;
   defaultChecked: false;
-  onChange: (e:React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   required: false;
   style: any;
   disabled: false;
-}
+};
 
 export const Toggle = forwardRef(
   (
-    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props }:ToggleProps, ref
+    {
+      className,
+      label,
+      labelProps,
+      description,
+      checked,
+      defaultChecked,
+      onChange,
+      required,
+      style,
+      ...props
+    }: ToggleProps,
+    ref,
   ) => {
     const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
     const [isChecked, setIsChecked] = useState<boolean>(defaultChecked ?? checked ?? false);
@@ -27,14 +39,20 @@ export const Toggle = forwardRef(
     }, [initialChecked]);
 
     const formField = (
-      <div className={clsx(styles.toggle, { [styles.toggle_disabled]: props.disabled, [styles.toggle_checked]: isChecked })} style={style}>
+      <div
+        className={clsx(styles.toggle, {
+          [styles.toggle_disabled]: props.disabled,
+          [styles.toggle_checked]: isChecked,
+        })}
+        style={style}
+      >
         <input
           {...props}
           ref={ref}
           className={clsx(styles.toggle__input)}
           type="checkbox"
           checked={isChecked}
-          onChange={(e:React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setIsChecked(e.target.checked);
             onChange?.(e);
           }}
@@ -44,15 +62,11 @@ export const Toggle = forwardRef(
     );
 
     return label ? (
-      <Label
-        placement="right"
-        required={required}
-        text={label}
-        description={description}
-        {...(labelProps ?? {})}
-      >{formField}</Label>
+      <Label placement="right" required={required} text={label} description={description} {...(labelProps ?? {})}>
+        {formField}
+      </Label>
     ) : (
       formField
     );
   },
-);
\ No newline at end of file
+);

From c31df4a4c031aa2fc00f66b2e7ba2b86c226d86e Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Fri, 29 Nov 2024 13:41:23 -0500
Subject: [PATCH 05/15] more cleanup

---
 .../Form/Elements/Toggle/Toggle.jsx           | 31 +++-----
 .../Form/Elements/Toggle/Toggle.scss          | 64 -----------------
 .../Common/Form/Elements/Toggle/Toggle.jsx    | 31 +++-----
 .../Common/Form/Elements/Toggle/Toggle.scss   | 71 -------------------
 4 files changed, 18 insertions(+), 179 deletions(-)
 delete mode 100644 web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss
 delete mode 100644 web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.scss

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
index 52b78c5321c8..142fa02cfd6c 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
@@ -1,10 +1,8 @@
 import { forwardRef, useEffect, useMemo } from "react";
 import { Toggle as UiToggle } from "@humansignal/ui";
-import { cn } from "../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";
 import { Label } from "@humansignal/ui";
-import "./Toggle.scss";
 
 const Toggle = forwardRef(
   (
@@ -23,22 +21,13 @@ const Toggle = forwardRef(
     },
     ref,
   ) => {
-    const rootClass = cn("toggle");
     const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
     const [isChecked, setIsChecked] = useValueTracker(checked, defaultChecked ?? false);
 
-    const classList = [rootClass];
-    const mods = {};
-
     useEffect(() => {
       setIsChecked(initialChecked);
     }, [initialChecked]);
 
-    if (isChecked) mods.checked = isChecked;
-    mods.disabled = props.disabled;
-
-    classList.push(rootClass.mod(mods), className);
-
     const formField = (
       <FormField
         ref={label ? null : ref}
@@ -51,17 +40,15 @@ const Toggle = forwardRef(
         {...props}
       >
         {(ref) => (
-          <div className={classList.join(" ")}>
-            <UiToggle
-              ref={ref}
-              {...props}
-              checked={isChecked}
-              onChange={(e) => {
-                setIsChecked(e.target.checked);
-                onChange?.(e);
-              }}
-            />
-          </div>
+          <UiToggle
+            ref={ref}
+            {...props}
+            checked={isChecked}
+            onChange={(e) => {
+              setIsChecked(e.target.checked);
+              onChange?.(e);
+            }}
+          />
         )}
       </FormField>
     );
diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss
deleted file mode 100644
index 65be46a922c7..000000000000
--- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.toggle { 
-  width: 42px;
-  height: 24px;
-  display: block;
-  min-width: 42px;
-  max-height: 24px;
-  border-radius: 12px;
-  position: relative;
-  cursor: pointer;
-  transition: box-shadow 80ms ease;
-  background: var(--sand_0);
-  border: 1px solid var(--sand_300);
-
-  &__input {
-    top: 0;
-    left: 0;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-
-  &__indicator {
-    height: 24px;
-    width: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 120ms ease;
-
-    &::before {
-      content: "";
-      width: 16px;
-      height: 16px;
-      border-radius: 100%;
-      transition: all 120ms ease;
-      background: var(--sand_400);
-      box-shadow: 0 5px 10px rgb(18 17 13 / 15%), inset 0 -1px 0 rgb(18 17 13 / 10%), inset 0 0 0 1px rgb(18 17 13 / 5%);
-    }
-  }
-
-  &_checked &__indicator {
-    margin-left: 18px;
-
-    &::before {
-      width: 16px;
-      height: 16px;
-      background: var(--primary_link);
-      box-shadow: 0 5px 10px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%);
-    }
-  }
-
-  &_disabled &__indicator {
-    transition: none;
-  }
-
-  &_disabled &__indicator::before {
-    background-color: var(--sand_100);
-    box-shadow: none;
-    transition: none;
-  }
-}
\ No newline at end of file
diff --git a/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx b/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx
index 0998badd8c18..03a9a94ad751 100644
--- a/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx
+++ b/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.jsx
@@ -1,9 +1,7 @@
 import { forwardRef, useEffect, useMemo, useState } from "react";
 import { Toggle as UiToggle } from "@humansignal/ui";
-import { cn } from "../../../../../utils/bem";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";
-import "./Toggle.scss";
 
 const Toggle = forwardRef(
   (
@@ -22,22 +20,13 @@ const Toggle = forwardRef(
     },
     ref,
   ) => {
-    const rootClass = cn("toggle-dm");
     const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
     const [isChecked, setIsChecked] = useState(defaultChecked ?? checked ?? false);
 
-    const classList = [rootClass];
-    const mods = {};
-
     useEffect(() => {
       setIsChecked(initialChecked);
     }, [initialChecked]);
 
-    if (isChecked) mods.checked = isChecked;
-    mods.disabled = props.disabled;
-
-    classList.push(rootClass.mod(mods), className);
-
     const formField = (
       <FormField
         ref={label ? null : ref}
@@ -50,17 +39,15 @@ const Toggle = forwardRef(
         {...props}
       >
         {({ ref }) => (
-          <div className={classList.join(" ")}>
-            <UiToggle
-              ref={ref}
-              {...props}
-              checked={isChecked}
-              onChange={(e) => {
-                setIsChecked(e.target.checked);
-                onChange?.(e);
-              }}
-            />
-          </div>
+          <UiToggle
+            ref={ref}
+            {...props}
+            checked={isChecked}
+            onChange={(e) => {
+              setIsChecked(e.target.checked);
+              onChange?.(e);
+            }}
+          />
         )}
       </FormField>
     );
diff --git a/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.scss b/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.scss
deleted file mode 100644
index 0b06a24389c8..000000000000
--- a/web/libs/datamanager/src/components/Common/Form/Elements/Toggle/Toggle.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.toggle-dm {
-  width: 42px;
-  height: 24px;
-  display: block;
-  min-width: 42px;
-  max-height: 24px;
-  border-radius: 12px;
-  position: relative;
-  cursor: pointer;
-  transition: box-shadow 80ms ease;
-  background: linear-gradient(0deg, var(--black_5), var(--black_5)), #FFF;
-  box-shadow: inset 0 1px 0 var(--black_5), inset 0 0 0 1px var(--black_5);
-
-  &__input {
-    top: 0;
-    left: 0;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-
-  &__indicator {
-    height: 24px;
-    width: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 120ms ease;
-
-    &::before {
-      content: "";
-      width: 10px;
-      height: 10px;
-      border-radius: 100%;
-      transition: all 120ms ease;
-      background: rgba(var(--black-raw), 0.12);
-      box-shadow: 0 5px 10px var(--black_15), inset 0 -1px 0 var(--black_10), inset 0 0 0 1px var(--black_5);
-    }
-  }
-
-  &_checked &__indicator {
-    margin-left: 18px;
-
-    &::before {
-      width: 16px;
-      height: 16px;
-      background: var(--accent_color);
-      box-shadow: 0 5px 10px rgb(var(--accent_color-raw) / 30%), inset 0 -1px 0 var(--black_10);
-    }
-  }
-
-  &_disabled {
-    box-shadow: none;
-    pointer-events: none;
-    background: rgb(0 0 0 / 8%);
-  }
-
-  &_disabled &__indicator {
-    transition: none;
-  }
-
-  &_disabled &__indicator::before,
-  &_disabled.toggle_checked &__indicator::before {
-    box-shadow: none;
-    transition: none;
-    background-color: rgb(0 0 0 / 12%);
-  }
-}

From 8106b049ee9cbfca58f7bc9ac08f44878beae827 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Fri, 29 Nov 2024 13:51:47 -0500
Subject: [PATCH 06/15] supporting passed in className

---
 web/libs/ui/src/lib/toggle/toggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index 65c6d1ad3456..da03082f1fd5 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -43,7 +43,7 @@ export const Toggle = forwardRef(
         className={clsx(styles.toggle, {
           [styles.toggle_disabled]: props.disabled,
           [styles.toggle_checked]: isChecked,
-        })}
+        }, className)}
         style={style}
       >
         <input

From 78f061058901e4cded25f62d6bc6e6dffd737cde Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Fri, 29 Nov 2024 16:01:00 -0500
Subject: [PATCH 07/15] cleaning up types and setting safe defaults + brought
 in alwaysBlue default false

---
 web/libs/ui/src/lib/toggle/toggle.module.scss |  9 ++++++
 web/libs/ui/src/lib/toggle/toggle.tsx         | 29 ++++++++++++-------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/web/libs/ui/src/lib/toggle/toggle.module.scss b/web/libs/ui/src/lib/toggle/toggle.module.scss
index dc7524474ff1..43f2d1945493 100644
--- a/web/libs/ui/src/lib/toggle/toggle.module.scss
+++ b/web/libs/ui/src/lib/toggle/toggle.module.scss
@@ -53,6 +53,15 @@
     }
   }
 
+  &_alwaysBlue &__indicator {
+    &::before {
+      width: 16px;
+      height: 16px;
+      background: var(--primary_link);
+      box-shadow: 0 5px 10px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%);
+    }
+  }
+
   &_disabled {
     box-shadow: none;
     pointer-events: none;
diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index da03082f1fd5..792dfbbc362c 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -8,12 +8,13 @@ type ToggleProps = {
   label?: string;
   labelProps: any;
   description?: string;
-  checked: false;
-  defaultChecked: false;
+  checked?: boolean;
+  defaultChecked?: boolean;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  required: false;
+  required?: boolean;
   style: any;
-  disabled: false;
+  disabled?: boolean;
+  alwaysBlue?: boolean;
 };
 
 export const Toggle = forwardRef(
@@ -23,11 +24,12 @@ export const Toggle = forwardRef(
       label,
       labelProps,
       description,
-      checked,
-      defaultChecked,
+      checked = false,
+      defaultChecked = false,
       onChange,
-      required,
+      required = false,
       style,
+      alwaysBlue = false,
       ...props
     }: ToggleProps,
     ref,
@@ -40,10 +42,15 @@ export const Toggle = forwardRef(
 
     const formField = (
       <div
-        className={clsx(styles.toggle, {
-          [styles.toggle_disabled]: props.disabled,
-          [styles.toggle_checked]: isChecked,
-        }, className)}
+        className={clsx(
+          styles.toggle,
+          {
+            [styles.toggle_disabled]: props.disabled,
+            [styles.toggle_checked]: isChecked,
+            [styles.toggle_alwaysBlue]: alwaysBlue,
+          },
+          className,
+        )}
         style={style}
       >
         <input

From 03c90a696682e9017051f60f6a81e7628b3b18ff Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Fri, 29 Nov 2024 17:15:15 -0500
Subject: [PATCH 08/15] oops - minor correction

---
 web/libs/ui/src/lib/toggle/toggle.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index 792dfbbc362c..8853351beb8c 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -24,8 +24,8 @@ export const Toggle = forwardRef(
       label,
       labelProps,
       description,
-      checked = false,
-      defaultChecked = false,
+      checked,
+      defaultChecked,
       onChange,
       required = false,
       style,

From 3ff5cb6d588c92e166f444d636acd54b0266eb4c Mon Sep 17 00:00:00 2001
From: yyassi-heartex <104568407+yyassi-heartex@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:40:12 -0500
Subject: [PATCH 09/15] Update
 web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx

Co-authored-by: hlomzik <hlomzik@gmail.com>
---
 .../labelstudio/src/components/Form/Elements/Label/Label.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx
index 52647bb3b86c..ec410010e487 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx
@@ -1,7 +1,7 @@
 import { createElement } from "react";
 import { cn } from "../../../../utils/bem";
 import "./Label.scss";
-// @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently
+/** @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently */
 const Label = ({ text, children, required, placement, description, size, large, style, simple, flat }) => {
   const rootClass = cn("label-ls");
   const classList = [rootClass];

From eb62f586ee1d45902a8e1e7554b907764968b17d Mon Sep 17 00:00:00 2001
From: yyassi-heartex <104568407+yyassi-heartex@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:46:09 -0500
Subject: [PATCH 10/15] Update
 web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx

Co-authored-by: hlomzik <hlomzik@gmail.com>
---
 .../src/components/Common/Form/Elements/Label/Label.jsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx b/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx
index 733f5b378eeb..cb99e89a5be3 100644
--- a/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx
+++ b/web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx
@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import { Block, Elem } from "../../../../../utils/bem";
 import "./Label.scss";
-// @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently
+/** @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently */
 const Label = forwardRef(
   ({ text, children, required, placement, description, size, large, style, simple, flat }, ref) => {
     const tagName = simple ? "div" : "label";

From baa5208d392ad794b47c1a7c28df3ae0cb67e32f Mon Sep 17 00:00:00 2001
From: yyassi-heartex <104568407+yyassi-heartex@users.noreply.github.com>
Date: Tue, 3 Dec 2024 08:56:40 -0500
Subject: [PATCH 11/15] Update web/libs/ui/src/lib/toggle/toggle.module.scss

Co-authored-by: hlomzik <hlomzik@gmail.com>
---
 web/libs/ui/src/lib/toggle/toggle.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/libs/ui/src/lib/toggle/toggle.module.scss b/web/libs/ui/src/lib/toggle/toggle.module.scss
index 43f2d1945493..daf5bd6bfa25 100644
--- a/web/libs/ui/src/lib/toggle/toggle.module.scss
+++ b/web/libs/ui/src/lib/toggle/toggle.module.scss
@@ -1,5 +1,5 @@
 .toggle {
-  width: 42px; 
+  width: 42px;
   height: 24px;
   display: block;
   min-width: 42px;

From 609d196a3eb5981f834ae2d2c424587490f291f6 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Wed, 4 Dec 2024 09:07:39 -0500
Subject: [PATCH 12/15] required label visuals is now slightly smaller with a
 margin

---
 web/libs/ui/src/lib/label/label.module.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/libs/ui/src/lib/label/label.module.scss b/web/libs/ui/src/lib/label/label.module.scss
index 9ac0679c465c..4fe826185b28 100644
--- a/web/libs/ui/src/lib/label/label.module.scss
+++ b/web/libs/ui/src/lib/label/label.module.scss
@@ -53,7 +53,9 @@
 
   &[data-required] &__text::after {
     content: "Required";
+    font-size: 0.825rem;
     color: var(--sand_500);
+    margin-left: 0.325rem;
   }
 
   &_placement_right {

From f6b865d93995787fddf361b774ffcb79f5a413ce Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Wed, 4 Dec 2024 09:49:39 -0500
Subject: [PATCH 13/15] required default was applying required erronously

---
 web/libs/ui/src/lib/toggle/toggle.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/libs/ui/src/lib/toggle/toggle.tsx b/web/libs/ui/src/lib/toggle/toggle.tsx
index 8853351beb8c..a7fa8bfa9501 100644
--- a/web/libs/ui/src/lib/toggle/toggle.tsx
+++ b/web/libs/ui/src/lib/toggle/toggle.tsx
@@ -27,9 +27,9 @@ export const Toggle = forwardRef(
       checked,
       defaultChecked,
       onChange,
-      required = false,
+      required,
       style,
-      alwaysBlue = false,
+      alwaysBlue,
       ...props
     }: ToggleProps,
     ref,

From 09ef32c32c3eabc0ac3db6c0a5ba994ae120a593 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Mon, 16 Dec 2024 12:43:21 -0500
Subject: [PATCH 14/15] lint cleanup

---
 web/libs/ui/src/lib/label/label.module.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/web/libs/ui/src/lib/label/label.module.scss b/web/libs/ui/src/lib/label/label.module.scss
index 4fe826185b28..dc9a6bb15196 100644
--- a/web/libs/ui/src/lib/label/label.module.scss
+++ b/web/libs/ui/src/lib/label/label.module.scss
@@ -11,10 +11,6 @@
     justify-content: space-between;
   }
 
-  &__content{
-    
-  }
-
   &__description {
     margin-top: 5px;
     font-size: 14px;

From 568529e059938cd0c9ae97a9f367de74c704dbf1 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Wed, 18 Dec 2024 06:38:42 -0500
Subject: [PATCH 15/15] using exisitng LS Label for now until we unify Label
 visuals across the application

---
 .../labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
index 142fa02cfd6c..52fe95a95a68 100644
--- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
+++ b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx
@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useMemo } from "react";
 import { Toggle as UiToggle } from "@humansignal/ui";
 import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";
-import { Label } from "@humansignal/ui";
+import { default as Label } from "../Label/Label";
 
 const Toggle = forwardRef(
   (