From fe408555345d9e7fc1e848c6809dd49b62020d6d Mon Sep 17 00:00:00 2001
From: AlejoYarce <alejo.yarce990@gmail.com>
Date: Sun, 5 Jan 2025 21:22:43 -0500
Subject: [PATCH] Standardize Documentation

---
 README.md                                     |   4 +-
 src/components/Banner/README.md               | 129 ------------------
 src/components/Buttons/Button/README.md       |  49 ++-----
 src/components/Checkbox/README.md             |  45 ++----
 .../InlineMessage.stories.tsx}                |   8 +-
 .../InlineMessageDemo.tsx}                    |  46 +++----
 src/components/InlineMessage/README.md        | 129 ++++++++++++++++++
 .../{Banner => InlineMessage}/index.tsx       |  46 +++----
 .../{Banner => InlineMessage}/styled.ts       |  18 +--
 .../{Banner => InlineMessage}/types.ts        |   2 +-
 src/components/Input/README.md                |  99 --------------
 .../Layer/LayerGroup/LayerGroup.stories.tsx   |   2 +-
 .../Layer/LayerItem/LayerItem.stories.tsx     |   2 +-
 .../Layer/LayerPanel/LayerPanel.stories.tsx   |   2 +-
 .../LayerSidebar/LayerSidebar.stories.tsx     |   2 +-
 .../Legend/LayerParameters/README.md          |   2 +-
 .../Legend/LegendItem/LegendItem.stories.tsx  |   4 +-
 .../Legend/LegendItem/LegendItemDemo.tsx      |   8 +-
 src/components/Legend/LegendItem/README.md    |   4 +-
 .../Legend/LegendPanel/LegendItem.stories.tsx |   6 +-
 .../Legend/LegendPanel/LegendPanelDemo.tsx    |  10 +-
 src/components/Legend/LegendPanel/README.md   |   4 +-
 src/components/Legend/LegendPanel/index.tsx   |  18 ++-
 src/components/Legend/LegendPanel/styled.ts   |   5 +-
 .../Legend/OpacityControl/index.tsx           |  12 +-
 .../Legend/OpacityControl/styled.ts           |   4 +-
 .../QualitativeLegend.stories.tsx             |   2 +-
 .../Legend/QualitativeLegend/README.md        |  48 ++++---
 src/components/Radio/README.md                |  57 ++------
 src/components/Radio/Radio.stories.tsx        |   2 +-
 src/components/Slider/README.md               |  38 ++----
 src/components/Switch/README.md               |  16 +--
 src/components/TabBar/TabBar.stories.tsx      |   2 +-
 src/components/Tag/README.md                  |  37 +----
 src/components/TextInput/README.md            |  90 ++++++++++++
 .../TextInput.stories.tsx}                    |   8 +-
 .../TextInputDemo.tsx}                        |  14 +-
 src/components/{Input => TextInput}/index.tsx |  18 +--
 src/components/{Input => TextInput}/styled.ts |   4 +-
 src/components/{Input => TextInput}/types.ts  |   2 +-
 src/components/Textarea/README.md             |  61 ++++-----
 src/components/icons/Analysis.tsx             |  13 +-
 src/components/icons/Legend.tsx               |  24 +++-
 src/components/index.ts                       |   4 +-
 44 files changed, 497 insertions(+), 603 deletions(-)
 delete mode 100644 src/components/Banner/README.md
 rename src/components/{Banner/Banner.stories.tsx => InlineMessage/InlineMessage.stories.tsx} (93%)
 rename src/components/{Banner/BannerDemo.tsx => InlineMessage/InlineMessageDemo.tsx} (90%)
 create mode 100644 src/components/InlineMessage/README.md
 rename src/components/{Banner => InlineMessage}/index.tsx (54%)
 rename src/components/{Banner => InlineMessage}/styled.ts (79%)
 rename src/components/{Banner => InlineMessage}/types.ts (87%)
 delete mode 100644 src/components/Input/README.md
 create mode 100644 src/components/TextInput/README.md
 rename src/components/{Input/Input.stories.tsx => TextInput/TextInput.stories.tsx} (91%)
 rename src/components/{Input/InputDemo.tsx => TextInput/TextInputDemo.tsx} (76%)
 rename src/components/{Input => TextInput}/index.tsx (86%)
 rename src/components/{Input => TextInput}/styled.ts (94%)
 rename src/components/{Input => TextInput}/types.ts (91%)

diff --git a/README.md b/README.md
index f838148..0f0b672 100644
--- a/README.md
+++ b/README.md
@@ -91,11 +91,11 @@ function App() {
 
 ### General
 
-- [Banner](https://github.com/wri/wri-design-systems/tree/main/src/components/Banner)
 - [NavigationRail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
 - [Slider](https://github.com/wri/wri-design-systems/tree/main/src/components/Slider)
 - [TabBar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
 - [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)
+- [InlineMessage](https://github.com/wri/wri-design-systems/tree/main/src/components/InlineMessage)
 
 ### Buttons
 
@@ -111,7 +111,7 @@ function App() {
 
 ### Inputs
 
-- [Input](https://github.com/wri/wri-design-systems/tree/main/src/components/Input)
+- [TextInput](https://github.com/wri/wri-design-systems/tree/main/src/components/TextInput)
 - [Textarea](https://github.com/wri/wri-design-systems/tree/main/src/components/Textarea)
 
 ### Layers
diff --git a/src/components/Banner/README.md b/src/components/Banner/README.md
deleted file mode 100644
index 9f949d8..0000000
--- a/src/components/Banner/README.md
+++ /dev/null
@@ -1,129 +0,0 @@
-# Banner
-
-[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/banner--docs)
-
-[BannerDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Banner/BannerDemo.tsx)
-
-## Import
-
-```js
-import { Banner } from 'wri-design-systems'
-```
-
-## Usage
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='info-white'
-  actionLabel='Label'
-/>
-```
-
-## Props
-
-```ts
-type BannerProps = {
-  label: string
-  caption?: string
-  variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error'
-  size?: 'small' | 'large'
-  icon?: React.ReactNode
-  onActionClick?: VoidFunction
-  actionLabel?: string
-  isButtonRight?: boolean
-}
-```
-
-## Info White
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='info-white'
-  actionLabel='Label'
-/>
-```
-
-## Info Grey
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='info-grey'
-  actionLabel='Label'
-/>
-```
-
-## Success
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='success'
-  actionLabel='Label'
-/>
-```
-
-## Warning
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='warning'
-  actionLabel='Label'
-/>
-```
-
-## Error
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='error'
-  actionLabel='Label'
-/>
-```
-
-## Button Right
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='info-white'
-  actionLabel='Label'
-  isButtonRight
-/>
-```
-
-## Small
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='info-white'
-  actionLabel='Label'
-  size='small'
-/>
-```
-
-## Small Button Right
-
-```html
-<Banner
-  label='Label'
-  caption='caption'
-  variant='info-white'
-  actionLabel='Label'
-  isButtonRight
-  size='small'
-/>
-```
diff --git a/src/components/Buttons/Button/README.md b/src/components/Buttons/Button/README.md
index a03801d..8789ae7 100644
--- a/src/components/Buttons/Button/README.md
+++ b/src/components/Buttons/Button/README.md
@@ -13,10 +13,7 @@ import { Button } from 'wri-design-systems'
 ## Usage
 
 ```html
-<Button
-  label='Save and Download'
-  variant='primary'
-/>
+<button label="Save and Download" variant="primary" />
 ```
 
 ## Props
@@ -41,37 +38,25 @@ type ButtonProps = Omit<
 ### Primary
 
 ```html
-<Button
-  label='Primary'
-  variant='primary'
-/>
+<button label="Primary" variant="primary" />
 ```
 
 ### Secondary
 
 ```html
-<Button
-  label='Secondary'
-  variant='secondary'
-/>
+<button label="Secondary" variant="secondary" />
 ```
 
 ### Borderless
 
 ```html
-<Button
-  label='Borderless'
-  variant='borderless'
-/>
+<button label="Borderless" variant="borderless" />
 ```
 
 ### Outline
 
 ```html
-<Button
-  label='Outline'
-  variant='outline'
-/>
+<button label="Outline" variant="outline" />
 ```
 
 ## Button Sizes
@@ -79,21 +64,13 @@ type ButtonProps = Omit<
 ### Default
 
 ```html
-<Button
-  label="Primary"
-  size="default"
-  variant="primary"
-/>
+<button label="Primary" size="default" variant="primary" />
 ```
 
 ### Small
 
 ```html
-<Button
-  label="Primary"
-  size="small"
-  variant="primary"
-/>
+<button label="Primary" size="small" variant="primary" />
 ```
 
 ## Button with Icon
@@ -123,19 +100,11 @@ type ButtonProps = Omit<
 ### Disabled
 
 ```html
-<Button
-  label="Primary"
-  variant="primary"
-  disabled
-/>
+<button label="Primary" variant="primary" disabled />
 ```
 
 ### Loading state
 
 ```html
-<Button
-  label="Primary"
-  variant="primary"
-  loading
-/>
+<button label="Primary" variant="primary" loading />
 ```
diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md
index c3806b9..184f724 100644
--- a/src/components/Checkbox/README.md
+++ b/src/components/Checkbox/README.md
@@ -13,12 +13,7 @@ import { Checkbox } from 'wri-design-systems'
 ## Usage
 
 ```html
-<Checkbox
-  name='Checkbox'
-  value='1'
->
-  Checkbox
-</Checkbox>
+<Checkbox name="Checkbox" value="1"> Checkbox </Checkbox>
 ```
 
 ## Props
@@ -47,17 +42,13 @@ type CheckboxProps = Omit<
 ## Default Checked
 
 ```html
-<Checkbox name='Checkbox' value='1' defaultChecked>
-  Checkbox
-</Checkbox>
+<Checkbox name="Checkbox" value="1" defaultChecked> Checkbox </Checkbox>
 ```
 
 ## Disabled
 
 ```html
-<Checkbox name='Checkbox' value='1' disabled>
-  Checkbox
-</Checkbox>
+<Checkbox name="Checkbox" value="1" disabled> Checkbox </Checkbox>
 ```
 
 ## Indeterminate
@@ -74,31 +65,21 @@ const indeterminate = values.some((value) => value.checked) && !allChecked
 ```
 
 ```html
-<Checkbox
-  ms="6"
-  checked={checked}
-  onCheckedChange={(e) => {
-    setValues((current) => {
-      const newValues = [...current]
-      newValues[index] = { ...newValues[index], checked: !!e.checked }
-      return newValues
-    })
-  }}
->
-  Item Checkbox
+<Checkbox ms="6" checked="{checked}" onCheckedChange="{(e)" ="">
+  { setValues((current) => { const newValues = [...current] newValues[index] = {
+  ...newValues[index], checked: !!e.checked } return newValues }) }} > Item
+  Checkbox
 </Checkbox>
 ```
 
 ```html
 <Checkbox
-  checked={allChecked}
-  indeterminate={indeterminate}
-  onCheckedChange={(e) => {
-    setValues((current) =>
-      current.map((value) => ({ ...value, checked: !!e.checked })),
-    )
-  }}
+  checked="{allChecked}"
+  indeterminate="{indeterminate}"
+  onCheckedChange="{(e)"
+  =""
 >
-  Main Checkbox
+  { setValues((current) => current.map((value) => ({ ...value, checked:
+  !!e.checked })), ) }} > Main Checkbox
 </Checkbox>
 ```
diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/InlineMessage/InlineMessage.stories.tsx
similarity index 93%
rename from src/components/Banner/Banner.stories.tsx
rename to src/components/InlineMessage/InlineMessage.stories.tsx
index c6d531b..cc437cf 100644
--- a/src/components/Banner/Banner.stories.tsx
+++ b/src/components/InlineMessage/InlineMessage.stories.tsx
@@ -3,17 +3,17 @@ import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
-import Banner from '.'
+import InlineMessage from '.'
 
 const meta = {
-  title: 'Banner',
-  component: Banner,
+  title: 'Inline Message',
+  component: InlineMessage,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
   args: { onActionClick: fn() },
-} satisfies Meta<typeof Banner>
+} satisfies Meta<typeof InlineMessage>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/src/components/Banner/BannerDemo.tsx b/src/components/InlineMessage/InlineMessageDemo.tsx
similarity index 90%
rename from src/components/Banner/BannerDemo.tsx
rename to src/components/InlineMessage/InlineMessageDemo.tsx
index b1f960f..39e0bf3 100644
--- a/src/components/Banner/BannerDemo.tsx
+++ b/src/components/InlineMessage/InlineMessageDemo.tsx
@@ -1,6 +1,6 @@
-import { Banner } from '..'
+import { InlineMessage } from '..'
 
-const BannerDemo = () => (
+const InlineMessageDemo = () => (
   <>
     <div
       style={{
@@ -17,13 +17,13 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-white'
           actionLabel='Label'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-white'
@@ -39,14 +39,14 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-white'
           actionLabel='Label'
           size='small'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-white'
@@ -72,13 +72,13 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-grey'
           actionLabel='Label'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-grey'
@@ -94,14 +94,14 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-grey'
           actionLabel='Label'
           size='small'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-grey'
@@ -127,13 +127,13 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='success'
           actionLabel='Label'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='success'
@@ -149,14 +149,14 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='success'
           actionLabel='Label'
           size='small'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='success'
@@ -182,13 +182,13 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='warning'
           actionLabel='Label'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='warning'
@@ -204,14 +204,14 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='warning'
           actionLabel='Label'
           size='small'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='warning'
@@ -237,13 +237,13 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='error'
           actionLabel='Label'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='error'
@@ -259,14 +259,14 @@ const BannerDemo = () => (
           gap: '10px',
         }}
       >
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='error'
           actionLabel='Label'
           size='small'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='error'
@@ -279,4 +279,4 @@ const BannerDemo = () => (
   </>
 )
 
-export default BannerDemo
+export default InlineMessageDemo
diff --git a/src/components/InlineMessage/README.md b/src/components/InlineMessage/README.md
new file mode 100644
index 0000000..1b6b1da
--- /dev/null
+++ b/src/components/InlineMessage/README.md
@@ -0,0 +1,129 @@
+# InlineMessage
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/inlinemessage--docs)
+
+[InlineMessageDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/InlineMessage/InlineMessageDemo.tsx)
+
+## Import
+
+```js
+import { InlineMessage } from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="info-white"
+  actionLabel="Label"
+/>
+```
+
+## Props
+
+```ts
+type InlineMessageProps = {
+  label: string
+  caption?: string
+  variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error'
+  size?: 'small' | 'large'
+  icon?: React.ReactNode
+  onActionClick?: VoidFunction
+  actionLabel?: string
+  isButtonRight?: boolean
+}
+```
+
+## Info White
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="info-white"
+  actionLabel="Label"
+/>
+```
+
+## Info Grey
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="info-grey"
+  actionLabel="Label"
+/>
+```
+
+## Success
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="success"
+  actionLabel="Label"
+/>
+```
+
+## Warning
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="warning"
+  actionLabel="Label"
+/>
+```
+
+## Error
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="error"
+  actionLabel="Label"
+/>
+```
+
+## Button Right
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="info-white"
+  actionLabel="Label"
+  isButtonRight
+/>
+```
+
+## Small
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="info-white"
+  actionLabel="Label"
+  size="small"
+/>
+```
+
+## Small Button Right
+
+```html
+<InlineMessage
+  label="Label"
+  caption="caption"
+  variant="info-white"
+  actionLabel="Label"
+  isButtonRight
+  size="small"
+/>
+```
diff --git a/src/components/Banner/index.tsx b/src/components/InlineMessage/index.tsx
similarity index 54%
rename from src/components/Banner/index.tsx
rename to src/components/InlineMessage/index.tsx
index 3b39d90..e938604 100644
--- a/src/components/Banner/index.tsx
+++ b/src/components/InlineMessage/index.tsx
@@ -4,18 +4,18 @@ import React from 'react'
 import Button from '../Buttons/Button'
 import { InfoIcon } from '../icons'
 import {
-  InfoWhiteBanner,
-  ErrorBanner,
-  InfoGreyBanner,
-  SuccessBanner,
-  WarningBanner,
-  BannerTitle,
-  BannerCaption,
-  BannerHeader,
+  InfoWhiteInlineMessage,
+  ErrorInlineMessage,
+  InfoGreyInlineMessage,
+  SuccessInlineMessage,
+  WarningInlineMessage,
+  InlineMessageTitle,
+  InlineMessageCaption,
+  InlineMessageHeader,
 } from './styled'
-import { BannerProps } from './types'
+import { InlineMessageProps } from './types'
 
-const Banner = ({
+const InlineMessage = ({
   label,
   caption,
   variant,
@@ -24,30 +24,30 @@ const Banner = ({
   onActionClick,
   actionLabel,
   isButtonRight,
-}: BannerProps) => {
-  let StyledBanner = InfoWhiteBanner
+}: InlineMessageProps) => {
+  let StyledInlineMessage = InfoWhiteInlineMessage
   if (variant === 'info-grey') {
-    StyledBanner = InfoGreyBanner
+    StyledInlineMessage = InfoGreyInlineMessage
   } else if (variant === 'success') {
-    StyledBanner = SuccessBanner
+    StyledInlineMessage = SuccessInlineMessage
   } else if (variant === 'warning') {
-    StyledBanner = WarningBanner
+    StyledInlineMessage = WarningInlineMessage
   } else if (variant === 'error') {
-    StyledBanner = ErrorBanner
+    StyledInlineMessage = ErrorInlineMessage
   }
 
   return (
-    <StyledBanner
+    <StyledInlineMessage
       isButtonRight={isButtonRight}
       size={size}
       aria-roledescription='Note'
     >
       <div>
-        <BannerHeader>
+        <InlineMessageHeader>
           {icon}
-          <BannerTitle size={size}>{label}</BannerTitle>
-        </BannerHeader>
-        <BannerCaption size={size}>{caption}</BannerCaption>
+          <InlineMessageTitle size={size}>{label}</InlineMessageTitle>
+        </InlineMessageHeader>
+        <InlineMessageCaption size={size}>{caption}</InlineMessageCaption>
       </div>
       {actionLabel ? (
         <Button
@@ -61,8 +61,8 @@ const Banner = ({
           onClick={onActionClick}
         />
       ) : null}
-    </StyledBanner>
+    </StyledInlineMessage>
   )
 }
 
-export default Banner
+export default InlineMessage
diff --git a/src/components/Banner/styled.ts b/src/components/InlineMessage/styled.ts
similarity index 79%
rename from src/components/Banner/styled.ts
rename to src/components/InlineMessage/styled.ts
index f59f603..9650d0e 100644
--- a/src/components/Banner/styled.ts
+++ b/src/components/InlineMessage/styled.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import { getThemedColor } from '../../lib/theme'
 
-export const DefaultBanner = styled.div<{
+export const DefaultInlineMessage = styled.div<{
   isButtonRight?: boolean
   size: string
 }>`
@@ -24,7 +24,7 @@ export const DefaultBanner = styled.div<{
   }
 `
 
-export const BannerHeader = styled.div`
+export const InlineMessageHeader = styled.div`
   display: flex;
   align-items: flex-start;
   gap: 8px;
@@ -34,14 +34,14 @@ export const BannerHeader = styled.div`
   }
 `
 
-export const BannerTitle = styled.p<{ size: string }>`
+export const InlineMessageTitle = styled.p<{ size: string }>`
   color: ${getThemedColor('neutral', 800)};
   font-size: ${({ size }) => (size === 'small' ? '14px' : '18px')};
   line-height: ${({ size }) => (size === 'small' ? '20px' : '28px')};
   font-weight: 400;
 `
 
-export const BannerCaption = styled.p<{ size: string }>`
+export const InlineMessageCaption = styled.p<{ size: string }>`
   color: ${getThemedColor('neutral', 700)};
   font-size: ${({ size }) => (size === 'small' ? '12px' : '16px')};
   line-height: ${({ size }) => (size === 'small' ? '16px' : '24px')};
@@ -49,19 +49,19 @@ export const BannerCaption = styled.p<{ size: string }>`
   margin-left: 24px;
 `
 
-export const InfoWhiteBanner = styled(DefaultBanner)`
+export const InfoWhiteInlineMessage = styled(DefaultInlineMessage)`
   background-color: ${getThemedColor('neutral', 100)};
   border: 1px solid ${getThemedColor('neutral', 300)};
   color: ${getThemedColor('neutral', 700)};
 `
 
-export const InfoGreyBanner = styled(DefaultBanner)`
+export const InfoGreyInlineMessage = styled(DefaultInlineMessage)`
   background-color: ${getThemedColor('neutral', 200)};
   border: 1px solid ${getThemedColor('neutral', 300)};
   color: ${getThemedColor('neutral', 700)};
 `
 
-export const SuccessBanner = styled(DefaultBanner)`
+export const SuccessInlineMessage = styled(DefaultInlineMessage)`
   background-color: ${getThemedColor('success', 100)};
   border: 1px solid ${getThemedColor('success', 500)};
   color: ${getThemedColor('success', 500)};
@@ -71,7 +71,7 @@ export const SuccessBanner = styled(DefaultBanner)`
   }
 `
 
-export const WarningBanner = styled(DefaultBanner)`
+export const WarningInlineMessage = styled(DefaultInlineMessage)`
   background-color: ${getThemedColor('warning', 100)};
   border: 1px solid ${getThemedColor('warning', 500)};
   color: ${getThemedColor('warning', 500)};
@@ -81,7 +81,7 @@ export const WarningBanner = styled(DefaultBanner)`
   }
 `
 
-export const ErrorBanner = styled(DefaultBanner)`
+export const ErrorInlineMessage = styled(DefaultInlineMessage)`
   background-color: ${getThemedColor('error', 100)};
   border: 1px solid ${getThemedColor('error', 500)};
   color: ${getThemedColor('error', 500)};
diff --git a/src/components/Banner/types.ts b/src/components/InlineMessage/types.ts
similarity index 87%
rename from src/components/Banner/types.ts
rename to src/components/InlineMessage/types.ts
index 5543695..bf7f7e1 100644
--- a/src/components/Banner/types.ts
+++ b/src/components/InlineMessage/types.ts
@@ -1,4 +1,4 @@
-export type BannerProps = {
+export type InlineMessageProps = {
   label: string
   caption?: string
   variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error'
diff --git a/src/components/Input/README.md b/src/components/Input/README.md
deleted file mode 100644
index f8bea5f..0000000
--- a/src/components/Input/README.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# Input
-
-[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/inputs-input--docs)
-
-[InputDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Input/InputDemo.tsx)
-
-## Import
-
-```js
-import { Input } from 'wri-design-systems'
-```
-
-## Usage
-
-```html
-<Input
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  required
-/>
-```
-
-## Props
-
-```ts
-type InputProps = Omit<
-  ChakraInputProps,
-  'size' | 'variant' | 'colorPalette' | 'defaultChecked'
-> & {
-  label: string
-  caption?: string
-  placeholder?: string
-  errorMessage?: string
-  required?: boolean
-  disabled?: boolean
-  size?: 'small' | 'default'
-  defaultValue?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}
-```
-
-## Optional
-
-```html
-<Input
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-/>
-```
-
-## Small Input
-
-```html
-<Input
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  size='small'
-  required
-/>
-```
-
-## Default Value
-
-```html
-<Input
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  defaultValue='Default Value'
-  required
-/>
-```
-
-## With Error
-
-```html
-<Input
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  errorMessage='Error Message'
-  required
-/>
-```
-
-## Disabled
-
-```html
-<Input
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  required
-  disabled
-/>
-```
diff --git a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
index 45f64bb..4dde856 100644
--- a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
+++ b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
@@ -6,7 +6,7 @@ import LayerGroupContainer from './LayerGroupContainer'
 import LayerGroup from '.'
 
 const meta = {
-  title: 'Layers/LayerGroup',
+  title: 'Layers/Layer Group',
   component: LayerGroupContainer,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Layer/LayerItem/LayerItem.stories.tsx b/src/components/Layer/LayerItem/LayerItem.stories.tsx
index 9b436b6..cd94eda 100644
--- a/src/components/Layer/LayerItem/LayerItem.stories.tsx
+++ b/src/components/Layer/LayerItem/LayerItem.stories.tsx
@@ -6,7 +6,7 @@ import LayerItem from '.'
 import RadioGroup from '../../Radio/RadioGroup'
 
 const meta = {
-  title: 'Layers/LayerItem',
+  title: 'Layers/Layer Item',
   component: LayerItem,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Layer/LayerPanel/LayerPanel.stories.tsx b/src/components/Layer/LayerPanel/LayerPanel.stories.tsx
index 15c2fe9..03b39c0 100644
--- a/src/components/Layer/LayerPanel/LayerPanel.stories.tsx
+++ b/src/components/Layer/LayerPanel/LayerPanel.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from '../LayerGroup/LayerGroupDemo'
 
 const meta = {
-  title: 'Layers/LayerPanel',
+  title: 'Layers/Layer Panel',
   component: LayerPanel,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx b/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx
index 1d3f9df..5f975b1 100644
--- a/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx
+++ b/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx
@@ -6,7 +6,7 @@ import NavigationRail from '../../NavigationRail'
 import LayerPanelDemo from '../LayerPanel/LayerPanelDemo'
 
 const meta = {
-  title: 'Layers/LayerSidebar',
+  title: 'Layers/Layer Sidebar',
   component: NavigationRail,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/Legend/LayerParameters/README.md b/src/components/Legend/LayerParameters/README.md
index db0a2ea..d074fba 100644
--- a/src/components/Legend/LayerParameters/README.md
+++ b/src/components/Legend/LayerParameters/README.md
@@ -13,7 +13,7 @@ import { LayerParameters } from 'wri-design-systems'
 ## Usage
 
 ```html
-<LayerParameters label='Adjust layer parameters'>
+<LayerParameters label="Adjust layer parameters">
   <div>Component Placeholder</div>
   <div>Component Placeholder</div>
   <div>Component Placeholder</div>
diff --git a/src/components/Legend/LegendItem/LegendItem.stories.tsx b/src/components/Legend/LegendItem/LegendItem.stories.tsx
index 66a7904..dc6eeed 100644
--- a/src/components/Legend/LegendItem/LegendItem.stories.tsx
+++ b/src/components/Legend/LegendItem/LegendItem.stories.tsx
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import LegendItemStory from '.'
 import ScaleLegend from '../ScaleLegend'
 import QualitativeLegend from '../QualitativeLegend'
-import Banner from '../../Banner'
+import InlineMessage from '../../InlineMessage'
 import LayerParameters from '../LayerParameters'
 
 const meta = {
@@ -61,7 +61,7 @@ export const LegendItem: Story = {
           caption='Caption'
           color='#238B45'
         />
-        <Banner
+        <InlineMessage
           label='Label'
           caption='caption'
           variant='info-white'
diff --git a/src/components/Legend/LegendItem/LegendItemDemo.tsx b/src/components/Legend/LegendItem/LegendItemDemo.tsx
index 06c88a3..2f5b23a 100644
--- a/src/components/Legend/LegendItem/LegendItemDemo.tsx
+++ b/src/components/Legend/LegendItem/LegendItemDemo.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 /* eslint-disable no-console */
 import {
-  Banner,
+  InlineMessage,
   LayerParameters,
   LegendItem,
   QualitativeLegend,
@@ -40,7 +40,7 @@ export const LegendItemDemo = () => (
         caption='Caption'
         color='#238B45'
       />
-      <Banner
+      <InlineMessage
         label='Label'
         caption='caption'
         variant='info-white'
@@ -86,7 +86,7 @@ export const LegendItemDemo2 = () => (
         caption='Caption'
         color='#238B45'
       />
-      <Banner
+      <InlineMessage
         label='Label'
         caption='caption'
         variant='info-white'
@@ -131,7 +131,7 @@ export const LegendItemDemo3 = () => (
         caption='Caption'
         color='#238B45'
       />
-      <Banner
+      <InlineMessage
         label='Label'
         caption='caption'
         variant='info-white'
diff --git a/src/components/Legend/LegendItem/README.md b/src/components/Legend/LegendItem/README.md
index 01d7fb5..a5c3678 100644
--- a/src/components/Legend/LegendItem/README.md
+++ b/src/components/Legend/LegendItem/README.md
@@ -9,7 +9,7 @@
 ```js
 import {
   LegendItem,
-  Banner,
+  InlineMessage,
   LayerParameters,
   LegendItem,
   QualitativeLegend,
@@ -48,7 +48,7 @@ import {
     caption='Caption'
     color='#238B45'
   />
-  <Banner
+  <InlineMessage
     label='Label'
     caption='caption'
     variant='info-white'
diff --git a/src/components/Legend/LegendPanel/LegendItem.stories.tsx b/src/components/Legend/LegendPanel/LegendItem.stories.tsx
index d3e4f44..6b23239 100644
--- a/src/components/Legend/LegendPanel/LegendItem.stories.tsx
+++ b/src/components/Legend/LegendPanel/LegendItem.stories.tsx
@@ -4,7 +4,11 @@ import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
 import LegendPanelStory from '.'
-import { LegendItemDemo, LegendItemDemo2, LegendItemDemo3 } from '../LegendItem/LegendItemDemo'
+import {
+  LegendItemDemo,
+  LegendItemDemo2,
+  LegendItemDemo3,
+} from '../LegendItem/LegendItemDemo'
 
 const meta = {
   title: 'Legend/Legend Panel',
diff --git a/src/components/Legend/LegendPanel/LegendPanelDemo.tsx b/src/components/Legend/LegendPanel/LegendPanelDemo.tsx
index 7edf986..ca81a46 100644
--- a/src/components/Legend/LegendPanel/LegendPanelDemo.tsx
+++ b/src/components/Legend/LegendPanel/LegendPanelDemo.tsx
@@ -2,17 +2,21 @@
 import React from 'react'
 
 import { LegendPanel } from '../..'
-import { LegendItemDemo, LegendItemDemo2, LegendItemDemo3 } from '../LegendItem/LegendItemDemo'
+import {
+  LegendItemDemo,
+  LegendItemDemo2,
+  LegendItemDemo3,
+} from '../LegendItem/LegendItemDemo'
 
 const LegendPanelDemo = () => (
   <LegendPanel
-    legendContent={(
+    legendContent={
       <>
         <LegendItemDemo />
         <LegendItemDemo2 />
         <LegendItemDemo3 />
       </>
-    )}
+    }
     analysisContent={<div />}
   />
 )
diff --git a/src/components/Legend/LegendPanel/README.md b/src/components/Legend/LegendPanel/README.md
index d2cbbe4..02fc74a 100644
--- a/src/components/Legend/LegendPanel/README.md
+++ b/src/components/Legend/LegendPanel/README.md
@@ -7,9 +7,7 @@
 ## Import
 
 ```js
-import {
-  LegendPanel,
-} from 'wri-design-systems'
+import { LegendPanel } from 'wri-design-systems'
 ```
 
 ## Usage
diff --git a/src/components/Legend/LegendPanel/index.tsx b/src/components/Legend/LegendPanel/index.tsx
index 43cf867..9306fe8 100644
--- a/src/components/Legend/LegendPanel/index.tsx
+++ b/src/components/Legend/LegendPanel/index.tsx
@@ -8,13 +8,19 @@ import TabBar from '../../TabBar'
 
 const defaultTabValue = 'legend-tab'
 
-const LegendPanel = ({ legendContent, analysisContent, onTabClick }: LegendPanelProps) => {
+const LegendPanel = ({
+  legendContent,
+  analysisContent,
+  onTabClick,
+}: LegendPanelProps) => {
   const [selectedTabValue, setSelectedTabValue] = useState(defaultTabValue)
-  const [legentItems] = useState(Children.map(legendContent, (child, index) => ({
-    id: index,
-    child,
-    sequence: index,
-  })) || [])
+  const [legentItems] = useState(
+    Children.map(legendContent, (child, index) => ({
+      id: index,
+      child,
+      sequence: index,
+    })) || [],
+  )
 
   const handleOnTabClick = (tabValue: string) => {
     setSelectedTabValue(tabValue)
diff --git a/src/components/Legend/LegendPanel/styled.ts b/src/components/Legend/LegendPanel/styled.ts
index 8ac5785..d669ccf 100644
--- a/src/components/Legend/LegendPanel/styled.ts
+++ b/src/components/Legend/LegendPanel/styled.ts
@@ -2,7 +2,6 @@ import styled from '@emotion/styled'
 
 export const LegendPanelContainer = styled.div`
   width: 290px;
-  box-shadow: 0px 2px 4px -2px #0000001A;
-  box-shadow: 0px 4px 6px -1px #0000001A;
-
+  box-shadow: 0px 2px 4px -2px #0000001a;
+  box-shadow: 0px 4px 6px -1px #0000001a;
 `
diff --git a/src/components/Legend/OpacityControl/index.tsx b/src/components/Legend/OpacityControl/index.tsx
index 829abc0..e3dd77a 100644
--- a/src/components/Legend/OpacityControl/index.tsx
+++ b/src/components/Legend/OpacityControl/index.tsx
@@ -4,13 +4,13 @@ import React, { useState } from 'react'
 import { Popover as ChakraPopover } from '@chakra-ui/react'
 import Button from '../../Buttons/Button'
 import { InfoIcon } from '../../icons'
-import Input from '../../Input'
+import TextInput from '../../TextInput'
 import Slider from '../../Slider'
 import { OpacityControlProps } from './types'
 import {
   OpacityControlBody,
   OpacityControlContainer,
-  OpacityControlInputContainer,
+  OpacityControlTextInputContainer,
   OpacityControlLabel,
 } from './styled'
 
@@ -57,14 +57,14 @@ const OpacityControl = ({
         <OpacityControlContainer>
           <OpacityControlBody>
             <OpacityControlLabel>Opacity</OpacityControlLabel>
-            <OpacityControlInputContainer>
-              <Input
+            <OpacityControlTextInputContainer>
+              <TextInput
                 aria-label='Opacity'
                 min='0'
                 max='100'
                 value={`${opacity}%`}
                 onChange={handleOpacityChanged}
-                className='opacity-control-input'
+                className='opacity-control-text-input'
               />
               <Slider
                 min={0}
@@ -72,7 +72,7 @@ const OpacityControl = ({
                 value={[opacity]}
                 onValueChangeEnd={opacityChangeHandler}
               />
-            </OpacityControlInputContainer>
+            </OpacityControlTextInputContainer>
           </OpacityControlBody>
         </OpacityControlContainer>
       </ChakraPopover.Positioner>
diff --git a/src/components/Legend/OpacityControl/styled.ts b/src/components/Legend/OpacityControl/styled.ts
index a0cd395..f156d5e 100644
--- a/src/components/Legend/OpacityControl/styled.ts
+++ b/src/components/Legend/OpacityControl/styled.ts
@@ -20,12 +20,12 @@ export const OpacityControlLabel = styled.p`
   color: ${getThemedColor('neutral', 900)};
 `
 
-export const OpacityControlInputContainer = styled.div`
+export const OpacityControlTextInputContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 12px;
 
-  .input-container {
+  .text-input-container {
     width: 70px;
     margin: 0px;
 
diff --git a/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx b/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx
index 9d45111..5bfa6ed 100644
--- a/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx
+++ b/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx
@@ -7,7 +7,7 @@ import QualitativeLegend from '.'
 import { InfoIcon } from '../../icons'
 
 const meta = {
-  title: 'Legend/Qualitative Legend',
+  title: 'Legend/Qualitative Attributes',
   component: QualitativeLegend,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Legend/QualitativeLegend/README.md b/src/components/Legend/QualitativeLegend/README.md
index 6e8c4b8..c870efb 100644
--- a/src/components/Legend/QualitativeLegend/README.md
+++ b/src/components/Legend/QualitativeLegend/README.md
@@ -14,13 +14,15 @@ import { QualitativeLegend } from 'wri-design-systems'
 
 ```html
 <QualitativeLegend
-  type='raster'
-  label='Attribute'
-  caption='Caption'
-  color='#238B45'
-  onActionClick={() => console.log('click')}
-  showActionButton
-/>
+  type="raster"
+  label="Attribute"
+  caption="Caption"
+  color="#238B45"
+  onActionClick="{()"
+  =""
+>
+  console.log('click')} showActionButton /></QualitativeLegend
+>
 ```
 
 ## Props
@@ -41,26 +43,30 @@ type QualitativeLegendProps = {
 
 ```html
 <QualitativeLegend
-  type='raster'
-  label='Attribute'
-  caption='Caption'
-  color='#238B45'
-  onActionClick={() => console.log('click')}
-  showActionButton
-/>
+  type="raster"
+  label="Attribute"
+  caption="Caption"
+  color="#238B45"
+  onActionClick="{()"
+  =""
+>
+  console.log('click')} showActionButton /></QualitativeLegend
+>
 ```
 
 ## Line
 
 ```html
 <QualitativeLegend
-  type='line'
-  label='Attribute'
-  caption='Caption'
-  color='#238B45'
-  onActionClick={() => console.log('click')}
-  showActionButton
-/>
+  type="line"
+  label="Attribute"
+  caption="Caption"
+  color="#238B45"
+  onActionClick="{()"
+  =""
+>
+  console.log('click')} showActionButton /></QualitativeLegend
+>
 ```
 
 ## Point
diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md
index 7e6d94c..aa5b2da 100644
--- a/src/components/Radio/README.md
+++ b/src/components/Radio/README.md
@@ -13,10 +13,8 @@ import { RadioGroup, Radio } from 'wri-design-systems'
 ## Usage
 
 ```html
-<RadioGroup name='radio-group-1'>
-  <Radio value='1'>
-    One
-  </Radio>
+<RadioGroup name="radio-group-1">
+  <Radio value="1"> One </Radio>
 </RadioGroup>
 ```
 
@@ -48,56 +46,29 @@ type RadioProps = Omit<
 ## Default Checked
 
 ```html
-<RadioGroup
-  name='radio-group'
-  defaultValue='2'
->
-  <Radio value='1'>
-    One
-  </Radio>
-  <Radio value='2'>
-    Two
-  </Radio>
-  <Radio value='3'>
-    Three
-  </Radio>
+<RadioGroup name="radio-group" defaultValue="2">
+  <Radio value="1"> One </Radio>
+  <Radio value="2"> Two </Radio>
+  <Radio value="3"> Three </Radio>
 </RadioGroup>
 ```
 
 ## Disabled
 
 ```html
-<RadioGroup
-  name='radio-group'
-  defaultValue='2'
->
-  <Radio value='1'>
-    One
-  </Radio>
-  <Radio value='2' disabled>
-    Two
-  </Radio>
-  <Radio value='3'>
-    Three
-  </Radio>
+<RadioGroup name="radio-group" defaultValue="2">
+  <Radio value="1"> One </Radio>
+  <Radio value="2" disabled> Two </Radio>
+  <Radio value="3"> Three </Radio>
 </RadioGroup>
 ```
 
 ## Radio Groups Row
 
 ```html
-<RadioGroup
-  name='radio-group'
-  isRow
->
-  <Radio value='1'>
-    One
-  </Radio>
-  <Radio value='2'>
-    Two
-  </Radio>
-  <Radio value='3'>
-    Three
-  </Radio>
+<RadioGroup name="radio-group" isRow>
+  <Radio value="1"> One </Radio>
+  <Radio value="2"> Two </Radio>
+  <Radio value="3"> Three </Radio>
 </RadioGroup>
 ```
diff --git a/src/components/Radio/Radio.stories.tsx b/src/components/Radio/Radio.stories.tsx
index 3ec09ec..5b97b3e 100644
--- a/src/components/Radio/Radio.stories.tsx
+++ b/src/components/Radio/Radio.stories.tsx
@@ -7,7 +7,7 @@ import Radio from '.'
 import RadioGroup from './RadioGroup'
 
 const meta = {
-  title: 'Controls/Radio',
+  title: 'Controls/Radio Button',
   component: RadioGroup,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Slider/README.md b/src/components/Slider/README.md
index ca35ed4..ed1b46d 100644
--- a/src/components/Slider/README.md
+++ b/src/components/Slider/README.md
@@ -13,11 +13,7 @@ import { Slider } from 'wri-design-systems'
 ## Usage
 
 ```html
-<Slider
-  min={0}
-  max={100}
-  defaultValue={[50]}
-/>
+<Slider min="{0}" max="{100}" defaultValue="{[50]}" />
 ```
 
 ## Props
@@ -51,11 +47,7 @@ type SliderProps = Omit<
 ## Continuous
 
 ```html
-<Slider
-  min={0}
-  max={100}
-  defaultValue={[50]}
-/>
+<Slider min="{0}" max="{100}" defaultValue="{[50]}" />
 ```
 
 ## Discrete
@@ -96,28 +88,14 @@ type SliderProps = Omit<
 ## Range
 
 ```html
-<Slider
-  value={[20, 80]}
-/>
+<Slider value="{[20," 80]} />
 ```
 
 ## Centred
 
-```html
-<Slider
-  min={0}
-  max={100}
-  defaultValue={[50]}
-  isCentred
-/>
-
-## Disabled
+````html
+<Slider min="{0}" max="{100}" defaultValue="{[50]}" isCentred />
 
-```html
-<Slider
-  min={0}
-  max={100}
-  defaultValue={[50]}
-  disabled
-/>
-```
+## Disabled ```html
+<Slider min="{0}" max="{100}" defaultValue="{[50]}" disabled />
+````
diff --git a/src/components/Switch/README.md b/src/components/Switch/README.md
index 4991dd1..db75f29 100644
--- a/src/components/Switch/README.md
+++ b/src/components/Switch/README.md
@@ -13,9 +13,7 @@ import { Switch } from 'wri-design-systems'
 ## Usage
 
 ```html
-<Switch name='switch'>
-  Switch
-</Switch>
+<Switch name="switch"> Switch </Switch>
 ```
 
 ## Props
@@ -41,21 +39,15 @@ type SwitchProps = Omit<
 ## Default Checked
 
 ```html
-<Switch name='switch' defaultChecked>
-  Switch
-</Switch>
+<Switch name="switch" defaultChecked> Switch </Switch>
 ```
 
 ## Disabled
 
 ```html
-<Switch name='switch 1' disabled>
-  Switch
-</Switch>
+<Switch name="switch 1" disabled> Switch </Switch>
 ```
 
 ```html
-<Switch name='switch 2' disabled checked>
-  Switch
-</Switch>
+<Switch name="switch 2" disabled checked> Switch </Switch>
 ```
diff --git a/src/components/TabBar/TabBar.stories.tsx b/src/components/TabBar/TabBar.stories.tsx
index 0520b12..104855a 100644
--- a/src/components/TabBar/TabBar.stories.tsx
+++ b/src/components/TabBar/TabBar.stories.tsx
@@ -6,7 +6,7 @@ import TabBar from '.'
 import { CheckIcon } from '../icons'
 
 const meta = {
-  title: 'TabBar',
+  title: 'Tab Bar',
   component: TabBar,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Tag/README.md b/src/components/Tag/README.md
index e3bbccc..e922386 100644
--- a/src/components/Tag/README.md
+++ b/src/components/Tag/README.md
@@ -41,66 +41,43 @@ type TagProps = Omit<
 ## Info White
 
 ```html
-<Tag
-  label='Label'
-  variant='info-white'
-/>
+<Tag label="Label" variant="info-white" />
 ```
 
 ## Info Grey
 
 ```html
-<Tag
-  label='Label'
-  variant='info-grey'
-/>
+<Tag label="Label" variant="info-grey" />
 ```
 
 ## Success
 
 ```html
-<Tag
-  label='Label'
-  variant='success'
-/>
+<Tag label="Label" variant="success" />
 ```
 
 ## Warning
 
 ```html
-<Tag
-  label='Label'
-  variant='warning'
-/>
+<Tag label="Label" variant="warning" />
 ```
 
 ## Error
 
 ```html
-<Tag
-  label='Label'
-  variant='error'
-/>
+<Tag label="Label" variant="error" />
 ```
 
 ## Small Size
 
 ```html
-<Tag
-  label='Label'
-  size='small'
-  variant='info-grey'
-/>
+<Tag label="Label" size="small" variant="info-grey" />
 ```
 
 ## Large Size
 
 ```html
-<Tag
-  label='Label'
-  size='large'
-  variant='info-grey'
-/>
+<Tag label="Label" size="large" variant="info-grey" />
 ```
 
 ## With Icon
diff --git a/src/components/TextInput/README.md b/src/components/TextInput/README.md
new file mode 100644
index 0000000..55e58ea
--- /dev/null
+++ b/src/components/TextInput/README.md
@@ -0,0 +1,90 @@
+# TextInput
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/inputs-text-input--docs)
+
+[TextInputDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/TextInput/TextInputDemo.tsx)
+
+## Import
+
+```js
+import { TextInput } from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<TextInput label="Label" caption="Caption" placeholder="placeholder" required />
+```
+
+## Props
+
+```ts
+type TextInputProps = Omit<
+  ChakraInputProps,
+  'size' | 'variant' | 'colorPalette' | 'defaultChecked'
+> & {
+  label: string
+  caption?: string
+  placeholder?: string
+  errorMessage?: string
+  required?: boolean
+  disabled?: boolean
+  size?: 'small' | 'default'
+  defaultValue?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+```
+
+## Optional
+
+```html
+<TextInput label="Label" caption="Caption" placeholder="placeholder" />
+```
+
+## Small Input
+
+```html
+<TextInput
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  size="small"
+  required
+/>
+```
+
+## Default Value
+
+```html
+<TextInput
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  defaultValue="Default Value"
+  required
+/>
+```
+
+## With Error
+
+```html
+<TextInput
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  errorMessage="Error Message"
+  required
+/>
+```
+
+## Disabled
+
+```html
+<TextInput
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  required
+  disabled
+/>
+```
diff --git a/src/components/Input/Input.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
similarity index 91%
rename from src/components/Input/Input.stories.tsx
rename to src/components/TextInput/TextInput.stories.tsx
index 6f01724..0add003 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/TextInput/TextInput.stories.tsx
@@ -2,16 +2,16 @@
 import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
-import Input from '.'
+import TextInput from '.'
 
 const meta = {
-  title: 'Inputs/Input',
-  component: Input,
+  title: 'Inputs/Text Input',
+  component: TextInput,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof Input>
+} satisfies Meta<typeof TextInput>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/src/components/Input/InputDemo.tsx b/src/components/TextInput/TextInputDemo.tsx
similarity index 76%
rename from src/components/Input/InputDemo.tsx
rename to src/components/TextInput/TextInputDemo.tsx
index 063c71d..07db64a 100644
--- a/src/components/Input/InputDemo.tsx
+++ b/src/components/TextInput/TextInputDemo.tsx
@@ -1,28 +1,28 @@
-import { Input } from '..'
+import { TextInput } from '..'
 
-const InputDemo = () => (
+const TextInputDemo = () => (
   <div>
-    <Input
+    <TextInput
       label='Label'
       caption='Caption'
       placeholder='placeholder'
       defaultValue='Default Value'
       required
     />
-    <Input
+    <TextInput
       label='Label'
       caption='Caption'
       placeholder='placeholder'
       size='small'
     />
-    <Input
+    <TextInput
       label='Label'
       caption='Caption'
       placeholder='placeholder'
       errorMessage='Error Message'
       required
     />
-    <Input
+    <TextInput
       label='Label'
       caption='Caption'
       placeholder='placeholder'
@@ -32,4 +32,4 @@ const InputDemo = () => (
   </div>
 )
 
-export default InputDemo
+export default TextInputDemo
diff --git a/src/components/Input/index.tsx b/src/components/TextInput/index.tsx
similarity index 86%
rename from src/components/Input/index.tsx
rename to src/components/TextInput/index.tsx
index afd76a3..f9c1b65 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/TextInput/index.tsx
@@ -4,15 +4,15 @@ import React, { useState } from 'react'
 import { Field } from '@chakra-ui/react'
 import {
   ErrorBar,
-  InputContainer,
+  TextInputContainer,
   StyledFieldCaption,
   StyledFieldErrorMessage,
   StyledFieldLabel,
-  StyledInput,
+  StyledTextInput,
 } from './styled'
-import { InputProps } from './types'
+import { TextInputProps } from './types'
 
-const Input = ({
+const TextInput = ({
   label,
   caption,
   placeholder,
@@ -23,7 +23,7 @@ const Input = ({
   defaultValue = '',
   onChange,
   ...rest
-}: InputProps) => {
+}: TextInputProps) => {
   const [value, setValue] = useState(defaultValue)
 
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -35,7 +35,7 @@ const Input = ({
   }
 
   return (
-    <InputContainer size={size} className='input-container'>
+    <TextInputContainer size={size} className='text-input-container'>
       {errorMessage ? <ErrorBar size={size} /> : null}
       <Field.Root required={required} invalid={!!errorMessage} gap='0'>
         {label ? (
@@ -59,7 +59,7 @@ const Input = ({
             {errorMessage}
           </StyledFieldErrorMessage>
         ) : null}
-        <StyledInput
+        <StyledTextInput
           placeholder={placeholder}
           disabled={disabled}
           size={size}
@@ -71,8 +71,8 @@ const Input = ({
           {...rest}
         />
       </Field.Root>
-    </InputContainer>
+    </TextInputContainer>
   )
 }
 
-export default Input
+export default TextInput
diff --git a/src/components/Input/styled.ts b/src/components/TextInput/styled.ts
similarity index 94%
rename from src/components/Input/styled.ts
rename to src/components/TextInput/styled.ts
index 4c0216c..0ba6d45 100644
--- a/src/components/Input/styled.ts
+++ b/src/components/TextInput/styled.ts
@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import { Input, Field } from '@chakra-ui/react'
 import { getThemedColor } from '../../lib/theme'
 
-export const InputContainer = styled.div<{ size: 'small' | 'default' }>`
+export const TextInputContainer = styled.div<{ size: 'small' | 'default' }>`
   width: 100%;
   display: flex;
   justify-content: flex-start;
@@ -54,7 +54,7 @@ export const StyledFieldErrorMessage = styled(Field.ErrorText)<{
   margin-top: 2px;
 `
 
-export const StyledInput = styled(Input)<{ size: 'small' | 'default' }>`
+export const StyledTextInput = styled(Input)<{ size: 'small' | 'default' }>`
   height: ${({ size }) => (size === 'small' ? '28px' : '40px')};
   width: 100%;
   border-radius: 4px;
diff --git a/src/components/Input/types.ts b/src/components/TextInput/types.ts
similarity index 91%
rename from src/components/Input/types.ts
rename to src/components/TextInput/types.ts
index 79b7297..d1db112 100644
--- a/src/components/Input/types.ts
+++ b/src/components/TextInput/types.ts
@@ -1,6 +1,6 @@
 import { InputProps as ChakraInputProps } from '@chakra-ui/react'
 
-export type InputProps = Omit<
+export type TextInputProps = Omit<
   ChakraInputProps,
   'size' | 'variant' | 'colorPalette' | 'defaultChecked'
 > & {
diff --git a/src/components/Textarea/README.md b/src/components/Textarea/README.md
index 3bc0bd3..a560edd 100644
--- a/src/components/Textarea/README.md
+++ b/src/components/Textarea/README.md
@@ -13,11 +13,11 @@ import { Textarea } from 'wri-design-systems'
 ## Usage
 
 ```html
-<Textarea
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  helperText='You have 200 characters remaining'
+<textarea
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  helperText="You have 200 characters remaining"
   required
 />
 ```
@@ -44,56 +44,51 @@ type TextareaProps = Omit<
 ## Optional
 
 ```html
-<Textarea
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  helperText='You have 200 characters remaining'
+<textarea
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  helperText="You have 200 characters remaining"
 />
 ```
 
 ## Small Input
 
 ```html
-<Textarea
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  helperText='You have 200 characters remaining'
-  size='small'
+<textarea
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  helperText="You have 200 characters remaining"
+  size="small"
 />
 ```
 
 ## Default Value
 
 ```html
-<Textarea
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  defaultValue='Default Value'
+<textarea
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  defaultValue="Default Value"
 />
 ```
 
 ## With Error
 
 ```html
-<Textarea
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  helperText='You have 200 characters remaining'
-  errorMessage='Error Message'
+<textarea
+  label="Label"
+  caption="Caption"
+  placeholder="placeholder"
+  helperText="You have 200 characters remaining"
+  errorMessage="Error Message"
 />
 ```
 
 ## Disabled
 
 ```html
-<Textarea
-  label='Label'
-  caption='Caption'
-  placeholder='placeholder'
-  disabled
-/>
+<textarea label="Label" caption="Caption" placeholder="placeholder" disabled />
 ```
diff --git a/src/components/icons/Analysis.tsx b/src/components/icons/Analysis.tsx
index 8c75516..682ef4f 100644
--- a/src/components/icons/Analysis.tsx
+++ b/src/components/icons/Analysis.tsx
@@ -5,8 +5,17 @@ import { Icon, IconProps } from '@chakra-ui/react'
 
 export const AnalysisIcon = (props: IconProps) => (
   <Icon {...props}>
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1.71286 12.5714V3.42857H5.14144V12.5714H1.71286ZM6.28429 12.5714V6.85714H9.71286V12.5714H6.28429ZM10.8557 12.5714V0H14.2843V12.5714H10.8557ZM0.570007 16V13.7143H15.4271V16H0.570007Z" fill="currentColor" />
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M1.71286 12.5714V3.42857H5.14144V12.5714H1.71286ZM6.28429 12.5714V6.85714H9.71286V12.5714H6.28429ZM10.8557 12.5714V0H14.2843V12.5714H10.8557ZM0.570007 16V13.7143H15.4271V16H0.570007Z'
+        fill='currentColor'
+      />
     </svg>
   </Icon>
 )
diff --git a/src/components/icons/Legend.tsx b/src/components/icons/Legend.tsx
index 4ca4a25..ddb8f66 100644
--- a/src/components/icons/Legend.tsx
+++ b/src/components/icons/Legend.tsx
@@ -5,13 +5,27 @@ import { Icon, IconProps } from '@chakra-ui/react'
 
 export const LegendIcon = (props: IconProps) => (
   <Icon {...props}>
-    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_5584_387)">
-        <path d="M8.49906 16L0.940002 10.1207L2.32583 9.07087L8.49906 13.8583L14.6723 9.07087L16.0581 10.1207L8.49906 16ZM8.49906 11.7585L0.940002 5.87926L8.49906 0L16.0581 5.87926L8.49906 11.7585Z" fill="currentColor" />
+    <svg
+      width='17'
+      height='16'
+      viewBox='0 0 17 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g clipPath='url(#clip0_5584_387)'>
+        <path
+          d='M8.49906 16L0.940002 10.1207L2.32583 9.07087L8.49906 13.8583L14.6723 9.07087L16.0581 10.1207L8.49906 16ZM8.49906 11.7585L0.940002 5.87926L8.49906 0L16.0581 5.87926L8.49906 11.7585Z'
+          fill='currentColor'
+        />
       </g>
       <defs>
-        <clipPath id="clip0_5584_387">
-          <rect width="16" height="16" fill="white" transform="translate(0.5)" />
+        <clipPath id='clip0_5584_387'>
+          <rect
+            width='16'
+            height='16'
+            fill='white'
+            transform='translate(0.5)'
+          />
         </clipPath>
       </defs>
     </svg>
diff --git a/src/components/index.ts b/src/components/index.ts
index 69eadfa..9ab18ef 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,8 +10,8 @@ export { default as LayerGroup } from './Layer/LayerGroup'
 export { default as LayerGroupContainer } from './Layer/LayerGroup/LayerGroupContainer'
 export { default as LayerPanel } from './Layer/LayerPanel'
 export { default as Tag } from './Tag'
-export { default as Banner } from './Banner'
-export { default as Input } from './Input'
+export { default as InlineMessage } from './InlineMessage'
+export { default as TextInput } from './TextInput'
 export { default as Textarea } from './Textarea'
 export { default as CloseButton } from './Buttons/CloseButton'
 export { default as IconButton } from './Buttons/IconButton'