From d7abb970b5ff27478ea55b82e6565ac490ae91bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Fri, 21 Feb 2025 13:18:35 +0100
Subject: [PATCH 01/15] Switch tokens redesign

---
 packages/lib/.storybook/preview-head.html  |   1 -
 packages/lib/.storybook/preview.tsx        |   1 +
 packages/lib/src/switch/Switch.stories.tsx |  33 --
 packages/lib/src/switch/Switch.tsx         | 365 ++++++++-------------
 4 files changed, 131 insertions(+), 269 deletions(-)

diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html
index e28cb145ff..4e1ea405ff 100644
--- a/packages/lib/.storybook/preview-head.html
+++ b/packages/lib/.storybook/preview-head.html
@@ -2,7 +2,6 @@
   rel="stylesheet"
   href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1"
 />
-<link rel="stylesheet" href="../src/styles/variables.css" />
 
 <style>
   body {
diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx
index 50171526b6..e535a40648 100644
--- a/packages/lib/.storybook/preview.tsx
+++ b/packages/lib/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react";
 import { disabledRules } from "../test/accessibility/rules/common/disabledRules";
+import "../src/styles/variables.css";
 
 const preview: Preview = {
   parameters: {
diff --git a/packages/lib/src/switch/Switch.stories.tsx b/packages/lib/src/switch/Switch.stories.tsx
index 097a01c378..ad296e356a 100644
--- a/packages/lib/src/switch/Switch.stories.tsx
+++ b/packages/lib/src/switch/Switch.stories.tsx
@@ -3,7 +3,6 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import preview from "../../.storybook/preview";
 import { disabledRules } from "../../test/accessibility/rules/specific/switch/disabledRules";
-import { HalstackProvider } from "../HalstackContext";
 import DxcSwitch from "./Switch";
 
 export default {
@@ -21,13 +20,6 @@ export default {
   },
 } as Meta<typeof DxcSwitch>;
 
-const opinionatedTheme = {
-  switch: {
-    checkedBaseColor: "#5f249f",
-    fontColor: "#000000",
-  },
-};
-
 const Switch = () => (
   <>
     <ExampleContainer>
@@ -120,31 +112,6 @@ const Switch = () => (
       <Title title="FitContent size" theme="light" level={4} />
       <DxcSwitch label="FitContent" size="fitContent" />
     </ExampleContainer>
-    <Title title="Opinionated theme" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Checked" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSwitch label="Switch" defaultChecked />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Default" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSwitch label="Switch" />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSwitch label="Switch" disabled />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled checked" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSwitch label="Switch" disabled defaultChecked />
-      </HalstackProvider>
-    </ExampleContainer>
   </>
 );
 
diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index 67464536c4..55bd97d69f 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -1,105 +1,10 @@
 import { forwardRef, KeyboardEvent, useContext, useId, useRef, useState } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import { AdvancedTheme, spaces } from "../common/variables";
+import styled from "styled-components";
+import { spaces } from "../common/variables";
 import { getMargin } from "../common/utils";
-import HalstackContext, { HalstackLanguageContext } from "../HalstackContext";
+import { HalstackLanguageContext } from "../HalstackContext";
 import SwitchPropsType, { RefType } from "./types";
 
-const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
-  (
-    {
-      defaultChecked = false,
-      checked,
-      value,
-      label = "",
-      labelPosition = "before",
-      name = "",
-      disabled = false,
-      optional = false,
-      onChange,
-      margin,
-      size = "fitContent",
-      tabIndex = 0,
-      ariaLabel = "Switch",
-    },
-    ref
-  ): JSX.Element => {
-    const switchId = `switch-${useId()}`;
-    const labelId = `label-${switchId}`;
-    const [innerChecked, setInnerChecked] = useState(defaultChecked);
-
-    const colorsTheme = useContext(HalstackContext);
-    const translatedLabels = useContext(HalstackLanguageContext);
-    const refTrack = useRef<HTMLSpanElement | null>(null);
-
-    const handleOnKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-      switch (event.key) {
-        case "Enter":
-        case " ":
-          event.preventDefault();
-          refTrack.current?.focus();
-          setInnerChecked(!(checked ?? innerChecked));
-          onChange?.(!(checked ?? innerChecked));
-          break;
-        default:
-          break;
-      }
-    };
-
-    const handlerSwitchChange = () => {
-      if (checked == null) {
-        setInnerChecked((currentInnerChecked) => !currentInnerChecked);
-      }
-      onChange?.(checked ? !checked : !innerChecked);
-    };
-
-    return (
-      <ThemeProvider theme={colorsTheme.switch}>
-        <SwitchContainer
-          margin={margin}
-          size={size}
-          onKeyDown={handleOnKeyDown}
-          disabled={disabled}
-          onClick={!disabled ? handlerSwitchChange : undefined}
-          ref={ref}
-        >
-          {labelPosition === "before" && label && (
-            <LabelContainer id={labelId} labelPosition={labelPosition} disabled={disabled} label={label}>
-              {label} {optional && <>{translatedLabels.formFields.optionalLabel}</>}
-            </LabelContainer>
-          )}
-          <ValueInput
-            type="checkbox"
-            name={name}
-            aria-hidden
-            value={value}
-            disabled={disabled}
-            checked={checked ?? innerChecked}
-            readOnly
-          />
-          <SwitchBase>
-            <SwitchTrack
-              role="switch"
-              aria-checked={checked ?? innerChecked}
-              aria-disabled={disabled}
-              disabled={disabled}
-              aria-labelledby={labelId}
-              aria-label={label ? undefined : ariaLabel}
-              tabIndex={!disabled ? tabIndex : -1}
-              ref={refTrack}
-            />
-          </SwitchBase>
-          {labelPosition === "after" && label && (
-            <LabelContainer id={labelId} labelPosition={labelPosition} disabled={disabled} label={label}>
-              {optional && <>{translatedLabels.formFields.optionalLabel}</>} {label}
-            </LabelContainer>
-          )}
-        </SwitchContainer>
-      </ThemeProvider>
-    );
-  }
-);
-
 const sizes = {
   small: "60px",
   medium: "240px",
@@ -113,67 +18,18 @@ const calculateWidth = (margin: SwitchPropsType["margin"], size: SwitchPropsType
     ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
     : size && sizes[size];
 
-const getDisabledColor = (
-  theme: AdvancedTheme["switch"],
-  element: "track" | "thumb" | "label",
-  subElement?: "check" | "uncheck"
-) => {
-  switch (element) {
-    case "track":
-      switch (subElement) {
-        case "check":
-          return theme.disabledCheckedTrackBackgroundColor;
-        case "uncheck":
-          return theme.disabledUncheckedTrackBackgroundColor;
-        default:
-          return undefined;
-      }
-    case "thumb":
-      switch (subElement) {
-        case "check":
-          return theme.disabledCheckedThumbBackgroundColor;
-        case "uncheck":
-          return theme.disabledUncheckedThumbBackgroundColor;
-        default:
-          return undefined;
-      }
-    case "label":
-      return theme.disabledLabelFontColor;
+const getTrackColor = (checked: SwitchPropsType["checked"], disabled: SwitchPropsType["disabled"]): string => {
+  switch (true) {
+    case checked && disabled:
+      return "var(--color-bg-primary-lighter)";
+    case !checked && disabled:
+      return "var(--color-bg-neutral-light)";
+    case checked && !disabled:
+      return "var(--color-bg-primary-strong)";
+    case !checked && !disabled:
+      return "var(--color-bg-neutral-strong)";
     default:
-      return undefined;
-  }
-};
-
-const getNotDisabledColor = (
-  theme: AdvancedTheme["switch"],
-  element: "track" | "thumb" | "label",
-  subElement?: "check" | "uncheck"
-) => {
-  switch (element) {
-    case "track":
-      switch (subElement) {
-        case "check":
-          return theme.checkedTrackBackgroundColor;
-        case "uncheck":
-          return theme.uncheckedTrackBackgroundColor;
-        default:
-          return undefined;
-      }
-      break;
-    case "thumb":
-      switch (subElement) {
-        case "check":
-          return theme.checkedThumbBackgroundColor;
-        case "uncheck":
-          return theme.uncheckedThumbBackgroundColor;
-        default:
-          return undefined;
-      }
-      break;
-    case "label":
-      return theme.labelFontColor;
-    default:
-      return undefined;
+      return "";
   }
 };
 
@@ -184,10 +40,9 @@ const SwitchContainer = styled.div<{
 }>`
   display: inline-flex;
   align-items: center;
+  gap: var(--spacing-gap-s);
   width: ${(props) => calculateWidth(props.margin, props.size)};
-  height: 40px;
-  cursor: ${(props) => (props.disabled === true ? "not-allowed" : "pointer")};
-
+  height: var(--height-xl);
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -197,102 +52,142 @@ const SwitchContainer = styled.div<{
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
 `;
 
-const LabelContainer = styled.span<{
-  labelPosition: SwitchPropsType["labelPosition"];
+const Label = styled.span<{
   disabled: SwitchPropsType["disabled"];
-  label: SwitchPropsType["label"];
+  labelPosition: SwitchPropsType["labelPosition"];
 }>`
+  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark)")};
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-label-l);
+  font-weight: var(--typography-label-regular);
+  order: ${({ labelPosition }) => (labelPosition === "before" ? 0 : 1)};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: ${(props) =>
-    props.disabled ? getDisabledColor(props.theme, "label") : getNotDisabledColor(props.theme, "label")};
-  opacity: 1;
-  font-family: ${(props) => props.theme.labelFontFamily};
-  font-size: ${(props) => props.theme.labelFontSize};
-  font-style: ${(props) => (props.disabled ? props.theme.disabledLabelFontStyle : props.theme.labelFontStyle)};
-  font-weight: ${(props) => props.theme.labelFontWeight};
-
-  ${(props) =>
-    !props.label
-      ? "margin: 0px;"
-      : props.labelPosition === "after"
-        ? `margin-left: ${props.theme.spaceBetweenLabelSwitch};`
-        : `margin-right: ${props.theme.spaceBetweenLabelSwitch};`};
-
-  ${(props) => props.labelPosition === "before" && "order: -1"}
 `;
 
-const SwitchBase = styled.label`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  margin: 0px 12px;
-`;
-
-const ValueInput = styled.input`
-  display: none;
-`;
-
-const SwitchTrack = styled.span<{ disabled: SwitchPropsType["disabled"] }>`
-  border-radius: 15px;
-  width: ${(props) => props.theme.trackWidth};
-  height: ${(props) => props.theme.trackHeight};
+const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: SwitchPropsType["disabled"] }>`
   position: relative;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
-
-  &:focus-visible {
-    outline: none;
-    ::before {
-      outline: ${(props) => `${props.theme.thumbFocusColor} solid 2px`};
-      outline-offset: 6px;
-    }
-  }
-
-  /* Thumb element */
+  margin: var(--spacing-padding-none) var(--spacing-padding-s);
+  width: 36px;
+  height: var(--height-xxxs);
+  border-radius: var(--border-radius-xl, 24px);
+  background-color: ${({ checked, disabled }) => getTrackColor(checked, disabled)};
+  transition: background-color 0.2s ease-in-out; /* Background color transition */
+
+  /* Thumb */
   ::before {
     content: "";
-    transform: initial;
     position: absolute;
-    width: ${(props) => props.theme.thumbWidth};
-    height: ${(props) => props.theme.thumbHeight};
+    bottom: -6px;
+    left: -4px;
+    width: 24px;
+    height: var(--height-s);
+    background-color: var(--color-fg-neutral-bright);
     border-radius: 50%;
     box-shadow:
       0px 2px 1px -1px rgb(0 0 0 / 20%),
       0px 1px 1px 0px rgb(0 0 0 / 14%),
       0px 1px 3px 0px rgb(0 0 0 / 12%);
-    bottom: -6px;
-    left: -4px;
-    transform: translateX(0px);
-    background-color: ${(props) =>
-      props.disabled
-        ? getDisabledColor(props.theme, "thumb", "uncheck")
-        : getNotDisabledColor(props.theme, "thumb", "uncheck")};
+    transition: transform 0.2s ease-in-out; /* Thumb transform transition */
   }
-
-  /* Unchecked */
-  background-color: ${(props) =>
-    props.disabled
-      ? getDisabledColor(props.theme, "track", "uncheck")
-      : getNotDisabledColor(props.theme, "track", "uncheck")};
-
-  /* Checked */
-  &[aria-checked="true"] {
-    background-color: ${(props) =>
-      props.disabled
-        ? getDisabledColor(props.theme, "track", "check")
-        : getNotDisabledColor(props.theme, "track", "check")};
+  &:focus {
+    outline: none;
     ::before {
-      transform: translateX(${(props) => props.theme.thumbShift});
-      background-color: ${(props) =>
-        props.disabled
-          ? getDisabledColor(props.theme, "thumb", "check")
-          : getNotDisabledColor(props.theme, "thumb", "check")};
+      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+      outline-offset: 4px;
     }
   }
+  &[aria-checked="true"]::before {
+    transform: translateX(20px);
+  }
 `;
 
+const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
+  (
+    {
+      ariaLabel = "Switch",
+      checked,
+      defaultChecked = false,
+      disabled,
+      label,
+      labelPosition = "before",
+      margin,
+      name,
+      onChange,
+      optional,
+      size = "fitContent",
+      tabIndex = 0,
+      value,
+    },
+    ref
+  ): JSX.Element => {
+    const switchId = `switch-${useId()}`;
+    const labelId = `label-${switchId}`;
+    const [innerChecked, setInnerChecked] = useState(defaultChecked);
+    const refTrack = useRef<HTMLSpanElement>(null);
+    const translatedLabels = useContext(HalstackLanguageContext);
+
+    const handlerOnChange = () => {
+      if (checked == null) setInnerChecked((currentInnerChecked) => !currentInnerChecked);
+      onChange?.(!(checked ?? innerChecked));
+    };
+
+    const handleOnKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          refTrack.current?.focus();
+          setInnerChecked(!(checked ?? innerChecked));
+          onChange?.(!(checked ?? innerChecked));
+          break;
+        default:
+          break;
+      }
+    };
+
+    return (
+      <SwitchContainer
+        margin={margin}
+        size={size}
+        onKeyDown={handleOnKeyDown}
+        disabled={disabled}
+        onClick={!disabled ? handlerOnChange : undefined}
+        ref={ref}
+      >
+        {label && (
+          <Label disabled={disabled} id={labelId} labelPosition={labelPosition}>
+            {label} {optional && <>{translatedLabels.formFields.optionalLabel}</>}
+          </Label>
+        )}
+        <input
+          aria-hidden
+          checked={checked ?? innerChecked}
+          disabled={disabled}
+          name={name}
+          readOnly
+          style={{ display: "none" }}
+          type="checkbox"
+          value={value}
+        />
+        <Switch
+          aria-checked={checked ?? innerChecked}
+          aria-disabled={disabled}
+          aria-label={label ? undefined : ariaLabel}
+          aria-labelledby={labelId}
+          checked={checked ?? innerChecked}
+          disabled={disabled}
+          ref={refTrack}
+          role="switch"
+          tabIndex={disabled ? -1 : tabIndex}
+        />
+      </SwitchContainer>
+    );
+  }
+);
+
 export default DxcSwitch;

From 39b8fccd2969caa05d3a2e4dcc4da075f98d4290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Fri, 21 Feb 2025 14:53:30 +0100
Subject: [PATCH 02/15] Code page updates

---
 .../screens/components/switch/code/SwitchCodePage.tsx     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/website/screens/components/switch/code/SwitchCodePage.tsx b/apps/website/screens/components/switch/code/SwitchCodePage.tsx
index 44040bdd3b..2897a1d1da 100644
--- a/apps/website/screens/components/switch/code/SwitchCodePage.tsx
+++ b/apps/website/screens/components/switch/code/SwitchCodePage.tsx
@@ -157,8 +157,12 @@ const sections = [
             <td>
               <TableCode>{"string"}</TableCode>
             </td>
-            <td>Specifies a string to be used as the name for the switch element when no `label` is provided.</td>
-            <td>'Switch'</td>
+            <td>
+              Specifies a string to be used as the name for the switch element when no <Code>label</Code> is provided.
+            </td>
+            <td>
+              <TableCode>'Switch'</TableCode>
+            </td>
           </tr>
         </tbody>
       </DxcTable>

From af292e690d94a08132ac413125c67f838fcadbd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Mon, 24 Feb 2025 11:34:45 +0100
Subject: [PATCH 03/15] Accesibility improvements and ellipsis

---
 packages/lib/src/switch/Switch.tsx | 66 +++++++++++++-----------------
 packages/lib/src/switch/types.ts   | 32 +++++++--------
 2 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index 55bd97d69f..13e05e7a62 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, KeyboardEvent, useContext, useId, useRef, useState } from "react";
+import { forwardRef, KeyboardEvent, useContext, useState } from "react";
 import styled from "styled-components";
 import { spaces } from "../common/variables";
 import { getMargin } from "../common/utils";
@@ -34,9 +34,9 @@ const getTrackColor = (checked: SwitchPropsType["checked"], disabled: SwitchProp
 };
 
 const SwitchContainer = styled.div<{
+  disabled: SwitchPropsType["disabled"];
   margin: SwitchPropsType["margin"];
   size: SwitchPropsType["size"];
-  disabled: SwitchPropsType["disabled"];
 }>`
   display: inline-flex;
   align-items: center;
@@ -53,6 +53,15 @@ const SwitchContainer = styled.div<{
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+
+  /* Thumb focus */
+  &:focus:not([aria-disabled="true"]) {
+    outline: none;
+    > span::before {
+      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+      outline-offset: 4px;
+    }
+  }
 `;
 
 const Label = styled.span<{
@@ -72,9 +81,9 @@ const Label = styled.span<{
 const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: SwitchPropsType["disabled"] }>`
   position: relative;
   margin: var(--spacing-padding-none) var(--spacing-padding-s);
-  width: 36px;
+  min-width: 36px;
   height: var(--height-xxxs);
-  border-radius: var(--border-radius-xl, 24px);
+  border-radius: var(--border-radius-xl);
   background-color: ${({ checked, disabled }) => getTrackColor(checked, disabled)};
   transition: background-color 0.2s ease-in-out; /* Background color transition */
 
@@ -88,22 +97,11 @@ const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: Swit
     height: var(--height-s);
     background-color: var(--color-fg-neutral-bright);
     border-radius: 50%;
-    box-shadow:
-      0px 2px 1px -1px rgb(0 0 0 / 20%),
-      0px 1px 1px 0px rgb(0 0 0 / 14%),
-      0px 1px 3px 0px rgb(0 0 0 / 12%);
+    box-shadow: var(--shadow-low-x-position) var(--shadow-low-y-position) var(--shadow-low-blur)
+      var(--shadow-low-spread) var(--shadow-dark);
+    transform: ${({ checked }) => checked && "translateX(20px)"};
     transition: transform 0.2s ease-in-out; /* Thumb transform transition */
   }
-  &:focus {
-    outline: none;
-    ::before {
-      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
-      outline-offset: 4px;
-    }
-  }
-  &[aria-checked="true"]::before {
-    transform: translateX(20px);
-  }
 `;
 
 const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
@@ -124,11 +122,8 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
       value,
     },
     ref
-  ): JSX.Element => {
-    const switchId = `switch-${useId()}`;
-    const labelId = `label-${switchId}`;
+  ) => {
     const [innerChecked, setInnerChecked] = useState(defaultChecked);
-    const refTrack = useRef<HTMLSpanElement>(null);
     const translatedLabels = useContext(HalstackLanguageContext);
 
     const handlerOnChange = () => {
@@ -141,7 +136,6 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
         case "Enter":
         case " ":
           event.preventDefault();
-          refTrack.current?.focus();
           setInnerChecked(!(checked ?? innerChecked));
           onChange?.(!(checked ?? innerChecked));
           break;
@@ -152,18 +146,24 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
 
     return (
       <SwitchContainer
-        margin={margin}
-        size={size}
-        onKeyDown={handleOnKeyDown}
+        aria-checked={checked ?? innerChecked}
+        aria-disabled={disabled}
+        aria-label={label ? undefined : ariaLabel}
         disabled={disabled}
+        margin={margin}
         onClick={!disabled ? handlerOnChange : undefined}
+        onKeyDown={!disabled ? handleOnKeyDown : undefined}
         ref={ref}
+        role="switch"
+        size={size}
+        tabIndex={disabled ? -1 : tabIndex}
       >
         {label && (
-          <Label disabled={disabled} id={labelId} labelPosition={labelPosition}>
+          <Label disabled={disabled} labelPosition={labelPosition}>
             {label} {optional && <>{translatedLabels.formFields.optionalLabel}</>}
           </Label>
         )}
+        <Switch checked={checked ?? innerChecked} disabled={disabled} />
         <input
           aria-hidden
           checked={checked ?? innerChecked}
@@ -172,18 +172,8 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
           readOnly
           style={{ display: "none" }}
           type="checkbox"
-          value={value}
-        />
-        <Switch
-          aria-checked={checked ?? innerChecked}
-          aria-disabled={disabled}
-          aria-label={label ? undefined : ariaLabel}
-          aria-labelledby={labelId}
-          checked={checked ?? innerChecked}
-          disabled={disabled}
-          ref={refTrack}
           role="switch"
-          tabIndex={disabled ? -1 : tabIndex}
+          value={value}
         />
       </SwitchContainer>
     );
diff --git a/packages/lib/src/switch/types.ts b/packages/lib/src/switch/types.ts
index 1253a0f988..566b833977 100644
--- a/packages/lib/src/switch/types.ts
+++ b/packages/lib/src/switch/types.ts
@@ -2,19 +2,22 @@ import { Margin, Space } from "../common/utils";
 
 type Props = {
   /**
-   * Initial state of the switch, only when it is uncontrolled.
+   * Specifies a string to be used as the name for the switch element when no `label` is provided.
    */
-  defaultChecked?: boolean;
+  ariaLabel?: string;
   /**
    * If true, the component is checked. If undefined, the component will be uncontrolled
    * and the checked attribute will be managed internally by the component.
    */
   checked?: boolean;
   /**
-   * Will be passed to the value attribute of the html input element. When inside a form,
-   * this value will be only submitted if the switch is checked.
+   * If true, the component will be disabled.
    */
-  value?: string;
+  disabled?: boolean;
+  /**
+   * Initial state of the switch, only when it is uncontrolled.
+   */
+  defaultChecked?: boolean;
   /**
    * Text to be placed next to the switch.
    */
@@ -24,13 +27,14 @@ type Props = {
    */
   labelPosition?: "before" | "after";
   /**
-   * Name attribute of the input element.
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
    */
-  name?: string;
+  margin?: Space | Margin;
   /**
-   * If true, the component will be disabled.
+   * Name attribute of the input element.
    */
-  disabled?: boolean;
+  name?: string;
   /**
    * This function will be called when the user changes the state of the switch.
    * The new value of the checked attribute will be passed as a parameter.
@@ -40,11 +44,6 @@ type Props = {
    * If true, the component will display '(Optional)' next to the label.
    */
   optional?: boolean;
-  /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-   */
-  margin?: Space | Margin;
   /**
    * Size of the component.
    */
@@ -54,9 +53,10 @@ type Props = {
    */
   tabIndex?: number;
   /**
-   * Specifies a string to be used as the name for the switch element when no `label` is provided.
+   * Will be passed to the value attribute of the html input element. When inside a form,
+   * this value will be only submitted if the switch is checked.
    */
-  ariaLabel?: string;
+  value?: string;
 };
 
 /**

From 577d5ee0cdd35c27d8bb3973eaafca21d53d2147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Mon, 24 Feb 2025 16:53:47 +0100
Subject: [PATCH 04/15] Switch design updates

---
 packages/lib/src/switch/Switch.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index 13e05e7a62..bdbf5cd464 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -54,12 +54,14 @@ const SwitchContainer = styled.div<{
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
 
-  /* Thumb focus */
-  &:focus:not([aria-disabled="true"]) {
+  &:focus {
     outline: none;
-    > span::before {
-      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
-      outline-offset: 4px;
+    /* Thumb focus */
+    &:not([aria-disabled="true"]) {
+      > span::before {
+        outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+        outline-offset: 2px;
+      }
     }
   }
 `;
@@ -76,6 +78,11 @@ const Label = styled.span<{
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  > span {
+    color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-stronger)")};
+    font-size: var(--typography-label-m);
+  }
 `;
 
 const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: SwitchPropsType["disabled"] }>`
@@ -160,7 +167,7 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
       >
         {label && (
           <Label disabled={disabled} labelPosition={labelPosition}>
-            {label} {optional && <>{translatedLabels.formFields.optionalLabel}</>}
+            {label} <span>{optional && <>{translatedLabels.formFields.optionalLabel}</>}</span>
           </Label>
         )}
         <Switch checked={checked ?? innerChecked} disabled={disabled} />

From a17ab0a2efb8b2bee67fdad34a01cb473441d9df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Mon, 24 Feb 2025 17:07:03 +0100
Subject: [PATCH 05/15] Fixed Switch tests

---
 packages/lib/src/switch/Switch.test.tsx | 34 ++++++++-----------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/packages/lib/src/switch/Switch.test.tsx b/packages/lib/src/switch/Switch.test.tsx
index 16079f5f24..23fbfd0c34 100644
--- a/packages/lib/src/switch/Switch.test.tsx
+++ b/packages/lib/src/switch/Switch.test.tsx
@@ -9,14 +9,12 @@ describe("Switch component tests", () => {
     const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
     expect(getByText("SwitchComponent")).toBeTruthy();
   });
-
   test("Calls correct function on click", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
     fireEvent.click(getByText("SwitchComponent"));
     expect(onChange).toHaveBeenCalled();
   });
-
   test("Calls correct function on key down", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
@@ -26,8 +24,7 @@ describe("Switch component tests", () => {
     fireEvent.keyDown(getByText("SwitchComponent"), { key: " " });
     expect(onChange).toHaveBeenCalled();
   });
-
-  test("Everytime the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
+  test("Every time the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
     fireEvent.click(getByText("SwitchComponent"));
@@ -35,8 +32,7 @@ describe("Switch component tests", () => {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(true);
   });
-
-  test("Everytime the user use enter in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
+  test("Every time the user use enter in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
     fireEvent.focus(getByText("SwitchComponent"));
@@ -45,8 +41,7 @@ describe("Switch component tests", () => {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(true);
   });
-
-  test("Everytime the user use space in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
+  test("Every time the user use space in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
     fireEvent.focus(getByText("SwitchComponent"));
@@ -55,8 +50,7 @@ describe("Switch component tests", () => {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(true);
   });
-
-  test("Everytime the user clicks the component the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
+  test("Every time the user clicks the component the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" onChange={onChange} />);
     fireEvent.click(getByText("SwitchComponent"));
@@ -64,8 +58,7 @@ describe("Switch component tests", () => {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(false);
   });
-
-  test("Everytime the user use enter in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
+  test("Every time the user use enter in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" onChange={onChange} />);
     fireEvent.focus(getByText("SwitchComponent"));
@@ -74,8 +67,7 @@ describe("Switch component tests", () => {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(false);
   });
-
-  test("Everytime the user use space in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
+  test("Every time the user use space in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
     const onChange = jest.fn();
     const { getByText } = render(<DxcSwitch label="SwitchComponent" onChange={onChange} />);
     fireEvent.focus(getByText("SwitchComponent"));
@@ -84,7 +76,6 @@ describe("Switch component tests", () => {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(false);
   });
-
   test("Renders with correct initial value and initial state when it is uncontrolled", () => {
     const component = render(
       <DxcSwitch label="Default label" defaultChecked value="test-defaultChecked" name="test" />
@@ -94,28 +85,23 @@ describe("Switch component tests", () => {
     expect(inputEl?.value).toBe("test-defaultChecked");
     expect(switchEl.getAttribute("aria-checked")).toBe("true");
   });
-
   test("Renders with correct aria attributes", () => {
-    const { getByText, getByRole } = render(<DxcSwitch label="Default label" />);
+    const { getByRole } = render(<DxcSwitch label="Default label" />);
     const switchEl = getByRole("switch");
-    const label = getByText("Default label");
-    expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
     expect(switchEl.getAttribute("aria-checked")).toBe("false");
     expect(switchEl.getAttribute("aria-label")).toBeNull();
+    expect(switchEl.getAttribute("aria-disabled")).toBeNull();
   });
-
   test("Renders with correct aria-label", () => {
     const { getByRole } = render(<DxcSwitch ariaLabel="Example aria label" />);
     const switchEl = getByRole("switch");
     expect(switchEl.getAttribute("aria-label")).toBe("Example aria label");
   });
-
   test("Renders disabled switch correctly", () => {
-    const { getByText, getByRole } = render(<DxcSwitch label="Default label" disabled />);
+    const { getByRole } = render(<DxcSwitch label="Default label" disabled />);
     const switchEl = getByRole("switch");
-    const label = getByText("Default label");
-    expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
     expect(switchEl.getAttribute("aria-checked")).toBe("false");
+    expect(switchEl.getAttribute("aria-label")).toBeNull();
     expect(switchEl.getAttribute("aria-disabled")).toBe("true");
   });
 });

From 78dafba8be23d726c76252190534bae05daf7318 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Thu, 27 Feb 2025 13:39:48 +0100
Subject: [PATCH 06/15] Switch design updates

---
 packages/lib/src/switch/Switch.stories.tsx |  5 +--
 packages/lib/src/switch/Switch.tsx         | 38 ++++++++++++++--------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/lib/src/switch/Switch.stories.tsx b/packages/lib/src/switch/Switch.stories.tsx
index ad296e356a..4e1c7a1410 100644
--- a/packages/lib/src/switch/Switch.stories.tsx
+++ b/packages/lib/src/switch/Switch.stories.tsx
@@ -89,15 +89,16 @@ const Switch = () => (
       <DxcSwitch label="Small" size="small" />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Medium size (with large label)" theme="light" level={4} />
+      <Title title="Medium size (with long label)" theme="light" level={4} />
       <DxcSwitch label="Very very very large label or even huge" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Medium size (with long label)" theme="light" level={4} />
+      <Title title="Medium size (with long label + optional label)" theme="light" level={4} />
       <DxcSwitch
         label="Large texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
         labelPosition="after"
         size="medium"
+        optional
       />
     </ExampleContainer>
     <ExampleContainer>
diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index bdbf5cd464..54c28aefaf 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -35,14 +35,16 @@ const getTrackColor = (checked: SwitchPropsType["checked"], disabled: SwitchProp
 
 const SwitchContainer = styled.div<{
   disabled: SwitchPropsType["disabled"];
+  labelPosition: SwitchPropsType["labelPosition"];
   margin: SwitchPropsType["margin"];
   size: SwitchPropsType["size"];
 }>`
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-gap-s);
+  display: inline-grid;
+  grid-template-columns: ${(props) => (props.labelPosition === "after" ? "52px minmax(0, max-content)" : "minmax(0, max-content) 52px")};
+  place-items: center;
+  gap: var(--spacing-gap-m);
   width: ${(props) => calculateWidth(props.margin, props.size)};
-  height: var(--height-xl);
+  height: var(--height-m);
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -66,29 +68,35 @@ const SwitchContainer = styled.div<{
   }
 `;
 
-const Label = styled.span<{
+const LabelContainer = styled.span<{
   disabled: SwitchPropsType["disabled"];
   labelPosition: SwitchPropsType["labelPosition"];
 }>`
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-gap-xs);
   color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark)")};
   font-family: var(--typography-font-family);
   font-size: var(--typography-label-l);
   font-weight: var(--typography-label-regular);
+  max-width: 100%;
   order: ${({ labelPosition }) => (labelPosition === "before" ? 0 : 1)};
+`;
+
+const Label = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+`;
 
-  > span {
-    color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-stronger)")};
-    font-size: var(--typography-label-m);
-  }
+const OptionalLabel = styled.span<{ disabled: SwitchPropsType["disabled"] }>`
+  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-stronger)")};
+  font-size: var(--typography-label-m);
 `;
 
 const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: SwitchPropsType["disabled"] }>`
   position: relative;
-  margin: var(--spacing-padding-none) var(--spacing-padding-s);
-  min-width: 36px;
+  width: 36px;
   height: var(--height-xxxs);
   border-radius: var(--border-radius-xl);
   background-color: ${({ checked, disabled }) => getTrackColor(checked, disabled)};
@@ -157,6 +165,7 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
         aria-disabled={disabled}
         aria-label={label ? undefined : ariaLabel}
         disabled={disabled}
+        labelPosition={labelPosition}
         margin={margin}
         onClick={!disabled ? handlerOnChange : undefined}
         onKeyDown={!disabled ? handleOnKeyDown : undefined}
@@ -166,9 +175,10 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
         tabIndex={disabled ? -1 : tabIndex}
       >
         {label && (
-          <Label disabled={disabled} labelPosition={labelPosition}>
-            {label} <span>{optional && <>{translatedLabels.formFields.optionalLabel}</>}</span>
-          </Label>
+          <LabelContainer disabled={disabled} labelPosition={labelPosition}>
+            <Label>{label}</Label>
+            {optional && <OptionalLabel disabled={disabled}>{translatedLabels.formFields.optionalLabel}</OptionalLabel>}
+          </LabelContainer>
         )}
         <Switch checked={checked ?? innerChecked} disabled={disabled} />
         <input

From 26cf444f120dc3421df386f4b86bfa14c95593b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Thu, 27 Feb 2025 14:26:04 +0100
Subject: [PATCH 07/15] Switch updates

---
 packages/lib/src/switch/Switch.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index 54c28aefaf..24f3cb4a36 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -40,7 +40,8 @@ const SwitchContainer = styled.div<{
   size: SwitchPropsType["size"];
 }>`
   display: inline-grid;
-  grid-template-columns: ${(props) => (props.labelPosition === "after" ? "52px minmax(0, max-content)" : "minmax(0, max-content) 52px")};
+  grid-template-columns: ${(props) =>
+    props.labelPosition === "after" ? "52px minmax(0, max-content)" : "minmax(0, max-content) 52px"};
   place-items: center;
   gap: var(--spacing-gap-m);
   width: ${(props) => calculateWidth(props.margin, props.size)};
@@ -73,11 +74,10 @@ const LabelContainer = styled.span<{
   labelPosition: SwitchPropsType["labelPosition"];
 }>`
   display: flex;
-  align-items: baseline;
   gap: var(--spacing-gap-xs);
-  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-dark)")};
+  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")};
   font-family: var(--typography-font-family);
-  font-size: var(--typography-label-l);
+  font-size: var(--typography-label-m);
   font-weight: var(--typography-label-regular);
   max-width: 100%;
   order: ${({ labelPosition }) => (labelPosition === "before" ? 0 : 1)};
@@ -90,8 +90,7 @@ const Label = styled.span`
 `;
 
 const OptionalLabel = styled.span<{ disabled: SwitchPropsType["disabled"] }>`
-  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium);" : "var(--color-fg-neutral-stronger)")};
-  font-size: var(--typography-label-m);
+  ${({ disabled }) => !disabled && "color: var(--color-fg-neutral-stronger);"}
 `;
 
 const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: SwitchPropsType["disabled"] }>`

From ed3e8ec3938878b88c1feb9cbf024ebaefdf742f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Fri, 21 Mar 2025 14:20:13 +0100
Subject: [PATCH 08/15] Switch code updates based on feedback

---
 packages/lib/src/switch/Switch.tsx | 48 ++++++++++++++----------------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index 24f3cb4a36..fcfdbdbeb6 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -40,21 +40,18 @@ const SwitchContainer = styled.div<{
   size: SwitchPropsType["size"];
 }>`
   display: inline-grid;
-  grid-template-columns: ${(props) =>
-    props.labelPosition === "after" ? "52px minmax(0, max-content)" : "minmax(0, max-content) 52px"};
+  grid-template-columns: ${({ labelPosition }) =>
+    labelPosition === "after" ? "52px minmax(0, max-content)" : "minmax(0, max-content) 52px"};
   place-items: center;
   gap: var(--spacing-gap-m);
-  width: ${(props) => calculateWidth(props.margin, props.size)};
+  width: ${({ margin, size }) => calculateWidth(margin, size)};
   height: var(--height-m);
-  margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
-  margin-top: ${(props) =>
-    props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
-  margin-right: ${(props) =>
-    props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""};
-  margin-bottom: ${(props) =>
-    props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
-  margin-left: ${(props) =>
-    props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
+  margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "")};
+  margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")};
+  margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")};
+  margin-bottom: ${({ margin }) =>
+    margin && typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : ""};
+  margin-left: ${({ margin }) => (margin && typeof margin === "object" && margin.left ? spaces[margin.left] : "")};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
 
   &:focus {
@@ -63,7 +60,7 @@ const SwitchContainer = styled.div<{
     &:not([aria-disabled="true"]) {
       > span::before {
         outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
-        outline-offset: 2px;
+        outline-offset: var(--spacing-padding-xxxs);
       }
     }
   }
@@ -81,16 +78,15 @@ const LabelContainer = styled.span<{
   font-weight: var(--typography-label-regular);
   max-width: 100%;
   order: ${({ labelPosition }) => (labelPosition === "before" ? 0 : 1)};
-`;
-
-const Label = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
 
-const OptionalLabel = styled.span<{ disabled: SwitchPropsType["disabled"] }>`
-  ${({ disabled }) => !disabled && "color: var(--color-fg-neutral-stronger);"}
+  &:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &:last-child {
+    ${({ disabled }) => !disabled && "color: var(--color-fg-neutral-stronger);"}
+  }
 `;
 
 const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: SwitchPropsType["disabled"] }>`
@@ -140,7 +136,7 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
     const [innerChecked, setInnerChecked] = useState(defaultChecked);
     const translatedLabels = useContext(HalstackLanguageContext);
 
-    const handlerOnChange = () => {
+    const handleOnChange = () => {
       if (checked == null) setInnerChecked((currentInnerChecked) => !currentInnerChecked);
       onChange?.(!(checked ?? innerChecked));
     };
@@ -166,7 +162,7 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
         disabled={disabled}
         labelPosition={labelPosition}
         margin={margin}
-        onClick={!disabled ? handlerOnChange : undefined}
+        onClick={!disabled ? handleOnChange : undefined}
         onKeyDown={!disabled ? handleOnKeyDown : undefined}
         ref={ref}
         role="switch"
@@ -175,8 +171,8 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
       >
         {label && (
           <LabelContainer disabled={disabled} labelPosition={labelPosition}>
-            <Label>{label}</Label>
-            {optional && <OptionalLabel disabled={disabled}>{translatedLabels.formFields.optionalLabel}</OptionalLabel>}
+            <span>{label}</span>
+            {optional && <span>{translatedLabels.formFields.optionalLabel}</span>}
           </LabelContainer>
         )}
         <Switch checked={checked ?? innerChecked} disabled={disabled} />

From 40d73aa6422097747b3db44e8895cb4e217f7733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 2 Apr 2025 15:57:42 +0200
Subject: [PATCH 09/15] Switch component updates based on feedback

---
 packages/lib/src/switch/Switch.stories.tsx |  2 +-
 packages/lib/src/switch/Switch.tsx         | 25 ++++++++++++----------
 packages/lib/src/switch/types.ts           |  8 +++----
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/lib/src/switch/Switch.stories.tsx b/packages/lib/src/switch/Switch.stories.tsx
index 4e1c7a1410..7eaa4cca8e 100644
--- a/packages/lib/src/switch/Switch.stories.tsx
+++ b/packages/lib/src/switch/Switch.stories.tsx
@@ -30,7 +30,7 @@ const Switch = () => (
       <Title title="Without label" theme="light" level={4} />
       <DxcSwitch />
     </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-focus-visible">
+    <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
       <DxcSwitch label="Switch" labelPosition="after" />
     </ExampleContainer>
diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index fcfdbdbeb6..c7103a1009 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -78,15 +78,18 @@ const LabelContainer = styled.span<{
   font-weight: var(--typography-label-regular);
   max-width: 100%;
   order: ${({ labelPosition }) => (labelPosition === "before" ? 0 : 1)};
+`;
 
-  &:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  &:last-child {
-    ${({ disabled }) => !disabled && "color: var(--color-fg-neutral-stronger);"}
-  }
+const Label = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const OptionalLabel = styled.span<{
+  disabled: SwitchPropsType["disabled"];
+}>`
+  ${({ disabled }) => !disabled && "color: var(--color-fg-neutral-stronger);"}
 `;
 
 const Switch = styled.span<{ checked: SwitchPropsType["checked"]; disabled: SwitchPropsType["disabled"] }>`
@@ -171,8 +174,8 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
       >
         {label && (
           <LabelContainer disabled={disabled} labelPosition={labelPosition}>
-            <span>{label}</span>
-            {optional && <span>{translatedLabels.formFields.optionalLabel}</span>}
+            <Label>{label}</Label>
+            {optional && <OptionalLabel disabled={disabled}>{translatedLabels.formFields.optionalLabel}</OptionalLabel>}
           </LabelContainer>
         )}
         <Switch checked={checked ?? innerChecked} disabled={disabled} />
@@ -182,9 +185,9 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
           disabled={disabled}
           name={name}
           readOnly
+          role="switch"
           style={{ display: "none" }}
           type="checkbox"
-          role="switch"
           value={value}
         />
       </SwitchContainer>
diff --git a/packages/lib/src/switch/types.ts b/packages/lib/src/switch/types.ts
index 566b833977..e4ceed7339 100644
--- a/packages/lib/src/switch/types.ts
+++ b/packages/lib/src/switch/types.ts
@@ -10,14 +10,14 @@ type Props = {
    * and the checked attribute will be managed internally by the component.
    */
   checked?: boolean;
-  /**
-   * If true, the component will be disabled.
-   */
-  disabled?: boolean;
   /**
    * Initial state of the switch, only when it is uncontrolled.
    */
   defaultChecked?: boolean;
+  /**
+   * If true, the component will be disabled.
+   */
+  disabled?: boolean;
   /**
    * Text to be placed next to the switch.
    */

From 062157ba103337069b4977fa55e037fd602d3bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 8 Apr 2025 12:40:13 +0200
Subject: [PATCH 10/15] Switch documentation update

---
 apps/website/pages/components/switch/code.tsx |  17 +
 .../website/pages/components/switch/index.tsx |  24 +-
 .../components/switch/specifications.tsx      |  21 -
 .../website/pages/components/switch/usage.tsx |  21 -
 .../components/switch/SwitchPageLayout.tsx    |  12 +-
 .../components/switch/code/SwitchCodePage.tsx | 106 ++--
 .../switch/overview/SwitchOverviewPage.tsx    | 244 ++++++++
 .../examples/labelPosition.ts                 |   4 +-
 .../{usage => overview}/examples/stacking.ts  |   4 +-
 .../switch/overview/images/switch_anatomy.png | Bin 0 -> 30640 bytes
 .../switch/specs/SwitchSpecsPage.tsx          | 554 ------------------
 .../switch/specs/images/switch_anatomy.png    | Bin 9250 -> 0 bytes
 .../switch/specs/images/switch_specs.png      | Bin 21463 -> 0 bytes
 .../switch/specs/images/switch_stacking.png   | Bin 26573 -> 0 bytes
 .../switch/specs/images/switch_states.png     | Bin 20191 -> 0 bytes
 .../switch/usage/SwitchUsagePage.tsx          |  82 ---
 16 files changed, 332 insertions(+), 757 deletions(-)
 create mode 100644 apps/website/pages/components/switch/code.tsx
 delete mode 100644 apps/website/pages/components/switch/specifications.tsx
 delete mode 100644 apps/website/pages/components/switch/usage.tsx
 create mode 100644 apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
 rename apps/website/screens/components/switch/{usage => overview}/examples/labelPosition.ts (82%)
 rename apps/website/screens/components/switch/{usage => overview}/examples/stacking.ts (86%)
 create mode 100644 apps/website/screens/components/switch/overview/images/switch_anatomy.png
 delete mode 100644 apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx
 delete mode 100644 apps/website/screens/components/switch/specs/images/switch_anatomy.png
 delete mode 100644 apps/website/screens/components/switch/specs/images/switch_specs.png
 delete mode 100644 apps/website/screens/components/switch/specs/images/switch_stacking.png
 delete mode 100644 apps/website/screens/components/switch/specs/images/switch_states.png
 delete mode 100644 apps/website/screens/components/switch/usage/SwitchUsagePage.tsx

diff --git a/apps/website/pages/components/switch/code.tsx b/apps/website/pages/components/switch/code.tsx
new file mode 100644
index 0000000000..a8170451dd
--- /dev/null
+++ b/apps/website/pages/components/switch/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import SwitchPageLayout from "screens/components/switch/SwitchPageLayout";
+import SwitchCodePage from "screens/components/switch/code/SwitchCodePage";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Switch code — Halstack Design System</title>
+    </Head>
+    <SwitchCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <SwitchPageLayout>{page}</SwitchPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/switch/index.tsx b/apps/website/pages/components/switch/index.tsx
index d6b877b8be..7fec11d115 100644
--- a/apps/website/pages/components/switch/index.tsx
+++ b/apps/website/pages/components/switch/index.tsx
@@ -1,21 +1,17 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import SwitchPageLayout from "screens/components/switch/SwitchPageLayout";
-import SwitchCodePage from "screens/components/switch/code/SwitchCodePage";
+import SwitchOverviewPage from "screens/components/switch/overview/SwitchOverviewPage";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Switch — Halstack Design System</title>
-      </Head>
-      <SwitchCodePage></SwitchCodePage>
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Switch — Halstack Design System</title>
+    </Head>
+    <SwitchOverviewPage />
+  </>
+);
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <SwitchPageLayout>{page}</SwitchPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <SwitchPageLayout>{page}</SwitchPageLayout>;
 
 export default Index;
diff --git a/apps/website/pages/components/switch/specifications.tsx b/apps/website/pages/components/switch/specifications.tsx
deleted file mode 100644
index 76eec4eecf..0000000000
--- a/apps/website/pages/components/switch/specifications.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import SwitchPageLayout from "screens/components/switch/SwitchPageLayout";
-import SwitchSpecsPage from "screens/components/switch/specs/SwitchSpecsPage";
-
-const Specifications = () => {
-  return (
-    <>
-      <Head>
-        <title>Switch Specs — Halstack Design System</title>
-      </Head>
-      <SwitchSpecsPage></SwitchSpecsPage>
-    </>
-  );
-};
-
-Specifications.getLayout = function getLayout(page: ReactElement) {
-  return <SwitchPageLayout>{page}</SwitchPageLayout>;
-};
-
-export default Specifications;
diff --git a/apps/website/pages/components/switch/usage.tsx b/apps/website/pages/components/switch/usage.tsx
deleted file mode 100644
index 088499b613..0000000000
--- a/apps/website/pages/components/switch/usage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import SwitchPageLayout from "screens/components/switch/SwitchPageLayout";
-import SwitchUsagePage from "screens/components/switch/usage/SwitchUsagePage";
-
-const Usage = () => {
-  return (
-    <>
-      <Head>
-        <title>Switch Usage — Halstack Design System</title>
-      </Head>
-      <SwitchUsagePage></SwitchUsagePage>
-    </>
-  );
-};
-
-Usage.getLayout = function getLayout(page: ReactElement) {
-  return <SwitchPageLayout>{page}</SwitchPageLayout>;
-};
-
-export default Usage;
diff --git a/apps/website/screens/components/switch/SwitchPageLayout.tsx b/apps/website/screens/components/switch/SwitchPageLayout.tsx
index df66b64c7a..b12acec0cd 100644
--- a/apps/website/screens/components/switch/SwitchPageLayout.tsx
+++ b/apps/website/screens/components/switch/SwitchPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
 
 const SwitchPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/switch" },
-    { label: "Usage", path: "/components/switch/usage" },
-    { label: "Specifications", path: "/components/switch/specifications" },
+    { label: "Overview", path: "/components/switch" },
+    { label: "Code", path: "/components/switch/code" },
   ];
 
   return (
@@ -17,11 +16,10 @@ const SwitchPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Switch" />
           <DxcParagraph>
-            Switch toggles are elements that can get two simple states, each of them has an impact on the system and it
-            can be switched on or off, there are no more options. If the switch toggle is on one state, the action to
-            change it will modify to value of the element to the contrary.
+            A switch allows users to toggle a single setting between two opposing states, such as on/off or
+            enabled/disabled. It represents a binary choice that takes effect immediately.
           </DxcParagraph>
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}
diff --git a/apps/website/screens/components/switch/code/SwitchCodePage.tsx b/apps/website/screens/components/switch/code/SwitchCodePage.tsx
index 2897a1d1da..a4fdf930be 100644
--- a/apps/website/screens/components/switch/code/SwitchCodePage.tsx
+++ b/apps/website/screens/components/switch/code/SwitchCodePage.tsx
@@ -23,13 +23,15 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>defaultChecked</td>
+            <td>ariaLabel</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>{"string"}</TableCode>
             </td>
-            <td>Initial state of the switch, only when it is uncontrolled.</td>
             <td>
-              <TableCode>false</TableCode>
+              Specifies a string to be used as the name for the switch element when no <Code>label</Code> is provided.
+            </td>
+            <td>
+              <TableCode>'Switch'</TableCode>
             </td>
           </tr>
           <tr>
@@ -44,15 +46,24 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>value</td>
+            <td>defaultChecked</td>
             <td>
-              <TableCode>string</TableCode>
+              <TableCode>boolean</TableCode>
             </td>
+            <td>Initial state of the switch, only when it is uncontrolled.</td>
             <td>
-              Will be passed to the <Code>value</Code> attribute of the HTML input element. When inside a form, this
-              value will be only submitted if the switch is checked.
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>disabled</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, the component will be disabled.</td>
+            <td>
+              <TableCode>false</TableCode>
             </td>
-            <td>-</td>
           </tr>
           <tr>
             <td>label</td>
@@ -72,6 +83,17 @@ const sections = [
               <TableCode>'before'</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>margin</td>
+            <td>
+              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
+            </td>
+            <td>
+              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+              'right' properties in order to specify different margin sizes.
+            </td>
+            <td>-</td>
+          </tr>
           <tr>
             <td>name</td>
             <td>
@@ -81,14 +103,15 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>disabled</td>
+            <td>onChange</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>{"(checked: boolean) => void"}</TableCode>
             </td>
-            <td>If true, the component will be disabled.</td>
             <td>
-              <TableCode>false</TableCode>
+              This function will be called when the user clicks the switch. The new value of the checked attribute will
+              be passed as a parameter.
             </td>
+            <td>-</td>
           </tr>
           <tr>
             <td>optional</td>
@@ -101,25 +124,11 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>onChange</td>
-            <td>
-              <TableCode>{"(checked: boolean) => void"}</TableCode>
-            </td>
-            <td>
-              This function will be called when the user clicks the switch. The new value of the checked attribute will
-              be passed as a parameter.
-            </td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>margin</td>
-            <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
-            </td>
+            <td>ref</td>
             <td>
-              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
-              'right' properties in order to specify different margin sizes.
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
             </td>
+            <td>Reference to the component.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -145,24 +154,15 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>ref</td>
-            <td>
-              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
-            </td>
-            <td>Reference to the component.</td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>ariaLabel</td>
-            <td>
-              <TableCode>{"string"}</TableCode>
-            </td>
+            <td>value</td>
             <td>
-              Specifies a string to be used as the name for the switch element when no <Code>label</Code> is provided.
+              <TableCode>string</TableCode>
             </td>
             <td>
-              <TableCode>'Switch'</TableCode>
+              Will be passed to the <Code>value</Code> attribute of the HTML input element. When inside a form, this
+              value will be only submitted if the switch is checked.
             </td>
+            <td>-</td>
           </tr>
         </tbody>
       </DxcTable>
@@ -183,15 +183,13 @@ const sections = [
   },
 ];
 
-const SwitchCodePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/switch/code/SwitchCodePage.tsx" />
-    </DxcFlex>
-  );
-};
+const SwitchCodePage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainerLayout>
+      <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    </QuickNavContainerLayout>
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/switch/code/SwitchCodePage.tsx" />
+  </DxcFlex>
+);
 
 export default SwitchCodePage;
diff --git a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
new file mode 100644
index 0000000000..4077534a5c
--- /dev/null
+++ b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
@@ -0,0 +1,244 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import labelPosition from "./examples/labelPosition";
+import stacking from "./examples/stacking";
+import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import Image from "@/common/Image";
+import anatomy from "./images/switch_anatomy.png";
+import content from "screens/components/wizard/usage/examples/content";
+
+const sections = [
+  {
+    title: "Introduction",
+    content: (
+      <DxcParagraph>
+        The switch component enables users to <strong>toggle a specific setting on or off</strong>. It is designed for
+        binary decisions that directly affect system behavior or user preferences. Unlike checkboxes or radio buttons,
+        switches represent immediate state changes — they do not require form submission. They are especially effective
+        in settings panels, preferences, and mobile interfaces where quick, inline control is essential.
+      </DxcParagraph>
+    ),
+  },
+  {
+    title: "Anatomy",
+    content: (
+      <>
+        <Image src={anatomy} alt="Switch's anatomy" />
+        <DxcBulletedList type="number">
+          <DxcBulletedList.Item>
+            <strong>Label:</strong> describes the setting or feature being toggled. Helps users understand the
+            consequence of switching it on or off.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Thumb:</strong> the sliding circle that moves to indicate the current state.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Track:</strong> the background container of the switch that reflects the active/inactive state with
+            color.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
+  {
+    title: "Stacking switches",
+    content: (
+      <DxcParagraph>
+        Switches can be arranged vertically or horizontally depending on context, user needs, and available screen
+        space.
+      </DxcParagraph>
+    ),
+    subSections: [
+      {
+        title: "Vertical stacking",
+        content: (
+          <DxcParagraph>
+            The preferred layout for lists of switches. It <strong>enhances readability</strong> and ensures each toggle
+            is clearly associated with its label. Ideal for settings or control panels with multiple toggles.
+          </DxcParagraph>
+        ),
+      },
+      {
+        title: "Horizontal stacking",
+        content: (
+          <>
+            <DxcParagraph>
+              Used when space is constrained or when only a few switches are present. This layout can save space but
+              should be avoided for long labels or more than two options.
+            </DxcParagraph>
+            <Example example={stacking} />
+          </>
+        ),
+      },
+    ],
+  },
+  {
+    title: "Label position",
+    content: (
+      <>
+        <DxcParagraph>
+          By default, the label is placed <strong>before the switch</strong>, as this position clearly communicates what
+          the control is for and improves accessibility. However, it's also possible to position the label{" "}
+          <strong>after the switch</strong> in specific cases—particularly when you want to emphasize the{" "}
+          <strong>current state</strong> of the control (e.g., “On”, “Off”).
+        </DxcParagraph>
+        <DxcParagraph>
+          We recommend changing the default label position{" "}
+          <strong>only when the component's use case justifies it</strong>, and as long as the meaning and state of the
+          switch remain clear to the user.
+        </DxcParagraph>
+        <Example example={labelPosition} />
+        <DxcTable>
+          <thead>
+            <tr>
+              <th>Position</th>
+              <HeaderDescriptionCell>Description</HeaderDescriptionCell>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <strong>Label before</strong>
+              </td>
+              <td>Labels before the switch indicate what the switch is for</td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Label after</strong>
+              </td>
+              <td>Labels after the switch indicate the state of the switch</td>
+            </tr>
+          </tbody>
+        </DxcTable>
+      </>
+    ),
+  },
+  {
+    title: "Switch vs. radio group vs. checkbox",
+    content: (
+      <>
+        <DxcParagraph>
+          While switches, radio group and checkboxes, may all appear as selection controls, they serve distinct purposes
+          in a user interface:
+        </DxcParagraph>
+        <DxcTable>
+          <thead>
+            <tr>
+              <th>Component</th>
+              <HeaderDescriptionCell>Use case</HeaderDescriptionCell>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <strong>Switch</strong>
+              </td>
+              <td>
+                Use for a single, immediate toggle between two states, like on/off or enabled/disabled. Switches should
+                act instantly and are best for system or UI-level settings.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Radio group</strong>
+              </td>
+              <td>
+                Use when the user must select only one option from a list of predefined, mutually exclusive choices.
+                Ideal for short, static lists where all options should be visible at once to support decision-making.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Checkbox</strong>
+              </td>
+              <td>
+                Use when users can select multiple options independently. Each checkbox represents an on/off decision,
+                making them suitable for filters, preference settings, or multi-select tasks. A group may allow none,
+                some, or all options to be selected.
+              </td>
+            </tr>
+          </tbody>
+        </DxcTable>
+      </>
+    ),
+  },
+  {
+    title: "Best practices",
+    subSections: [
+      {
+        title: "Use for binary, opposing states",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Switches are ideal when users need to turn a setting <strong>on</strong> or <strong>off</strong>, such as
+              enabling notifications or dark mode.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Avoid using switches for choices that are not immediately clear opposites (use radio buttons instead).
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Trigger immediate changes",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Switches should take effect <strong>immediately</strong> without requiring form submission.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Do not pair switches with a submit button or use them for decisions that need confirmation.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Use clear, descriptive labels",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>Labels should clarify the effect of toggling the switch.</DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Use positive, action-oriented phrasing when possible (e.g., “Enable sound”).
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Stack vertically for better scannability",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              When multiple switches are used together, stack them vertically to maintain clarity and reduce visual
+              clutter.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Don't overuse switches",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Too many toggles on one screen can overwhelm users. Group related settings and consider alternatives like
+              grouped checkboxes or forms when appropriate.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+    ],
+  },
+];
+
+const SwitchOverviewPage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainerLayout>
+      <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    </QuickNavContainerLayout>
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx" />
+  </DxcFlex>
+);
+
+export default SwitchOverviewPage;
diff --git a/apps/website/screens/components/switch/usage/examples/labelPosition.ts b/apps/website/screens/components/switch/overview/examples/labelPosition.ts
similarity index 82%
rename from apps/website/screens/components/switch/usage/examples/labelPosition.ts
rename to apps/website/screens/components/switch/overview/examples/labelPosition.ts
index 531405b760..339f91798b 100644
--- a/apps/website/screens/components/switch/usage/examples/labelPosition.ts
+++ b/apps/website/screens/components/switch/overview/examples/labelPosition.ts
@@ -5,11 +5,11 @@ const code = `() => {
     <DxcInset space="2rem">
       <DxcFlex justifyContent="center" gap="3rem">
         <DxcFlex direction="column">
-          <DxcHeading level={4} text="Before"></DxcHeading>
+          <DxcHeading level={5} text="Before" />
           <DxcSwitch label="Show all" />
         </DxcFlex>
         <DxcFlex direction="column">
-          <DxcHeading level={4} text="After"></DxcHeading>
+          <DxcHeading level={5} text="After" />
           <DxcSwitch label="Off" labelPosition="after" />
         </DxcFlex>
       </DxcFlex>
diff --git a/apps/website/screens/components/switch/usage/examples/stacking.ts b/apps/website/screens/components/switch/overview/examples/stacking.ts
similarity index 86%
rename from apps/website/screens/components/switch/usage/examples/stacking.ts
rename to apps/website/screens/components/switch/overview/examples/stacking.ts
index 20ef982e66..067ef5b9ba 100644
--- a/apps/website/screens/components/switch/usage/examples/stacking.ts
+++ b/apps/website/screens/components/switch/overview/examples/stacking.ts
@@ -5,13 +5,13 @@ const code = `() => {
     <DxcInset space="2rem">
       <DxcFlex gap="2rem" justifyContent="center">
         <DxcFlex direction="column" gap="0.125rem">
-          <DxcHeading level={4} text="Vertical"></DxcHeading>
+          <DxcHeading level={5} text="Vertical" />
           <DxcSwitch label="Option 01" />
           <DxcSwitch label="Option 02" />
           <DxcSwitch label="Option 03" />
         </DxcFlex>
         <DxcFlex direction="column" gap="0.125rem">
-          <DxcHeading level={4} text="Horizontal"></DxcHeading>
+          <DxcHeading level={5} text="Horizontal" />
           <DxcFlex gap="1.5rem">
             <DxcSwitch label="Option 01" />
             <DxcSwitch label="Option 02" />
diff --git a/apps/website/screens/components/switch/overview/images/switch_anatomy.png b/apps/website/screens/components/switch/overview/images/switch_anatomy.png
new file mode 100644
index 0000000000000000000000000000000000000000..698fd431bfb1cda52ebe891726a4c595525642f5
GIT binary patch
literal 30640
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

literal 0
HcmV?d00001

diff --git a/apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx b/apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx
deleted file mode 100644
index 8cb4e615b9..0000000000
--- a/apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx
+++ /dev/null
@@ -1,554 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/switch_specs.png";
-import stackingImage from "./images/switch_stacking.png";
-import statesImage from "./images/switch_states.png";
-import anatomyImage from "./images/switch_anatomy.png";
-
-const sections = [
-  {
-    title: "Specifications",
-    content: (
-      <>
-        <Figure caption="Switch design specifications">
-          <Image src={specsImage} alt="Switch design specifications" />
-        </Figure>
-        <Figure caption="Switch stacking design specifications">
-          <Image src={stackingImage} alt="Switch stacking design specifications" />
-        </Figure>
-      </>
-    ),
-  },
-  {
-    title: "States",
-    content: (
-      <>
-        <DxcParagraph>
-          Five different states are defined in the life cycle of the component: <strong>unselected enabled</strong>,{" "}
-          <strong>unselected focus</strong>, <strong>unselected disabled</strong>, <strong>selected enabled</strong>,{" "}
-          <strong>selected focus</strong> and <strong>selected disabled</strong>.
-        </DxcParagraph>
-        <Figure caption="Switch states">
-          <Image src={statesImage} alt="Switch states" />
-        </Figure>
-      </>
-    ),
-  },
-  {
-    title: "Anatomy",
-    content: (
-      <>
-        <Image src={anatomyImage} alt="Switch anatomy" />
-        <DxcBulletedList type="number">
-          <DxcBulletedList.Item>Label</DxcBulletedList.Item>
-          <DxcBulletedList.Item>Thumb</DxcBulletedList.Item>
-          <DxcBulletedList.Item>Track</DxcBulletedList.Item>
-        </DxcBulletedList>
-      </>
-    ),
-  },
-  {
-    title: "Design tokens",
-    subSections: [
-      {
-        title: "Color",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Component token</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>labelFontColor</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>color-black</Code>
-                </td>
-                <td>#000000</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledLabelFontColor</Code>
-                </td>
-                <td>Label:disabled</td>
-                <td>
-                  <Code>color-grey-500</Code>
-                </td>
-                <td>#999999</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>checkedThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb checked</td>
-                <td>
-                  <Code>color-white</Code>
-                </td>
-                <td>#ffffff</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>checkedTrackBackgroundColor</Code>
-                </td>
-                <td>Track checked</td>
-                <td>
-                  <Code>color-purple-700</Code>
-                </td>
-                <td>#5f249f</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>uncheckedTrackBackgroundColor</Code>
-                </td>
-                <td>Track unchecked</td>
-                <td>
-                  <Code>color-grey-400</Code>
-                </td>
-                <td>#bfbfbf</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>uncheckedThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb unchecked</td>
-                <td>
-                  <Code>color-white</Code>
-                </td>
-                <td>#ffffff</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledCheckedTrackBackgroundColor</Code>
-                </td>
-                <td>Track:disabled checked</td>
-                <td>
-                  <Code>color-purple-100</Code>
-                </td>
-                <td>#f2eafa</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledUncheckedTrackBackgroundColor</Code>
-                </td>
-                <td>Track:disabled unchecked</td>
-                <td>
-                  <Code>color-grey-100</Code>
-                </td>
-                <td>#f2f2f2</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledCheckedThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb:disabled checked</td>
-                <td>
-                  <Code>color-white</Code>
-                </td>
-                <td>#ffffff</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledUncheckedTrackBackgroundColor</Code>
-                </td>
-                <td>Track:disabled unchecked</td>
-                <td>
-                  <Code>color-grey-100</Code>
-                </td>
-                <td>#f2f2f2</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledUncheckedThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb:disabled unchecked</td>
-                <td>
-                  <Code>color-white</Code>
-                </td>
-                <td>#ffffff</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>thumbFocusColor</Code>
-                </td>
-                <td>Thumb:focus</td>
-                <td>
-                  <Code>color-blue-600</Code>
-                </td>
-                <td>#0095ff</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-      {
-        title: "Typography",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Component token</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>labelFontFamily</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-family-sans</Code>
-                </td>
-                <td>Open sans</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>labelFontSize</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-scale-02</Code>
-                </td>
-                <td>1rem / 16px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>labelFontWeight</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-weight-regular</Code>
-                </td>
-                <td>400</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>labelFontStyle</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-style-normal</Code>
-                </td>
-                <td>normal</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-      {
-        title: "Size",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Component token</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>thumbHeight</Code>
-                </td>
-                <td>Thumb</td>
-                <td>-</td>
-                <td>24px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>thumbWidth</Code>
-                </td>
-                <td>Thumb</td>
-                <td>-</td>
-                <td>24px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>trackHeight</Code>
-                </td>
-                <td>Track</td>
-                <td>-</td>
-                <td>12px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>trackWidth</Code>
-                </td>
-                <td>Track</td>
-                <td>-</td>
-                <td>36px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>focusHeight</Code>
-                </td>
-                <td>Focus indicator</td>
-                <td>-</td>
-                <td>40px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>focusWidth</Code>
-                </td>
-                <td>Focus indicator</td>
-                <td>-</td>
-                <td>40px</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-      {
-        title: "Border",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Property</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>border-width</Code>
-                </td>
-                <td>Track</td>
-                <td>
-                  <Code>border-width-0</Code>
-                </td>
-                <td>0rem / 0px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-style</Code>
-                </td>
-                <td>Track</td>
-                <td>
-                  <Code>border-style-none</Code>
-                </td>
-                <td>none</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-radius</Code>
-                </td>
-                <td>Track</td>
-                <td>
-                  <Code>border-radius-full</Code>
-                </td>
-                <td>9999px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-width</Code>
-                </td>
-                <td>Thumb</td>
-                <td>
-                  <Code>border-width-0</Code>
-                </td>
-                <td>0rem / 0px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-style</Code>
-                </td>
-                <td>Thumb</td>
-                <td>
-                  <Code>border-style-none</Code>
-                </td>
-                <td>none</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-radius</Code>
-                </td>
-                <td>Thumb</td>
-                <td>
-                  <Code>border-radius-full</Code>
-                </td>
-                <td>9999px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-width</Code>
-                </td>
-                <td>Focus border</td>
-                <td>
-                  <Code>border-width-2</Code>
-                </td>
-                <td>2px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-style</Code>
-                </td>
-                <td>Focus border</td>
-                <td>
-                  <Code>border-style-solid</Code>
-                </td>
-                <td>solid</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-radius</Code>
-                </td>
-                <td>Focus border</td>
-                <td>
-                  <Code>border-radius-full</Code>
-                </td>
-                <td>9999px</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-      {
-        title: "Margin",
-        content: (
-          <>
-            <DxcTable>
-              <thead>
-                <tr>
-                  <th>Margin</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <Code>xxsmall</Code>
-                  </td>
-                  <td>6px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>xsmall</Code>
-                  </td>
-                  <td>16px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>small</Code>
-                  </td>
-                  <td>24px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>medium</Code>
-                  </td>
-                  <td>36px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>large</Code>
-                  </td>
-                  <td>48px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>xlarge</Code>
-                  </td>
-                  <td>64px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>xxlarge</Code>
-                  </td>
-                  <td>100px</td>
-                </tr>
-              </tbody>
-            </DxcTable>
-            <DxcParagraph>
-              And also apply different values to each side of the component: <Code>top</Code>, <Code>bottom</Code>,{" "}
-              <Code>left</Code> and <Code>right</Code>.
-            </DxcParagraph>
-          </>
-        ),
-      },
-      {
-        title: "Spacing",
-        content: (
-          <>
-            <DxcTable>
-              <thead>
-                <tr>
-                  <th>Property</th>
-                  <th>Element</th>
-                  <th>Core token</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <Code>padding</Code>
-                  </td>
-                  <td>Thumb</td>
-                  <td>
-                    <Code>spacing-8</Code>
-                  </td>
-                  <td>0.5rem / 8px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>margin-left/right</Code>*
-                  </td>
-                  <td>Switch</td>
-                  <td>
-                    <Code>spacing-8</Code>
-                  </td>
-                  <td>0.5rem / 8px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>padding</Code>
-                  </td>
-                  <td>Track</td>
-                  <td>
-                    <Code>spacing-12</Code>
-                  </td>
-                  <td>0.75rem / 12px</td>
-                </tr>
-              </tbody>
-            </DxcTable>
-            <DxcParagraph>
-              <em>*Depending on the position of the label</em>
-            </DxcParagraph>
-          </>
-        ),
-      },
-    ],
-  },
-];
-
-const SwitchSpecsPage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx" />
-    </DxcFlex>
-  );
-};
-
-export default SwitchSpecsPage;
diff --git a/apps/website/screens/components/switch/specs/images/switch_anatomy.png b/apps/website/screens/components/switch/specs/images/switch_anatomy.png
deleted file mode 100644
index bbfef210c943167904dea16e0b6a256811ad28a7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9250
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

diff --git a/apps/website/screens/components/switch/specs/images/switch_specs.png b/apps/website/screens/components/switch/specs/images/switch_specs.png
deleted file mode 100644
index 2ce871a165ad334b7eb63594d4754091369d04b4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 21463
zcmeIacT`hb_cj_rQxHKxP>|vQ1*9pxNE4AJpdd96Kza#?^aMf^QBgpubdV;!cR~>X
z0qHe_CI|>2^dv$kcYDhFz2}VYj(dN1jQjm{7=!58WM{2C*DTMR^O<?|P)Ci9hLr{c
z0?}!x-_rwu$lE|5GT}2+z!ha`gc9%%g~wfu$7g^a|1&l(K_D)W#y#c7zEIpObt;cR
zP20CoE6IMrCP6EWPnF+OdCtVd26J7cc*hlzw7}R7`YlsoNk#cK*UOJVL7IBeJc4|D
zCQ3|Ct;o*Ou-SXt*~>P2xcc<(?+-liG4R1Z_Bz%g*2z6Ez?W>zl@{s~XCMV9Cnq1u
zxq?98GynB6v;yV_FG!YIou?<GU{C`6=cVl|189`tzpns)yLe3rl={+Xh3mq9y%V^8
zCdiTezdsdN<P`%KNavn}NAy3gQ?yn8XN^Br3%+-T0mS<uSw{VD8vv1kEvNs!*&wCg
zfTb88^<U-r+d~9_$Zo;@*VcdkAJ+viMcb>7cIPkteYqged&z&uAo>g$c;Vh-G3r-;
zUrq`1fbH+k$)NrmME3Nz!lcl9e_xIZlt=epQvJ06&)p!9^o8-S%D?@6IY6vb|BChR
z;`>*u|7z>MPT*hP`hVKDzHb}(@a22l%ag#bwn~916N*=+7+z+!iNd<sr(c%5ebKQ0
zWA#D75~;GDOH^Yr<smlWlARS=>aXB)iw6i1&g!K>a~=7dW;c?W5UTqMvmx`Jy4Yjp
z12xz3Q1AmcsBBBC@otlL%qM7UEVk>NnjY7&Z>tS*T&RJ*jH}ZGy^{DS6#I2HAO`7c
zvPKq-45X>5ikVkyr4_rGeg?k|m)ci93`=F=U5Af~#>iPY?e%qV{1tzLK|quv8=A_|
zrV#(3JwMMIrY)-}wGCfNM>Rrdob7YVeGGz9SbCtfQ~1(`c}7s32Dd|O$NP-L4GH;}
zbpg#y`Lu5oZHMgYinR|~MHn?vt;`IkhKl-Cyj0{fsYq2}GoAzU{cFSLS&v6{FgNJl
zbo>z!GXsD~jL8?4iMescIO^%)tCMATv1s6r_{G<b8mRQdC;3$E%OGid8JUJ6TBNh4
zGNvJ4Hz%Jf3}3@y63U=epd&BEm4rcPky4CbQ;F6Ij<<1LKkylfn0bEFn&ps-7lFRm
z!+EO{4_c+?pa~i!I(Vzt7tH3JPHgFA(_(Z4@zbVx`<#gD60KYZDmAF-C-iXP$pD=6
zqt_|UnGoxW+O$I-ooC&NaNp6u_1LipnI6t@iNyqe3#V7Rh(CeG83+)fU91S40>NJ;
zX7$V@xWnXMgy=Up4$fd!U3bMMiR$iQ`wu}!QOF)>E~Z#YdACXT;*}w21w^7Pt<*7t
zlaG=NZSi9(Klggz0+WV(h6k2DwK7EAXo_6IT2<GIoF->$jB65%k>}Owri|e6`SK9t
zLJt`U9EM_W5<kW{(EH7)Hm+DNSWPCXdLja|V?MiLu5Z?s(o$qJ;vtcF98Fbijh`d1
zbhfadv5A_ST(jO)dgU&`zE*u_^~|nw7x>9qA`6j;wL|mqVwL*-7T^idlxu$=4y7vK
zj8d-mAfJdt!!<(namTFEw#ktYLF)YExuoNFRA)HHg1q4H@1UPFbPl@X^Miu3%S~+y
zdb5M8dCs6r(weY?>5nHp>~s9+6miQbpGqbnK1=0H<={BVYS!=5^%k@tYUhGDaf!i$
z&JaP7BsuXf<HcdYqt$5;#JFJCMvZ*TC=|0HQay__BO1u$)fK)$bBZvNN~dDv><XEr
z#;#E;Uq`gxeHXuv$ZYp;uX(^Pcei_VRUwa5Jy;2PzoivgGqCa}fE;=WKre2%3q}D<
zE3Q7yMoP_l2S=HBKSc|8Jt&`BV3~8OI&e7LRhMs@#D8fs5jbz+uw~rsN6X_AqjSGn
zho7&u+DS`S$UztFu$F}j?Ri&yPpO;aee|^AT(gB3ow##*!aMLnTrDoOL?3F_MiQg*
z989@A)rY-NGO~Yq6r83vw7+_rB@Hc8a}N<@F}8o&Djd7mHJwKkv3=m_?-$HeJ2Ge2
z@BK7FTl2Uk>=2|uZcF#l9Q2i#d%ZuDUilBm6a0=6K+9Lo7}Mjf%Wm$#7<0>G^TOc4
zAyg$Mbmw-P=yO#dQ3?GFxR58>*Sw_mrSQFN_L?Y1*Wueq?5hKbGw$$F#ilX2gb|z|
z9zCMGrxtlfA?CGGTa?mDS8fbk#z^zFut<^&N^j`#$|pFxa4!0-)FdHIvH3U91k@Va
z$u4a{zVPgW%6&1$5&HdxoetOCLRl7;2hOig+gSF=q9yT>TMo6KoAB30s8mp&T#eg%
zlW9tpRt{Rm&h|O|c^C}Iz+pI4Z%8wPCHMBON7PJehQ4^MG)Y;)I@9<n^k%|-pX}KL
z?{((Mp~=>(6DEyWr@2(1Rfk*O-g;C&UgvZOa&M&SOweq+N4^nJ?PJ2r+B?_$c$cKj
z!Cd|M)2qApb+}5FM)b=P^xmPaAMXb-!4jSY$iJ(xrwtNPuXTCe?&bNU_)R1&hjexv
za~j+*)EF1v&z^<T7vnIa+1JFQe#qjJ2NX)G6zKg8iMiHGxTc3gMz<PvIst{NK(>mj
zi)@%8Ek6^lKZCsj|6woDJU|-2GcMUJYo??h4;$go(jPEtolv*%`Hqh?a20<-QyuA8
z&34kPbJs>p(H@yy_F~wFYE{9MM%Lx4wfhU5kleL#{s1W_LSix!UP;x>daImk=t1y>
zZqR(bd{ekrLr;NAj3i<~e@0#G!oKnw)L|bK@;&ziQ#`b0Po-)7x`?-ZL^5r}x2Ya3
zBRw&;{#9stVt$CpnN7;Az4~q7q|qxn{~V@!`6nhwB^#XiXf^6~o4-Y}33h|_&m`vv
zKvAUOC$qH|)#VKuWjGys(xl^B%mhHSM(s@YUh0R#wzBHR<P>R20``sr$%G`NLz2zP
zemr>YnW4jdM6kY_Q&2Jgh~OD<eajq>G2FAc^erYpHQOkl|6T6Z>U>d|{K(`p6L_W2
z0e3I|2thM9f~CQ-p&YY4>4|<0F=6i(mL*J~Mzn~I!JeBS^Rg!+f+=3Id(_&f+Euwm
zrxTEN(Oh0!9*pePe4^ciH0kc2i9jn5$B>=IoWV3?J}Pci+el4)C5d_loIx$rl9}QI
z*FqP_Ii<P+Md;<8ERxG=ClsK%O4BgsR<p0){!xZYn<AWF>`k|65qacrDUR%SX$0HQ
z0(oWAiOeAtrJ3exiR@X!gLqN8&B*=>4ux&yp!x#D`C73Sk@lG>nm@&t%&P>NxuZph
zQzCQy!Dzg8Th<1=aM^%aRrOEfO#tLu_dJQ-5fZGLTM^%>{Q{~wTHD<l+^NHbf4#E2
z8lmT}<@b7bM*-X-vSd!~ukZ&}c*O!_!~Tq*f22Jx04ow*Ps;v#HhED5K!QJSfc~D1
zMxO)J(`HOe?eAGC4-|-DJK8{X;lGngt}B2%dp_Dn{yqCuZw3}zOaX!ZmXs@r0&ybt
z(csnVe*v4{<43eFu;6DYGSCCA0Q<6>{jH<9SQWCfh|?^l<h0r}B`>+JM>el=UaR(`
zRo~@_jNj7WDGa{*M;1IZ0jv)*M_n~Tfvx6!!%?U3s91cA5b$6dhpRvSgfB|ZLGKNN
zK=N(X!Owre|C|pp5B_|N%LYKA-W9AQ1JY5<h+W)>e0WFCgF2_)RkE51`;ewz2cy#l
zUg-5shx;bwov`GV&*rFK6_}4ze@q_sCqgL!94)31E>jPuG_%Z9c2W)<yOj_}HTj|4
z%h>u&2cH<pMKO5YI~`eV(G9{*5n;Ud7A+6b?|oq9qxeG*Fkrtk6XSjD;{ptX%d_P~
zi!Jv`XeFh3u#We!$Nrx}Y`grcPNBoK0g~7_)_;3uj9Uq07IhK(XFWhkj&_KAW}v38
zVqA#9JBXEVf>n5E_@Ej%i4R2?p=y7s#3i7FaOHneLU<UwFOM3?Dkpt^c<0kxAYYhW
zK8*L_?D^~o;cUb7T4&HzhCh!p8m!Hx)JE~CW#>HNbnG`U9+359_Gj6@0_y;HA5`ao
zd*<>ttpI^Tfio1R`kP*X{!^^^VhXm(=K~Jbw7Yxj!YwkrOh@WJ?~nEb6ep)Hh#^YR
z!)X3JVsJ~M=UBmus7Lg1kK$h<c)+1Lud8Hdc#N&$x(82GiZ6PnaRtAdcK4Fo9~JKS
z34I*6#m282Qkb9u;|?~R?0J$WEiGd$&=R^7AhfdAO@y8~T{wYxnreQ|`n_`0y~;J}
z69<N{d{@YbjXN<nmXiB9PeXcR(S}{+In98;my^QyWqh0x1xO_5dcq_^OVO=H?~zVG
zHs+WZ*5uh+T6D<<%L|_wR3<;%DG*YqF{c<Q`>qwf`}BZp%sZD_JNwv7y1Z(i{cT$)
zpHU<oFV)S!rZLX$cY?t7G}hEFfTET<cJ7xhKa$C(La|&aIjR{Le$<pFPWq{av8Ws{
z+fg(HFZ`Ue5{&$1OSD0Ii15ASEIaP6Se>2&`uyc|BfTf5gsS3EgSgpAzFsuu(&v-@
z5G4UhD)I$c#p?3=c>@xVD$|+1dDiO+x$KmS-f1q~vJ3B>XvbvL)Nsjqq?g9ruYmK?
zD8{=>+qJR~?4puNY81DKdp^m6^N5?=tB%`PA!nZi@O0>;Q1AZP-$rjRnGco;MYSfy
zs2=m1Oo=?}*yCrp)jB1{bSv;t=z^|mLgE$rH^=GUOqbchZ!U3L^I78fB(4c{dc6=8
zx=GKC{~~%^!Pg1v>!9CXT^!5e$lFn{F*>;(*1kJ_Gm2d|uGgZd`G_O9f})EgtAXQs
zsFgV(BkQ<ovpMTj^Zv(4I!L<FYt-;M+ZHXNBsT7NE(DEAeBjkyEY$7tFj~Ks?;KSV
z-tZ-E^%L*N?w-Atay4bYkB<2w!P@$bnyFKK+1#KV>OVf-m-Y?OOLPt%*K!FELq~jr
zkF#nK?W)+BpbmH2G6OJDWTS-YXqQ_B)zVY~jng82kxFfG3Es}%8vK%Kq$U4pg3W)T
zc6leML_tYG<TkiwWVG<whlEmQ;x2DqmV2f)%gaNr$~Ee*=dJl4Vz08-IBN>N<M;dl
zESAN%M|Oi@oR)OA|BU=`@Efz82L*Km-lo;%DLPv15^)Ui6)~>MWV)rbMjx7&xO(8Y
zPF*2JvC*`m9b%Awf6Ucz5qctvHlYh%ruYC)%PC~|$n?=GGIClXY+A(<KqZ#bs#+9B
z(5aL(L(%CI!CN&Td=W~1w*^h<*GIN|#iQu)>&~p6;+v<iqFg-{Yox%bc|$}Za+0?d
zE_^*BV`MqRlD0bB{Gm7{CSh1F2coCpuf9RasvYcFohC(NEPyJ7pK7qVO?(u=s6i~7
z%VLKovOFI#0DExVPrWlY$<^A`-(rL(9Tan#0nw(O9dgKUd5e~$&dZ<jqgO8@f9>*Y
z>!8_hV!Vl6KMZw_-FU6HR)gzw8AvjSGHo87CyJO6cZ*iqklETpA3L2jyjZ;cGKQpW
zVP2ymNgAYiHk~qCiCL#a<3Eo0T4Dm_w-mKmUfft=eKm(DtBi888kb}|!wOpUN%=lq
zd(6+|d9iS}Rlu(phRN`h#hnmN#AC}R`Y(|^6{|rTjr~%$D-!g*jPk*zt3NWy%6<B;
zY&l0;xPvWQpA4I1fTU%;h9|D?Agt)wvPFdsBFT4!x$w*)3pJT-A!Ksx4Y8F}_3Z5I
zoAxXe8{^j-%yhm-$-AO#<?LqziQp%+LFUm9caY;UWqHeUMVcs-n~Y^8madd&9?XCI
zv0XHB2fAF2n+mL^bjr;)NSK@ULgK5PTjw$!+*q1!sF`)C6;G+I@qqYPS}N@xG&`@(
zW!O=FLiW1Za?c7+<KB&oi!jt+ZH}+o_w$?uteYgmYoy@&wpW5r!z<~#^>vWWGhE&F
zRJNy8oqH=AboQGag2VA^8IfYdbszWqj@2iMB<YG4<)*#_q1clXB+FG}u5b7R13g50
zUH|#xukXl%yU5jgs>1qTMir`LPV~R3qb*CL|2oDc`rI3;_DIbvcWxKKMruIQnBJ&W
z$-D$korGk4wHLn$XubKCjLZh2<bG5v4g=)Q^(d^AsM;#=)7(aNOz*K@!Js5&kDWTM
z(Ev4%K($OP*~&xo^Wxy{$AaE^7LA^c{N|>JA+uX%IuV4fpPL>Y6aD95Rd+EPL&&Jf
zviywQDp!BXb?snb7qMYVRDs&zzI<bHP5JzOUbRQ-e7w_|>6+I#mRh?m!i`RU*PD48
z0VN`49qi>IOC-R6$Hk||q894VMANs>(4(8X?E3=DY5222+4?Ln^O&8Mas+R|YF)~2
zY-R?USbxIDnT4XrX7SaTQbzOS{Iq*bjg72@v74K&EEEvgf?QS1B4r!lbq+32>~W+Q
zCscNWSfemiW?yo=Ln1JI<OO*<4nlmsD7h-hrVFcgkDV1xQ~aTa9#HG`-L9H9l`;YV
zt+<JlD;PP5o$>E3d9h?M2k0XlywJXp&9GU+ilRCwxz-Yj?EFxrK=#yg{X>b?BJmRk
zb65E0z?Z=c?Y`S=OfyYLR4$s=#;sK=LGa2|Et7yJ93_JItBA*Uu>1npYD3H7{pxn_
z()KdXyj+j|OUZim71Is#^dIA)MyOW!DDEgB6o0{?2DFMdjM(#2rf^Ej?v~|^>P8tx
zTic`%09fjJDjWIv!u{n>uBg_%M*ZCdgh%DLrb?M)rRPJf&WgEt$I-k49cp$uv<@MH
zMZ~*c2r64$S2{`CtYb8czfUsxu(+20wHU)1+@2B}u2uD}&wJSju{P-XTal31h{e_D
z0ujf-GVKw=&10dtahxIjZWXR>D?!S<v2_D&!b*bPK1jj1r77l13P#m&W*v=pTPw1h
z-w=#P#2t$v;Lg+R86)*dP3e<cC?d3Bw^v}9TJfjylDg1T$LZ1F>6a7I*4D{A$DO60
z1-b#6bNEu9o)*$3X8T(6!Ai=r^@99fqt-(M69lftxy2b-4D!7L$ezlQ8paQRyM%F8
zROl|k%1ylF`{3l@CDPu=D6P#}3{u8-k1ofjmq!Mkh|6()RCg7Q_6k+^-a~G$U?T?h
z1dFbU>3hq0F6Ds<1VUqqM+#G4%9UwS5WehdZ-hMm0TJ>7+VOZWoP;m7&nRXL47TDQ
z>Z6R7CH*Y&>nZtACO4h0e?uWpETc73zP-w`%bqTT?QD>?>o>Pkq0{57z~xT7X7G0L
zs*!u<o?Yv=6R7=WZwC@e3^SPB29b1%8`ld%%gAGa!bxQb70!#ItzdFjZ>HS3VKUKx
z>hsrhj#KZnIPPBtQW|SN^Q`n}O*il&ZFFJcYDOSba@v9W0Bdo26XJ%#*FQWtT2)LG
z8@!_r^;?e53q1K0Mr%8gqp_)5mGD+-&R9p`z~<mHuflM#xumTk@~YI#Q<Vy?pVpit
z<Bp8u5iOA(IJSg0>dx*<mxC2}jOmB6-YNhb_ZjmKx&C~sBkaT&HvRoWEN>!|5?$Qc
zdoZT28$UPk2x&fVOsds+H87y#b6laQoN#~3Ak_Z`MqCYWEHaV9=sr>0_{NY%N}<IS
zXLL)zVUtcEqpSqBEd)A+x?P1&uwGk4HvEi}*&S?cQE*|T4YGhZ=lT1`;%!m+>9KY5
z-t!Av5uG8lLA=`iy-mm#4;1IJGiq+W^>(q(SIm@F=*ix`E85B+;L_U`r-Jm(vejoK
zvqG3vWo?*gzw#3IWP&I@?zLAJ#IpEy8{xY-$7a0QHIdjTK8p?fCFrL4B;6ab(mN}1
zTg{`h3y<yP#-3Fa(>AT8Zu7DSDt7f7;F0TB+zcDEJLXeNsYlA@1yaPzvL{|2A<ZbK
zH)NB5s@s%xRQyt;oDN|Qv6UwQ^kKin_0t65SZz$anL&f^Z)ZE=$G<v96W3eev}z!;
zvd8-q+@MHk8inwq!yRPLQ6c0RCsg@$l_sO0V_lw&tI5qZYH@ba*qFur>hB7fjB^em
zS^|kfZg={q_ez$wjD>&VBljjc=C75N)g*8Djha^yJVX+F_gCgmjE3Tdjw9zEN6I56
z9~ukNO)K<4^B*7B>~{G%%52oWX$kjrxW5jkVfdntxqH}d8`A(mfN?e5@C@iwy~-|0
z_d=5RU7n-)W>5dXiu$AqVxh>bviyx=#?m(RrK)CkqrO8tyQRLEs8_#Z7Sm!6Z$@0A
z1+rn2cRN0;oXdBwU#ct#YGnRY(K?7cz^$3y%q)5XuXP=td_G><`mp>-&dT}vJr}27
zWW~mvCLP0Fgl@v(*NJp{m4Y!zjH4WsSCNDsyirT-o8~p~u1~m0@HScbIKCAyrR4eE
za(EC{MlH%yhohNlt>`z{kA4~far={3PA~1uLY)>X??Qg1^{Nu<%3mj;iOz7ITvT%d
z(epf2+ght&?7m7sjN(20t42CnhbIa>cSc0W^VjH}mdv%@m=^b3GO?FA*~c_IJ7C%5
z^n!_i=1!*}wl#?sMQ4KcVkSX9X^l8|Qa0=D(lS=uBoK;Eb#<e(Mk{&W%soE#fNJ;g
z|G<#{#RX81s^bGqAUujrKi!y?mr!y0ioi=~8~JEi;fk5|?E<DgTp>sIF*mt@i3qS|
z;3b7f=O|_n<}$IxHbB%CS0D;B2Sz9b=<$HrJ}pQ{n6u+QMOtW7v{SKtacYS7U#s~I
zq;rh2sFV_k|CGnba~zkhICzx<l+TGxTzpf_gm3!oaJFYAw}WG4na5}Gu|@Z%-fOhg
zYhEL6ApZ_Jsh7tUOlYwI>5kmm7JP|Yyb8Vi7(Q>>XObCP(e&d(#P?c^tH-=EZK3y+
z74^YLV$1iH-tB~pll}Z%z@=HN45SI9xKzGk6KEuDHqoCTtH)+dG3fKq0KCD$S9=9+
z;(TE1*9^t^_;!N*>ig^{1yc_HZDlFpaXk~<Wnt959<gDf&zFF<Z(6DrUrY0uGZC&|
z09OP7!tZxOa$At5C%;>q9wxffqV0B<MFLF}4tjKZ)f9H$CG!sj9`sp!_sAfn9^u>q
zV<jfdMqzt9QGxzXi3z&_ZDiD6I8U~zWsdhpm!krYvWsh{odyn`GwMVe81mCGR&;iu
zk$WlgaS+#rPWC<Frj6giuReQeOkY<w<(_g}hQtdH8+7mNJeMQr>&U1oYzNbylPi4(
zw#1Z;H{|wWI)0MV-x*>@*xsxhKQL<9z0|N?Sd?1V5b%xGBDxNRgO#R<Uj#KdKeWgw
z5+EJjN&plyBu^#W{mzEi9Uz<Dc7fE{)45b83cWib(>J4kda{rOl12>w*0ZIc@fvbI
z%|%w&n5V%<``zMwS;CeDc??p|ZEm7hbA<zUeREiR247?JFw{Zoowj_wJX@Xf^!KxH
zZm9~U+YsIG+=J!$M}cLT^B`$;(;lg)Ci8T^ZAEUNf3!b}arw={*zX0~sq<10tYY7u
zG~b?5BC>VIN^9+obZT|#5qre!tN9ye3LntpZ+vQ$o)_Yr%L(Hjvb~PIprbf!Q8@ql
z`d&Dczw{&H6;!FUpag7=HV85fH6<=Pmg%wzQBJ4$=6vKIiZx6YTnp&aoli*x!=#dl
zvpyM34HYR4Qv3-~w%JA#F-fsT9A5q=_)^mZa0!|rW_-`8jsUhmqs&0fGuK+O(2Vd+
zc4@UiUd=XQmm2pO=W)pvokQ*5TBY^sQJvUvBMbBM3O_BSOh(LoX0M-;T2HYd_h`Sn
z9BlfuV!=GLu9Fsl0e<_#YRjCbKf@t|kPV;JbVMmFD{<Ocge4W~-g)Us`?my$>zW}O
zKd97R4$+xRX(o9x*6XZXN4ZEaNzimATi`%!eCusECSdx;3iM}v?ICl-7UC;Bm1&!O
z`&wP=F|1-|h%nzAv^4>7izha($_uwuwOaUoqht|>Fh@`(6J)Z5n9ohyb9#+E68_l?
zSjn>7{6QpbCd$2TZ>66R@zFled)krL@02vZ1%`>$WWb)>ax<xRc$exqqEX6=Xu{Qc
z1aBX#W{5CnLKtu|rsdATRqXT1)a*QgCwm#@2Z6h>8DHM1amduSu7iBnMsh1VnIZM?
z>VW2xL#*&Zt@}6T4R{0&tEPDP&dm2)Sm}w&=_xVrbd|&P&e3*9<@gbv{4E)wRN3&n
zRv>|+Qk;aH`yufKp4VS6cl`^>2}QC)Jp~GH9e7yJoKSsrO7W-k*iOp2@N<-H?5je2
zx%bK><6b8ohY=1-ics*T2Qg!c)%Hs_11xZGMzc&oa@C%hLbA>M2mA)6ERa@dA)y2E
zeD(E%R0z;uLj`XZp03nhBHJ#IgJN$qvpQCQe(t2z#(3m=_qel|Db#E7g9e&FKZo?|
z+@_7cEca#xzcBwQ1R~sU*q%swsu7+#I?HYEmf|*hd0{u)zI3?J{P&(8huu^^d}U6d
zhh5P?bP{`c_|k|9+0%$=Ev*)5*w1U$lx^M}4rJSLN#-iJ<{q;0cXPf=Z$p#LBgq%g
zdv?910>vCCQ2mUdo=C!Apn-hbxHkXs!-Mt_YAyN%Q?GPb$Bo%)6{l6KO*H7I3g=-o
zZRO4Gfz7Hx1!3uim1O5s5+LqJ6>Y_$N`=J?DGS3P`dIuOY;hG;psjoX^Jfz-7cDQ4
z*_Jop+$PQG_dN#Xr51UN5=?BB%P1?E{SgtAP7~IS9v3$nogIy1@m&MS5`F#mVBM~L
z>4?p>((Z{4oRDPF`(q#4!!DX2A<J6J(q|A_|Nb$sBcvHL1$V|>3$8P^B%!tf1}U?w
zg;pFgtmP}yv*VA6t*0nsbH50@@H~=)+x@u|MSoJa4w{PW4)I_cbe1o#H4DIxmxiM`
zXr>M&ANRq(C?2or(iiDshwG@pZ>ie6=_()8CyCid`pvvOseI=g?e%b@eksz6B^Xri
zTKJ_z9dxzf=8h4UR#g>;3GFkXGaSqy=X}*}^q$tzxaUS$olWVul8fnmpf@Bu``$c@
z3|G*2{B@+>iZ-Y+QTSc(;F`C-mmCiNqyA~d_w$o;eJT4@gz*X(<iWPV!&b8Lvb01a
z1>11voH~phjMeV|ogeAbdYK=@!6z77v>JI*Ev4>PSm%eUnan9Fa{dgOn!qVK?pGRZ
z6<tX$NZhwOc~-KjFCMSW`Lte@x4ZX5o%4hLLriFG(gpGb=ITT{UtTXx?p!5AY?P-6
zF2SJgJa7N}UTvHT)@n!YLITVU1(qvAp~?!KRcWe?G8@5`?538eR+#`x<Cz@KbeD0z
z2^O;uLsud;XP(J{Rvm~T_lOTCz)EfvT;2nzGMiCC%rhn+yS2s%a%WU{d<6asq}<Z_
zsepcj&=h>9lf}Hv<`3OS05=24QQ!4MGtno`>_VX0bYpC83t`$hoUWtXa**J-T-6DW
z!^Nwurg{vNA449(Fj1F4Wz{2^1D$XyR43S#mRYFW9B_2h<O}PdS+f$O$s?iore_sg
zW8hUvTITx9QFt|KQY|T)vTYn=^13Eh4AVhV=F=n#LT(}E1qdw!5#&xpD5rfD0a8{W
zzg-Tmox=lO4<~Gk;Q;&g0U?kJa8N0La<J3waxAnvM{`u=28TC@!|5vL{1Sd;qmdr$
zSl{_bPT_=LqO)!ZVG%7V2&z4s1w7AA3xI4u_MS8L?w4@*QTL3^u8l^HE7H!L*UqN(
zjNz|l<j8l+CPfG(+;CnS59_ba|M^jGuskF83K^tikWGLRs2$<YhHDV3OE2hU?mZ#f
zR`rOCH<+NYe?r9;WwYd1NNy=Y3Gch2>i1*laGr9eJYQ#GbjLd2W0vEdYKgvE#r{AD
z%5bG5H}2q%!#DNn-%?}wcnLH(Ws_&ao50)SESi&>F$>sdFuA3cBE~6KJ0Sk19$C4q
zCRXKoUwuz2gf~$@q(pY`Fhr}j_iVk6Dab{IenS`kq@YN$$bH#4S}?lOy@v3x_E|+x
zUr2rLBtKfAgnFc_%rx2-l~}6?5gd{R{IL0JH@t5kcDX75t;Y_UY)X5(7SJs>_YE$r
zW_q7CsDyen#Ey*<f-+uk<p08KX?i7)gqiPcnm^vODl#dn&DHsZ8~p~lUX|8Nn2Or=
z4iRTCukb_D_6Yg5xhaz^VuGt{w=G$L6f+?!oa33-6UW&V$KY1{4^#9_a!Uk*)l!%M
zi^$XCRmD?&Y-v*|$-oQbl8`VBBb7jl=ji1&ZZ!b$Wcej`<mG0gor%5ahgD!pfzWw$
z0#@E!Vu|%TFJ<H0vkK@w(0R%>;`K`8^T-~MJ$$A^a|u=Pt9d=;AHp;-N_1YIXSaax
zHDr5%i|fwKZrcSme%4;mn{t1`4{9keqEgVmEl?a8zb@_5@;x%;W+yr~zk{Eh*QH>P
zU~<6SK_3*F6aPlyY(lP*V%-}2SyysV&$dSS3%yJqITvmd{CkOY0<r4JCP6jSI!Hi2
z6Qxlu9P29M-NF2ptd`?g%k%3`%nePe{H&g6y~Aj3gi2K2C!j%(`S~>E+B9V+wAY_@
zI)W22!G7^0FC~1@GwmfVZCN8V82~ZzG?FH7rO+w!Og~^OFdlQt{##d;*<;7OW-D*E
zEz@&UQBQTfpYBjiyV;(`EpX!s;0Y48KJ9`v>UE&oQ&HxYPGmZG($li0O<5_zn4Se{
zY;^cWE-OEXaE}wQar*$s*+rN?n!GNfL`o`*b+wz)e*@6BoYP*>Ni)0-6L@+&yJOsT
zXG9dxFjU<HtxMJQC}syVcDgv9$kO^V%y`RT`H6ho1e?OIHzX0t2fhkD<bdsfEvqn|
zqgm95akBDUy}@*OjLFG{y&~JW*F=n);v^Oc_?)JwTWV~)E{>n$tsO*KkDeWDhbsz7
zlEq0iJ@Wz`4fwQ-nwYjJPCt=9O)!PU+L{0;+4yz!xLcK8X2~ilX$w|*C;fhzGGV)Y
zkjGeg(?CX7O$Decv*Llmw<CLg65PwT%<9mQeHHK|0~3m@UyR`%RsqMvfn}xc5KNiF
z)@B9kjMG+W(`{02o)X4JX!$Zax9da+k)S)7Ib}yXL44+ImV*ilccQ5tc<xj%8n5gl
zA4bGjU)j$QH5GYk3%YY8p{^2ZSyI>ETiKr|S+@Grzs!1z%zMkKB$=WQL8sRTwoExV
zi0Rau(&P+!jPjV8zI*7_(fu&rVnU<5+MEgCH8ftGKvxnL+1}HoD#^!M=6Z@Y^@Km)
z<FITRu1eYFinVN*n`dP#z9$K)o$NnuyhGb+`{gm}_@lw9NefjUEzdVuKl^WF6_&$V
zwk40tnT!y8w(alhD9#4KAhgXcclp^c&IPRr<2LeX3HSZy{8ryi9~CN=&EW*=s|ODU
z15d;jb2KE2w)fXYXKnQ23%<0HX1B}=J@Cfpb?`Kgt|Zxe{22fl^iM>XI-e`g?V0u)
z5QW}{tkVUd;+|q*btbj23d@O+ULjbMEM?<iaHzJaonznJlr^SB7NoHERm_|VW}PLp
z&FNS%Z^Gru=#~^w=W89tMi*4lA~;pIAYV)bNx|uMF(kHqXuJphC(v$>3S<|rp%@3A
zJspxZ?6bfP|1_#mG%~G{>i5uMX=hC@s!U3<A5PqreU;FElzQ-X?#o(nenV8kNU+e$
zS|k4{!O;R1ap{xXNH%$sy2+k*>*hyPZTQVPI4U=Sv`pfi7h7~03Y@po_j?+}Zu3W>
z$58W<0E)VPpEc*w<a?g^CSs_vBK#|E<5i)#V39@WepZth&_5d8#noN<{=Hu!uyWvf
zbbekf#^u{4d+vCd#K<H&`tt6&ZT0OotGYzlE5<O2VAC??^*)i<@mezhCOI~&9X<T0
zg{mjS0uk_<P3lPVc%EGDC0~w`y{9V$;&PIl>0nhndRf+^nz93M?l1HTVD+Qk%{r!T
zSwNC-e+*h>z4Q>adlNAp-M{W!c5XKTPQH-h+So&Rk1$((_Klz_;k|XFyVxDKs(wjV
zp9CZfl^|JFj=J0Pf;3h1s+f8><-JqRV3ECCN(~wuqwBxOC@eq4jH%NuU&fD^Xjb9*
zrUk#u`E{3KB@@QM-da~`IiOV)kFD7HoKXI?M}U2L%A=SUOty+BtLA@pNzKT`3-NIP
zYC$>4Y=gOHCCNNBk_9_WNZ&xke4GPKfmJ*dPJS-Uz8TO}Jg!cuIb2C`^S1UBAh)FT
z?*DvaqH^D%h*rx&l2hxLkO08Jky)6Y5CRngsE|U!6PRsn;~qQ?X6Q`vXH$gH%N2J|
zJ=kcKhylaA7Ex3^@J$%i?(aG7Cq5R^n{=QRzQ3N6b<x0L3TE#Zz-zmr5I`A4B~8#|
z^NBU&5Oa~TBP3@p7N6HpZ2US~jD9mHqxEgny+bm^(N4#Le?e$4{@pNiVJwA}%lWk@
zN-Hy{WG*eLJUv(C^x!bCM@v`aa_VL0lbd4S^XRYgm`5}%4{4QoK;pp*ADF~J1D6te
z)LJX*Hr%J|==^tgQ>LXkNlPfwz{p+Hjvkv?e7xT*zuz`WhMn|rR^3Zj`HueKi5?aQ
z*aa~jzP1_P%E=FMRYerU29MuoxO|R_b7HGm2(#uqRGk(v07@IJZVkg?5tk>EZ<y;Q
zr2FO&ZqhmO%^5hcDF>#XViRYyiOp!Y`d3~P0agZ+12}ugL=uD*v2uI|dtfj_=M41B
zH|-?7>IM|tGFq(;;$fGT0R+3e`YAZ~iZ)O>2#i<Er&ZDQ*7ML}>^G>zA3^c0jDDY)
z98&hzk0@PR$0PcyqD2O4+K6`dKDZx5;e6AoZ<jFNF&T0W&JY6hWh5CFFB7kYA}dEh
zzjTe5a@mu`phUYv<WiLSAcD7QEr+2g*0HzHPpt2>0%f0uF=xpA!)ADG6-<b)Mro|8
zZu;PJWKW3bmY163z!Y36BY<GSav8pqDRgNf#3JRw6j&G{xLxD(W4b8br9#{xB@G=p
z+G{PJEjc$80!d*<6oaN}>-L|~eusS$fozb~<?=zcoqp}7#JOOK*<so_X5+}Q+lHP3
zb_BBpxhPjq9y4!GKR2n3>{oy-RSS%w)Zp~xl+DaXrd-bSH~U8ce$sUe0E2wyMhZ$;
zW|404M}Stg*P_<>fAAOsDal}UV>!WbA{&2?TAqK3oKfz65w+V#wDH!5I_p}JC>!en
zFHXkcU`p5&=<f~}Mr~_mqw6XkxP{b&*FAG5EARj9n4g`|fn8);%NV62Mzbts>FjO#
zs;(7%ntoG+aE@MjHcZK_1qZIT#3D_s-%9wmwt9+lW9o7*mHeD~KGLZHfDQL|a}>tT
zKFqe8$yzhQg`+WQm@<n&yRj@>wgE2JWLbL}`65@zi1JNmINV%hxiWsQ($YEreA;!c
zB1mWdTOuXuEk)Y|KneV5x^|=Rs89s))K1GwNp@n;F>M@b*c;acn!EtYhmJA@uw|64
z9Raw#fYqb#62Sy{F~zQqtwpMzna(i~_B5?psiRb8Lcl3jSkk(pZK4HJLs)&=P(vI$
zymD$W=q=gsjy<Kn^v=i=QaN;Wy&{+S`*iuaKG7>M2&9{1&ZO+SG1;g?0<*ZOQyJx>
z@hVvozAoJqqbrXz9IP#!KbyND@z}fBP<Kw?U16UicFJY6R%dy!^tP;^YqcM1S8`%|
z%GqfGEcoeVqG^Joy_l6ztLuoH{8$sRYRdq7Y&PKxw4LkSJB+v5b5~{y`9~!6Jzqx5
z2bG|CFS!MB3VJuhEm=$QeaS_{=?URJI7tn9Ur22o7xf`?F@#6vDqv3R?<fq<Doypb
z`UK-gG87w3pe<q#;ZHcjLG_n#*FWb?O*C=9&XrFN2z~sz>QSkL2)2D@YKVZr3yu>J
z!J&)3xEa^HqdY}YLqnl(#=J&(2!};Bre^&P#z6*+v<WsGpZB%kEeND=It$eCFg0D9
zRf5`c@ZgU6NvD0*$Jn1mf%6*(gVv0}!*-xL5{jwmOn8JU4-a!*>q_u;(XySckWZ@K
z;fKN_<>g)W&AkXblkj-d*lI8F102<A7-=8X+aqg^&sW4qBHiMWm(hiUk>cGO?uyoL
zv)El$kCR_aV7SqjZuEYoV`GbuFqETT<XpMDz_skyCF$>$oF$DUIT#$jo%9PhvN`xJ
zO#?KRqa;LBineMNe`qB^0Lsz~>*^0=?{C_t0oQo}UR&!M6q+(}B<#33d~|nNO|+7<
zuG(-Mq=(FrQs_*{X-_E_f`?!=R15bj8JqDh(Xl!RgL}&YR?Tzs0d51m@@0A7i(z}a
zojAd*fq7BabRj2^6LI4vJ<H;hSSy^rNroV9bmz$V!P6`BR@Hl468hMcLU;!9MmvpO
zdY(%MF^~VvQf(~r_<ViZWH(&`ePp&$iO0V2>UYC==g#3o(YpJ9N=OX6I%WDrcFB)_
zyy=!T5MI$f&R(fL|8p;Pc5m~ziGYyO`UbRj%S!MR80ky2Phd0AZ}SW7D=PFPue{2Y
z!$>o+MLj|FuoL5<A~yU3Mt5Qp7`J-9hzG1}Z@eQHHD5j2K{O-fvHWt_&lZ-&Ob&9g
ziJ~r!4u3R$M-DwsdDt0?t>;sQ2LyP1X+N0!;!<R|YXqNv(k|J<_(y|UJ)KW&#^o0o
z0Y1<JWw_dfGRy`z6;OZb<JYS80pNunW2%run`V)XabA9rGZOo9=fCuE490aWtN@IM
zE^>&7Yg9|*Ao!aGF|mt=xHa<a23gW}KAF_o^S3D**ioO`*h9&@<$fWp*pn$=3la)J
zUv-j(@=2Qdt{^!|m}T?sMH%56@pI4GY*_p;gt@Km<gfWjRp?qTYpw0}aYm4HODI!q
zl5sNS{)Mz}0ne0~VGzyJx=xN6W4XF;>AB~k69YJ_XzkZe=wG;0gv$}SyN=*%$I3UN
z3yMpDPWQM0WU${bB!xVjLo9fwMW^dc#A0M9a9*CM)$hIOmQ8_`SY4)4Wu(U0p#Og4
z&s$-rOP8TH_dRj1Y92dmN!(+Op6)?|p<1tMK@+YgEUwvQnj;zc@-bembx^UUZ*@VF
z>9WGJx0geL2U?w?fZ`-06g@w8cDF)Ewo@-dH=qjQ4MA}=apZ29PuNzYor~=I-hOha
zE&0fzkbOJYbj@*YjymJhAk$<i&arv+<y0#!it@`QUSr~ZO&SE^P4BrMRpZg;QXUA&
zocWr+iBFi9i!{zrk}}M7Nn;4+gYq)o9ke?9#f&K>rf!&rZk*iIoaEwUDrU6?s`QtQ
zpsBAp#%Y_R7^^7TCvk~B!39E_$8F2R3BOp$DUIoqH%ym}87u>v({G7zZNopWG$$u?
zxb}Uy+yA^YHCR^1OWkDY+C%J0&Mu#s?EbprWFDYcDc8Q|9})cUb1o9uE*s>*w<rOU
z(7C<$XrH5B?fm1^*pz^>ON!c>cc4J9TDqQ5K8Oc8+TNx;4y3A`wu}}<?kdjlY8^VN
z=4zWVcynwO%Q=Likzod91C&0AxYhgkp;jGo%_o_ogp|>QV>%#Uc3o%OmPa<0w2k)`
zpZ0<Ac}j?_r~4!0g80_m`#kD$ZuhT`X_gh8ya5;n$&Vxn!Aeu$rGT_^q@PoPN0h*(
zLepbY+{+|58fTi`hQmD+Vt=)CH*#OJ`C3dlr{!#-8g*BiV}8|b8_-#;xypr!7h&Nm
zxgmz97-Z==Z-G--nXIgNsB;SLAa#=i4U^D9q>F!eT(Udd#_&;%%K@~33Y1lsE6X>-
zmja&SHK-n{F%gjsd_3=x!~G<Pz%PoHIEWDWq`6EPDbe7w_g_?yi-5=2X)8}R#nRQH
zvtSix3w7q2ZwWG#=9@A9gzno+_Y+(qfL~Ngts*nUC+3gw>4wJ#$dU0+!c92E&1JW+
z3mL=dVE1~R+Wb3e%WA)9ZBCO+irrm}Jr@9;ua0>X_FWf1sNf%FaoTp;I!j3KYJ6Qu
zVpWy#HGC9mLgEeuAWReUEs=HI9y*bn?;JSQ^vN{VnTfeQ#A~YIasI(2(<}bI5ZbXu
znQI_d?E31$6G4VVtj(KO{BTAJCv$6Ht|REH@Lix_c0TPr{Zo{z58-uK*a1pQjC0a7
zIn7YdIdHtSj*HM7J|dhMP+`xPSz_QyI-X8bm2ogs)|sv3W4_b0G)X*%S<Fo~+{&NW
z!XB7SC}$2c{n%kH2FN4kE%!%pT_oQFe~O!wzxaEw|2=<?krZRQc@xDlnJ_j(2Jkz*
zyB7lcwhUP5<wl%?*8N0W@y;P#hYb@aU5Ceku50mrT6((;{N|<2YAs_zWyFLoS~r<&
zzWg=kw=O2-9{DM%a4fIp7E`HURK{RbK&J<2>BcQV5VHR07*l#@(=1R2mA6$5mFIT7
zSiC#fNhdcGngqA#US35Q9m{{jR|V+W<Yw*4e0jZVbn4Q*6dyP<bYMxr3K(pfpxr)d
z_VD=XnrYGr`U!EKw!7rkdQJ6&Pvks(tKrh^S~bnV;ey)(!v#hjdNU4pZA$sACiDHi
z6pu*6UH@fSJB4M&@sa`EBe(k?Q}#40uuC7$-+5xt!z5V=essp6qvhb^OrVWGNXWHY
zFO*8KIi5N9>4IVj?5n<7#K%?&&uvcI17wCfwSY<o6tC*|*9h02)N?Qm1Bm*$b(Qbg
zdjYBU$NE^xrgdB$k88PGvEf44x;w~8`lh1|PT<`R_CP3^F>Q6TXNwg2V`CzkY!A8C
zd6z#Xif{obqH&v>+-?(cDtzhx@xF+^lgt?&0=wh7`qu=}Uw{1k*QUv7?#T=Bt}oMm
z8L$&#-o`{8m2wik{S=Ct$9D)Tl75kyr%eERsGHcrpkG)=Bm${j^LoSx71PT@4VnKh
z_o>gL1^8zrTYbbW3_0+-ls5KN%(OpYYJfaQPmdD1w+^imGmg0d#yU>$AvP6)CE{E<
zD*hv7V8h2bSN~7mH>DwS><{pp<-nWQX8Qjmtyl6-f8&rxxFrP5dvnxyvk-Tsia5~p
z0708U^%pSsXs-XkL4Ezc6h8>W=>6+^0g^rdv-Vft!ZVq!(bmV-QYBH+iDuX5h)c83
z4P?vSmw9a$=jcb)io4^46W(0T*ZwtS{!0SCGgIXzDZ3}$1G2Y9y09|_f6QOLhw{H&
zu=1H@^bgHwL-sBC9GCYEo&ahX?9KeqYoG*A@~-_hwRjy^w(RgjH5ugxq+TTa09;vR
z5<z+NyCMci|NnR2Kgj1~08A$TRB`2RBMCuD%|O9;$-p9x`A@U?bLfF96L?r9X-Sp8
z4_LhXOaJ~cgHOQ(IL<TOcK=v&=OWO6Fba5N`VY=~5Mcde-=@y}W6i&8?|*1R|9it1
z`^TET!1ph77q#%groer#e`Du==Q&Qjj9*naHqSqaqzwK@yYCFqc7)(w!j;wdEoS;S
z^}S!e1?=@4<Cplr-o+3l1n>cMMgh;n>CWVEZY6##YrIbUb}2`?$iH?{`Zte0Jq^X7
z{8M!ecev>@&L0;|_($7#EBL{5X9R`S35UQWnGi3z{R7V0Y{0QkLiK5BatV!p5pT}a
zOx7p11{YfE1H0xr4=ym;i)pAb(kpYIC?+a*N>s)mx^3PW{N^e2ik!#xO)+pdHbpN&
zY93o6p_P;S>Y4~YkFB+<=YmE9O>V4(AMymMCo=svzeanMqc$NSnqEaoFK{byqhBkx
ze2qdwF&DS}^&8pK!wMw-fV!4DEFdV`gf^*ZpUMuZ^Nd&L?Q<v~h_m--fU(#!&jq7V
zmRU@->3m`G;y=bg(g8kYIXKhZb_X-9y9)l^8Ne4zEKoca4L4R%lI#1wV^-)~ozeI;
zxk)VL*PHpMqIb#~y&uc!SsWk#ReoA)MnC$~A$!aum+6gs9(*d{%j}#$1LOXO+rO9<
z^l7>ID>%oSv|uE~Nzo&iA;#c;Q5H()zG#Klehc=ntFJzBcPn!jY0YSSV*X2<d0_OG
zNX#b;ua;HO+08Q>-<%Fb0%AyCXmT^Q*2b?{{XSp2KYuuj&n?H@>)FaCN=Uxmh&tT%
zLMrcuucM-cyw@7dwyL~S`8xZxNH)rrcK}=J*3TG>e6D0V>Oa$i80=XL!Kl0dFGTJ!
z$LW1AV$&q`oP2=LVC{0t`*<{tRS@4x*Ao{1Uv%VOdK%D+M^aFSy$n`b?|dd#xK36o
z3_rZqZ|VCXaJwMj@w78=B%wF%Uijr`+Q9rMSDV1P$Ge1bi`AGfbA|M~c#gb}^gm(l
zDjnh~rR69pl-vVPR7Vm9J{u4{%l2v@e`II&nSC%-vt$2#&B1Yw@AQuLAhbs?HjFOi
z&v7j#6*4XQ8pa0724)I++93QZ+uz&Af?mJ3k8#XN3Ga@Ov07x?msp3=3o(O&Z`o?0
zwHvuwHVYn&vyW$W5Lj7ZGr@)qx$B5n<V1_?4G-G%psw<UdwE~HD5Ftu@(-xi%{<#!
zJw${i;w|EUdz69i%rEC16XbP%O4<^#8}6fFm6AnbW&tS{c05&36hFu75l+>Rd|~y)
zOEmtz*h1wbL4EV1Fz(C{;zJZRVB}mEL-=F!jfs2^S-I{lLpN?R_ASg#N2lmE5?5ee
z<EaPq!7<N=fR`Ts<*Zom6(`*A_$w|N*@kFZzEbSF;3~tbA;VW(%m;Tgrag*d8PHEq
zPZOZ#Qx6cY@lV=9l(@kX<X@gOCfN#qpO?4Y&i*h0U4ow6Uyp?SI*E_8^#?i}#y1*5
z#XWGB(iog037eZ@sx--;Tq2~<PX;zKdLw9k1M`A6{baxA&Ge--WT}nN3y+?wA83bV
zBRAqi{+cj*MiKn=tt@1-Plo^Te%G`{OXiwv7+!WpIzF;YC~jt0mTUs@Vva2Oc<rLp
z*>~n=%#_^q%g*`d?SCE>lFh4MnmLG(b1h`DPaFx;JA6E*mw~I=Rl5ip<zi#JEEZIK
z8%Kz~@1|r1DN>jEL-=e(^0oH?KmVJcCH+oovr@Pdo%~T9B6lOIrlXC6psOCgB09Vw
ziM_&cE=VGKpu_{|IB*ssnvAz|8!m4!ph><7Ox8U9)p*onjLTjIuOUc0_(Eb#(@1xI
z2FFveAIx^xj9K2M{gqFLhg)f04<cA*kg5ousPP3ugpaw>jut>G(s<E(``P++)R`kC
z5pX`XvtuM6!GUI9H5ptIt2}kCB|+Bwif7$X+d<nD?Hg95Y3C-Sd3yhhC|zM?{~sqY
zCB=3ASG2mU+V<jwZP`$|8Lc;p`Xj;8B6M+P2M(CEdMUMW=#xIrJ?50l0@+I;sL8$D
z^l=WW{^&mTETV#>V|K369*xGd`90uaxb-eDakGMdZ@pj?9q6~zJQu0bs&AIae@>$I
zdefKRXKmJN9RwQ*Z`S!>`}_PV*~<a%6q3W*CrjmORC1SHk`5}9CBb4nY}sZONqM9F
z_5G6WGNx?GXhQWY$NKlk34&}~^@3ewt>qLO`JFkO#O898MMTzTAc`ubfwgL=e`0BQ
z0;37j>t6>pCDdiJK4@>Rg<v#tITrQ<rmGO|BkAV!x~Z@fnP@F$EatX&pEl=iM8C3o
z)_`&rQC^k((6;Jse#RBP{<=>*#$JXLMPUF(`)ZyrDH51A1i4UKR<YRa-*e-a?;Lo{
zU(XkHr8ejj)Z=mLcoySbK@a5@{XbKy#`M{xHiTI{4mHW#_}NTFr)g8+`s6m+@9dPh
zUbej?%b9(e+G_cE7VV4o_xlQG`rSX}3`|i0NAWU3Ni)=djXV`z5_jFmOiaM9|GB_A
z+pU>^H@Qkgrt3BJnbyy}*wcJIlxMYocTtDa+yTqhE39dPj}wnBEHgQ>C3{q~m}-Oq
zxnDC_R2Y|;)~5mbefCd6S4nqHvZNKiZ73`Zsx`?`%+*!JgSlkA^WbSKmqO&P4ZT;I
z!2r&3-WXRQ0r-}oCuDAM#<ut0v4F70k#BKc#QWaPIo6>jz&3$+YUcF%*?qmX+_-hp
zPP5}Fw~0DUn34(C=C4!9zxF#C<XV6S0kkCc^DnK{Q-NC+3scEm^FUJH`^Ri7tY|-@
zP+h1at4WdHVY?{+H)m*U6}TS&Veyt1+J{6dc=K%_zpLne$WMZzL*%Vm@b7Ud(1q<h
z<u9QBf?{K~Ek@)#LX}71%x4WCanPwzHTfsH0h)r;dDbfbKsVCA&`m)tpTIxhoh7h%
zo2SdmzY>o>1|k`Ffy>h4%(j1y;r@lg&IkhP0ch1f)?DNPF6U2wDE<e$3;qQuM=P%V
zW6jiGkn%Ak?$Tc$`^Wq!S2-XuOIgXk&*n0`j0G;IIz?3e6H+n*kn%zIi+`-?ei49_
z`mjfa{}4bM04amlrWpRQrVen~y-=w4^*;n)3`qADJKI0j{8#Az3jJSA|JS|z>t6o#
n>Hi37{|3_kSs-0FC3`a#WTLsl`x^MBPLPJG&b`vRmLdNa{xT_F

diff --git a/apps/website/screens/components/switch/specs/images/switch_stacking.png b/apps/website/screens/components/switch/specs/images/switch_stacking.png
deleted file mode 100644
index 492ab08d7450b0d2d37bd28ac0de563ab06f2289..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 26573
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
Z)o-iQD5p}N!0+>*4r}RZGWJ^p{tLJ64SE0o

diff --git a/apps/website/screens/components/switch/specs/images/switch_states.png b/apps/website/screens/components/switch/specs/images/switch_states.png
deleted file mode 100644
index 1bec13c5c3e4a93f92800d1dec01df421a85035b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 20191
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

diff --git a/apps/website/screens/components/switch/usage/SwitchUsagePage.tsx b/apps/website/screens/components/switch/usage/SwitchUsagePage.tsx
deleted file mode 100644
index c264647936..0000000000
--- a/apps/website/screens/components/switch/usage/SwitchUsagePage.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import labelPosition from "./examples/labelPosition";
-import stacking from "./examples/stacking";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-
-const sections = [
-  {
-    title: "Usage",
-    content: (
-      <DxcBulletedList>
-        <DxcBulletedList.Item>
-          Switch toggles should be used in place of radio buttons whenever the options are opposites of each other (i.e.
-          yes/no, on/off, etc).
-        </DxcBulletedList.Item>
-        <DxcBulletedList.Item>Whenever is possible stack the switch component vertically.</DxcBulletedList.Item>
-        <DxcBulletedList.Item>
-          Switches have immediate effect over the application, changing preferences and configuration settings.
-          Don&#39;t use a submit button.
-        </DxcBulletedList.Item>
-      </DxcBulletedList>
-    ),
-  },
-  {
-    title: "Stacking",
-    content: (
-      <>
-        <Example example={stacking} />
-        <DxcParagraph>
-          In some application the use of several switches based on the requirements could appear, that why we provide
-          some indications in the case that the user needs to use stacked switches.
-        </DxcParagraph>
-      </>
-    ),
-  },
-  {
-    title: "Label position",
-    content: (
-      <>
-        <Example example={labelPosition} />
-        <DxcTable>
-          <thead>
-            <tr>
-              <th>Position</th>
-              <HeaderDescriptionCell>Description</HeaderDescriptionCell>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <strong>Label before</strong>
-              </td>
-              <td>Labels before the switch indicate what the switch is for</td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Label after</strong>
-              </td>
-              <td>Labels after the switch indicate the state of the switch</td>
-            </tr>
-          </tbody>
-        </DxcTable>
-      </>
-    ),
-  },
-];
-
-const SwitchUsagePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/switch/usage/SwitchUsagePage.tsx" />
-    </DxcFlex>
-  );
-};
-
-export default SwitchUsagePage;

From 306d9b0ebafcdac2210d61ab75d0405fda27e792 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 8 Apr 2025 12:49:55 +0200
Subject: [PATCH 11/15] Switch doc updates

---
 .../switch/overview/SwitchOverviewPage.tsx    | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
index 4077534a5c..ea9f2a39c0 100644
--- a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
+++ b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
@@ -9,6 +9,7 @@ import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
 import Image from "@/common/Image";
 import anatomy from "./images/switch_anatomy.png";
 import content from "screens/components/wizard/usage/examples/content";
+import Link from "next/link";
 
 const sections = [
   {
@@ -121,8 +122,15 @@ const sections = [
     content: (
       <>
         <DxcParagraph>
-          While switches, radio group and checkboxes, may all appear as selection controls, they serve distinct purposes
-          in a user interface:
+          Although switches,{" "}
+          <Link href="/components/radio-group" passHref legacyBehavior>
+            <DxcLink>radio groups</DxcLink>
+          </Link>
+          , and{" "}
+          <Link href="/components/checkbox" passHref legacyBehavior>
+            <DxcLink>checkboxes</DxcLink>
+          </Link>{" "}
+          may appear as selection controls, they serve distinct purposes in a user interface:
         </DxcParagraph>
         <DxcTable>
           <thead>
@@ -137,8 +145,8 @@ const sections = [
                 <strong>Switch</strong>
               </td>
               <td>
-                Use for a single, immediate toggle between two states, like on/off or enabled/disabled. Switches should
-                act instantly and are best for system or UI-level settings.
+                Use for a <strong>single, immediate toggle</strong> between two states, like on/off or enabled/disabled.
+                Switches should act instantly and are best for system or UI-level settings.
               </td>
             </tr>
             <tr>
@@ -146,8 +154,9 @@ const sections = [
                 <strong>Radio group</strong>
               </td>
               <td>
-                Use when the user must select only one option from a list of predefined, mutually exclusive choices.
-                Ideal for short, static lists where all options should be visible at once to support decision-making.
+                Use when the user must select <strong>only one option</strong> from a list of predefined, mutually
+                exclusive choices. Ideal for short, static lists where all options should be visible at once to support
+                decision-making.
               </td>
             </tr>
             <tr>
@@ -155,9 +164,9 @@ const sections = [
                 <strong>Checkbox</strong>
               </td>
               <td>
-                Use when users can select multiple options independently. Each checkbox represents an on/off decision,
-                making them suitable for filters, preference settings, or multi-select tasks. A group may allow none,
-                some, or all options to be selected.
+                Use when users can select <strong>multiple options</strong> independently. Each checkbox represents an
+                on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group
+                may allow none, some, or all options to be selected.
               </td>
             </tr>
           </tbody>

From 7394b172271ca578f331d1d18b48eadeb50b395c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 8 Apr 2025 16:51:37 +0200
Subject: [PATCH 12/15] Checkbox and switch updates

---
 .../overview/CheckboxOverviewPage.tsx         |  88 +++++++++++--
 .../checkbox/overview/examples/stacking.ts    |  40 +++---
 .../switch/overview/SwitchOverviewPage.tsx    | 119 +++++++-----------
 .../switch/overview/examples/labelPosition.ts |  15 +--
 .../switch/overview/examples/stacking.ts      |  28 +++--
 5 files changed, 169 insertions(+), 121 deletions(-)

diff --git a/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx b/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
index b525ce0e1a..ddb60a6d0c 100644
--- a/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
+++ b/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import DocFooter from "@/common/DocFooter";
@@ -6,6 +6,7 @@ import Example from "@/common/example/Example";
 import stacking from "./examples/stacking";
 import Image from "@/common/Image";
 import anatomy from "./images/checkbox_anatomy.png";
+import Link from "next/link";
 
 const sections = [
   {
@@ -52,27 +53,88 @@ const sections = [
       {
         title: "Vertical stacking",
         content: (
-          <DxcParagraph>
-            To improve readability and scalability, checkboxes can be stacked vertically, especially in forms or
-            settings panels, allowing users to process options more efficiently without excessive eye movement. Leave
-            8px of spacing between vertically stacked checkboxes.
-          </DxcParagraph>
+          <>
+            <DxcParagraph>
+              To <strong>improve readability and scalability</strong>, checkboxes can be stacked vertically, especially in forms or
+              settings panels, allowing users to process options more efficiently without excessive eye movement.
+            </DxcParagraph>
+            <DxcParagraph>Leave minimum 4px of spacing between vertically stacked checkboxes.</DxcParagraph>
+          </>
         ),
       },
       {
         title: "Horizontal stacking",
         content: (
-          <DxcParagraph>
-            Used in scenarios with limited vertical space, checkboxes can be stacked horizontally, along with a
-            consistent spacing and alignment, to maintain a structured and organized layout. If a set of checkboxes is
-            related to a single category, consider using a group label to provide context as this will enhance usability
-            and help users make informed selections. Horizontally stacked checkboxes maintain a separation of, minimum,
-            32px.
-          </DxcParagraph>
+          <>
+            <DxcParagraph>
+              Used in scenarios with limited vertical space, checkboxes can be stacked horizontally, along with a
+              consistent spacing and alignment, to maintain a structured and organized layout. If a set of checkboxes is
+              related to a single category, consider using a group label to provide context as this will enhance
+              usability and help users make informed selections.
+            </DxcParagraph>
+            <DxcParagraph>Horizontally stacked checkboxes maintain a separation of, minimum, 24px.</DxcParagraph>
+          </>
         ),
       },
     ],
   },
+  {
+    title: "Checkbox vs. radio group vs. switch",
+    content: (
+      <>
+        <DxcParagraph>
+          Although checkboxes,{" "}
+          <Link href="/components/radio-group" passHref legacyBehavior>
+            <DxcLink>radio groups</DxcLink>
+          </Link>
+          , and{" "}
+          <Link href="/components/checkbox" passHref legacyBehavior>
+            <DxcLink>switches</DxcLink>
+          </Link>{" "}
+          may appear as selection controls, they serve distinct purposes in a user interface:
+        </DxcParagraph>
+        <DxcTable>
+          <thead>
+            <tr>
+              <th>Component</th>
+              <th>Use case</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <strong>Checkbox</strong>
+              </td>
+              <td>
+                Use when users can select <strong>multiple options</strong> independently. Each checkbox represents an
+                on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group
+                may allow none, some, or all options to be selected.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Radio group</strong>
+              </td>
+              <td>
+                Use when the user must select <strong>only one option</strong> from a list of predefined, mutually
+                exclusive choices. Ideal for short, static lists where all options should be visible at once to support
+                decision-making.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Switch</strong>
+              </td>
+              <td>
+                Use for a <strong>single, immediate toggle</strong> between two states, like on/off or enabled/disabled.
+                Switches should act instantly and are best for system or UI-level settings.
+              </td>
+            </tr>
+          </tbody>
+        </DxcTable>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     content: (
diff --git a/apps/website/screens/components/checkbox/overview/examples/stacking.ts b/apps/website/screens/components/checkbox/overview/examples/stacking.ts
index 435d7358ef..e63ce15200 100644
--- a/apps/website/screens/components/checkbox/overview/examples/stacking.ts
+++ b/apps/website/screens/components/checkbox/overview/examples/stacking.ts
@@ -1,21 +1,33 @@
-import { DxcCheckbox, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import { DxcCheckbox, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/halstack-react";
 
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex gap="5rem" justifyContent="center">
-        <DxcFlex direction="column" gap="0.5rem">
-          <DxcHeading level={4} text="Vertical" />
-          <DxcCheckbox label="Option" labelPosition="after" />
-          <DxcCheckbox label="Option" labelPosition="after" />
-          <DxcCheckbox label="Option" labelPosition="after" />
+      <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="center">
+        <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
+          <DxcTypography
+            color="var(--color-fg-neutral-dark)"
+            fontSize="var(--typography-label-m)"
+            fontWeight="var(--typography-label-semibold)"
+          >
+            Vertical
+          </DxcTypography>
+          <DxcCheckbox label="Option 01" labelPosition="after" />
+          <DxcCheckbox label="Option 02" labelPosition="after" />
+          <DxcCheckbox label="Option 03" labelPosition="after" />
         </DxcFlex>
-        <DxcFlex direction="column" gap="0.5rem">
-          <DxcHeading level={4} text="Horizontal" />
-          <DxcFlex gap="1.5rem">
-            <DxcCheckbox label="Option" labelPosition="after" />
-            <DxcCheckbox label="Option" labelPosition="after" />
-            <DxcCheckbox label="Option" labelPosition="after" />
+        <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
+          <DxcTypography
+            color="var(--color-fg-neutral-dark)"
+            fontSize="var(--typography-label-m)"
+            fontWeight="var(--typography-label-semibold)"
+          >
+            Horizontal
+          </DxcTypography>
+          <DxcFlex gap="var(--spacing-gap-l)">
+            <DxcCheckbox label="Option 01" labelPosition="after" />
+            <DxcCheckbox label="Option 02" labelPosition="after" />
+            <DxcCheckbox label="Option 03" labelPosition="after" />
           </DxcFlex>
         </DxcFlex>
       </DxcFlex>
@@ -27,7 +39,7 @@ const scope = {
   DxcCheckbox,
   DxcInset,
   DxcFlex,
-  DxcHeading,
+  DxcTypography,
 };
 
 export default { code, scope };
diff --git a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
index ea9f2a39c0..721f9e4a86 100644
--- a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
+++ b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
@@ -5,11 +5,10 @@ import DocFooter from "@/common/DocFooter";
 import Example from "@/common/example/Example";
 import labelPosition from "./examples/labelPosition";
 import stacking from "./examples/stacking";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
 import Image from "@/common/Image";
 import anatomy from "./images/switch_anatomy.png";
-import content from "screens/components/wizard/usage/examples/content";
 import Link from "next/link";
+import content from "screens/components/wizard/usage/examples/content";
 
 const sections = [
   {
@@ -47,19 +46,25 @@ const sections = [
   {
     title: "Stacking switches",
     content: (
-      <DxcParagraph>
-        Switches can be arranged vertically or horizontally depending on context, user needs, and available screen
-        space.
-      </DxcParagraph>
+      <>
+        <DxcParagraph>
+          Switches can be arranged vertically or horizontally depending on context, user needs, and available screen
+          space.
+        </DxcParagraph>
+        <Example example={stacking} />
+      </>
     ),
     subSections: [
       {
         title: "Vertical stacking",
         content: (
-          <DxcParagraph>
-            The preferred layout for lists of switches. It <strong>enhances readability</strong> and ensures each toggle
-            is clearly associated with its label. Ideal for settings or control panels with multiple toggles.
-          </DxcParagraph>
+          <>
+            <DxcParagraph>
+              The preferred layout for lists of switches. It <strong>enhances readability</strong> and ensures each
+              toggle is clearly associated with its label. Ideal for settings or control panels with multiple toggles.
+            </DxcParagraph>
+            <DxcParagraph>Leave minimum 4px of spacing between vertically stacked switches.</DxcParagraph>
+          </>
         ),
       },
       {
@@ -70,7 +75,7 @@ const sections = [
               Used when space is constrained or when only a few switches are present. This layout can save space but
               should be avoided for long labels or more than two options.
             </DxcParagraph>
-            <Example example={stacking} />
+            <DxcParagraph>Horizontally stacked switches maintain a separation of, minimum, 24px.</DxcParagraph>
           </>
         ),
       },
@@ -96,7 +101,7 @@ const sections = [
           <thead>
             <tr>
               <th>Position</th>
-              <HeaderDescriptionCell>Description</HeaderDescriptionCell>
+              <th>Description</th>
             </tr>
           </thead>
           <tbody>
@@ -136,7 +141,7 @@ const sections = [
           <thead>
             <tr>
               <th>Component</th>
-              <HeaderDescriptionCell>Use case</HeaderDescriptionCell>
+              <th>Use case</th>
             </tr>
           </thead>
           <tbody>
@@ -176,68 +181,32 @@ const sections = [
   },
   {
     title: "Best practices",
-    subSections: [
-      {
-        title: "Use for binary, opposing states",
-        content: (
-          <DxcBulletedList>
-            <DxcBulletedList.Item>
-              Switches are ideal when users need to turn a setting <strong>on</strong> or <strong>off</strong>, such as
-              enabling notifications or dark mode.
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Avoid using switches for choices that are not immediately clear opposites (use radio buttons instead).
-            </DxcBulletedList.Item>
-          </DxcBulletedList>
-        ),
-      },
-      {
-        title: "Trigger immediate changes",
-        content: (
-          <DxcBulletedList>
-            <DxcBulletedList.Item>
-              Switches should take effect <strong>immediately</strong> without requiring form submission.
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Do not pair switches with a submit button or use them for decisions that need confirmation.
-            </DxcBulletedList.Item>
-          </DxcBulletedList>
-        ),
-      },
-      {
-        title: "Use clear, descriptive labels",
-        content: (
-          <DxcBulletedList>
-            <DxcBulletedList.Item>Labels should clarify the effect of toggling the switch.</DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Use positive, action-oriented phrasing when possible (e.g., “Enable sound”).
-            </DxcBulletedList.Item>
-          </DxcBulletedList>
-        ),
-      },
-      {
-        title: "Stack vertically for better scannability",
-        content: (
-          <DxcBulletedList>
-            <DxcBulletedList.Item>
-              When multiple switches are used together, stack them vertically to maintain clarity and reduce visual
-              clutter.
-            </DxcBulletedList.Item>
-          </DxcBulletedList>
-        ),
-      },
-      {
-        title: "Don't overuse switches",
-        content: (
-          <DxcBulletedList>
-            <DxcBulletedList.Item>
-              Too many toggles on one screen can overwhelm users. Group related settings and consider alternatives like
-              grouped checkboxes or forms when appropriate.
-            </DxcBulletedList.Item>
-          </DxcBulletedList>
-        ),
-      },
-    ],
+    content: (
+      <DxcBulletedList>
+        <DxcBulletedList.Item>
+          <strong>Use for binary, opposing states:</strong> Switches are ideal when users need to turn a setting{" "}
+          <strong>on</strong> or <strong>off</strong>, such as enabling notifications or dark mode. Avoid using switches
+          for choices that are not immediately clear opposites (use radio buttons instead).
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Trigger immediate changes:</strong> Switches should take effect <strong>immediately</strong> without
+          requiring form submission. Do not pair switches with a submit button or use them for decisions that need
+          confirmation.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Use clear, descriptive labels:</strong> Labels should clarify the effect of toggling the switch. Use
+          positive, action-oriented phrasing when possible (e.g., “Enable sound”).
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Stack vertically for better scannability:</strong> When multiple switches are used together, stack
+          them vertically to maintain clarity and reduce visual clutter.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Don't overuse switches:</strong> Too many toggles on one screen can overwhelm users. Group related
+          settings and consider alternatives like grouped checkboxes or forms when appropriate.
+        </DxcBulletedList.Item>
+      </DxcBulletedList>
+    ),
   },
 ];
 
diff --git a/apps/website/screens/components/switch/overview/examples/labelPosition.ts b/apps/website/screens/components/switch/overview/examples/labelPosition.ts
index 339f91798b..ee61f300bd 100644
--- a/apps/website/screens/components/switch/overview/examples/labelPosition.ts
+++ b/apps/website/screens/components/switch/overview/examples/labelPosition.ts
@@ -1,17 +1,11 @@
-import { DxcSwitch, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import { DxcSwitch, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
 
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex justifyContent="center" gap="3rem">
-        <DxcFlex direction="column">
-          <DxcHeading level={5} text="Before" />
-          <DxcSwitch label="Show all" />
-        </DxcFlex>
-        <DxcFlex direction="column">
-          <DxcHeading level={5} text="After" />
-          <DxcSwitch label="Off" labelPosition="after" />
-        </DxcFlex>
+      <DxcFlex justifyContent="center" gap="var(--spacing-gap-xl)">
+        <DxcSwitch defaultChecked label="Show all" />
+        <DxcSwitch label="Off" labelPosition="after" />
       </DxcFlex>
     </DxcInset>
   );
@@ -21,7 +15,6 @@ const scope = {
   DxcSwitch,
   DxcInset,
   DxcFlex,
-  DxcHeading,
 };
 
 export default { code, scope };
diff --git a/apps/website/screens/components/switch/overview/examples/stacking.ts b/apps/website/screens/components/switch/overview/examples/stacking.ts
index 067ef5b9ba..493a67c7cb 100644
--- a/apps/website/screens/components/switch/overview/examples/stacking.ts
+++ b/apps/website/screens/components/switch/overview/examples/stacking.ts
@@ -1,18 +1,30 @@
-import { DxcSwitch, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import { DxcSwitch, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/halstack-react";
 
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex gap="2rem" justifyContent="center">
-        <DxcFlex direction="column" gap="0.125rem">
-          <DxcHeading level={5} text="Vertical" />
+      <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="center">
+        <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
+          <DxcTypography
+            color="var(--color-fg-neutral-dark)"
+            fontSize="var(--typography-label-m)"
+            fontWeight="var(--typography-label-semibold)"
+          >
+            Vertical
+          </DxcTypography>
           <DxcSwitch label="Option 01" />
           <DxcSwitch label="Option 02" />
           <DxcSwitch label="Option 03" />
         </DxcFlex>
-        <DxcFlex direction="column" gap="0.125rem">
-          <DxcHeading level={5} text="Horizontal" />
-          <DxcFlex gap="1.5rem">
+        <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
+          <DxcTypography
+            color="var(--color-fg-neutral-dark)"
+            fontSize="var(--typography-label-m)"
+            fontWeight="var(--typography-label-semibold)"
+          >
+            Horizontal
+          </DxcTypography>
+          <DxcFlex gap="var(--spacing-gap-l)">
             <DxcSwitch label="Option 01" />
             <DxcSwitch label="Option 02" />
             <DxcSwitch label="Option 03" />
@@ -27,7 +39,7 @@ const scope = {
   DxcSwitch,
   DxcInset,
   DxcFlex,
-  DxcHeading,
+  DxcTypography,
 };
 
 export default { code, scope };

From d64ce209936aad0212e5261f8d53fdff88aff1df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 8 Apr 2025 17:11:05 +0200
Subject: [PATCH 13/15] Rmoving wrong import

---
 .../screens/components/switch/overview/SwitchOverviewPage.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
index 721f9e4a86..23100d6f5f 100644
--- a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
+++ b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
@@ -8,7 +8,6 @@ import stacking from "./examples/stacking";
 import Image from "@/common/Image";
 import anatomy from "./images/switch_anatomy.png";
 import Link from "next/link";
-import content from "screens/components/wizard/usage/examples/content";
 
 const sections = [
   {

From 9e8fe6611b4731410a059e24a84fe1946084567f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 9 Apr 2025 11:40:15 +0200
Subject: [PATCH 14/15] New section for  checkbox

---
 .../overview/CheckboxOverviewPage.tsx         | 23 +++++++++++++++++--
 .../overview/examples/labelPosition.ts        | 20 ++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 apps/website/screens/components/checkbox/overview/examples/labelPosition.ts

diff --git a/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx b/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
index ddb60a6d0c..ea9ae4b6e6 100644
--- a/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
+++ b/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
@@ -7,6 +7,7 @@ import stacking from "./examples/stacking";
 import Image from "@/common/Image";
 import anatomy from "./images/checkbox_anatomy.png";
 import Link from "next/link";
+import labelPosition from "./examples/labelPosition";
 
 const sections = [
   {
@@ -55,8 +56,9 @@ const sections = [
         content: (
           <>
             <DxcParagraph>
-              To <strong>improve readability and scalability</strong>, checkboxes can be stacked vertically, especially in forms or
-              settings panels, allowing users to process options more efficiently without excessive eye movement.
+              To <strong>improve readability and scalability</strong>, checkboxes can be stacked vertically, especially
+              in forms or settings panels, allowing users to process options more efficiently without excessive eye
+              movement.
             </DxcParagraph>
             <DxcParagraph>Leave minimum 4px of spacing between vertically stacked checkboxes.</DxcParagraph>
           </>
@@ -78,6 +80,23 @@ const sections = [
       },
     ],
   },
+  {
+    title: "Label position",
+    content: (
+      <>
+        <DxcParagraph>
+          By default, the label is placed <strong>to the left of the checkbox</strong>, but it can also be positioned{" "}
+          <strong>to the right</strong> when needed. Choose the label position that best fits your layout and ensures
+          clear readability and alignment with surrounding elements.
+        </DxcParagraph>
+        <DxcParagraph>
+          We recommend selecting a label placement that maintains a strong visual connection between the checkbox and
+          its description, without disrupting the overall flow of the interface.
+        </DxcParagraph>
+        <Example example={labelPosition} />
+      </>
+    ),
+  },
   {
     title: "Checkbox vs. radio group vs. switch",
     content: (
diff --git a/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts b/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts
new file mode 100644
index 0000000000..060382b0ad
--- /dev/null
+++ b/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts
@@ -0,0 +1,20 @@
+import { DxcCheckbox, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="2rem">
+      <DxcFlex justifyContent="center" gap="var(--spacing-gap-xl)">
+        <DxcCheckbox defaultChecked label="Check all" />
+        <DxcCheckbox label="Check all" labelPosition="after" />
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcCheckbox,
+  DxcInset,
+  DxcFlex,
+};
+
+export default { code, scope };

From 5d3074fbc09c14a6d2683f566af44d45d0b43e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 9 Apr 2025 12:48:37 +0200
Subject: [PATCH 15/15] Switch feedback

---
 .../switch/overview/SwitchOverviewPage.tsx    | 22 ++++++++---------
 packages/lib/src/switch/Switch.tsx            | 24 +++++++------------
 2 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
index 23100d6f5f..ec49dbb0e9 100644
--- a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
+++ b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
@@ -71,8 +71,8 @@ const sections = [
         content: (
           <>
             <DxcParagraph>
-              Used when space is constrained or when only a few switches are present. This layout can save space but
-              should be avoided for long labels or more than two options.
+              Used when space is constrained or when only a few switches are present. This layout can{" "}
+              <strong>save space</strong> but should be avoided for long labels or more than two options.
             </DxcParagraph>
             <DxcParagraph>Horizontally stacked switches maintain a separation of, minimum, 24px.</DxcParagraph>
           </>
@@ -87,8 +87,8 @@ const sections = [
         <DxcParagraph>
           By default, the label is placed <strong>before the switch</strong>, as this position clearly communicates what
           the control is for and improves accessibility. However, it's also possible to position the label{" "}
-          <strong>after the switch</strong> in specific cases—particularly when you want to emphasize the{" "}
-          <strong>current state</strong> of the control (e.g., “On”, “Off”).
+          <strong>after the switch</strong> in specific cases — particularly when you want to emphasize the{" "}
+          <strong>current state</strong> of the control (e.g., "On", "Off").
         </DxcParagraph>
         <DxcParagraph>
           We recommend changing the default label position{" "}
@@ -108,13 +108,13 @@ const sections = [
               <td>
                 <strong>Label before</strong>
               </td>
-              <td>Labels before the switch indicate what the switch is for</td>
+              <td>Improves clarity by describing the setting being controlled. This is the default and recommended position.</td>
             </tr>
             <tr>
               <td>
                 <strong>Label after</strong>
               </td>
-              <td>Labels after the switch indicate the state of the switch</td>
+              <td>Useful in minimalist interfaces or when the switch’s current state needs to be highlighted. Recommended only for specific use cases.</td>
             </tr>
           </tbody>
         </DxcTable>
@@ -183,25 +183,25 @@ const sections = [
     content: (
       <DxcBulletedList>
         <DxcBulletedList.Item>
-          <strong>Use for binary, opposing states:</strong> Switches are ideal when users need to turn a setting{" "}
+          <strong>Use for binary, opposing states:</strong> switches are ideal when users need to turn a setting{" "}
           <strong>on</strong> or <strong>off</strong>, such as enabling notifications or dark mode. Avoid using switches
           for choices that are not immediately clear opposites (use radio buttons instead).
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
-          <strong>Trigger immediate changes:</strong> Switches should take effect <strong>immediately</strong> without
+          <strong>Trigger immediate changes:</strong> switches should take effect <strong>immediately</strong> without
           requiring form submission. Do not pair switches with a submit button or use them for decisions that need
           confirmation.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
-          <strong>Use clear, descriptive labels:</strong> Labels should clarify the effect of toggling the switch. Use
+          <strong>Use clear, descriptive labels:</strong> labels should clarify the effect of toggling the switch. Use
           positive, action-oriented phrasing when possible (e.g., “Enable sound”).
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
-          <strong>Stack vertically for better scannability:</strong> When multiple switches are used together, stack
+          <strong>Stack vertically for better scannability:</strong> when multiple switches are used together, stack
           them vertically to maintain clarity and reduce visual clutter.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
-          <strong>Don't overuse switches:</strong> Too many toggles on one screen can overwhelm users. Group related
+          <strong>Don't overuse switches:</strong> too many toggles on one screen can overwhelm users. Group related
           settings and consider alternatives like grouped checkboxes or forms when appropriate.
         </DxcBulletedList.Item>
       </DxcBulletedList>
diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index c7103a1009..148cd6b581 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -17,21 +17,15 @@ const calculateWidth = (margin: SwitchPropsType["margin"], size: SwitchPropsType
   size === "fillParent"
     ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
     : size && sizes[size];
-
-const getTrackColor = (checked: SwitchPropsType["checked"], disabled: SwitchPropsType["disabled"]): string => {
-  switch (true) {
-    case checked && disabled:
-      return "var(--color-bg-primary-lighter)";
-    case !checked && disabled:
-      return "var(--color-bg-neutral-light)";
-    case checked && !disabled:
-      return "var(--color-bg-primary-strong)";
-    case !checked && !disabled:
-      return "var(--color-bg-neutral-strong)";
-    default:
-      return "";
-  }
-};
+    
+const getTrackColor = (checked: SwitchPropsType["checked"], disabled: SwitchPropsType["disabled"]) =>
+  disabled
+    ? checked
+      ? "var(--color-bg-primary-lighter)"
+      : "var(--color-bg-neutral-light)"
+    : checked
+      ? "var(--color-bg-primary-strong)"
+      : "var(--color-bg-neutral-strong)";
 
 const SwitchContainer = styled.div<{
   disabled: SwitchPropsType["disabled"];