diff --git a/apps/docs/.env.development b/apps/docs/.env.development
deleted file mode 100644
index e3d837f5d..000000000
--- a/apps/docs/.env.development
+++ /dev/null
@@ -1,3 +0,0 @@
-NODE_ENV='development'
-NEXT_PUBLIC_GIT_REPO_OWNER=''
-NEXT_PUBLIC_GIT_REPO_SLUG=''
\ No newline at end of file
diff --git a/apps/docs/.eslintrc.js b/apps/docs/.eslintrc.js
deleted file mode 100644
index b60e1cd62..000000000
--- a/apps/docs/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['@westpac/eslint-config/nextjs'],
-};
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
deleted file mode 100644
index 82daa6b05..000000000
--- a/apps/docs/CHANGELOG.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# docs
-
-## 0.1.20
-
-### Patch Changes
-
-- Updated dependencies [6e580a5]
-  - @westpac/ui@0.7.0
-
-## 0.1.19
-
-### Patch Changes
-
-- Updated dependencies [240f606]
-  - @westpac/ui@0.6.0
-
-## 0.1.18
-
-### Patch Changes
-
-- Updated dependencies [473c0d6]
-  - @westpac/ui@0.5.0
-
-## 0.1.17
-
-### Patch Changes
-
-- Updated dependencies [3182ae2]
-  - @westpac/ui@0.4.0
-
-## 0.1.16
-
-### Patch Changes
-
-- Updated dependencies
-  - @westpac/ui@0.3.0
-
-## 0.1.15
-
-### Patch Changes
-
-- Updated dependencies
-  - @westpac/ui@0.2.1
-
-## 0.1.14
-
-### Patch Changes
-
-- Updated dependencies [c20c3f7]
-  - @westpac/ui@0.2.0
diff --git a/apps/docs/README.md b/apps/docs/README.md
deleted file mode 100644
index 42d1f4b71..000000000
--- a/apps/docs/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Playground Application
-
-This project is an example project to show how to consume the `@westpact/ui` package from this monorepo.
-
-> Although this sample project is within this monorepo, please consider it as an external project that consumes packages from this monorepo.
-
-Observe that this project uses the following packages:
-
-- @westpac/ui
-- @westpac/eslint-config
-- @westpac/ts-config
diff --git a/apps/docs/content/components/accordion.yaml b/apps/docs/content/components/accordion.yaml
deleted file mode 100644
index c04b4ab41..000000000
--- a/apps/docs/content/components/accordion.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Accordion
diff --git a/apps/docs/content/components/accordion/code.mdoc b/apps/docs/content/components/accordion/code.mdoc
deleted file mode 100644
index 646f6e742..000000000
--- a/apps/docs/content/components/accordion/code.mdoc
+++ /dev/null
@@ -1,71 +0,0 @@
-## Accordion
-
-### Default accordion: See Visual design for the usage recommendations for the default style.
-
-```jsx
-<Accordion>
-  {[
-    { key: 'files', title: 'Your files' },
-    { key: 'shared', title: 'Shared with you' },
-    { key: 'last', title: 'Last item' },
-  ].map(({ key, title }) => (
-    <Accordion.Item key={key} title={title}>
-      <h3>{title}</h3>
-      <p>
-        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam
-        reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!
-      </p>
-    </Accordion.Item>
-  ))}
-</Accordion>
-```
-
-### Lego accordion: See Visual design for the usage recommendations for the lego style.
-
-```jsx
-<Accordion color="hero" rounded={false}>
-  {[
-    { key: 'files', title: 'Your files' },
-    { key: 'shared', title: 'Shared with you' },
-    { key: 'last', title: 'Last item' },
-  ].map(({ key, title }) => (
-    <Accordion.Item key={key} title={title}>
-      <h3>{title}</h3>
-      <p>
-        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam
-        reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!
-      </p>
-    </Accordion.Item>
-  ))}
-</Accordion>
-```
-
-### Controlled example
-
-```jsx
-() => {
-  const [expandedKeys, setExpandedKeys] = useState<Set<Key>>();
-  return (
-    <Accordion
-      expandedKeys={expandedKeys}
-      onExpandedChange={keys => {
-        setExpandedKeys(keys);
-      }}
-    >
-      {[
-        { key: 'files', title: 'Your files' },
-        { key: 'shared', title: 'Shared with you' },
-        { key: 'last', title: 'Last item' },
-      ].map(({ key, title }) => (
-        <Accordion.Item key={key} title={title}>
-          <h3>{title}</h3>
-          <p>
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam
-            reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!
-          </p>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  );
-}
-```
diff --git a/apps/docs/content/components/alert.yaml b/apps/docs/content/components/alert.yaml
deleted file mode 100644
index b6d5fff9c..000000000
--- a/apps/docs/content/components/alert.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Alert
diff --git a/apps/docs/content/components/alert/code.mdoc b/apps/docs/content/components/alert/code.mdoc
deleted file mode 100644
index f290eb330..000000000
--- a/apps/docs/content/components/alert/code.mdoc
+++ /dev/null
@@ -1,101 +0,0 @@
-## Looks
-
-```jsx
-<div>
-  <Alert look="info">
-    <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
-  </Alert>
-  <Alert look="success">
-    <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
-  </Alert>
-  <Alert look="warning">
-    <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
-  </Alert>
-  <Alert look="danger">
-    <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
-  </Alert>
-  <Alert look="system">
-    <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
-    inconvenience. <a href="#">Link</a>
-  </Alert>
-</div>
-```
-
----
-
-## Text
-
-```jsx
-<div>
-  <Alert look="info" mode="text">
-    <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
-  </Alert>
-  <Alert look="success" mode="text">
-    <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
-  </Alert>
-  <Alert look="warning" mode="text">
-    <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
-  </Alert>
-  <Alert look="danger" mode="text">
-    <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
-  </Alert>
-  <Alert look="system" mode="text">
-    <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
-    inconvenience. <a href="#">Link</a>
-  </Alert>
-</div>
-```
-
----
-
-## Heading
-
-```jsx
-<Alert look="info" heading="I am an alert heading">
-  This alert needs your attention, but it’s not super important. Lorem ipsum dolor sit amet, consectetur adipisicing
-  elit. Quo dolor provident quasi nisi officia tempore fuga autem, animi iste molestiae, qui omnis doloribus aliquid
-  ipsam rem fugiat veniam voluptatem accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-  <a href="#">Link</a>
-</Alert>
-```
-
----
-
-## Custom
-
-```jsx
-<Alert look="info" icon={TelephoneIcon}>
-  <strong>Heads up!</strong> Only info look alerts allow custom icons. <a href="#">Link</a>
-</Alert>
-```
-
----
-
-## Dismissible
-
-```jsx
-<Alert look="info" dismissible>
-  <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
-</Alert>
-```
-
----
-
-## Controlled
-
-```jsx
-() => {
-  const [open, setOpen] = useState(true);
-  return (
-    <Fragment>
-      <Button className="mb-3" onClick={() => setOpen(open => !open)}>
-        {open ? 'Hide' : 'Show'}
-      </Button>
-      <Alert look="info" dismissible open={open} onClose={() => setOpen(false)}>
-        <strong>Heads up!</strong> This alert needs your attention, but it’s not super important.{' '}
-        <a href="#">Link</a>
-      </Alert>
-    </Fragment>
-  )
-};
-```
diff --git a/apps/docs/content/components/autocomplete.yaml b/apps/docs/content/components/autocomplete.yaml
deleted file mode 100644
index 5e4abf834..000000000
--- a/apps/docs/content/components/autocomplete.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Autocomplete
diff --git a/apps/docs/content/components/autocomplete/code.mdoc b/apps/docs/content/components/autocomplete/code.mdoc
deleted file mode 100644
index ec435208a..000000000
--- a/apps/docs/content/components/autocomplete/code.mdoc
+++ /dev/null
@@ -1,101 +0,0 @@
-## Autocomplete
-
-### Default
-
-```jsx
-<Autocomplete aria-label="Animals">
-  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
-  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
-  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
-  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
-  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
-  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
-</Autocomplete>
-```
-
-### Controlled
-
-```jsx
-() => {
-  const [selectedKey, setSelectedKey] = useState<Key>();
-  const handleSelectionChange = (key: Key) => {
-    setSelectedKey(key);
-  };
-  return (
-    <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
-      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
-      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
-      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
-      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
-      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
-      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
-    </Autocomplete>
-  );
-};
-```
-
-### Invalid
-
-```jsx
-<Autocomplete aria-label="Animals" invalid>
-  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
-  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
-  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
-  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
-  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
-  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
-</Autocomplete>
-```
-
-### Disabled
-
-```jsx
-<Autocomplete aria-label="Animals" disabled>
-  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
-  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
-  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
-  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
-  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
-  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
-</Autocomplete>
-```
-
-### Sizes
-
-```tsx
-() => {
-  const [selectedKey, setSelectedKey] = useState<Key>();
-  const handleSelectionChange = (key: Key) => {
-    setSelectedKey(key);
-  };
-  return (
-    <Fragment>
-      {(['small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <div className="py-2" key={size}>
-          <Autocomplete label={size} size={size} aria-label={`size ${size}`}>
-            <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
-            <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
-            <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
-            <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
-            <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
-            <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
-          </Autocomplete>
-        </div>
-      ))}
-    </Fragment>
-  );
-};
-```
-
-### Footer
-
-```jsx
-<Autocomplete aria-label="Animals" disabled footer={<h3>Footer message</h3>}>
-  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
-  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
-  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
-  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
-  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
-  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
-</Autocomplete>
-```
diff --git a/apps/docs/content/components/breadcrumb.yaml b/apps/docs/content/components/breadcrumb.yaml
deleted file mode 100644
index d2179414f..000000000
--- a/apps/docs/content/components/breadcrumb.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Breadcrumb
diff --git a/apps/docs/content/components/breadcrumb/code.mdoc b/apps/docs/content/components/breadcrumb/code.mdoc
deleted file mode 100644
index abc753609..000000000
--- a/apps/docs/content/components/breadcrumb/code.mdoc
+++ /dev/null
@@ -1,23 +0,0 @@
-## Breadcrumb
-
-```jsx
-// Using the Link component (as NextLink) from 'next/LinkLink'
-<Breadcrumb>
-  <NextLink href="#test" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isDisabled tag="a">
-      Disabled item
-    </Breadcrumb.Item>
-  </NextLink>
-  <NextLink href="#another" passHref legacyBehavior>
-    <Breadcrumb.Item isCurrent tag="a">
-      Last item
-    </Breadcrumb.Item>
-  </NextLink>
-</Breadcrumb>
-```
diff --git a/apps/docs/content/components/button-dropdown.yaml b/apps/docs/content/components/button-dropdown.yaml
deleted file mode 100644
index 34cec2224..000000000
--- a/apps/docs/content/components/button-dropdown.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Button Dropdown
\ No newline at end of file
diff --git a/apps/docs/content/components/button-dropdown/code.mdoc b/apps/docs/content/components/button-dropdown/code.mdoc
deleted file mode 100644
index fde7b3536..000000000
--- a/apps/docs/content/components/button-dropdown/code.mdoc
+++ /dev/null
@@ -1,49 +0,0 @@
-## Default usage
-
-```jsx
-<ButtonDropdown text="Dropdown" look="primary" soft>
-    <p>
-        Example dropdown <a href="#" className="text-[blue] underline">content</a>...
-    </p>
-</ButtonDropdown>
-```
-
-## Dropdown with headings
-
-```jsx
-<ButtonDropdown text="Dropdown" look="primary" soft>
-    <ButtonDropdown.Heading>Dropdown heading #1</ButtonDropdown.Heading>
-    Example dropdown content...
-    <ButtonDropdown.Heading>Dropdown heading #2</ButtonDropdown.Heading>
-    Example dropdown content...
-</ButtonDropdown>
-```
-
-## Dropdown box sizes (min-widths)
-```jsx
-<div>
-    <h3 className="font-bold">Small</h3>
-    <ButtonDropdown text="Dropdown" dropdownSize="small" look="primary" soft>
-        <ButtonDropdown.Heading>Small</ButtonDropdown.Heading>
-    </ButtonDropdown>
-    <h3 className="font-bold">Medium</h3>
-    <ButtonDropdown text="Dropdown" dropdownSize="medium" look="primary" soft>
-        <ButtonDropdown.Heading>Medium</ButtonDropdown.Heading>
-    </ButtonDropdown>
-    <h3 className="font-bold">Large</h3>
-    <ButtonDropdown text="Dropdown" dropdownSize="large" look="primary" soft>
-        <ButtonDropdown.Heading>Large</ButtonDropdown.Heading>
-    </ButtonDropdown>
-</div>
-```
-
-## Default Open
-
-```jsx
-<ButtonDropdown text="Dropdown" look="primary" open>
-    <p>
-        Example dropdown <a href="#" className="text-[blue] underline">content</a>...
-    </p>
-</ButtonDropdown>
-```
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/button-group.yaml b/apps/docs/content/components/button-group.yaml
deleted file mode 100644
index 9d1b9e02c..000000000
--- a/apps/docs/content/components/button-group.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Button Group
\ No newline at end of file
diff --git a/apps/docs/content/components/button-group/code.mdoc b/apps/docs/content/components/button-group/code.mdoc
deleted file mode 100644
index 9d18d3017..000000000
--- a/apps/docs/content/components/button-group/code.mdoc
+++ /dev/null
@@ -1,67 +0,0 @@
-## ButtonGroup sizes
-
-```jsx
-<div className="grid gap-3">
-    <ButtonGroup label={<p className="font-bold mb-1">Small</p>} size="small">
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-    <ButtonGroup label={<p className="font-bold mb-1">Medium (default)</p>} size="medium">
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-    <ButtonGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-    <ButtonGroup label={<p className="font-bold mb-1">Extra large</p>} size="xlarge">
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-</div>
-```
-
-## ButtonGroup looks
-
-```jsx
-<div className="grid gap-3">
-    <ButtonGroup label={<p className="font-bold mb-1">Hero (default)</p>} look="hero">
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-    <ButtonGroup label={<p className="font-bold mb-1">Primary</p>} look="primary">
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-</div>
-```
-
-## ButtonGroup disabled
-
-```jsx
-<div className="grid gap-3">
-    <ButtonGroup label={<p className="font-bold mb-1">Disabled</p>} look="hero" isDisabled>
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-</div>
-```
-
-## ButtonGroup block
-
-```jsx
-<div className="grid gap-3">
-    <ButtonGroup label={<p className="font-bold mb-1">Block</p>} look="hero" block>
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-    </ButtonGroup>
-</div>
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/button.yaml b/apps/docs/content/components/button.yaml
deleted file mode 100644
index 4f8a4112c..000000000
--- a/apps/docs/content/components/button.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Button
diff --git a/apps/docs/content/components/button/code.mdoc b/apps/docs/content/components/button/code.mdoc
deleted file mode 100644
index 22dbcd567..000000000
--- a/apps/docs/content/components/button/code.mdoc
+++ /dev/null
@@ -1,82 +0,0 @@
-## Button sizes
-
-```jsx
-<div className="flex gap-2">
-  <Button look="primary" size="xlarge">
-    Extra large: 48px
-  </Button>
-  
-  <Button look="primary" size="large">
-    Large: 42px
-  </Button>
-  
-  <Button look="primary" size="medium">
-    Medium: 36px
-  </Button>
-  
-  <Button look="primary" size="small">
-    Small: 30px
-  </Button>
-</div>
-```
----
-
-## Standard buttons
-
-```jsx
-<div className="flex gap-2">
-  <Button look="primary">Primary standard</Button>
-  <Button look="hero">Hero standard</Button>
-  <Button look="faint">Faint standard</Button>
-  <Button look="link">Link</Button>
-</div>
-```
----
-
-## Soft buttons
-
-```jsx
-<div className="flex gap-2">
-  <Button look="primary" soft>Primary soft</Button>
-  <Button look="hero" soft>Hero soft</Button>
-  <Button look="faint" soft>Faint soft</Button>
-</div>
-```
----
-
-## Buttons with icons
-
-```jsx
-<div className="flex flex-col gap-2">
-  <div className="flex gap-2">
-    <Button iconBefore={FavoriteIcon}>Button</Button>
-    <Button look="primary" iconAfter={FavoriteIcon}>Button</Button>
-    <Button look="faint" iconAfter={FavoriteIcon}>Button</Button>
-  </div>
-  <div className="flex gap-2">
-    <Button soft iconBefore={FavoriteIcon}>Button</Button>
-    <Button look="primary" soft iconAfter={FavoriteIcon}>Button</Button>
-    <Button look="faint" soft iconAfter={FavoriteIcon}>Button</Button>
-  </div>
-  <div className="flex flex-col gap-2">
-    <Button block iconAfter={AddIcon}>Button</Button>
-    <Button block justify iconAfter={AddIcon}>Button</Button>
-  </div>
-</div>
-```
-
----
-
-## Responsive buttons
-
-Medium size button becomes Extra large from the MD breakpoint
-
-```jsx
-<Button size={{ initial: 'medium', md: 'xlarge' }}>Sample button</Button>
-```
-
-Small size button becomes medium at the SM breakpoint, large at the MD breakpoint and Extra large at the LG breakpoint
-
-```jsx
-<Button size={{ initial: 'small', md: 'large', lg: 'xlarge' }}>Sample button</Button>
-```
diff --git a/apps/docs/content/components/checkbox-group.yaml b/apps/docs/content/components/checkbox-group.yaml
deleted file mode 100644
index 4bd59ffe3..000000000
--- a/apps/docs/content/components/checkbox-group.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Checkbox Group
\ No newline at end of file
diff --git a/apps/docs/content/components/checkbox-group/code.mdoc b/apps/docs/content/components/checkbox-group/code.mdoc
deleted file mode 100644
index e803a124f..000000000
--- a/apps/docs/content/components/checkbox-group/code.mdoc
+++ /dev/null
@@ -1,109 +0,0 @@
-This component was combined with RadioGroup in the old GEL, it is now it's own component as it using React Aria
-
-## Checkbox sizes
-
-```jsx
-<div className="flex">
-    <CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-    <span className="mr-3" />  
-    <CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-</div>
-```
-
-## Horizontal layout
-
-```jsx
-<div>
-    <CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} orientation="horizontal">
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-     
-    <CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" orientation="horizontal">
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-</div>
-```
-
-## Checkboxes with hint text
-
-```jsx
-<div className="flex">
-    <CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-        <CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2" hint="This is hint text">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3" hint="This is hint text">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-    <span className="mr-3" />  
-    <CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-        <CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2" hint="This is hint text">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3" hint="This is hint text">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-</div>
-```
-
-## CheckboxGroup with Reveal
-
-```jsx
-<div className="flex">
-    <CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" showAmount={1}>
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-    <span className="mr-3" />  
-    <CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" showAmount={1}>
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-</div>
-```
-
-## CheckboxGroup completely disabled
-
-```jsx
-<div className="flex">
-    <CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" isDisabled>
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-    <span className="mr-3" />  
-    <CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large" isDisabled>
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-</div>
-```
-
-## CheckboxGroup with individual items disabled
-
-```jsx
-<div className="flex">
-    <CheckboxGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-        <CheckboxGroup.Checkbox value="Option 1" isDisabled>Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-    <span className="mr-3" />  
-    <CheckboxGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-        <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 2" isDisabled>Option 2</CheckboxGroup.Checkbox>
-        <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>
-    </CheckboxGroup>
-</div>
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/collapsible.yaml b/apps/docs/content/components/collapsible.yaml
deleted file mode 100644
index 999a2cde1..000000000
--- a/apps/docs/content/components/collapsible.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Collapsible
\ No newline at end of file
diff --git a/apps/docs/content/components/collapsible/code.mdoc b/apps/docs/content/components/collapsible/code.mdoc
deleted file mode 100644
index 55410c769..000000000
--- a/apps/docs/content/components/collapsible/code.mdoc
+++ /dev/null
@@ -1,61 +0,0 @@
-## Collapsible sizes
-
-```jsx
-    <div>
-        <div className="mb-2">
-            <h2 className="typography-body-10 mb-1">Small</h2>
-
-            <Collapsible text="Toggle collapsible" size="small">
-                <p>
-                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
-                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
-                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
-                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
-                </p>
-            </Collapsible>
-        </div>
-        <hr className="mb-2"/>
-        <div className="mb-2">
-            <h2 className="typography-body-10 mb-1">Medium (default)</h2>
-
-            <Collapsible text="Toggle collapsible" size="medium">
-                <p>
-                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
-                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
-                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
-                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
-                </p>
-            </Collapsible>
-        </div>
-        <hr className="mb-2"/>
-        <div className="mb-2">
-            <h2 className="typography-body-10 mb-1">Large</h2>
-
-            <Collapsible text="Toggle collapsible" size="large">
-                <p>
-                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
-                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
-                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
-                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
-                </p>
-            </Collapsible>
-        </div>
-        <hr className="mb-2"/>
-        <div className="mb-2">
-            <h2 className="typography-body-10 mb-1">XLarge</h2>
-
-            <Collapsible text="Toggle collapsible" size="xlarge">
-                <p>
-                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
-                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
-                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
-                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
-                </p>
-            </Collapsible>
-        </div>
-    </div>
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/colors.yaml b/apps/docs/content/components/colors.yaml
deleted file mode 100644
index 89ed265fc..000000000
--- a/apps/docs/content/components/colors.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Colors
diff --git a/apps/docs/content/components/colors/code.mdoc b/apps/docs/content/components/colors/code.mdoc
deleted file mode 100644
index e846a058d..000000000
--- a/apps/docs/content/components/colors/code.mdoc
+++ /dev/null
@@ -1,270 +0,0 @@
-## Colors
-
-```jsx
-() => {
-  const COLORS = {
-    background: [
-      'bg-background',
-      'bg-background-90',
-      'bg-background-80',
-      'bg-background-70',
-      'bg-background-60',
-      'bg-background-50',
-      'bg-background-40',
-      'bg-background-30',
-      'bg-background-20',
-      'bg-background-10',
-      'bg-background-5',
-    ],
-    border: [
-      'bg-border',
-      'bg-border-90',
-      'bg-border-80',
-      'bg-border-70',
-      'bg-border-60',
-      'bg-border-50',
-      'bg-border-40',
-      'bg-border-30',
-      'bg-border-20',
-      'bg-border-10',
-      'bg-border-5',
-    ],
-    borderDark: [
-      'bg-borderDark',
-      'bg-borderDark-90',
-      'bg-borderDark-80',
-      'bg-borderDark-70',
-      'bg-borderDark-60',
-      'bg-borderDark-50',
-      'bg-borderDark-40',
-      'bg-borderDark-30',
-      'bg-borderDark-20',
-      'bg-borderDark-10',
-      'bg-borderDark-5',
-    ],
-    focus: [
-      'bg-focus',
-      'bg-focus-90',
-      'bg-focus-80',
-      'bg-focus-70',
-      'bg-focus-60',
-      'bg-focus-50',
-      'bg-focus-40',
-      'bg-focus-30',
-      'bg-focus-20',
-      'bg-focus-10',
-      'bg-focus-5',
-    ],
-    heading: [
-      'bg-heading',
-      'bg-heading-90',
-      'bg-heading-80',
-      'bg-heading-70',
-      'bg-heading-60',
-      'bg-heading-50',
-      'bg-heading-40',
-      'bg-heading-30',
-      'bg-heading-20',
-      'bg-heading-10',
-      'bg-heading-5',
-    ],
-    hero: [
-      'bg-hero',
-      'bg-hero-90',
-      'bg-hero-80',
-      'bg-hero-70',
-      'bg-hero-60',
-      'bg-hero-50',
-      'bg-hero-40',
-      'bg-hero-30',
-      'bg-hero-20',
-      'bg-hero-10',
-      'bg-hero-5',
-    ],
-    light: [
-      'bg-light',
-      'bg-light-90',
-      'bg-light-80',
-      'bg-light-70',
-      'bg-light-60',
-      'bg-light-50',
-      'bg-light-40',
-      'bg-light-30',
-      'bg-light-20',
-      'bg-light-10',
-      'bg-light-5',
-    ],
-    link: [
-      'bg-link',
-      'bg-link-90',
-      'bg-link-80',
-      'bg-link-70',
-      'bg-link-60',
-      'bg-link-50',
-      'bg-link-40',
-      'bg-link-30',
-      'bg-link-20',
-      'bg-link-10',
-      'bg-link-5',
-    ],
-    muted: [
-      'bg-muted',
-      'bg-muted-90',
-      'bg-muted-80',
-      'bg-muted-70',
-      'bg-muted-60',
-      'bg-muted-50',
-      'bg-muted-40',
-      'bg-muted-30',
-      'bg-muted-20',
-      'bg-muted-10',
-      'bg-muted-5',
-    ],
-    neutral: [
-      'bg-neutral',
-      'bg-neutral-90',
-      'bg-neutral-80',
-      'bg-neutral-70',
-      'bg-neutral-60',
-      'bg-neutral-50',
-      'bg-neutral-40',
-      'bg-neutral-30',
-      'bg-neutral-20',
-      'bg-neutral-10',
-      'bg-neutral-5',
-    ],
-    pop: [
-      'bg-pop',
-      'bg-pop-90',
-      'bg-pop-80',
-      'bg-pop-70',
-      'bg-pop-60',
-      'bg-pop-50',
-      'bg-pop-40',
-      'bg-pop-30',
-      'bg-pop-20',
-      'bg-pop-10',
-      'bg-pop-5',
-    ],
-    primary: [
-      'bg-primary',
-      'bg-primary-90',
-      'bg-primary-80',
-      'bg-primary-70',
-      'bg-primary-60',
-      'bg-primary-40',
-      'bg-primary-50',
-      'bg-primary-30',
-      'bg-primary-20',
-      'bg-primary-10',
-      'bg-primary-5',
-    ],
-    text: [
-      'bg-text',
-      'bg-text-90',
-      'bg-text-80',
-      'bg-text-70',
-      'bg-text-60',
-      'bg-text-50',
-      'bg-text-40',
-      'bg-text-30',
-      'bg-text-20',
-      'bg-text-10',
-      'bg-text-5',
-    ],
-    success: [
-      'bg-success',
-      'bg-success-90',
-      'bg-success-80',
-      'bg-success-70',
-      'bg-success-60',
-      'bg-success-50',
-      'bg-success-40',
-      'bg-success-30',
-      'bg-success-20',
-      'bg-success-10',
-      'bg-success-5',
-    ],
-    info: [
-      'bg-info',
-      'bg-info-90',
-      'bg-info-80',
-      'bg-info-70',
-      'bg-info-60',
-      'bg-info-50',
-      'bg-info-40',
-      'bg-info-30',
-      'bg-info-20',
-      'bg-info-10',
-      'bg-info-5',
-    ],
-    warning: [
-      'bg-warning',
-      'bg-warning-90',
-      'bg-warning-80',
-      'bg-warning-70',
-      'bg-warning-60',
-      'bg-warning-50',
-      'bg-warning-40',
-      'bg-warning-30',
-      'bg-warning-20',
-      'bg-warning-10',
-      'bg-warning-5',
-    ],
-    danger: [
-      'bg-danger',
-      'bg-danger-90',
-      'bg-danger-80',
-      'bg-danger-70',
-      'bg-danger-60',
-      'bg-danger-50',
-      'bg-danger-40',
-      'bg-danger-30',
-      'bg-danger-20',
-      'bg-danger-10',
-      'bg-danger-5',
-    ],
-    system: [
-      'bg-system',
-      'bg-system-90',
-      'bg-system-80',
-      'bg-system-70',
-      'bg-system-60',
-      'bg-system-50',
-      'bg-system-40',
-      'bg-system-30',
-      'bg-system-20',
-      'bg-system-10',
-      'bg-system-5',
-    ],
-  };
-  const TINTS = ['DEFAULT', 90, 80, 70, 60, 50, 40, 30, 20, 10, 5];
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-2">
-        <div className="w-22" />
-        {TINTS.map(tint => (
-          <div key={tint} className="flex w-12 items-center justify-center rounded">
-            {tint}
-          </div>
-        ))}
-      </div>
-      {Object.entries(COLORS).map(([color, tints]) => (
-        <div key={color} className="flex items-center gap-2">
-          <div className="flex h-7 w-22 flex-row items-center justify-end">
-            <h3 className="text-right">{color}:</h3>
-          </div>
-          {tints.map(tint => {
-            return (
-              <div
-                key={tint}
-                className={`${tint} flex h-7 w-12 items-center justify-center rounded transition-colors`}
-              />
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-};
-```
diff --git a/apps/docs/content/components/compacta.yaml b/apps/docs/content/components/compacta.yaml
deleted file mode 100644
index 947140b7b..000000000
--- a/apps/docs/content/components/compacta.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Compacta
\ No newline at end of file
diff --git a/apps/docs/content/components/compacta/code.mdoc b/apps/docs/content/components/compacta/code.mdoc
deleted file mode 100644
index 404a47fdd..000000000
--- a/apps/docs/content/components/compacta/code.mdoc
+++ /dev/null
@@ -1,54 +0,0 @@
-## Default Usage
-
-```jsx
-() => {
-    const [inputs, setInputs] = useState({});
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      setInputs((prev: object) => ({ ...prev, [e.target.name]: e.target.value }));
-    };
-    return (
-      <Compacta>
-        {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
-          <Form>
-            <Form.Group>
-              <Form.Label htmlFor={`primary-${id}`}>Primary</Form.Label>
-              <Form.Hint>Primary title text</Form.Hint>
-              <Input
-                name={`primary-${id}`}
-                value={inputs[`primary-${id}` as keyof typeof inputs] || ''}
-                onChange={e => {
-                  handleChange(e);
-                  setPrimaryTitle(e.target.value);
-                }}
-              />
-            </Form.Group>
-            <Form.Group>
-              <Form.Label htmlFor={`secondary-${id}`}>Secondary</Form.Label>
-              <Form.Hint>Secondary title text</Form.Hint>
-              <Input
-                name={`secondary-${id}`}
-                value={inputs[`secondary-${id}` as keyof typeof inputs] || ''}
-                onChange={e => {
-                  handleChange(e);
-                  setSecondaryTitle(e.target.value);
-                }}
-              />
-            </Form.Group>
-            <Form.Group>
-              <Form.Label htmlFor={`tertiary-${id}`}>Tertiary</Form.Label>
-              <Form.Hint>Tertiary title text</Form.Hint>
-              <Input
-                name={`tertiary-${id}`}
-                value={inputs[`tertiary-${id}` as keyof typeof inputs] || ''}
-                onChange={e => {
-                  handleChange(e);
-                  setTertiaryTitle(e.target.value);
-                }}
-              />
-            </Form.Group>
-          </Form>
-        )}
-      </Compacta>
-      )};
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/date-picker.yaml b/apps/docs/content/components/date-picker.yaml
deleted file mode 100644
index 02f6f4166..000000000
--- a/apps/docs/content/components/date-picker.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: DatePicker
diff --git a/apps/docs/content/components/date-picker/code.mdoc b/apps/docs/content/components/date-picker/code.mdoc
deleted file mode 100644
index 18f084f69..000000000
--- a/apps/docs/content/components/date-picker/code.mdoc
+++ /dev/null
@@ -1,23 +0,0 @@
-## Datepicker sizes
-
-```jsx
-() => {
-  const sizes = ['sm', 'md', 'lg', 'xl'];
-  return sizes.map((size) => (
-    <div className="py-2" key={size}>
-      <small>size {size}</small>
-      <DatePicker size={size} />
-    </div>
-  ));
-};
-```
-
----
-
-## Disable Weekends
-
-```jsx
-() => {
-  return <DatePicker disableWeekends />
-};
-```
diff --git a/apps/docs/content/components/flexi-cell.yaml b/apps/docs/content/components/flexi-cell.yaml
deleted file mode 100644
index f4634a976..000000000
--- a/apps/docs/content/components/flexi-cell.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Flexi Cell
diff --git a/apps/docs/content/components/flexi-cell/code.mdoc b/apps/docs/content/components/flexi-cell/code.mdoc
deleted file mode 100644
index e497a7c6c..000000000
--- a/apps/docs/content/components/flexi-cell/code.mdoc
+++ /dev/null
@@ -1,799 +0,0 @@
-## Flexi Cell
-
-### Default usage
-
-```jsx
-<FlexiCell tag="a" href="#" withBorder body after="after" before="before">
-  <FlexiCell.Label tag="h3">Label</FlexiCell.Label>
-  <FlexiCell.Hint>Hint</FlexiCell.Hint>
-</FlexiCell>
-```
-
-### With NextJS Link usage
-
-```jsx
-<NextLink href="#test" passHref legacyBehavior>
-  <FlexiCell tag="a" href="#" withBorder body after="after" before="before">
-    <FlexiCell.Label tag="h3">Label</FlexiCell.Label>
-    <FlexiCell.Hint>Hint</FlexiCell.Hint>
-  </FlexiCell>
-</NextLink>
-```
-
-### Credit card usage
-
-```jsx
-<FlexiCell
-  tag="a"
-  href="#"
-  withBorder
-  body
-  after={
-    <FlexiCell.Adornment align="top">
-      <FlexiCell.Label tag="h3">$9,999.99</FlexiCell.Label>
-      <FlexiCell.Hint>avail $9,999.99</FlexiCell.Hint>
-    </FlexiCell.Adornment>
-  }
->
-  <FlexiCell.Label tag="h3">Credit card</FlexiCell.Label>
-  <FlexiCell.Hint>Card ending in 1234</FlexiCell.Hint>
-</FlexiCell>
-```
-
-### Account usage
-
-```jsx
-<FlexiCell
-  tag="a"
-  href="#"
-  withBorder
-  body
-  after={
-    <FlexiCell.Adornment align="top">
-      <FlexiCell.Label tag="h3">$9,999.99</FlexiCell.Label>
-    </FlexiCell.Adornment>
-  }
->
-  <FlexiCell.Label tag="h3">Account</FlexiCell.Label>
-  <FlexiCell.Hint>032-123 12345678</FlexiCell.Hint>
-</FlexiCell>
-```
-
-### Payee usage
-
-```jsx
-<FlexiCell
-  tag="a"
-  href="#"
-  withBorder
-  body
-  before={
-    <Circle className="bg-primary text-white" aria-label="Bruce">
-      B
-    </Circle>
-  }
-  after={
-    <FlexiCell.Adornment align="center">
-      <FlexiCell.Hint className="text-muted">Fri 5 Aug</FlexiCell.Hint>
-    </FlexiCell.Adornment>
-  }
->
-  <h3 className="typography-body-8 font-normal">Payee</h3>
-  <small className="text-muted">Payee details</small>
-</FlexiCell>
-```
-
-### Payee with info usage
-
-```jsx
-<FlexiCell
-  withBorder
-  body
-  before={
-    <Circle className="bg-muted text-white" aria-label="Walter White">
-      WW
-    </Circle>
-  }
-  after={
-    <FlexiCell.Adornment align="center">
-      <Button look="link" href="/somewhere" iconBefore={InfoIcon} aria-label="more info" />
-    </FlexiCell.Adornment>
-  }
->
-  <a href="#" className="group text-[inherit] decoration-[inherit] focus:focus-outline">
-    <h3 className="typography-body-8 font-normal">Payee</h3>
-    <small className="text-muted">Payee details</small>
-  </a>
-</FlexiCell>
-```
-
-### Flag payee usage
-
-```jsx
-<FlexiCell
-  withBorder
-  body
-  before={<div>Flag</div>}
-  after={
-    <FlexiCell.Adornment align="center">
-      <Button look="link" href="/somewhere" iconBefore={InfoIcon} aria-label="more info" />
-    </FlexiCell.Adornment>
-  }
->
-  <a href="#" className="group text-[inherit] decoration-[inherit] focus:focus-outline">
-    <h3 className="typography-body-8 font-normal">Payee</h3>
-    <small className="text-muted">Payee details</small>
-  </a>
-</FlexiCell>
-```
-
-### List item with flag usage
-
-```jsx
-<FlexiCell tag="a" href="#" withBorder body before={<div>Flag</div>}>
-  <h3 className="typography-body-8 font-normal">List item</h3>
-</FlexiCell>
-```
-
-### List item usage
-
-```jsx
-<FlexiCell tag="a" href="#" withBorder body>
-  <h3 className="typography-body-8 font-normal">List item</h3>
-</FlexiCell>
-```
-
-### Westpac special product usage
-
-```jsx
-<FlexiCell
-  tag="a"
-  href="#"
-  withBorder
-  body
-  after={
-    <FlexiCell.Adornment align="top">
-      <ArrowRightIcon color="link" aria-hidden="true" />
-    </FlexiCell.Adornment>
-  }
->
-  <GiftPictogram mode="duo" className="h-[50px] w-[50px]" aria-hidden="true" />
-  <h3 className="typography-body-8 font-normal">Westpac specials and product offers</h3>
-  <FlexiCell.Hint>Discounts and cashback from select merchants & product offers from Westpac</FlexiCell.Hint>
-</FlexiCell>
-```
-
-### Flexi cell with image usage
-
-```jsx
-<FlexiCell tag="a" href="#" withBorder body>
-  <img
-    src="https://images.unsplash.com/photo-1657299170950-87e5b0eaf77c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
-    alt=""
-    className="mb-2 block w-full"
-  />
-  <FlexiCell.Label className="mb-[0.5rem]">MYER</FlexiCell.Label>
-  <h3 className="typography-body-8 font-normal">Westpac specials and product offers</h3>
-</FlexiCell>
-```
-
-### Sticky footer example usage
-
-```jsx
-<div className="flex flex-col gap-2 lg:flex-row">
-  {[
-    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quae possimus, nam nobis cumque ullam et harum, magni quam distinctio, corporis sunt saepe maxime quod. Sapiente voluptatibus sint dicta tenetur.',
-    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quae possimus, nam nobis cumque ullam et harum, magni quam distinctio, corporis sunt saepe.',
-    'Lorem ipsum dolor sit amet',
-  ].map(title => (
-    <FlexiCell
-      key={title}
-      withBorder
-      badge={
-        <Badge className="block" color="primary">
-          Badge
-        </Badge>
-      }
-    >
-      <FlexiCell.Body>
-        <img
-          src="https://images.unsplash.com/photo-1657299170950-87e5b0eaf77c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
-          alt=""
-          className="mb-2 block w-full"
-        />
-        <FlexiCell.Label className="mb-[0.5rem]">MYER</FlexiCell.Label>
-        <h3 className="typography-body-8 font-normal">{title}</h3>
-      </FlexiCell.Body>
-      <FlexiCell.Footer>
-        <Button size="small" soft>
-          Share
-        </Button>
-      </FlexiCell.Footer>
-    </FlexiCell>
-  ))}
-</div>
-```
-
-### Account list usage
-
-```jsx
-() => {
-  const MOCK_ACCOUNTS = [
-    {
-      title: 'Cash',
-      id: 'cash',
-      accounts: [
-        {
-          name: 'Westpac Choice',
-          amount: '$1,234.99',
-          number: '732-123 746587',
-        },
-        {
-          name: 'Offset account for loan',
-          amount: '$20,000.00',
-          number: '732-123 123456',
-        },
-      ],
-    },
-    {
-      title: 'Foreign currency',
-      id: 'foreign-currency',
-      accounts: [
-        {
-          name: 'US Dollar Currency Account',
-          amount: '$3,957.57',
-          number: '123-456 1234567',
-        },
-        {
-          name: 'British pound Currency Account',
-          amount: '$9,999,999,999.99',
-          number: '123-456 1234567',
-        },
-      ],
-    },
-    {
-      title: 'Credit cards',
-      id: 'credit-cards',
-      accounts: [
-        {
-          name: 'Altitude Black World Mastercard',
-          amount: '-$3,957.57',
-          number: 'Card ending in 1234',
-        },
-      ],
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-2">
-      {MOCK_ACCOUNTS.map(({ title, id, accounts }) => (
-        <div key={id} className="flex flex-col gap-3">
-          <h3 className="m-0 font-normal">{title}</h3>
-          <div className="flex flex-col gap-2">
-            {accounts.map(({ name, amount, number }) => (
-              <FlexiCell
-                tag="a"
-                href="#"
-                body
-                withBorder
-                key={name}
-                after={
-                  <FlexiCell.Adornment align="top">
-                    <FlexiCell.Label className="font-semibold" tag="h4">
-                      {amount}
-                    </FlexiCell.Label>
-                    <FlexiCell.Hint>available</FlexiCell.Hint>
-                  </FlexiCell.Adornment>
-                }
-              >
-                <FlexiCell.Label className="font-normal" tag="h4">
-                  {name}
-                </FlexiCell.Label>
-                <FlexiCell.Hint>{number}</FlexiCell.Hint>
-              </FlexiCell>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-```
-
-### Payee list usage
-
-```jsx
-() => {
-  const MOCK_PAYEES = [
-    {
-      title: 'Recently Paid',
-      id: 'recently-paid',
-      payees: [
-        {
-          initials: 'AJ',
-          name: 'Andrew Jones',
-          paidAt: 'Fri 5 Aug',
-          number: '123-986 463846',
-        },
-        {
-          initials: 'JW',
-          name: 'Joss Wight',
-          paidAt: 'Mon 1 Aug',
-          number: '098-567 465352',
-        },
-      ],
-    },
-    {
-      title: 'A',
-      id: 'a',
-      payees: [
-        {
-          initials: 'AO',
-          name: 'Active OOSH',
-          number: '857-434 856383',
-          paidAt: undefined,
-        },
-        {
-          initials: 'AC',
-          name: 'Alice Cartwright',
-          number: '950-456 345363',
-          paidAt: undefined,
-        },
-      ],
-    },
-    {
-      title: 'B',
-      id: 'b',
-      payees: [
-        {
-          initials: 'BN',
-          name: 'Benjamin North',
-          number: '098-123 745362',
-          paidAt: undefined,
-        },
-      ],
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-2">
-      {MOCK_PAYEES.map(({ title, id, payees }) => (
-        <div key={id} className="flex flex-col gap-3">
-          <h3 className="m-0 border-b border-border pb-1 font-normal">{title}</h3>
-          <div className="flex flex-col gap-3">
-            {payees.map(({ name, initials, paidAt, number }) => {
-              return (
-                <FlexiCell
-                  {...(paidAt ? { href: '#', tag: 'a' } : { tag: 'div' })}
-                  key={name}
-                  className="group"
-                  body
-                  before={
-                    <FlexiCell.Adornment align="top">
-                      <FlexiCell.Circle className="bg-muted text-white" aria-hidden="true">
-                        {initials}
-                      </FlexiCell.Circle>
-                    </FlexiCell.Adornment>
-                  }
-                  after={
-                    <FlexiCell.Adornment align="center">
-                      {paidAt ? (
-                        <FlexiCell.Hint tag="h4">{paidAt}</FlexiCell.Hint>
-                      ) : (
-                        <FlexiCell.Button href="/somewhere" iconBefore={InfoIcon} aria-label="more info" />
-                      )}
-                    </FlexiCell.Adornment>
-                  }
-                >
-                  {paidAt ? (
-                    <>
-                      <FlexiCell.Label className="font-medium" tag="h4">
-                        {name}
-                      </FlexiCell.Label>
-                      <FlexiCell.Hint>{number}</FlexiCell.Hint>
-                    </>
-                  ) : (
-                    <a href="#" className="text-[inherit] decoration-[inherit]">
-                      <FlexiCell.Label className="font-medium" tag="h4">
-                        {name}
-                      </FlexiCell.Label>
-                      <FlexiCell.Hint>{number}</FlexiCell.Hint>
-                    </a>
-                  )}
-                </FlexiCell>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-```
-
-### Country list usage
-
-```jsx
-() => {
-  const MOCK_COUNTRIES = [
-    {
-      title: 'Popular',
-      id: 'popular',
-      payees: [
-        {
-          code: 'IN',
-          name: 'India',
-        },
-        {
-          code: 'UK',
-          name: 'United Kingdom',
-        },
-        {
-          code: 'USA',
-          name: 'United States',
-        },
-      ],
-    },
-    {
-      title: 'A',
-      id: 'a',
-      payees: [
-        {
-          code: 'AI',
-          name: 'Ascension Islands',
-        },
-        {
-          code: 'AN',
-          name: 'Andorra',
-        },
-        {
-          code: 'UA',
-          name: 'United Arab Emirates',
-        },
-        {
-          code: 'AF',
-          name: 'Afghanistan',
-        },
-      ],
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-2">
-      {MOCK_COUNTRIES.map(({ title, id, payees }) => (
-        <div key={id} className="flex flex-col gap-3">
-          <h3 className="m-0 border-b border-b-border pb-1 font-normal">{title}</h3>
-          <div className="flex flex-col gap-3">
-            {payees.map(({ name }) => {
-              return (
-                <FlexiCell
-                  tag="a"
-                  href="#"
-                  withBorder
-                  body
-                  key={name}
-                  before={
-                    <FlexiCell.Adornment align="top">
-                      <svg
-                        width="30"
-                        height="24"
-                        viewBox="0 0 640 480"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-hidden="true"
-                      >
-                        <path d="M0 0H640V480H0V0Z" fill="white" />
-                        <path d="M0 0H213.3V480H0V0Z" fill="#002654" />
-                        <path d="M426.7 0H640V480H426.7V0Z" fill="#CE1126" />
-                      </svg>
-                    </FlexiCell.Adornment>
-                  }
-                >
-                  <FlexiCell.Label className="font-medium" tag="span">
-                    {name}
-                  </FlexiCell.Label>
-                </FlexiCell>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-```
-
-### Foreign currency list usage
-
-```jsx
-() => {
-  const MOCK_PAYEES = [
-    {
-      title: 'Recently Paid',
-      id: 'recently-paid',
-      payees: [
-        {
-          initials: 'AJ',
-          name: 'Andrew Jones',
-          paidAt: 'Fri 5 Aug',
-          number: '123-986 463846',
-        },
-        {
-          initials: 'JW',
-          name: 'Joss Wight',
-          paidAt: 'Mon 1 Aug',
-          number: '098-567 465352',
-        },
-      ],
-    },
-    {
-      title: 'A',
-      id: 'a',
-      payees: [
-        {
-          initials: 'AO',
-          name: 'Active OOSH',
-          number: '857-434 856383',
-          paidAt: undefined,
-        },
-        {
-          initials: 'AC',
-          name: 'Alice Cartwright',
-          number: '950-456 345363',
-          paidAt: undefined,
-        },
-      ],
-    },
-    {
-      title: 'B',
-      id: 'b',
-      payees: [
-        {
-          initials: 'BN',
-          name: 'Benjamin North',
-          number: '098-123 745362',
-          paidAt: undefined,
-        },
-      ],
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-2">
-      {MOCK_PAYEES.map(({ title, id, payees }) => (
-        <div key={id} className="flex flex-col gap-3">
-          <h3 className="m-0 border-b border-b-border pb-1 font-normal">{title}</h3>
-          <div className="flex flex-col gap-3">
-            {payees.map(({ name, paidAt, number }) => {
-              return (
-                <FlexiCell
-                  {...(paidAt ? { href: '#', tag: 'a' } : { tag: 'div' })}
-                  body
-                  className="group"
-                  key={name}
-                  before={
-                    <FlexiCell.Adornment align="top">
-                      <svg
-                        width="30"
-                        height="24"
-                        viewBox="0 0 640 480"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-label="French flag"
-                      >
-                        <path d="M0 0H640V480H0V0Z" fill="white" />
-                        <path d="M0 0H213.3V480H0V0Z" fill="#002654" />
-                        <path d="M426.7 0H640V480H426.7V0Z" fill="#CE1126" />
-                      </svg>
-                    </FlexiCell.Adornment>
-                  }
-                  after={
-                    <FlexiCell.Adornment align="center">
-                      {paidAt ? (
-                        <FlexiCell.Hint tag="h4">{paidAt}</FlexiCell.Hint>
-                      ) : (
-                        <FlexiCell.Button href="/somewhere" iconBefore={InfoIcon} aria-label="more info" />
-                      )}
-                    </FlexiCell.Adornment>
-                  }
-                >
-                  {paidAt ? (
-                    <>
-                      <FlexiCell.Label className="font-medium" tag="h4">
-                        {name}
-                      </FlexiCell.Label>
-                      <FlexiCell.Hint>{number}</FlexiCell.Hint>
-                    </>
-                  ) : (
-                    <a href="#" className="text-[inherit] decoration-[inherit]">
-                      <FlexiCell.Label className="font-medium" tag="h4">
-                        {name}
-                      </FlexiCell.Label>
-                      <FlexiCell.Hint>{number}</FlexiCell.Hint>
-                    </a>
-                  )}
-                </FlexiCell>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-```
-
-### Promo tiles horizontal list usage
-
-```jsx
-() => {
-  const MOCK_PROMOS = [
-    {
-      title: 'This is talking about the bonus.',
-      subtitle: 'This is more about the bonus and all the other exciting things about this.',
-      stars: true,
-    },
-    {
-      title: 'This is a longer heading talking all about the bonus this one wraps.',
-      subtitle: 'This is more about the bonus',
-      stars: false,
-    },
-    {
-      title: 'This is talking about the bonus.',
-      subtitle: 'This is more about the bonus and all the other exciting things about this.',
-      stars: false,
-    },
-    {
-      title: 'This is a longer heading talking all about the bonus this one wraps.',
-      subtitle: 'This is more about the bonus',
-      stars: false,
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-2">
-      {MOCK_PROMOS.map(({ title, subtitle, stars }) => {
-        return (
-          <FlexiCell
-            tag="a"
-            href="#"
-            key={title}
-            withBorder
-            body
-            before={
-              <FlexiCell.Adornment align="center">
-                <Circle className="h-[70px] w-[70px]">Target</Circle>
-              </FlexiCell.Adornment>
-            }
-            badge={
-              <Badge className="block" color="hero" aria-hidden={stars && 'true'}>
-                {stars ? '✭' : 'Corner flag'}
-              </Badge>
-            }
-          >
-            <small>MYER</small>
-            <FlexiCell.Label className="font-medium" tag="h4">
-              {title}
-            </FlexiCell.Label>
-            <FlexiCell.Hint>{subtitle}</FlexiCell.Hint>
-            <div className="mt-2 flex gap-2">
-              <Badge color="primary">Badge1</Badge>
-              <Badge color="primary">Badge2</Badge>
-            </div>
-          </FlexiCell>
-        );
-      })}
-    </div>
-  );
-};
-```
-
-### Promo tiles vertical list usage
-
-```jsx
-() => {
-  const MOCK_PROMOS = [
-    {
-      title: 'This is talking about the bonus.',
-      subtitle: 'This is more about the bonus and all the other exciting things about this.',
-      stars: true,
-    },
-    {
-      title: 'This is a longer heading talking all about the bonus this one wraps.',
-      subtitle: 'This is more about the bonus',
-      stars: false,
-    },
-    {
-      title: 'This is talking about the bonus.',
-      subtitle: 'This is more about the bonus and all the other exciting things about this.',
-      stars: false,
-    },
-    {
-      title: 'This is a longer heading talking all about the bonus this one wraps.',
-      subtitle: 'This is more about the bonus',
-      stars: false,
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex gap-3">
-        {MOCK_PROMOS.map(({ title, subtitle }) => (
-          <FlexiCell
-            withBorder
-            key={title}
-            className="group"
-            badge={
-              <Badge className="block" color="hero">
-                Badge
-              </Badge>
-            }
-          >
-            <FlexiCell.Body tag="a" href="#" className="text-[inherit] decoration-[inherit]">
-              <img
-                src="https://images.unsplash.com/photo-1657299170950-87e5b0eaf77c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
-                alt=""
-                className="block h-[63px] w-full object-cover"
-              />
-              <small>MYER</small>
-              <FlexiCell.Label className="font-medium" tag="h4">
-                {title}
-              </FlexiCell.Label>
-              <FlexiCell.Hint>{subtitle}</FlexiCell.Hint>
-            </FlexiCell.Body>
-            <FlexiCell.Footer>
-              <div className="mt-2 flex gap-2">
-                <a href="#">
-                  <Badge color="primary">Badge1</Badge>
-                </a>
-                <a href="#">
-                  <Badge color="primary">Badge2</Badge>
-                </a>
-              </div>
-            </FlexiCell.Footer>
-          </FlexiCell>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-### Product tiles usage
-
-```jsx
-() => {
-  const MOCK_PRODUCTS = [
-    {
-      title: 'This is talking about the bonus.',
-      subtitle: 'This is more about the bonus and all the other exciting things about this.',
-    },
-    {
-      title: 'This is a longer heading talking all about the bonus this one wraps.',
-      subtitle: 'This is more about the bonus',
-    },
-    {
-      title: 'This is talking about the bonus.',
-      subtitle: 'This is more about the bonus and all the other exciting things about this.',
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-2">
-      {MOCK_PRODUCTS.map(({ title, subtitle }) => (
-        <FlexiCell tag="a" href="#" withBorder withArrow body key={title} after={<TickCircleIcon color="success" />}>
-          <div className="flex flex-col gap-2 md:flex-row">
-            <GiftPictogram mode="duo" className="h-[24px] w-[24px]" aria-hidden="true" />
-            <div className="flex flex-col gap-1">
-              <FlexiCell.Label className="font-medium" tag="h4">
-                {title}
-              </FlexiCell.Label>
-              <FlexiCell.Hint>{subtitle}</FlexiCell.Hint>
-            </div>
-          </div>
-        </FlexiCell>
-      ))}
-    </div>
-  );
-};
-```
diff --git a/apps/docs/content/components/icons.yaml b/apps/docs/content/components/icons.yaml
deleted file mode 100644
index 6101b136b..000000000
--- a/apps/docs/content/components/icons.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Icons
diff --git a/apps/docs/content/components/icons/code.mdoc b/apps/docs/content/components/icons/code.mdoc
deleted file mode 100644
index 5b6501255..000000000
--- a/apps/docs/content/components/icons/code.mdoc
+++ /dev/null
@@ -1,121 +0,0 @@
-## Default
-
-```jsx
-() => {
-  const icons = [
-    AddIcon,
-    CalendarIcon,
-    DeleteIcon,
-    FavoriteIcon,
-    GridIcon,
-    HelpIcon,
-    MessageIcon,
-    NotificationOffIcon,
-    PersonIcon,
-    ProgressIcon,
-    StarRateIcon,
-    WriteIcon,
-  ];
-  return (
-    <div className="flex gap-2">
-      {icons.map((Icon, i) => (
-        <Icon key={i} />
-      ))}
-    </div>
-  );
-};
-```
-
-## Color
-
-```jsx
-() => {
-  const icons = [
-    AddIcon,
-    CalendarIcon,
-    DeleteIcon,
-    FavoriteIcon,
-    GridIcon,
-    HelpIcon,
-    MessageIcon,
-    NotificationOffIcon,
-    PersonIcon,
-    ProgressIcon,
-    StarRateIcon,
-    WriteIcon,
-  ];
-  return (
-    <div className="flex gap-2">
-      {icons.map((Icon, i) => (
-        <Icon key={i} color="primary" />
-      ))}
-    </div>
-  );
-};
-```
-
-## Outlined
-
-```jsx
-() => {
-  const icons = [
-    AddIcon,
-    CalendarIcon,
-    DeleteIcon,
-    FavoriteIcon,
-    GridIcon,
-    HelpIcon,
-    MessageIcon,
-    NotificationOffIcon,
-    PersonIcon,
-    ProgressIcon,
-    StarRateIcon,
-    WriteIcon,
-  ];
-  return (
-    <div className="flex gap-2">
-      {icons.map((Icon, i) => (
-        <Icon key={i} look="outlined" />
-      ))}
-    </div>
-  );
-};
-```
-
-## Sizes
-
-```jsx
-() => {
-  const icons = [
-    AddIcon,
-    CalendarIcon,
-    DeleteIcon,
-    FavoriteIcon,
-    GridIcon,
-    HelpIcon,
-    MessageIcon,
-    NotificationOffIcon,
-    PersonIcon,
-    ProgressIcon,
-    StarRateIcon,
-    WriteIcon,
-  ];
-  const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
-  return (
-    <div className="flex flex-col gap-2">
-      {sizes.map((size, i) => (
-        <div key={i}>
-          <p>{size}</p>
-          {
-            <div className="flex gap-2">
-              {icons.map((Icon, i) => (
-                <Icon key={i} size={size} />
-              ))}
-            </div>
-          }
-        </div>
-      ))}
-    </div>
-  );
-};
-```
diff --git a/apps/docs/content/components/input-field.yaml b/apps/docs/content/components/input-field.yaml
deleted file mode 100644
index 09e1ce654..000000000
--- a/apps/docs/content/components/input-field.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Input Field
diff --git a/apps/docs/content/components/input-field/code.mdoc b/apps/docs/content/components/input-field/code.mdoc
deleted file mode 100644
index 85785e750..000000000
--- a/apps/docs/content/components/input-field/code.mdoc
+++ /dev/null
@@ -1,528 +0,0 @@
-## Input sizes
-
-#### Default usage example
-
-```jsx
-<InputField label="Label" hint="I am a hint" supportingText="I am supporting text" after={<Button>Check</Button>}>
-  <Input />
-</InputField>
-```
-
-#### Combination usage example
-
-```jsx
-<InputField
-  label="Label"
-  hint="I am a hint"
-  supportingText="I am supporting text"
-  after={<Button>Check</Button>}
-  before="$AUD"
->
-  <Input />
-</InputField>
-```
-
-#### Fieldset as a tag
-
-```jsx
-<InputField
-  tag="fieldset"
-  label="Label"
-  hint="I am a hint"
-  supportingText="I am supporting text"
-  after={<Button>Check</Button>}
-  before="$AUD"
->
-  <Input />
-</InputField>
-```
-
-#### Text Beforoe story example
-
-```jsx
-<InputField label="Text before" hint="I am a hint" supportingText="I am supporting text" before="$AUD">
-  <Input />
-</InputField>
-```
-
-#### Text Beforoe story example
-
-```jsx
-<InputField label="Text after" hint="I am a hint" supportingText="I am supporting text" after="Text">
-  <Input />
-</InputField>
-```
-
-#### Text After and Beforoe story example
-
-```jsx
-<InputField label="Text after" hint="I am a hint" supportingText="I am supporting text" before="$AUD" after="Text">
-  <Input />
-</InputField>
-```
-
-#### Textarea
-
-```jsx
-<Fragment>
-  <InputField
-    label="Icon before"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    before={{ icon: SearchIcon }}
-  >
-    <Input />
-  </InputField>
-  <InputField label="Icon after" hint="I am a hint" supportingText="I am supporting text" after={{ icon: SearchIcon }}>
-    <Input />
-  </InputField>
-  <InputField
-    label="Icon after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={{ icon: SearchIcon }}
-    before={{ icon: SearchIcon }}
-  >
-    <Input />
-  </InputField>
-</Fragment>
-```
-
-#### Icons in buttons
-
-```jsx
-<Fragment>
-  <InputField
-    label="Icon button before"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    before={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-  >
-    <Input />
-  </InputField>
-  <InputField
-    label="Icon button after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-  >
-    <Input />
-  </InputField>
-  <InputField
-    label="Icon button before and after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-    before={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-  >
-    <Input />
-  </InputField>
-</Fragment>
-```
-
-#### Button add ons
-
-```jsx
-<Fragment>
-  <InputField
-    label="Button before"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    before={<Button>Check</Button>}
-  >
-    <Input />
-  </InputField>
-  <InputField
-    label="Button after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={<Button>Check</Button>}
-  >
-    <Input />
-  </InputField>
-  <InputField
-    label="Button before and after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={<Button>Check</Button>}
-    before={<Button>Check</Button>}
-  >
-    <Input />
-  </InputField>
-  <InputField
-    label="Primary button after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={<Button look="primary">Check</Button>}
-  >
-    <Input />
-  </InputField>
-  <InputField
-    label="Faint button after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={<Button look="faint">Check</Button>}
-  >
-    <Input />
-  </InputField>
-</Fragment>
-```
-
-#### Select add ons
-
-```jsx
-<InputField
-  label="Select"
-  hint="I am a hint"
-  supportingText="I am supporting text"
-  before={
-    <Select>
-      <option>Select</option>
-    </Select>
-  }
-  after={
-    <Select>
-      <option>Select</option>
-    </Select>
-  }
->
-  <Input />
-</InputField>
-```
-
-#### Textarea
-
-```jsx
-<InputField label="Text after" hint="I am a hint" supportingText="I am supporting text">
-  <Textarea />
-</InputField>
-```
-
-#### Different sizes
-
-```jsx
- <Fragment>
-  {(['small', 'medium', 'large', 'xlarge'] as const).map(size => (
-    <div key={size} className="border-b border-b-border py-3">
-      <h3 className="typography-body-7 mb-4 font-bold">Size: {size}</h3>
-      <InputField
-        size={size}
-        label="Text"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        before="$AUD"
-        after="Text"
-      >
-        <Input />
-      </InputField>
-
-      <InputField
-        size={size}
-        label="Icon"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        before={{ icon: VisibilityIcon, inset: true }}
-        after={{ icon: VisibilityIcon, inset: true }}
-      >
-        <Input />
-      </InputField>
-
-      <InputField
-        size={size}
-        label="Icon Button"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        before={{
-          element: <Button size={size} look="link" iconAfter={VisibilityIcon} iconColor="pop" />,
-          inset: true,
-        }}
-        after={{
-          element: <Button size={size} look="link" iconAfter={VisibilityIcon} iconColor="pop" />,
-          inset: true,
-        }}
-      >
-        <Input />
-      </InputField>
-
-      <InputField
-        size={size}
-        label="Button"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        before={<Button>Check</Button>}
-        after={<Button>Check</Button>}
-      >
-        <Input />
-      </InputField>
-
-      <InputField
-        size={size}
-        label="Select"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        before={
-          <Select>
-            <option value="Select">Select</option>
-          </Select>
-        }
-        after={
-          <Select>
-            <option value="Select">Select</option>
-          </Select>
-        }
-      >
-        <Input />
-      </InputField>
-    </div>
-  ))}
-</Fragment>
-```
-
-#### Invalid with error message/s
-
-```jsx
-<Fragment>
-  <InputField
-    label="Text after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    errorMessage="If there is an error it can go here"
-    after={<Button>Check</Button>}
-  >
-    <Input invalid />
-  </InputField>
-  <InputField
-    label="Text after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    errorMessage={['If there is an error it can go here', 'If there is another error it can go here']}
-    after={<Button>Check</Button>}
-    before={<Button>Check</Button>}
-  >
-    <Input invalid />
-  </InputField>
-  <InputField
-    label="Text after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    errorMessage="If there is an error it can go here"
-    after={{ icon: SearchIcon }}
-    before={{ icon: SearchIcon }}
-  >
-    <Input invalid />
-  </InputField>
-  <InputField
-    label="Text after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    errorMessage="If there is an error it can go here"
-    after="Text"
-    before="Text"
-  >
-    <Input invalid />
-  </InputField>
-  <InputField
-    label="Text after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    errorMessage="If there is an error it can go here"
-    after={
-      <Select invalid>
-        <option>Select</option>
-      </Select>
-    }
-    before={
-      <Select invalid>
-        <option>Select</option>
-      </Select>
-    }
-  >
-    <Input invalid />
-  </InputField>
-</Fragment>
-```
-
-#### Input field with disabled state
-
-```jsx
-<Fragment>
-  <InputField
-    label="Text after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={{ icon: SearchIcon }}
-    before={{ icon: SearchIcon }}
-  >
-    <Input disabled />
-  </InputField>
-  <InputField label="Text after" hint="I am a hint" supportingText="I am supporting text" before="$AUD" after="Text">
-    <Input disabled />
-  </InputField>
-</Fragment>
-```
-
-#### Input field with read-only state
-
-```jsx
-<Fragment>
-  <InputField
-    label="Text after"
-    hint="I am a hint"
-    supportingText="I am supporting text"
-    after={{ icon: SearchIcon }}
-    before={{ icon: SearchIcon }}
-  >
-    <Input readOnly />
-  </InputField>
-  <InputField label="Text after" hint="I am a hint" supportingText="I am supporting text" before="$AUD" after="Text">
-    <Input readOnly />
-  </InputField>
-</Fragment>
-```
-
-#### Number of dependents
-
-```jsx
-() => {
-  const [numberOfDependents, setNumberOfDependents] = useState(0);
-  const minusButton = useCallback(() => setNumberOfDependents(state => --state), []);
-  const plusButton = useCallback(() => setNumberOfDependents(state => ++state), []);
-
-  return (
-    <InputField
-      label="Number of dependents"
-      before={<Button onClick={minusButton}>-</Button>}
-      after={<Button onClick={plusButton}>+</Button>}
-    >
-      <Input value={numberOfDependents} />
-    </InputField>
-  );
-};
-```
-
-#### Masked characters in field
-
-```tsx
-() => {
-  const [typeInput, setTypeInput] = useState<'password'|'text'>('password');
-  const toggleType = useCallback(() => setTypeInput(state => (state === 'password' ? 'text' : 'password')), []);
-
-  return (
-    <InputField
-      label="Password"
-      after={{
-        inset: true,
-        element: (
-          <Button
-            onClick={toggleType}
-            look="link"
-            iconAfter={typeInput === 'password' ? VisibilityIcon : VisibilityOffIcon}
-            iconColor="muted"
-          />
-        ),
-      }}
-    >
-      <Input type={typeInput} />
-    </InputField>
-  );
-};
-```
-
-#### Search with left icon and clear button
-
-```tsx
-() => {
-  const [inputValue, setInputValue] = useState<string>('');
-  const clearInput = useCallback(() => setInputValue(''), []);
-
-  return (
-    <InputField
-      label="Search"
-      before={{
-        icon: SearchIcon,
-      }}
-      after={{
-        inset: true,
-        element: <Button onClick={clearInput} look="link" iconAfter={CloseIcon} iconColor="muted" />,
-      }}
-    >
-      <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-    </InputField>
-  );
-};
-```
-
-#### Inline field validation flow
-
-```tsx
-() => {
-    const [inputValue, setInputValue] = useState<string>('');
-    const [validating, setValidating] = useState<boolean>(false);
-    const [error, setError] = useState<string>();
-    const validate = useCallback(() => {
-      setValidating(true);
-      setError(undefined);
-      setTimeout(() => {
-        if (inputValue !== '647453') {
-          setError('Routing number not found');
-        }
-        setValidating(false);
-      }, 1500);
-    }, [inputValue]);
-
-    return (
-      <InputField
-        label="Enter ABA routing number"
-        hint="For a valid response use: 647453, all other numbers will show the invalid response"
-        after={validating ? { icon: RefreshIcon } : <Button onClick={validate}>Check</Button>}
-        errorMessage={error}
-      >
-        <Input invalid={!!error} onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-      </InputField>
-    );
-  }
-```
-
-#### Search Currency and frequency
-
-```tsx
-() => {
-  const [inputValue, setInputValue] = useState<string>('');
-
-  return (
-    <InputField
-      label="Salary"
-      before="$AUD"
-      after={
-        <Select>
-          <option>Select</option>
-          <option>Per Year</option>
-          <option>Per Month</option>
-          <option>Per Week</option>
-        </Select>
-      }
-    >
-      <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-    </InputField>
-  );
-};
-```
-
-#### Search Textarea with character count
-
-```jsx
-() => {
-  const MAX_LENGTH = 250;
-  const [inputValue, setInputValue] = useState<string>('');
-  const counterText = useMemo(() => {
-    const lengthLeft = MAX_LENGTH - inputValue.length;
-    return `${lengthLeft} remaining`;
-  }, [inputValue]);
-
-  return (
-    <InputField label="Comments" hint="I am a hint" supportingText={counterText}>
-      <Textarea onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
-    </InputField>
-  );
-};
-```
diff --git a/apps/docs/content/components/input.yaml b/apps/docs/content/components/input.yaml
deleted file mode 100644
index 8acc0d079..000000000
--- a/apps/docs/content/components/input.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Input
diff --git a/apps/docs/content/components/input/code.mdoc b/apps/docs/content/components/input/code.mdoc
deleted file mode 100644
index 78aff846a..000000000
--- a/apps/docs/content/components/input/code.mdoc
+++ /dev/null
@@ -1,38 +0,0 @@
-## Input sizes
-
-```tsx
-() => {
-  const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
-  return (
-    <div className="flex items-end gap-4">
-      {SIZES.map(size => (
-        <div key={size}>
-          <h3 className="typography-body-8">{size}</h3>
-          <Input size={size} />
-        </div>
-      ))}
-    </div>
-  )
-}
-```
-
----
-
-## Different status
-
-```jsx
-<div className="flex items-end gap-4">
-  <div>
-    <h3 className="typography-body-8">Disabled</h3>
-    <Input disabled />
-  </div>
-  <div>
-    <h3 className="typography-body-8">Read only</h3>
-    <Input readOnly />
-  </div>
-  <div>
-    <h3 className="typography-body-8">Invalid</h3>
-    <Input invalid />
-  </div>
-</div>
-```
diff --git a/apps/docs/content/components/link.yaml b/apps/docs/content/components/link.yaml
deleted file mode 100644
index 7b23a5875..000000000
--- a/apps/docs/content/components/link.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Link
\ No newline at end of file
diff --git a/apps/docs/content/components/link/code.mdoc b/apps/docs/content/components/link/code.mdoc
deleted file mode 100644
index 8f61af4d4..000000000
--- a/apps/docs/content/components/link/code.mdoc
+++ /dev/null
@@ -1,56 +0,0 @@
-## Standalone Link
-
-```jsx
-<div className="flex flex-col pl-1 space-y-1">
-    <Link href="#">Look I'm a standalone link</Link>
-    <Link href="#" iconBefore={PdfFileIcon}>Look I'm a standalone link</Link>
-    <Link href="#" iconAfter={ArrowRightIcon}>Look I'm a standalone link</Link>
-  </div>
-```
-
-## Inline Link
-
-```jsx
-<div className="pl-1 space-y-1">
-    <p className="typography-body-10">
-        Lorem ipsum dolor{' '}
-        <Link href="#" type="inline">
-          look, I'm an inline link
-        </Link>{' '}
-        sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-        doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-      </p>
-      <p className="typography-body-10">
-        Lorem ipsum dolor{' '}
-        <Link href="#" type="inline" underline={false}>
-          look, I'm an inline link with no underline
-        </Link>{' '}
-        sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-        doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-      </p>
-      <p className="typography-body-10">
-        Lorem ipsum dolor{' '}
-        <Link href="#" type="inline" iconBefore={PdfFileIcon}>
-          look, I'm an inline link
-        </Link>{' '}
-        sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-        doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-      </p>
-      <p className="typography-body-10">
-        Lorem ipsum dolor{' '}
-        <Link href="#" type="inline" iconAfter={ArrowRightIcon}>
-          look, I'm an inline link
-        </Link>{' '}
-        sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-        doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-      </p>
-  </div>
-```
-
-## Using Next Link
-
-```jsx
-<NextLink href="#test" passHref legacyBehavior>
-  <Link>I'm using the Next Link</Link>
-</NextLink>
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/list.yaml b/apps/docs/content/components/list.yaml
deleted file mode 100644
index a2c416544..000000000
--- a/apps/docs/content/components/list.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: List
\ No newline at end of file
diff --git a/apps/docs/content/components/list/code.mdoc b/apps/docs/content/components/list/code.mdoc
deleted file mode 100644
index dcda7804b..000000000
--- a/apps/docs/content/components/list/code.mdoc
+++ /dev/null
@@ -1,92 +0,0 @@
-## Default List 
-
-```jsx
-<div>
-  <h1 className="typography-body-10 mb-2">Default list</h1>
-  <List type="bullet">
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-    <List>
-      <List.Item>Styled bullet list</List.Item>
-      <List.Item>Styled bullet list</List.Item>
-      <List.Item>Styled bullet list</List.Item>
-      <List>
-        <List.Item>Styled bullet list</List.Item>
-        <List.Item>Styled bullet list</List.Item>
-        <List.Item>Styled bullet list</List.Item>
-      </List>
-      <List.Item>Styled bullet list</List.Item>
-    </List>
-    <List.Item>Styled bullet list</List.Item>
-  </List>
-  <h1 className="typography-body-10 mb-2">Look</h1>
-  <List type="bullet" look="primary" className="mb-4">
-    <List.Item>Styled bullet list - primary</List.Item>
-    <List.Item>Styled bullet list - primary</List.Item>
-  </List>
-  <List type="bullet" look="hero" className="mb-4">
-    <List.Item>Styled bullet list - hero</List.Item>
-    <List.Item>Styled bullet list - hero</List.Item>
-  </List>
-  <List type="bullet" look="neutral" className="mb-4">
-    <List.Item>Styled bullet list - neutral</List.Item>
-    <List.Item>Styled bullet list - neutral</List.Item>
-  </List>
-</div>
-```
-
-## List Looks 
-
-```jsx 
-() => { 
-    const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'];
-    return (
-            TYPES.map((type) => (
-            <div key={type}>
-                <h1 className="typography-body-10 mb-2">{type}</h1>
-                <List type={type} className="mb-4" icon={type === 'icon' ? PdfFileIcon : undefined}>
-                    <List.Item>Styled {type} list</List.Item>
-                    <List.Item>Styled {type} list</List.Item>
-                    <List.Item>Styled {type} list</List.Item>
-                </List>
-            </div>
-            ))
-    ); 
-}; 
-```
-## List spacing
-
-```jsx
-<div>
-  <h1 className="typography-body-10 mb-2">Medium</h1>
-  <List type="bullet" className="mb-4" spacing="medium">
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-  </List>
-  <h1 className="typography-body-10 mb-2">Large</h1>
-  <List type="bullet" className="mb-4" spacing="large">
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-    <List.Item>Styled bullet list</List.Item>
-  </List>
-</div>
-```
-
-## Using Next Link
-
-```jsx
-<div>
-  <List type="link" className="mb-4">
-    <NextLink href="#test1" passHref legacyBehavior>
-      <List.Item>Styled bullet list</List.Item>
-    </NextLink>
-    <NextLink href="#test2" passHref legacyBehavior>
-      <List.Item>Styled bullet list</List.Item>
-    </NextLink>
-    <NextLink href="#test3" passHref legacyBehavior>
-      <List.Item>Styled bullet list</List.Item>
-    </NextLink>
-  </List>
-</div>
\ No newline at end of file
diff --git a/apps/docs/content/components/modal.yaml b/apps/docs/content/components/modal.yaml
deleted file mode 100644
index 8e9e9ecbb..000000000
--- a/apps/docs/content/components/modal.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Modal
diff --git a/apps/docs/content/components/modal/code.mdoc b/apps/docs/content/components/modal/code.mdoc
deleted file mode 100644
index 3f3f20ca3..000000000
--- a/apps/docs/content/components/modal/code.mdoc
+++ /dev/null
@@ -1,102 +0,0 @@
-## Modal
-
-### Modal Default
-
-```jsx
-() => {
-  const state = useOverlayTriggerState({});
-  return (
-    <>
-      <Modal isDismissable state={state} aria-label="Modal title" body>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet at voluptatibus ipsam? Placeat quaerat iste
-        assumenda voluptatum molestiae delectus atque reiciendis incidunt. Dolorem corrupti porro cumque beatae corporis
-        sequi et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet at voluptatibus ipsam? Placeat
-        quaerat iste assumenda voluptatum molestiae delectus atque reiciendis incidunt. Dolorem corrupti porro cumque
-        beatae corporis sequi et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet at voluptatibus
-        ipsam? Placeat quaerat iste assumenda voluptatum molestiae delectus atque reiciendis incidunt. Dolorem corrupti
-        porro cumque beatae corporis sequi et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet at
-        voluptatibus ipsam? Placeat quaerat iste assumenda voluptatum molestiae delectus atque reiciendis incidunt.
-        Dolorem corrupti porro cumque beatae corporis sequi et.
-      </Modal>
-      <Button onClick={state.open}>Open Modal</Button>
-    </>
-  );
-};
-```
-
-### Modal with Footer
-
-```jsx
-() => {
-  const state = useOverlayTriggerState({});
-
-  return (
-    <Fragment>
-      <Modal state={state} title="Title" isDismissable={true}>
-        <Modal.Body>I'm children</Modal.Body>
-        <Modal.Footer>
-          <p>Lorem, ipsum dolor</p>
-        </Modal.Footer>
-      </Modal>
-      <Button onClick={state.open}>Open Modal</Button>
-    </Fragment>
-  );
-};
-```
-
-### All sizes Modal
-
-```jsx
-() => {
-  const stateSM = useOverlayTriggerState({});
-  const stateMD = useOverlayTriggerState({});
-  const stateLG = useOverlayTriggerState({});
-
-  const states = useMemo(() => {
-    return {
-      sm: stateSM,
-      md: stateMD,
-      lg: stateLG,
-    };
-  }, [stateSM, stateMD, stateLG]);
-
-  return (
-    <div className="flex gap-2">
-      {['sm', 'md', 'lg'].map((size: string) => (
-        <Fragment key={size}>
-          <Modal isDismissable size={size} state={states[size as 'sm' | 'md' | 'lg']} title={`Modal ${size}`}>
-            <Modal.Body>I'm child</Modal.Body>
-            <Modal.Footer>
-              <p>Lorem, ipsum dolor</p>
-            </Modal.Footer>
-          </Modal>
-          <Button onClick={states[size as 'sm' | 'md' | 'lg'].open}>Open Modal {size}</Button>
-        </Fragment>
-      ))}
-    </div>
-  );
-};
-```
-
-### Not dismissable example
-
-```jsx
-() => {
-  const state = useOverlayTriggerState({});
-
-  return (
-    <Fragment>
-      <Modal isKeyboardDismissDisabled state={state} title="Modal title">
-        <Modal.Body>I'm children</Modal.Body>
-        <Modal.Footer className="flex justify-end gap-2">
-          <Button look="faint" onClick={state.close}>
-            Close
-          </Button>
-          <Button look="primary">Submit</Button>
-        </Modal.Footer>
-      </Modal>
-      <Button onClick={state.open}>Open Modal</Button>
-    </Fragment>
-  );
-};
-```
diff --git a/apps/docs/content/components/pagination.yaml b/apps/docs/content/components/pagination.yaml
deleted file mode 100644
index f49d582cb..000000000
--- a/apps/docs/content/components/pagination.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Pagination
diff --git a/apps/docs/content/components/pagination/code.mdoc b/apps/docs/content/components/pagination/code.mdoc
deleted file mode 100644
index 56af7e608..000000000
--- a/apps/docs/content/components/pagination/code.mdoc
+++ /dev/null
@@ -1,70 +0,0 @@
-## Using link pagination
-
-```tsx
-<div className="flex">
-  <Pagination
-    current={1}
-    pages={[
-      { text: '1', href: '#page-1' },
-      { text: '2', href: '#page-2' },
-      { text: '3', href: '#page-3' },
-    ]}
-  />
-</div>
-```
-
-## Using state as pagination
-
-```tsx
-() => {
-  const [page, setPage] = useState(1);
-
-  return (
-    <div className="flex">
-      <Pagination
-        current={page}
-        onChange={changedPage => {
-          setPage(changedPage);
-        }}
-        pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
-      />
-    </div>
-  );
-};
-```
-
-## Using usePagination hook
-
-```tsx
-() => {
-  const { next, previous, selectedPage } = usePagination({
-    pages: [{ text: 'Page 1' }, { text: 'Page 2' }, { text: 'Page 3' }],
-    infinite: true,
-  });
-
-  return (
-    <div className="flex items-center">
-      <Button look="link" iconAfter={ArrowLeftIcon} onClick={previous} />
-      <h4>{selectedPage.text}</h4>
-      <Button look="link" iconAfter={ArrowRightIcon} onClick={next} />
-    </div>
-  );
-};
-```
-
-## Using Next Link
-
-```tsx
-<div className="flex">
-  <Pagination
-    linkComponent={NextLink}
-    current={2}
-    type="link"
-    pages={[
-      { text: '1', href: '#page1' },
-      { text: '2', href: '#page2' },
-      { text: '3', href: '#page3' },
-    ]}
-  />
-</div>
-```
diff --git a/apps/docs/content/components/panel.yaml b/apps/docs/content/components/panel.yaml
deleted file mode 100644
index 7fdbf0ac4..000000000
--- a/apps/docs/content/components/panel.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Panel
\ No newline at end of file
diff --git a/apps/docs/content/components/panel/code.mdoc b/apps/docs/content/components/panel/code.mdoc
deleted file mode 100644
index e50cd179b..000000000
--- a/apps/docs/content/components/panel/code.mdoc
+++ /dev/null
@@ -1,31 +0,0 @@
-## Panel Looks 
-```jsx 
-<div>
-  <Panel heading="Default panel">
-    <Panel.Body>
-      They found themselves standing on the very edge of the Wild Wood. Rocks and brambles and tree-roots behind them,
-      confusedly heaped and tangled; in front, a great space of quiet fields, hemmed by lines of hedges black on the
-      snow, and, far ahead, a glint of the familiar old river, while the wintry sun hung red and low on the horizon. The
-      Otter, as knowing all the paths, took charge of the party, and they trailed out on a bee-line for a distant stile.
-      Pausing there a moment and looking back, they saw the whole mass of the Wild Wood, dense, menacing, compact,
-      grimly set in vast white surroundings; simultaneously they turned and made swiftly for home, for firelight and the
-      familiar things it played on, for the voice, sounding cheerily outside their window, of the river that they knew
-      and trusted in all its moods, that never made them afraid with any amazement.
-    </Panel.Body>
-    <Panel.Footer>Panel footer</Panel.Footer> 
-  </Panel>
-  <Panel heading="Faint panel" look="faint">
-    <Panel.Body>
-      They found themselves standing on the very edge of the Wild Wood. Rocks and brambles and tree-roots behind them,
-      confusedly heaped and tangled; in front, a great space of quiet fields, hemmed by lines of hedges black on the
-      snow, and, far ahead, a glint of the familiar old river, while the wintry sun hung red and low on the horizon. The
-      Otter, as knowing all the paths, took charge of the party, and they trailed out on a bee-line for a distant stile.
-      Pausing there a moment and looking back, they saw the whole mass of the Wild Wood, dense, menacing, compact,
-      grimly set in vast white surroundings; simultaneously they turned and made swiftly for home, for firelight and the
-      familiar things it played on, for the voice, sounding cheerily outside their window, of the river that they knew
-      and trusted in all its moods, that never made them afraid with any amazement.
-    </Panel.Body>
-    <Panel.Footer>Panel footer</Panel.Footer> 
-  </Panel>
-</div>
-```
diff --git a/apps/docs/content/components/popover.yaml b/apps/docs/content/components/popover.yaml
deleted file mode 100644
index 65dc68505..000000000
--- a/apps/docs/content/components/popover.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Popover
\ No newline at end of file
diff --git a/apps/docs/content/components/popover/code.mdoc b/apps/docs/content/components/popover/code.mdoc
deleted file mode 100644
index 8b31212e1..000000000
--- a/apps/docs/content/components/popover/code.mdoc
+++ /dev/null
@@ -1,30 +0,0 @@
-## Default Popovers
-
-```jsx
-() => {
-    const content = "Sudden and magnificent, the sun's broad golden disc showed itself over the horizon facing them; and the first rays, shooting across the level water-meadows, took the animals full in the eyes and dazzled them. When they were able to look once more, the Vision had vanished, and the air was full of the carol of birds that hailed the dawn.";
-    return (
-    <div style={{ paddingTop: '300px', paddingLeft: '70px'}}>
-        <Popover className="mr-3" heading="Sudden and magnificent" content={content}>
-            With heading
-        </Popover>
-        <Popover content={content}>
-            No heading
-        </Popover>
-    </div>
-    )
-}
-```
-
-## Icon popover trigger
-
-```jsx
-() => {
-    const content = "Sudden and magnificent, the sun's broad golden disc showed itself over the horizon facing them; and the first rays, shooting across the level water-meadows, took the animals full in the eyes and dazzled them. When they were able to look once more, the Vision had vanished, and the air was full of the carol of birds that hailed the dawn.";
-    return (
-    <div style={{ paddingTop: '300px', paddingLeft: '100px' }}>
-        <Popover className="mr-3" heading="Sudden and magnificent" content={content} icon={() => <HelpIcon color="hero" />} />
-    </div>
-    )
-}
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/progress-bar.yaml b/apps/docs/content/components/progress-bar.yaml
deleted file mode 100644
index c0c2bb84c..000000000
--- a/apps/docs/content/components/progress-bar.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Progress Bar
\ No newline at end of file
diff --git a/apps/docs/content/components/progress-bar/code.mdoc b/apps/docs/content/components/progress-bar/code.mdoc
deleted file mode 100644
index 402196696..000000000
--- a/apps/docs/content/components/progress-bar/code.mdoc
+++ /dev/null
@@ -1,39 +0,0 @@
-## Progress Bar
-
-```jsx
-() => {
-    const [barValue, setBarValue] = useState(0);
-    const handleProgress = useCallback(
-      (calc: number) => {
-        const progress = barValue + calc;
-        if (progress > 100) return setBarValue(100);
-        if (progress < 0) return setBarValue(0);
-        return setBarValue(progress);
-      },
-      [barValue],
-    );
-    return (
-      <>
-        <h2 className="typography-body-9 mb-1 font-bold">Default</h2>
-        <ProgressBar value={barValue} className="mb-2" />
-        <h2 className="typography-body-9 mb-1 font-bold">Skinny</h2>
-        <ProgressBar look="skinny" value={barValue} className="mb-2" />
-        <p className="mb-2">Use the +/- buttons below to demonstrate how the progress bar moves.</p>
-        <div className="flex space-x-2">
-          <Button soft onClick={() => handleProgress(-1)}>
-            -1%
-          </Button>
-          <Button soft onClick={() => handleProgress(-10)}>
-            -10%
-          </Button>
-          <Button soft onClick={() => handleProgress(+1)}>
-            +1%
-          </Button>
-          <Button soft onClick={() => handleProgress(+10)}>
-            +10%
-          </Button>
-        </div>
-      </>
-    );
-};
-```
diff --git a/apps/docs/content/components/progress-rope.yaml b/apps/docs/content/components/progress-rope.yaml
deleted file mode 100644
index 169202cf3..000000000
--- a/apps/docs/content/components/progress-rope.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Progress Rope
diff --git a/apps/docs/content/components/progress-rope/code.mdoc b/apps/docs/content/components/progress-rope/code.mdoc
deleted file mode 100644
index a5db4b513..000000000
--- a/apps/docs/content/components/progress-rope/code.mdoc
+++ /dev/null
@@ -1,89 +0,0 @@
-## Progress Rope
-
-### Default usage
-
-```tsx
-() => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const handleClick = useCallback(
-    (index: number) => () => {
-      setActiveIndex(index);
-    },
-    [],
-  );
-  const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
-    { text: <h3>Step 1</h3>, onClick: handleClick(0) },
-    { text: <h3>Step 2</h3>, onClick: handleClick(1) },
-    { text: <h3>Step 3</h3>, onClick: handleClick(2) },
-    { text: <h3>Step 4</h3>, onClick: handleClick(3) },
-    { text: <h3>Step 5</h3>, onClick: handleClick(4) },
-    { text: <h3>Review and Submit</h3>, onClick: handleClick(5) },
-  ];
-
-  return (
-    <div>
-      <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
-      <div>
-        <h3>Helper Controls</h3>
-        <h4>Current: {activeIndex}</h4>
-        <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
-        <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
-      </div>
-    </div>
-  );
-};
-```
-
-### Grouping example
-
-```tsx
-() => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const handleClick = useCallback(
-    (index: number) => () => {
-      setActiveIndex(index);
-    },
-    [],
-  );
-  const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
-    {
-      type: 'group',
-      text: 'Group 1',
-      steps: [
-        { text: 'Step 1', onClick: handleClick(0) },
-        { text: 'Step 2', onClick: handleClick(1) },
-      ],
-    },
-    {
-      type: 'group',
-      text: 'Group 2',
-      steps: [
-        { text: 'Step 3', onClick: handleClick(2) },
-        { text: 'Step 4', onClick: handleClick(3) },
-      ],
-    },
-    {
-      type: 'group',
-      text: 'Group 3',
-      steps: [
-        { text: 'Step 5', onClick: handleClick(4) },
-        { text: 'Step 6', onClick: handleClick(5) },
-        { text: 'Step 7', onClick: handleClick(6) },
-      ],
-    },
-    { text: 'Review and Submit', onClick: handleClick(7) },
-  ];
-
-  return (
-    <div>
-      <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
-      <div>
-        <h3>Helper Controls</h3>
-        <h4>Current: {activeIndex}</h4>
-        <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
-        <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
-      </div>
-    </div>
-  );
-};
-```
diff --git a/apps/docs/content/components/radio-group.yaml b/apps/docs/content/components/radio-group.yaml
deleted file mode 100644
index 4311c1c90..000000000
--- a/apps/docs/content/components/radio-group.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Radio Group
\ No newline at end of file
diff --git a/apps/docs/content/components/radio-group/code.mdoc b/apps/docs/content/components/radio-group/code.mdoc
deleted file mode 100644
index 825f33e9c..000000000
--- a/apps/docs/content/components/radio-group/code.mdoc
+++ /dev/null
@@ -1,104 +0,0 @@
-This component does not contain an option for `checkbox` as it was decided it should be two separate components
-
-## RadioGroup sizes
-
-```jsx
-<div className="flex gap-3">
-    <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-    <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-</div>
-```
-
-## Horizontal layout
-
-```jsx
-<div>
-    <RadioGroup label={<p className="font-bold mb-1">Medium</p>} orientation="horizontal">
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-     
-    <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large" orientation="horizontal">
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-</div>
-```
-
-## Radios with hint text
-
-```jsx
-<div className="flex gap-3">
-    <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-        <RadioGroup.Radio value="Option 1" hint="This is hint text">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2" hint="This is hint text">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3" hint="This is hint text">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-    <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-        <RadioGroup.Radio value="Option 1" hint="This is hint text">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2" hint="This is hint text">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3" hint="This is hint text">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-</div>
-```
-
-## RadioGroup with Reveal
-
-```jsx
-<div className="flex gap-3">
-    <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" showAmount={1}>
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-    <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large" showAmount={1}>
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-</div>
-```
-
-## RadioGroup completely disabled
-
-```jsx
-<div className="flex gap-3">
-    <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" isDisabled>
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-    <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large" isDisabled>
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-</div>
-```
-
-## RadioGroup with individual options disabled
-
-```jsx
-<div className="flex gap-3">
-    <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-        <RadioGroup.Radio value="Option 1" isDisabled>Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-    <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-        <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 2" isDisabled>Option 2</RadioGroup.Radio>
-        <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>
-    </RadioGroup>
-</div>
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/repeater.yaml b/apps/docs/content/components/repeater.yaml
deleted file mode 100644
index 417e9eca5..000000000
--- a/apps/docs/content/components/repeater.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Repeater
\ No newline at end of file
diff --git a/apps/docs/content/components/repeater/code.mdoc b/apps/docs/content/components/repeater/code.mdoc
deleted file mode 100644
index d2d3b5e9b..000000000
--- a/apps/docs/content/components/repeater/code.mdoc
+++ /dev/null
@@ -1,7 +0,0 @@
-## Default usage
-
-```jsx
-<Repeater>
-    <p className="mb-5">Repeater</p>
-</Repeater>
-```
\ No newline at end of file
diff --git a/apps/docs/content/components/select.yaml b/apps/docs/content/components/select.yaml
deleted file mode 100644
index b07d74d1c..000000000
--- a/apps/docs/content/components/select.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Select
diff --git a/apps/docs/content/components/select/code.mdoc b/apps/docs/content/components/select/code.mdoc
deleted file mode 100644
index 451d29654..000000000
--- a/apps/docs/content/components/select/code.mdoc
+++ /dev/null
@@ -1,58 +0,0 @@
-## Select sizes
-
-```tsx
-() => {
-  const DEFAULT_OPTIONS = ['small', 'medium', 'large', 'xlarge'] as const;
-  const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
-  return (
-    <div className="flex items-end gap-4">
-      {SIZES.map(size => (
-        <div key={size}>
-          <h3 className="typography-body-8">{size}</h3>
-          <Select size={size}>
-            {DEFAULT_OPTIONS.map(option => (
-              <option value={option} key={option}>
-                {option}
-              </option>
-            ))}
-          </Select>
-        </div>
-      ))}
-    </div>
-  )
-}
-```
-
----
-
-## Different status
-
-```jsx
-() => {
-  const DEFAULT_OPTIONS = ['small', 'medium', 'large', 'xlarge'];
-  return (
-    <div className="flex items-end gap-4">
-      <div>
-        <h3 className="typography-body-8">Disabled</h3>
-        <Select disabled>
-          {DEFAULT_OPTIONS.map(option => (
-            <option value={option} key={option}>
-              {option}
-            </option>
-          ))}
-        </Select>
-      </div>
-      <div>
-        <h3 className="typography-body-8">Invalid</h3>
-        <Select invalid>
-          {DEFAULT_OPTIONS.map(option => (
-            <option value={option} key={option}>
-              {option}
-            </option>
-          ))}
-        </Select>
-      </div>
-    </div>
-  );
-};
-```
diff --git a/apps/docs/content/components/selector.yaml b/apps/docs/content/components/selector.yaml
deleted file mode 100644
index 409a3ef91..000000000
--- a/apps/docs/content/components/selector.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Selector
diff --git a/apps/docs/content/components/selector/code.mdoc b/apps/docs/content/components/selector/code.mdoc
deleted file mode 100644
index d5be95283..000000000
--- a/apps/docs/content/components/selector/code.mdoc
+++ /dev/null
@@ -1,596 +0,0 @@
-
-## Default usage example
-```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        { key: 'A', disabled: false },
-        { key: 'B', disabled: false },
-        { key: 'C', disabled: false },
-        { key: 'D', disabled: true },
-      ].map(({ key, disabled }) => (
-        <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>Something {key}</Selector.Label>
-        </Selector.Checkbox>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## Radio usage example
-```tsx
-() => {
-  return (
-    <Selector type="radio">
-      {[
-        { key: 'A', disabled: false },
-        { key: 'B', disabled: false },
-        { key: 'C', disabled: false },
-        { key: 'D', disabled: true },
-      ].map(({ key, disabled }) => (
-        <Selector.Radio key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>Something {key}</Selector.Label>
-        </Selector.Radio>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## Radio usage example
-```tsx
-() => {
-  return (
-    <Selector type="radio">
-      {[
-        { key: 'A', disabled: false },
-        { key: 'B', disabled: false },
-        { key: 'C', disabled: false },
-        { key: 'D', disabled: true },
-      ].map(({ key, disabled }) => (
-        <Selector.Radio key={key} body value={key} isDisabled={disabled} checkIcon="arrow">
-          <Selector.Label>Something {key}</Selector.Label>
-        </Selector.Radio>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## Radio with state usage example
-```tsx
-() => {
-  const [selectedOption, setSelectedOption] = useState<string>();
-  return (
-    <>
-      {selectedOption}
-      <Selector
-        type="radio"
-        value={selectedOption}
-        onChange={value => {
-          setSelectedOption(value);
-        }}
-      >
-        {[
-          { key: 'A', disabled: false },
-          { key: 'B', disabled: false },
-          { key: 'C', disabled: false },
-          { key: 'D', disabled: true },
-        ].map(({ key, disabled }) => (
-          <Selector.Radio key={key} body value={key} isDisabled={disabled}>
-            <Selector.Label>Something {key}</Selector.Label>
-          </Selector.Radio>
-        ))}
-      </Selector>
-    </>
-  );
-};
-```
-
-## Check options with state usage example
-```tsx
-() => {
-  const [selectedOptions, setSelectedOptions] = useState<string[]>();
-  return (
-    <>
-      {selectedOptions?.join(',')}
-      <Selector
-        type="checkbox"
-        value={selectedOptions}
-        onChange={value => {
-          setSelectedOptions(value);
-        }}
-      >
-        {[
-          { key: 'A', disabled: false },
-          { key: 'B', disabled: false },
-          { key: 'C', disabled: false },
-          { key: 'D', disabled: true },
-        ].map(({ key, disabled }) => (
-          <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
-            <Selector.Label>Something {key}</Selector.Label>
-          </Selector.Checkbox>
-        ))}
-      </Selector>
-    </>
-  );
-};
-```
-
-## Default usage example
-```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        { key: 'A', disabled: false },
-        { key: 'B', disabled: false },
-        { key: 'C', disabled: false },
-        { key: 'D', disabled: true },
-      ].map(({ key, disabled }) => (
-        <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores architecto eum aperiam consectetur
-            quibusdam. Laboriosam saepe, explicabo odio quis doloribus consequuntur quae et necessitatibus quasi
-            similique. Debitis non quo recusandae. {key}
-          </Selector.Label>
-        </Selector.Checkbox>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## With hint text usage example
-```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        {
-          label: 'Here is a label A',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: false,
-        },
-        {
-          label: 'Here is a label B',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: false,
-        },
-        { label: 'Here is a label C', hint: '', key: 'C', disabled: false },
-      ].map(({ key, disabled, hint, label }) => (
-        <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Checkbox>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## With pictogram usage example
-```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PizzaPictogram className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label A',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <ChatPictogram className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label B',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <BusPictogram className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label C',
-          hint: '',
-          key: 'C',
-          disabled: false,
-        },
-      ].map(({ key, disabled, hint, label, before }) => (
-        <Selector.Checkbox before={before} key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Checkbox>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## With pictogram with different sizes usage example
-```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PizzaPictogram className="h-15 w-15" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label A',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <ChatPictogram className="h-10 w-10" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label B',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <BusPictogram className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label C',
-          hint: '',
-          key: 'C',
-          disabled: false,
-        },
-      ].map(({ key, disabled, hint, label, before }) => (
-        <Selector.Checkbox before={before} key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Checkbox>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## With icon and different size
-```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-15 w-15" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label A',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-10 w-10" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label B',
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label C',
-          hint: '',
-          key: 'C',
-          disabled: false,
-        },
-      ].map(({ key, disabled, hint, label, before }) => (
-        <Selector.Checkbox before={before} key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Checkbox>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## With icon and secondary label
-```tsx
-() => {
-  return (
-    <Selector type="checkbox">
-      {[
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label A',
-          after: <Selector.Label>$200,000.00</Selector.Label>,
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label B',
-          after: <Selector.Label>$200,000.00</Selector.Label>,
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label C',
-          after: (
-            <Selector.Adornment align="center">
-              <span>$200,000.00</span>
-            </Selector.Adornment>
-          ),
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 7643123
-            </>
-          ),
-          key: 'C',
-          disabled: false,
-        },
-      ].map(({ key, disabled, hint, label, before, after }) => (
-        <Selector.Checkbox before={before} after={after} key={key} body value={key} isDisabled={disabled}>
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Checkbox>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## Radio example with icons and secondary text
-```tsx
-() => {
-  return (
-    <Selector type="radio">
-      {[
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label A',
-          after: <Selector.Label>$200,000.00</Selector.Label>,
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label B',
-          after: <Selector.Label>$200,000.00</Selector.Label>,
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: false,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label C',
-          after: (
-            <Selector.Adornment align="center">
-              <span>$200,000.00</span>
-            </Selector.Adornment>
-          ),
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 7643123
-            </>
-          ),
-          key: 'C',
-          disabled: false,
-        },
-      ].map(({ key, disabled, hint, label, before, after }) => (
-        <Selector.Radio
-          before={before}
-          after={after}
-          key={key}
-          body
-          value={key}
-          checkIcon="arrow"
-          isDisabled={disabled}
-        >
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Radio>
-      ))}
-    </Selector>
-  );
-};
-```
-
-## Disable state style example
-```tsx
-() => {
-  return (
-    <Selector type="radio" value="A">
-      {[
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label A',
-          after: <Selector.Label>$200,000.00</Selector.Label>,
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'A',
-          disabled: true,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label B',
-          after: <Selector.Label>$200,000.00</Selector.Label>,
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 123456
-            </>
-          ),
-          key: 'B',
-          disabled: true,
-        },
-        {
-          before: (
-            <Selector.Adornment align="top">
-              <PersonIcon className="h-5 w-5" />
-            </Selector.Adornment>
-          ),
-          label: 'Here is a label C',
-          after: (
-            <Selector.Adornment align="center">
-              <span>$200,000.00</span>
-            </Selector.Adornment>
-          ),
-          hint: (
-            <>
-              <VisuallyHidden>Bank Account</VisuallyHidden>
-              123-456 7643123
-            </>
-          ),
-          key: 'C',
-          disabled: true,
-        },
-      ].map(({ key, disabled, hint, label, before, after }) => (
-        <Selector.Radio
-          before={before}
-          after={after}
-          key={key}
-          body
-          value={key}
-          checkIcon="arrow"
-          isDisabled={disabled}
-        >
-          <Selector.Label>{label}</Selector.Label>
-          {hint && <Selector.Hint>{hint}</Selector.Hint>}
-        </Selector.Radio>
-      ))}
-    </Selector>
-  );
-};
-```
diff --git a/apps/docs/content/components/switch.yaml b/apps/docs/content/components/switch.yaml
deleted file mode 100644
index 68a0e3c38..000000000
--- a/apps/docs/content/components/switch.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Switch
\ No newline at end of file
diff --git a/apps/docs/content/components/switch/code.mdoc b/apps/docs/content/components/switch/code.mdoc
deleted file mode 100644
index a6db48f86..000000000
--- a/apps/docs/content/components/switch/code.mdoc
+++ /dev/null
@@ -1,39 +0,0 @@
-## Default Switch
-
-```jsx
-<div className="flex flex-col gap-2">
-    <Switch label="I'm a switch" />
-</div>
-```
----
-
-## Switch sizes
-
-```jsx
-<div className="flex flex-col gap-2">
-    <Switch size="small" label="Small 30px" />
-    <Switch label="Medium 36px" />
-    <Switch size="large" label="Large 42px" />
-    <Switch size="xlarge" label="X Large 48px" />
-</div>
-```
----
-
-## Responsive sizing
-
-```jsx
-<div className="flex flex-col gap-2">
-    <Switch block size={{ initial: 'small', lg: 'xlarge', xl: 'small' }} label="Small but Extra large for LG breakpoint" />
-    <Switch block size={{ initial: 'medium', lg: 'small', xl: 'medium' }} label="Small for LG breakpoint only" />
-</div>
-```
----
-
-## Block switch
-
-```jsx
-<div className="flex flex-col gap-2">
-    <Switch block label="I'm a block switch" />
-</div>
-```
----
\ No newline at end of file
diff --git a/apps/docs/content/components/table.yaml b/apps/docs/content/components/table.yaml
deleted file mode 100644
index 555a6a442..000000000
--- a/apps/docs/content/components/table.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Table
\ No newline at end of file
diff --git a/apps/docs/content/components/table/code.mdoc b/apps/docs/content/components/table/code.mdoc
deleted file mode 100644
index 8773bf0ec..000000000
--- a/apps/docs/content/components/table/code.mdoc
+++ /dev/null
@@ -1,209 +0,0 @@
-## Default table with caption and footer 
-
-```jsx
-<div className="p-3">
-  <Table>
-    <Table.Caption> Caption this table width is: <em>(100%)</em> </Table.Caption>
-    <Table.Header>
-      <Table.HeaderRow>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Type</Table.HeaderCell>
-        <Table.HeaderCell>Date Modified</Table.HeaderCell>
-      </Table.HeaderRow>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>Games</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Program Files</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>4/7/2021</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>bootmgr</Table.Cell>
-        <Table.Cell>System file</Table.Cell>
-        <Table.Cell>11/20/2010</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>log.txt</Table.Cell>
-        <Table.Cell>Text Document</Table.Cell>
-        <Table.Cell>1/18/2016</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
-  </Table>
-</div>
-```
-
-## Bordered Table 
-
-```jsx
-<div className="p-3">
-  <Table bordered>
-    <Table.Caption> Caption this table width is: <em>(100%)</em> </Table.Caption>
-    <Table.Header>
-      <Table.HeaderRow>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Type</Table.HeaderCell>
-        <Table.HeaderCell>Date Modified</Table.HeaderCell>
-      </Table.HeaderRow>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>Games</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Program Files</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>4/7/2021</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>bootmgr</Table.Cell>
-        <Table.Cell>System file</Table.Cell>
-        <Table.Cell>11/20/2010</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>log.txt</Table.Cell>
-        <Table.Cell>Text Document</Table.Cell>
-        <Table.Cell>1/18/2016</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
-  </Table>
-</div>
-``` 
-
-## Striped Table 
-
-```jsx
-<div className="p-3">
-  <Table striped>
-    <Table.Caption> Caption this table width is: <em>(100%)</em> </Table.Caption>
-    <Table.Header>
-      <Table.HeaderRow>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Type</Table.HeaderCell>
-        <Table.HeaderCell>Date Modified</Table.HeaderCell>
-      </Table.HeaderRow>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>Games</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Program Files</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>4/7/2021</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>bootmgr</Table.Cell>
-        <Table.Cell>System file</Table.Cell>
-        <Table.Cell>11/20/2010</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>log.txt</Table.Cell>
-        <Table.Cell>Text Document</Table.Cell>
-        <Table.Cell>1/18/2016</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
-  </Table>
-</div>
-``` 
-
-## Bordered & Striped Table 
-
-```jsx
-<div className="p-3">
-  <Table bordered striped>
-    <Table.Caption> Caption this table width is: <em>(100%)</em> </Table.Caption>
-    <Table.Header>
-      <Table.HeaderRow>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Type</Table.HeaderCell>
-        <Table.HeaderCell>Date Modified</Table.HeaderCell>
-      </Table.HeaderRow>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>Games</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Program Files</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>4/7/2021</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>bootmgr</Table.Cell>
-        <Table.Cell>System file</Table.Cell>
-        <Table.Cell>11/20/2010</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>log.txt</Table.Cell>
-        <Table.Cell>Text Document</Table.Cell>
-        <Table.Cell>1/18/2016</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
-  </Table>
-</div>
-``` 
-
-## Highlighted Table 
-
-```jsx
-<div className="p-3">
-  <Table>
-    <Table.Caption> Caption this table width is: <em>(100%)</em> </Table.Caption>
-    <Table.Header>
-      <Table.HeaderRow>
-        <Table.HeaderCell>Name</Table.HeaderCell>
-        <Table.HeaderCell>Type</Table.HeaderCell>
-        <Table.HeaderCell>Date Modified</Table.HeaderCell>
-        <Table.HeaderCell>Extra Column 1</Table.HeaderCell>
-        <Table.HeaderCell>Extra Column 2</Table.HeaderCell>
-      </Table.HeaderRow>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row highlighted>
-        <Table.Cell>Games</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-      <Table.Row highlighted={[0, 2]}>
-        <Table.Cell>Program Files</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>4/7/2021</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell highlightStart highlighted> bootmgr </Table.Cell>
-        <Table.Cell highlighted> System file </Table.Cell>
-        <Table.Cell>11/20/2010</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-      <Table.Row highlighted={[0, [2, 4]]}>
-        <Table.Cell>Program Files</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>4/7/2021</Table.Cell>
-        <Table.Cell>File folder</Table.Cell>
-        <Table.Cell>6/7/2020</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer colspan={5}>Footer goes here and should colSpan all columns</Table.Footer>
-  </Table>
-</div>
-```
diff --git a/apps/docs/content/components/tabs.yaml b/apps/docs/content/components/tabs.yaml
deleted file mode 100644
index e04979887..000000000
--- a/apps/docs/content/components/tabs.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Tabs
diff --git a/apps/docs/content/components/tabs/code.mdoc b/apps/docs/content/components/tabs/code.mdoc
deleted file mode 100644
index e3c7c4d22..000000000
--- a/apps/docs/content/components/tabs/code.mdoc
+++ /dev/null
@@ -1,285 +0,0 @@
-## Tabs default
-
-```jsx
-<Tabs>
-  <Tabs.Panel  title="Rabbit hole" key="rabbit-hole">
-    ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing
-    larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
-    gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort
-    of life! I do wonder what can have happened to me! When I used to read fairy-tales, I
-    fancied that kind of thing never happened, and now here I am in the middle of one! There
-    ought to be a book written about me, that there ought! And when I grow up, I’ll write one.
-  </Tab>
-  <Tabs.Panel  title="Flamingo" key="flamingo">
-    The chief difficulty Alice found at first was in managing her flamingo: she succeeded in
-    getting its body tucked away, comfortably enough, under her arm, with its legs hanging
-    down, but generally, just as she had got its neck nicely straightened out, and was going
-    to give the hedgehog a blow with its head, it would twist itself round and look up in her
-    face, with such a puzzled expression that she could not help bursting out laughing: and
-    when she had got its head down, and was going to begin again, it was very provoking to
-    find that the hedgehog had unrolled itself, and was in the act of crawling away: besides
-    all this, there was generally a ridge or furrow in the way wherever she wanted to send the
-    hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to
-    other parts of the ground, Alice soon came to the conclusion that it was a very difficult
-    game indeed.
-  </Tab>
-  <Tabs.Panel  title="Caterpillar" key="caterpillar">
-    The Caterpillar and Alice looked at each other for some time in silence: at last the
-    Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
-    voice.
-    <br />
-    ‘Who are you?’ said the Caterpillar.
-    <br />
-    This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I —
-    I hardly know, sir, just at present — at least I know who I was when I got up this
-    morning, but I think I must have been changed several times since then.’
-    <br />
-    ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’
-    <br />
-    ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’
-    <br />
-    ‘I don’t see,’ said the Caterpillar.
-    <br />
-    ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t
-    understand it myself to begin with; and being so many different sizes in a day is very
-    confusing.’
-  </Tab>
-</Tabs>
-```
-
----
-
-## Tabs different color
-
-```jsx
-<Tabs color="hero" >
-  <Tabs.Panel  title="Rabbit hole" key="rabbit-hole">
-    ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing
-    larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
-    gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort
-    of life! I do wonder what can have happened to me! When I used to read fairy-tales, I
-    fancied that kind of thing never happened, and now here I am in the middle of one! There
-    ought to be a book written about me, that there ought! And when I grow up, I’ll write one.
-  </Tab>
-  <Tabs.Panel  title="Flamingo" key="flamingo">
-    The chief difficulty Alice found at first was in managing her flamingo: she succeeded in
-    getting its body tucked away, comfortably enough, under her arm, with its legs hanging
-    down, but generally, just as she had got its neck nicely straightened out, and was going
-    to give the hedgehog a blow with its head, it would twist itself round and look up in her
-    face, with such a puzzled expression that she could not help bursting out laughing: and
-    when she had got its head down, and was going to begin again, it was very provoking to
-    find that the hedgehog had unrolled itself, and was in the act of crawling away: besides
-    all this, there was generally a ridge or furrow in the way wherever she wanted to send the
-    hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to
-    other parts of the ground, Alice soon came to the conclusion that it was a very difficult
-    game indeed.
-  </Tab>
-  <Tabs.Panel  title="Caterpillar" key="caterpillar">
-    The Caterpillar and Alice looked at each other for some time in silence: at last the
-    Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
-    voice.
-    <br />
-    ‘Who are you?’ said the Caterpillar.
-    <br />
-    This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I —
-    I hardly know, sir, just at present — at least I know who I was when I got up this
-    morning, but I think I must have been changed several times since then.’
-    <br />
-    ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’
-    <br />
-    ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’
-    <br />
-    ‘I don’t see,’ said the Caterpillar.
-    <br />
-    ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t
-    understand it myself to begin with; and being so many different sizes in a day is very
-    confusing.’
-  </Tab>
-</Tabs>
-```
-
----
-
-## Tabs justified
-
-### Soft
-
-```jsx
-<Tabs justify >
-  <Tabs.Panel  title="Rabbit hole" key="rabbit-hole">
-    ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing
-    larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
-    gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort
-    of life! I do wonder what can have happened to me! When I used to read fairy-tales, I
-    fancied that kind of thing never happened, and now here I am in the middle of one! There
-    ought to be a book written about me, that there ought! And when I grow up, I’ll write one.
-  </Tab>
-  <Tabs.Panel  title="Flamingo" key="flamingo">
-    The chief difficulty Alice found at first was in managing her flamingo: she succeeded in
-    getting its body tucked away, comfortably enough, under her arm, with its legs hanging
-    down, but generally, just as she had got its neck nicely straightened out, and was going
-    to give the hedgehog a blow with its head, it would twist itself round and look up in her
-    face, with such a puzzled expression that she could not help bursting out laughing: and
-    when she had got its head down, and was going to begin again, it was very provoking to
-    find that the hedgehog had unrolled itself, and was in the act of crawling away: besides
-    all this, there was generally a ridge or furrow in the way wherever she wanted to send the
-    hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to
-    other parts of the ground, Alice soon came to the conclusion that it was a very difficult
-    game indeed.
-  </Tab>
-  <Tabs.Panel  title="Caterpillar" key="caterpillar">
-    The Caterpillar and Alice looked at each other for some time in silence: at last the
-    Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
-    voice.
-    <br />
-    ‘Who are you?’ said the Caterpillar.
-    <br />
-    This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I —
-    I hardly know, sir, just at present — at least I know who I was when I got up this
-    morning, but I think I must have been changed several times since then.’
-    <br />
-    ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’
-    <br />
-    ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’
-    <br />
-    ‘I don’t see,’ said the Caterpillar.
-    <br />
-    ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t
-    understand it myself to begin with; and being so many different sizes in a day is very
-    confusing.’
-  </Tab>
-</Tabs>
-```
-
-### Hero
-
-```jsx
-<Tabs justify color="hero" >
-  <Tabs.Panel  title="Rabbit hole" key="rabbit-hole">
-    ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing
-    larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
-    gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort
-    of life! I do wonder what can have happened to me! When I used to read fairy-tales, I
-    fancied that kind of thing never happened, and now here I am in the middle of one! There
-    ought to be a book written about me, that there ought! And when I grow up, I’ll write one.
-  </Tab>
-  <Tabs.Panel  title="Flamingo" key="flamingo">
-    The chief difficulty Alice found at first was in managing her flamingo: she succeeded in
-    getting its body tucked away, comfortably enough, under her arm, with its legs hanging
-    down, but generally, just as she had got its neck nicely straightened out, and was going
-    to give the hedgehog a blow with its head, it would twist itself round and look up in her
-    face, with such a puzzled expression that she could not help bursting out laughing: and
-    when she had got its head down, and was going to begin again, it was very provoking to
-    find that the hedgehog had unrolled itself, and was in the act of crawling away: besides
-    all this, there was generally a ridge or furrow in the way wherever she wanted to send the
-    hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to
-    other parts of the ground, Alice soon came to the conclusion that it was a very difficult
-    game indeed.
-  </Tab>
-  <Tabs.Panel  title="Caterpillar" key="caterpillar">
-    The Caterpillar and Alice looked at each other for some time in silence: at last the
-    Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
-    voice.
-    <br />
-    ‘Who are you?’ said the Caterpillar.
-    <br />
-    This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I —
-    I hardly know, sir, just at present — at least I know who I was when I got up this
-    morning, but I think I must have been changed several times since then.’
-    <br />
-    ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’
-    <br />
-    ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’
-    <br />
-    ‘I don’t see,’ said the Caterpillar.
-    <br />
-    ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t
-    understand it myself to begin with; and being so many different sizes in a day is very
-    confusing.’
-  </Tab>
-</Tabs>
-```
-
----
-
-## Configurable
-
-```jsx
-() => {
-  const COLORS = ['primary', 'hero', undefined];
-  const LOOKS = ['material', 'default'];
-
-  const [color, setColor] = useState();
-  const [justify, setJustify] = useState<boolean>(false);
-  const [look, setLook] = useState('default');
-
-  return (
-    <Fragment>
-      <div className="flex gap-2">
-        <label className="flex flex-col">
-          <span>Colors:</span>
-          <Select value={color} onChange={({ target: { value }}) => setColor(value)}>
-            {COLORS.map((itemColor) => <option key={itemColor || ''} value={itemColor}>{itemColor ? itemColor: 'None'}</option>)}
-          </Select>
-        </label>
-        <label className="flex flex-col">
-          <span>Looks:</span>
-          <Select value={look} onChange={({ target: { value }}) => setLook(value)}>
-            {LOOKS.map((itemLook) => <option key={itemLook} value={itemLook}>{itemLook}</option>)}
-          </Select>
-        </label>
-        <label className="">
-          <input className="mr-2" type="checkbox" checked={justify} onChange={() => setJustify(!justify)} />
-          <span>Justified</span>
-        </label>
-      </div>
-      <hr className="my-3 border-t border-t-background" />
-      <Tabs look={look} justify={justify} color={color} >
-        <Tabs.Panel  title="Rabbit hole" key="rabbit-hole">
-          ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing
-          larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
-          gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort
-          of life! I do wonder what can have happened to me! When I used to read fairy-tales, I
-          fancied that kind of thing never happened, and now here I am in the middle of one! There
-          ought to be a book written about me, that there ought! And when I grow up, I’ll write one.
-        </Tab>
-        <Tabs.Panel  title="Flamingo" key="flamingo">
-          The chief difficulty Alice found at first was in managing her flamingo: she succeeded in
-          getting its body tucked away, comfortably enough, under her arm, with its legs hanging
-          down, but generally, just as she had got its neck nicely straightened out, and was going
-          to give the hedgehog a blow with its head, it would twist itself round and look up in her
-          face, with such a puzzled expression that she could not help bursting out laughing: and
-          when she had got its head down, and was going to begin again, it was very provoking to
-          find that the hedgehog had unrolled itself, and was in the act of crawling away: besides
-          all this, there was generally a ridge or furrow in the way wherever she wanted to send the
-          hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to
-          other parts of the ground, Alice soon came to the conclusion that it was a very difficult
-          game indeed.
-        </Tab>
-        <Tabs.Panel  title="Caterpillar" key="caterpillar">
-          The Caterpillar and Alice looked at each other for some time in silence: at last the
-          Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
-          voice.
-          <br />
-          ‘Who are you?’ said the Caterpillar.
-          <br />
-          This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I —
-          I hardly know, sir, just at present — at least I know who I was when I got up this
-          morning, but I think I must have been changed several times since then.’
-          <br />
-          ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’
-          <br />
-          ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’
-          <br />
-          ‘I don’t see,’ said the Caterpillar.
-          <br />
-          ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t
-          understand it myself to begin with; and being so many different sizes in a day is very
-          confusing.’
-        </Tab>
-      </Tabs>
-    </Fragment>
-  )
-}
-```
-
diff --git a/apps/docs/content/components/textarea.yaml b/apps/docs/content/components/textarea.yaml
deleted file mode 100644
index d7fadb31c..000000000
--- a/apps/docs/content/components/textarea.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Textarea
diff --git a/apps/docs/content/components/textarea/code.mdoc b/apps/docs/content/components/textarea/code.mdoc
deleted file mode 100644
index e9adc0586..000000000
--- a/apps/docs/content/components/textarea/code.mdoc
+++ /dev/null
@@ -1,38 +0,0 @@
-## Textarea sizes
-
-```tsx
-() => {
-  const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
-  return (
-    <div className="flex items-end gap-4">
-      {SIZES.map(size => (
-        <div key={size}>
-          <h3 className="typography-body-8">{size}</h3>
-          <Textarea size={size} />
-        </div>
-      ))}
-    </div>
-  )
-}
-```
-
----
-
-## Different status
-
-```jsx
-<div className="flex items-end gap-4">
-  <div>
-    <h3 className="typography-body-8">Disabled</h3>
-    <Textarea disabled />
-  </div>
-  <div>
-    <h3 className="typography-body-8">Read only</h3>
-    <Textarea readOnly />
-  </div>
-  <div>
-    <h3 className="typography-body-8">Invalid</h3>
-    <Textarea invalid />
-  </div>
-</div>
-```
diff --git a/apps/docs/content/components/typography.yaml b/apps/docs/content/components/typography.yaml
deleted file mode 100644
index d3a816e90..000000000
--- a/apps/docs/content/components/typography.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Typography
diff --git a/apps/docs/content/components/typography/code.mdoc b/apps/docs/content/components/typography/code.mdoc
deleted file mode 100644
index c56ba1145..000000000
--- a/apps/docs/content/components/typography/code.mdoc
+++ /dev/null
@@ -1,49 +0,0 @@
-## Brand font
-
-```jsx
-() => {
-  const typographyBrandScale = [
-    { className: 'typography-brand-1', size: '60' },
-    { className: 'typography-brand-2', size: '54' },
-    { className: 'typography-brand-3', size: '48' },
-    { className: 'typography-brand-4', size: '42' },
-    { className: 'typography-brand-5', size: '36' },
-    { className: 'typography-brand-6', size: '30' },
-    { className: 'typography-brand-7', size: '24' },
-    { className: 'typography-brand-8', size: '18' },
-    { className: 'typography-brand-9', size: '16' },
-    { className: 'typography-brand-10', size: '14' },
-  ];
-  return typographyBrandScale.map(i => (
-    <div key={i.size} className="pb-1">
-      <p className={i.className}>Type size: {i.size}</p>
-    </div>
-  ));
-};
-```
-
----
-
-## Body font
-
-```jsx
-() => {
-  const typographyBodyScale = [
-    { className: 'typography-body-1', size: '60' },
-    { className: 'typography-body-2', size: '54' },
-    { className: 'typography-body-3', size: '48' },
-    { className: 'typography-body-4', size: '42' },
-    { className: 'typography-body-5', size: '36' },
-    { className: 'typography-body-6', size: '30' },
-    { className: 'typography-body-7', size: '24' },
-    { className: 'typography-body-8', size: '18' },
-    { className: 'typography-body-9', size: '16' },
-    { className: 'typography-body-10', size: '14' },
-  ];
-  return typographyBodyScale.map(i => (
-    <div key={i.size} className="pb-1">
-      <p className={i.className}>Type size: {i.size}</p>
-    </div>
-  ));
-};
-```
diff --git a/apps/docs/next-env.d.ts b/apps/docs/next-env.d.ts
deleted file mode 100644
index 4f11a03dc..000000000
--- a/apps/docs/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
deleted file mode 100644
index 1cc283f60..000000000
--- a/apps/docs/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  reactStrictMode: true,
-  pageExtensions: ['page.tsx', 'api.ts'],
-};
diff --git a/apps/docs/package.json b/apps/docs/package.json
deleted file mode 100644
index 357c1f3ad..000000000
--- a/apps/docs/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "name": "docs",
-  "version": "0.1.20",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix"
-  },
-  "dependencies": {
-    "@keystatic/core": "~0.0.112",
-    "@keystatic/next": "~0.0.11",
-    "@westpac/ui": "workspace:~",
-    "clipboard-copy": "~4.0.1",
-    "clsx": "^1.2.1",
-    "next": "^13.4.8",
-    "prism-react-renderer": "~2.0.6",
-    "prismjs": "~1.29.0",
-    "react": "^18.2.0",
-    "react-aria": "~3.25.0",
-    "react-dom": "^18.2.0",
-    "react-live": "~4.1.3",
-    "react-stately": "~3.23.0",
-    "usehooks-ts": "~2.9.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@react-types/shared": "~3.18.1",
-    "@swc/core": "^1.3.23",
-    "@types/node": "^17.0.12",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.0.7",
-    "@westpac/eslint-config": "workspace:~",
-    "@westpac/ts-config": "workspace:~",
-    "autoprefixer": "~10.4.14",
-    "eslint": "^8.29.0",
-    "eslint-config-next": "13.1.1",
-    "postcss": "~8.4.24",
-    "tailwind-variants": "~0.1.13",
-    "tailwindcss": "~3.3.2",
-    "typescript": "^5.1.6"
-  }
-}
diff --git a/apps/docs/postcss.config.js b/apps/docs/postcss.config.js
deleted file mode 100644
index 12a703d90..000000000
--- a/apps/docs/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/apps/docs/public/fonts/Aller_Bd.woff b/apps/docs/public/fonts/Aller_Bd.woff
deleted file mode 100644
index fb333f307..000000000
Binary files a/apps/docs/public/fonts/Aller_Bd.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/Aller_Bd.woff2 b/apps/docs/public/fonts/Aller_Bd.woff2
deleted file mode 100644
index 677c93604..000000000
Binary files a/apps/docs/public/fonts/Aller_Bd.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/Aller_Lt.woff b/apps/docs/public/fonts/Aller_Lt.woff
deleted file mode 100644
index 0ed920088..000000000
Binary files a/apps/docs/public/fonts/Aller_Lt.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/Aller_Lt.woff2 b/apps/docs/public/fonts/Aller_Lt.woff2
deleted file mode 100644
index 33f159574..000000000
Binary files a/apps/docs/public/fonts/Aller_Lt.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/Westpac-Bold-v2.007.woff b/apps/docs/public/fonts/Westpac-Bold-v2.007.woff
deleted file mode 100644
index 8ca1ffea4..000000000
Binary files a/apps/docs/public/fonts/Westpac-Bold-v2.007.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/Westpac-Bold-v2.007.woff2 b/apps/docs/public/fonts/Westpac-Bold-v2.007.woff2
deleted file mode 100644
index 560b1dd30..000000000
Binary files a/apps/docs/public/fonts/Westpac-Bold-v2.007.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/dragonbold-bold-webfont.woff b/apps/docs/public/fonts/dragonbold-bold-webfont.woff
deleted file mode 100755
index c89808211..000000000
Binary files a/apps/docs/public/fonts/dragonbold-bold-webfont.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/dragonbold-bold-webfont.woff2 b/apps/docs/public/fonts/dragonbold-bold-webfont.woff2
deleted file mode 100755
index 9b8eeb6e0..000000000
Binary files a/apps/docs/public/fonts/dragonbold-bold-webfont.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/lineto-brown-pro-bold.woff b/apps/docs/public/fonts/lineto-brown-pro-bold.woff
deleted file mode 100755
index 55f5a4a5d..000000000
Binary files a/apps/docs/public/fonts/lineto-brown-pro-bold.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/lineto-brown-pro-bold.woff2 b/apps/docs/public/fonts/lineto-brown-pro-bold.woff2
deleted file mode 100755
index d4da6476f..000000000
Binary files a/apps/docs/public/fonts/lineto-brown-pro-bold.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/lineto-brown-pro-light.woff b/apps/docs/public/fonts/lineto-brown-pro-light.woff
deleted file mode 100755
index c1dff7877..000000000
Binary files a/apps/docs/public/fonts/lineto-brown-pro-light.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/lineto-brown-pro-light.woff2 b/apps/docs/public/fonts/lineto-brown-pro-light.woff2
deleted file mode 100755
index 9037c6b0c..000000000
Binary files a/apps/docs/public/fonts/lineto-brown-pro-light.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/lineto-brown-pro-regular.woff b/apps/docs/public/fonts/lineto-brown-pro-regular.woff
deleted file mode 100755
index 84fc1ab82..000000000
Binary files a/apps/docs/public/fonts/lineto-brown-pro-regular.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/lineto-brown-pro-regular.woff2 b/apps/docs/public/fonts/lineto-brown-pro-regular.woff2
deleted file mode 100755
index 900f87367..000000000
Binary files a/apps/docs/public/fonts/lineto-brown-pro-regular.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/montserrat-v14-latin-300.woff b/apps/docs/public/fonts/montserrat-v14-latin-300.woff
deleted file mode 100644
index dfa5a04a0..000000000
Binary files a/apps/docs/public/fonts/montserrat-v14-latin-300.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/montserrat-v14-latin-300.woff2 b/apps/docs/public/fonts/montserrat-v14-latin-300.woff2
deleted file mode 100644
index 6b1bddce9..000000000
Binary files a/apps/docs/public/fonts/montserrat-v14-latin-300.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/montserrat-v14-latin-700.woff b/apps/docs/public/fonts/montserrat-v14-latin-700.woff
deleted file mode 100644
index 8573760b1..000000000
Binary files a/apps/docs/public/fonts/montserrat-v14-latin-700.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/montserrat-v14-latin-700.woff2 b/apps/docs/public/fonts/montserrat-v14-latin-700.woff2
deleted file mode 100644
index 3d0b4099c..000000000
Binary files a/apps/docs/public/fonts/montserrat-v14-latin-700.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/montserrat-v14-latin-regular.woff b/apps/docs/public/fonts/montserrat-v14-latin-regular.woff
deleted file mode 100644
index 676a065e2..000000000
Binary files a/apps/docs/public/fonts/montserrat-v14-latin-regular.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/montserrat-v14-latin-regular.woff2 b/apps/docs/public/fonts/montserrat-v14-latin-regular.woff2
deleted file mode 100644
index ab43a547e..000000000
Binary files a/apps/docs/public/fonts/montserrat-v14-latin-regular.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/source-sans-pro-v14-latin-600.woff b/apps/docs/public/fonts/source-sans-pro-v14-latin-600.woff
deleted file mode 100644
index 0aba561de..000000000
Binary files a/apps/docs/public/fonts/source-sans-pro-v14-latin-600.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/source-sans-pro-v14-latin-600.woff2 b/apps/docs/public/fonts/source-sans-pro-v14-latin-600.woff2
deleted file mode 100644
index cb0ea772f..000000000
Binary files a/apps/docs/public/fonts/source-sans-pro-v14-latin-600.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/source-sans-pro-v14-latin-700.woff b/apps/docs/public/fonts/source-sans-pro-v14-latin-700.woff
deleted file mode 100644
index f2a7dd342..000000000
Binary files a/apps/docs/public/fonts/source-sans-pro-v14-latin-700.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/source-sans-pro-v14-latin-700.woff2 b/apps/docs/public/fonts/source-sans-pro-v14-latin-700.woff2
deleted file mode 100644
index ce34a9fec..000000000
Binary files a/apps/docs/public/fonts/source-sans-pro-v14-latin-700.woff2 and /dev/null differ
diff --git a/apps/docs/public/fonts/source-sans-pro-v14-latin-regular.woff b/apps/docs/public/fonts/source-sans-pro-v14-latin-regular.woff
deleted file mode 100644
index 5b6e97be7..000000000
Binary files a/apps/docs/public/fonts/source-sans-pro-v14-latin-regular.woff and /dev/null differ
diff --git a/apps/docs/public/fonts/source-sans-pro-v14-latin-regular.woff2 b/apps/docs/public/fonts/source-sans-pro-v14-latin-regular.woff2
deleted file mode 100644
index 36bdc0e32..000000000
Binary files a/apps/docs/public/fonts/source-sans-pro-v14-latin-regular.woff2 and /dev/null differ
diff --git a/apps/docs/public/imgs/backgrounds/bsa-background.svg b/apps/docs/public/imgs/backgrounds/bsa-background.svg
deleted file mode 100644
index d45211932..000000000
--- a/apps/docs/public/imgs/backgrounds/bsa-background.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1016 620" width="1016" height="620">
-  <title>BankSA background image</title>
-  <g fill-rule="evenodd" fill-opacity=".06">
-    <path fill="#ABE2EC"
-      d="M1016 351.256V620H761.273c27.913-64.566 68.975-124.693 123.09-176.26 40.098-38.21 84.536-69.024 131.637-92.484z" />
-    <path fill="#ABE2EC"
-      d="M1016.004 16.677V411.3c-25.95 34.934-55.219 68.138-87.798 99.172-45.225 43.08-94.312 79.58-146.084 109.53h-361.77c29.884-150.51 104.842-293.558 224.353-407.4 107.27-102.183 236.27-167.358 371.299-195.926z" />
-    <path fill="#ABE2EC"
-      d="M150 0c156.485 9.699 309.777 76.152 426.39 198.557C689.542 317.33 748.374 467.995 753.663 620.005h-99.176c-120.814-26.69-235.221-88.362-326.94-184.637C210.934 312.964 152.031 156.683 150 0zM0 299c104.928 6.516 207.714 51.168 285.907 133.415 51.977 54.672 86.86 119.4 104.818 187.588H148.779a437.59 437.59 0 01-29.727-28.468C40.858 509.289 1.362 404.28 0 299z" />
-  </g>
-</svg>
\ No newline at end of file
diff --git a/apps/docs/public/imgs/backgrounds/rams-background.svg b/apps/docs/public/imgs/backgrounds/rams-background.svg
deleted file mode 100644
index 90566e372..000000000
--- a/apps/docs/public/imgs/backgrounds/rams-background.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 447" width="447" height="447">
-  <title>RAMS background image</title>
-  <defs>
-    <linearGradient x1="26.834%" y1="16.167%" x2="78.251%" y2="91.259%" id="RamsBackgroundSvg-a">
-      <stop stopColor="#0092CD" offset="0%" />
-      <stop stopColor="#007CBE" offset="42%" />
-      <stop stopColor="#007CBE" offset="46%" />
-      <stop stopColor="#007ABB" offset="62%" />
-      <stop stopColor="#0072B1" offset="73%" />
-      <stop stopColor="#0066A1" offset="83%" />
-      <stop stopColor="#00558B" offset="93%" />
-      <stop stopColor="#004373" offset="100%" />
-    </linearGradient>
-    <linearGradient x1="34.935%" y1="27.673%" x2="76.122%" y2="62.788%" id="RamsBackgroundSvg-b">
-      <stop stopColor="#006DA6" offset="0%" />
-      <stop stopColor="#0080C2" offset="47%" />
-      <stop stopColor="#009DE2" offset="67%" />
-      <stop stopColor="#24BCEE" offset="100%" />
-    </linearGradient>
-    <linearGradient x1="0%" y1="49.999%" x2="100.002%" y2="49.999%" id="RamsBackgroundSvg-c">
-      <stop stopColor="#24BCEE" stopOpacity="0" offset="0%" />
-      <stop stopColor="#29BCE2" stopOpacity=".06" offset="9%" />
-      <stop stopColor="#37BBC3" stopOpacity=".21" offset="24%" />
-      <stop stopColor="#4EBB90" stopOpacity=".47" offset="43%" />
-      <stop stopColor="#78C339" offset="66%" />
-      <stop stopColor="#78C339" offset="78%" />
-      <stop stopColor="#006DA6" offset="100%" />
-    </linearGradient>
-  </defs>
-  <g fill="none">
-    <circle fill="url(#RamsBackgroundSvg-a)" cx="223.55" cy="223.55" r="223.387" />
-    <path
-      d="M444.713 191.924a199.034 199.034 0 01-20.009 86.04c-50.691 104.45-181.782 145.446-292.8 91.57-75.86-36.82-122.73-108.424-128.618-183.41A225.312 225.312 0 00.162 223.55c0 123.372 100.015 223.387 223.388 223.387 123.372 0 223.387-100.015 223.387-223.387 0-10.581-.74-21.15-2.224-31.626z"
-      fill="url(#RamsBackgroundSvg-b)" />
-    <path
-      d="M3.286 186.124c5.888 74.986 52.758 146.59 128.608 183.41 111.019 53.876 242.11 12.88 292.801-91.57a200.605 200.605 0 004.778-10.622 200.925 200.925 0 01-11.42 19.785c-21.508 32.809-52.188 58.454-88.722 74.169-35.668 15.339-75.518 20.736-115.24 15.609h-.015a232.192 232.192 0 01-50.52-12.431 240.5 240.5 0 01-95.241-64.628 231.054 231.054 0 01-33.518-48.662c-15.272-29.761-23.613-62.145-24.444-94.531a221.904 221.904 0 00-7.067 29.471z"
-      fill="url(#RamsBackgroundSvg-c)" />
-  </g>
-</svg>
\ No newline at end of file
diff --git a/apps/docs/public/imgs/backgrounds/stg-background.svg b/apps/docs/public/imgs/backgrounds/stg-background.svg
deleted file mode 100644
index 8704ce648..000000000
--- a/apps/docs/public/imgs/backgrounds/stg-background.svg
+++ /dev/null
@@ -1,88 +0,0 @@
-<svg width="1202" height="285" viewBox="0 0 1202 285" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_1_2)">
-    <path
-      d="M0 -193.13L88.889 -142.327L154.249 -85.551L146.405 4.099L227.451 1.11206L232.68 174.433L324.183 126.619L457.516 159.492L590.85 168.455L724.183 270.059L732.026 285H0V-193.13ZM0 -533.795L39.216 -474.029L52.288 -372.427L0 -339.555V-414.855L0.016 -414.843L0 -414.873V-533.795ZM0 -650.34L5.229 -626.433L0 -614.48V-650.34Z"
-      fill="#048938" />
-    <path
-      d="M232.68 174.432L321.568 284.999H329.412L324.183 126.619L232.68 174.432ZM130.719 165.467L232.68 174.432L146.405 4.09802L130.719 165.467ZM410.458 284.999H452.288L549.02 240.174L457.516 159.49L410.458 284.999ZM0 -16.819V63.865L15.686 153.513L52.288 51.912L0 -16.819ZM23.529 284.999H104.575L15.686 153.513L23.529 284.999ZM0 -471.042L39.216 -474.03L0 -533.796V-471.042ZM52.288 -372.428L0 -414.856V-339.557L52.288 -372.428ZM88.889 -142.328L0 -52.679V-40.726L154.248 -85.551L88.889 -142.328ZM0 -629.422V-623.445L5.229 -626.434L0 -629.422Z"
-      fill="#007838" />
-    <path
-      d="M104.575 284.999L232.68 174.431L130.719 165.467L104.575 284.999ZM0 165.466V284.999H23.529L15.686 153.513L0 165.466ZM146.405 4.09805L52.288 51.9111L130.719 165.467L146.405 4.09805ZM554.248 284.999H609.15L549.019 240.174L554.248 284.999ZM39.215 -474.03L0 -471.042V-414.873L52.287 -372.428L39.215 -474.03ZM337.255 284.999H410.458L457.517 159.49L337.255 284.999Z"
-      fill="#008038" />
-    <path
-      d="M549.02 240.174L590.85 168.455L457.516 159.49L549.02 240.174ZM0 -193.13V-136.352L88.889 -142.329L0 -193.13ZM232.68 174.431L227.451 1.11005L146.405 4.09808L232.68 174.431ZM0 -623.446V-614.481L5.229 -626.434L0 -623.446ZM724.183 270.057L703.268 284.999H732.026L724.183 270.057Z"
-      fill="#008038" />
-    <path
-      d="M329.412 284.999H337.255L457.516 159.491L324.183 126.619L329.412 284.999ZM0 165.466L15.686 153.513L0 144.549V165.466ZM104.575 284.999L130.719 165.467L15.686 153.513L104.575 284.999ZM637.908 284.999H703.268L724.184 270.058L590.85 168.456L637.908 284.999ZM452.288 284.999H554.248L549.021 240.175L452.288 284.999ZM0 -33.255V-16.819L52.288 51.912L146.405 4.099L0 -33.255Z"
-      fill="#008437" />
-    <path
-      d="M104.575 284.999H321.569L232.68 174.432L104.575 284.999ZM0 144.549L15.686 153.513L0 63.865V144.549ZM0 -650.341V-629.422L5.229 -626.434L0 -650.341ZM0 -40.726V-32.974L146.405 4.099L154.248 -85.552L0 -40.726ZM549.02 240.175L609.151 285H637.908L590.849 168.454L549.02 240.175ZM52.288 51.911L15.686 153.513L130.719 165.467L52.288 51.911ZM0 -136.352V-52.679L88.889 -142.328L0 -136.352Z"
-      fill="#048938" />
-    <g opacity="0.8">
-      <path
-        d="M324.183 126.62L227.451 1.11102L232.68 174.433L324.183 126.62ZM18.301 -737H0V-704.129L44.444 -683.211L18.301 -737ZM154.248 -85.55L209.15 -196.117L88.889 -142.327L154.248 -85.55ZM227.451 1.11102L154.248 -85.55L146.405 4.099L227.451 1.11102ZM81.046 -566.667L44.444 -683.211L5.229 -626.433L81.046 -566.667Z"
-        fill="#008437" />
-      <path
-        d="M88.889 -273.813L0 -214.047V-193.129L88.889 -142.327V-273.813ZM815.686 285L818.301 243.164L724.183 270.058L732.026 285H815.686ZM818.301 243.164L839.216 285H907.19V258.105L818.301 243.164Z"
-        fill="#008437" />
-      <path
-        d="M86.275 -737H18.301L44.444 -683.211L86.275 -737ZM457.516 159.491L590.85 168.456L512.418 117.655L457.516 159.491ZM52.288 -372.427L0 -339.556V-297.719L88.889 -273.813L52.288 -372.427ZM324.183 126.62L380.392 -0.382996L227.451 1.11102L324.183 126.62ZM938.562 285H1006.54L907.19 258.105L938.562 285Z"
-        fill="#048938" />
-    </g>
-    <g opacity="0.7">
-      <path
-        d="M768.628 96.7369L724.183 270.059L818.301 243.164L768.628 96.7369ZM590.85 168.456L724.183 270.059L692.811 150.526L590.85 168.456Z"
-        fill="#007838" />
-      <path
-        d="M0 -566.588V-533.796L39.216 -474.03L81.046 -566.667L0 -566.588ZM815.686 285H839.216L818.301 243.163L815.686 285Z"
-        fill="#008038" />
-      <path d="M522.876 22.0289L590.85 168.456L692.811 150.526L522.876 22.0289Z" fill="#048938" />
-    </g>
-    <g opacity="0.6">
-      <path
-        d="M109.804 -695.164L117.647 -737H86.275L44.445 -683.211L109.804 -695.164ZM39.216 -474.029L52.288 -372.427L112.419 -471.041L39.216 -474.029ZM907.19 285H938.562L907.19 258.105V285ZM522.876 22.029L324.183 126.62L457.517 159.491L522.876 22.029Z"
-        fill="#007838" />
-      <path
-        d="M512.418 117.655L590.85 168.456L522.876 22.029L512.418 117.655ZM380.392 -0.382996L266.667 -127.386L227.451 1.11102L380.392 -0.382996ZM883.66 147.538L818.301 243.164L907.19 258.105L883.66 147.538Z"
-        fill="#008038" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M692.81 150.527L671.895 39.96L522.875 22.03L692.81 150.527ZM209.149 -196.116L175.163 -309.672L88.8879 -273.812L209.149 -196.116ZM227.45 1.112L266.666 -127.385L154.247 -85.549L227.45 1.112Z"
-        fill="#007838" />
-      <path
-        d="M724.183 270.059L768.627 96.7371L692.81 150.527L724.183 270.059ZM1035.29 285.001L1022.22 231.211L883.66 147.539L1027.45 285.001H1035.29ZM517.647 -64.6309L380.392 -0.382935L324.183 126.62L517.647 -64.6309ZM81.045 -566.666L146.405 -650.339L44.444 -683.21L81.045 -566.666Z"
-        fill="#008038" />
-      <path
-        d="M512.418 117.656L522.875 22.0301L457.516 159.492L512.418 117.656ZM883.66 147.539L768.627 96.738L818.3 243.165L883.66 147.539ZM52.287 -372.426L159.477 -384.379L112.418 -471.04L52.287 -372.426Z"
-        fill="#008437" />
-      <path d="M1035.29 285H1040.52L1074.51 186.386L1022.22 231.211L1035.29 285Z" fill="#048938" />
-    </g>
-    <g opacity="0.4">
-      <path d="M883.66 147.538L907.189 258.105L1006.54 285H1027.45L883.66 147.538Z" fill="#007838" />
-      <path
-        d="M768.628 96.737L671.896 39.959L692.811 150.526L768.628 96.737ZM522.876 22.029L517.647 -64.632L324.183 126.62L522.876 22.029ZM117.647 -737L109.804 -695.164L146.405 -650.339L135.948 -737H117.647ZM1126.8 285L1074.51 186.386L1040.52 285H1126.8Z"
-        fill="#008437" />
-    </g>
-    <g opacity="0.3">
-      <path
-        d="M1022.22 231.211L1074.51 186.387L883.66 147.539L1022.22 231.211ZM243.138 -225.999L175.164 -309.672L209.151 -196.116L243.138 -225.999ZM112.419 -471.04L172.549 -551.724L81.046 -566.666L112.419 -471.04ZM175.164 -309.672L159.477 -384.379L88.889 -273.812L175.164 -309.672Z"
-        fill="#008437" />
-      <path d="M956.863 81.796L768.628 96.738L883.661 147.539L956.863 81.796Z" fill="#048938" />
-    </g>
-    <g opacity="0.2">
-      <path
-        d="M786.928 45.936L671.895 39.9589L768.627 96.737L786.928 45.936ZM159.477 -384.38L172.549 -551.725L112.418 -471.041L159.477 -384.38Z"
-        fill="#007838" />
-      <path
-        d="M671.895 39.959L517.646 -64.632L522.875 22.029L671.895 39.959ZM1074.51 186.386L956.862 81.795L883.659 147.538L1074.51 186.386ZM146.405 -650.339L216.993 -662.292L164.705 -737H135.947L146.405 -650.339ZM266.666 -127.386L243.137 -226L209.15 -196.117L266.666 -127.386ZM1126.8 285H1200L1074.51 186.386L1126.8 285Z"
-        fill="#008038" />
-      <path d="M786.928 45.936L768.627 96.737L956.862 81.796L786.928 45.936Z" fill="#008437" />
-    </g>
-  </g>
-  <defs>
-    <clipPath id="clip0_1_2">
-      <rect width="1202" height="285" fill="white" />
-    </clipPath>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/apps/docs/public/imgs/backgrounds/wbc-background.svg b/apps/docs/public/imgs/backgrounds/wbc-background.svg
deleted file mode 100644
index 2dc2e2963..000000000
--- a/apps/docs/public/imgs/backgrounds/wbc-background.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342 228" width="342" height="228">
-  <title>Westpac background image</title>
-  <path fill="#FF3DDB" fillRule="evenodd"
-    d="M102.315463,0 C122.508126,0 135.720106,7.34485714 143.539774,33.3938571 L143.539774,33.3938571 L198.627703,203.880857 C198.627703,203.880857 207.156028,226.591286 214.934968,228 L214.934968,228 L106.477807,228 C86.2688538,228 68.4546736,216.673286 62.7691236,195.184286 L62.7691236,195.184286 L13.3830353,23.9481429 L13.3830353,23.9481429 L13.375804,23.9204208 C13.1544344,23.0759061 7.86854054,3.19581155 1.42108547e-14,0 L1.42108547e-14,0 Z M342,0 L342,228 L219.67484,228 L219.67484,0 L342,0 Z" />
-</svg>
\ No newline at end of file
diff --git a/apps/docs/src/components/code/code.component.tsx b/apps/docs/src/components/code/code.component.tsx
deleted file mode 100644
index c41ae694b..000000000
--- a/apps/docs/src/components/code/code.component.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { LiveProvider } from 'react-live';
-import { useOverlayTriggerState } from 'react-stately';
-
-import { StaticCode } from '../static-code';
-
-import * as UISystemComponents from './code.inject-components';
-import { CodeProps } from './code.types';
-import { LiveCode } from './components/live-code';
-
-const LIVE_SCOPE = {
-  ...UISystemComponents,
-  useOverlayTriggerState,
-  useState,
-  useCallback,
-  useMemo,
-  Fragment,
-  React,
-};
-
-export function Code({ children, live, showCode, className, language = 'tsx' }: CodeProps) {
-  const childrenAsString = children?.toString().trim();
-
-  if (!childrenAsString) return null;
-
-  if (live) {
-    return (
-      <LiveProvider code={childrenAsString} scope={LIVE_SCOPE} language={language}>
-        <LiveCode showCode={showCode} className={className} />
-      </LiveProvider>
-    );
-  }
-
-  return <StaticCode language="tsx" code={childrenAsString} />;
-}
diff --git a/apps/docs/src/components/code/code.inject-components.ts b/apps/docs/src/components/code/code.inject-components.ts
deleted file mode 100644
index fc1b9f3f4..000000000
--- a/apps/docs/src/components/code/code.inject-components.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import Link from 'next/link';
-
-export {
-  Badge,
-  Button,
-  Well,
-  Alert,
-  Breadcrumb,
-  Input,
-  Select,
-  Textarea,
-  Tabs,
-  Accordion,
-  RadioGroup,
-  CheckboxGroup,
-  ButtonGroup,
-  Switch,
-  ProgressBar,
-  Link,
-  Table,
-  Collapsible,
-  DatePicker,
-  List,
-  FlexiCell,
-  Circle,
-  Autocomplete,
-  Panel,
-  ButtonDropdown,
-  InputField,
-  Modal,
-  Pagination,
-  Popover,
-  ProgressRope,
-  Compacta,
-  Form,
-  Repeater,
-} from '@westpac/ui';
-
-export { usePagination } from '@westpac/ui/hook';
-
-export {
-  AddIcon,
-  TickCircleIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CalendarIcon,
-  DeleteIcon,
-  FavoriteIcon,
-  GridIcon,
-  HelpIcon,
-  MessageIcon,
-  NotificationOffIcon,
-  PdfFileIcon,
-  PersonIcon,
-  ProgressIcon,
-  StarRateIcon,
-  WriteIcon,
-  TelephoneIcon,
-  InfoIcon,
-  SearchIcon,
-  VisibilityIcon,
-  CloseIcon,
-  VisibilityOffIcon,
-  RefreshIcon,
-} from '@westpac/ui/icon';
-
-export { GiftPictogram } from '@westpac/ui/pictogram';
-export { Link as NextLink };
diff --git a/apps/docs/src/components/code/code.types.ts b/apps/docs/src/components/code/code.types.ts
deleted file mode 100644
index 915ba2ff7..000000000
--- a/apps/docs/src/components/code/code.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-
-export type CodeProps = {
-  children?: ReactNode;
-  className?: string;
-  language?: string;
-  live?: boolean;
-  showCode?: boolean;
-};
diff --git a/apps/docs/src/components/code/components/live-code/index.ts b/apps/docs/src/components/code/components/live-code/index.ts
deleted file mode 100644
index 1551435ac..000000000
--- a/apps/docs/src/components/code/components/live-code/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './live-code.component';
-export * from './live-code.types';
diff --git a/apps/docs/src/components/code/components/live-code/live-code.component.tsx b/apps/docs/src/components/code/components/live-code/live-code.component.tsx
deleted file mode 100644
index 69cfeeaa3..000000000
--- a/apps/docs/src/components/code/components/live-code/live-code.component.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { AlertIcon } from '@westpac/ui/icon';
-import copy from 'clipboard-copy';
-import { clsx } from 'clsx';
-import { themes } from 'prism-react-renderer';
-import React, { KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react';
-import { LiveContext, LiveEditor, LivePreview } from 'react-live';
-
-import { BracketIcon } from '../../../icons/bracket-icon';
-
-import { LiveCodeProps } from './live-code.types';
-
-export function LiveCode({ showCode = false, className }: LiveCodeProps) {
-  const liveCodeToggleButton = useRef<HTMLButtonElement>(null);
-  const live = useContext(LiveContext);
-
-  const liveOnChange = live.onChange;
-  const [localCopy, setLocalCopy] = useState<string>(live.code);
-  const [isCodeVisible, toggleIsCodeVisible] = useState(showCode);
-
-  const copyLiveCode = useCallback(() => {
-    copy(localCopy);
-  }, [localCopy]);
-
-  const handleChange = useCallback(
-    (code: string) => {
-      liveOnChange(code);
-      setLocalCopy(code);
-    },
-    [liveOnChange],
-  );
-
-  const id = useId();
-  const codeId = `live-code-${id}`;
-
-  const onLiveEditorContainerKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (event.code === 'Escape') {
-        toggleIsCodeVisible(state => !state);
-        liveCodeToggleButton.current?.focus();
-      }
-    },
-    [toggleIsCodeVisible],
-  );
-
-  return (
-    <div className={clsx('max-w-5xl overflow-hidden rounded-md border border-muted-50 bg-white p-4 pb-0', className)}>
-      <div className="relative -mx-4 -mt-4 border-muted-50 p-4">
-        {live.error ? (
-          <div className="flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90">
-            <AlertIcon />
-            {live.error}
-          </div>
-        ) : (
-          <LivePreview aria-label="Rendered code snippet example" />
-        )}
-        <div className="absolute right-0 top-0 flex items-center justify-center rounded bg-white/50">
-          <button
-            className="typography-body-10 flex items-center gap-1 p-1 pr-2 opacity-50 transition-opacity hover:opacity-100"
-            ref={liveCodeToggleButton}
-            onClick={() => toggleIsCodeVisible(state => !state)}
-            aria-controls={codeId}
-          >
-            <>
-              <BracketIcon width="14px" />
-              {isCodeVisible ? 'Hide code' : 'Show code'}
-            </>
-          </button>
-        </div>
-      </div>
-      <div
-        id={codeId}
-        className={clsx({ hidden: !isCodeVisible, block: isCodeVisible }, 'relative -mx-4 border-t border-muted-50')}
-        onKeyDown={onLiveEditorContainerKeyDown}
-      >
-        <button
-          onClick={copyLiveCode}
-          className="typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100"
-        >
-          Copy code
-        </button>
-        <LiveEditor
-          tabMode="focus"
-          aria-label="Live code editor, press the escape key to leave the editor"
-          theme={themes.shadesOfPurple}
-          code={live.code}
-          language={live.language}
-          disabled={live.disabled}
-          onChange={handleChange}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/docs/src/components/code/components/live-code/live-code.types.ts b/apps/docs/src/components/code/components/live-code/live-code.types.ts
deleted file mode 100644
index 9cdb285f2..000000000
--- a/apps/docs/src/components/code/components/live-code/live-code.types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type LiveCodeProps = { className?: string; showCode?: boolean };
diff --git a/apps/docs/src/components/code/index.ts b/apps/docs/src/components/code/index.ts
deleted file mode 100644
index 8ebdd1368..000000000
--- a/apps/docs/src/components/code/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './code.component';
diff --git a/apps/docs/src/components/component-blocks/component-blocks.tsx b/apps/docs/src/components/component-blocks/component-blocks.tsx
deleted file mode 100644
index 24a8ee878..000000000
--- a/apps/docs/src/components/component-blocks/component-blocks.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// import { component } from '@keystatic/core';
-
-export const ComponentBlocks = {
-  // EXAMPLES:
-  // testimonial: component({
-  //   label: 'Testimonial',
-  //   preview: props => (
-  //     <Testimonial
-  //       quote={props.fields.quote.value}
-  //       author={props.fields.author.value}
-  //       workplaceOrSocial={props.fields.workplaceOrSocial.value}
-  //       socialLink={props.fields.socialLink.value || ''}
-  //     />
-  //   ),
-  //   schema: {
-  //     quote: fields.text({
-  //       label: 'Quote',
-  //       multiline: true,
-  //     }),
-  //     author: fields.text({
-  //       label: 'Author',
-  //     }),
-  //     workplaceOrSocial: fields.text({
-  //       label: 'Workplace or Social account name',
-  //     }),
-  //     socialLink: fields.url({
-  //       label: 'Social media link',
-  //     }),
-  //   },
-  // }),
-};
diff --git a/apps/docs/src/components/document-renderer/components/code/code.component.tsx b/apps/docs/src/components/document-renderer/components/code/code.component.tsx
deleted file mode 100644
index e5f365657..000000000
--- a/apps/docs/src/components/document-renderer/components/code/code.component.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Code as CodeComponent } from '../../../code/code.component';
-
-import { type CodeProps } from './code.types';
-
-export const Code: CodeProps = ({ children }) => {
-  return (
-    <CodeComponent className="my-3" live>
-      {children as ReactNode}
-    </CodeComponent>
-  );
-};
diff --git a/apps/docs/src/components/document-renderer/components/code/code.types.ts b/apps/docs/src/components/document-renderer/components/code/code.types.ts
deleted file mode 100644
index 58ce24007..000000000
--- a/apps/docs/src/components/document-renderer/components/code/code.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { DocumentRendererProps } from '@keystatic/core/renderer';
-
-export type CodeProps = Required<Required<DocumentRendererProps>['renderers']>['block']['code'];
diff --git a/apps/docs/src/components/document-renderer/components/code/index.ts b/apps/docs/src/components/document-renderer/components/code/index.ts
deleted file mode 100644
index 0d414336a..000000000
--- a/apps/docs/src/components/document-renderer/components/code/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './code.component';
-export * from './code.types';
diff --git a/apps/docs/src/components/document-renderer/components/divider/divider.component.tsx b/apps/docs/src/components/document-renderer/components/divider/divider.component.tsx
deleted file mode 100644
index b44288243..000000000
--- a/apps/docs/src/components/document-renderer/components/divider/divider.component.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { type DividerProps } from './divider.types';
-
-export const Divider: DividerProps = () => {
-  return <hr className="my-5 border-t border-t-background" />;
-};
diff --git a/apps/docs/src/components/document-renderer/components/divider/divider.types.ts b/apps/docs/src/components/document-renderer/components/divider/divider.types.ts
deleted file mode 100644
index 2f7908023..000000000
--- a/apps/docs/src/components/document-renderer/components/divider/divider.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { DocumentRendererProps } from '@keystatic/core/renderer';
-
-export type DividerProps = Required<Required<DocumentRendererProps>['renderers']>['block']['divider'];
diff --git a/apps/docs/src/components/document-renderer/components/divider/index.ts b/apps/docs/src/components/document-renderer/components/divider/index.ts
deleted file mode 100644
index 84b064ad2..000000000
--- a/apps/docs/src/components/document-renderer/components/divider/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './divider.component';
-export * from './divider.types';
diff --git a/apps/docs/src/components/document-renderer/components/heading/heading.component.tsx b/apps/docs/src/components/document-renderer/components/heading/heading.component.tsx
deleted file mode 100644
index 29fae8690..000000000
--- a/apps/docs/src/components/document-renderer/components/heading/heading.component.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ReactNode, useMemo } from 'react';
-
-import { styles } from './heading.style';
-import { type HeadingProps } from './heading.types';
-
-export const Heading: HeadingProps = ({ children, level, textAlign }) => {
-  const Tag = useMemo(() => `h${level}` as keyof JSX.IntrinsicElements, [level]);
-  return <Tag className={styles({ textAlign, level })}>{children as ReactNode}</Tag>;
-};
diff --git a/apps/docs/src/components/document-renderer/components/heading/heading.style.ts b/apps/docs/src/components/document-renderer/components/heading/heading.style.ts
deleted file mode 100644
index c98943c2a..000000000
--- a/apps/docs/src/components/document-renderer/components/heading/heading.style.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv({
-  base: 'mb-3',
-  variants: {
-    textAlign: {
-      center: 'text-center',
-      end: 'text-right',
-    },
-    level: {
-      1: 'typography-body-5',
-      2: 'typography-body-6',
-      3: 'typography-body-7',
-      4: 'typography-body-8',
-      5: 'typography-body-9',
-      6: 'typography-body-10',
-    },
-  },
-});
diff --git a/apps/docs/src/components/document-renderer/components/heading/heading.types.ts b/apps/docs/src/components/document-renderer/components/heading/heading.types.ts
deleted file mode 100644
index dc5152bd5..000000000
--- a/apps/docs/src/components/document-renderer/components/heading/heading.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { DocumentRendererProps } from '@keystatic/core/renderer';
-
-export type HeadingProps = Required<Required<DocumentRendererProps>['renderers']>['block']['heading'];
diff --git a/apps/docs/src/components/document-renderer/components/heading/index.ts b/apps/docs/src/components/document-renderer/components/heading/index.ts
deleted file mode 100644
index f06103070..000000000
--- a/apps/docs/src/components/document-renderer/components/heading/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heading.component';
-export * from './heading.types';
diff --git a/apps/docs/src/components/document-renderer/components/index.ts b/apps/docs/src/components/document-renderer/components/index.ts
deleted file mode 100644
index 5d909c846..000000000
--- a/apps/docs/src/components/document-renderer/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './paragraph';
-export * from './code';
-export * from './heading';
-export * from './divider';
diff --git a/apps/docs/src/components/document-renderer/components/paragraph/index.ts b/apps/docs/src/components/document-renderer/components/paragraph/index.ts
deleted file mode 100644
index ff8bb5882..000000000
--- a/apps/docs/src/components/document-renderer/components/paragraph/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './paragraph.component';
-export * from './paragraph.types';
diff --git a/apps/docs/src/components/document-renderer/components/paragraph/paragraph.component.tsx b/apps/docs/src/components/document-renderer/components/paragraph/paragraph.component.tsx
deleted file mode 100644
index c6cdeab1d..000000000
--- a/apps/docs/src/components/document-renderer/components/paragraph/paragraph.component.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-
-import { styles } from './paragraph.style';
-import { type ParagraphProps } from './paragraph.types';
-
-export const Paragraph: ParagraphProps = ({ children, textAlign }) => {
-  return <p className={styles({ textAlign })}>{children as ReactNode}</p>;
-};
diff --git a/apps/docs/src/components/document-renderer/components/paragraph/paragraph.style.ts b/apps/docs/src/components/document-renderer/components/paragraph/paragraph.style.ts
deleted file mode 100644
index 049755117..000000000
--- a/apps/docs/src/components/document-renderer/components/paragraph/paragraph.style.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv({
-  base: 'typography-body-10 my-3',
-  variants: {
-    textAlign: {
-      center: 'text-center',
-      end: 'text-right',
-    },
-  },
-});
diff --git a/apps/docs/src/components/document-renderer/components/paragraph/paragraph.types.ts b/apps/docs/src/components/document-renderer/components/paragraph/paragraph.types.ts
deleted file mode 100644
index 4f8f0a931..000000000
--- a/apps/docs/src/components/document-renderer/components/paragraph/paragraph.types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { DocumentRendererProps } from '@keystatic/core/renderer';
-
-export type ParagraphProps = Required<Required<DocumentRendererProps>['renderers']>['block']['paragraph'];
diff --git a/apps/docs/src/components/document-renderer/document-renderer.tsx b/apps/docs/src/components/document-renderer/document-renderer.tsx
deleted file mode 100644
index 7f2301608..000000000
--- a/apps/docs/src/components/document-renderer/document-renderer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DocumentRendererProps } from '@keystatic/core/renderer';
-
-import { Code, Divider, Heading, Paragraph } from './components';
-
-export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] = {
-  block: {
-    paragraph: Paragraph,
-    code: Code,
-    divider: Divider,
-    heading: Heading,
-  },
-};
diff --git a/apps/docs/src/components/icons/bracket-icon.tsx b/apps/docs/src/components/icons/bracket-icon.tsx
deleted file mode 100644
index 874b56e80..000000000
--- a/apps/docs/src/components/icons/bracket-icon.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { SVGProps } from 'react';
-
-export function BracketIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg {...props} viewBox="0 0 1024 1024">
-      <path
-        xmlns="http://www.w3.org/2000/svg"
-        d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62zm529.545-377.146c24.911 9.066 37.755 36.61 28.688 61.522L436.03 861.068c-9.067 24.911-36.611 37.755-61.522 28.688-24.911-9.066-37.755-36.61-28.688-61.522l242.15-665.302c9.067-24.911 36.611-37.755 61.522-28.688z"
-        fillRule="evenodd"
-        opacity=".78"
-      />
-    </svg>
-  );
-}
diff --git a/apps/docs/src/components/layout/header/header.component.tsx b/apps/docs/src/components/layout/header/header.component.tsx
deleted file mode 100644
index 35a344178..000000000
--- a/apps/docs/src/components/layout/header/header.component.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { HamburgerMenuIcon } from '@westpac/ui/icon';
-import React, { useEffect, useState } from 'react';
-
-import { styles as headerStyles } from './header.styles';
-import { HeaderProps } from './header.types';
-
-export function Header({ brand, className, title, ...props }: HeaderProps) {
-  const [fixed, setFixed] = useState(false);
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleScroll = () => {
-        const isFixed = window.scrollY >= 260;
-        setFixed(isFixed);
-      };
-      window.addEventListener('scroll', handleScroll);
-      return () => window.removeEventListener('scroll', handleScroll);
-    }
-  }, []);
-  const styles = headerStyles({ brand, fixed, className });
-
-  return (
-    <header className={styles.base()}>
-      <button className={styles.hamburgerButton()} onClick={props.onMenuButtonClick}>
-        <HamburgerMenuIcon color="white" className="mx-auto" />
-      </button>
-      <h2 className={styles.title()}>{title}</h2>
-    </header>
-  );
-}
diff --git a/apps/docs/src/components/layout/header/header.styles.ts b/apps/docs/src/components/layout/header/header.styles.ts
deleted file mode 100644
index b2e2ff837..000000000
--- a/apps/docs/src/components/layout/header/header.styles.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { tv } from 'tailwind-variants';
-// linear-gradient(to right, rgb(0, 47, 108) 0%, rgb(0, 70, 142) 50%, rgb(0, 173, 189) 100%)
-export const styles = tv(
-  {
-    slots: {
-      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-3 py-2 transition-colors md:top-[-260px] md:h-[20rem] md:items-end',
-      hamburgerButton: 'h-6 w-6 md:hidden',
-      title: 'typography-brand-8 font-bold text-white',
-    },
-    variants: {
-      fixed: {
-        true: {
-          base: 'items-center',
-          title: 'pb-1',
-        },
-        false: {
-          base: '',
-          title: 'p-0 md:typography-brand-2 md:p-3',
-        },
-      },
-      brand: {
-        btfg: {},
-        wbg: {},
-        bom: {},
-        bsa: {
-          base: 'bg-[url("/imgs/backgrounds/bsa-background.svg"),_linear-gradient(to_right,#002f6c,#00adbd)] bg-cover',
-        },
-        rams: {
-          base: 'bg-heading',
-        },
-        stg: {
-          base: 'bg-heading bg-[url("/imgs/backgrounds/stg-background.svg")] bg-cover',
-        },
-        wbc: {
-          base: 'bg-primary bg-[url("/imgs/backgrounds/wbc-background.svg")] bg-right-bottom bg-no-repeat',
-        },
-      },
-    },
-    compoundSlots: [
-      // {
-      //   slots: ['itemHeader'],
-      //   color: 'primary',
-      //   isOpen: true,
-      //   className: 'border-l-primary',
-      // },
-    ],
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);
diff --git a/apps/docs/src/components/layout/header/header.types.ts b/apps/docs/src/components/layout/header/header.types.ts
deleted file mode 100644
index 2cb9b529e..000000000
--- a/apps/docs/src/components/layout/header/header.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Credits: https://github.com/jmarioste/next-responsive-sidebar-tailwind
-import { type BrandKey } from '@westpac/ui/tailwind';
-import { HTMLAttributes, ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
-
-import { styles } from './header.styles';
-
-export type HeaderProps = {
-  brand: BrandKey;
-  onMenuButtonClick(): void;
-  title?: ReactNode;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<HTMLElement>;
diff --git a/apps/docs/src/components/layout/header/index.ts b/apps/docs/src/components/layout/header/index.ts
deleted file mode 100644
index 170688502..000000000
--- a/apps/docs/src/components/layout/header/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './header.component';
-export { type HeaderProps } from './header.types';
diff --git a/apps/docs/src/components/layout/layout.tsx b/apps/docs/src/components/layout/layout.tsx
deleted file mode 100644
index baa576164..000000000
--- a/apps/docs/src/components/layout/layout.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { type BrandKey } from '@westpac/ui/tailwind';
-import React, { PropsWithChildren, useState } from 'react';
-
-import { Header, HeaderProps } from './header';
-import { DEFAULT_NAV_ITEMS } from './nav-items';
-import { Sidebar } from './sidebar';
-
-export function Layout({
-  brand,
-  children,
-  headerProps,
-  ...props
-}: PropsWithChildren & { brand: BrandKey; headerProps?: Partial<HeaderProps> }) {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  return (
-    <div className="flex min-h-screen flex-col" data-theme={brand} {...props}>
-      <Sidebar navItems={DEFAULT_NAV_ITEMS} open={sidebarOpen} setOpen={setSidebarOpen} brand={brand} />
-      <div className="flex flex-1 flex-col md:ml-[250px]">
-        <Header {...headerProps} brand={brand} onMenuButtonClick={() => setSidebarOpen(prev => !prev)} />
-        <div className="flex flex-1 flex-col p-5">{children}</div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/docs/src/components/layout/nav-items.tsx b/apps/docs/src/components/layout/nav-items.tsx
deleted file mode 100644
index 1e44570b8..000000000
--- a/apps/docs/src/components/layout/nav-items.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NavItem } from './sidebar';
-
-export const DEFAULT_NAV_ITEMS: NavItem[] = [
-  { href: '/', label: 'Home' },
-  {
-    label: 'Components',
-    children: [
-      { href: '/components/button', label: 'Button' },
-      { href: '/components/typography', label: 'Typography' },
-      { href: '/components/colors', label: 'Colors' },
-      { href: '/components/input', label: 'Input' },
-      { href: '/components/select', label: 'Select' },
-      { href: '/components/textarea', label: 'Textarea' },
-      { href: '/components/breadcrumb', label: 'Breadcrumb' },
-      { href: '/components/alert', label: 'Alert' },
-      { href: '/components/radio-group', label: 'Radio Group' },
-      { href: '/components/tabs', label: 'Tabs' },
-      { href: '/components/accordion', label: 'Accordion' },
-      { href: '/components/icons', label: 'Icons' },
-      { href: '/components/checkbox-group', label: 'Checkbox Group' },
-      { href: '/components/button-group', label: 'Button Group' },
-      { href: '/components/switch', label: 'Switch' },
-      { href: '/components/progress-bar', label: 'Progress Bar' },
-      { href: '/components/link', label: 'Link' },
-      { href: '/components/table', label: 'Table' },
-      { href: '/components/collapsible', label: 'Collapsible' },
-      { href: '/components/date-picker', label: 'Date Picker' },
-      { href: '/components/list', label: 'List' },
-      { href: '/components/flexi-cell', label: 'Flexi Cell' },
-      { href: '/components/autocomplete', label: 'Autocomplete' },
-      { href: '/components/panel', label: 'Panel' },
-      { href: '/components/button-dropdown', label: 'Button Dropdown' },
-      { href: '/components/input-field', label: 'Input Field' },
-      { href: '/components/modal', label: 'Modal' },
-      { href: '/components/pagination', label: 'Pagination' },
-      { href: '/components/popover', label: 'Popover' },
-      { href: '/components/progress-rope', label: 'Progress Rope' },
-      { href: '/components/selector', label: 'Selector' },
-      { href: '/components/compacta', label: 'Compacta' },
-      { href: '/components/repeater', label: 'Repeater' },
-    ],
-  },
-];
diff --git a/apps/docs/src/components/layout/sidebar.tsx b/apps/docs/src/components/layout/sidebar.tsx
deleted file mode 100644
index f2471b06d..000000000
--- a/apps/docs/src/components/layout/sidebar.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { RAMSLogoIcon, WBCLogoIcon, WBGLogoIcon } from '@westpac/ui/icon';
-import { clsx } from 'clsx';
-import { useRouter } from 'next/router';
-import React, { Key, useCallback, useRef } from 'react';
-import { useOnClickOutside } from 'usehooks-ts';
-
-import { List } from '../list';
-import { Logo } from '../logo';
-import { SidebarSelect } from '../sidebar-select';
-
-const BANK_OPTIONS = [
-  {
-    key: 'wbc',
-    label: 'Westpac',
-    icon: <WBCLogoIcon className="h-3 w-7" />,
-  },
-  {
-    key: 'stg',
-    label: 'St. George',
-    icon: <WBCLogoIcon className="h-3 w-7" />,
-  },
-  {
-    key: 'bom',
-    label: 'Bank of Melbourne',
-    icon: <WBCLogoIcon className="h-3 w-7" />,
-  },
-  {
-    key: 'bsa',
-    label: 'Bank of SA',
-    icon: <WBCLogoIcon className="h-3 w-7" />,
-  },
-  {
-    key: 'wbg',
-    label: 'Westpac Group',
-    icon: <WBGLogoIcon className="h-3 w-7" />,
-  },
-  {
-    key: 'rams',
-    label: 'RAMS',
-    icon: <RAMSLogoIcon className="h-3 w-7" />,
-  },
-];
-
-// Credits: https://github.com/jmarioste/next-responsive-sidebar-tailwind
-
-// define a NavItem prop
-export type NavItem = {
-  children?: NavItem[];
-  href?: string;
-  icon?: React.ReactNode;
-  label: string;
-};
-// add NavItem prop to component prop
-type SidebarProps = {
-  brand: string;
-  navItems: NavItem[];
-  open: boolean;
-  setOpen(open: boolean): void;
-};
-export function Sidebar({ open, navItems, setOpen, brand }: SidebarProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  useOnClickOutside(ref, () => {
-    setOpen(false);
-  });
-
-  const router = useRouter();
-  const handleChange = useCallback(
-    async (key: Key) => {
-      router.push({
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          brand: key,
-        },
-      });
-    },
-    [router],
-  );
-
-  return (
-    <div
-      className={clsx(
-        'fixed top-0 z-[60] flex h-full w-[250px] grow-0 flex-col border-r-0 bg-white text-text shadow-2xl transition-transform ease-in-out md:bottom-0 md:h-auto md:-translate-x-0 md:border-r md:border-r-border md:shadow-none',
-        {
-          '-translate-x-full': !open, //hide sidebar to the left when closed
-        },
-      )}
-      ref={ref}
-    >
-      <div className="p-3">
-        <Logo brand={brand} className="h-6 w-2/3" />
-      </div>
-      <div className="border-b border-b-border">
-        <SidebarSelect selectedKey={brand} onSelectionChange={handleChange}>
-          {BANK_OPTIONS.map(({ icon, key, label }) => (
-            <SidebarSelect.Option key={key} textValue={label}>
-              <div className="flex w-full items-center justify-between">
-                <span className="typography-body-10">{label}</span>
-                {icon}
-              </div>
-            </SidebarSelect.Option>
-          ))}
-        </SidebarSelect>
-      </div>
-      <nav className="flex-1 overflow-auto">
-        <List items={navItems} brand={brand} />
-      </nav>
-    </div>
-  );
-}
diff --git a/apps/docs/src/components/list/index.ts b/apps/docs/src/components/list/index.ts
deleted file mode 100644
index 4f800bbe0..000000000
--- a/apps/docs/src/components/list/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './list.component';
-export * from './list.types';
diff --git a/apps/docs/src/components/list/list.component.tsx b/apps/docs/src/components/list/list.component.tsx
deleted file mode 100644
index 5f4465b0f..000000000
--- a/apps/docs/src/components/list/list.component.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Accordion } from '@westpac/ui';
-import { clsx } from 'clsx';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-
-import { getPathWithoutGetParameters } from '../../utils/url';
-import { NavItem } from '../layout/sidebar';
-
-import { ListProps } from './list.types';
-
-type ListItemProps = {
-  brand: ListProps['brand'];
-  item: NavItem;
-};
-export const ListItem = ({ item, brand }: ListItemProps) => {
-  const router = useRouter();
-  const pathWithourGetParams = getPathWithoutGetParameters(router.asPath);
-  const isHighlighted =
-    item.href === '/' ? pathWithourGetParams === '/' : pathWithourGetParams.indexOf(item.href || '') > -1;
-  return (
-    <Link
-      href={brand ? `${item.href}?brand=${brand}` : item.href}
-      className={clsx(
-        'typography-body-10 flex items-center gap-4 rounded-md px-3 py-2 transition-colors duration-300 hover:bg-light focus:outline-focus',
-        {
-          'text-link': isHighlighted,
-          'text-text': !isHighlighted,
-        },
-      )}
-    >
-      {!!item.icon && item.icon} {item.label}{' '}
-    </Link>
-  );
-};
-
-export const List = ({ brand, items }: ListProps) => {
-  return (
-    <>
-      {items.map(item =>
-        item.children?.length && !item.href ? (
-          <Accordion look="material" key={item.label}>
-            <Accordion.Item
-              key={item.href}
-              title={<div className="typography-body-10">{item.label}</div>}
-              textValue={item.label}
-            >
-              <div className="-m-3 pl-3">
-                <List items={item.children} brand={brand} />
-              </div>
-            </Accordion.Item>
-          </Accordion>
-        ) : (
-          <ListItem item={item} brand={brand} key={item.label} />
-        ),
-      )}
-    </>
-  );
-};
diff --git a/apps/docs/src/components/list/list.types.ts b/apps/docs/src/components/list/list.types.ts
deleted file mode 100644
index 9de7ac173..000000000
--- a/apps/docs/src/components/list/list.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type IconProps } from '@westpac/ui';
-
-import { NavItem } from '../layout/sidebar';
-
-export type ListProps = {
-  brand?: string;
-  items: NavItem[];
-} & IconProps;
diff --git a/apps/docs/src/components/logo/index.ts b/apps/docs/src/components/logo/index.ts
deleted file mode 100644
index 9e728ae12..000000000
--- a/apps/docs/src/components/logo/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './logo.component';
-export * from './logo.types';
diff --git a/apps/docs/src/components/logo/logo.component.tsx b/apps/docs/src/components/logo/logo.component.tsx
deleted file mode 100644
index e9f32b8ce..000000000
--- a/apps/docs/src/components/logo/logo.component.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { BOMLogoIcon, BSALogoIcon, RAMSLogoIcon, STGLogoIcon, WBCLogoIcon, WBGLogoIcon } from '@westpac/ui/icon';
-
-import { LogoProps } from './logo.types';
-
-export const Logo = ({ brand, ...props }: LogoProps) => {
-  switch (brand) {
-    case 'bom':
-      return <BOMLogoIcon {...props} />;
-    case 'bsa':
-      return <BSALogoIcon {...props} />;
-    case 'rams':
-      return <RAMSLogoIcon {...props} />;
-    case 'stg':
-      return <STGLogoIcon {...props} />;
-    case 'wbg':
-      return <WBGLogoIcon {...props} />;
-    case 'wbc':
-    default:
-      return <WBCLogoIcon {...props} />;
-  }
-};
diff --git a/apps/docs/src/components/logo/logo.types.ts b/apps/docs/src/components/logo/logo.types.ts
deleted file mode 100644
index eb9468edd..000000000
--- a/apps/docs/src/components/logo/logo.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type IconProps } from '@westpac/ui';
-import { type BrandKey } from '@westpac/ui/tailwind';
-
-export type LogoProps = {
-  brand?: BrandKey;
-} & IconProps;
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/index.ts b/apps/docs/src/components/sidebar-select/components/list-box/components/index.ts
deleted file mode 100644
index 8047e5ed5..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './list-box-option';
-export * from './list-box-section';
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/index.ts b/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/index.ts
deleted file mode 100644
index d7de38a6d..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Option } from './list-box-option.component';
-export { type OptionProps } from './list-box-option.types';
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.component.tsx b/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.component.tsx
deleted file mode 100644
index 858726d05..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.component.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { type Node } from '@react-types/shared';
-import * as React from 'react';
-import { useOption } from 'react-aria';
-import { type ListState } from 'react-stately';
-
-import { styles } from './list-box-option.styles';
-
-interface OptionProps<T = any> {
-  item: Node<T>;
-  state: ListState<T>;
-}
-
-export function Option({ item, state }: OptionProps) {
-  const ref = React.useRef<HTMLLIElement>(null);
-
-  const { optionProps, isDisabled, isSelected, isFocused } = useOption(
-    {
-      key: item.key,
-    },
-    state,
-    ref,
-  );
-
-  return (
-    <li {...optionProps} ref={ref} className={styles({ isFocused, isSelected, isDisabled })}>
-      {item.rendered}
-    </li>
-  );
-}
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.styles.ts b/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.styles.ts
deleted file mode 100644
index 00827f5c7..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.styles.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 transition-colors first:border-t-0 hover:bg-light focus:bg-light',
-    variants: {
-      isFocused: {
-        true: 'bg-light',
-      },
-      isSelected: {
-        true: 'text-primary',
-      },
-      isDisabled: {
-        true: 'text-muted',
-      },
-    },
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.types.ts b/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.types.ts
deleted file mode 100644
index 42f199e51..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-option/list-box-option.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { type Node } from '@react-types/shared';
-import { type ListState } from 'react-stately';
-
-export type OptionProps<T = any> = {
-  item: Node<T>;
-  state: ListState<T>;
-};
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/index.ts b/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/index.ts
deleted file mode 100644
index ab0dd2eee..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ListBoxSection } from './list-box-section.component';
-export { type ListBoxSectionProps } from './list-box-section.types';
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/list-box-section.component.tsx b/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/list-box-section.component.tsx
deleted file mode 100644
index 1fb73d928..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/list-box-section.component.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { useListBoxSection } from 'react-aria';
-
-import { Option } from '../list-box-option';
-
-import { type ListBoxSectionProps } from './list-box-section.types';
-
-export function ListBoxSection({ section, state }: ListBoxSectionProps) {
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    'aria-label': section['aria-label'],
-  });
-
-  return (
-    <>
-      <li {...itemProps} className="pt-2">
-        {section.rendered && (
-          <span {...headingProps} className="mx-3 text-xs font-bold uppercase text-text">
-            {section.rendered}
-          </span>
-        )}
-
-        <ul {...groupProps}>
-          {[...section.childNodes].map(node => (
-            <Option key={node.key} item={node} state={state} />
-          ))}
-        </ul>
-      </li>
-    </>
-  );
-}
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/list-box-section.types.ts b/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/list-box-section.types.ts
deleted file mode 100644
index 5588e405f..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/components/list-box-section/list-box-section.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { type Node } from '@react-types/shared';
-import { ListState } from 'react-stately';
-
-export type ListBoxSectionProps<T = any> = {
-  section: Node<T>;
-  state: ListState<T>;
-};
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/index.ts b/apps/docs/src/components/sidebar-select/components/list-box/index.ts
deleted file mode 100644
index a3a959bd5..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ListBox } from './list-box.component';
-export { type ListBoxProps } from './list-box.types';
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/list-box.component.tsx b/apps/docs/src/components/sidebar-select/components/list-box/list-box.component.tsx
deleted file mode 100644
index 58bd16ef1..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/list-box.component.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { useListBox } from 'react-aria';
-
-import { ListBoxSection, Option } from './components';
-import { ListBoxProps } from './list-box.types';
-
-export function ListBox(props: ListBoxProps) {
-  const ref = React.useRef<HTMLUListElement>(null);
-
-  const { listBoxRef = ref, state } = props;
-
-  const { listBoxProps } = useListBox(props, state, listBoxRef);
-
-  return (
-    <ul {...listBoxProps} ref={listBoxRef} className="max-h-[400px] w-full overflow-auto outline-none">
-      {[...state.collection].map(item =>
-        item.type === 'section' ? (
-          <ListBoxSection key={item.key} section={item} state={state} />
-        ) : (
-          // eslint-disable-next-line react/jsx-no-undef
-          <Option key={item.key} item={item} state={state} />
-        ),
-      )}
-    </ul>
-  );
-}
diff --git a/apps/docs/src/components/sidebar-select/components/list-box/list-box.types.ts b/apps/docs/src/components/sidebar-select/components/list-box/list-box.types.ts
deleted file mode 100644
index 6368b0432..000000000
--- a/apps/docs/src/components/sidebar-select/components/list-box/list-box.types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { AriaListBoxOptions } from 'react-aria';
-import { ListState } from 'react-stately';
-
-export type ListBoxProps<T = any> = AriaListBoxOptions<T> & {
-  /**
-   * List box ref from useRef
-   */
-  listBoxRef?: React.RefObject<HTMLUListElement>;
-  /**
-   * List state
-   */
-  state: ListState<T>;
-} & HTMLAttributes<Element>;
diff --git a/apps/docs/src/components/sidebar-select/components/popover/index.ts b/apps/docs/src/components/sidebar-select/components/popover/index.ts
deleted file mode 100644
index 26b0dab9c..000000000
--- a/apps/docs/src/components/sidebar-select/components/popover/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Popover } from './popover.component';
-export { type PopoverProps } from './popover.types';
diff --git a/apps/docs/src/components/sidebar-select/components/popover/popover.component.tsx b/apps/docs/src/components/sidebar-select/components/popover/popover.component.tsx
deleted file mode 100644
index 8cfcc7823..000000000
--- a/apps/docs/src/components/sidebar-select/components/popover/popover.component.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { clsx } from 'clsx';
-import * as React from 'react';
-import { DismissButton, Overlay, usePopover } from 'react-aria';
-
-import { PopoverProps } from './popover.types';
-
-export function Popover(props: PopoverProps) {
-  const ref = React.useRef<HTMLDivElement>(null);
-  const { popoverRef = ref, state, children, className, isNonModal } = props;
-  const { popoverProps, underlayProps } = usePopover(
-    {
-      ...props,
-      popoverRef,
-    },
-    state,
-  );
-
-  return (
-    <Overlay>
-      {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
-
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        className={clsx('z-10 border border-border bg-white shadow-lg', className)}
-      >
-        {!isNonModal && <DismissButton onDismiss={state.close} />}
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}
diff --git a/apps/docs/src/components/sidebar-select/components/popover/popover.types.ts b/apps/docs/src/components/sidebar-select/components/popover/popover.types.ts
deleted file mode 100644
index afd7476e0..000000000
--- a/apps/docs/src/components/sidebar-select/components/popover/popover.types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { type AriaPopoverProps } from 'react-aria';
-import { type OverlayTriggerState } from 'react-stately';
-
-export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
-  children: ReactNode;
-  className?: string;
-  popoverRef?: React.RefObject<HTMLDivElement>;
-  state: OverlayTriggerState;
-} & HTMLAttributes<Element>;
diff --git a/apps/docs/src/components/sidebar-select/index.ts b/apps/docs/src/components/sidebar-select/index.ts
deleted file mode 100644
index 8b24b3142..000000000
--- a/apps/docs/src/components/sidebar-select/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { SidebarSelect } from './sidebar-select.component';
-export { type SidebarSelectProps } from './sidebar-select.types';
diff --git a/apps/docs/src/components/sidebar-select/sidebar-select.component.tsx b/apps/docs/src/components/sidebar-select/sidebar-select.component.tsx
deleted file mode 100644
index 3d661b103..000000000
--- a/apps/docs/src/components/sidebar-select/sidebar-select.component.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ArrowRightIcon } from '@westpac/ui/icon';
-import React, { useRef } from 'react';
-import { HiddenSelect, mergeProps, useButton, useFocusRing, useSelect } from 'react-aria';
-import { Item, useSelectState } from 'react-stately';
-
-import { ListBox } from './components/list-box';
-import { Popover } from './components/popover';
-import { styles as sidebarSelectStyles } from './sidebar-select.styles';
-import { type SidebarSelectProps } from './sidebar-select.types';
-
-export function SidebarSelect(props: SidebarSelectProps) {
-  // Create state based on the incoming props
-  const state = useSelectState(props);
-
-  // Get props for child elements from useSelect
-  const ref = useRef(null);
-
-  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, ref);
-  // Get props for the button based on the trigger props from useSelect
-
-  const { buttonProps } = useButton(triggerProps, ref);
-
-  const { focusProps, isFocusVisible } = useFocusRing();
-  const styles = sidebarSelectStyles({ isFocusVisible, isOpen: state.isOpen });
-  return (
-    <div className={styles.base()}>
-      <div {...labelProps} className={styles.label()}>
-        {props.label}
-      </div>
-
-      <HiddenSelect state={state} triggerRef={ref} label={props.label} name={props.name} />
-
-      <button {...mergeProps(buttonProps, focusProps)} ref={ref} className={styles.button()}>
-        <div className={styles.textWrapper()}>
-          <div className="w-full" {...valueProps}>
-            {state.selectedItem ? state.selectedItem.rendered : 'Select an option'}
-          </div>
-        </div>
-        <div aria-hidden="true" className={styles.iconWrapper()}>
-          <ArrowRightIcon className={styles.icon()} />
-        </div>
-        {/* <SelectorIcon className={`h-5 w-5 ${isFocusVisible ? 'text-pink-500' : 'text-gray-500'}`} /> */}
-      </button>
-
-      {state.isOpen && (
-        <Popover state={state} triggerRef={ref} placement="bottom start" className={styles.popover()}>
-          <ListBox {...menuProps} state={state} />
-        </Popover>
-      )}
-    </div>
-  );
-}
-SidebarSelect.Option = Item;
diff --git a/apps/docs/src/components/sidebar-select/sidebar-select.styles.ts b/apps/docs/src/components/sidebar-select/sidebar-select.styles.ts
deleted file mode 100644
index d9c470f32..000000000
--- a/apps/docs/src/components/sidebar-select/sidebar-select.styles.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    slots: {
-      base: 'relative flex w-full flex-col',
-      label: 'block cursor-default text-left text-sm font-medium text-text',
-      button:
-        'relative flex cursor-pointer flex-row items-stretch overflow-hidden shadow-sm outline-none focus:focus-outline',
-      // TODO: this is a workaround to align, but need to find a better way.
-      popover: 'ml-[-12px] w-[250px]',
-      icon: 'text-primary transition-transform',
-      iconWrapper: 'border-l border-l-border px-2 py-3',
-      textWrapper: 'flex flex-1 items-center p-3',
-    },
-    variants: {
-      isFocusVisible: {
-        true: {
-          base: '',
-        },
-        false: {},
-      },
-      isOpen: {
-        true: {
-          icon: 'rotate-90',
-        },
-        false: {},
-      },
-    },
-    compoundSlots: [],
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);
diff --git a/apps/docs/src/components/sidebar-select/sidebar-select.types.ts b/apps/docs/src/components/sidebar-select/sidebar-select.types.ts
deleted file mode 100644
index 200c89140..000000000
--- a/apps/docs/src/components/sidebar-select/sidebar-select.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { AriaSelectProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './sidebar-select.styles.js';
-
-export type SidebarSelectProps<T = any> = VariantProps<typeof styles> & AriaSelectProps<T>;
diff --git a/apps/docs/src/components/static-code/index.ts b/apps/docs/src/components/static-code/index.ts
deleted file mode 100644
index 78591ffe0..000000000
--- a/apps/docs/src/components/static-code/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './static-code.component';
-export * from './static-code.types';
diff --git a/apps/docs/src/components/static-code/static-code.component.tsx b/apps/docs/src/components/static-code/static-code.component.tsx
deleted file mode 100644
index e7a4250d6..000000000
--- a/apps/docs/src/components/static-code/static-code.component.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button } from '@westpac/ui';
-import copy from 'clipboard-copy';
-import { Highlight } from 'prism-react-renderer';
-
-import { StaticCodeProps } from './static-code.types';
-
-export const StaticCode = ({
-  code,
-  language = '', // By default render as plain text (ie. no language)
-}: StaticCodeProps) => {
-  return (
-    <div className="relative overflow-hidden rounded-md">
-      <Highlight code={code} language={language}>
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre className={[className, 'p-2'].join(' ')} style={style}>
-            <code>
-              {tokens.map((line, lineKey) => (
-                <div key={lineKey} {...getLineProps({ line, key: lineKey })}>
-                  {line.map((token, tokenKey) => (
-                    <span key={tokenKey} {...getTokenProps({ token, key: tokenKey })} />
-                  ))}
-                </div>
-              ))}
-            </code>
-          </pre>
-        )}
-      </Highlight>
-      <Button className="absolute right-0 top-0" onClick={() => copy(code)}>
-        Copy code
-      </Button>
-    </div>
-  );
-};
diff --git a/apps/docs/src/components/static-code/static-code.types.ts b/apps/docs/src/components/static-code/static-code.types.ts
deleted file mode 100644
index 4790d3eed..000000000
--- a/apps/docs/src/components/static-code/static-code.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type StaticCodeProps = {
-  code: string;
-  language?: string;
-};
diff --git a/apps/docs/src/keystatic.config.tsx b/apps/docs/src/keystatic.config.tsx
deleted file mode 100644
index a82501702..000000000
--- a/apps/docs/src/keystatic.config.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { GitHubConfig, LocalConfig, collection, config, fields, singleton } from '@keystatic/core';
-
-import { ComponentBlocks } from './components/component-blocks/component-blocks';
-
-const storage: LocalConfig['storage'] | GitHubConfig['storage'] =
-  process.env.NODE_ENV === 'development'
-    ? { kind: 'local' }
-    : {
-        kind: 'github',
-        repo: {
-          owner: process.env.NEXT_PUBLIC_GIT_REPO_OWNER!,
-          name: process.env.NEXT_PUBLIC_GIT_REPO_SLUG!,
-        },
-      };
-
-export default config({
-  storage,
-  singletons: {
-    home: singleton({
-      label: 'Home',
-      path: 'content/pages/home/',
-      schema: {
-        heading: fields.document({
-          formatting: {
-            inlineMarks: {
-              bold: true,
-            },
-          },
-          label: 'Heading (note: text that is bolded will show up in red)',
-        }),
-      },
-    }),
-    about: singleton({
-      label: 'About',
-      path: 'content/pages/about/',
-      schema: {
-        content: fields.document({
-          formatting: true,
-          dividers: true,
-          links: true,
-          label: 'Content',
-          componentBlocks: ComponentBlocks,
-        }),
-      },
-    }),
-  },
-  collections: {
-    components: collection({
-      label: 'Components',
-      path: 'content/components/*',
-      slugField: 'name',
-      schema: {
-        name: fields.slug({
-          name: {
-            label: 'Name',
-            validation: {
-              length: {
-                min: 1,
-              },
-            },
-          },
-        }),
-        design: fields.document({
-          formatting: true,
-          dividers: true,
-          links: true,
-          label: 'Design',
-          componentBlocks: ComponentBlocks,
-        }),
-        accessibility: fields.document({
-          formatting: true,
-          dividers: true,
-          links: true,
-          label: 'Accessibility',
-          componentBlocks: ComponentBlocks,
-        }),
-        code: fields.document({
-          formatting: true,
-          dividers: true,
-          links: true,
-          label: 'Code',
-          componentBlocks: ComponentBlocks,
-        }),
-      },
-    }),
-  },
-});
diff --git a/apps/docs/src/pages/_app.page.tsx b/apps/docs/src/pages/_app.page.tsx
deleted file mode 100644
index c699cf04a..000000000
--- a/apps/docs/src/pages/_app.page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { NextPage } from 'next';
-import NextApp, { AppContext, type AppProps } from 'next/app';
-import { ReactElement, ReactNode } from 'react';
-
-import '../styles/globals.css';
-import { getGetParameters } from '../utils/url';
-
-const brandsList = ['bom', 'bsa', 'stg', 'wbc', 'wbg', 'rams'] as const;
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
-  getLayout?: (page: ReactElement, brand: string) => ReactNode;
-};
-
-type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
-  brand: (typeof brandsList)[number];
-};
-
-export default function PlaygroundApp({ Component, pageProps, brand }: AppPropsWithLayout) {
-  // Use the layout defined at the page level, if available
-  const getLayout = Component.getLayout || ((page: ReactNode) => page);
-
-  return getLayout(<Component {...pageProps} brand={brand} />, brand);
-}
-
-PlaygroundApp.getInitialProps = async (appContext: AppContext) => {
-  const ctx = await NextApp.getInitialProps(appContext);
-  const getParameters = getGetParameters(appContext.ctx.asPath || '');
-  const brandParam = getParameters.brand || appContext.ctx.query?.brand || '';
-  const brand = brandsList.find(b => b.toLowerCase() === brandParam) || 'wbc';
-  return { ...ctx, brand };
-};
diff --git a/apps/docs/src/pages/_document.page.tsx b/apps/docs/src/pages/_document.page.tsx
deleted file mode 100644
index e21f8cd80..000000000
--- a/apps/docs/src/pages/_document.page.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DocumentProps, Head, Html, Main, NextScript } from 'next/document';
-
-import { getFontFilesPerBrand } from '../utils/get-font-files-per-brand';
-
-export default function Document({ __NEXT_DATA__ }: DocumentProps) {
-  const brand = __NEXT_DATA__?.props?.brand ?? 'wbc';
-  const fontsToPreload = getFontFilesPerBrand(brand);
-  return (
-    <Html lang="en" data-theme={brand}>
-      <Head>
-        {fontsToPreload.map(({ href, type }) => (
-          <link key={href} rel="preload" href={href} as="font" type={type} crossOrigin="" />
-        ))}
-      </Head>
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}
diff --git a/apps/docs/src/pages/api/keystatic/[[...params]].api.ts b/apps/docs/src/pages/api/keystatic/[[...params]].api.ts
deleted file mode 100644
index b9a5961bd..000000000
--- a/apps/docs/src/pages/api/keystatic/[[...params]].api.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { makeAPIRouteHandler } from '@keystatic/next/api';
-
-import keystaticConfig from '../../../keystatic.config';
-
-export const config = {
-  api: {
-    bodyParser: {
-      sizeLimit: '20mb',
-    },
-    responseLimit: '20mb',
-  },
-};
-
-export default makeAPIRouteHandler({ config: keystaticConfig });
diff --git a/apps/docs/src/pages/components/[...component].page.tsx b/apps/docs/src/pages/components/[...component].page.tsx
deleted file mode 100644
index 91bf78f94..000000000
--- a/apps/docs/src/pages/components/[...component].page.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { createReader } from '@keystatic/core/reader';
-import { DocumentRenderer } from '@keystatic/core/renderer';
-import { Tabs } from '@westpac/ui';
-import { BrandKey } from '@westpac/ui/tailwind';
-import { type GetStaticPropsContext, type InferGetStaticPropsType } from 'next';
-import { useRouter } from 'next/router';
-import { Key, useCallback } from 'react';
-
-import { DOCUMENT_RENDERERS } from '../../components/document-renderer/document-renderer';
-import { Layout } from '../../components/layout/layout';
-import config from '../../keystatic.config';
-
-const TABS = [
-  { label: 'Design', key: 'design' },
-  { label: 'Accessibility', key: 'accessibility' },
-  { label: 'Code', key: 'code' },
-];
-export async function getStaticPaths() {
-  const reader = createReader(process.cwd(), config);
-  // Get collection of all posts
-  const componentSlugs = await reader.collections.components.list();
-  return {
-    // Generate paths for each post
-    paths: componentSlugs.reduce(
-      (acc: { params: { component: string[] } }[], slug: string) => [
-        ...acc,
-        {
-          params: { component: [slug] },
-        },
-        ...TABS.map(tab => ({
-          params: { component: [slug, tab.key] },
-        })),
-      ],
-      [],
-    ),
-    fallback: false,
-  };
-}
-
-export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
-  const [slug, tab] = params?.component as string[];
-
-  const reader = createReader(process.cwd(), config);
-  const component = await reader.collections.components.readOrThrow(slug, {
-    resolveLinkedFiles: true,
-  });
-
-  return {
-    props: {
-      component,
-      tab: tab ?? 'design',
-    },
-  };
-};
-
-export type ComponentProps = InferGetStaticPropsType<typeof getStaticProps>['component'];
-
-type ComponentDetailPageProps = {
-  brand: BrandKey;
-  component: ComponentProps;
-  tab: string;
-};
-
-export default function ComponentDetailPage({ component, brand, tab }: ComponentDetailPageProps) {
-  const router = useRouter();
-  const handleChange = useCallback(
-    (key: Key) => {
-      router.push({
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          component: [router.query.component![0], key as string],
-        },
-      });
-    },
-    [router],
-  );
-
-  return (
-    <Layout headerProps={{ title: component.name }} brand={brand}>
-      <div className="-m-5 flex flex-1 flex-col">
-        <Tabs
-          sticky
-          stickyOffset={{ top: '60px' }}
-          selectedKey={tab}
-          onSelectionChange={handleChange}
-          look="material"
-          color="primary"
-          className="flex-1"
-        >
-          {TABS.map(tab => (
-            <Tabs.Panel title={<span className="px-4 py-1">{tab.label}</span>} key={tab.key}>
-              <div className="-m-4 bg-light p-4">
-                <DocumentRenderer
-                  document={component[tab.key as 'design' | 'accessibility' | 'code']}
-                  renderers={DOCUMENT_RENDERERS}
-                  componentBlocks={{}}
-                />
-              </div>
-            </Tabs.Panel>
-          ))}
-        </Tabs>
-      </div>
-    </Layout>
-  );
-}
diff --git a/apps/docs/src/pages/index.page.tsx b/apps/docs/src/pages/index.page.tsx
deleted file mode 100644
index 6b4fd8735..000000000
--- a/apps/docs/src/pages/index.page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Layout } from '../components/layout/layout';
-
-export default function HomePage() {
-  return <></>;
-}
-
-HomePage.getLayout = function getLayout(page: ReactNode, brand: string) {
-  return (
-    <Layout brand={brand} headerProps={{ title: 'GEL Next Design System' }}>
-      {page}
-    </Layout>
-  );
-};
diff --git a/apps/docs/src/pages/keystatic/[[...params]]/index.page.tsx b/apps/docs/src/pages/keystatic/[[...params]]/index.page.tsx
deleted file mode 100644
index 2d2dec769..000000000
--- a/apps/docs/src/pages/keystatic/[[...params]]/index.page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { makePage } from '@keystatic/next/ui/app';
-
-import config from '../../../keystatic.config';
-
-export default makePage(config) as unknown as JSX.Element;
diff --git a/apps/docs/src/styles/globals.css b/apps/docs/src/styles/globals.css
deleted file mode 100644
index e16aab7ae..000000000
--- a/apps/docs/src/styles/globals.css
+++ /dev/null
@@ -1,105 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* e.g: How to setup a font for a Brand, in this case for RAMS brand */
-
-/* BOM fonts */
-@font-face {
-  src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-light.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-regular.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
-    url('/fonts/lineto-brown-pro-bold.woff') format('woff');
-  font-family: 'Brown Pro';
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* BSA fonts */
-@font-face {
-  src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
-  font-family: 'Aller';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
-  font-family: 'Aller';
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* RAMS fonts */
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
-    url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
-  font-family: 'Source Sans Pro';
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* STG fonts */
-@font-face {
-  src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
-    url('/fonts/dragonbold-bold-webfont.woff') format('woff');
-  font-family: 'Dragon Bold';
-  font-weight: 400;
-  font-style: normal;
-}
-
-/* WBC fonts */
-@font-face {
-  src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
-  font-family: 'Westpac';
-  font-weight: 400;
-  font-style: normal;
-}
-
-/* RBG fonts */
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-300.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
-    url('/fonts/montserrat-v14-latin-700.woff') format('woff');
-  font-family: 'Montserrat';
-  font-weight: 700;
-  font-style: normal;
-}
diff --git a/apps/docs/src/utils/get-font-files-per-brand.ts b/apps/docs/src/utils/get-font-files-per-brand.ts
deleted file mode 100644
index 610b9ec4c..000000000
--- a/apps/docs/src/utils/get-font-files-per-brand.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { type BrandKey } from '@westpac/ui/tailwind';
-
-const WOFF2_TYPE = 'font/woff2';
-export const getFontFilesPerBrand = (brandKey: BrandKey) => {
-  switch (brandKey) {
-    case 'bom':
-      return [
-        { href: '/fonts/lineto-brown-pro-bold.woff2', type: WOFF2_TYPE },
-        { href: '/fonts/lineto-brown-pro-light.woff2', type: WOFF2_TYPE },
-        { href: '/fonts/lineto-brown-pro-regular.woff2', type: WOFF2_TYPE },
-      ];
-    case 'bsa':
-      return [
-        { href: '/fonts/Aller_Bd.woff2', type: WOFF2_TYPE },
-        { href: '/fonts/Aller_Lt.woff2', type: WOFF2_TYPE },
-      ];
-    case 'rams':
-      return [
-        {
-          href: '/fonts/source-sans-pro-v14-latin-600.woff2',
-          type: WOFF2_TYPE,
-        },
-        {
-          href: '/fonts/source-sans-pro-v14-latin-700.woff2',
-          type: WOFF2_TYPE,
-        },
-        {
-          href: '/fonts/source-sans-pro-v14-latin-regular.woff2',
-          type: WOFF2_TYPE,
-        },
-      ];
-    case 'stg':
-      return [{ href: '/fonts/dragonbold-bold-webfont.woff2', type: WOFF2_TYPE }];
-    case 'wbc':
-      return [{ href: '/fonts/Westpac-Bold-v2.007.woff2', type: WOFF2_TYPE }];
-    case 'wbg':
-      return [
-        { href: '/fonts/montserrat-v14-latin-300.woff2', type: WOFF2_TYPE },
-        { href: '/fonts/montserrat-v14-latin-700.woff2', type: WOFF2_TYPE },
-        { href: '/fonts/montserrat-v14-latin-regular.woff2', type: WOFF2_TYPE },
-      ];
-    case 'btfg':
-    default:
-      return [];
-  }
-};
diff --git a/apps/docs/src/utils/url.ts b/apps/docs/src/utils/url.ts
deleted file mode 100644
index 9235d14d9..000000000
--- a/apps/docs/src/utils/url.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const getGetParameters = (url: string): Record<string, string> => {
-  const searchParams = url.replace(/.+\?/gi, '');
-  return searchParams.split('&').reduce((acc, current) => {
-    const [key, value] = current.split('=');
-    return {
-      ...acc,
-      [key]: value,
-    };
-  }, {});
-};
-
-export const getPathWithoutGetParameters = (url: string): string => {
-  return url.match(/(.+)\?/i)?.[1] ?? url;
-};
diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
deleted file mode 100644
index de8f19049..000000000
--- a/apps/docs/tailwind.config.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { withGEL } from '@westpac/ui/tailwind';
-import { type Config } from 'tailwindcss';
-
-const config: Config = withGEL({
-  relative: true,
-  mode: 'jit',
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      gridTemplateColumns: {
-        sidebar: '300px auto',
-      },
-      gridTemplateRows: {
-        header: '64px auto',
-      },
-    },
-  },
-  safelist: [
-    // This needed to be included because of the examples
-    {
-      pattern: /bg-+/, // 👈  This includes bg of all colors and shades
-    },
-    {
-      pattern: /typography-+/,
-    },
-    {
-      pattern: /gap-+/,
-    },
-    'flex',
-    'h-7',
-    'w-12',
-    'w-22',
-    'items-center',
-    'justify-center',
-    'rounded',
-    'transition-colors',
-  ],
-});
-
-export default config;
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
deleted file mode 100644
index eb0b41d94..000000000
--- a/apps/docs/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}