diff --git a/package.json b/package.json
index c11bee8..635c08e 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,7 @@
   "repository": "https://git.silentsilas.com/Intended/attendant.git",
   "scripts": {
     "start": "react-scripts start",
-    "build": "cross-env NODE_ENV=production tsc -b && tsc --declaration",
-    "pub": "npm version patch --force && npm publish",
+    "build": "cross-env NODE_ENV=production tsc -b",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
diff --git a/src/App.tsx b/src/App.tsx
index cba6f33..5c68585 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,23 @@
 import React, { useState } from "react";
 
-import { ProgressIndicator } from "./stories/ProgressIndicator";
+import ProgressIndicator from "./stories/ProgressIndicator";
 
-import { Header1 } from "./stories/Header1";
-import { Header2 } from "./stories/Header2";
+import Header1 from "./stories/Header1";
+import Header2 from "./stories/Header2";
 
-import { Button } from "./stories/Button";
-import { IconArrow } from "./stories/IconArrow";
-import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";
+import Button from "./stories/Button";
+import IconArrow from "./stories/IconArrow";
+import InputButtonWithIcon from "./stories/InputButtonWithIcon";
 
-import { Label } from "./stories/Label";
-import { Input } from "./stories/Input";
-import { AutoResizingTextArea } from "./stories/AutoResizingTextArea";
-import { Select } from "./stories/Select";
+import Label from "./stories/Label";
+import Input from "./stories/Input";
+import AutoResizingTextArea from "./stories/AutoResizingTextArea";
+import Select from "./stories/Select";
 
-import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
-import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
+import CenteredContainer from "./stories/utilities/CenteredContainer";
+import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer";
+import Spacer from "./stories/utilities/Spacer";
+import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
 
 function App() {
   const [input1, setInput1] = useState("");
diff --git a/src/App2.tsx b/src/App2.tsx
index 9999722..af3d2ce 100644
--- a/src/App2.tsx
+++ b/src/App2.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { SplashIconHeader } from "./stories/SplashIconHeader";
+import SplashIconHeader from "./stories/SplashIconHeader";
 
 function App2() {
   return (
diff --git a/src/SecretCreationPage1.tsx b/src/SecretCreationPage1.tsx
index cfbc852..16ef23e 100644
--- a/src/SecretCreationPage1.tsx
+++ b/src/SecretCreationPage1.tsx
@@ -1,19 +1,19 @@
 import React, { useState } from "react";
 
-import { ProgressIndicator } from "./stories/ProgressIndicator";
+import ProgressIndicator from "./stories/ProgressIndicator";
 
-import { Header2 } from "./stories/Header2";
+import Header2 from "./stories/Header2";
 
-import { Button } from "./stories/Button";
-import { IconArrow } from "./stories/IconArrow";
+import Button from "./stories/Button";
+import IconArrow from "./stories/IconArrow";
 
-import { Label } from "./stories/Label";
-import { FileInput } from "./stories/FileInput";
-import { TextArea } from "./stories/TextArea";
+import Label from "./stories/Label";
+import FileInput from "./stories/FileInput";
+import TextArea from "./stories/TextArea";
 
-import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
+import CenteredContainer from "./stories/utilities/CenteredContainer";
+import Spacer from "./stories/utilities/Spacer";
+import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
 
 const SecretCreationPage1 = () => {
   const [secretInput, setSecretInput] = useState("");
diff --git a/src/SecretCreationPage2.tsx b/src/SecretCreationPage2.tsx
index 9ae12a0..6a6b7a6 100644
--- a/src/SecretCreationPage2.tsx
+++ b/src/SecretCreationPage2.tsx
@@ -1,20 +1,20 @@
 import React, { useState } from "react";
 
-import { ProgressIndicator } from "./stories/ProgressIndicator";
+import ProgressIndicator from "./stories/ProgressIndicator";
 
-import { Header2 } from "./stories/Header2";
+import Header2 from "./stories/Header2";
 
-import { Button } from "./stories/Button";
-import { IconArrow } from "./stories/IconArrow";
+import Button from "./stories/Button";
+import IconArrow from "./stories/IconArrow";
 
-import { Label } from "./stories/Label";
-import { Input } from "./stories/Input";
-import { Select } from "./stories/Select";
+import Label from "./stories/Label";
+import Input from "./stories/Input";
+import Select from "./stories/Select";
 
-import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
-import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
+import CenteredContainer from "./stories/utilities/CenteredContainer";
+import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer";
+import Spacer from "./stories/utilities/Spacer";
+import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
 
 const SecretCreationPage2 = () => {
   const [recipientInput, setRecipientInput] = useState("");
diff --git a/src/SecretCreationPage3.tsx b/src/SecretCreationPage3.tsx
index ae58cd4..6893634 100644
--- a/src/SecretCreationPage3.tsx
+++ b/src/SecretCreationPage3.tsx
@@ -1,20 +1,20 @@
 import React from "react";
 
-import { ProgressIndicator } from "./stories/ProgressIndicator";
+import ProgressIndicator from "./stories/ProgressIndicator";
 
-import { Header2 } from "./stories/Header2";
+import Header2 from "./stories/Header2";
 
-import { Button } from "./stories/Button";
-import { IconArrow } from "./stories/IconArrow";
-import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";
+import Button from "./stories/Button";
+import IconArrow from "./stories/IconArrow";
+import InputButtonWithIcon from "./stories/InputButtonWithIcon";
 
-import { Label } from "./stories/Label";
-import { Input } from "./stories/Input";
+import Label from "./stories/Label";
+import Input from "./stories/Input";
 
-import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
-import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
+import CenteredContainer from "./stories/utilities/CenteredContainer";
+import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer";
+import Spacer from "./stories/utilities/Spacer";
+import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
 
 const SecretCreationPage3 = () => {
   return (
diff --git a/src/SecretRevealPage.tsx b/src/SecretRevealPage.tsx
index 56746fd..230aec8 100644
--- a/src/SecretRevealPage.tsx
+++ b/src/SecretRevealPage.tsx
@@ -1,19 +1,19 @@
 import React from "react";
 
-import { Header2 } from "./stories/Header2";
-import { Header3 } from "./stories/Header3";
+import Header2 from "./stories/Header2";
+import Header3 from "./stories/Header3";
 
-import { Button } from "./stories/Button";
+import Button from "./stories/Button";
 
-import { Label } from "./stories/Label";
-import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";
+import Label from "./stories/Label";
+import InputButtonWithIcon from "./stories/InputButtonWithIcon";
 
-import { TextAreaParagraph } from "./stories/TextAreaParagraph";
+import TextAreaParagraph from "./stories/TextAreaParagraph";
 
-import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
-import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
+import CenteredContainer from "./stories/utilities/CenteredContainer";
+import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer";
+import Spacer from "./stories/utilities/Spacer";
+import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
 
 const SecretRevealPage = () => {
   return (
diff --git a/src/SplashPage.tsx b/src/SplashPage.tsx
index 94733e6..b927b3a 100644
--- a/src/SplashPage.tsx
+++ b/src/SplashPage.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 
-import { SplashIconHeader } from "./stories/SplashIconHeader";
+import SplashIconHeader from "./stories/SplashIconHeader";
 
-import { Header1 } from "./stories/Header1";
-import { Header3 } from "./stories/Header3";
+import Header1 from "./stories/Header1";
+import Header3 from "./stories/Header3";
 
-import { Button } from "./stories/Button";
+import Button from "./stories/Button";
 
-import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { Spacer } from "./stories/utilities/Spacer";
+import CenteredContainer from "./stories/utilities/CenteredContainer";
+import Spacer from "./stories/utilities/Spacer";
 
 const SplashPage = () => {
   return (
diff --git a/src/VerifyPage.tsx b/src/VerifyPage.tsx
index ae91d8b..735d064 100644
--- a/src/VerifyPage.tsx
+++ b/src/VerifyPage.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 
-import { Header2 } from "./stories/Header2";
-import { Header3 } from "./stories/Header3";
+import Header2 from "./stories/Header2";
+import Header3 from "./stories/Header3";
 
-import { Button } from "./stories/Button";
+import Button from "./stories/Button";
 
-import { Label } from "./stories/Label";
-import { Input } from "./stories/Input";
+import Label from "./stories/Label";
+import Input from "./stories/Input";
 
-import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
+import CenteredContainer from "./stories/utilities/CenteredContainer";
+import Spacer from "./stories/utilities/Spacer";
+import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
 
 const VerifyPage = () => {
   return (
diff --git a/src/stories/AutoResizingTextArea.stories.tsx b/src/stories/AutoResizingTextArea.stories.tsx
index ff69c8e..63afd33 100644
--- a/src/stories/AutoResizingTextArea.stories.tsx
+++ b/src/stories/AutoResizingTextArea.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { AutoResizingTextAreaProps } from "./AutoResizingTextArea";
 
-import { AutoResizingTextArea } from "./AutoResizingTextArea";
+import AutoResizingTextArea from "./AutoResizingTextArea";
 
 export default {
   title: "TextAreas/AutoResizingTextArea",
diff --git a/src/stories/AutoResizingTextArea.tsx b/src/stories/AutoResizingTextArea.tsx
index 78dda23..6de9159 100644
--- a/src/stories/AutoResizingTextArea.tsx
+++ b/src/stories/AutoResizingTextArea.tsx
@@ -60,7 +60,7 @@ const AutoResizingTextArea: FC<AutoResizingTextAreaProps> = ({
   );
 };
 
-export { AutoResizingTextArea };
+export default AutoResizingTextArea;
 
 interface DivProps {
   height: string;
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 6b57d0b..dde3d4b 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -3,8 +3,8 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { ButtonProps } from "./Button";
 
-import { Button } from "./Button";
-import { IconArrow } from "./IconArrow";
+import Button from "./Button";
+import IconArrow from "./IconArrow";
 
 export default {
   title: "Button",
diff --git a/src/stories/FileInput.stories.tsx b/src/stories/FileInput.stories.tsx
index ac03ee6..60f69a5 100644
--- a/src/stories/FileInput.stories.tsx
+++ b/src/stories/FileInput.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { FileInputProps } from "./FileInput";
 
-import { FileInput } from "./FileInput";
+import FileInput from "./FileInput";
 
 export default {
   title: "FileInput",
diff --git a/src/stories/FileInput.tsx b/src/stories/FileInput.tsx
index bfdda97..7c2f266 100644
--- a/src/stories/FileInput.tsx
+++ b/src/stories/FileInput.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FC, useRef } from "react";
 import CSS from "csstype";
 
-import { InputButtonWithIcon } from "./InputButtonWithIcon";
+import InputButtonWithIcon from "./InputButtonWithIcon";
 
 export interface FileInputProps {
   style?: CSS.Properties;
@@ -46,4 +46,4 @@ const FileInput: FC<FileInputProps> = ({ style, id, handleFile, value }) => {
   );
 };
 
-export { FileInput };
+export default FileInput;
diff --git a/src/stories/Header1.stories.tsx b/src/stories/Header1.stories.tsx
index 2c7a9ec..6dee693 100644
--- a/src/stories/Header1.stories.tsx
+++ b/src/stories/Header1.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { Header1Props } from "./Header1";
 
-import { Header1 } from "./Header1";
+import Header1 from "./Header1";
 
 export default {
   title: "Headers/Header1",
diff --git a/src/stories/Header1.tsx b/src/stories/Header1.tsx
index f58917c..0b83956 100644
--- a/src/stories/Header1.tsx
+++ b/src/stories/Header1.tsx
@@ -13,7 +13,7 @@ const Header1: FC<Header1Props> = ({ children, style }) => {
   return <StyledHeader1 style={style}>{children}</StyledHeader1>;
 };
 
-export { Header1 };
+export default Header1;
 
 const StyledHeader1 = styled.h2<Header1Props>`
   margin: 0.7rem auto;
diff --git a/src/stories/Header2.stories.tsx b/src/stories/Header2.stories.tsx
index e7f9a59..ceae808 100644
--- a/src/stories/Header2.stories.tsx
+++ b/src/stories/Header2.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { Header2Props } from "./Header2";
 
-import { Header2 } from "./Header2";
+import Header2 from "./Header2";
 
 export default {
   title: "Headers/Header2",
diff --git a/src/stories/Header2.tsx b/src/stories/Header2.tsx
index c6e4c17..5d7a91d 100644
--- a/src/stories/Header2.tsx
+++ b/src/stories/Header2.tsx
@@ -13,7 +13,7 @@ const Header2: FC<Header2Props> = ({ children, style }) => {
   return <StyledHeader2 style={style}>{children}</StyledHeader2>;
 };
 
-export { Header2 };
+export default Header2;
 
 const StyledHeader2 = styled.h2<Header2Props>`
   font-size: 3.2rem;
diff --git a/src/stories/Header3.stories.tsx b/src/stories/Header3.stories.tsx
index d43029b..ccf93cf 100644
--- a/src/stories/Header3.stories.tsx
+++ b/src/stories/Header3.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { Header3Props } from "./Header3";
 
-import { Header3 } from "./Header3";
+import Header3 from "./Header3";
 
 export default {
   title: "Headers/Header3",
diff --git a/src/stories/Header3.tsx b/src/stories/Header3.tsx
index 8561e37..3d118b6 100644
--- a/src/stories/Header3.tsx
+++ b/src/stories/Header3.tsx
@@ -18,7 +18,7 @@ const Header3: FC<Header3Props> = ({ children, style, small }) => {
   );
 };
 
-export { Header3 };
+export default Header3;
 
 const StyledHeader3 = styled.h3<Header3Props>`
   font-size: ${(props) =>
diff --git a/src/stories/Icon.tsx b/src/stories/Icon.tsx
index 6f19ca9..9f19175 100644
--- a/src/stories/Icon.tsx
+++ b/src/stories/Icon.tsx
@@ -88,7 +88,7 @@ const Icon: FC<IconProps> = ({ style, iconName, onClick }) => {
   );
 };
 
-export { Icon };
+export default Icon;
 
 const StyledSpan = styled.span<IconProps>`
   position: absolute;
diff --git a/src/stories/IconArrow.tsx b/src/stories/IconArrow.tsx
index 8a3c477..0e08141 100644
--- a/src/stories/IconArrow.tsx
+++ b/src/stories/IconArrow.tsx
@@ -65,4 +65,4 @@ const IconArrow: FC<IconArrowProps> = ({ arrowDirection }) => {
   );
 };
 
-export { IconArrow };
+export default IconArrow;
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
index e61e241..99ec41c 100644
--- a/src/stories/Input.stories.tsx
+++ b/src/stories/Input.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { InputProps } from "./Input";
 
-import { Input } from "./Input";
+import Input from "./Input";
 
 export default {
   title: "Input",
diff --git a/src/stories/Input.tsx b/src/stories/Input.tsx
index 56493fe..c531b39 100644
--- a/src/stories/Input.tsx
+++ b/src/stories/Input.tsx
@@ -48,7 +48,7 @@ const Input: FC<InputProps> = ({
   );
 };
 
-export { Input };
+export default Input;
 
 const StyledInput = styled.input<InputProps>`
   border-radius: ${borderRadius.medium};
diff --git a/src/stories/InputButtonWithIcon.stories.tsx b/src/stories/InputButtonWithIcon.stories.tsx
index 25c452a..77ffbcc 100644
--- a/src/stories/InputButtonWithIcon.stories.tsx
+++ b/src/stories/InputButtonWithIcon.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { InputButtonWithIconProps } from "./InputButtonWithIcon";
 
-import { InputButtonWithIcon } from "./InputButtonWithIcon";
+import InputButtonWithIcon from "./InputButtonWithIcon";
 
 export default {
   title: "InputButtonWithIcon",
diff --git a/src/stories/InputButtonWithIcon.tsx b/src/stories/InputButtonWithIcon.tsx
index b097d4b..b47f4f9 100644
--- a/src/stories/InputButtonWithIcon.tsx
+++ b/src/stories/InputButtonWithIcon.tsx
@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import styled, { css } from "styled-components";
 import CSS from "csstype";
 import { rgba } from "polished";
-import { Icon } from "./Icon";
+import Icon from "./Icon";
 
 import {
   color,
@@ -44,7 +44,7 @@ const InputButtonWithIcon: FC<InputButtonWithIconProps> = ({
   );
 };
 
-export { InputButtonWithIcon };
+export default InputButtonWithIcon;
 
 const StyledDiv = styled.div`
   position: relative;
diff --git a/src/stories/Label.stories.tsx b/src/stories/Label.stories.tsx
index aed1a96..78d514a 100644
--- a/src/stories/Label.stories.tsx
+++ b/src/stories/Label.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { LabelProps } from "./Label";
 
-import { Label } from "./Label";
+import Label from "./Label";
 
 export default {
   title: "Label",
diff --git a/src/stories/Label.tsx b/src/stories/Label.tsx
index 061f285..9408d67 100644
--- a/src/stories/Label.tsx
+++ b/src/stories/Label.tsx
@@ -18,7 +18,7 @@ const Label: FC<LabelProps> = ({ children, style, htmlFor }) => {
   );
 };
 
-export { Label };
+export default Label;
 
 const StyledLabel = styled.label<LabelProps>`
   color: ${color.white};
diff --git a/src/stories/ProgressIndicator.stories.tsx b/src/stories/ProgressIndicator.stories.tsx
index b0e5a21..6fc0d7d 100644
--- a/src/stories/ProgressIndicator.stories.tsx
+++ b/src/stories/ProgressIndicator.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { ProgressIndicatorProps } from "./ProgressIndicator";
 
-import { ProgressIndicator } from "./ProgressIndicator";
+import ProgressIndicator from "./ProgressIndicator";
 
 export default {
   title: "SVGs/ProgressIndicator",
diff --git a/src/stories/ProgressIndicator.tsx b/src/stories/ProgressIndicator.tsx
index 2f92635..cc54db2 100644
--- a/src/stories/ProgressIndicator.tsx
+++ b/src/stories/ProgressIndicator.tsx
@@ -31,4 +31,4 @@ const ProgressIndicator = ({
   );
 };
 
-export { ProgressIndicator };
+export default ProgressIndicator;
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
index 4375d38..1db178e 100644
--- a/src/stories/Select.stories.tsx
+++ b/src/stories/Select.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { SelectProps } from "./Select";
 
-import { Select } from "./Select";
+import Select from "./Select";
 
 export default {
   title: "Select",
diff --git a/src/stories/Select.tsx b/src/stories/Select.tsx
index 838ed2f..54538f0 100644
--- a/src/stories/Select.tsx
+++ b/src/stories/Select.tsx
@@ -27,7 +27,7 @@ const Select: FC<SelectProps> = ({ style, id, value = "github", onChange }) => {
   );
 };
 
-export { Select };
+export default Select;
 
 const StyledSelect = styled.select<SelectProps>`
   color: ${color.darkblue};
diff --git a/src/stories/SplashIconHeader.stories.tsx b/src/stories/SplashIconHeader.stories.tsx
index ec25496..2a3158f 100644
--- a/src/stories/SplashIconHeader.stories.tsx
+++ b/src/stories/SplashIconHeader.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { SplashIconHeader } from "./SplashIconHeader";
+import SplashIconHeader from "./SplashIconHeader";
 
 export default {
   title: "SVGs/SplashIconHeader",
diff --git a/src/stories/SplashIconHeader.tsx b/src/stories/SplashIconHeader.tsx
index 2d542bd..c948ad5 100644
--- a/src/stories/SplashIconHeader.tsx
+++ b/src/stories/SplashIconHeader.tsx
@@ -89,4 +89,4 @@ const SplashIconHeader = () => {
   );
 };
 
-export { SplashIconHeader };
+export default SplashIconHeader;
diff --git a/src/stories/TextArea.stories.tsx b/src/stories/TextArea.stories.tsx
index 4735d75..14bc012 100644
--- a/src/stories/TextArea.stories.tsx
+++ b/src/stories/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { TextAreaProps } from "./TextArea";
 
-import { TextArea } from "./TextArea";
+import TextArea from "./TextArea";
 
 export default {
   title: "TextAreas/TextArea",
diff --git a/src/stories/TextArea.tsx b/src/stories/TextArea.tsx
index 1bab33e..7b17658 100644
--- a/src/stories/TextArea.tsx
+++ b/src/stories/TextArea.tsx
@@ -36,7 +36,7 @@ const TextArea: FC<TextAreaProps> = ({
   );
 };
 
-export { TextArea };
+export default TextArea;
 
 const StyledTextArea = styled.textarea<TextAreaProps>`
   border-radius: ${borderRadius.medium};
diff --git a/src/stories/TextAreaParagraph.stories.tsx b/src/stories/TextAreaParagraph.stories.tsx
index f8cfba8..54210a0 100644
--- a/src/stories/TextAreaParagraph.stories.tsx
+++ b/src/stories/TextAreaParagraph.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { TextAreaParagraphProps } from "./TextAreaParagraph";
 
-import { TextAreaParagraph } from "./TextAreaParagraph";
+import TextAreaParagraph from "./TextAreaParagraph";
 
 export default {
   title: "TextAreas/TextAreaParagraph",
diff --git a/src/stories/TextAreaParagraph.tsx b/src/stories/TextAreaParagraph.tsx
index b07d854..a83c6b1 100644
--- a/src/stories/TextAreaParagraph.tsx
+++ b/src/stories/TextAreaParagraph.tsx
@@ -37,7 +37,7 @@ const TextAreaParagraph: React.FC<TextAreaParagraphProps> = ({
   );
 };
 
-export { TextAreaParagraph };
+export default TextAreaParagraph;
 
 const StyledParagraph = styled.p<TextAreaParagraphProps>`
   border-radius: ${borderRadius.medium};
diff --git a/src/stories/utilities/CenteredContainer.tsx b/src/stories/utilities/CenteredContainer.tsx
index 0f4be27..e6dadf9 100644
--- a/src/stories/utilities/CenteredContainer.tsx
+++ b/src/stories/utilities/CenteredContainer.tsx
@@ -24,7 +24,7 @@ const CenteredContainer: FC<CenteredContainerProps> = ({
   );
 };
 
-export { CenteredContainer };
+export default CenteredContainer;
 
 const StyledDiv = styled.div<CenteredContainerProps>`
   height: 100vh;
diff --git a/src/stories/utilities/SpaceBetweenContainer.tsx b/src/stories/utilities/SpaceBetweenContainer.tsx
index ca9c877..9a8a5e9 100644
--- a/src/stories/utilities/SpaceBetweenContainer.tsx
+++ b/src/stories/utilities/SpaceBetweenContainer.tsx
@@ -20,7 +20,7 @@ const SpaceBetweenContainer: FC<SpaceBetweenContainerProps> = ({
   );
 };
 
-export { SpaceBetweenContainer };
+export default SpaceBetweenContainer;
 
 const StyledDiv = styled.div<SpaceBetweenContainerProps>`
   display: flex;
diff --git a/src/stories/utilities/Spacer.tsx b/src/stories/utilities/Spacer.tsx
index 1e35117..2e5295d 100644
--- a/src/stories/utilities/Spacer.tsx
+++ b/src/stories/utilities/Spacer.tsx
@@ -11,7 +11,7 @@ const Spacer: FC<SpacerProps> = ({ style, space = "2rem" }) => {
   return <StyledDiv style={style} space={space} />;
 };
 
-export { Spacer };
+export default Spacer;
 
 const StyledDiv = styled.div<SpacerProps>`
   height: ${(props) => props.space};
diff --git a/src/stories/utilities/TextAlignWrapper.tsx b/src/stories/utilities/TextAlignWrapper.tsx
index b2e8d04..f61a713 100644
--- a/src/stories/utilities/TextAlignWrapper.tsx
+++ b/src/stories/utilities/TextAlignWrapper.tsx
@@ -22,7 +22,7 @@ const TextAlignWrapper: FC<TextAlignWrapperProps> = ({
   );
 };
 
-export { TextAlignWrapper };
+export default TextAlignWrapper;
 
 const StyledDiv = styled.div<TextAlignWrapperProps>`
   text-align: ${(props) => props.align};