@czi-sds/mcp 0.2.2 → 0.4.0

package/data/zeroheight-exports/Hero.md

@@ -0,0 +1,262 @@
+# Hero
+
+Hero is located at the top of the page above all other content and features key information and visuals which can include images or videos, headlines, and calls-to-action including Buttons and Links.
+
+## Guidelines
+
+## Overview
+
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
+
+The Hero component was designed to support a wide range of potential product needs, giving teams flexibility to implement content in their applications as desired. Teams can fill the background with their visual of choice (image, video, color, gradient, etc.), overlay any combination of elements (text, image, buttons, links, etc.) on top of their chosen background, as well as turn on a darkening mask to make text easier to read and / or a darkening vignette positioned at the top of the container to make the transition from Header Navigation to Hero visually smooth.
+
+Hero has been built to ensure any overlay elements (text, images, videos, etc.) are constrained to a content area that is centered on the page; this is especially necessary when viewed on wide screens. Overlay elements can be freely arranged within this content area. The `max-width` of this area and its left and right padding are dictated by Breakpoint. When displayed at Small and Medium Breakpoints, the `max-width` of the content area is `100%` of the screen width with left and right padding of `24px` on Small Breakpoints and `40px` on Medium Breakpoints.
+
+When displayed at Large Breakpoints, the content area has a `max-width` of `1024px` and left and right padding of `120px`. This means that the width of the content area will be dictated by the width of the screen minus the left and right padding of `120px` up until that value is greater than `1024px`. Once the width of the screen goes beyond that value, the viewable area will be set at `1024px`.
+
+For example: if the screen is `1200px` wide, the width of the content area would be `960px` (`1200px-120px-120px = 960px`). If, however, the screen is `1500px` wide, the width of the content area would max out and be `1024px` (`1500px-120px-120px = 1260px`) since `1260px` is larger than `1024px`, and thus a `width` of `1024px` would be used for the content area. This ensures that, even when viewed on extra wide displays, the overlay content will always be viewable by users.
+
+| Breakpoint: Large | Breakpoint: Medium | Breakpoint: Small |
+| ----------------- | ------------------ | ----------------- |
+
+#### Background Fill Options
+
+The Hero component background can be filled with any CSS color, including gradients, or any type of media such as images, videos, GIFs, etc.
+
+| Color | Media |
+| ----- | ----- |
+
+#### Darkening Mask
+
+The darkening mask is an overlay element used to subtly dim the Hero's background, thereby enhancing the visibility and focus on the overlay elements; the mask's opacity can be set by the team implementing it.
+
+| Disabled | Enabled |
+| -------- | ------- |
+
+#### Darkening Vignette
+
+The darkening vignette is an overlay element positioned at the top of Hero that subtly fades from solid to transparent, smoothing the transition from the Header Navigation to the Hero background.
+
+| Disabled | Enabled |
+| -------- | ------- |
+
+#### Overlay Content Visibility
+
+Overlay content elements (title text, caption text, and content slot) can be used or not depending on teams' needs; the examples below show one element hidden at a time to demonstrate, but any combination of elements can be used.
+
+| All elements displayed | Title hidden | Caption hidden | Content slot hidden |
+| ---------------------- | ------------ | -------------- | ------------------- |
+
+#### Text Alignment Options
+
+Alignment settings apply to both title and caption text.
+
+| Left-aligned | Center-aligned | Right-aligned |
+| ------------ | -------------- | ------------- |
+
+#### Overlay Content Position
+
+| Top-left | Top | Top-right |
+| -------- | --- | --------- |
+
+| Left | Center | Right |
+| ---- | ------ | ----- |
+
+| Bottom-left | Bottom | Bottom-right |
+| ----------- | ------ | ------------ |
+
+#### Overlay Media Options
+
+In addition to overlay content, media (images, videos, GIFs, etc.) can be optionally overlayed on top of the Hero component's background; it can take whatever size or shape teams need.
+
+| Overlay media hidden | Overlay media displayed | Larger overlay media | Smaller overlay media |
+| -------------------- | ----------------------- | -------------------- | --------------------- |
+
+#### Overlay Media Position
+
+| Top-left | Top | Top-right |
+| -------- | --- | --------- |
+
+| Left | Center | Right |
+| ---- | ------ | ----- |
+
+| Bottom-left | Bottom | Bottom-right |
+| ----------- | ------ | ------------ |
+
+## Code
+
+> **Note:** Code details coming soon
+
+> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
+
+## Hero
+
+### SDS Source Code
+
+The component's source code in the SDS codebase can be found here.
+
+### SDS vs MUI
+
+[update this section]
+
+### MUI Documentation
+
+Documentation for the underlying MUI `[update]` component can be found here.
+
+### Props
+
+Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+|      |      |         |             |
+|      |      |         |             |
+|      |      |         |             |
+
+### Code examples
+
+**/styles.css**
+
+```css
+body {
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.08px;
+  line-height: 20px;
+  text-transform: none;
+  font-family: "Inter", sans-serif;
+}
+
+h1 {
+  font-size: 1.5rem;
+}
+
+.app {
+  padding: 20px;
+}
+```
+
+**tsconfig.json**
+
+```json
+{
+  "include": ["./**/*"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": ["dom", "es2015"],
+    "jsx": "react-jsx"
+  }
+}
+```
+
+**/App.tsx**
+
+```tsx
+// Most minimal Callout (just has the basic requirements)
+
+import { Callout, CalloutTitle } from "@czi-sds/components";
+import "./styles.css";
+
+function App() {
+  return (
+    <div className="app">
+      <Callout intent="info">
+        <CalloutTitle>Callout box</CalloutTitle>
+        The Callout Box component is a versatile UI element designed to draw
+        attention to important information or messages within your interface.
+        With its clean and elegant design, the Callout Box helps highlight key
+        content, alerts, or contextual details.
+      </Callout>
+    </div>
+  );
+}
+
+export default App;
+```
+
+**/index.tsx**
+
+```tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
+import { Theme } from "@czi-sds/components";
+import CssBaseline from "@mui/material/CssBaseline";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+import App from "./App";
+
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+const RootApp = () => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
+          <CssBaseline />
+          <App />
+        </EmotionThemeProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+root.render(
+  <React.StrictMode>
+    <RootApp />
+  </React.StrictMode>
+);
+```
+
+**/public/index.html**
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Callout</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+```
+
+**/package.json**
+
+```json
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
+```
+
+---

package/data/zeroheight-exports/Icons.md

@@ -0,0 +1,431 @@
+# Icons
+
+Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
+
+### Icon Component and Sizes
+
+Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
+
+The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
+
+The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
+
+| **Extra Large** | **Large** | **Small** | **Extra Small** |
+| --------------- | --------- | --------- | --------------- |
+
+| Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
+| --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
+
+### Custom Icons
+
+In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
+
+| **Visual** |     | **SDS Variable** |     | **Value**                    |     | **Equivalent Value in sdsSize Prop** |
+| ---------- | --- | ---------------- | --- | ---------------------------- | --- | ------------------------------------ |
+|            |     | `iconSizeXl`     |     | `height: 32px` `width: 32px` |     | `extraLarge`                         |
+|            |     | `iconSizeL`      |     | `height: 24px` `width: 24px` |     | `large`                              |
+|            |     | `iconSizeS`      |     | `height: 16px` `width: 16px` |     | `small`                              |
+|            |     | `iconSizeXs`     |     | `height: 12px` `width: 12px` |     | `extraSmall`                         |
+
+### Icons
+
+The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
+
+| **Bacteria** | **Bar Charts** |     |     |
+| ------------ | -------------- | --- | --- |
+
+| **Book** | **Checks** |     | **Chevrons** |
+| -------- | ---------- | --- | ------------ |
+
+| **Chevrons** |     |     |     |
+| ------------ | --- | --- | --- |
+
+| **Chevrons** |     |     | **Circles** |
+| ------------ | --- | --- | ----------- |
+
+| **Code** | **Compass** | **Copy** | **Cube** |
+| -------- | ----------- | -------- | -------- |
+
+| **DNA** | **Document** | **Dots** | **Download** |
+| ------- | ------------ | -------- | ------------ |
+
+| **Edit** | **Envelope** | **Exclamation Marks** |     |
+| -------- | ------------ | --------------------- | --- |
+
+| **Eyes** |     | **Filter** | **Flags** |
+| -------- | --- | ---------- | --------- |
+
+| **Flags** |     |     | **Flasks** |
+| --------- | --- | --- | ---------- |
+
+| **Flasks** |     | **Gear** | **Github** |
+| ---------- | --- | -------- | ---------- |
+
+| **Globes** |     | **Grids** |     |
+| ---------- | --- | --------- | --- |
+
+| **Grids** |     | **House** | **Info** |
+| --------- | --- | --------- | -------- |
+
+| **Info** | **Life Ring** | **Lightbulb** | **Lines** |
+| -------- | ------------- | ------------- | --------- |
+
+| **Lines** | **Link** | **List** | **Loading** |
+| --------- | -------- | -------- | ----------- |
+
+| **Locks** |     | **Minus** | **Open** |
+| --------- | --- | --------- | -------- |
+
+| **Pause** | **People** |     | **Percentage** |
+| --------- | ---------- | --- | -------------- |
+
+| **Pins** |     | **Play** | **Pluses** |
+| -------- | --- | -------- | ---------- |
+
+| **Pluses** | **Projects** |     | **Puzzle Piece** |
+| ---------- | ------------ | --- | ---------------- |
+
+| **Question Marks** |     | **Quote** | **Read** |
+| ------------------ | --- | --------- | -------- |
+
+| **Refresh** | **Report** | **Rocket** | **Rotate** |
+| ----------- | ---------- | ---------- | ---------- |
+
+| **Rotate** | **Save** | **Scale** | **Scatter Plot** |
+| ---------- | -------- | --------- | ---------------- |
+
+| **Search** |     | **Send** | **Share** |
+| ---------- | --- | -------- | --------- |
+
+| **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
+| ----------- | ------------------ | ----------- | --------- |
+
+| **Stars** | **Table** | **Thumbs** |     |
+| --------- | --------- | ---------- | --- |
+
+| **Trash Can** | **Trees** |     |     |
+| ------------- | --------- | --- | --- |
+
+| **Trees** |     |     | **Triangles** |
+| --------- | --- | --- | ------------- |
+
+| **Triangles** |     |     | **Update** |
+| ------------- | --- | --- | ---------- |
+
+| **Upload** | **Viruses** |     | **Widget** |
+| ---------- | ----------- | --- | ---------- |
+
+| **X Marks** |     |     |     |
+| ----------- | --- | --- | --- |
+
+---
+
+Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
+
+### Icon Component and Sizes
+
+Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
+
+The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
+
+The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
+
+| **Extra Large** | **Large** | **Small** | **Extra Small** |
+| --------------- | --------- | --------- | --------------- |
+
+| Used only for Icon Buttons. | Buttons and Tags | Dropdown Input and Search Inputs | Checkbox Inputs, Tags, Menu Items |
+| --------------------------- | ---------------- | -------------------------------- | --------------------------------- |
+
+### Custom Icons
+
+In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
+
+| **Visual** |     | **Variable** |     | **Value**                    |     | **Equivalent sdsSize Value** |
+| ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
+|            |     | `iconSizeXl` |     | `height: 32px` `width: 32px` |     | `extraLarge`                 |
+|            |     | `iconSizeL`  |     | `height: 22px` `width: 22px` |     | `large`                      |
+|            |     | `iconSizeS`  |     | `height: 14px` `width: 14px` |     | `small`                      |
+|            |     | `iconSizeXs` |     | `height: 10px` `width: 10px` |     | `extraSmall`                 |
+
+### Icons
+
+The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
+
+| **Bacteria** | **Bar Charts** |     |     |
+| ------------ | -------------- | --- | --- |
+
+| **Book** | **Checks** |     | **Chevrons** |
+| -------- | ---------- | --- | ------------ |
+
+| **Chevrons** |     |     |     |
+| ------------ | --- | --- | --- |
+
+| **Chevrons** | **Circles** | **Code** | **Copy** |
+| ------------ | ----------- | -------- | -------- |
+
+| **Copy** | **Cube** | **DNA** | **Document** |
+| -------- | -------- | ------- | ------------ |
+
+| **Dots** | **Download** | **Edit** | **Exclamation Marks** |
+| -------- | ------------ | -------- | --------------------- |
+
+| **Exclamation Marks** | **Eyes** |     | **Filter** |
+| --------------------- | -------- | --- | ---------- |
+
+| **Flags** |     |     |     |
+| --------- | --- | --- | --- |
+
+| **Flasks** |     |     | **Gear** |
+| ---------- | --- | --- | -------- |
+
+| **Globes** |     | **Grids** |     |
+| ---------- | --- | --------- | --- |
+
+| **Grids** | **House** | **Info** |     |
+| --------- | --------- | -------- | --- |
+
+| **Life Ring** | **Lightbulb** | **Lines** |     |
+| ------------- | ------------- | --------- | --- |
+
+| **Link** | **List** | **Loading** | **Locks** |
+| -------- | -------- | ----------- | --------- |
+
+| **Locks** | **Minus** | **Open** | **People** |
+| --------- | --------- | -------- | ---------- |
+
+| **Person** | **Percentage** | **Pins** |     |
+| ---------- | -------------- | -------- | --- |
+
+| **Play** | **Pluses** |     | **Projects** |
+| -------- | ---------- | --- | ------------ |
+
+| **Projects** | **Puzzle Piece** | **Question Mark** | **Quote** |
+| ------------ | ---------------- | ----------------- | --------- |
+
+| **Refresh** | **Save** | **Search** |     |
+| ----------- | -------- | ---------- | --- |
+
+| **Share** | **Sliders** | **Speech Bubbles** | **Squares** |
+| --------- | ----------- | ------------------ | ----------- |
+
+| **Stars** |     | **Table** | **Trash Can** |
+| --------- | --- | --------- | ------------- |
+
+| **Trees** |     |     |     |
+| --------- | --- | --- | --- |
+
+| **Trees** |     | **Triangles** |     |
+| --------- | --- | ------------- | --- |
+
+| **Triangles** |     | **Upload** | **Viruses** |
+| ------------- | --- | ---------- | ----------- |
+
+| **Viruses** | **Xmarks** |     |     |
+| ----------- | ---------- | --- | --- |
+
+---
+
+Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
+
+### Icon Component and Sizes
+
+Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
+
+The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
+
+The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
+
+| **Extra Large** | **Large** | **Small** | **Extra Small** |
+| --------------- | --------- | --------- | --------------- |
+
+| Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
+| --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
+
+### Custom Icons
+
+In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
+
+| **Visual** |     | **Variable** |     | **Value**                    |     | **Equivalent sdsSize Value** |
+| ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
+|            |     | `iconSizeXl` |     | `height: 32px` `width: 32px` |     | `extraLarge`                 |
+|            |     | `iconSizeL`  |     | `height: 22px` `width: 22px` |     | `large`                      |
+|            |     | `iconSizeS`  |     | `height: 14px` `width: 14px` |     | `small`                      |
+|            |     | `iconSizeXs` |     | `height: 10px` `width: 10px` |     | `extraSmall`                 |
+
+### Icons
+
+The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
+
+| **Bacteria** | **Bar Charts** |     |     |
+| ------------ | -------------- | --- | --- |
+
+| **Book** | **Checks** |     | **Chevrons** |
+| -------- | ---------- | --- | ------------ |
+
+| **Chevrons** |     |     | **Circles** |
+| ------------ | --- | --- | ----------- |
+
+| **Compass** | **Copy** | **DNA** | **Document** |
+| ----------- | -------- | ------- | ------------ |
+
+| **Dots** | **Download** | **Edit** | **Exclamation Marks** |
+| -------- | ------------ | -------- | --------------------- |
+
+| **Exclamation Marks** | **Eyes** |     | **Filter** |
+| --------------------- | -------- | --- | ---------- |
+
+| **Flags** |     |     |     |
+| --------- | --- | --- | --- |
+
+| **Flasks** |     |     | **Gear** |
+| ---------- | --- | --- | -------- |
+
+| **Globes** |     | **Grids** |     |
+| ---------- | --- | --------- | --- |
+
+| **Grids** | **House** | **Info** |     |
+| --------- | --------- | -------- | --- |
+
+| **Life Ring** | **Lightbulb** | **Lines** |     |
+| ------------- | ------------- | --------- | --- |
+
+| **Link** | **List** | **Loading** | **Locks** |
+| -------- | -------- | ----------- | --------- |
+
+| **Locks** | **Minus** | **Open** | **People** |
+| --------- | --------- | -------- | ---------- |
+
+| **People** | **Percentage** | **Pins** |     |
+| ---------- | -------------- | -------- | --- |
+
+| **Play** | **Pluses** |     | **Projects** |
+| -------- | ---------- | --- | ------------ |
+
+| **Projects** | **Puzzle Piece** | **Question Mark** | **Refresh** |
+| ------------ | ---------------- | ----------------- | ----------- |
+
+| **Save** | **Search** |     | **Share** |
+| -------- | ---------- | --- | --------- |
+
+| **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
+| ----------- | ------------------ | ----------- | --------- |
+
+| **Stars** | **Table** | **Trash Can** | **Trees** |
+| --------- | --------- | ------------- | --------- |
+
+| **Trees** |     |     |     |
+| --------- | --- | --- | --- |
+
+| **Trees** | **Triangles** |     |     |
+| --------- | ------------- | --- | --- |
+
+| **Triangles** | **Upload** | **Virus** | **Xmarks** |
+| ------------- | ---------- | --------- | ---------- |
+
+| **Xmarks** |     |     |     |
+| ---------- | --- | --- | --- |
+
+---
+
+Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
+
+### Icon Component and Sizes
+
+Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
+
+The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
+
+The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
+
+| **Extra Large** | **Large** | **Small** | **Extra Small** |
+| --------------- | --------- | --------- | --------------- |
+
+| Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
+| --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
+
+### Custom Icons
+
+In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
+
+| **Visual** |     | **Variable** |     | **Value**                    |     | **Equivalent sdsSize Value** |
+| ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
+|            |     | `iconSizeXl` |     | `height: 32px` `width: 32px` |     | `extraLarge`                 |
+|            |     | `iconSizeL`  |     | `height: 22px` `width: 22px` |     | `large`                      |
+|            |     | `iconSizeS`  |     | `height: 14px` `width: 14px` |     | `small`                      |
+|            |     | `iconSizeXs` |     | `height: 10px` `width: 10px` |     | `extraSmall`                 |
+
+### Icons
+
+The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
+
+| **Bacteria** | **Bar Charts** |     |     |
+| ------------ | -------------- | --- | --- |
+
+| **Book** | **Checks** |     | **Chevrons** |
+| -------- | ---------- | --- | ------------ |
+
+| **Chevrons** |     |     |     |
+| ------------ | --- | --- | --- |
+
+| **Chevrons** | **Circles** | **Code** | **Compass** |
+| ------------ | ----------- | -------- | ----------- |
+
+| **Copy** | **Cube** | **DNA** | **Document** |
+| -------- | -------- | ------- | ------------ |
+
+| **Dots** | **Download** | **Edit** | **Exclamation Marks** |
+| -------- | ------------ | -------- | --------------------- |
+
+| **Exclamation Marks** | **Eyes** |     | **Filter** |
+| --------------------- | -------- | --- | ---------- |
+
+| **Flags** |     |     |     |
+| --------- | --- | --- | --- |
+
+| **Flasks** |     |     | **Gear** |
+| ---------- | --- | --- | -------- |
+
+| **Globes** |     | **Grids** |     |
+| ---------- | --- | --------- | --- |
+
+| **Grids** | **House** | **Info** |     |
+| --------- | --------- | -------- | --- |
+
+| **Life Ring** | **Lightbulb** | **Lines** |     |
+| ------------- | ------------- | --------- | --- |
+
+| **Link** | **List** | **Loading** | **Locks** |
+| -------- | -------- | ----------- | --------- |
+
+| **Locks** | **Minus** | **Open** | **People** |
+| --------- | --------- | -------- | ---------- |
+
+| **Person** | **Percentage** | **Pins** |     |
+| ---------- | -------------- | -------- | --- |
+
+| **Play** | **Pluses** |     | **Puzzle Piece** |
+| -------- | ---------- | --- | ---------------- |
+
+| **Projects** | **Puzzle Piece** | **Question Mark** | **Quote** |
+| ------------ | ---------------- | ----------------- | --------- |
+
+| **Refresh** | **Save** | **Search** |     |
+| ----------- | -------- | ---------- | --- |
+
+| **Share** | **Sliders** | **Speech Bubbles** | **Squares** |
+| --------- | ----------- | ------------------ | ----------- |
+
+| **Stars** |     | **Tables** | **Trash Can** |
+| --------- | --- | ---------- | ------------- |
+
+| **Trees** |     |     |     |
+| --------- | --- | --- | --- |
+
+| **Trees** |     | **Triangles** |     |
+| --------- | --- | ------------- | --- |
+
+| **Triangles** |     | **Upload** | **Viruses** |
+| ------------- | --- | ---------- | ----------- |
+
+| **Viruses** | **Xmarks** |     |     |
+| ----------- | ---------- | --- | --- |