diff --git a/src/components/List/List.tokens.ts b/src/components/List/List.tokens.ts
index d6a26c756..c191bb29b 100644
--- a/src/components/List/List.tokens.ts
+++ b/src/components/List/List.tokens.ts
@@ -7,14 +7,10 @@ import { Theme } from '../../theme';
 export type ListTokens = DotKeys<typeof menu>;
 export type ListItemTokens = DotKeys<typeof listItem>;
 
-export const getListTokens = (
-  theme: Theme
-): ((path: ListTokens, fn?: (val: string) => any) => string) => {
-  return getComponentTokens(menu, theme);
+export const getListTokens = (theme: Theme) => {
+  return getComponentTokens<ListTokens>(menu, theme);
 };
 
-export const getListItemTokens = (
-  theme: Theme
-): ((path: ListItemTokens, fn?: (val: string) => any) => string) => {
-  return getComponentTokens(listItem, theme);
+export const getListItemTokens = (theme: Theme) => {
+  return getComponentTokens<ListItemTokens>(listItem, theme);
 };
diff --git a/src/components/List/components/ListItemText/ListItemText.style.ts b/src/components/List/components/ListItemText/ListItemText.style.ts
index d89692547..f8d1c59e4 100644
--- a/src/components/List/components/ListItemText/ListItemText.style.ts
+++ b/src/components/List/components/ListItemText/ListItemText.style.ts
@@ -2,6 +2,7 @@ import { SerializedStyles, css } from '@emotion/react';
 import { Theme } from 'index';
 
 import { getListItemTokens } from 'components/List/List.tokens';
+import { generateStylesFromTokens } from 'components/Typography/utils';
 
 export const listItemTextWrapperStyles =
   (isGroupItem?: boolean, isHighlighted?: boolean) =>
@@ -33,3 +34,14 @@ export const listItemTextWrapperStyles =
       }
     `;
   };
+
+export const descriptionStyles =
+  () =>
+  (theme: Theme): SerializedStyles => {
+    const tokens = getListItemTokens(theme);
+
+    return css`
+      ${generateStylesFromTokens(tokens('secondaryText'))};
+      color: ${tokens('textColor.secondary')};
+    `;
+  };
diff --git a/src/components/List/components/ListItemText/ListItemText.tsx b/src/components/List/components/ListItemText/ListItemText.tsx
index 8f6173310..2734c838e 100644
--- a/src/components/List/components/ListItemText/ListItemText.tsx
+++ b/src/components/List/components/ListItemText/ListItemText.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { listItemTextWrapperStyles } from './ListItemText.style';
+import { descriptionStyles, listItemTextWrapperStyles } from './ListItemText.style';
 
 export type ListItemTextProps = {
   description?: string | JSX.Element;
@@ -10,7 +10,7 @@ const ListItemText: FC<ListItemTextProps> = (props) => {
   return (
     <div css={listItemTextWrapperStyles(false, false)}>
       <span>{props.children}</span>
-      {props.description && <p>{props.description}</p>}
+      {props.description && <p css={descriptionStyles()}>{props.description}</p>}
     </div>
   );
 };
diff --git a/src/components/List/stories/ListItem.stories.mdx b/src/components/List/stories/ListItem.stories.mdx
index 9a6bab3d9..8d9e9b4d6 100644
--- a/src/components/List/stories/ListItem.stories.mdx
+++ b/src/components/List/stories/ListItem.stories.mdx
@@ -75,55 +75,87 @@ const MyComponent = () => {
           <>
             <Box mb={'3'}>
               <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
-                <ListItem key={'1'}>
+                <ListItem key={'1'} textValue={'Text Only'}>
+                  <ListItemText>Text only</ListItemText>
+                </ListItem>
+                <ListItem key={'2'} rowSize={'compact'} textValue={'Text Only'}>
+                  <ListItemText>Text only (compact)</ListItemText>
+                </ListItem>
+              </List>
+            </Box>
+            <Box mb={'3'}>
+              <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+                <ListItem key={'3'} textValue={'Text'}>
+                  <ListItemText description={'with Secondary Help Text'}>Text</ListItemText>
+                </ListItem>
+                <ListItem key={'4'} rowSize={'compact'} textValue={'Text'}>
+                  <ListItemText description={'with Secondary Help Text'}>
+                    Text (compact)
+                  </ListItemText>
+                </ListItem>
+              </List>
+            </Box>
+            <Box mb={'3'}>
+              <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+                <ListItem key={'5'}>
                   <ListItemAction>
-                    <Radio isChecked={selectedKeys.has(`1`)} />
+                    <Radio isChecked={selectedKeys.has(`5`)} />
                   </ListItemAction>
                   <ListItemText>Option Radio</ListItemText>
                 </ListItem>
+                <ListItem key={'6'} rowSize={'compact'}>
+                  <ListItemAction>
+                    <Radio isChecked={selectedKeys.has(`6`)} />
+                  </ListItemAction>
+                  <ListItemText>Option Radio (compact)</ListItemText>
+                </ListItem>
               </List>
             </Box>
             <Box mb={'3'}>
               <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
-                <ListItem key={'2'} textValue={'Option Checkbox'}>
+                <ListItem key={'7'} textValue={'Option Checkbox'}>
                   <ListItemAction>
-                    <CheckBox isFilled={false} isChecked={selectedKeys.has(`2`)} />
+                    <CheckBox isFilled={false} isChecked={selectedKeys.has(`7`)} />
                   </ListItemAction>
                   <ListItemText>Option Checkbox</ListItemText>
                 </ListItem>
+                <ListItem key={'8'} rowSize={'compact'} textValue={'Option Checkbox'}>
+                  <ListItemAction>
+                    <CheckBox isFilled={false} isChecked={selectedKeys.has(`8`)} />
+                  </ListItemAction>
+                  <ListItemText>Option Checkbox (compact)</ListItemText>
+                </ListItem>
               </List>
             </Box>
             <Box mb={'3'}>
               <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
-                <ListItem key={'3'} textValue={'Option Switch'}>
+                <ListItem key={'9'} textValue={'Option Switch'}>
                   <ListItemText>Option Switch</ListItemText>
                   <ListItemAction>
-                    <Switch isChecked={selectedKeys.has(`3`)} onChange={() => {}} />
+                    <Switch isChecked={selectedKeys.has(`9`)} onChange={() => {}} />
+                  </ListItemAction>
+                </ListItem>
+                <ListItem key={'10'} rowSize={'compact'} textValue={'Option Switch'}>
+                  <ListItemText>Option Switch (compact)</ListItemText>
+                  <ListItemAction>
+                    <Switch isChecked={selectedKeys.has(`10`)} onChange={() => {}} />
                   </ListItemAction>
                 </ListItem>
               </List>
             </Box>
             <Box mb={'3'}>
-              <List label={'list'} selectedKeys={selectedKeys}>
-                <ListItem key={'4'} textValue={'Option Icon/Avatar'}>
+              <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+                <ListItem key={'11'} textValue={'Option Icon/Avatar'}>
                   <ListItemAction>
                     <Avatar size={1} color={'blue'} iconName={'user'} />
                   </ListItemAction>
                   <ListItemText>Option Icon/Avatar</ListItemText>
                 </ListItem>
-              </List>
-            </Box>
-            <Box mb={'3'}>
-              <List label={'list'} selectedKeys={selectedKeys}>
-                <ListItem key={'5'} textValue={'Text Only'}>
-                  <ListItemText description={'Secondary Help Text'}>Text only</ListItemText>
-                </ListItem>
-              </List>
-            </Box>
-            <Box mb={'3'}>
-              <List label={'list'} selectedKeys={selectedKeys}>
-                <ListItem key={'6'} rowSize={'compact'}>
-                  <ListItemText>Compact size item</ListItemText>
+                <ListItem key={'12'} rowSize={'compact'} textValue={'Option Icon/Avatar'}>
+                  <ListItemAction>
+                    <Avatar size={1} color={'blue'} iconName={'user'} />
+                  </ListItemAction>
+                  <ListItemText>Option Icon/Avatar (compact)</ListItemText>
                 </ListItem>
               </List>
             </Box>
@@ -134,6 +166,50 @@ const MyComponent = () => {
   </Story>
 </Preview>
 
+### Disabled ListItem
+
+<Preview>
+  <Story name="Disabled ListItem">
+    <Function>
+      {() => {
+        return (
+          <Box mb={'3'}>
+            <List label={'list'} disabledKeys={['1', '2', '3', '4', '5', '6']}>
+              <ListItem key={'1'} textValue={'Text Only'}>
+                <ListItemText>This text option is disabled</ListItemText>
+              </ListItem>
+              <ListItem key={'3'} textValue={'Option Switch'}>
+                <ListItemText>This Switch Option is disabled</ListItemText>
+                <ListItemAction>
+                  <Switch isDisabled />
+                </ListItemAction>
+              </ListItem>
+              <ListItem key={'4'} rowSize={'compact'} textValue={'Option Icon/Avatar'}>
+                <ListItemAction>
+                  <Avatar size={1} color={'blue'} iconName={'user'} />
+                </ListItemAction>
+                <ListItemText>This Avatar Option is disabled</ListItemText>
+              </ListItem>
+              <ListItem key={'5'} textValue={'Option Checkbox'}>
+                <ListItemAction>
+                  <CheckBox isDisabled isFilled={false} />
+                </ListItemAction>
+                <ListItemText>This Checkbox Option is disabled</ListItemText>
+              </ListItem>
+              <ListItem key={'6'}>
+                <ListItemAction>
+                  <Radio isDisabled />
+                </ListItemAction>
+                <ListItemText>This Radio Option is disabled</ListItemText>
+              </ListItem>
+            </List>
+          </Box>
+        );
+      }}
+    </Function>
+  </Story>
+</Preview>
+
 ### References
 
 All references for a complete `<List>` with all component mentioned throughout the `<List>` section.
diff --git a/src/components/List/stories/__snapshots__/ListItem.stories.storyshot b/src/components/List/stories/__snapshots__/ListItem.stories.storyshot
index f9c491c96..ef55778dd 100644
--- a/src/components/List/stories/__snapshots__/ListItem.stories.storyshot
+++ b/src/components/List/stories/__snapshots__/ListItem.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
+exports[`Storyshots Design System/List/ListItem Disabled ListItem 1`] = `
 .emotion-0 {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -41,8 +41,8 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
 
 .emotion-5 {
   background-color: rgba(84,94,255,0);
-  opacity: 1;
-  cursor: initial;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .emotion-5>div {
@@ -86,8 +86,7 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
 }
 
 .emotion-5[role='option']:hover {
-  background-color: rgba(84,94,255,0.06);
-  cursor: pointer;
+  cursor: initial;
 }
 
 .emotion-5[data-focus-visible] {
@@ -112,136 +111,6 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
 }
 
 .emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-7 {
-  position: relative;
-  border-radius: 50%;
-  width: 2.25rem;
-  height: 2.25rem;
-  color: #175bf5;
-  border: 0;
-  opacity: 1;
-  cursor: pointer;
-  margin: 0;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  outline: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.emotion-8 {
-  top: 0;
-  left: 0;
-  width: 100%;
-  cursor: inherit;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  z-index: 1;
-  position: absolute;
-  opacity: 0;
-}
-
-.emotion-8:disabled {
-  cursor: default;
-}
-
-.emotion-9 {
-  position: relative;
-  border-radius: 50%;
-  width: 1.5rem;
-  height: 1.5rem;
-  -webkit-transition: box-shadow 0.3s ease;
-  transition: box-shadow 0.3s ease;
-}
-
-.emotion-10 {
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-  border-radius: 50%;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  position: absolute;
-}
-
-.emotion-10:before {
-  content: '';
-  display: inline-block;
-  box-sizing: border-box;
-  margin: 0.125rem 0.75rem 0.125rem 0.125rem;
-  border: solid 2px #b7c3d8;
-  border-radius: 50%;
-  width: 1.25rem;
-  height: 1.25rem;
-  vertical-align: top;
-  -webkit-transition: border-color 0.2s;
-  transition: border-color 0.2s;
-}
-
-.emotion-10:after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0.0625rem;
-  left: 0.0625rem;
-  border-radius: 50%;
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: #b7c3d8;
-  -webkit-transform: translate(5px, 5px) scale(0);
-  -moz-transform: translate(5px, 5px) scale(0);
-  -ms-transform: translate(5px, 5px) scale(0);
-  transform: translate(5px, 5px) scale(0);
-  -webkit-transition: -webkit-transform 0.2s;
-  transition: transform 0.2s;
-}
-
-.emotion-11 {
-  position: absolute;
-  border-radius: 50%;
-  width: 1.5rem;
-  height: 1.5rem;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-}
-
-.emotion-12 {
   color: #1B214F;
   font-weight: initial;
   white-space: nowrap;
@@ -264,116 +133,25 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
   justify-content: center;
 }
 
-.emotion-12 strong {
+.emotion-6 strong {
   font-weight: bold;
 }
 
-.emotion-12 span {
+.emotion-6 span {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.emotion-18 {
-  opacity: 1;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-19 {
-  border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 3rem;
-  height: 3rem;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-}
-
-.emotion-19:before {
-  display: none;
-  border-radius: 100%;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  content: ' ';
-  width: 3rem;
-  height: 3rem;
-  position: absolute;
-}
-
-.emotion-19:hover:before {
-  display: block;
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.emotion-20 {
-  border: 0;
-  border-radius: 0.125rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  position: absolute;
-  opacity: 0;
-}
-
-.emotion-20+label {
-  position: relative;
-  cursor: pointer;
-  padding: 0;
-}
-
-.emotion-20+label:before {
-  content: '';
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  display: inline-block;
-  vertical-align: text-top;
-  width: 1.5rem;
-  height: 1.5rem;
-  background: inherit;
-  box-shadow: inset 0px 0px 0px 0.125rem #b7c3d8;
-  border-radius: 0.25rem;
-}
-
-.emotion-20:disabled+label {
-  cursor: not-allowed;
-}
-
-.emotion-21 span {
-  padding: 0;
-}
-
-.emotion-21 svg {
-  position: absolute;
-  top: 0;
-  display: none;
-}
-
-.emotion-22 {
-  padding: 0.125rem;
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -384,17 +162,7 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
   justify-content: center;
 }
 
-.emotion-23 {
-  fill: white;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.emotion-23 path {
-  fill: white;
-}
-
-.emotion-31 {
+.emotion-10 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -404,8 +172,8 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
   display: flex;
 }
 
-.emotion-31 .react-switch-handle {
-  cursor: unset!important;
+.emotion-10 .react-switch-handle {
+  cursor: not-allowed!important;
   border: 2px solid #b7c3d8!important;
   box-sizing: border-box!important;
   -webkit-transform: translateX(0)!important;
@@ -414,39 +182,110 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
   transform: translateX(0)!important;
 }
 
-.emotion-31 .react-switch-handle:hover {
-  box-shadow: rgba(14,14,23,0.1) 0 0 0 5px;
-  background: #dbe1eb!important;
+.emotion-10 .react-switch-handle:hover {
+  box-shadow: 0;
+  background: !important;
 }
 
-.emotion-31 .react-switch-bg {
-  cursor: unset!important;
+.emotion-10 .react-switch-bg {
+  cursor: not-allowed!important;
   margin-right: 0!important;
   margin-left: 0!important;
 }
 
-.emotion-31 .react-switch-bg:hover~.react-switch-handle {
-  box-shadow: rgba(14,14,23,0.1) 0 0 0 5px;
-  background: #dbe1eb!important;
+.emotion-10 .react-switch-bg:hover~.react-switch-handle {
+  box-shadow: 0;
+  background: !important;
 }
 
-.emotion-37 {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 6.25rem;
-  border: 0.0625rem solid;
-  border-color: #b9cdfc;
-  box-sizing: border-box;
-  background-color: #e7eefe;
-  color: #1249C4;
-  overflow: hidden;
+.emotion-11 {
+  background-color: rgba(84,94,255,0);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emotion-11>div {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+}
+
+.emotion-11 span[role='presentation'] {
+  padding: 0 0.75rem;
+  min-height: 2.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+  font-weight: 700;
+}
+
+.emotion-11[role='option'] {
+  padding: 0 0.75rem;
+  min-height: 2.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.75rem;
+}
+
+.emotion-11[role='option']:hover {
+  cursor: initial;
+}
+
+.emotion-11[data-focus-visible] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-11[aria-selected='true'] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-11[aria-selected='true']>div {
+  color: #1552DD;
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+}
+
+.emotion-11[aria-selected='true'][data-focus-visible] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-13 {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 6.25rem;
+  border: 0.0625rem solid;
+  border-color: #b9cdfc;
+  box-sizing: border-box;
+  background-color: #e7eefe;
+  color: #1249C4;
+  overflow: hidden;
   position: relative;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -470,39 +309,44 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
   letter-spacing: 0.00625rem;
 }
 
-.emotion-37 img {
+.emotion-13 img {
   border-radius: 6.25rem;
   width: 100%;
   height: 100%;
 }
 
-.emotion-39 {
+.emotion-14 {
+  padding: 0.125rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-15 {
   fill: #1249C4;
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-39 path {
+.emotion-15 path {
   fill: #1249C4;
 }
 
-.emotion-49 {
-  background-color: rgba(84,94,255,0);
-  opacity: 1;
-  cursor: initial;
-}
-
-.emotion-49>div {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.015625rem;
-}
-
-.emotion-49 span[role='presentation'] {
-  padding: 0 0.75rem;
-  min-height: 2.5rem;
+.emotion-19 {
+  opacity: 0.3;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -511,59 +355,1243 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.015625rem;
-  font-weight: 700;
 }
 
-.emotion-49[role='option'] {
-  padding: 0 0.75rem;
-  min-height: 2.5rem;
+.emotion-20 {
+  border-radius: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0.75rem;
+  width: 3rem;
+  height: 3rem;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
 }
 
-.emotion-49[role='option']:hover {
-  background-color: rgba(84,94,255,0.06);
+.emotion-20:before {
+  display: none;
+  border-radius: 100%;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  content: ' ';
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+}
+
+.emotion-21 {
+  border: 0;
+  border-radius: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  position: absolute;
+  opacity: 0;
+}
+
+.emotion-21+label {
+  position: relative;
   cursor: pointer;
+  padding: 0;
 }
 
-.emotion-49[data-focus-visible] {
-  background-color: rgba(84,94,255,0.06);
+.emotion-21+label:before {
+  content: '';
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  display: inline-block;
+  vertical-align: text-top;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: inherit;
+  box-shadow: inset 0px 0px 0px 0.125rem #b7c3d8;
+  border-radius: 0.25rem;
 }
 
-.emotion-49[aria-selected='true'] {
-  background-color: rgba(84,94,255,0.06);
+.emotion-21:disabled+label {
+  cursor: not-allowed;
 }
 
-.emotion-49[aria-selected='true']>div {
-  color: #1552DD;
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.015625rem;
+.emotion-22 span {
+  padding: 0;
 }
 
-.emotion-49[aria-selected='true'][data-focus-visible] {
-  background-color: rgba(84,94,255,0.06);
+.emotion-22 svg {
+  position: absolute;
+  top: 0;
+  display: none;
 }
 
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
+.emotion-24 {
+  fill: white;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.emotion-24 path {
+  fill: white;
+}
+
+.emotion-28 {
+  position: relative;
+  border-radius: 50%;
+  width: 2.25rem;
+  height: 2.25rem;
+  color: #175bf5;
+  border: 0;
+  opacity: 0.5;
+  cursor: pointer;
+  margin: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  outline: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.emotion-29 {
+  top: 0;
+  left: 0;
+  width: 100%;
+  cursor: inherit;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  position: absolute;
+  opacity: 0;
+}
+
+.emotion-29:disabled {
+  cursor: default;
+}
+
+.emotion-30 {
+  position: relative;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  -webkit-transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s ease;
+}
+
+.emotion-31 {
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: absolute;
+}
+
+.emotion-31:before {
+  content: '';
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0.125rem 0.75rem 0.125rem 0.125rem;
+  border: solid 2px #c3cddf;
+  border-radius: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: top;
+  -webkit-transition: border-color 0.2s;
+  transition: border-color 0.2s;
+}
+
+.emotion-31:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0.0625rem;
+  left: 0.0625rem;
+  border-radius: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: #c3cddf;
+  -webkit-transform: translate(5px, 5px) scale(0);
+  -moz-transform: translate(5px, 5px) scale(0);
+  -ms-transform: translate(5px, 5px) scale(0);
+  transform: translate(5px, 5px) scale(0);
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+}
+
+.emotion-32 {
+  position: absolute;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+<div
+  className="emotion-0"
+>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div
+        className="emotion-3"
+      >
+        <div
+          data-testid="ictinus_list"
+        >
+          <div
+            style={
+              Object {
+                "height": "100%",
+              }
+            }
+          >
+            <ul
+              aria-labelledby="react-aria-generated-id"
+              className="emotion-4"
+              id="react-aria-generated-id"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyDownCapture={[Function]}
+              onMouseDown={[Function]}
+              onScroll={[Function]}
+              role="listbox"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "height": "100%",
+                  "listStyle": "none",
+                  "overflowY": "auto",
+                  "padding": 0,
+                  "position": "relative",
+                }
+              }
+              tabIndex={0}
+            >
+              <li
+                aria-disabled={true}
+                aria-selected={false}
+                className="emotion-5 "
+                data-key="1"
+                data-testid="ictinus_list_item_1"
+                id="react-aria-generated-id-option-1"
+                onBlur={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+              >
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    This text option is disabled
+                  </span>
+                </div>
+              </li>
+              <li
+                aria-disabled={true}
+                aria-selected={false}
+                className="emotion-5 "
+                data-key="3"
+                data-testid="ictinus_list_item_3"
+                id="react-aria-generated-id-option-3"
+                onBlur={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+              >
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    This Switch Option is disabled
+                  </span>
+                </div>
+                <div
+                  className="emotion-9"
+                >
+                  <div
+                    className="emotion-10"
+                  >
+                    <div
+                      style={
+                        Object {
+                          "MozTransition": "opacity 0.25s",
+                          "MozUserSelect": "none",
+                          "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
+                          "WebkitTransition": "opacity 0.25s",
+                          "WebkitUserSelect": "none",
+                          "borderRadius": 4,
+                          "direction": "ltr",
+                          "display": "inline-block",
+                          "msUserSelect": "none",
+                          "opacity": 0.5,
+                          "position": "relative",
+                          "textAlign": "left",
+                          "touchAction": "none",
+                          "transition": "opacity 0.25s",
+                          "userSelect": "none",
+                        }
+                      }
+                    >
+                      <div
+                        className="react-switch-bg"
+                        onClick={null}
+                        onMouseDown={[Function]}
+                        style={
+                          Object {
+                            "MozTransition": "background 0.25s",
+                            "WebkitTransition": "background 0.25s",
+                            "background": "#dbe1eb",
+                            "borderRadius": 4,
+                            "cursor": "default",
+                            "height": 8,
+                            "margin": 6,
+                            "position": "relative",
+                            "transition": "background 0.25s",
+                            "width": 36,
+                          }
+                        }
+                      />
+                      <div
+                        className="react-switch-handle"
+                        onClick={[Function]}
+                        onMouseDown={null}
+                        onTouchCancel={null}
+                        onTouchEnd={null}
+                        onTouchMove={null}
+                        onTouchStart={null}
+                        style={
+                          Object {
+                            "MozTransition": "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
+                            "WebkitTransition": "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
+                            "background": "#f3f5f8",
+                            "border": 0,
+                            "borderRadius": "50%",
+                            "boxShadow": null,
+                            "cursor": "default",
+                            "display": "inline-block",
+                            "height": 20,
+                            "outline": 0,
+                            "position": "absolute",
+                            "top": 0,
+                            "transform": "translateX(0px)",
+                            "transition": "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
+                            "width": 20,
+                          }
+                        }
+                      />
+                      <input
+                        data-testid="switch"
+                        disabled={true}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyUp={[Function]}
+                        role="switch"
+                        style={
+                          Object {
+                            "border": 0,
+                            "clip": "rect(0 0 0 0)",
+                            "height": 1,
+                            "margin": -1,
+                            "overflow": "hidden",
+                            "padding": 0,
+                            "position": "absolute",
+                            "width": 1,
+                          }
+                        }
+                        type="checkbox"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <li
+                aria-disabled={true}
+                aria-selected={false}
+                className="emotion-11 "
+                data-key="4"
+                data-testid="ictinus_list_item_4"
+                id="react-aria-generated-id-option-4"
+                onBlur={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+              >
+                <div
+                  className="emotion-9"
+                >
+                  <div
+                    className="emotion-13"
+                    data-testid="_avatar"
+                  >
+                    <span
+                      className="emotion-14"
+                      onClick={[Function]}
+                    >
+                      <span
+                        className="emotion-15"
+                      />
+                    </span>
+                  </div>
+                </div>
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    This Avatar Option is disabled
+                  </span>
+                </div>
+              </li>
+              <li
+                aria-disabled={true}
+                aria-selected={false}
+                className="emotion-5 "
+                data-key="5"
+                data-testid="ictinus_list_item_5"
+                id="react-aria-generated-id-option-5"
+                onBlur={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+              >
+                <div
+                  className="emotion-9"
+                >
+                  <span
+                    className="emotion-19"
+                  >
+                    <span
+                      className="emotion-20"
+                      onClick={[Function]}
+                    >
+                      <input
+                        checked={false}
+                        className="emotion-21"
+                        data-testid="checkbox"
+                        disabled={true}
+                        id="styled-checkbox-_00"
+                        onChange={[Function]}
+                        onClick={[Function]}
+                        type="checkbox"
+                      />
+                      <label
+                        className="emotion-22"
+                        htmlFor="styled-checkbox-_00"
+                      >
+                        <span
+                          className="emotion-14"
+                          onClick={[Function]}
+                        >
+                          <span
+                            className="emotion-24"
+                          />
+                        </span>
+                      </label>
+                    </span>
+                  </span>
+                </div>
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    This Checkbox Option is disabled
+                  </span>
+                </div>
+              </li>
+              <li
+                aria-disabled={true}
+                aria-selected={false}
+                className="emotion-5 "
+                data-key="6"
+                data-testid="ictinus_list_item_6"
+                id="react-aria-generated-id-option-6"
+                onBlur={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+              >
+                <div
+                  className="emotion-9"
+                >
+                  <span
+                    className="emotion-28"
+                    data-testid="radio-input"
+                  >
+                    <input
+                      checked={false}
+                      className="emotion-29"
+                      disabled={true}
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      required={false}
+                      type="radio"
+                      value="on"
+                    />
+                    <span
+                      className="emotion-30"
+                    >
+                      <span
+                        className="emotion-31"
+                      />
+                      <span
+                        className="emotion-32"
+                      />
+                    </span>
+                  </span>
+                </div>
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    This Radio Option is disabled
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
+.emotion-0 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+  padding: 0.25rem;
+}
+
+.emotion-1 {
+  margin: 1rem;
+}
+
+.emotion-2 {
+  margin-bottom: 0.25rem;
+}
+
+.emotion-3 {
+  border: 0.0625rem solid #E7E8FF;
+  border-radius: 0.25rem;
+  width: undefinedpx;
+  box-shadow: 0rem 0.25rem 0.5rem 0rem #10306612;
+}
+
+.emotion-4 {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-radius: 0.25rem;
+  width: 100%;
+  height: auto;
+  overflow: auto;
+  overflow-x: hidden;
+  background: #ffffff;
+}
+
+.emotion-5 {
+  background-color: rgba(84,94,255,0);
+  opacity: 1;
+  cursor: initial;
+}
+
+.emotion-5>div {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+}
+
+.emotion-5 span[role='presentation'] {
+  padding: 0 0.75rem;
+  min-height: 3.25rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+  font-weight: 700;
+}
+
+.emotion-5[role='option'] {
+  padding: 0 0.75rem;
+  min-height: 3.25rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.75rem;
+}
+
+.emotion-5[role='option']:hover {
+  background-color: rgba(84,94,255,0.06);
+  cursor: pointer;
+}
+
+.emotion-5[data-focus-visible] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-5[aria-selected='true'] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-5[aria-selected='true']>div {
+  color: #1552DD;
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+}
+
+.emotion-5[aria-selected='true'][data-focus-visible] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-6 {
+  color: #1B214F;
+  font-weight: initial;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: inherit;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-6 strong {
+  font-weight: bold;
+}
+
+.emotion-6 span {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emotion-7 {
+  background-color: rgba(84,94,255,0);
+  opacity: 1;
+  cursor: initial;
+}
+
+.emotion-7>div {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+}
+
+.emotion-7 span[role='presentation'] {
+  padding: 0 0.75rem;
+  min-height: 2.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+  font-weight: 700;
+}
+
+.emotion-7[role='option'] {
+  padding: 0 0.75rem;
+  min-height: 2.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.75rem;
+}
+
+.emotion-7[role='option']:hover {
+  background-color: rgba(84,94,255,0.06);
+  cursor: pointer;
+}
+
+.emotion-7[data-focus-visible] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-7[aria-selected='true'] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-7[aria-selected='true']>div {
+  color: #1552DD;
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+}
+
+.emotion-7[aria-selected='true'][data-focus-visible] {
+  background-color: rgba(84,94,255,0.06);
+}
+
+.emotion-14 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+  color: #686BB3;
+}
+
+.emotion-22 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-23 {
+  position: relative;
+  border-radius: 50%;
+  width: 2.25rem;
+  height: 2.25rem;
+  color: #175bf5;
+  border: 0;
+  opacity: 1;
+  cursor: pointer;
+  margin: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  outline: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.emotion-24 {
+  top: 0;
+  left: 0;
+  width: 100%;
+  cursor: inherit;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  position: absolute;
+  opacity: 0;
+}
+
+.emotion-24:disabled {
+  cursor: default;
+}
+
+.emotion-25 {
+  position: relative;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  -webkit-transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s ease;
+}
+
+.emotion-26 {
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: absolute;
+}
+
+.emotion-26:before {
+  content: '';
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0.125rem 0.75rem 0.125rem 0.125rem;
+  border: solid 2px #b7c3d8;
+  border-radius: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: top;
+  -webkit-transition: border-color 0.2s;
+  transition: border-color 0.2s;
+}
+
+.emotion-26:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0.0625rem;
+  left: 0.0625rem;
+  border-radius: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: #b7c3d8;
+  -webkit-transform: translate(5px, 5px) scale(0);
+  -moz-transform: translate(5px, 5px) scale(0);
+  -ms-transform: translate(5px, 5px) scale(0);
+  transform: translate(5px, 5px) scale(0);
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+}
+
+.emotion-27 {
+  position: absolute;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.emotion-42 {
+  opacity: 1;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-43 {
+  border-radius: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.emotion-43:before {
+  display: none;
+  border-radius: 100%;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  content: ' ';
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+}
+
+.emotion-43:hover:before {
+  display: block;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.emotion-44 {
+  border: 0;
+  border-radius: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  position: absolute;
+  opacity: 0;
+}
+
+.emotion-44+label {
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+}
+
+.emotion-44+label:before {
+  content: '';
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  display: inline-block;
+  vertical-align: text-top;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: inherit;
+  box-shadow: inset 0px 0px 0px 0.125rem #b7c3d8;
+  border-radius: 0.25rem;
+}
+
+.emotion-44:disabled+label {
+  cursor: not-allowed;
+}
+
+.emotion-45 span {
+  padding: 0;
+}
+
+.emotion-45 svg {
+  position: absolute;
+  top: 0;
+  display: none;
+}
+
+.emotion-46 {
+  padding: 0.125rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-47 {
+  fill: white;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.emotion-47 path {
+  fill: white;
+}
+
+.emotion-64 {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-64 .react-switch-handle {
+  cursor: unset!important;
+  border: 2px solid #b7c3d8!important;
+  box-sizing: border-box!important;
+  -webkit-transform: translateX(0)!important;
+  -moz-transform: translateX(0)!important;
+  -ms-transform: translateX(0)!important;
+  transform: translateX(0)!important;
+}
+
+.emotion-64 .react-switch-handle:hover {
+  box-shadow: rgba(14,14,23,0.1) 0 0 0 5px;
+  background: #dbe1eb!important;
+}
+
+.emotion-64 .react-switch-bg {
+  cursor: unset!important;
+  margin-right: 0!important;
+  margin-left: 0!important;
+}
+
+.emotion-64 .react-switch-bg:hover~.react-switch-handle {
+  box-shadow: rgba(14,14,23,0.1) 0 0 0 5px;
+  background: #dbe1eb!important;
+}
+
+.emotion-74 {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 6.25rem;
+  border: 0.0625rem solid;
+  border-color: #b9cdfc;
+  box-sizing: border-box;
+  background-color: #e7eefe;
+  color: #1249C4;
+  overflow: hidden;
+  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 0.875rem;
+  font-size: 0.625rem;
+  letter-spacing: 0.00625rem;
+}
+
+.emotion-74 img {
+  border-radius: 6.25rem;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-76 {
+  fill: #1249C4;
+  width: 1rem;
+  height: 1rem;
+}
+
+.emotion-76 path {
+  fill: #1249C4;
+}
+
+<div
+  className="emotion-0"
+>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div
+        className="emotion-3"
+      >
+        <div
+          data-testid="ictinus_list"
+        >
+          <div
+            style={
+              Object {
+                "height": "100%",
+              }
+            }
+          >
+            <ul
+              aria-labelledby="react-aria-generated-id"
+              className="emotion-4"
+              id="react-aria-generated-id"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyDownCapture={[Function]}
+              onMouseDown={[Function]}
+              onScroll={[Function]}
+              role="listbox"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "height": "100%",
+                  "listStyle": "none",
+                  "overflowY": "auto",
+                  "padding": 0,
+                  "position": "relative",
+                }
+              }
+              tabIndex={0}
+            >
+              <li
+                aria-selected={false}
+                className="emotion-5 "
+                data-key="1"
+                data-testid="ictinus_list_item_1"
+                id="react-aria-generated-id-option-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragStart={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchCancel={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+                tabIndex={-1}
+              >
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    Text only
+                  </span>
+                </div>
+              </li>
+              <li
+                aria-selected={false}
+                className="emotion-7 "
+                data-key="2"
+                data-testid="ictinus_list_item_2"
+                id="react-aria-generated-id-option-2"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragStart={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchCancel={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+                tabIndex={-1}
+              >
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    Text only (compact)
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       className="emotion-2"
     >
@@ -607,9 +1635,46 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
               <li
                 aria-selected={false}
                 className="emotion-5 "
-                data-key="1"
-                data-testid="ictinus_list_item_1"
-                id="react-aria-generated-id-option-1"
+                data-key="3"
+                data-testid="ictinus_list_item_3"
+                id="react-aria-generated-id-option-3"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragStart={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchCancel={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+                tabIndex={-1}
+              >
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    Text
+                  </span>
+                  <p
+                    className="emotion-14"
+                  >
+                    with Secondary Help Text
+                  </p>
+                </div>
+              </li>
+              <li
+                aria-selected={false}
+                className="emotion-7 "
+                data-key="4"
+                data-testid="ictinus_list_item_4"
+                id="react-aria-generated-id-option-4"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -630,14 +1695,96 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
               >
                 <div
                   className="emotion-6"
+                >
+                  <span>
+                    Text (compact)
+                  </span>
+                  <p
+                    className="emotion-14"
+                  >
+                    with Secondary Help Text
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="emotion-2"
+    >
+      <div
+        className="emotion-3"
+      >
+        <div
+          data-testid="ictinus_list"
+        >
+          <div
+            style={
+              Object {
+                "height": "100%",
+              }
+            }
+          >
+            <ul
+              aria-labelledby="react-aria-generated-id"
+              className="emotion-4"
+              id="react-aria-generated-id"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyDownCapture={[Function]}
+              onMouseDown={[Function]}
+              onScroll={[Function]}
+              role="listbox"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "height": "100%",
+                  "listStyle": "none",
+                  "overflowY": "auto",
+                  "padding": 0,
+                  "position": "relative",
+                }
+              }
+              tabIndex={0}
+            >
+              <li
+                aria-selected={false}
+                className="emotion-5 "
+                data-key="5"
+                data-testid="ictinus_list_item_5"
+                id="react-aria-generated-id-option-5"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragStart={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchCancel={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+                tabIndex={-1}
+              >
+                <div
+                  className="emotion-22"
                 >
                   <span
-                    className="emotion-7"
+                    className="emotion-23"
                     data-testid="radio-input"
                   >
                     <input
                       checked={false}
-                      className="emotion-8"
+                      className="emotion-24"
                       disabled={false}
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -649,25 +1796,89 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                       value="on"
                     />
                     <span
-                      className="emotion-9"
+                      className="emotion-25"
                     >
                       <span
-                        className="emotion-10"
+                        className="emotion-26"
                       />
                       <span
-                        className="emotion-11"
+                        className="emotion-27"
                       />
                     </span>
                   </span>
                 </div>
                 <div
-                  className="emotion-12"
+                  className="emotion-6"
                 >
                   <span>
                     Option Radio
                   </span>
                 </div>
               </li>
+              <li
+                aria-selected={false}
+                className="emotion-7 "
+                data-key="6"
+                data-testid="ictinus_list_item_6"
+                id="react-aria-generated-id-option-6"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragStart={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchCancel={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+                tabIndex={-1}
+              >
+                <div
+                  className="emotion-22"
+                >
+                  <span
+                    className="emotion-23"
+                    data-testid="radio-input"
+                  >
+                    <input
+                      checked={false}
+                      className="emotion-24"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      required={false}
+                      type="radio"
+                      value="on"
+                    />
+                    <span
+                      className="emotion-25"
+                    >
+                      <span
+                        className="emotion-26"
+                      />
+                      <span
+                        className="emotion-27"
+                      />
+                    </span>
+                  </span>
+                </div>
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    Option Radio (compact)
+                  </span>
+                </div>
+              </li>
             </ul>
           </div>
         </div>
@@ -715,10 +1926,78 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
             >
               <li
                 aria-selected={false}
-                className="emotion-5 "
-                data-key="2"
-                data-testid="ictinus_list_item_2"
-                id="react-aria-generated-id-option-2"
+                className="emotion-5 "
+                data-key="7"
+                data-testid="ictinus_list_item_7"
+                id="react-aria-generated-id-option-7"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragStart={[Function]}
+                onDragStartCapture={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchCancel={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                role="option"
+                tabIndex={-1}
+              >
+                <div
+                  className="emotion-22"
+                >
+                  <span
+                    className="emotion-42"
+                  >
+                    <span
+                      className="emotion-43"
+                      onClick={[Function]}
+                    >
+                      <input
+                        checked={false}
+                        className="emotion-44"
+                        data-testid="checkbox"
+                        disabled={false}
+                        id="styled-checkbox-_00"
+                        onChange={[Function]}
+                        onClick={[Function]}
+                        type="checkbox"
+                      />
+                      <label
+                        className="emotion-45"
+                        htmlFor="styled-checkbox-_00"
+                      >
+                        <span
+                          className="emotion-46"
+                          onClick={[Function]}
+                        >
+                          <span
+                            className="emotion-47"
+                          />
+                        </span>
+                      </label>
+                    </span>
+                  </span>
+                </div>
+                <div
+                  className="emotion-6"
+                >
+                  <span>
+                    Option Checkbox
+                  </span>
+                </div>
+              </li>
+              <li
+                aria-selected={false}
+                className="emotion-7 "
+                data-key="8"
+                data-testid="ictinus_list_item_8"
+                id="react-aria-generated-id-option-8"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -738,18 +2017,18 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                 tabIndex={-1}
               >
                 <div
-                  className="emotion-6"
+                  className="emotion-22"
                 >
                   <span
-                    className="emotion-18"
+                    className="emotion-42"
                   >
                     <span
-                      className="emotion-19"
+                      className="emotion-43"
                       onClick={[Function]}
                     >
                       <input
                         checked={false}
-                        className="emotion-20"
+                        className="emotion-44"
                         data-testid="checkbox"
                         disabled={false}
                         id="styled-checkbox-_00"
@@ -758,15 +2037,15 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                         type="checkbox"
                       />
                       <label
-                        className="emotion-21"
+                        className="emotion-45"
                         htmlFor="styled-checkbox-_00"
                       >
                         <span
-                          className="emotion-22"
+                          className="emotion-46"
                           onClick={[Function]}
                         >
                           <span
-                            className="emotion-23"
+                            className="emotion-47"
                           />
                         </span>
                       </label>
@@ -774,10 +2053,10 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                   </span>
                 </div>
                 <div
-                  className="emotion-12"
+                  className="emotion-6"
                 >
                   <span>
-                    Option Checkbox
+                    Option Checkbox (compact)
                   </span>
                 </div>
               </li>
@@ -829,9 +2108,9 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
               <li
                 aria-selected={false}
                 className="emotion-5 "
-                data-key="3"
-                data-testid="ictinus_list_item_3"
-                id="react-aria-generated-id-option-3"
+                data-key="9"
+                data-testid="ictinus_list_item_9"
+                id="react-aria-generated-id-option-9"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -851,17 +2130,17 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                 tabIndex={-1}
               >
                 <div
-                  className="emotion-12"
+                  className="emotion-6"
                 >
                   <span>
                     Option Switch
                   </span>
                 </div>
                 <div
-                  className="emotion-6"
+                  className="emotion-22"
                 >
                   <div
-                    className="emotion-31"
+                    className="emotion-64"
                   >
                     <div
                       style={
@@ -959,57 +2238,12 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                   </div>
                 </div>
               </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="emotion-2"
-    >
-      <div
-        className="emotion-3"
-      >
-        <div
-          data-testid="ictinus_list"
-        >
-          <div
-            style={
-              Object {
-                "height": "100%",
-              }
-            }
-          >
-            <ul
-              aria-labelledby="react-aria-generated-id"
-              className="emotion-4"
-              id="react-aria-generated-id"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyDownCapture={[Function]}
-              onMouseDown={[Function]}
-              onScroll={[Function]}
-              role="listbox"
-              style={
-                Object {
-                  "display": "flex",
-                  "flexDirection": "column",
-                  "height": "100%",
-                  "listStyle": "none",
-                  "overflowY": "auto",
-                  "padding": 0,
-                  "position": "relative",
-                }
-              }
-              tabIndex={0}
-            >
               <li
                 aria-selected={false}
-                className="emotion-5 "
-                data-key="4"
-                data-testid="ictinus_list_item_4"
-                id="react-aria-generated-id-option-4"
+                className="emotion-7 "
+                data-key="10"
+                data-testid="ictinus_list_item_10"
+                id="react-aria-generated-id-option-10"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -1030,28 +2264,112 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
               >
                 <div
                   className="emotion-6"
+                >
+                  <span>
+                    Option Switch (compact)
+                  </span>
+                </div>
+                <div
+                  className="emotion-22"
                 >
                   <div
-                    className="emotion-37"
-                    data-testid="_avatar"
+                    className="emotion-64"
                   >
-                    <span
-                      className="emotion-22"
-                      onClick={[Function]}
+                    <div
+                      style={
+                        Object {
+                          "MozTransition": "opacity 0.25s",
+                          "MozUserSelect": "none",
+                          "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
+                          "WebkitTransition": "opacity 0.25s",
+                          "WebkitUserSelect": "none",
+                          "borderRadius": 4,
+                          "direction": "ltr",
+                          "display": "inline-block",
+                          "msUserSelect": "none",
+                          "opacity": 1,
+                          "position": "relative",
+                          "textAlign": "left",
+                          "touchAction": "none",
+                          "transition": "opacity 0.25s",
+                          "userSelect": "none",
+                        }
+                      }
                     >
-                      <span
-                        className="emotion-39"
+                      <div
+                        className="react-switch-bg"
+                        onClick={[Function]}
+                        onMouseDown={[Function]}
+                        style={
+                          Object {
+                            "MozTransition": "background 0.25s",
+                            "WebkitTransition": "background 0.25s",
+                            "background": "#dbe1eb",
+                            "borderRadius": 4,
+                            "cursor": "pointer",
+                            "height": 8,
+                            "margin": 6,
+                            "position": "relative",
+                            "transition": "background 0.25s",
+                            "width": 36,
+                          }
+                        }
                       />
-                    </span>
+                      <div
+                        className="react-switch-handle"
+                        onClick={[Function]}
+                        onMouseDown={[Function]}
+                        onTouchCancel={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchMove={[Function]}
+                        onTouchStart={[Function]}
+                        style={
+                          Object {
+                            "MozTransition": "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
+                            "WebkitTransition": "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
+                            "background": "#f3f5f8",
+                            "border": 0,
+                            "borderRadius": "50%",
+                            "boxShadow": null,
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "height": 20,
+                            "outline": 0,
+                            "position": "absolute",
+                            "top": 0,
+                            "transform": "translateX(0px)",
+                            "transition": "background-color 0.25s, transform 0.25s, box-shadow 0.15s",
+                            "width": 20,
+                          }
+                        }
+                      />
+                      <input
+                        aria-checked={false}
+                        checked={false}
+                        data-testid="switch"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyUp={[Function]}
+                        role="switch"
+                        style={
+                          Object {
+                            "border": 0,
+                            "clip": "rect(0 0 0 0)",
+                            "height": 1,
+                            "margin": -1,
+                            "overflow": "hidden",
+                            "padding": 0,
+                            "position": "absolute",
+                            "width": 1,
+                          }
+                        }
+                        type="checkbox"
+                      />
+                    </div>
                   </div>
                 </div>
-                <div
-                  className="emotion-12"
-                >
-                  <span>
-                    Option Icon/Avatar
-                  </span>
-                </div>
               </li>
             </ul>
           </div>
@@ -1101,9 +2419,9 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
               <li
                 aria-selected={false}
                 className="emotion-5 "
-                data-key="5"
-                data-testid="ictinus_list_item_5"
-                id="react-aria-generated-id-option-5"
+                data-key="11"
+                data-testid="ictinus_list_item_11"
+                id="react-aria-generated-id-option-11"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -1123,67 +2441,36 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                 tabIndex={-1}
               >
                 <div
-                  className="emotion-12"
+                  className="emotion-22"
+                >
+                  <div
+                    className="emotion-74"
+                    data-testid="_avatar"
+                  >
+                    <span
+                      className="emotion-46"
+                      onClick={[Function]}
+                    >
+                      <span
+                        className="emotion-76"
+                      />
+                    </span>
+                  </div>
+                </div>
+                <div
+                  className="emotion-6"
                 >
                   <span>
-                    Text only
+                    Option Icon/Avatar
                   </span>
-                  <p>
-                    Secondary Help Text
-                  </p>
                 </div>
               </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="emotion-2"
-    >
-      <div
-        className="emotion-3"
-      >
-        <div
-          data-testid="ictinus_list"
-        >
-          <div
-            style={
-              Object {
-                "height": "100%",
-              }
-            }
-          >
-            <ul
-              aria-labelledby="react-aria-generated-id"
-              className="emotion-4"
-              id="react-aria-generated-id"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyDownCapture={[Function]}
-              onMouseDown={[Function]}
-              onScroll={[Function]}
-              role="listbox"
-              style={
-                Object {
-                  "display": "flex",
-                  "flexDirection": "column",
-                  "height": "100%",
-                  "listStyle": "none",
-                  "overflowY": "auto",
-                  "padding": 0,
-                  "position": "relative",
-                }
-              }
-              tabIndex={0}
-            >
               <li
                 aria-selected={false}
-                className="emotion-49 "
-                data-key="6"
-                data-testid="ictinus_list_item_6"
-                id="react-aria-generated-id-option-6"
+                className="emotion-7 "
+                data-key="12"
+                data-testid="ictinus_list_item_12"
+                id="react-aria-generated-id-option-12"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -1203,10 +2490,27 @@ exports[`Storyshots Design System/List/ListItem List Item Compilations 1`] = `
                 tabIndex={-1}
               >
                 <div
-                  className="emotion-12"
+                  className="emotion-22"
+                >
+                  <div
+                    className="emotion-74"
+                    data-testid="_avatar"
+                  >
+                    <span
+                      className="emotion-46"
+                      onClick={[Function]}
+                    >
+                      <span
+                        className="emotion-76"
+                      />
+                    </span>
+                  </div>
+                </div>
+                <div
+                  className="emotion-6"
                 >
                   <span>
-                    Compact size item
+                    Option Icon/Avatar (compact)
                   </span>
                 </div>
               </li>
diff --git a/src/components/List/stories/__snapshots__/ListItemText.stories.storyshot b/src/components/List/stories/__snapshots__/ListItemText.stories.storyshot
index 380c2f3bd..bfb474de8 100644
--- a/src/components/List/stories/__snapshots__/ListItemText.stories.storyshot
+++ b/src/components/List/stories/__snapshots__/ListItemText.stories.storyshot
@@ -437,6 +437,15 @@ exports[`Storyshots Design System/List/ListItemText ListItemText with secondary
   text-overflow: ellipsis;
 }
 
+.emotion-7 {
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.015625rem;
+  color: #686BB3;
+}
+
 <div
   className="emotion-0"
 >
@@ -520,7 +529,9 @@ exports[`Storyshots Design System/List/ListItemText ListItemText with secondary
                     <span>
                       Item 1
                     </span>
-                    <p>
+                    <p
+                      className="emotion-7"
+                    >
                       This is a secondary text on this item
                     </p>
                   </div>
@@ -555,7 +566,9 @@ exports[`Storyshots Design System/List/ListItemText ListItemText with secondary
                     <span>
                       Item 2
                     </span>
-                    <p>
+                    <p
+                      className="emotion-7"
+                    >
                       This is a secondary text on this item
                     </p>
                   </div>