CHANGED: Some stuff changed in switch, Radio now is SVG

src/primitive-components/icon-button/icon-button.tsx

@@ -3,14 +3,7 @@
 import { Icon } from '../components';
 import { ButtonLayout } from '../button-layout/button-layout';
 import { IconButtonProps, StateToggleIconType } from './icon-button.types';
-import {
-    forwardRef,
-    MouseEventHandler,
-    useCallback,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 /**
  * Icon button-layout component

src/primitive-components/radio/radio.tsx

@@ -18,12 +18,24 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
             events = useRippleEffect(ripplesRef, setIsActive);
 
         const classes =
-            `m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
+            `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
 
         return (
-            <label {...events} className={classes}>
+            <div {...events} className={classes}>
                 <CheckBoxLayout {...props} ref={ref} type={'radio'} />
                 <span className={'m3 m3-radio-state-layer'} />
+                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
+                    <circle
+                        className={'m3-radio-outline'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                    <circle
+                        className={'m3-radio-state'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                </svg>
                 <RippleArea
                     callback={setIsActive}
                     central={centralRipple}
@@ -31,7 +43,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
                     ref={ripplesRef}
                 />
                 {props.children}
-            </label>
+            </div>
         );
     },
 );

src/primitive-components/switch/switch.tsx

@@ -11,7 +11,7 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 
 export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
     ({ icon, disabled, selected = false, ...props }, ref) => (
-        <div className={'m3 m3-switch-exp'}>
+        <div className={'m3 m3-switch'}>
             <CheckBoxLayout
                 {...props}
                 className={`m3 ${props.className ?? ''}`.trimEnd()}