diff --git a/src/components/action/Actions.stories.mdx b/src/components/action/Actions.stories.mdx
index 3e92d1fe..0f20992b 100644
--- a/src/components/action/Actions.stories.mdx
+++ b/src/components/action/Actions.stories.mdx
@@ -27,8 +27,8 @@ export const Template = ({ children, ...args }) => (
           'One button': <Button>Save</Button>,
           'Two buttons': (
             <>
-              <Button tone={Tone.success}>Save</Button>
-              <Button variant={ButtonVariant.ghost} tone={Tone.neutral}>
+              <Button tone={Tone.Success}>Save</Button>
+              <Button variant={ButtonVariant.Ghost} tone={Tone.neutral}>
                 Cancel
               </Button>
             </>
@@ -55,8 +55,8 @@ export const Template = ({ children, ...args }) => (
 <Canvas>
   <Story name="Multiple children">
     <Actions>
-      <Button tone={Tone.success}>Save</Button>
-      <Button variant={ButtonVariant.ghost} tone={Tone.neutral}>
+      <Button tone={Tone.Success}>Save</Button>
+      <Button variant={ButtonVariant.Ghost} tone={Tone.neutral}>
         Cancel
       </Button>
     </Actions>
diff --git a/src/components/button/ButtonIcon.stories.mdx b/src/components/button/ButtonIcon.stories.mdx
index 7e129be3..4fdc721b 100644
--- a/src/components/button/ButtonIcon.stories.mdx
+++ b/src/components/button/ButtonIcon.stories.mdx
@@ -18,9 +18,9 @@ export const Template = ({ ...args }) => <ButtonIcon {...args} />
     args={{
       disabled: false,
       mode: Mode.Light,
-      variant: ButtonVariant.solid,
-      size: Size.md,
-      tone: Tone.primary,
+      variant: ButtonVariant.Solid,
+      size: Size.Md,
+      tone: Tone.Primary,
       icon: 'Add',
     }}
     argTypes={{
@@ -91,13 +91,13 @@ The `Variant` determine if there is a background fill and a border. The `transpa
 
 <Canvas>
   <Story name="VariantSolid">
-    <ButtonIcon icon={IconAdd} variant={ButtonVariant.solid} />
+    <ButtonIcon icon={IconAdd} variant={ButtonVariant.Solid} />
   </Story>
   <Story name="VariantGhost">
-    <ButtonIcon icon={IconAdd} variant={ButtonVariant.ghost} />
+    <ButtonIcon icon={IconAdd} variant={ButtonVariant.Ghost} />
   </Story>
   <Story name="VariantTransparent">
-    <ButtonIcon icon={IconAdd} variant={ButtonVariant.transparent} />
+    <ButtonIcon icon={IconAdd} variant={ButtonVariant.Transparent} />
   </Story>
 </Canvas>
 
@@ -107,13 +107,13 @@ The size determine the padding between the button text and its border.
 
 <Canvas>
   <Story name="SizeSm">
-    <ButtonIcon icon={IconAdd} size={Size.sm} />
+    <ButtonIcon icon={IconAdd} size={Size.Sm} />
   </Story>
   <Story name="SizeMd">
-    <ButtonIcon icon={IconAdd} size={Size.md} />
+    <ButtonIcon icon={IconAdd} size={Size.Md} />
   </Story>
   <Story name="SizeLg">
-    <ButtonIcon icon={IconAdd} size={Size.lg} />
+    <ButtonIcon icon={IconAdd} size={Size.Lg} />
   </Story>
 </Canvas>
 
@@ -125,22 +125,22 @@ For additional information about Tailwind config, please refer to the [Tailwind
 
 <Canvas>
   <Story name="Primary">
-    <ButtonIcon icon={IconAdd} tone={Tone.primary} />
+    <ButtonIcon icon={IconAdd} tone={Tone.Primary} />
   </Story>
   <Story name="Neutral">
-    <ButtonIcon icon={IconAdd} tone={Tone.neutral} />
+    <ButtonIcon icon={IconAdd} tone={Tone.Neutral} />
   </Story>
   <Story name="Warning">
-    <ButtonIcon icon={IconAdd} tone={Tone.warning} />
+    <ButtonIcon icon={IconAdd} tone={Tone.Warning} />
   </Story>
   <Story name="Critical">
-    <ButtonIcon icon={IconAdd} tone={Tone.critical} />
+    <ButtonIcon icon={IconAdd} tone={Tone.Critical} />
   </Story>
   <Story name="Success">
-    <ButtonIcon icon={IconAdd} tone={Tone.success} />
+    <ButtonIcon icon={IconAdd} tone={Tone.Success} />
   </Story>
   <Story name="Informative">
-    <ButtonIcon icon={IconAdd} tone={Tone.informative} />
+    <ButtonIcon icon={IconAdd} tone={Tone.Informative} />
   </Story>
 </Canvas>
 
diff --git a/src/components/button/ButtonIconLink.stories.mdx b/src/components/button/ButtonIconLink.stories.mdx
index 1306b764..280c5646 100644
--- a/src/components/button/ButtonIconLink.stories.mdx
+++ b/src/components/button/ButtonIconLink.stories.mdx
@@ -18,9 +18,9 @@ export const Template = ({ ...args }) => <ButtonIconLink {...args} />
       href: '#',
       disabled: false,
       mode: Mode.Light,
-      variant: ButtonVariant.solid,
-      size: Size.md,
-      tone: Tone.primary,
+      variant: ButtonVariant.Solid,
+      size: Size.Md,
+      tone: Tone.Primary,
       icon: 'Add',
     }}
     argTypes={{
diff --git a/src/components/button/ButtonLink.stories.mdx b/src/components/button/ButtonLink.stories.mdx
index 4652fc85..362fcaf6 100644
--- a/src/components/button/ButtonLink.stories.mdx
+++ b/src/components/button/ButtonLink.stories.mdx
@@ -25,9 +25,9 @@ export const Template = ({ children, ...args }) => (
       disabled: false,
       internal: true,
       mode: Mode.Light,
-      variant: ButtonVariant.solid,
-      size: Size.md,
-      tone: Tone.primary,
+      variant: ButtonVariant.Solid,
+      size: Size.Md,
+      tone: Tone.Primary,
       iconStart: 'None',
       iconEnd: 'None',
     }}
diff --git a/src/components/content/ContentMessage/ContentMessage.stories.mdx b/src/components/content/ContentMessage/ContentMessage.stories.mdx
index f8d6d23b..99b7e0ac 100644
--- a/src/components/content/ContentMessage/ContentMessage.stories.mdx
+++ b/src/components/content/ContentMessage/ContentMessage.stories.mdx
@@ -79,7 +79,7 @@ export const Template = (args) => <ContentMessage {...args} />
 <Canvas>
   <Story name="Primary">
     <ContentMessage
-      tone={Tone.primary}
+      tone={Tone.Primary}
       icon={IconInfo}
       title="Primary"
       text="Text"
@@ -87,7 +87,7 @@ export const Template = (args) => <ContentMessage {...args} />
   </Story>
   <Story name="Neutral">
     <ContentMessage
-      tone={Tone.neutral}
+      tone={Tone.Neutral}
       icon={IconInfo}
       title="Neutral"
       text="Text"
@@ -95,7 +95,7 @@ export const Template = (args) => <ContentMessage {...args} />
   </Story>
   <Story name="Warning">
     <ContentMessage
-      tone={Tone.warning}
+      tone={Tone.Warning}
       icon={IconInfo}
       title="Warning"
       text="Text"
@@ -103,7 +103,7 @@ export const Template = (args) => <ContentMessage {...args} />
   </Story>
   <Story name="Critical">
     <ContentMessage
-      tone={Tone.critical}
+      tone={Tone.Critical}
       icon={IconInfo}
       title="Critical"
       text="Text"
@@ -111,7 +111,7 @@ export const Template = (args) => <ContentMessage {...args} />
   </Story>
   <Story name="Success">
     <ContentMessage
-      tone={Tone.success}
+      tone={Tone.Success}
       icon={IconInfo}
       title="Success"
       text="Text"
@@ -119,7 +119,7 @@ export const Template = (args) => <ContentMessage {...args} />
   </Story>
   <Story name="Informative">
     <ContentMessage
-      tone={Tone.informative}
+      tone={Tone.Informative}
       icon={IconInfo}
       title="Informative"
       text="Text"
diff --git a/src/components/dialog/ConfirmationDialog/ConfirmationDialog.stories.mdx b/src/components/dialog/ConfirmationDialog/ConfirmationDialog.stories.mdx
index 80f8ee1e..d3c36a6b 100644
--- a/src/components/dialog/ConfirmationDialog/ConfirmationDialog.stories.mdx
+++ b/src/components/dialog/ConfirmationDialog/ConfirmationDialog.stories.mdx
@@ -61,7 +61,7 @@ It leverages the [Dialog](/docs/components-dialog-dialog--default) component.
       body: 'Are you sure you want to reset your notification settings to the standard settings?',
       title: 'Confirm reset notification settings',
       buttonText: 'Reset Notification',
-      buttonTone: Tone.primary,
+      buttonTone: Tone.Primary,
       'aria-label': 'Confirm reset notification settings',
       overlayClassName: 'z-10',
     }}
@@ -107,7 +107,7 @@ The variant is used to change the color used as accent in the component. A use c
       body: 'Are you sure you want to send the document?',
       title: 'Confirm Save',
       buttonText: 'Non Critical Variant',
-      buttonTone: Tone.primary,
+      buttonTone: Tone.Primary,
       'aria-label': 'Confirm Save',
       overlayClassName: 'z-10',
     }}
@@ -121,9 +121,9 @@ The variant is used to change the color used as accent in the component. A use c
       confirmButtonText: 'Confirm',
       body: 'Are you sure you want to delete the user?',
       title: 'Delete User',
-      variant: ConfirmationDialogVariant.critical,
+      variant: ConfirmationDialogVariant.Critical,
       buttonText: 'Critical Variant',
-      buttonTone: Tone.critical,
+      buttonTone: Tone.Critical,
       'aria-label': 'Delete User',
       overlayClassName: 'z-10',
     }}
diff --git a/src/components/form/CheckboxField.stories.mdx b/src/components/form/CheckboxField.stories.mdx
index 6e8e6475..7f1e6d46 100644
--- a/src/components/form/CheckboxField.stories.mdx
+++ b/src/components/form/CheckboxField.stories.mdx
@@ -50,7 +50,7 @@ export const Template = ({ ...args }) => <CheckboxField {...args} />
     args={{
       label: 'Label',
       message: 'This is the message',
-      status: Status.invalid,
+      status: Status.Invalid,
     }}
   >
     {Template.bind({})}
diff --git a/src/components/form/ToggleSwitchField.stories.mdx b/src/components/form/ToggleSwitchField.stories.mdx
index 70a48472..0810336c 100644
--- a/src/components/form/ToggleSwitchField.stories.mdx
+++ b/src/components/form/ToggleSwitchField.stories.mdx
@@ -53,7 +53,7 @@ export const Template = ({ ...args }) => <ToggleSwitchField {...args} />
     args={{
       label: 'Label',
       message: 'This is the message',
-      status: Status.invalid,
+      status: Status.Invalid,
     }}
   >
     {Template.bind({})}
diff --git a/src/components/menu/Menu.stories.mdx b/src/components/menu/Menu.stories.mdx
index 522b0b73..cac3f629 100644
--- a/src/components/menu/Menu.stories.mdx
+++ b/src/components/menu/Menu.stories.mdx
@@ -33,7 +33,7 @@ export const Template = ({ menuLabel, className, ...args }) => {
     args={{
       menuLabel: 'Menu',
       menuButtonContent: 'Menu',
-      direction: MenuDirection.down,
+      direction: MenuDirection.Down,
     }}
   >
     {Template.bind({})}
diff --git a/src/examples/details.stories.mdx b/src/examples/details.stories.mdx
index baea8cf7..b20eb709 100644
--- a/src/examples/details.stories.mdx
+++ b/src/examples/details.stories.mdx
@@ -20,7 +20,7 @@ export const Template = ({ title }) => {
       <Section>
         <SectionHeader title={title} />
         <SectionContainer>
-          <SectionContent layout={SectionContentLayout.oneColumnGrid}>
+          <SectionContent layout={SectionContentLayout.OneColumnGrid}>
             <DescriptionItem content="John Doe" title="Name" />
             <DescriptionItem content="info@aboutbits.it" title="Email" />
             <DescriptionItem content="admin" title="Role" />
@@ -58,7 +58,7 @@ export const TwoColumnTemplate = ({ title }) => {
       <Section>
         <SectionHeader title={title} />
         <SectionContainer>
-          <SectionContent layout={SectionContentLayout.twoColumnGrid}>
+          <SectionContent layout={SectionContentLayout.TwoColumnGrid}>
             <DescriptionItem content="John Doe" title="Name" />
             <DescriptionItem content="info@aboutbits.it" title="Email" />
             <DescriptionItem content="admin" title="Role" />