diff --git a/src/components/Common/Common.types.ts b/src/components/Common/Common.types.ts
new file mode 100644
index 0000000..78df018
--- /dev/null
+++ b/src/components/Common/Common.types.ts
@@ -0,0 +1,8 @@
+type InputProps = {
+ label: string;
+ hideLabel?: boolean;
+ helpText?: string;
+ hasError?: boolean;
+};
+
+export type { InputProps };
diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
new file mode 100644
index 0000000..91833fe
--- /dev/null
+++ b/src/components/Common/index.ts
@@ -0,0 +1,3 @@
+import * as T from "./Common.types";
+
+export type { T };
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index 03d2601..e7eeea7 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { match, P } from "ts-pattern";
import * as T from "./Divider.types";
-import { Modal } from "../Box";
+import { Box } from "../Box";
import { cx } from "../../utils";
import { dividerStyles } from "./Divider.styles";
@@ -16,7 +16,7 @@ const Divider = React.forwardRef<
return match({ border })
.with({ border: true }, () => (
-
+
))
.otherwise(() => );
diff --git a/src/components/HelpText.tsx b/src/components/HelpText.tsx
new file mode 100644
index 0000000..e7014c5
--- /dev/null
+++ b/src/components/HelpText.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { cva, VariantProps } from "class-variance-authority";
+import { cx } from "../utils";
+import * as Common from "./Common";
+
+type HelpTextElement = React.ElementRef;
+
+type HelpTextProps = React.ComponentPropsWithoutRef &
+ VariantProps &
+ Pick & {};
+
+const styles = cva(["mt-2", "text-sm", "text-mono-text"], {
+ variants: {
+ hasError: {
+ true: ["text-mono-error"],
+ },
+ },
+ defaultVariants: {
+ hasError: false,
+ },
+});
+
+const HelpText = React.forwardRef(
+ ({ hasError, children, ...props }, forwardedRef) => {
+ const classes = cx(styles({ hasError }));
+ return (
+
+ {children}
+
+ );
+ }
+);
+
+export { HelpText };
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 67d03a2..18c9bd6 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -4,6 +4,7 @@ import { NumericFormat } from "react-number-format";
import type * as T from "./Input.types";
import { Box } from "../Box";
import { Label } from "../Label";
+import { HelpText } from "../HelpText";
import { cx } from "../../utils";
import { inputStyles } from "./Input.styles";
import { match, P } from "ts-pattern";
@@ -93,13 +94,7 @@ const Input = React.forwardRef(
{match(helpText)
.with(P.not(P.nullish), () => (
-
- {helpText}
-
+ {helpText}
))
.otherwise(() => null)}
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index a71f73e..149e1cc 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -18,7 +18,42 @@ const options = [
export const Default: Story = {
render: () => (
-