✨ add error

docs/pages/docs/components/button.mdx

@@ -21,7 +21,7 @@ These sizes are standardized across form components.
   </Container>
 
   <Container align="center" justify={"center"}>
-    <Button size={"medium"}>Button</Button>
+    <Button size={"normal"}>Button</Button>
   </Container>
 
   <Container align="center" justify={"center"}>

docs/pages/docs/components/modal.mdx

@@ -31,7 +31,7 @@ import { Modal } from "@tonightpass/kitchen"
 
   return (
     <Container>
-      <Button size={"medium"} onClick={open}>
+      <Button size={"normal"} onClick={open}>
         Open Modal
       </Button>
 
@@ -64,7 +64,7 @@ import { Modal } from "@tonightpass/kitchen"
 
     return (
       <Container>
-        <Button size={"medium"} onClick={open}>
+        <Button size={"normal"} onClick={open}>
           Open Modal (with disabled actions)
         </Button>
         <Modal.Modal active={active} onClickOutside={close}>
@@ -104,7 +104,7 @@ import { Modal } from "@tonightpass/kitchen"
 
     return (
       <Container>
-        <Button size={"medium"} onClick={open}>
+        <Button size={"normal"} onClick={open}>
           Open Modal (with callback)
         </Button>
         <Modal.Modal
@@ -140,7 +140,7 @@ import { Modal } from "@tonightpass/kitchen"
 
     return (
       <Container>
-        <Button size={"medium"} onClick={open}>
+        <Button size={"normal"} onClick={open}>
           Open Modal (with inset)
         </Button>
         <Modal.Modal active={active} onClickOutside={close}>

examples/next-typescript/pages/drawer.tsx

@@ -16,7 +16,7 @@ const DrawerPage: NextPage = () => {
     >
       <Container>
         <Text>default</Text>
-        <Button size={"medium"} onClick={() => setActive1(!active1)}>
+        <Button size={"normal"} onClick={() => setActive1(!active1)}>
           Open Drawer
         </Button>
         <Drawer show={active1} onDismiss={() => setActive1(false)}>
@@ -33,7 +33,7 @@ const DrawerPage: NextPage = () => {
       </Container>
       <Container>
         <Text>custom height</Text>
-        <Button size={"medium"} onClick={() => setActive2(!active2)}>
+        <Button size={"normal"} onClick={() => setActive2(!active2)}>
           Open Drawer (with custom height)
         </Button>
         <Drawer show={active2} onDismiss={() => setActive2(false)} height={300}>
@@ -50,7 +50,7 @@ const DrawerPage: NextPage = () => {
       </Container>
       <Container>
         <Text>callback</Text>
-        <Button size={"medium"} onClick={() => setActive3(!active3)}>
+        <Button size={"normal"} onClick={() => setActive3(!active3)}>
           Open Drawer (with callback)
         </Button>
         <Drawer

examples/next-typescript/pages/error.tsx

@@ -0,0 +1,91 @@
+import { Container, Error, Text } from "@tonightpass/kitchen";
+import { NextPage } from "next";
+import React from "react";
+
+const ErrorPage: NextPage = () => {
+  return (
+    <>
+      <Container
+        gap={10}
+        style={{
+          maxWidth: 700,
+          margin: "0 auto",
+        }}
+      >
+        <Container gap={5}>
+          <Text>default</Text>
+          <Error>This email address is already in use.</Error>
+        </Container>
+
+        <Container gap={5}>
+          <Text>custom label</Text>
+          <Error label="Email Error">
+            This email address is already in use.
+          </Error>
+        </Container>
+
+        <Container gap={5}>
+          <Text>no label</Text>
+          <Error label={false}>This email address is already in use. </Error>
+        </Container>
+
+        <Container gap={5}>
+          <Text>sizes</Text>
+          <Container direction={["column", "row", "row"]} row>
+            <Container align={"flex-start"}>
+              <Error size="small">This email is in use.</Error>
+            </Container>
+            <Container align={"flex-start"}>
+              <Error>This email is in use.</Error>
+            </Container>
+            <Container align={"flex-start"}>
+              <Error size="large">This email is in use.</Error>
+            </Container>
+          </Container>
+        </Container>
+
+        <Container gap={5}>
+          <Text>multiline</Text>
+          <Container>
+            <Container>
+              <Error size="small">
+                A valid email address is required so that we can verify your
+                GitHub installation. In the event that you cannot provide a
+                valid email address, please contact support.
+              </Error>
+            </Container>
+            <Container>
+              <Error>
+                A valid email address is required so that we can verify your
+                GitHub installation. In the event that you cannot provide a
+                valid email address, please contact support.
+              </Error>
+            </Container>
+            <Container>
+              <Error size="large">
+                A valid email address is required so that we can verify your
+                GitHub installation. In the event that you cannot provide a
+                valid email address, please contact support.
+              </Error>
+            </Container>
+          </Container>
+        </Container>
+
+        <Container gap={5}>
+          <Text>with an `error` property</Text>
+          <Container row>
+            <Error
+              error={{
+                message: "The request failed.",
+                action: "Contact Us",
+                link: "https://tonightpass.com/contact",
+              }}
+            />
+          </Container>
+        </Container>
+      </Container>
+    </>
+  );
+};
+
+export default ErrorPage;

examples/next-typescript/pages/index.tsx

@@ -51,6 +51,7 @@ const IndexPage: NextPage = () => {
       <Link href={"/button"}>Button</Link>
       <Link href={"/checkbox"}>Checkbox</Link>
       <Link href={"/drawer"}>Drawer</Link>
+      <Link href={"/error"}>Error</Link>
       <Link href={"/icon"}>Icon</Link>
       <Link href={"/link"}>Link</Link>
       <Link href={"/modal"}>Modal</Link>

examples/next-typescript/pages/link.tsx

@@ -66,7 +66,7 @@ const LinkPage: NextPage = () => {
             </Link>
           </Container>
 
-          <Container>
+          <Container align={"flex-start"}>
             <Text size={"small"}>secondary</Text>
             <Link href="#" variant="secondary">
               Secondary variant

examples/next-typescript/pages/modal.tsx

@@ -23,7 +23,7 @@ const ModalPage: NextPage = () => {
     >
       <Container>
         <Text>default</Text>
-        <Button size={"medium"} onClick={open1}>
+        <Button size={"normal"} onClick={open1}>
           Open Modal
         </Button>
         <Modal.Modal active={active1} onClickOutside={close1}>
@@ -45,7 +45,7 @@ const ModalPage: NextPage = () => {
       </Container>
       <Container>
         <Text>disabled actions</Text>
-        <Button size={"medium"} onClick={open2}>
+        <Button size={"normal"} onClick={open2}>
           Open Modal (with disabled actions)
         </Button>
         <Modal.Modal active={active2} onClickOutside={close2}>
@@ -69,7 +69,7 @@ const ModalPage: NextPage = () => {
       </Container>
       <Container>
         <Text>callback</Text>
-        <Button size={"medium"} onClick={open3}>
+        <Button size={"normal"} onClick={open3}>
           Open Modal (with callback)
         </Button>
         <Modal.Modal
@@ -96,7 +96,7 @@ const ModalPage: NextPage = () => {
 
       <Container>
         <Text>inset</Text>
-        <Button size={"medium"} onClick={open4}>
+        <Button size={"normal"} onClick={open4}>
           Open Modal (with inset)
         </Button>
         <Modal.Modal active={active4} onClickOutside={close4}>

packages/kitchen/src/components/Badge/index.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import styled from "styled-components";
-import { KitchenComponent } from "../../types";
+import { KitchenComponent, NormalSizes } from "../../types";
 
 export type BadgeProps = KitchenComponent & {
   /**
    * The size of the badge.
    * @default "normal"
    */
-  size?: "small" | "normal" | "large";
+  size?: NormalSizes;
 
   /**
    * The type of the badge.

packages/kitchen/src/components/Button/index.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
-import { KitchenComponent } from "../../types";
+import { KitchenComponent, NormalSizes } from "../../types";
 import { AccentColors } from "../../types/theme";
 import convertRGBToRGBA from "../../utils/convertRGBToRGBA";
 import isNumber from "../../utils/isNumber";
 import Spinner from "../Spinner";
 
 export type ButtonProps = KitchenComponent & {
   shape?: "square" | "round";
-  size?: "small" | "medium" | "large";
+  size?: NormalSizes;
   loading?: boolean;
   disabled?: boolean;
   onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
@@ -87,7 +87,7 @@ const Button = styled(
         return "4px 8px";
       case "large":
         return "12px 16px";
-      case "medium":
+      case "normal":
       default:
         return "8px 12px";
     }
@@ -188,7 +188,7 @@ const Button = styled(
         return props.theme.size.small;
       case "large":
         return props.theme.size.medium;
-      case "medium":
+      case "normal":
       default:
         return props.theme.size.normal;
     }

packages/kitchen/src/components/Error/index.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { RiErrorWarningLine, RiExternalLinkLine } from "react-icons/ri";
+import styled from "styled-components";
+import { KitchenComponent, NormalSizes } from "../../types";
+import Icon from "../Icon";
+import Text from "../Text";
+import Link from "../Link";
+
+export type ErrorProps = KitchenComponent & {
+  /**
+   * The label of the error.
+   * @default true
+   */
+  label?: boolean | string;
+
+  /**
+   * The size of the error.
+   * @default "normal"
+   */
+  size?: NormalSizes;
+
+  error?: { message: string; action?: string; link?: string };
+};
+
+const Error = styled(
+  ({ label = true, size, error, children, ...props }: ErrorProps) => {
+    return (
+      <div {...props}>
+        <IconContainer>
+          <Icon
+            icon={RiErrorWarningLine}
+            accent={"danger"}
+            size={size === "small" ? 18 : size === "large" ? 24 : 20}
+            align="bottom"
+          />
+        </IconContainer>
+        <TextContainer>
+          <ErrorText size={size} accent={"danger"}>
+            {label && (
+              <Label>
+                {typeof label === "string" ? label : "Error"}
+                {label ? ": " : ""}
+              </Label>
+            )}
+            <Content>{error ? error.message : children}</Content>
+            {error && (
+              <Action href={error.link} variant="blend">
+                {error.action}
+                <ActionIcon
+                  accent={"danger"}
+                  icon={RiExternalLinkLine}
+                  size={size}
+                />
+              </Action>
+            )}
+          </ErrorText>
+        </TextContainer>
+      </div>
+    );
+  }
+)<ErrorProps>`
+  display: flex;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+`;
+
+const IconContainer = styled.div``;
+
+const TextContainer = styled.div`
+  margin-left: 8px;
+`;
+
+const ErrorText = styled(Text)<{ size: ErrorProps["size"] }>`
+  font-size: ${(props) => {
+    switch (props.size) {
+      case "small":
+        return props.theme.size.small;
+      case "large":
+        return props.theme.size.medium;
+      case "normal":
+      default:
+        return props.theme.size.normal;
+    }
+  }};
+  word-break: break-word;
+`;
+
+const Label = styled.b`
+  font-size: inherit;
+  font-weight: ${({ theme }) => theme.weight.semiBold};
+  color: ${({ theme }) => theme.colors.accent.danger};
+`;
+
+const Content = styled.span`
+  font-size: inherit;
+  font-family: inherit;
+  color: ${({ theme }) => theme.colors.accent.danger};
+`;
+
+const Action = styled(Link)`
+  display: inline-block;
+  margin-left: ${({ theme }) => theme.gap.tiny};
+`;
+
+const ActionIcon = styled(Icon)`
+  margin-left: ${({ theme }) => theme.gap.tiny};
+`;
+
+export default Error;