diff --git a/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap b/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
index c0394827..240e702e 100644
--- a/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
+++ b/src/atoms/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
@@ -35,38 +35,6 @@ exports[`Checkbox renders 1`] = `
   cursor: pointer;
 }
 
-.c2:checked:not(:disabled)[aria-checked='true'] ~ span {
-  background-color: #35E0AD;
-  border-color: #2AB38A;
-}
-
-.c2:checked:not(:disabled)[aria-checked='true'] ~ span:after {
-  display: block;
-}
-
-.c2:checked:disabled[aria-checked='true'] ~ span {
-  border-color: transparent;
-  background-color: #E3E3E8;
-  color: #ABACBA;
-}
-
-.c2:checked:disabled[aria-checked='true'] ~ span:after {
-  display: block;
-}
-
-.c2:not(:checked):disabled ~ span {
-  border-color: #E3E3E8;
-  background-color: #ffffff;
-}
-
-.c2:hover:not(:disabled) {
-  border-color: #4329A6;
-}
-
-.c2:hover:not(:disabled):checked ~ span {
-  border-color: #2AB38A;
-}
-
 .c3 {
   position: absolute;
   top: 0;
diff --git a/src/atoms/checkbox/index.tsx b/src/atoms/checkbox/index.tsx
index 9c65f2a7..7885a538 100644
--- a/src/atoms/checkbox/index.tsx
+++ b/src/atoms/checkbox/index.tsx
@@ -6,7 +6,7 @@ import {
   Checkmark,
 } from './styles';
 
-interface Props {
+export interface CheckboxProps {
   value: string;
   label?: string | React.ReactNode;
   checked?: boolean | undefined;
@@ -30,7 +30,7 @@ const Checkbox = ({
   style,
   dataTestId,
   required = false,
-}: Props) => {
+}: CheckboxProps) => {
   const checkedRef = useRef<boolean>(checked);
   const [isChecked, setIsChecked] = useState(checked);
 
diff --git a/stories/atoms/checkbox.stories.tsx b/src/atoms/checkbox/stories/checkbox.stories.tsx
similarity index 78%
rename from stories/atoms/checkbox.stories.tsx
rename to src/atoms/checkbox/stories/checkbox.stories.tsx
index 8ae60001..182cff85 100644
--- a/stories/atoms/checkbox.stories.tsx
+++ b/src/atoms/checkbox/stories/checkbox.stories.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
-import { Checkbox } from '../../src';
+import Checkbox, { CheckboxProps } from '..';
 
 export default {
   title: 'Components/Atoms/Checkbox',
   component: Checkbox,
 };
 
-export const CheckboxSimpleComponent = args => <Checkbox {...args} />;
+export const CheckboxSimpleComponent = (args: CheckboxProps) => (
+  <Checkbox {...args} />
+);
 
 CheckboxSimpleComponent.storyName = 'Simple';
 CheckboxSimpleComponent.args = {
@@ -19,7 +21,7 @@ CheckboxSimpleComponent.args = {
   onChange: () => {},
 };
 
-export const CheckboxNodeComponent = args => (
+export const CheckboxNodeComponent = (args: CheckboxProps) => (
   <Checkbox
     label={[
       'I agree with ',
diff --git a/src/atoms/checkbox/styles.tsx b/src/atoms/checkbox/styles.tsx
index c4950e4a..aa666c5f 100644
--- a/src/atoms/checkbox/styles.tsx
+++ b/src/atoms/checkbox/styles.tsx
@@ -45,42 +45,6 @@ export const CheckboxInput = styled.input<CheckboxWrapperProps>`
   left: 0;
   opacity: 0;
   cursor: pointer;
-
-  &:checked:not(:disabled)[aria-checked='true'] ~ span {
-    background-color: ${props =>
-      props.error ? field.errorBackgroundColor : field.successBackgroundColor};
-    border-color: ${props =>
-      props.error ? field.errorBorderColor : field.successBorderColor};
-
-    &:after {
-      display: block;
-    }
-  }
-
-  &:checked:disabled[aria-checked='true'] ~ span {
-    border-color: transparent;
-    background-color: ${field.disabledBackgroundColor};
-    color: ${field.disabledColor};
-
-    &:after {
-      display: block;
-    }
-  }
-
-  &:not(:checked):disabled ~ span {
-    border-color: ${field.disabledBackgroundColor};
-    background-color: ${field.backgroundColor};
-  }
-
-  &:hover:not(:disabled) {
-    border-color: ${props =>
-      props.error ? field.errorBorderColor : field.activeBorderColor};
-
-    &:checked ~ span {
-      border-color: ${props =>
-        props.error ? field.errorBorderColor : field.successBorderColor};
-    }
-  }
 `;
 
 export const Checkmark = styled.span<CheckboxErrorProps>`
diff --git a/src/atoms/error-field/index.tsx b/src/atoms/error-field/index.tsx
index 45ec9335..f8d956a7 100644
--- a/src/atoms/error-field/index.tsx
+++ b/src/atoms/error-field/index.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import * as Styles from './styles';
 import { ErrorFieldColor } from './types';
 
-interface ErrorFieldProps {
+export interface ErrorFieldProps {
   color?: ErrorFieldColor;
   error: string;
   className?: string;
diff --git a/stories/atoms/error-field.stories.tsx b/src/atoms/error-field/stories/error-field.stories.tsx
similarity index 68%
rename from stories/atoms/error-field.stories.tsx
rename to src/atoms/error-field/stories/error-field.stories.tsx
index a2898bc2..2cea74f2 100644
--- a/stories/atoms/error-field.stories.tsx
+++ b/src/atoms/error-field/stories/error-field.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ErrorField } from '../../src';
+import ErrorField, { ErrorFieldProps } from '..';
 
 export default {
   title: 'Components/Atoms/ErrorField',
@@ -14,7 +14,9 @@ export default {
   },
 };
 
-export const ErrorComponent = args => <ErrorField {...args} />;
+export const ErrorComponent = (args: ErrorFieldProps) => (
+  <ErrorField {...args} />
+);
 
 ErrorComponent.storyName = 'Error';
 ErrorComponent.args = {
@@ -22,7 +24,9 @@ ErrorComponent.args = {
   color: 'red',
 };
 
-export const SuccessComponent = args => <ErrorField {...args} />;
+export const SuccessComponent = (args: ErrorFieldProps) => (
+  <ErrorField {...args} />
+);
 
 SuccessComponent.storyName = 'Success';
 SuccessComponent.args = {
diff --git a/src/atoms/spinner/index.tsx b/src/atoms/spinner/index.tsx
index d9907a55..5d47c085 100644
--- a/src/atoms/spinner/index.tsx
+++ b/src/atoms/spinner/index.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { colors } from '../../ions/variables';
 import * as Styles from './styles';
 
-interface SpinnerProps {
+export interface SpinnerProps {
   fill?: string;
   size?: string;
   className?: string;
diff --git a/stories/atoms/spinner.stories.tsx b/src/atoms/spinner/stories/spinner.stories.tsx
similarity index 68%
rename from stories/atoms/spinner.stories.tsx
rename to src/atoms/spinner/stories/spinner.stories.tsx
index da618e9a..9c78aa97 100644
--- a/stories/atoms/spinner.stories.tsx
+++ b/src/atoms/spinner/stories/spinner.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Spinner } from '../../src';
+import Spinner, { SpinnerProps } from '..';
 
 export default {
   title: 'Components/Atoms/Spinner',
@@ -9,7 +9,7 @@ export default {
   },
 };
 
-export const SpinnerComponent = args => <Spinner {...args} />;
+export const SpinnerComponent = (args: SpinnerProps) => <Spinner {...args} />;
 
 SpinnerComponent.storyName = 'Spinner';
 
diff --git a/src/atoms/text-field/index.tsx b/src/atoms/text-field/index.tsx
index c7574383..582f0575 100644
--- a/src/atoms/text-field/index.tsx
+++ b/src/atoms/text-field/index.tsx
@@ -3,7 +3,7 @@ import { ErrorField } from '../..';
 import * as Styles from './styles';
 import { TextFieldType } from './types';
 
-interface TextFieldProps {
+export interface TextFieldProps {
   type?: TextFieldType;
   error?: string;
   icon?: string;
diff --git a/stories/atoms/text-field.stories.tsx b/src/atoms/text-field/stories/text-field.stories.tsx
similarity index 71%
rename from stories/atoms/text-field.stories.tsx
rename to src/atoms/text-field/stories/text-field.stories.tsx
index c89869b0..049bb544 100644
--- a/stories/atoms/text-field.stories.tsx
+++ b/src/atoms/text-field/stories/text-field.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { TextField } from '../../src';
-import icons from '../../src/ions/icons';
+import TextField, { TextFieldProps } from '..';
+import icons from '../../../ions/icons';
 
 export default {
   title: 'Components/Atoms/TextField',
@@ -21,7 +21,7 @@ export default {
   },
 };
 
-export const TextComponent = args => <TextField {...args} />;
+export const TextComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 TextComponent.storyName = 'Text';
 TextComponent.args = {
@@ -34,7 +34,9 @@ TextComponent.args = {
   required: false,
 };
 
-export const TextDefaultComponent = args => <TextField {...args} />;
+export const TextDefaultComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextDefaultComponent.storyName = 'Default Value';
 TextDefaultComponent.args = {
@@ -46,7 +48,9 @@ TextDefaultComponent.args = {
   disabled: false,
 };
 
-export const DisabledComponent = args => <TextField {...args} />;
+export const DisabledComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 DisabledComponent.storyName = 'Disabled';
 DisabledComponent.args = {
@@ -58,7 +62,9 @@ DisabledComponent.args = {
   disabled: true,
 };
 
-export const TextFullBorderComponent = args => <TextField {...args} />;
+export const TextFullBorderComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextFullBorderComponent.storyName = 'Full Border';
 TextFullBorderComponent.args = {
@@ -69,7 +75,9 @@ TextFullBorderComponent.args = {
   disabled: false,
 };
 
-export const TextIconComponent = args => <TextField {...args} />;
+export const TextIconComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextIconComponent.storyName = 'W/ Icon';
 TextIconComponent.args = {
@@ -81,7 +89,7 @@ TextIconComponent.args = {
   disabled: false,
 };
 
-export const UrlComponent = args => <TextField {...args} />;
+export const UrlComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 UrlComponent.storyName = 'URL';
 UrlComponent.args = {
@@ -92,7 +100,9 @@ UrlComponent.args = {
   disabled: false,
 };
 
-export const PasswordComponent = args => <TextField {...args} />;
+export const PasswordComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 PasswordComponent.storyName = 'Password';
 PasswordComponent.args = {
@@ -103,7 +113,7 @@ PasswordComponent.args = {
   disabled: false,
 };
 
-export const DateComponent = args => <TextField {...args} />;
+export const DateComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 DateComponent.storyName = 'Date';
 DateComponent.args = {
@@ -113,7 +123,7 @@ DateComponent.args = {
   disabled: false,
 };
 
-export const TimeComponent = args => <TextField {...args} />;
+export const TimeComponent = (args: TextFieldProps) => <TextField {...args} />;
 
 TimeComponent.storyName = 'Time';
 TimeComponent.args = {
@@ -123,7 +133,9 @@ TimeComponent.args = {
   disabled: false,
 };
 
-export const NumberComponent = args => <TextField {...args} />;
+export const NumberComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 NumberComponent.storyName = 'Number';
 NumberComponent.args = {
@@ -136,7 +148,9 @@ NumberComponent.args = {
   disabled: false,
 };
 
-export const TextErrorComponent = args => <TextField {...args} />;
+export const TextErrorComponent = (args: TextFieldProps) => (
+  <TextField {...args} />
+);
 
 TextErrorComponent.storyName = 'Error';
 TextErrorComponent.args = {
diff --git a/src/molecules/actions-menu/index.tsx b/src/molecules/actions-menu/index.tsx
index e8ceb8a2..8bfff0b3 100644
--- a/src/molecules/actions-menu/index.tsx
+++ b/src/molecules/actions-menu/index.tsx
@@ -4,14 +4,14 @@ import { Button } from '../..';
 import { ActionMenu } from './types';
 import * as Styles from './styles';
 
-interface ActionsMenuListInterface<T> {
+export interface ActionsMenuListInterface<T> {
   actions: ActionMenu<T>[];
   data?: any;
   rowIndex?: number;
   handleOptionClick?: () => void;
 }
 
-interface ActionsMenuInterface<T> {
+export interface ActionsMenuInterface<T> {
   className?: string;
   ariaLabel?: string;
   actions: ActionMenu<T>[];
diff --git a/stories/molecules/actions-menu.stories.tsx b/src/molecules/actions-menu/stories/actions-menu.stories.tsx
similarity index 55%
rename from stories/molecules/actions-menu.stories.tsx
rename to src/molecules/actions-menu/stories/actions-menu.stories.tsx
index c0cea9fe..1ad1e376 100644
--- a/stories/molecules/actions-menu.stories.tsx
+++ b/src/molecules/actions-menu/stories/actions-menu.stories.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import { ActionsMenu } from '../../src';
+import ActionsMenu, {
+  ActionsMenuInterface,
+  ActionsMenuListInterface,
+} from '..';
 
 export default {
   title: 'Components/Molecules/ActionsMenu',
@@ -7,7 +10,17 @@ export default {
   argTypes: {},
 };
 
-export const ActionsMenuOpenComponent = args => <ActionsMenu {...args} />;
+type MyActionsMenuListInterface = ActionsMenuListInterface<{
+  id: string;
+  type: string;
+  value: string;
+  url: string | null;
+  action: () => void;
+}>;
+
+export const ActionsMenuOpenComponent = (
+  args: ActionsMenuInterface<MyActionsMenuListInterface>
+) => <ActionsMenu {...args} />;
 
 const actions = [
   {
@@ -40,7 +53,15 @@ ActionsMenuOpenComponent.args = {
   startsOpen: true,
 };
 
-export const ActionsMenuClosedComponent = args => <ActionsMenu {...args} />;
+export const ActionsMenuClosedComponent = (
+  args: ActionsMenuInterface<MyActionsMenuListInterface>
+) => <ActionsMenu {...args} />;
+
+ActionsMenuClosedComponent.storyName = 'Closed';
+ActionsMenuClosedComponent.args = {
+  ...ActionsMenuOpenComponent.args,
+  startsOpen: false,
+};
 
 ActionsMenuClosedComponent.storyName = 'Closed';
 ActionsMenuClosedComponent.args = {
diff --git a/src/molecules/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap b/src/molecules/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap
index 959c779b..5d773f9f 100644
--- a/src/molecules/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap
+++ b/src/molecules/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap
@@ -35,38 +35,6 @@ exports[`CheckboxGroup renders 1`] = `
   cursor: pointer;
 }
 
-.c3:checked:not(:disabled)[aria-checked='true'] ~ span {
-  background-color: #35E0AD;
-  border-color: #2AB38A;
-}
-
-.c3:checked:not(:disabled)[aria-checked='true'] ~ span:after {
-  display: block;
-}
-
-.c3:checked:disabled[aria-checked='true'] ~ span {
-  border-color: transparent;
-  background-color: #E3E3E8;
-  color: #ABACBA;
-}
-
-.c3:checked:disabled[aria-checked='true'] ~ span:after {
-  display: block;
-}
-
-.c3:not(:checked):disabled ~ span {
-  border-color: #E3E3E8;
-  background-color: #ffffff;
-}
-
-.c3:hover:not(:disabled) {
-  border-color: #4329A6;
-}
-
-.c3:hover:not(:disabled):checked ~ span {
-  border-color: #2AB38A;
-}
-
 .c4 {
   position: absolute;
   top: 0;
diff --git a/src/molecules/field-with-button/__tests__/field-with-button.test.tsx b/src/molecules/field-with-button/__tests__/field-with-button.test.tsx
index ff646c44..da6699f8 100644
--- a/src/molecules/field-with-button/__tests__/field-with-button.test.tsx
+++ b/src/molecules/field-with-button/__tests__/field-with-button.test.tsx
@@ -15,11 +15,22 @@ describe('FieldWidthButton', () => {
 
   it('has correct value', () => {
     const textValue = 'this is my text';
-    render(
+
+    // It renders with an initial value
+    const { rerender } = render(
       <FieldWidthButton type="text" value={textValue} buttonIcon="copy" />
     );
     const foundInput = screen.getByDisplayValue(textValue);
     expect(foundInput).toHaveValue(textValue);
+
+    // The previous value is replaced by changing the prop `value`
+    const secondTextValue = 'custom text after render';
+    rerender(
+      <FieldWidthButton type="text" value={secondTextValue} buttonIcon="copy" />
+    );
+    expect(screen.getByDisplayValue(secondTextValue)).toHaveValue(
+      secondTextValue
+    );
   });
 
   it('calls action callback', async () => {
diff --git a/src/molecules/field-with-button/index.tsx b/src/molecules/field-with-button/index.tsx
index b02d32a5..8b34df36 100644
--- a/src/molecules/field-with-button/index.tsx
+++ b/src/molecules/field-with-button/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Label from '../../atoms/label';
 import TextField from '../../atoms/text-field';
 import { TextFieldType } from '../../atoms/text-field/types';
@@ -21,26 +21,24 @@ export interface FieldWidthButtonProps {
   clearFieldAfterSubmit?: boolean;
 }
 
-const FieldWidthButton = (props: FieldWidthButtonProps) => {
-  const {
-    label,
-    type = 'text',
-    name,
-    placeholder,
-    value,
-    onChange,
-    dataTestId,
-    buttonIcon,
-    buttonValue,
-    buttonAction,
-    buttonDisabled,
-    disabled = true,
-    clearFieldAfterSubmit = false,
-  } = props;
-
+const FieldWidthButton = ({
+  label,
+  type = 'text',
+  name,
+  placeholder,
+  value,
+  onChange,
+  dataTestId,
+  buttonIcon,
+  buttonValue,
+  buttonAction,
+  buttonDisabled,
+  disabled = true,
+  clearFieldAfterSubmit = false,
+}: FieldWidthButtonProps) => {
   const [loading, setLoading] = useState(false);
   const [fieldValue, setFieldValue] = useState<string | number | null>(
-    value ?? null
+    value ?? ''
   );
 
   const handleOnClickAction = async () => {
@@ -55,6 +53,11 @@ const FieldWidthButton = (props: FieldWidthButtonProps) => {
     clearFieldAfterSubmit && setFieldValue('');
   };
 
+  useEffect(() => {
+    if (!value) return;
+    setFieldValue(value);
+  }, [value]);
+
   return (
     <Styles.Wrapper>
       {label && <Label value={label} />}
diff --git a/src/molecules/note-card/index.tsx b/src/molecules/note-card/index.tsx
index 7b310e92..ab1c3803 100644
--- a/src/molecules/note-card/index.tsx
+++ b/src/molecules/note-card/index.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { NoteColor } from './types';
 import * as Styles from './styles';
 
-interface NoteCardProps {
+export interface NoteCardProps {
   color?: NoteColor;
   value: any;
   buttonValue?: string;
diff --git a/stories/molecules/note-card.stories.tsx b/src/molecules/note-card/stories/note-card.stories.tsx
similarity index 86%
rename from stories/molecules/note-card.stories.tsx
rename to src/molecules/note-card/stories/note-card.stories.tsx
index 7d170844..6aa92844 100644
--- a/stories/molecules/note-card.stories.tsx
+++ b/src/molecules/note-card/stories/note-card.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NoteCard } from '../../src';
+import NoteCard, { NoteCardProps } from '..';
 
 export default {
   title: 'Components/Molecules/Note Card',
@@ -15,7 +15,7 @@ export default {
   },
 };
 
-export const NoteCardText = args => <NoteCard {...args} />;
+export const NoteCardText = (args: NoteCardProps) => <NoteCard {...args} />;
 
 NoteCardText.storyName = 'Text Only';
 NoteCardText.args = {
diff --git a/stories/colors.stories.mdx b/stories/colors.stories.mdx
deleted file mode 100644
index e7edaaf9..00000000
--- a/stories/colors.stories.mdx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { colors } from "../src/ions/variables"
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
-
-<Meta title="Colors" />
-
-<ColorPalette>
-  <ColorItem
-    title="Neutrals"
-    subtitle="colors.[...]"
-    colors={{ white: colors.white, black: colors.black }}
-  />
-  <ColorItem
-    title="Grey"
-    subtitle="colors.grey[#]"
-    colors={{
-      grey50: colors.grey50,
-      grey100: colors.grey100,
-      grey150: colors.grey150,
-      grey200: colors.grey200,
-      grey300: colors.grey300,
-      grey400: colors.grey400,
-      grey500: colors.grey500,
-      grey600: colors.grey600,
-      grey700: colors.grey700,
-      grey800: colors.grey800,
-      grey850: colors.grey850,
-      grey900: colors.grey900,
-      grey950: colors.grey950,
-    }}
-  />
-  <ColorItem
-    title="Blue"
-    subtitle="colors.blue[#]"
-    colors={{
-      blue50: colors.blue50,
-      blue100: colors.blue100,
-      blue150: colors.blue150,
-      blue200: colors.blue200,
-      blue300: colors.blue300,
-      blue400: colors.blue400,
-      blue500: colors.blue500,
-      blue600: colors.blue600,
-      blue700: colors.blue700,
-      blue800: colors.blue800,
-      blue850: colors.blue850,
-      blue900: colors.blue900,
-      blue950: colors.blue950,
-    }}
-  />
-  <ColorItem
-    title="Purple"
-    subtitle="colors.purple[#]"
-    colors={{
-      purple50: colors.purple50,
-      purple100: colors.purple100,
-      purple150: colors.purple150,
-      purple200: colors.purple200,
-      purple300: colors.purple300,
-      purple400: colors.purple400,
-      purple500: colors.purple500,
-      purple600: colors.purple600,
-      purple700: colors.purple700,
-      purple800: colors.purple800,
-      purple850: colors.purple850,
-      purple900: colors.purple900,
-      purple950: colors.purple950,
-    }}
-  />
-  <ColorItem
-    title="Red"
-    subtitle="colors.red[#]"
-    colors={{
-      red50: colors.red50,
-      red100: colors.red100,
-      red150: colors.red150,
-      red200: colors.red200,
-      red300: colors.red300,
-      red400: colors.red400,
-      red500: colors.red500,
-      red600: colors.red600,
-      red700: colors.red700,
-      red800: colors.red800,
-      red850: colors.red850,
-      red900: colors.red900,
-      red950: colors.red950,
-    }}
-  />
-  <ColorItem
-    title="Oracle"
-    subtitle="colors.oracle[#]"
-    colors={{
-      oracle50: colors.oracle50,
-      oracle100: colors.oracle100,
-      oracle150: colors.oracle150,
-      oracle200: colors.oracle200,
-      oracle300: colors.oracle300,
-      oracle400: colors.oracle400,
-      oracle500: colors.oracle500,
-      oracle600: colors.oracle600,
-      oracle700: colors.oracle700,
-      oracle800: colors.oracle800,
-      oracle850: colors.oracle850,
-      oracle900: colors.oracle900,
-      oracle950: colors.oracle950,
-    }}
-  />
-  <ColorItem
-    title="Green"
-    subtitle="colors.green[#]"
-    colors={{
-      green50: colors.green50,
-      green100: colors.green100,
-      green150: colors.green150,
-      green200: colors.green200,
-      green300: colors.green300,
-      green400: colors.green400,
-      green500: colors.green500,
-      green600: colors.green600,
-      green700: colors.green700,
-      green800: colors.green800,
-      green850: colors.green850,
-      green900: colors.green900,
-      green950: colors.green950,
-    }}
-  />
-  <ColorItem
-    title="Orange"
-    subtitle="colors.orange[#]"
-    colors={{
-      orange50: colors.orange50,
-      orange100: colors.orange100,
-      orange150: colors.orange150,
-      orange200: colors.orange200,
-      orange300: colors.orange300,
-      orange400: colors.orange400,
-      orange500: colors.orange500,
-      orange600: colors.orange600,
-      orange700: colors.orange700,
-      orange800: colors.orange800,
-      orange850: colors.orange850,
-      orange900: colors.orange900,
-      orange950: colors.orange950,
-    }}
-  />
-  <ColorItem
-    title="Yellow"
-    subtitle="colors.yellow[#]"
-    colors={{
-      yellow50: colors.yellow50,
-      yellow100: colors.yellow100,
-      yellow150: colors.yellow150,
-      yellow200: colors.yellow200,
-      yellow300: colors.yellow300,
-      yellow400: colors.yellow400,
-      yellow500: colors.yellow500,
-      yellow600: colors.yellow600,
-      yellow700: colors.yellow700,
-      yellow800: colors.yellow800,
-      yellow850: colors.yellow850,
-      yellow900: colors.yellow900,
-      yellow950: colors.yellow950,
-    }}
-  />
-  <ColorItem
-    title="Pale Blue"
-    subtitle="colors.paleBlue[#]"
-    colors={{
-      paleBlue50: colors.paleBlue50,
-      paleBlue100: colors.paleBlue100,
-      paleBlue150: colors.paleBlue150,
-      paleBlue200: colors.paleBlue200,
-      paleBlue300: colors.paleBlue300,
-      paleBlue400: colors.paleBlue400,
-      paleBlue500: colors.paleBlue500,
-      paleBlue600: colors.paleBlue600,
-      paleBlue700: colors.paleBlue700,
-      paleBlue800: colors.paleBlue800,
-      paleBlue850: colors.paleBlue850,
-      paleBlue900: colors.paleBlue900,
-      paleBlue950: colors.paleBlue950,
-    }}
-  />
-  <ColorItem
-    title="Pale Orange"
-    subtitle="colors.paleOrange[#]"
-    colors={{
-      paleOrange50: colors.paleOrange50,
-      paleOrange100: colors.paleOrange100,
-      paleOrange150: colors.paleOrange150,
-      paleOrange200: colors.paleOrange200,
-      paleOrange300: colors.paleOrange300,
-      paleOrange400: colors.paleOrange400,
-      paleOrange500: colors.paleOrange500,
-      paleOrange600: colors.paleOrange600,
-      paleOrange700: colors.paleOrange700,
-      paleOrange800: colors.paleOrange800,
-      paleOrange850: colors.paleOrange850,
-      paleOrange900: colors.paleOrange900,
-      paleOrange950: colors.paleOrange950,
-    }}
-  />
-</ColorPalette>
\ No newline at end of file