💄(frontend) add visual cross to switch component for negative state

Introduce cross icon to switch component when in disabled/negative
state to provide clearer visual feedback to users.

Improves component usability by making the negative state more
explicitly recognizable through visual indicators.

src/frontend/src/primitives/Switch.tsx

@@ -22,16 +22,15 @@ export const StyledSwitch = styled(RACSwitch, {
       borderRadius: '1.143rem',
       transition: 'all 200ms, outline 200ms',
       _before: {
+        willChange: 'transform',
         content: '""',
         display: 'block',
         margin: '0.125rem',
         width: '1.063rem',
         height: '1.063rem',
         borderRadius: '1.063rem',
-        border: '2px solid',
-        borderColor: 'primary.800',
-        background: 'white',
-        transition: 'opacity 10ms',
+        background: 'primary.800',
+        transition: 'transform 200ms, background-color 200ms',
         transitionDelay: '0ms',
       },
     },
@@ -44,14 +43,29 @@ export const StyledSwitch = styled(RACSwitch, {
       color: 'primary.800',
       fontSize: '0.75rem',
       fontWeight: 'bold',
+      pointerEvents: 'none',
       zIndex: 1,
       opacity: 0,
     },
+    '& .cross': {
+      position: 'absolute',
+      display: 'block',
+      top: '50%',
+      left: '0.375rem',
+      transform: 'translateY(-50%)',
+      color: 'white',
+      fontSize: '0.70rem',
+      fontWeight: 'bold',
+      pointerEvents: 'none',
+      zIndex: 1,
+      opacity: 1,
+      transition: 'opacity 200ms',
+      transitionDelay: '0ms',
+    },
     '&[data-selected] .indicator': {
       borderColor: 'primary.800',
       background: 'primary.800',
       _before: {
-        border: 'none',
         background: 'white',
         transform: 'translateX(100%)',
       },
@@ -61,6 +75,11 @@ export const StyledSwitch = styled(RACSwitch, {
       transition: 'opacity 30ms',
       transitionDelay: '150ms',
     },
+    '&[data-selected] .cross': {
+      opacity: 0,
+      transition: 'opacity 10ms',
+      transitionDelay: '0ms',
+    },
     '&[data-disabled] .indicator': {
       borderColor: 'primary.200',
       background: 'transparent',
@@ -68,6 +87,9 @@ export const StyledSwitch = styled(RACSwitch, {
         background: 'primary.200',
       },
     },
+    '&[data-disabled] .cross': {
+      color: 'primary.500',
+    },
     '&[data-focus-visible] .indicator': {
       outline: '2px solid!',
       outlineColor: 'focusRing!',
@@ -86,7 +108,12 @@ export type SwitchProps = StyledVariantProps<typeof StyledSwitch> &
 export const Switch = ({ children, ...props }: SwitchProps) => (
   <StyledSwitch {...props}>
     <div className="indicator">
-      <span className="checkmark">✓</span>
+      <span className="checkmark" aria-hidden="true">
+        ✓
+      </span>
+      <span className="cross" aria-hidden="true">
+        ✕
+      </span>
     </div>
     {children}
   </StyledSwitch>