diff --git a/.storybook/Decorator.tsx b/.storybook/Decorator.tsx
deleted file mode 100644
index 95ed2ba7..00000000
--- a/.storybook/Decorator.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import { createUseStyles } from 'react-jss'
-import { ThemeType, themes } from '../src/components/assets/styles/themes'
-import cn from 'classnames'
-const { dark } = ThemeType
-
-const useStyles = createUseStyles({
-	'@global': {
-		[`.${dark} .decorator`]: {
-			backgroundColor: themes[dark].background.secondary
-		}
-	},
-	decorator: {
-		padding: '1rem'
-	}
-})
-
-export interface DecoratorProps {
-	children: ReactNode
-	classes?: string[]
-}
-
-const Decorator: FC<DecoratorProps> = ({
-	children,
-	classes = []
-}: DecoratorProps) => {
-	const decoratorClasses = useStyles()
-
-	return (
-		<div
-			className={cn(decoratorClasses.decorator, 'decorator', ...classes)}
-		>
-			{children}
-		</div>
-	)
-}
-
-export default Decorator
diff --git a/.storybook/__tests__/Decorator.test.tsx b/.storybook/__tests__/Decorator.test.tsx
deleted file mode 100644
index 34f5525f..00000000
--- a/.storybook/__tests__/Decorator.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import Decorator, { DecoratorProps } from '../Decorator'
-import { shallow, ShallowWrapper } from 'enzyme'
-
-let wrapper: ShallowWrapper<DecoratorProps>
-
-describe('Decorator', () => {
-	it('renders', () => {
-		wrapper = shallow(<Decorator>Decorator</Decorator>)
-
-		expect(wrapper).toHaveLength(1)
-	})
-})
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index c1be6a07..ed66ce63 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -212,24 +212,20 @@ exports[`Storyshots Input Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="decorator-0-2-5 decorator"
+    className="container-0-2-5 container-d0-0-2-8"
   >
-    <div
-      className="container-0-2-6 container-d0-0-2-9"
-    >
-      <input
-        className="ant-input"
-        data-test="input"
-        disabled={false}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder=""
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      className="ant-input"
+      data-test="input"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder=""
+      type="text"
+      value=""
+    />
   </div>
 </div>
 `;
@@ -239,24 +235,20 @@ exports[`Storyshots Input Error 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="decorator-0-2-5 decorator"
+    className="container-0-2-5 container-d5-0-2-14"
   >
-    <div
-      className="container-0-2-6 container-d5-0-2-15"
-    >
-      <input
-        className="ant-input error-0-2-7"
-        data-test="input"
-        disabled={false}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder=""
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      className="ant-input error"
+      data-test="input"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder=""
+      type="text"
+      value=""
+    />
   </div>
 </div>
 `;
@@ -266,24 +258,20 @@ exports[`Storyshots Input Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="decorator-0-2-5 decorator"
+    className="container-0-2-5 container-d4-0-2-13"
   >
-    <div
-      className="container-0-2-6 container-d4-0-2-14"
-    >
-      <input
-        className="ant-input"
-        data-test="input"
-        disabled={false}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder=""
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      className="ant-input"
+      data-test="input"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder=""
+      type="text"
+      value=""
+    />
   </div>
 </div>
 `;
@@ -293,20 +281,16 @@ exports[`Storyshots Input Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="decorator-0-2-5 decorator"
+    className="container-0-2-5 container-d3-0-2-11"
   >
     <div
-      className="container-0-2-6 container-d3-0-2-12"
+      className="inputSkeleton-0-2-7"
     >
-      <div
-        className="inputSkeleton-0-2-8"
+      <span
+        className="container-0-2-3 container-d1-0-2-12"
       >
-        <span
-          className="container-0-2-3 container-d1-0-2-13"
-        >
-           
-        </span>
-      </div>
+         
+      </span>
     </div>
   </div>
 </div>
@@ -317,24 +301,20 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="decorator-0-2-5 decorator"
+    className="container-0-2-5 container-d1-0-2-9"
   >
-    <div
-      className="container-0-2-6 container-d1-0-2-10"
-    >
-      <input
-        className="ant-input"
-        data-test="input"
-        disabled={false}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder="Search..."
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      className="ant-input"
+      data-test="input"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Search..."
+      type="text"
+      value=""
+    />
   </div>
 </div>
 `;
@@ -605,31 +585,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-16"
+    className="container-0-2-15"
   >
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-17"
     >
       <span
-        className="container-0-2-3 container-d2-0-2-19 skeleton-0-2-17"
+        className="container-0-2-3 container-d2-0-2-18 skeleton-0-2-16"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-17"
     >
       <span
-        className="container-0-2-3 container-d3-0-2-20 skeleton-0-2-17"
+        className="container-0-2-3 container-d3-0-2-19 skeleton-0-2-16"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-17"
     >
       <span
-        className="container-0-2-3 container-d4-0-2-21 skeleton-0-2-17"
+        className="container-0-2-3 container-d4-0-2-20 skeleton-0-2-16"
       >
          
       </span>
@@ -732,10 +712,10 @@ exports[`Storyshots Select Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d0-0-2-27"
+    className="container-0-2-22 container-d0-0-2-26"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -828,10 +808,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d2-0-2-29"
+    className="container-0-2-22 container-d2-0-2-28"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -878,7 +858,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-26"
+            className="option-0-2-25"
           >
             <span>
               Lorem
@@ -929,10 +909,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d1-0-2-28"
+    className="container-0-2-22 container-d1-0-2-27"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -979,10 +959,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-26"
+            className="option-0-2-25"
           >
             <span
-              className="icon-0-2-25"
+              className="icon-0-2-24"
             >
               <svg
                 fill="#7E8083"
@@ -1041,10 +1021,10 @@ exports[`Storyshots Select Search 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d3-0-2-30"
+    className="container-0-2-22 container-d3-0-2-29"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1137,7 +1117,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d6-0-2-32"
+    className="container-0-2-3 container-d6-0-2-31"
   >
      
   </span>
@@ -1149,27 +1129,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-32"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-32"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-32"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-32"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-32"
   >
      
   </span>
@@ -1181,7 +1161,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d5-0-2-31"
+    className="container-0-2-3 container-d5-0-2-30"
   >
      
   </span>
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
index 9a637a8c..7ebf7889 100644
--- a/src/components/Form/Form.stories.tsx
+++ b/src/components/Form/Form.stories.tsx
@@ -1,5 +1,4 @@
 import { basicOptions } from '../RadioGroup/fixtures/sample_options'
-import Decorator from '../../../.storybook/Decorator'
 import { iconOptions } from '../Select/fixtures/sample_options'
 import React from 'react'
 import treeData from '../Tree/fixtures/0_sample_data'
@@ -12,13 +11,6 @@ export default {
 		onSubmit: { control: { disable: true } }
 	},
 	component: Form,
-	decorators: [
-		(ComponentStory: Story) => (
-			<Decorator>
-				<ComponentStory />
-			</Decorator>
-		)
-	],
 	parameters: {
 		// disabled because shallow rendering gives warning, but FormTree only works with shallow render
 		storyshots: { disable: true }
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 0e9a187b..54ea78d1 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -1,4 +1,3 @@
-import Decorator from '../../../.storybook/Decorator'
 import React from 'react'
 import { Input, InputProps } from './index'
 import { Meta, Story } from '@storybook/react/types-6-0'
@@ -9,13 +8,6 @@ export default {
 		value: { control: { disable: true } }
 	},
 	component: Input,
-	decorators: [
-		(ComponentStory: Story) => (
-			<Decorator>
-				<ComponentStory />
-			</Decorator>
-		)
-	],
 	title: 'Input'
 } as Meta
 
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 84ac83b7..a099b3be 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -69,7 +69,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 
 	const inputClasses: string = cn(
 		{
-			[componentClasses.error]: error
+			error
 		},
 		classes
 	)
diff --git a/src/components/assets/styles/colors.ts b/src/components/assets/styles/colors.ts
index c068a5a4..e83a22c6 100644
--- a/src/components/assets/styles/colors.ts
+++ b/src/components/assets/styles/colors.ts
@@ -1,4 +1,3 @@
-import { darken } from '@storybook/theming'
 import { ColorManipulationTypes, manipulateColor } from 'components/utils'
 
 const { shade, tint } = ColorManipulationTypes