Resolved merge conflicts

@stellar/design-system-website/docs/components/accents/tooltip.mdx

@@ -0,0 +1,21 @@
+---
+slug: /tooltip
+---
+
+# Tooltip
+
+<ComponentDescription componentName="Tooltip" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Tooltip">
+  <Tooltip isVisible isContrast triggerEl={<>Tooltip trigger</>}>
+    Lorem ipsum dolor sit
+  </Tooltip>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Tooltip" />

@stellar/design-system-website/docs/components/inputs/input.mdx

@@ -0,0 +1,19 @@
+---
+slug: /input
+---
+
+# Input
+
+<ComponentDescription componentName="Input" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Input">
+  <Input fieldSize="md" id="input" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Input" />

@stellar/design-system-website/src/componentPreview/inputPreview.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+import CheckIconSvg from "@site/static/img/check-icon.svg";
+
+export const inputPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "label",
+      customValue: "Label",
+      options: [
+        {
+          value: "",
+          label: "No label",
+        },
+        {
+          value: "label",
+          label: "Label",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "placeholder",
+      customValue: "Placeholder",
+      options: [
+        {
+          value: "",
+          label: "No placeholder",
+        },
+        {
+          value: "placeholder",
+          label: "Placeholder",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "fieldSize",
+      options: [
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "xs",
+          label: "XS",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "checkbox",
+      prop: "isLabelUppercase",
+      label: "Uppercase label",
+    },
+    {
+      type: "checkbox",
+      prop: "isPill",
+      label: "Pill",
+    },
+    {
+      type: "checkbox",
+      prop: "isError",
+      label: "Error",
+    },
+    {
+      type: "checkbox",
+      prop: "isExtraPadding",
+      label: "Extra padding",
+    },
+    {
+      type: "checkbox",
+      prop: "isPassword",
+      label: "Password",
+    },
+    {
+      type: "select",
+      prop: "rightElement",
+      customValue: <CheckIconSvg />,
+      options: [
+        {
+          value: "",
+          label: "No element",
+        },
+        {
+          value: "element",
+          label: "Element",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "note",
+      customValue: "Note message",
+      options: [
+        {
+          value: "",
+          label: "No note",
+        },
+        {
+          value: "note",
+          label: "Note",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "error",
+      customValue: "Error message",
+      options: [
+        {
+          value: "",
+          label: "No error",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx

@@ -0,0 +1,94 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const tooltipPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "placement",
+      options: [
+        {
+          value: "",
+          label: "Placement",
+        },
+        {
+          value: "bottom",
+          label: "Bottom",
+        },
+        {
+          value: "bottom-start",
+          label: "Bottom start",
+        },
+        {
+          value: "bottom-end",
+          label: "Bottom end",
+        },
+        {
+          value: "left",
+          label: "Left",
+        },
+        {
+          value: "left-start",
+          label: "Left start",
+        },
+        {
+          value: "left-end",
+          label: "Left end",
+        },
+        {
+          value: "right",
+          label: "Right",
+        },
+        {
+          value: "right-start",
+          label: "Right start",
+        },
+        {
+          value: "right-end",
+          label: "Right end",
+        },
+        {
+          value: "top",
+          label: "Top",
+        },
+        {
+          value: "top-start",
+          label: "Top start",
+        },
+        {
+          value: "top-end",
+          label: "Top end",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "isVisible",
+      customValue: false,
+      options: [
+        {
+          value: "",
+          label: "Visible",
+        },
+        {
+          value: "hidden",
+          label: "Hidden",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "isContrast",
+      customValue: false,
+      options: [
+        {
+          value: "",
+          label: "Contrast",
+        },
+        {
+          value: "noContrast",
+          label: "No contrast",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -13,6 +13,7 @@ import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
+import { inputPreview } from "@site/src/componentPreview/inputPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
 import { loaderPreview } from "@site/src/componentPreview/loaderPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
@@ -21,6 +22,7 @@ import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
 import { selectPreview } from "@site/src/componentPreview/selectPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
+import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview";
 
 // =============================================================================
 // Component previews
@@ -33,6 +35,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Button: buttonPreview,
   Caption: captionPreview,
   Heading: headingPreview,
+  Input: inputPreview,
   Link: linkPreview,
   Loader: loaderPreview,
   Notification: notificationPreview,
@@ -41,6 +44,7 @@ const previews: { [key: string]: ComponentPreview } = {
   ProjectLogo: projectLogoPreview,
   Select: selectPreview,
   Title: titlePreview,
+  Tooltip: tooltipPreview,
 };
 
 type Theme = "sds-theme-light" | "sds-theme-dark";

@stellar/design-system-website/src/components/PreviewBlock/styles.css

@@ -85,6 +85,7 @@
   margin: 0 !important;
 }
 
-.PreviewBlock .Select {
+.PreviewBlock .Select,
+.PreviewBlock .Input {
   max-width: 24rem;
 }

@stellar/design-system/src/components/Input/index.tsx

@@ -4,23 +4,45 @@ import { Icon } from "../../icons";
 import { FieldNote } from "../utils/FieldNote";
 import "./styles.scss";
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+/** Including all valid [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) */
+export interface InputProps {
+  /** ID of the input should be unique */
   id: string;
   // Note: cannot use "size" here because it's input's native property
+  /** Size of the input */
   fieldSize: "md" | "sm" | "xs";
+  /** Label of the input */
   label?: string | React.ReactNode;
+  /** Make label uppercase */
   isLabelUppercase?: boolean;
+  /** Pill shaped input */
   isPill?: boolean;
+  /** Input error without a message */
   isError?: boolean;
+  /** Input with extra padding */
   isExtraPadding?: boolean;
+  /** Password input preset with show/hide button */
   isPassword?: boolean;
+  /** Right side element of the input */
   rightElement?: string | React.ReactNode;
+  /** Note message of the input */
   note?: string | React.ReactNode;
+  /** Error message of the input */
   error?: string | React.ReactNode;
+  /** Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs) */
   customInput?: React.ReactElement;
 }
 
-export const Input: React.FC<InputProps> = ({
+interface Props
+  extends InputProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+}
+
+/**
+ * `Input` component is a form input element, which inherits all native HTML `input` element attributes.
+ */
+export const Input: React.FC<Props> = ({
   customInput,
   id,
   label,
@@ -34,7 +56,7 @@ export const Input: React.FC<InputProps> = ({
   note,
   error,
   ...props
-}: InputProps) => {
+}: Props) => {
   const [sideElWidthRem, setSideElWidthRem] = useState(0);
   const [isPasswordMasked, setIsPasswordMasked] = useState(true);
   const sideEl = useRef<HTMLDivElement | null>(null);