0.1.7

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@intended/intended-ui",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@intended/intended-ui",
-      "version": "0.1.4",
+      "version": "0.1.7",
       "license": "MIT",
       "devDependencies": {
         "@babel/cli": "^7.16.0",
@@ -31,7 +31,7 @@
         "react-scripts": "4.0.3",
         "react-svg": "^14.0.13",
         "styled-components": "^5.3.1",
-        "typescript": "^4.5.2",
+        "typescript": "^4.2.0",
         "web-vitals": "^1.0.1"
       }
     },

package.json

@@ -2,13 +2,14 @@
   "name": "@intended/intended-ui",
   "description": "Storybook UI library for Intended Link",
   "license": "MIT",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": false,
   "main": "dist/index.js",
   "repository": "https://git.silentsilas.com/Intended/attendant.git",
   "scripts": {
     "start": "react-scripts start",
-    "build": "cross-env NODE_ENV=production tsc -b",
+    "build": "cross-env NODE_ENV=production tsc -b && tsc --declaration",
+    "pub": "npm version patch --force && npm publish",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
@@ -65,7 +66,7 @@
     "react-scripts": "4.0.3",
     "react-svg": "^14.0.13",
     "styled-components": "^5.3.1",
-    "typescript": "^4.5.2",
+    "typescript": "^4.2.0",
     "web-vitals": "^1.0.1"
   },
   "files": [

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("");

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 (

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("");

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("");

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 (

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 (

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 (

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 (

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",

src/stories/AutoResizingTextArea.tsx

@@ -60,7 +60,7 @@ const AutoResizingTextArea: FC<AutoResizingTextAreaProps> = ({
   );
 };
 
-export default AutoResizingTextArea;
+export { AutoResizingTextArea };
 
 interface DivProps {
   height: string;

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",

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",

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 default FileInput;
+export { FileInput };

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",

src/stories/Header1.tsx

@@ -13,7 +13,7 @@ const Header1: FC<Header1Props> = ({ children, style }) => {
   return <StyledHeader1 style={style}>{children}</StyledHeader1>;
 };
 
-export default Header1;
+export { Header1 };
 
 const StyledHeader1 = styled.h2<Header1Props>`
   margin: 0.7rem auto;

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",

src/stories/Header2.tsx

@@ -13,7 +13,7 @@ const Header2: FC<Header2Props> = ({ children, style }) => {
   return <StyledHeader2 style={style}>{children}</StyledHeader2>;
 };
 
-export default Header2;
+export { Header2 };
 
 const StyledHeader2 = styled.h2<Header2Props>`
   font-size: 3.2rem;

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",

src/stories/Header3.tsx

@@ -18,7 +18,7 @@ const Header3: FC<Header3Props> = ({ children, style, small }) => {
   );
 };
 
-export default Header3;
+export { Header3 };
 
 const StyledHeader3 = styled.h3<Header3Props>`
   font-size: ${(props) =>

src/stories/Icon.tsx

@@ -88,7 +88,7 @@ const Icon: FC<IconProps> = ({ style, iconName, onClick }) => {
   );
 };
 
-export default Icon;
+export { Icon };
 
 const StyledSpan = styled.span<IconProps>`
   position: absolute;

src/stories/IconArrow.tsx

@@ -65,4 +65,4 @@ const IconArrow: FC<IconArrowProps> = ({ arrowDirection }) => {
   );
 };
 
-export default IconArrow;
+export { IconArrow };

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",

src/stories/Input.tsx

@@ -48,7 +48,7 @@ const Input: FC<InputProps> = ({
   );
 };
 
-export default Input;
+export { Input };
 
 const StyledInput = styled.input<InputProps>`
   border-radius: ${borderRadius.medium};

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",

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 default InputButtonWithIcon;
+export { InputButtonWithIcon };
 
 const StyledDiv = styled.div`
   position: relative;

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",

src/stories/Label.tsx

@@ -18,7 +18,7 @@ const Label: FC<LabelProps> = ({ children, style, htmlFor }) => {
   );
 };
 
-export default Label;
+export { Label };
 
 const StyledLabel = styled.label<LabelProps>`
   color: ${color.white};

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",

src/stories/ProgressIndicator.tsx

@@ -31,4 +31,4 @@ const ProgressIndicator = ({
   );
 };
 
-export default ProgressIndicator;
+export { ProgressIndicator };

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",

src/stories/Select.tsx

@@ -27,7 +27,7 @@ const Select: FC<SelectProps> = ({ style, id, value = "github", onChange }) => {
   );
 };
 
-export default Select;
+export { Select };
 
 const StyledSelect = styled.select<SelectProps>`
   color: ${color.darkblue};

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",

src/stories/SplashIconHeader.tsx

@@ -89,4 +89,4 @@ const SplashIconHeader = () => {
   );
 };
 
-export default SplashIconHeader;
+export { SplashIconHeader };

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",

src/stories/TextArea.tsx

@@ -36,7 +36,7 @@ const TextArea: FC<TextAreaProps> = ({
   );
 };
 
-export default TextArea;
+export { TextArea };
 
 const StyledTextArea = styled.textarea<TextAreaProps>`
   border-radius: ${borderRadius.medium};

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",

src/stories/TextAreaParagraph.tsx

@@ -37,7 +37,7 @@ const TextAreaParagraph: React.FC<TextAreaParagraphProps> = ({
   );
 };
 
-export default TextAreaParagraph;
+export { TextAreaParagraph };
 
 const StyledParagraph = styled.p<TextAreaParagraphProps>`
   border-radius: ${borderRadius.medium};

src/stories/utilities/CenteredContainer.tsx

@@ -24,7 +24,7 @@ const CenteredContainer: FC<CenteredContainerProps> = ({
   );
 };
 
-export default CenteredContainer;
+export { CenteredContainer };
 
 const StyledDiv = styled.div<CenteredContainerProps>`
   height: 100vh;

src/stories/utilities/SpaceBetweenContainer.tsx

@@ -20,7 +20,7 @@ const SpaceBetweenContainer: FC<SpaceBetweenContainerProps> = ({
   );
 };
 
-export default SpaceBetweenContainer;
+export { SpaceBetweenContainer };
 
 const StyledDiv = styled.div<SpaceBetweenContainerProps>`
   display: flex;

src/stories/utilities/Spacer.tsx

@@ -11,7 +11,7 @@ const Spacer: FC<SpacerProps> = ({ style, space = "2rem" }) => {
   return <StyledDiv style={style} space={space} />;
 };
 
-export default Spacer;
+export { Spacer };
 
 const StyledDiv = styled.div<SpacerProps>`
   height: ${(props) => props.space};

src/stories/utilities/TextAlignWrapper.tsx

@@ -22,7 +22,7 @@ const TextAlignWrapper: FC<TextAlignWrapperProps> = ({
   );
 };
 
-export default TextAlignWrapper;
+export { TextAlignWrapper };
 
 const StyledDiv = styled.div<TextAlignWrapperProps>`
   text-align: ${(props) => props.align};