From ca0dc52b18c82fe782f81eb9cba549c34340141d Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 17:16:47 +0000
Subject: [PATCH 01/17] chore: create card which can have react prop child
 PTL-0

---
 .../008_interaction/index.mdx                 | 28 +++++----
 .../008_interaction/interaction-index.jsx     | 62 +++++++++++++++++++
 src/components/Card/Card.js                   | 42 +++++++------
 src/components/Card/CardList.js               | 15 ++---
 src/theme/DocCardList.tsx                     |  6 +-
 5 files changed, 111 insertions(+), 42 deletions(-)
 create mode 100644 docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx

diff --git a/docs/001_develop/03_client-capabilities/008_interaction/index.mdx b/docs/001_develop/03_client-capabilities/008_interaction/index.mdx
index 1e2c8f2104..2e3c0dedc8 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/index.mdx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/index.mdx
@@ -11,28 +11,32 @@ tags:
 sidebar_position: 8
 ---
 
+import InteractionIndex from './interaction-index.jsx'
+
+<InteractionIndex />
+
 Coming soon...
 
-Accordion 
+Accordion
 
-Anchor 
+Anchor
 
-Anchored Region 
+Anchored Region
 
-Dialog 
+Dialog
 
-Dropdown Menu 
+Dropdown Menu
 
-Flipper 
+Flipper
 
-ListBox 
+ListBox
 
-Menu 
+Menu
 
-Modal 
+Modal
 
-Tab 
+Tab
 
-Tooltip 
+Tooltip
 
-Tree View 
\ No newline at end of file
+Tree View
diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
new file mode 100644
index 0000000000..bdca7617ca
--- /dev/null
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -0,0 +1,62 @@
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import CardList from '@site/src/components/Card/CardList';
+
+function Test({}) {
+ return (<p>Test</p>);
+}
+
+const test = [
+{
+  "heading": "Server communications",
+  "link": "/develop/client-capabilities/server-communications/",
+  "text": "Server Communications description",
+  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg",
+	children: <Test />,
+},
+{
+  "heading": "Server communications",
+  "link": "/develop/client-capabilities/server-communications/",
+  "text": "Server Communications description",
+  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
+},
+{
+  "heading": "Server communications",
+  "link": "/develop/client-capabilities/server-communications/",
+  "text": "Server Communications description",
+  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
+},
+{
+  "heading": "Server communications",
+  "link": "/develop/client-capabilities/server-communications/",
+  "text": "Server Communications description",
+  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
+},
+{
+  "heading": "Server communications",
+  "link": "/develop/client-capabilities/server-communications/",
+  "text": "Server Communications description",
+  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
+},
+]
+
+export default function LayoutExample({ children, color }) {
+
+	const isBrowser = useIsBrowser();
+
+	if (isBrowser) {
+		const RapidImports = require('../../../../examples/ui/rapidImports');
+		RapidImports.registerComponents();
+	}
+
+  return (
+      <CardList
+        xs="12"
+        sm="4"
+        md="4"
+        items={test}
+      />
+  );
+	return (
+			<div>Test</div>
+	);
+}
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index 3fac1e1714..4756a989cb 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -1,26 +1,28 @@
 import React from "react";
 import './Card.css'
 
-export default function Card({ heading, text, link, imageUrl = '/svg/categories-icons/document-svgrepo-com.svg' }) {
+export default function Card({ heading, text, link, imageUrl = '/svg/categories-icons/document-svgrepo-com.svg', children }) {
   return (
-     <a href={link} title={heading} className="card-outer">
-        <div className="card-inner">
-          <div className="card-main-image-wrapper">
-            { imageUrl && (
-            <img
-              className="card-main-image"
-              src={imageUrl}
-              alt={heading}
-            />
-            )}
-          </div>
-          <div className="card-main-content">
-            <h3>{ heading }</h3>
-            <p>
-              { text }
-            </p>
-          </div>
+    <a href={link} title={heading} className="card-outer">
+      <div className="card-inner">
+        <div className="card-main-image-wrapper">
+          {children ? (
+            children
+          ) : (
+            imageUrl && (
+              <img
+                className="card-main-image"
+                src={imageUrl}
+                alt={heading}
+              />
+            )
+          )}
         </div>
-      </a>
+        <div className="card-main-content">
+          <h3>{heading}</h3>
+          <p>{text}</p>
+        </div>
+      </div>
+    </a>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/Card/CardList.js b/src/components/Card/CardList.js
index a8b3d0ce2e..984d05dcd2 100644
--- a/src/components/Card/CardList.js
+++ b/src/components/Card/CardList.js
@@ -4,18 +4,18 @@ import './CardList.css';
 import Card from './Card';
 
 const generateClassNameFromHref = (href) => {
-  return href?.replace(/^\/+|\/+$/g, '').toLowerCase().replace(/\//g, '-').replace(/[^a-z0-9-]/g, ''); 
+  return href?.replace(/^\/+|\/+$/g, '').toLowerCase().replace(/\//g, '-').replace(/[^a-z0-9-]/g, '');
 };
 
 export default function CardList({ inRow = 1, xs = 12, sm = 6, md = 4, items }) {
   return (
     <Grid container spacing={2} className="card-list">
       {items.map((item, index) => item.link && (
-        <Grid 
-          item 
-          xs={xs !== 12 ? xs : 12 / inRow} 
-          sm={sm !== 6 ? sm : 12 / inRow} 
-          md={md !== 4 ? md : 12 / inRow} 
+        <Grid
+          item
+          xs={xs !== 12 ? xs : 12 / inRow}
+          sm={sm !== 6 ? sm : 12 / inRow}
+          md={md !== 4 ? md : 12 / inRow}
           key={index}
           sx={{ padding: '1%' }}
           className={generateClassNameFromHref(item.link)}
@@ -25,9 +25,10 @@ export default function CardList({ inRow = 1, xs = 12, sm = 6, md = 4, items })
             link={item.link}
             text={item.text}
             imageUrl={item.imageUrl}
+            children={item.children}
           />
         </Grid>
       ))}
     </Grid>
   );
-}
\ No newline at end of file
+}
diff --git a/src/theme/DocCardList.tsx b/src/theme/DocCardList.tsx
index 6ef007c31d..1c59bb5cec 100644
--- a/src/theme/DocCardList.tsx
+++ b/src/theme/DocCardList.tsx
@@ -21,7 +21,7 @@ export default function DocCardList(props: Props): JSX.Element {
   const category = useCurrentSidebarCategory();
   const extraCategoryData = sidebarItemsData[category.href];
   let enrichedItems = filterDocCardListItems(items);
-  
+
   if (extraCategoryData?.items) {
   enrichedItems = enrichedItems.map((item) => {
     const extraData = extraCategoryData.items.find(extraItemData => extraItemData.href === item.href) || {};
@@ -30,7 +30,7 @@ export default function DocCardList(props: Props): JSX.Element {
         ...extraData,
       };
     });
-  } 
+  }
 
   const filteredItems = enrichedItems.map((
     { label: heading, href: link, description: text, imageUrl  },
@@ -46,4 +46,4 @@ export default function DocCardList(props: Props): JSX.Element {
       />
     </section>
   );
-}
\ No newline at end of file
+}

From e546b2a0d2331d1bb31322b4c90b187795c9cdce Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 17:33:07 +0000
Subject: [PATCH 02/17] chore: configure card grid for accordion PTL-0

---
 .../008_interaction/interaction-index.jsx     | 21 ++++++++-----------
 src/components/Card/Card.js                   |  3 ++-
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
index bdca7617ca..eddebbd04e 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -1,17 +1,14 @@
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import CardList from '@site/src/components/Card/CardList';
 
-function Test({}) {
- return (<p>Test</p>);
-}
+import AccordionDemo from '/examples/ui/client-capabilities/interaction/accordion.js';
 
-const test = [
+const cardData = [
 {
-  "heading": "Server communications",
-  "link": "/develop/client-capabilities/server-communications/",
-  "text": "Server Communications description",
-  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg",
-	children: <Test />,
+  "heading": "Accordion",
+  "link": "/develop/client-capabilities/interaction/client-interaction-accordion/",
+  "text": "Expandable and collapsible sections",
+	children: <AccordionDemo />,
 },
 {
   "heading": "Server communications",
@@ -51,9 +48,9 @@ export default function LayoutExample({ children, color }) {
   return (
       <CardList
         xs="12"
-        sm="4"
-        md="4"
-        items={test}
+        sm="6"
+        md="6"
+        items={cardData}
       />
   );
 	return (
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index 4756a989cb..865c285b0c 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -2,10 +2,11 @@ import React from "react";
 import './Card.css'
 
 export default function Card({ heading, text, link, imageUrl = '/svg/categories-icons/document-svgrepo-com.svg', children }) {
+	const wrapperStyle = !children ? {} : {display: 'contents'};
   return (
     <a href={link} title={heading} className="card-outer">
       <div className="card-inner">
-        <div className="card-main-image-wrapper">
+        <div className="card-main-image-wrapper" style={wrapperStyle}>
           {children ? (
             children
           ) : (

From 7eeddcfc160ed6ee318f1006fd4eff02b1451c21 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 18:00:42 +0000
Subject: [PATCH 03/17] feat: basic interaction summary page PTL-0

---
 .../008_interaction/interaction-index.jsx     | 120 +++++++++++++-----
 .../interaction/anchored-region.js            |   3 +-
 src/components/Card/Card.js                   |  21 ++-
 3 files changed, 104 insertions(+), 40 deletions(-)

diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
index eddebbd04e..21fd0e00d2 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -2,39 +2,92 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import CardList from '@site/src/components/Card/CardList';
 
 import AccordionDemo from '/examples/ui/client-capabilities/interaction/accordion.js';
+import AnchorDemo from '/examples/ui/client-capabilities/interaction/anchor.js';
+import AnchoredRegionDemo from '/examples/ui/client-capabilities/interaction/anchored-region.js';
+import DialogDemo from '/examples/ui/client-capabilities/interaction/dialog.js';
+import DropdownMenuDemo from '/examples/ui/client-capabilities/interaction/dropdown-menu.js';
+import FlipperDemo from '/examples/ui/client-capabilities/interaction/flipper.js';
+import ListboxDemo from '/examples/ui/client-capabilities/interaction/listbox.js';
+import MenuDemo from '/examples/ui/client-capabilities/interaction/menu.js';
+import ModalDemo from '/examples/ui/client-capabilities/interaction/modal.js';
+import TabsDemo from '/examples/ui/client-capabilities/interaction/tabs.js';
+import TooltipDemo from '/examples/ui/client-capabilities/interaction/tooltip.js';
+import TreeViewDemo from '/examples/ui/client-capabilities/interaction/tree-view.js';
 
 const cardData = [
-{
-  "heading": "Accordion",
-  "link": "/develop/client-capabilities/interaction/client-interaction-accordion/",
-  "text": "Expandable and collapsible sections",
-	children: <AccordionDemo />,
-},
-{
-  "heading": "Server communications",
-  "link": "/develop/client-capabilities/server-communications/",
-  "text": "Server Communications description",
-  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
-},
-{
-  "heading": "Server communications",
-  "link": "/develop/client-capabilities/server-communications/",
-  "text": "Server Communications description",
-  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
-},
-{
-  "heading": "Server communications",
-  "link": "/develop/client-capabilities/server-communications/",
-  "text": "Server Communications description",
-  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
-},
-{
-  "heading": "Server communications",
-  "link": "/develop/client-capabilities/server-communications/",
-  "text": "Server Communications description",
-  "imageUrl": "/svg/categories-icons/set-up-svgrepo-com.svg"
-},
-]
+  {
+    "heading": "Accordion",
+    "link": "/develop/client-capabilities/interaction/client-interaction-accordion/",
+    "text": "Expandable and collapsible sections",
+    children: <AccordionDemo />,
+  },
+  {
+    "heading": "Anchor",
+    "link": "/develop/client-capabilities/interaction/client-interaction-anchor/",
+    "text": "Create linkable document sections",
+    children: <AnchorDemo />,
+  },
+  {
+    "heading": "Anchored Region",
+    "link": "/develop/client-capabilities/interaction/client-interaction-anchored-region/",
+    "text": "Position content relative to other elements",
+    children: <AnchoredRegionDemo />,
+  },
+  {
+    "heading": "Dialog",
+    "link": "/develop/client-capabilities/interaction/client-interaction-dialog/",
+    "text": "Modal or non-modal message boxes",
+    children: <DialogDemo />,
+  },
+  {
+    "heading": "Dropdown Menu",
+    "link": "/develop/client-capabilities/interaction/client-interaction-dropdown-menu/",
+    "text": "Expandable menu with selectable options",
+    children: <DropdownMenuDemo />,
+  },
+  {
+    "heading": "Flipper",
+    "link": "/develop/client-capabilities/interaction/client-interaction-flipper/",
+    "text": "Navigate through a sequence of items",
+    children: <FlipperDemo />,
+  },
+  {
+    "heading": "Listbox",
+    "link": "/develop/client-capabilities/interaction/client-interaction-listbox/",
+    "text": "Select one or multiple options from a list",
+    children: <ListboxDemo />,
+  },
+  {
+    "heading": "Menu",
+    "link": "/develop/client-capabilities/interaction/client-interaction-menu/",
+    "text": "Navigation or command menu",
+    children: <MenuDemo />,
+  },
+  {
+    "heading": "Modal",
+    "link": "/develop/client-capabilities/interaction/client-interaction-modal/",
+    "text": "Focused overlay content",
+    children: <ModalDemo />,
+  },
+  {
+    "heading": "Tabs",
+    "link": "/develop/client-capabilities/interaction/client-interaction-tabs/",
+    "text": "Organize content into tabbed sections",
+    children: <TabsDemo />,
+  },
+  {
+    "heading": "Tooltip",
+    "link": "/develop/client-capabilities/interaction/client-interaction-tooltip/",
+    "text": "Display additional information on hover",
+    children: <TooltipDemo />,
+  },
+  {
+    "heading": "Tree View",
+    "link": "/develop/client-capabilities/interaction/client-interaction-tree-view/",
+    "text": "Hierarchical list with expandable items",
+    children: <TreeViewDemo />,
+  }
+];
 
 export default function LayoutExample({ children, color }) {
 
@@ -49,11 +102,8 @@ export default function LayoutExample({ children, color }) {
       <CardList
         xs="12"
         sm="6"
-        md="6"
+        md="4"
         items={cardData}
       />
   );
-	return (
-			<div>Test</div>
-	);
 }
diff --git a/examples/ui/client-capabilities/interaction/anchored-region.js b/examples/ui/client-capabilities/interaction/anchored-region.js
index 891615d800..7ad8e921c5 100644
--- a/examples/ui/client-capabilities/interaction/anchored-region.js
+++ b/examples/ui/client-capabilities/interaction/anchored-region.js
@@ -13,10 +13,11 @@ export default function AnchoredRegionDemo({ children, color }) {
 	return (
 		<CodeSection>
 			<div id="viewport" style={{minHeight: '50px', paddingTop: '20px'}}>
-				<button id="anchor">
+				<button id="anchor" style={{marginTop: '70px'}}>
 					Button is an anchor, defined first in the DOM
 				</button>
 				<rapid-anchored-region
+					style={{color: 'white'}}
 					anchor="anchor"
 					vertical-positioning-mode="locktodefault"
 					vertical-default-position="top">
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index 865c285b0c..aab0a5c98f 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -2,13 +2,26 @@ import React from "react";
 import './Card.css'
 
 export default function Card({ heading, text, link, imageUrl = '/svg/categories-icons/document-svgrepo-com.svg', children }) {
-	const wrapperStyle = !children ? {} : {display: 'contents'};
+  const wrapperStyle = !children ? {} : {
+		display: 'contents',
+	};
+
+	// Stops the link working when interacting with the live examples
+  const handleChildClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
   return (
     <a href={link} title={heading} className="card-outer">
       <div className="card-inner">
-        <div className="card-main-image-wrapper" style={wrapperStyle}>
+        <div
+          className="card-main-image-wrapper"
+          style={wrapperStyle}
+          onClick={children ? handleChildClick : undefined}
+        >
           {children ? (
-            children
+						children
           ) : (
             imageUrl && (
               <img
@@ -19,7 +32,7 @@ export default function Card({ heading, text, link, imageUrl = '/svg/categories-
             )
           )}
         </div>
-        <div className="card-main-content">
+        <div className="card-main-content" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
           <h3>{heading}</h3>
           <p>{text}</p>
         </div>

From ce869fd65d8a8278cb6ea2fb54480ad6c9957b32 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 18:05:22 +0000
Subject: [PATCH 04/17] chore: tweak anchored region example PTL-0

---
 .../008_interaction/index.mdx                 | 26 -------------------
 .../interaction/anchored-region.js            |  4 +--
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/docs/001_develop/03_client-capabilities/008_interaction/index.mdx b/docs/001_develop/03_client-capabilities/008_interaction/index.mdx
index 2e3c0dedc8..54cd57a3ee 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/index.mdx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/index.mdx
@@ -14,29 +14,3 @@ sidebar_position: 8
 import InteractionIndex from './interaction-index.jsx'
 
 <InteractionIndex />
-
-Coming soon...
-
-Accordion
-
-Anchor
-
-Anchored Region
-
-Dialog
-
-Dropdown Menu
-
-Flipper
-
-ListBox
-
-Menu
-
-Modal
-
-Tab
-
-Tooltip
-
-Tree View
diff --git a/examples/ui/client-capabilities/interaction/anchored-region.js b/examples/ui/client-capabilities/interaction/anchored-region.js
index 7ad8e921c5..158a84997f 100644
--- a/examples/ui/client-capabilities/interaction/anchored-region.js
+++ b/examples/ui/client-capabilities/interaction/anchored-region.js
@@ -1,7 +1,7 @@
 import { CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function AnchoredRegionDemo({ children, color }) {
+export default function AnchoredRegionDemo({}) {
 
   const isBrowser = useIsBrowser();
 
@@ -21,7 +21,7 @@ export default function AnchoredRegionDemo({ children, color }) {
 					anchor="anchor"
 					vertical-positioning-mode="locktodefault"
 					vertical-default-position="top">
-					This content in the anchored region shows up above the button, even though it's after it in the DOM
+					<p>Content after button in DOM</p>
 				</rapid-anchored-region>
 			</div>
 		</CodeSection>)

From f7d586eea51335520631e946912d951996b9c19b Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 18:27:38 +0000
Subject: [PATCH 05/17] feat: add loading ring PTL-0

---
 .../008_interaction/interaction-index.jsx     | 41 ++++++++----
 src/components/Card/LoadingRing.js            | 64 +++++++++++++++++++
 2 files changed, 94 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Card/LoadingRing.js

diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
index 21fd0e00d2..4f6e6f579c 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -1,5 +1,7 @@
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import CardList from '@site/src/components/Card/CardList';
+import LoadingRing from '@site/src/components/Card/LoadingRing';
+import {useState, useEffect} from 'react';
 
 import AccordionDemo from '/examples/ui/client-capabilities/interaction/accordion.js';
 import AnchorDemo from '/examples/ui/client-capabilities/interaction/anchor.js';
@@ -89,21 +91,38 @@ const cardData = [
   }
 ];
 
+
 export default function LayoutExample({ children, color }) {
+  const isBrowser = useIsBrowser();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
 
-	const isBrowser = useIsBrowser();
+    return () => clearTimeout(timer);
+  }, []);
 
-	if (isBrowser) {
-		const RapidImports = require('../../../../examples/ui/rapidImports');
-		RapidImports.registerComponents();
-	}
+  if (isBrowser) {
+    const RapidImports = require('../../../../examples/ui/rapidImports');
+    RapidImports.registerComponents();
+  }
 
   return (
-      <CardList
-        xs="12"
-        sm="6"
-        md="4"
-        items={cardData}
-      />
+    <>
+      {isLoading ? (
+		<LoadingRing />
+      ) : (
+        <div style={{ visibility: isLoading ? 'hidden' : 'visible' }}>
+          <CardList
+            xs="12"
+            sm="6"
+            md="4"
+            items={cardData}
+          />
+        </div>
+      )}
+    </>
   );
 }
diff --git a/src/components/Card/LoadingRing.js b/src/components/Card/LoadingRing.js
new file mode 100644
index 0000000000..5c079cca9b
--- /dev/null
+++ b/src/components/Card/LoadingRing.js
@@ -0,0 +1,64 @@
+// Used to show loading ring when bootstraping
+// our live examples because the design system provider
+// takes a second to load. This also means we can't use
+// our own progress ring
+const LoadingRing = () => {
+  const ringStyles = {
+    display: 'flex',
+    position: 'relative',
+    width: '80px',
+    height: '80px',
+		margin: '0 auto',
+  };
+
+  const ringChildStyles = {
+    boxSizing: 'border-box',
+    display: 'block',
+    position: 'absolute',
+    width: '64px',
+    height: '64px',
+    margin: '8px',
+    border: '8px solid #fff',
+    borderRadius: '50%',
+    animation: 'ring-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite',
+    borderColor: '#3498db transparent transparent transparent',
+  };
+
+  const child2Styles = {
+    ...ringChildStyles,
+    animationDelay: '-0.45s',
+  };
+
+  const child3Styles = {
+    ...ringChildStyles,
+    animationDelay: '-0.3s',
+  };
+
+  const child4Styles = {
+    ...ringChildStyles,
+    animationDelay: '-0.15s',
+  };
+
+  return (
+    <div style={ringStyles}>
+      <style>
+        {`
+          @keyframes ring-animation {
+            0% {
+              transform: rotate(0deg);
+            }
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+        `}
+      </style>
+      <div style={ringChildStyles}></div>
+      <div style={child2Styles}></div>
+      <div style={child3Styles}></div>
+      <div style={child4Styles}></div>
+    </div>
+  );
+};
+
+export default LoadingRing;

From 33ccc29c0bac53057274559850637e31acbcef09 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 18:33:29 +0000
Subject: [PATCH 06/17] chore: factor out builder into reuseable component
 PTL-0

---
 .../008_interaction/interaction-index.jsx     | 37 ++----------------
 src/components/LiveExampleBuilder.js          | 39 +++++++++++++++++++
 2 files changed, 42 insertions(+), 34 deletions(-)
 create mode 100644 src/components/LiveExampleBuilder.js

diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
index 4f6e6f579c..1f9a8a7e5e 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -1,7 +1,4 @@
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import CardList from '@site/src/components/Card/CardList';
-import LoadingRing from '@site/src/components/Card/LoadingRing';
-import {useState, useEffect} from 'react';
+import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
 
 import AccordionDemo from '/examples/ui/client-capabilities/interaction/accordion.js';
 import AnchorDemo from '/examples/ui/client-capabilities/interaction/anchor.js';
@@ -92,37 +89,9 @@ const cardData = [
 ];
 
 
-export default function LayoutExample({ children, color }) {
-  const isBrowser = useIsBrowser();
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 1000);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  if (isBrowser) {
-    const RapidImports = require('../../../../examples/ui/rapidImports');
-    RapidImports.registerComponents();
-  }
+export default function InteractionIndex() {
 
   return (
-    <>
-      {isLoading ? (
-		<LoadingRing />
-      ) : (
-        <div style={{ visibility: isLoading ? 'hidden' : 'visible' }}>
-          <CardList
-            xs="12"
-            sm="6"
-            md="4"
-            items={cardData}
-          />
-        </div>
-      )}
-    </>
+		<LiveExampleBuilder itemData={cardData} />
   );
 }
diff --git a/src/components/LiveExampleBuilder.js b/src/components/LiveExampleBuilder.js
new file mode 100644
index 0000000000..393c8c61b3
--- /dev/null
+++ b/src/components/LiveExampleBuilder.js
@@ -0,0 +1,39 @@
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import CardList from '@site/src/components/Card/CardList';
+import LoadingRing from '@site/src/components/Card/LoadingRing';
+import {useState, useEffect} from 'react';
+
+export default function LiveExampleBuilder({ itemData }) {
+  const isBrowser = useIsBrowser();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (isBrowser) {
+    const RapidImports = require('../../examples/ui/rapidImports');
+    RapidImports.registerComponents();
+  }
+
+  return (
+    <>
+      {isLoading ? (
+		<LoadingRing />
+      ) : (
+        <div style={{ visibility: isLoading ? 'hidden' : 'visible' }}>
+          <CardList
+            xs="12"
+            sm="6"
+            md="4"
+            items={itemData}
+          />
+        </div>
+      )}
+    </>
+  );
+}

From 45bdc998b32d89031bb6b657cdc36afcafcaea4c Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 18:42:49 +0000
Subject: [PATCH 07/17] feat: add presentation index page PTL-0

---
 .../008_interaction/interaction-index.jsx     |   2 -
 .../009_presentation/index.mdx                |  31 +-----
 .../009_presentation/presentation-index.js    | 102 ++++++++++++++++++
 3 files changed, 104 insertions(+), 31 deletions(-)
 create mode 100644 docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js

diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
index 1f9a8a7e5e..c303778159 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -88,9 +88,7 @@ const cardData = [
   }
 ];
 
-
 export default function InteractionIndex() {
-
   return (
 		<LiveExampleBuilder itemData={cardData} />
   );
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/index.mdx b/docs/001_develop/03_client-capabilities/009_presentation/index.mdx
index 53b0ad1bb5..99c1bb3c8c 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/index.mdx
+++ b/docs/001_develop/03_client-capabilities/009_presentation/index.mdx
@@ -10,34 +10,7 @@ tags:
 sidebar_position: 9
 ---
 
-Coming soon...
+import PresentationDemo from './presentation-index.js';
 
-Avatar 
+<PresentationDemo />
 
-Badge 
-
-Banner 
-
-Breadcrumb 
-
-Basic Data Grid 
-
-Card   
-
-Chart 
-
-Connection Indicator 
-
-Disclosure 
-
-Divider 
-
-Horizontal Scroll 
-
-Icon 
-
-Progress Ring 
-
-Progress 
-
-Skeleton 
\ No newline at end of file
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
new file mode 100644
index 0000000000..ffda46804d
--- /dev/null
+++ b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
@@ -0,0 +1,102 @@
+import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+
+import AvatarDemo from './examples/avatar.js';
+import BadgeDemo from './examples/badge.js';
+import BannerDemo from './examples/banner.js';
+import BreadcrumbDemo from './examples/breadcrumb.js';
+import CardDemo from './examples/card.js';
+import ConnectionIndicatorDemo from './examples/connection-indicator.js';
+import DisclosureDemo from './examples/disclosure.js';
+import DividerDemo from './examples/divider.js';
+import HorizontalScrollDemo from './examples/horizontal-scroll.js';
+import IconDemo from './examples/icon.js';
+import ProgressRingDemo from './examples/progress-ring.js';
+import ProgressDemo from './examples/progress.js';
+import SkeletonDemo from './examples/skeleton.js';
+
+const cardData = [
+  {
+    "heading": "Avatar",
+    "link": "/develop/client-capabilities/presentation/client-presentation-avatar/",
+    "text": "Display image or text representing a person",
+    children: <AvatarDemo />,
+  },
+  {
+    "heading": "Badge",
+    "link": "/develop/client-capabilities/presentation/client-presentation-badge/",
+    "text": "Display a small count or status indicator",
+    children: <BadgeDemo />,
+  },
+  {
+    "heading": "Banner",
+    "link": "/develop/client-capabilities/presentation/client-presentation-banner/",
+    "text": "Display important messages or announcements",
+    children: <BannerDemo />,
+  },
+  {
+    "heading": "Breadcrumb",
+    "link": "/develop/client-capabilities/presentation/client-presentation-breadcrumb/",
+    "text": "Show navigation hierarchy",
+    children: <BreadcrumbDemo />,
+  },
+  {
+    "heading": "Card",
+    "link": "/develop/client-capabilities/presentation/client-presentation-card/",
+    "text": "Container for related content and actions",
+    children: <CardDemo />,
+  },
+  {
+    "heading": "Connection Indicator",
+    "link": "/develop/client-capabilities/presentation/client-presentation-connection-indicator/",
+    "text": "Display network connection status",
+    children: <ConnectionIndicatorDemo />,
+  },
+  {
+    "heading": "Disclosure",
+    "link": "/develop/client-capabilities/presentation/client-presentation-disclosure/",
+    "text": "Toggle visibility of content",
+    children: <DisclosureDemo />,
+  },
+  {
+    "heading": "Divider",
+    "link": "/develop/client-capabilities/presentation/client-presentation-divider/",
+    "text": "Separate content visually",
+    children: <DividerDemo />,
+  },
+  {
+    "heading": "Horizontal Scroll",
+    "link": "/develop/client-capabilities/presentation/client-presentation-horizontal-scroll/",
+    "text": "Horizontally scrollable container",
+    children: <HorizontalScrollDemo />,
+  },
+  {
+    "heading": "Icon",
+    "link": "/develop/client-capabilities/presentation/client-presentation-icon/",
+    "text": "Display symbolic visual elements",
+    children: <IconDemo />,
+  },
+  {
+    "heading": "Progress Ring",
+    "link": "/develop/client-capabilities/presentation/client-presentation-progress-ring/",
+    "text": "Show circular progress indicator",
+    children: <ProgressRingDemo />,
+  },
+  {
+    "heading": "Progress",
+    "link": "/develop/client-capabilities/presentation/client-presentation-progress/",
+    "text": "Display linear progress indicator",
+    children: <ProgressDemo />,
+  },
+  {
+    "heading": "Skeleton",
+    "link": "/develop/client-capabilities/presentation/client-presentation-skeleton/",
+    "text": "Show loading state placeholder",
+    children: <SkeletonDemo />,
+  },
+];
+
+export default function InteractionIndex() {
+  return (
+		<LiveExampleBuilder itemData={cardData} />
+  );
+}

From 50ae7f2aab893897eb1ba198c7be4f81a002c89b Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Fri, 29 Nov 2024 18:59:28 +0000
Subject: [PATCH 08/17] feat: examples for forms PTL-0

---
 .../007_forms/forms-index.js                  | 124 ++++++++++++++++++
 .../007_forms/index.mdx                       |   4 +-
 .../009_presentation/presentation-index.js    |   2 +-
 3 files changed, 127 insertions(+), 3 deletions(-)
 create mode 100644 docs/001_develop/03_client-capabilities/007_forms/forms-index.js

diff --git a/docs/001_develop/03_client-capabilities/007_forms/forms-index.js b/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
new file mode 100644
index 0000000000..c743d89143
--- /dev/null
+++ b/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
@@ -0,0 +1,124 @@
+import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+
+import ButtonDemo from '/examples/ui/client-capabilities/interaction/button.js';
+import CheckboxDemo from '/examples/ui/client-capabilities/interaction/checkbox.js';
+import ComboboxDemo from '/examples/ui/client-capabilities/interaction/combobox.js';
+import FileUploadDemo from '/examples/ui/client-capabilities/interaction/fileupload.js';
+import NumberFieldDemo from '/examples/ui/client-capabilities/interaction/number-field.js';
+import RadioGroupDemo from '/examples/ui/client-capabilities/interaction/radiogroup.js';
+import RadioDemo from '/examples/ui/client-capabilities/interaction/radio.js';
+import SelectDemo from '/examples/ui/client-capabilities/interaction/select.js';
+import SliderDemo from '/examples/ui/client-capabilities/interaction/slider.js';
+import StepperDemo from '/examples/ui/client-capabilities/interaction/stepper.js';
+import SwitchDemo from '/examples/ui/client-capabilities/interaction/switch.js';
+import TextAreaDemo from '/examples/ui/client-capabilities/interaction/text-area.js';
+import TextFieldDemo from '/examples/ui/client-capabilities/interaction/text-field.js';
+import ToolbarDemo from '/examples/ui/client-capabilities/interaction/toolbar.js';
+
+import CriteriaSegmentedControlDemo from '/examples/ui/client-capabilities/interaction/criteria-segmented-control.js';
+import SegmentedControlDemo from '/examples/ui/client-capabilities/interaction/segmented-control.js';
+
+const cardData = [
+  {
+    "heading": "Button",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-button/",
+    "text": "Clickable element to indicate action",
+    children: <ButtonDemo />,
+  },
+  {
+    "heading": "Checkbox",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-checkbox/",
+    "text": "Control for selecting multiple options",
+    children: <CheckboxDemo />,
+  },
+  {
+    "heading": "Criteria Segmented Control",
+    "link": "/develop/client-capabilities/forms/form-layout/client-interaction-criteria-segmented-control/",
+    "text": "Generate a criteria based on a selected item",
+    children: <CriteriaSegmentedControlDemo />,
+  },
+  {
+    "heading": "Combobox",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-combobox/",
+    "text": "Combination of text input and dropdown list",
+    children: <ComboboxDemo />,
+  },
+  {
+    "heading": "File Upload",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-file-upload/",
+    "text": "Control for uploading files",
+    children: <FileUploadDemo />,
+  },
+  {
+    "heading": "Number Field",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-number-field/",
+    "text": "Input field for numerical values",
+    children: <NumberFieldDemo />,
+  },
+  {
+    "heading": "Radio Group",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-radio-group/",
+    "text": "Group of mutually exclusive options",
+    children: <RadioGroupDemo />,
+  },
+  {
+    "heading": "Radio",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-radio/",
+    "text": "Single selection control",
+    children: <RadioDemo />,
+  },
+  {
+    "heading": "Segmented Control",
+    "link": "/develop/client-capabilities/forms/form-layout/client-interaction-segmented-control/",
+    "text": "Select a value from a set of buttons",
+    children: <SegmentedControlDemo />,
+  },
+  {
+    "heading": "Select",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-select/",
+    "text": "Dropdown menu for selecting options",
+    children: <SelectDemo />,
+  },
+  {
+    "heading": "Slider",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-slider/",
+    "text": "Control for selecting a value from a range",
+    children: <SliderDemo />,
+  },
+  {
+    "heading": "Stepper",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-stepper/",
+    "text": "Increment/decrement control for numbers",
+    children: <StepperDemo />,
+  },
+  {
+    "heading": "Switch",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-switch/",
+    "text": "Toggle between two states",
+    children: <SwitchDemo />,
+  },
+  {
+    "heading": "Text Area",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-text-area/",
+    "text": "Multi-line text input field",
+    children: <TextAreaDemo />,
+  },
+  {
+    "heading": "Text Field",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-text-field/",
+    "text": "Single-line text input field",
+    children: <TextFieldDemo />,
+  },
+  {
+    "heading": "Toolbar",
+    "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-toolbar/",
+    "text": "Container for grouping related controls",
+    children: <ToolbarDemo />,
+  },
+];
+
+export default function FormsIndex() {
+  return (
+		<LiveExampleBuilder itemData={cardData} />
+  );
+}
diff --git a/docs/001_develop/03_client-capabilities/007_forms/index.mdx b/docs/001_develop/03_client-capabilities/007_forms/index.mdx
index b0770af619..9f78a94340 100644
--- a/docs/001_develop/03_client-capabilities/007_forms/index.mdx
+++ b/docs/001_develop/03_client-capabilities/007_forms/index.mdx
@@ -12,6 +12,6 @@ sidebar_position: 7
 pagination_prev: develop/client-capabilities/charts/chart-html-api
 ---
 
-Coming soon...
+import FormsIndex from './forms-index.js'
 
-Brief overview of what a form is used for
+<FormsIndex />
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
index ffda46804d..c29839fe82 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
@@ -95,7 +95,7 @@ const cardData = [
   },
 ];
 
-export default function InteractionIndex() {
+export default function PresentationIndex() {
   return (
 		<LiveExampleBuilder itemData={cardData} />
   );

From db526f95c5b771e9529b878af4b03f8d5a95e443 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Sat, 30 Nov 2024 21:45:15 +0000
Subject: [PATCH 09/17] feat: stop components overflowing PTL-0

---
 src/components/Card/Card.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index aab0a5c98f..41b8620630 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -14,14 +14,16 @@ export default function Card({ heading, text, link, imageUrl = '/svg/categories-
 
   return (
     <a href={link} title={heading} className="card-outer">
-      <div className="card-inner">
+      <div className="card-inner" style={{overflow: 'hidden'}}>
         <div
           className="card-main-image-wrapper"
           style={wrapperStyle}
           onClick={children ? handleChildClick : undefined}
         >
           {children ? (
-						children
+						<div style={{overflow: 'hidden'}}>
+						{children}
+						</div>
           ) : (
             imageUrl && (
               <img

From 893cc75c9fd2a4194aa6e09e0d8e7716e479197f Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 08:08:31 +0000
Subject: [PATCH 10/17] feat: add responsive sizing to title sidebar css PTL-0

---
 src/css/custom.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 22e2a743ab..eb6b97db27 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -68,7 +68,7 @@
 
   --doc-sidebar-width: 325px !important;
 
-  --toc-sidebar-width: 325px;
+  --toc-sidebar-width: 140px;
 }
 
 body {
@@ -216,7 +216,7 @@ h5 {
 }
 
 .main-wrapper main article {
-  max-width: 100rem;
+  max-width: 120rem;
 }
 
 @media (min-aspect-ratio: 1/1) and (min-width: 1512px) {
@@ -224,6 +224,15 @@ h5 {
     margin-left: auto;
     margin-right: auto;
   }
+	:root {
+		--toc-sidebar-width: 220px;
+	}
+}
+
+@media (min-aspect-ratio: 1/1) and (min-width: 2250px) {
+	:root {
+		--toc-sidebar-width: 335px;
+	}
 }
 
 @media (min-aspect-ratio: 1/1) and (max-width: 996px) {

From ac47ac764817d399e5298d70f3f1f67c17ea6e57 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 08:31:04 +0000
Subject: [PATCH 11/17] feat: remove sidebar on the live example pages PTL-0

---
 .../03_client-capabilities/007_forms/forms-index.js    |  3 ++-
 .../008_interaction/interaction-index.jsx              |  3 ++-
 .../009_presentation/presentation-index.js             |  3 ++-
 src/components/LiveExampleBuilder.js                   | 10 ++++++++++
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/001_develop/03_client-capabilities/007_forms/forms-index.js b/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
index c743d89143..05fb6ed6e4 100644
--- a/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
+++ b/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
@@ -1,4 +1,4 @@
-import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+import LiveExampleBuilder, {useUpdateCSSVariable} from '@site/src/components/LiveExampleBuilder';
 
 import ButtonDemo from '/examples/ui/client-capabilities/interaction/button.js';
 import CheckboxDemo from '/examples/ui/client-capabilities/interaction/checkbox.js';
@@ -118,6 +118,7 @@ const cardData = [
 ];
 
 export default function FormsIndex() {
+	useUpdateCSSVariable('--toc-sidebar-width', '0px')
   return (
 		<LiveExampleBuilder itemData={cardData} />
   );
diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
index c303778159..a79925f1b3 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -1,4 +1,4 @@
-import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+import LiveExampleBuilder, {useUpdateCSSVariable} from '@site/src/components/LiveExampleBuilder';
 
 import AccordionDemo from '/examples/ui/client-capabilities/interaction/accordion.js';
 import AnchorDemo from '/examples/ui/client-capabilities/interaction/anchor.js';
@@ -89,6 +89,7 @@ const cardData = [
 ];
 
 export default function InteractionIndex() {
+	useUpdateCSSVariable('--toc-sidebar-width', '0px')
   return (
 		<LiveExampleBuilder itemData={cardData} />
   );
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
index c29839fe82..5457b72479 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
@@ -1,4 +1,4 @@
-import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+import LiveExampleBuilder, {useUpdateCSSVariable} from '@site/src/components/LiveExampleBuilder';
 
 import AvatarDemo from './examples/avatar.js';
 import BadgeDemo from './examples/badge.js';
@@ -96,6 +96,7 @@ const cardData = [
 ];
 
 export default function PresentationIndex() {
+	useUpdateCSSVariable('--toc-sidebar-width', '0px')
   return (
 		<LiveExampleBuilder itemData={cardData} />
   );
diff --git a/src/components/LiveExampleBuilder.js b/src/components/LiveExampleBuilder.js
index 393c8c61b3..229d06bc62 100644
--- a/src/components/LiveExampleBuilder.js
+++ b/src/components/LiveExampleBuilder.js
@@ -37,3 +37,13 @@ export default function LiveExampleBuilder({ itemData }) {
     </>
   );
 }
+
+export function useUpdateCSSVariable(variable, value) {
+  useEffect(() => {
+    document.documentElement.style.setProperty(variable, value);
+
+    return () => {
+      document.documentElement.style.removeProperty(variable);
+    };
+  }, [variable, value]);
+}

From 4e0d06f9e349667b8a77d233acf9d28f981bc54d Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 09:24:11 +0000
Subject: [PATCH 12/17] feat: setup for making components behave different on
 small screen PTL-0

---
 .../007_forms/forms-index.js                  |  3 +-
 .../008_interaction/interaction-index.jsx     |  3 +-
 .../009_presentation/presentation-index.js    |  3 +-
 .../interaction/anchored-region.js            |  6 ++--
 src/components/Hooks.jsx                      | 34 +++++++++++++++++++
 src/components/LiveExampleBuilder.js          |  9 -----
 6 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Hooks.jsx

diff --git a/docs/001_develop/03_client-capabilities/007_forms/forms-index.js b/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
index 05fb6ed6e4..60fa9606e1 100644
--- a/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
+++ b/docs/001_develop/03_client-capabilities/007_forms/forms-index.js
@@ -1,4 +1,5 @@
-import LiveExampleBuilder, {useUpdateCSSVariable} from '@site/src/components/LiveExampleBuilder';
+import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+import {useUpdateCSSVariable} from '@site/src/components/Hooks';
 
 import ButtonDemo from '/examples/ui/client-capabilities/interaction/button.js';
 import CheckboxDemo from '/examples/ui/client-capabilities/interaction/checkbox.js';
diff --git a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
index a79925f1b3..5b0514f679 100644
--- a/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
+++ b/docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
@@ -1,4 +1,5 @@
-import LiveExampleBuilder, {useUpdateCSSVariable} from '@site/src/components/LiveExampleBuilder';
+import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+import {useUpdateCSSVariable} from '@site/src/components/Hooks';
 
 import AccordionDemo from '/examples/ui/client-capabilities/interaction/accordion.js';
 import AnchorDemo from '/examples/ui/client-capabilities/interaction/anchor.js';
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
index 5457b72479..e798985520 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/presentation-index.js
@@ -1,4 +1,5 @@
-import LiveExampleBuilder, {useUpdateCSSVariable} from '@site/src/components/LiveExampleBuilder';
+import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder';
+import {useUpdateCSSVariable} from '@site/src/components/Hooks';
 
 import AvatarDemo from './examples/avatar.js';
 import BadgeDemo from './examples/badge.js';
diff --git a/examples/ui/client-capabilities/interaction/anchored-region.js b/examples/ui/client-capabilities/interaction/anchored-region.js
index 158a84997f..604b6ff834 100644
--- a/examples/ui/client-capabilities/interaction/anchored-region.js
+++ b/examples/ui/client-capabilities/interaction/anchored-region.js
@@ -1,9 +1,11 @@
 import { CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import {useWindowSize} from '@site/src/components/Hooks';
 
 export default function AnchoredRegionDemo({}) {
-
   const isBrowser = useIsBrowser();
+	const windowSize = useWindowSize();
+  const isSmall = windowSize.width < 1400;
 
 	if (isBrowser) {
 		const RapidImports = require('../../rapidImports');
@@ -21,7 +23,7 @@ export default function AnchoredRegionDemo({}) {
 					anchor="anchor"
 					vertical-positioning-mode="locktodefault"
 					vertical-default-position="top">
-					<p>Content after button in DOM</p>
+					{!isSmall ? <p>Content after button in DOM</p> : <p>Anchored content</p>}
 				</rapid-anchored-region>
 			</div>
 		</CodeSection>)
diff --git a/src/components/Hooks.jsx b/src/components/Hooks.jsx
new file mode 100644
index 0000000000..5f29b43ba2
--- /dev/null
+++ b/src/components/Hooks.jsx
@@ -0,0 +1,34 @@
+import {useState, useEffect} from 'react';
+
+export function useUpdateCSSVariable(variable, value) {
+  useEffect(() => {
+    document.documentElement.style.setProperty(variable, value);
+
+    return () => {
+      document.documentElement.style.removeProperty(variable);
+    };
+  }, [variable, value]);
+}
+
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: typeof window !== 'undefined' ? window.innerWidth : undefined,
+    height: typeof window !== 'undefined' ? window.innerHeight : undefined,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    window.addEventListener('resize', handleResize);
+    // Initial size is now set in useState, so we don't need to call handleResize here
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}
diff --git a/src/components/LiveExampleBuilder.js b/src/components/LiveExampleBuilder.js
index 229d06bc62..2121d7f103 100644
--- a/src/components/LiveExampleBuilder.js
+++ b/src/components/LiveExampleBuilder.js
@@ -38,12 +38,3 @@ export default function LiveExampleBuilder({ itemData }) {
   );
 }
 
-export function useUpdateCSSVariable(variable, value) {
-  useEffect(() => {
-    document.documentElement.style.setProperty(variable, value);
-
-    return () => {
-      document.documentElement.style.removeProperty(variable);
-    };
-  }, [variable, value]);
-}

From 5be4b7221f5ecf73a0e41e055032eda823ee74f3 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 09:55:46 +0000
Subject: [PATCH 13/17] feat: example setup for making components behave
 different in index PTL-0

---
 examples/ui/client-capabilities/interaction/combobox.js | 8 +++++---
 src/components/LiveExampleBuilder.js                    | 7 ++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/examples/ui/client-capabilities/interaction/combobox.js b/examples/ui/client-capabilities/interaction/combobox.js
index b5a8a4e161..fd0b016882 100644
--- a/examples/ui/client-capabilities/interaction/combobox.js
+++ b/examples/ui/client-capabilities/interaction/combobox.js
@@ -1,7 +1,7 @@
-import { CodeLabel, CodeSection } from '../../documentationBase';
+import { CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function ComboboxDemo({ children, color }) {
+export default function ComboboxDemo({ inIndex }) {
 	const isBrowser = useIsBrowser();
 
 	if (isBrowser) {
@@ -9,9 +9,11 @@ export default function ComboboxDemo({ children, color }) {
 		RapidImports.registerComponents();
 	}
 
+	const styles = inIndex ? {minWidth: '0px', marginBottom: '100px'} : {}
+
 	return (
 		<CodeSection>
-			<rapid-combobox position="below">
+			<rapid-combobox position="below" style={styles}>
 				<rapid-option value="s">Small</rapid-option>
 				<rapid-option value="m">Medium</rapid-option>
 				<rapid-option value="l" selected>Large</rapid-option>
diff --git a/src/components/LiveExampleBuilder.js b/src/components/LiveExampleBuilder.js
index 2121d7f103..2cf251ad4e 100644
--- a/src/components/LiveExampleBuilder.js
+++ b/src/components/LiveExampleBuilder.js
@@ -7,6 +7,11 @@ export default function LiveExampleBuilder({ itemData }) {
   const isBrowser = useIsBrowser();
   const [isLoading, setIsLoading] = useState(true);
 
+	const processedItems = itemData.map((item) => ({
+		...item,
+		...(item.children ? {children: {...item.children, props: {inIndex: true}}} : {}),
+	}))
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -30,7 +35,7 @@ export default function LiveExampleBuilder({ itemData }) {
             xs="12"
             sm="6"
             md="4"
-            items={itemData}
+            items={processedItems}
           />
         </div>
       )}

From 109ee48b7654ca75e8b65846fc65fbbf58a6a28f Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 10:05:19 +0000
Subject: [PATCH 14/17] feat: forms examples responsive in index view PTL-0

---
 .../ui/client-capabilities/interaction/combobox.js     |  4 ++--
 examples/ui/client-capabilities/interaction/select.js  |  6 ++++--
 examples/ui/client-capabilities/interaction/toolbar.js | 10 ++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/examples/ui/client-capabilities/interaction/combobox.js b/examples/ui/client-capabilities/interaction/combobox.js
index fd0b016882..de72950a0e 100644
--- a/examples/ui/client-capabilities/interaction/combobox.js
+++ b/examples/ui/client-capabilities/interaction/combobox.js
@@ -1,7 +1,7 @@
 import { CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function ComboboxDemo({ inIndex }) {
+export default function ComboboxDemo({ inIndex = false }) {
 	const isBrowser = useIsBrowser();
 
 	if (isBrowser) {
@@ -9,7 +9,7 @@ export default function ComboboxDemo({ inIndex }) {
 		RapidImports.registerComponents();
 	}
 
-	const styles = inIndex ? {minWidth: '0px', marginBottom: '100px'} : {}
+	const styles = inIndex ? {minWidth: '0px', marginBottom: '120px', width: '100%'} : {}
 
 	return (
 		<CodeSection>
diff --git a/examples/ui/client-capabilities/interaction/select.js b/examples/ui/client-capabilities/interaction/select.js
index ecc92da3a4..f5aa588c99 100644
--- a/examples/ui/client-capabilities/interaction/select.js
+++ b/examples/ui/client-capabilities/interaction/select.js
@@ -1,7 +1,7 @@
 import { CodeLabel, CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function SelectDemo({ children, color }) {
+export default function SelectDemo({inIndex = false}) {
 	const isBrowser = useIsBrowser();
 
 	if (isBrowser) {
@@ -9,5 +9,7 @@ export default function SelectDemo({ children, color }) {
 		RapidImports.registerComponents();
 	}
 
-	return (<CodeSection><rapid-select><rapid-option value="s">Small</rapid-option><rapid-option value="l" selected>Large</rapid-option></rapid-select></CodeSection >)
+	const styles = inIndex ? {minWidth: '0px', width: '100%', marginBottom: '100px'} : {}
+
+	return (<CodeSection><rapid-select position="below" style={styles}><rapid-option value="s">Small</rapid-option><rapid-option value="l" selected>Large</rapid-option></rapid-select></CodeSection >)
 }
diff --git a/examples/ui/client-capabilities/interaction/toolbar.js b/examples/ui/client-capabilities/interaction/toolbar.js
index a5de07e1ed..9f840b94ce 100644
--- a/examples/ui/client-capabilities/interaction/toolbar.js
+++ b/examples/ui/client-capabilities/interaction/toolbar.js
@@ -1,7 +1,7 @@
 import { CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function ToolbarDemo({ children, color }) {
+export default function ToolbarDemo({ inIndex = false }) {
 
 	const isBrowser = useIsBrowser();
 
@@ -10,19 +10,21 @@ export default function ToolbarDemo({ children, color }) {
 		RapidImports.registerComponents();
 	}
 
+	const styles = inIndex ? {minWidth: '0px', marginBottom: '50px', width: '100%'} : {}
+
 	return (
 		<CodeSection>
 			<rapid-toolbar>
 				<rapid-button>Button</rapid-button>
-				<rapid-select>
+				<rapid-select position="below" style={styles}>
 					<rapid-option>Option 1</rapid-option>
 					<rapid-option>Second option</rapid-option>
-					<rapid-option>Option 3</rapid-option>
+					{!inIndex ? <rapid-option>Option 3</rapid-option> : null}
 				</rapid-select>
 				<rapid-radio-group>
 					<rapid-radio checked="">One</rapid-radio>
 					<rapid-radio>Two</rapid-radio>
-					<rapid-radio>Three</rapid-radio>
+					{!inIndex ? <rapid-radio>Three</rapid-radio> : null}
 				</rapid-radio-group>
 			</rapid-toolbar>
 		</CodeSection >

From 3ccac2d391f96601dfc97ec48ceb8d24d37b3095 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 10:12:05 +0000
Subject: [PATCH 15/17] feat: interaction examples responsive in index view
 PTL-0

---
 .../client-capabilities/interaction/anchor.js |  4 ++--
 .../client-capabilities/interaction/modal.js  | 21 ++++++++++++++++++-
 .../client-capabilities/interaction/tabs.js   | 10 ++++-----
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/examples/ui/client-capabilities/interaction/anchor.js b/examples/ui/client-capabilities/interaction/anchor.js
index 48100cf367..a56aee585b 100644
--- a/examples/ui/client-capabilities/interaction/anchor.js
+++ b/examples/ui/client-capabilities/interaction/anchor.js
@@ -1,7 +1,7 @@
 import { CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function AnchorDemo({ children, color }) {
+export default function AnchorDemo({ inIndex = false }) {
 
   const isBrowser = useIsBrowser();
 
@@ -18,7 +18,7 @@ export default function AnchorDemo({ children, color }) {
 	return (
 		<CodeSection>
 			<rapid-anchor style={style} href="https://genesis.global/">External link</rapid-anchor>
-			<rapid-anchor style={style} href="#api">Internal link</rapid-anchor>
+			{!inIndex ? (<rapid-anchor style={style} href="#api">Internal link</rapid-anchor>) : null}
 			<rapid-anchor style={style} href="mailto:info@genesis.global">Mail link</rapid-anchor>
 		</CodeSection>)
 }
diff --git a/examples/ui/client-capabilities/interaction/modal.js b/examples/ui/client-capabilities/interaction/modal.js
index 6ea5337b2b..20214de06c 100644
--- a/examples/ui/client-capabilities/interaction/modal.js
+++ b/examples/ui/client-capabilities/interaction/modal.js
@@ -2,7 +2,7 @@ import { CodeLabel, CodeSection } from '../../documentationBase';
 import React, { useEffect, useRef, useState } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function ModalDemo({ children, color }) {
+export default function ModalDemo({ inIndex = false }) {
 
     const isBrowser = useIsBrowser();
 
@@ -61,6 +61,25 @@ export default function ModalDemo({ children, color }) {
     }, []);
 
 
+		if (inIndex) {
+			return (
+				<CodeSection>
+					<div style={{ color: 'var(--neutral-foreground-rest)'}}>
+						<div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+							<rapid-button
+								onClick={() => handleClick(modalRef)}>
+								Open modal
+							</rapid-button>
+							<rapid-modal
+								ref={modalRef}
+							>
+								Modal example
+							</rapid-modal>
+						</div>
+					</div>
+				</CodeSection >)
+		}
+
     return (<CodeSection><CodeLabel>Modal:</CodeLabel>
         <div style={{ color: 'var(--neutral-foreground-rest)'}}>
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
diff --git a/examples/ui/client-capabilities/interaction/tabs.js b/examples/ui/client-capabilities/interaction/tabs.js
index 28d6f48c4a..642d828d04 100644
--- a/examples/ui/client-capabilities/interaction/tabs.js
+++ b/examples/ui/client-capabilities/interaction/tabs.js
@@ -1,12 +1,11 @@
 import { CodeSection } from '../../documentationBase';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import { MenuItem } from '@genesislcap/rapid-design-system';
 
 function ListItem({children}) {
 	return (<li style={{color: 'white'}}>{children}</li>)
 }
 
-export default function MenuDemo({ children, color }) {
+export default function MenuDemo({ inIndex = false }) {
 
 	const isBrowser = useIsBrowser();
 
@@ -20,7 +19,7 @@ export default function MenuDemo({ children, color }) {
 			<rapid-tabs activeid="entrees">
 				<rapid-tab id="apps">Appetizers</rapid-tab>
 				<rapid-tab id="entrees">Entrees</rapid-tab>
-				<rapid-tab id="desserts">Desserts</rapid-tab>
+				{!inIndex ? (<rapid-tab id="desserts">Desserts</rapid-tab>) : null}
 				<rapid-tab-panel id="appsPanel">
 					<ol>
 						<ListItem>Stuffed artichokes</ListItem>
@@ -33,12 +32,13 @@ export default function MenuDemo({ children, color }) {
 						<ListItem>Grilled Fish with Artichoke Caponata</ListItem>
 					</ol>
 				</rapid-tab-panel>
-				<rapid-tab-panel id="dessertsPanel">
+				{!inIndex ?
+				(<rapid-tab-panel id="dessertsPanel">
 					<ol>
 						<ListItem>Tiramisu</ListItem>
 						<ListItem>limoncello and Ice Cream with Biscotti</ListItem>
 					</ol>
-				</rapid-tab-panel>
+				</rapid-tab-panel>) : null}
 			</rapid-tabs>
 		</CodeSection >
 	)

From 7c93f4c13a15e408ab85a58d83bb664f6893c70e Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 10:19:14 +0000
Subject: [PATCH 16/17] feat: presentation examples responsive in index view
 PTL-0

---
 .../009_presentation/examples/banner.js                    | 2 +-
 .../009_presentation/examples/breadcrumb.js                | 2 +-
 .../009_presentation/examples/horizontal-scroll.js         | 7 ++++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js
index 249cefdc05..19f6622aba 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js
@@ -23,7 +23,7 @@ export default function BannerDemo({ children, color }) {
 	return (
 		<CodeSection>
 			<div style={{ color: 'var(--neutral-foreground-rest)', width: '-webkit-fill-available'}}>
-				<div style={{ display: 'flex', flexWrap: 'wrap', height: '75px', width: '100%', flexDirection: 'column', }}>
+				<div style={{ display: 'flex', flexWrap: 'wrap', height: '130px', width: '100%', flexDirection: 'column', }}>
 					<rapid-banner ref={bannerRef} onClick={dismissBanner}>
 						<div slot="content">
 							A banner for displaying information... Click to dismiss!
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
index a872c015cb..d0660c0a46 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
@@ -17,7 +17,7 @@ export default function BreadcrumbDemo({ children, color }) {
 	return (
 		<CodeSection>
 			<div style={{ color: 'var(--neutral-foreground-rest)', width: '-webkit-fill-available'}}>
-				<div style={{ display: 'flex', flexWrap: 'wrap', height: '45px', width: '100%', flexDirection: 'column', }}>
+				<div style={{ display: 'flex', flexWrap: 'wrap', height: '55px', width: '100%', flexDirection: 'column', }}>
 					<rapid-breadcrumb>
 						<rapid-breadcrumb-item href="#">Breadcrumb item 1</rapid-breadcrumb-item>
 						<rapid-breadcrumb-item href="#">Breadcrumb item 2</rapid-breadcrumb-item>
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js
index f55a32100a..8a4e57a34e 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js
@@ -11,7 +11,7 @@ function setup() {
 	}
 }
 
-export default function HorizontalScrollDemo({ children, color }) {
+export default function HorizontalScrollDemo({ inIndex = false }) {
 	setup();
 	return (
 		<CodeSection>
@@ -30,7 +30,8 @@ export default function HorizontalScrollDemo({ children, color }) {
 							Card number 3
 							<rapid-button>A button</rapid-button>
 						</rapid-card>
-						<rapid-card>
+						{!inIndex ?
+						(<><rapid-card>
 							Card number 4
 							<rapid-button>A button</rapid-button>
 						</rapid-card>
@@ -65,7 +66,7 @@ export default function HorizontalScrollDemo({ children, color }) {
 						<rapid-card>
 							Card number 12
 							<rapid-button>A button</rapid-button>
-						</rapid-card>
+						</rapid-card></>) : null}
 					</rapid-horizontal-scroll>
 				</div>
 			</div>

From b07ce78bee5fe720c5743e69d7bb6f3ebe8f5173 Mon Sep 17 00:00:00 2001
From: Matt Walker <matt.walker@genesis.global>
Date: Mon, 2 Dec 2024 10:24:07 +0000
Subject: [PATCH 17/17] fix: merge conflict code PTL-0

---
 .../009_presentation/examples/banner.js                       | 2 +-
 .../009_presentation/examples/breadcrumb.js                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js
index b5beaf0bcb..6ce2e3ff2e 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js
@@ -23,7 +23,7 @@ export default function BannerDemo({ children, color }) {
 	return (
 		<CodeSection>
 			<div style={{ color: 'var(--neutral-foreground-rest)', width: '100%'}}>
-				<div style={{ display: 'flex', flexWrap: 'wrap', height: '75px', width: '100%', flexDirection: 'column', }}>
+				<div style={{ display: 'flex', flexWrap: 'wrap', height: '130px', width: '100%', flexDirection: 'column', }}>
 					<rapid-banner ref={bannerRef} onClick={dismissBanner}>
 						<div slot="content">
 							A banner for displaying information... Click to dismiss!
diff --git a/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js b/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
index 478da7da87..e1d00edac0 100644
--- a/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
+++ b/docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js
@@ -16,8 +16,8 @@ export default function BreadcrumbDemo({ children, color }) {
 
 	return (
 		<CodeSection>
-			<div style={{ color: 'var(--neutral-foreground-rest)', width: '100%'}}>
-				<div style={{ display: 'flex', flexWrap: 'wrap', height: '45px', width: '100%', flexDirection: 'column', }}>
+			<div style={{ color: 'var(--neutral-foreground-rest)', width: 'width: 100%'}}>
+				<div style={{ display: 'flex', flexWrap: 'wrap', height: '55px', width: '100%', flexDirection: 'column', }}>
 					<rapid-breadcrumb>
 						<rapid-breadcrumb-item href="#">Breadcrumb item 1</rapid-breadcrumb-item>
 						<rapid-breadcrumb-item href="#">Breadcrumb item 2</rapid-breadcrumb-item>