From f2e2a1e48c9e1ea8f8c9280010cb9fe87ed829da Mon Sep 17 00:00:00 2001
From: Sirod Johnson <sjohnson@forumone.com>
Date: Fri, 12 Jul 2024 00:04:26 -0400
Subject: [PATCH 1/2] Addresses various component issues and adjusts spacing in
 component story displays

---
 source/00-config/vars/colors.css              |  2 +-
 source/01-global/00-colors/color.stories.tsx  |  8 +++
 .../01-global/01-typography/fonts.stories.tsx |  8 +++
 .../01-typography/letterspacing.stories.tsx   |  8 +++
 .../01-typography/line-height.stories.tsx     |  8 +++
 .../01-typography/text-styles.stories.tsx     |  8 +++
 .../typographic-scale.stories.tsx             |  8 +++
 source/01-global/02-spacing/space.stories.tsx |  8 +++
 .../03-box-shadow/shadows.stories.tsx         |  8 +++
 .../04-transitions/duration.stories.tsx       |  8 +++
 .../04-transitions/easing.stories.tsx         |  8 +++
 .../13-headings/headings.stories.tsx          |  8 +++
 .../14-paragraph/paragraph.stories.tsx        |  8 +++
 .../inline-elements.stories.tsx               |  8 +++
 .../16-blockquote/blockquote.stories.tsx      |  8 +++
 .../preformatted-text.stories.tsx             |  8 +++
 .../horizontal-rule.stories.tsx               |  8 +++
 .../19-address/address.stories.tsx            |  8 +++
 .../unordered-list.stories.tsx                |  8 +++
 .../21-ordered-list/ordered-list.stories.tsx  |  8 +++
 .../definition-list.stories.tsx               |  8 +++
 ...le-with-column-and-row-headers.stories.tsx |  8 +++
 .../table-with-row-headers.stories.tsx        |  8 +++
 .../html-elements/24-table/table.stories.tsx  |  8 +++
 .../03-components/Article/Article.stories.tsx |  8 +++
 .../03-components/Button/Button.stories.tsx   |  8 +++
 .../ButtonGroup/ButtonGroup.stories.tsx       | 40 ++++++++++++++-
 .../03-components/ButtonGroup/ButtonGroup.tsx |  6 +++
 .../ButtonGroup/button-group.module.css       | 16 ++++++
 source/03-components/Card/Card.stories.tsx    |  8 +++
 .../03-components/Details/Details.stories.tsx |  8 +++
 .../Fieldset/Fieldset.stories.tsx             |  8 +++
 .../03-components/Figure/Figure.stories.tsx   |  8 +++
 source/03-components/Figure/figure.module.css | 34 +++++++------
 .../FormItem/Checkboxes.stories.tsx           |  8 +++
 .../FormItem/FormItem.stories.tsx             |  8 +++
 source/03-components/FormItem/FormItem.tsx    | 47 +++++++++++++++++-
 .../03-components/FormItem/Input.stories.tsx  |  8 +++
 .../03-components/FormItem/Radios.stories.tsx |  8 +++
 .../03-components/FormItem/Select.stories.tsx |  8 +++
 .../FormItem/Textarea.stories.tsx             | 49 +++++++++++++++++++
 source/03-components/FormItem/checkbox.yml    |  1 +
 .../FormItem/form-item-input.css              |  9 +++-
 source/03-components/FormItem/radio.yml       |  1 +
 source/03-components/FormItem/textarea.yml    |  6 +++
 source/03-components/FormItem/time.yml        |  2 +-
 .../ImageTeaser/ImageTeaser.stories.tsx       |  8 +++
 source/03-components/List/List.stories.tsx    |  8 +++
 .../PageTitle/PageTitle.stories.tsx           |  8 +++
 .../ReadMoreLink/ReadMoreLink.stories.tsx     |  8 +++
 .../SiteName/SiteName.stories.tsx             |  8 +++
 source/03-components/SiteName/site-name.yml   |  2 +-
 .../StyledSelect/StyledSelect.stories.tsx     |  8 +++
 source/03-components/Tag/Tag.stories.tsx      |  8 +++
 .../03-components/TagList/TagList.stories.tsx |  8 +++
 source/03-components/Video/Video.stories.tsx  | 11 +++++
 .../03-components/Wysiwyg/Wysiwyg.stories.tsx |  8 +++
 source/03-components/Wysiwyg/wysiwyg.yml      |  8 +--
 58 files changed, 553 insertions(+), 25 deletions(-)
 create mode 100644 source/03-components/FormItem/Textarea.stories.tsx
 create mode 100644 source/03-components/FormItem/textarea.yml

diff --git a/source/00-config/vars/colors.css b/source/00-config/vars/colors.css
index 3910ab9c..53f13c8b 100644
--- a/source/00-config/vars/colors.css
+++ b/source/00-config/vars/colors.css
@@ -21,7 +21,7 @@
   --selection-text: var(--grayscale-white);
 
   --table-background: var(--grayscale-white);
-  --tablebackground-foot: var(--grayscale-gray-1);
+  --table-background-foot: var(--grayscale-gray-1);
   --table-background-head: var(--grayscale-gray-1);
   --table-border: var(--grayscale-gray-5);
 
diff --git a/source/01-global/00-colors/color.stories.tsx b/source/01-global/00-colors/color.stories.tsx
index 11968aa5..00008935 100644
--- a/source/01-global/00-colors/color.stories.tsx
+++ b/source/01-global/00-colors/color.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './color.module.css';
 
@@ -128,6 +129,13 @@ const ColorPaletteComponent = ({ brand, grayscale, other }: ColorFamily) => (
 const meta: Meta<typeof ColorPaletteComponent> = {
   title: 'Global/Color Palette',
   component: ColorPaletteComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     brand: {
       table: {
diff --git a/source/01-global/01-typography/fonts.stories.tsx b/source/01-global/01-typography/fonts.stories.tsx
index 2385d024..a8bd9dc9 100644
--- a/source/01-global/01-typography/fonts.stories.tsx
+++ b/source/01-global/01-typography/fonts.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './fonts.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Fonts',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {
diff --git a/source/01-global/01-typography/letterspacing.stories.tsx b/source/01-global/01-typography/letterspacing.stories.tsx
index ed34d86e..2dd87c90 100644
--- a/source/01-global/01-typography/letterspacing.stories.tsx
+++ b/source/01-global/01-typography/letterspacing.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './letterspacing.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Letterspacing',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {
diff --git a/source/01-global/01-typography/line-height.stories.tsx b/source/01-global/01-typography/line-height.stories.tsx
index 181a8659..0b393b10 100644
--- a/source/01-global/01-typography/line-height.stories.tsx
+++ b/source/01-global/01-typography/line-height.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './line-height.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Line Height',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {
diff --git a/source/01-global/01-typography/text-styles.stories.tsx b/source/01-global/01-typography/text-styles.stories.tsx
index 5e0d5c2c..25df8874 100644
--- a/source/01-global/01-typography/text-styles.stories.tsx
+++ b/source/01-global/01-typography/text-styles.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import styles from './text-styles.module.css';
 
 const TextStylesComponent = () => {
@@ -23,6 +24,13 @@ const TextStylesComponent = () => {
 const meta: Meta<typeof TextStylesComponent> = {
   title: 'Global/Typography/Text Styles',
   component: TextStylesComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/01-typography/typographic-scale.stories.tsx b/source/01-global/01-typography/typographic-scale.stories.tsx
index be093c90..0590f8d8 100644
--- a/source/01-global/01-typography/typographic-scale.stories.tsx
+++ b/source/01-global/01-typography/typographic-scale.stories.tsx
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
 import typographyVarsAsString from '../../00-config/vars/typography.css?raw';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './typographic-scale.module.css';
 
@@ -26,6 +27,13 @@ const typographyVarsMin = typographyVars.map((e: string) => {
 
 const settings: Meta = {
   title: 'Global/Typography/Typographic Scale',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {
diff --git a/source/01-global/02-spacing/space.stories.tsx b/source/01-global/02-spacing/space.stories.tsx
index de7fbf39..f627eb91 100644
--- a/source/01-global/02-spacing/space.stories.tsx
+++ b/source/01-global/02-spacing/space.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 
 const allVars = getCssVariables();
@@ -61,6 +62,13 @@ const SpacingComponent = ({ spacing }: { spacing: SpacingOptions }) => {
 const meta: Meta<typeof SpacingComponent> = {
   title: 'Global/Spacing',
   component: SpacingComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     spacing: {
       table: {
diff --git a/source/01-global/03-box-shadow/shadows.stories.tsx b/source/01-global/03-box-shadow/shadows.stories.tsx
index e61e6ff1..33f21c43 100644
--- a/source/01-global/03-box-shadow/shadows.stories.tsx
+++ b/source/01-global/03-box-shadow/shadows.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './shadows.module.css';
 
@@ -42,6 +43,13 @@ function BoxShadowDemo({
 const meta: Meta<typeof BoxShadowDemo> = {
   title: 'Global/Box Shadows',
   component: BoxShadowDemo,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     boxShadow: {
       table: {
diff --git a/source/01-global/04-transitions/duration.stories.tsx b/source/01-global/04-transitions/duration.stories.tsx
index 48b54c2a..1f4bf696 100644
--- a/source/01-global/04-transitions/duration.stories.tsx
+++ b/source/01-global/04-transitions/duration.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './duration.module.css';
 
@@ -43,6 +44,13 @@ const DurationComponent = ({ duration }: { duration: DurationOptions }) => {
 const meta: Meta<typeof DurationComponent> = {
   title: 'Global/Duration',
   component: DurationComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     duration: {
       table: {
diff --git a/source/01-global/04-transitions/easing.stories.tsx b/source/01-global/04-transitions/easing.stories.tsx
index 3cb2506b..5ddc3e56 100644
--- a/source/01-global/04-transitions/easing.stories.tsx
+++ b/source/01-global/04-transitions/easing.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './easing.module.css';
 
@@ -41,6 +42,13 @@ const EasingComponent = ({ easing }: { easing: EasingOptions }) => {
 const meta: Meta<typeof EasingComponent> = {
   title: 'Global/Easing',
   component: EasingComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     easing: {
       table: {
diff --git a/source/01-global/html-elements/13-headings/headings.stories.tsx b/source/01-global/html-elements/13-headings/headings.stories.tsx
index f9fe2121..bd8bbad8 100644
--- a/source/01-global/html-elements/13-headings/headings.stories.tsx
+++ b/source/01-global/html-elements/13-headings/headings.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const settings: Meta = {
   title: 'Global/HTML Elements/Headings',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/14-paragraph/paragraph.stories.tsx b/source/01-global/html-elements/14-paragraph/paragraph.stories.tsx
index 5ed53eca..32d98321 100644
--- a/source/01-global/html-elements/14-paragraph/paragraph.stories.tsx
+++ b/source/01-global/html-elements/14-paragraph/paragraph.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Paragraph',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/15-inline-elements/inline-elements.stories.tsx b/source/01-global/html-elements/15-inline-elements/inline-elements.stories.tsx
index 06d0aa15..b6107956 100644
--- a/source/01-global/html-elements/15-inline-elements/inline-elements.stories.tsx
+++ b/source/01-global/html-elements/15-inline-elements/inline-elements.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Inline Elements',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/16-blockquote/blockquote.stories.tsx b/source/01-global/html-elements/16-blockquote/blockquote.stories.tsx
index fc0b0854..2c0232bf 100644
--- a/source/01-global/html-elements/16-blockquote/blockquote.stories.tsx
+++ b/source/01-global/html-elements/16-blockquote/blockquote.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Blockquote',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/17-preformatted-text/preformatted-text.stories.tsx b/source/01-global/html-elements/17-preformatted-text/preformatted-text.stories.tsx
index 6aa995ef..6b9ca364 100644
--- a/source/01-global/html-elements/17-preformatted-text/preformatted-text.stories.tsx
+++ b/source/01-global/html-elements/17-preformatted-text/preformatted-text.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const data = `
     P R E F O R M A T T E D T E X T
@@ -12,6 +13,13 @@ const data = `
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Preformatted Text',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/18-horizontal-rule/horizontal-rule.stories.tsx b/source/01-global/html-elements/18-horizontal-rule/horizontal-rule.stories.tsx
index 729700a7..0484e72f 100644
--- a/source/01-global/html-elements/18-horizontal-rule/horizontal-rule.stories.tsx
+++ b/source/01-global/html-elements/18-horizontal-rule/horizontal-rule.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Horizontal Rule',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/19-address/address.stories.tsx b/source/01-global/html-elements/19-address/address.stories.tsx
index 28568f3a..c3c9d953 100644
--- a/source/01-global/html-elements/19-address/address.stories.tsx
+++ b/source/01-global/html-elements/19-address/address.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Address',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/20-unordered-list/unordered-list.stories.tsx b/source/01-global/html-elements/20-unordered-list/unordered-list.stories.tsx
index ac7d4cd4..1137e5e5 100644
--- a/source/01-global/html-elements/20-unordered-list/unordered-list.stories.tsx
+++ b/source/01-global/html-elements/20-unordered-list/unordered-list.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Unordered List',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/21-ordered-list/ordered-list.stories.tsx b/source/01-global/html-elements/21-ordered-list/ordered-list.stories.tsx
index 57ca74c2..4edd0a98 100644
--- a/source/01-global/html-elements/21-ordered-list/ordered-list.stories.tsx
+++ b/source/01-global/html-elements/21-ordered-list/ordered-list.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Ordered List',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/23-definition-list/definition-list.stories.tsx b/source/01-global/html-elements/23-definition-list/definition-list.stories.tsx
index 6c0eb026..ad7f067f 100644
--- a/source/01-global/html-elements/23-definition-list/definition-list.stories.tsx
+++ b/source/01-global/html-elements/23-definition-list/definition-list.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const settings: Meta = {
   title: 'Global/HTML Elements/Definition List',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/24-table/table-with-column-and-row-headers.stories.tsx b/source/01-global/html-elements/24-table/table-with-column-and-row-headers.stories.tsx
index bd7aaa47..f67092a1 100644
--- a/source/01-global/html-elements/24-table/table-with-column-and-row-headers.stories.tsx
+++ b/source/01-global/html-elements/24-table/table-with-column-and-row-headers.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Table/Table with Column and Row Headers',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/24-table/table-with-row-headers.stories.tsx b/source/01-global/html-elements/24-table/table-with-row-headers.stories.tsx
index 0c729ffd..177f3cbd 100644
--- a/source/01-global/html-elements/24-table/table-with-row-headers.stories.tsx
+++ b/source/01-global/html-elements/24-table/table-with-row-headers.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Table/Table With Row Headers',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/01-global/html-elements/24-table/table.stories.tsx b/source/01-global/html-elements/24-table/table.stories.tsx
index 484c76be..47bbd82f 100644
--- a/source/01-global/html-elements/24-table/table.stories.tsx
+++ b/source/01-global/html-elements/24-table/table.stories.tsx
@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Table',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/03-components/Article/Article.stories.tsx b/source/03-components/Article/Article.stories.tsx
index c0f5ef54..d2ab654f 100644
--- a/source/03-components/Article/Article.stories.tsx
+++ b/source/03-components/Article/Article.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import ArticleComponent from './Article';
 import articleArgs from './article.yml';
 
 const meta: Meta<typeof ArticleComponent> = {
   title: 'Components/Article',
   component: ArticleComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/Button/Button.stories.tsx b/source/03-components/Button/Button.stories.tsx
index d6d0600e..2a2160c2 100644
--- a/source/03-components/Button/Button.stories.tsx
+++ b/source/03-components/Button/Button.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import {
   Button as ButtonComponent,
   LinkButton as LinkButtonComponent,
@@ -20,6 +21,13 @@ function DemoButtons({ label, ...props }: SharedButtonProps): JSX.Element {
 const meta: Meta<typeof DemoButtons> = {
   title: 'Components/Button',
   component: DemoButtons,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   // More on automatic documentation: https://storybook.js.org/docs/react/writing-docs/autodocs
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
diff --git a/source/03-components/ButtonGroup/ButtonGroup.stories.tsx b/source/03-components/ButtonGroup/ButtonGroup.stories.tsx
index 50a4bded..9682cdc5 100644
--- a/source/03-components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/source/03-components/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import ButtonGroupComponent from './ButtonGroup';
 import buttonGroupArgs from './button-group.yml';
 
 const meta: Meta<typeof ButtonGroupComponent> = {
   title: 'Components/Button Group',
   component: ButtonGroupComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
   argTypes: {
     buttons: {
@@ -14,9 +22,37 @@ const meta: Meta<typeof ButtonGroupComponent> = {
 };
 
 type Story = StoryObj<typeof ButtonGroupComponent>;
-const ButtonGroup: Story = {
+const Primary: Story = {
   args: buttonGroupArgs,
 };
 
+const Secondary: Story = {
+  args: {
+    ...buttonGroupArgs,
+    variant: 'secondary',
+  },
+};
+
+const Danger: Story = {
+  args: {
+    ...buttonGroupArgs,
+    variant: 'danger',
+  },
+};
+
+const Large: Story = {
+  args: {
+    ...buttonGroupArgs,
+    styleSize: 'large',
+  },
+};
+
+const Small: Story = {
+  args: {
+    ...buttonGroupArgs,
+    styleSize: 'small',
+  },
+};
+
 export default meta;
-export { ButtonGroup };
+export { Danger, Large, Primary, Secondary, Small };
diff --git a/source/03-components/ButtonGroup/ButtonGroup.tsx b/source/03-components/ButtonGroup/ButtonGroup.tsx
index d272c20c..c0633554 100644
--- a/source/03-components/ButtonGroup/ButtonGroup.tsx
+++ b/source/03-components/ButtonGroup/ButtonGroup.tsx
@@ -15,6 +15,8 @@ interface ButtonGroupProps extends GessoComponent {
   heading: string;
   buttons: Button[];
   activeLabel?: string;
+  variant?: string;
+  styleSize?: 'small' | 'medium' | 'large';
 }
 
 function ButtonGroup({
@@ -23,6 +25,8 @@ function ButtonGroup({
   modifierClasses,
   buttons,
   activeLabel = '(active)',
+  variant,
+  styleSize = 'medium',
 }: ButtonGroupProps): JSX.Element {
   return (
     <Element
@@ -44,6 +48,8 @@ function ButtonGroup({
               className={clsx(
                 styles.link,
                 button.isActive && styles['is-active'],
+                variant && variant !== 'primary' && styles[`link--${variant}`],
+                styleSize !== 'medium' && styles[`link--${styleSize}`],
               )}
             >
               {button.text}
diff --git a/source/03-components/ButtonGroup/button-group.module.css b/source/03-components/ButtonGroup/button-group.module.css
index bb59df01..926b82be 100644
--- a/source/03-components/ButtonGroup/button-group.module.css
+++ b/source/03-components/ButtonGroup/button-group.module.css
@@ -33,6 +33,22 @@ $border-radius: 3px;
     }
   }
 
+  .link--secondary {
+    composes: button--secondary from '../Button/button.module.css';
+  }
+
+  .link--danger {
+    composes: button--danger from '../Button/button.module.css';
+  }
+
+  .link--large {
+    composes: button--large from '../Button/button.module.css';
+  }
+
+  .link--small {
+    composes: button--small from '../Button/button.module.css';
+  }
+
   .item {
     margin: 0;
 
diff --git a/source/03-components/Card/Card.stories.tsx b/source/03-components/Card/Card.stories.tsx
index db3fe032..01ac4097 100644
--- a/source/03-components/Card/Card.stories.tsx
+++ b/source/03-components/Card/Card.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import Grid from '../../02-layouts/Grid/Grid';
 import CardComponent from './Card';
 import styles from './card.module.css';
@@ -8,6 +9,13 @@ import cardArgs from './card.yml';
 const meta: Meta<typeof CardComponent> = {
   title: 'Components/Card',
   component: CardComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
   argTypes: {
     children: {
diff --git a/source/03-components/Details/Details.stories.tsx b/source/03-components/Details/Details.stories.tsx
index 5cb1cede..31f0eedc 100644
--- a/source/03-components/Details/Details.stories.tsx
+++ b/source/03-components/Details/Details.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import DetailsComponent from './Details';
 import detailsArgs from './details.yml';
 
 const meta: Meta<typeof DetailsComponent> = {
   title: 'Components/Details',
   component: DetailsComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
   argTypes: {
     children: {
diff --git a/source/03-components/Fieldset/Fieldset.stories.tsx b/source/03-components/Fieldset/Fieldset.stories.tsx
index d54795a8..2b92da53 100644
--- a/source/03-components/Fieldset/Fieldset.stories.tsx
+++ b/source/03-components/Fieldset/Fieldset.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import FieldsetComponent from './Fieldset';
 import styles from './fieldset.module.css';
 import fieldsetArgs from './fieldset.yml';
@@ -7,6 +8,13 @@ import fieldsetArgs from './fieldset.yml';
 const meta: Meta<typeof FieldsetComponent> = {
   title: 'Components/Fieldset',
   component: FieldsetComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
   argTypes: {
     children: {
diff --git a/source/03-components/Figure/Figure.stories.tsx b/source/03-components/Figure/Figure.stories.tsx
index 44a48070..e52a25af 100644
--- a/source/03-components/Figure/Figure.stories.tsx
+++ b/source/03-components/Figure/Figure.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import { Video } from '../Video/Video.stories';
 import FigureComponent from './Figure';
 import styles from './figure.module.css';
@@ -8,6 +9,13 @@ import figureArgs from './figure.yml';
 const meta: Meta<typeof FigureComponent> = {
   title: 'Components/Figure',
   component: FigureComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/Figure/figure.module.css b/source/03-components/Figure/figure.module.css
index 74c5b6e5..de321b4d 100644
--- a/source/03-components/Figure/figure.module.css
+++ b/source/03-components/Figure/figure.module.css
@@ -2,7 +2,27 @@
   .figure {
     display: table;
     margin-block: 0 var(--spacing-2);
+  }
 
+  .caption {
+    caption-side: bottom;
+    display: table-caption;
+    font-weight: var(--font-weight-semibold);
+    margin-block-start: var(--spacing-1);
+  }
+
+  .figure--iframe {
+    display: block;
+    inline-size: 100%;
+
+    .caption {
+      display: block;
+    }
+  }
+}
+
+@layer utility {
+  .figure {
     &:global(.align-center),
     &:global(.u-align-center) {
       clear: both;
@@ -27,24 +47,10 @@
     }
   }
 
-  .caption {
-    caption-side: bottom;
-    display: table-caption;
-    font-weight: var(--font-weight-semibold);
-    margin-block-start: var(--spacing-1);
-  }
-
   .figure--iframe {
-    display: block;
-    inline-size: 100%;
-
     &:global(.align-center),
     &:global(.u-align-center) {
       display: block;
     }
-
-    .caption {
-      display: block;
-    }
   }
 }
diff --git a/source/03-components/FormItem/Checkboxes.stories.tsx b/source/03-components/FormItem/Checkboxes.stories.tsx
index b1ff917c..aa36d8a0 100644
--- a/source/03-components/FormItem/Checkboxes.stories.tsx
+++ b/source/03-components/FormItem/Checkboxes.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import Fieldset from '../Fieldset/Fieldset';
 import fieldsetStyles from '../Fieldset/fieldset.module.css';
 import { Input } from './FormItem';
@@ -6,6 +7,13 @@ import { Checkbox } from './FormItem.stories';
 
 const meta: Meta = {
   title: 'Components/Form Item/Checkboxes',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },
diff --git a/source/03-components/FormItem/FormItem.stories.tsx b/source/03-components/FormItem/FormItem.stories.tsx
index f970e22f..300376d0 100644
--- a/source/03-components/FormItem/FormItem.stories.tsx
+++ b/source/03-components/FormItem/FormItem.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import { Input } from './FormItem';
 import checkboxArgs from './checkbox.yml';
 import radioArgs from './radio.yml';
@@ -6,6 +7,13 @@ import radioArgs from './radio.yml';
 const meta: Meta<typeof Input> = {
   title: 'Components/Form Item',
   component: Input,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   args: {
     isDisabled: false,
     descriptionDisplay: 'after',
diff --git a/source/03-components/FormItem/FormItem.tsx b/source/03-components/FormItem/FormItem.tsx
index a3d5a781..a9b7b66b 100644
--- a/source/03-components/FormItem/FormItem.tsx
+++ b/source/03-components/FormItem/FormItem.tsx
@@ -5,6 +5,7 @@ import {
   InputHTMLAttributes,
   ReactNode,
   SelectHTMLAttributes,
+  TextareaHTMLAttributes,
 } from 'react';
 import FormItemLabel from './FormItemLabel';
 import FormItemWrapper from './FormItemWrapper';
@@ -30,6 +31,8 @@ interface FormItemProps extends GessoComponent {
 type InputProps = Omit<FormItemProps, 'children'> &
   InputHTMLAttributes<HTMLInputElement>;
 type SelectProps = FormItemProps & SelectHTMLAttributes<HTMLSelectElement>;
+type TextareaProps = FormItemProps &
+  TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 function FormItem({
   id,
@@ -187,5 +190,47 @@ function Select({
   );
 }
 
+function Textarea({
+  id,
+  label,
+  labelDisplay = 'before',
+  prefix,
+  suffix,
+  description,
+  descriptionDisplay = 'after',
+  errors,
+  modifierClasses,
+  isDisabled = false,
+  isFullWidth = false,
+  isRequired = false,
+  ...props
+}: TextareaProps): JSX.Element {
+  return (
+    <FormItem
+      id={id}
+      type="textarea"
+      label={label}
+      labelDisplay={labelDisplay}
+      prefix={prefix}
+      suffix={suffix}
+      description={description}
+      descriptionDisplay={descriptionDisplay}
+      errors={errors}
+      modifierClasses={modifierClasses}
+      isDisabled={isDisabled}
+      isFullWidth={isFullWidth}
+      isRequired={isRequired}
+    >
+      <textarea
+        id={id}
+        disabled={isDisabled}
+        required={isRequired}
+        aria-required="true"
+        {...props}
+      />
+    </FormItem>
+  );
+}
+
 export default FormItem;
-export { Input, Select };
+export { Input, Select, Textarea };
diff --git a/source/03-components/FormItem/Input.stories.tsx b/source/03-components/FormItem/Input.stories.tsx
index d7e8f345..7ec8c42b 100644
--- a/source/03-components/FormItem/Input.stories.tsx
+++ b/source/03-components/FormItem/Input.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import { Input } from './FormItem';
 import colorArgs from './color.yml';
 import dateArgs from './date.yml';
@@ -20,6 +21,13 @@ import weekArgs from './week.yml';
 const meta: Meta<typeof Input> = {
   title: 'Components/Form Item/Input',
   component: Input,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   args: {
     isDisabled: false,
     descriptionDisplay: 'after',
diff --git a/source/03-components/FormItem/Radios.stories.tsx b/source/03-components/FormItem/Radios.stories.tsx
index 93946b09..f84fc0c1 100644
--- a/source/03-components/FormItem/Radios.stories.tsx
+++ b/source/03-components/FormItem/Radios.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import Fieldset from '../Fieldset/Fieldset';
 import fieldsetStyles from '../Fieldset/fieldset.module.css';
 import { Input } from './FormItem';
@@ -6,6 +7,13 @@ import { Radio } from './FormItem.stories';
 
 const meta: Meta = {
   title: 'Components/Form Item/Radios',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 const Radios: StoryObj = {
diff --git a/source/03-components/FormItem/Select.stories.tsx b/source/03-components/FormItem/Select.stories.tsx
index fb0bf024..b97ed36d 100644
--- a/source/03-components/FormItem/Select.stories.tsx
+++ b/source/03-components/FormItem/Select.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import { Select } from './FormItem';
 import withGroupArgs from './select-with-groups.yml';
 import selectArgs from './select.yml';
@@ -7,6 +8,13 @@ import selectArgs from './select.yml';
 const meta: Meta<typeof Select> = {
   title: 'Components/Form Item/Select',
   component: Select,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   args: {
     labelDisplay: 'before',
     descriptionDisplay: 'after',
diff --git a/source/03-components/FormItem/Textarea.stories.tsx b/source/03-components/FormItem/Textarea.stories.tsx
new file mode 100644
index 00000000..c4cc1910
--- /dev/null
+++ b/source/03-components/FormItem/Textarea.stories.tsx
@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
+import { Textarea } from './FormItem';
+import textareaArgs from './textarea.yml';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Form Item/Textarea',
+  component: Textarea,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
+  args: {
+    labelDisplay: 'before',
+    prefix: '',
+    suffix: '',
+    description: 'The description for this form field.',
+    descriptionDisplay: 'after',
+    errors: '',
+    isDisabled: false,
+    isFullWidth: false,
+    isRequired: false,
+  },
+  argTypes: {
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+type Story = StoryObj<typeof Textarea>;
+const Default: Story = {
+  args: {
+    ...textareaArgs,
+  },
+};
+
+export default meta;
+export { Default };
diff --git a/source/03-components/FormItem/checkbox.yml b/source/03-components/FormItem/checkbox.yml
index ba9d66a2..6c9c244c 100644
--- a/source/03-components/FormItem/checkbox.yml
+++ b/source/03-components/FormItem/checkbox.yml
@@ -3,3 +3,4 @@ id: 'checkbox'
 label: 'Checkbox'
 labelDisplay: 'after'
 type: 'checkbox'
+description: 'The description for this form field.'
diff --git a/source/03-components/FormItem/form-item-input.css b/source/03-components/FormItem/form-item-input.css
index 0dc12b02..05eaab8e 100644
--- a/source/03-components/FormItem/form-item-input.css
+++ b/source/03-components/FormItem/form-item-input.css
@@ -11,11 +11,12 @@
     .form-item--select,
     .form-item--tel,
     .form-item--text,
+    .form-item--textarea,
     .form-item--time,
     .form-item--url,
     .form-item--week
   ) {
-  & :is(input, select) {
+  & :is(input, select, textarea) {
     @include focus;
 
     appearance: none;
@@ -57,3 +58,9 @@
     width: 100%;
   }
 }
+
+:is(.form-item--textarea) {
+  & :is(textarea) {
+    height: auto;
+  }
+}
diff --git a/source/03-components/FormItem/radio.yml b/source/03-components/FormItem/radio.yml
index 00308400..f6623c4d 100644
--- a/source/03-components/FormItem/radio.yml
+++ b/source/03-components/FormItem/radio.yml
@@ -4,3 +4,4 @@ label: 'Radio option'
 labelDisplay: 'after'
 type: 'radio'
 name: 'demo'
+description: 'The description for this form field.'
diff --git a/source/03-components/FormItem/textarea.yml b/source/03-components/FormItem/textarea.yml
new file mode 100644
index 00000000..36c16ec6
--- /dev/null
+++ b/source/03-components/FormItem/textarea.yml
@@ -0,0 +1,6 @@
+---
+id: 'text'
+label: 'Textarea'
+placeholder: ''
+cols: 60
+rows: 5
diff --git a/source/03-components/FormItem/time.yml b/source/03-components/FormItem/time.yml
index 4c7df95d..7ba0db60 100644
--- a/source/03-components/FormItem/time.yml
+++ b/source/03-components/FormItem/time.yml
@@ -1,6 +1,6 @@
 ---
 id: 'time'
-label: 'Text'
+label: 'Time'
 type: 'time'
 placeholder: 'hh:mm:ss'
 size: 12
diff --git a/source/03-components/ImageTeaser/ImageTeaser.stories.tsx b/source/03-components/ImageTeaser/ImageTeaser.stories.tsx
index 60183947..bd3e4cc2 100644
--- a/source/03-components/ImageTeaser/ImageTeaser.stories.tsx
+++ b/source/03-components/ImageTeaser/ImageTeaser.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import ImageTeaserComponent from './ImageTeaser';
 import imageTeaserArgs from './image-teaser.yml';
 
 const meta: Meta<typeof ImageTeaserComponent> = {
   title: 'Components/Image Teaser',
   component: ImageTeaserComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/List/List.stories.tsx b/source/03-components/List/List.stories.tsx
index fb07448e..d00d5760 100644
--- a/source/03-components/List/List.stories.tsx
+++ b/source/03-components/List/List.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import listStyles from './list.module.css';
 
 function DemoList({ style }: { style: string }): JSX.Element {
@@ -14,6 +15,13 @@ function DemoList({ style }: { style: string }): JSX.Element {
 const meta: Meta<typeof DemoList> = {
   title: 'Components/List',
   component: DemoList,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     style: {
       options: ['border', 'clean', 'inline', 'pipeline', 'column'],
diff --git a/source/03-components/PageTitle/PageTitle.stories.tsx b/source/03-components/PageTitle/PageTitle.stories.tsx
index ad64fc27..c2338771 100644
--- a/source/03-components/PageTitle/PageTitle.stories.tsx
+++ b/source/03-components/PageTitle/PageTitle.stories.tsx
@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import PageTitleComponent from './PageTitle';
 import pageTitleArgs from './page-title.yml';
 
 const meta: Meta<typeof PageTitleComponent> = {
   title: 'Components/Page Title',
   component: PageTitleComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     pageTitle: {
       type: 'string',
diff --git a/source/03-components/ReadMoreLink/ReadMoreLink.stories.tsx b/source/03-components/ReadMoreLink/ReadMoreLink.stories.tsx
index b14e5b15..240daab9 100644
--- a/source/03-components/ReadMoreLink/ReadMoreLink.stories.tsx
+++ b/source/03-components/ReadMoreLink/ReadMoreLink.stories.tsx
@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import ReadMoreLinkComponent from './ReadMoreLink';
 import readMoreLinkArgs from './read-more-link.yml';
 
 const meta: Meta<typeof ReadMoreLinkComponent> = {
   title: 'Components/Read More Link',
   component: ReadMoreLinkComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/SiteName/SiteName.stories.tsx b/source/03-components/SiteName/SiteName.stories.tsx
index a9bd722c..7e68a984 100644
--- a/source/03-components/SiteName/SiteName.stories.tsx
+++ b/source/03-components/SiteName/SiteName.stories.tsx
@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import SiteNameComponent from './SiteName';
 import siteNameArgs from './site-name.yml';
 
 const meta: Meta<typeof SiteNameComponent> = {
   title: 'Components/Site Name',
   component: SiteNameComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/SiteName/site-name.yml b/source/03-components/SiteName/site-name.yml
index 2ffcb1f9..e1cdc518 100644
--- a/source/03-components/SiteName/site-name.yml
+++ b/source/03-components/SiteName/site-name.yml
@@ -1,3 +1,3 @@
 ---
-siteName: 'Site Title'
+siteName: 'Site Name'
 modifierClasses: ''
diff --git a/source/03-components/StyledSelect/StyledSelect.stories.tsx b/source/03-components/StyledSelect/StyledSelect.stories.tsx
index d992dfe3..e5275340 100644
--- a/source/03-components/StyledSelect/StyledSelect.stories.tsx
+++ b/source/03-components/StyledSelect/StyledSelect.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import StyledSelectComponent from './StyledSelect';
 import styledSelectArgs from './styled-select.yml';
 import withGroupsArgs from './with-groups.yml';
@@ -6,6 +7,13 @@ import withGroupsArgs from './with-groups.yml';
 const meta: Meta<typeof StyledSelectComponent> = {
   title: 'Components/Styled Select',
   component: StyledSelectComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/Tag/Tag.stories.tsx b/source/03-components/Tag/Tag.stories.tsx
index f3c7dc2b..1e6c31a1 100644
--- a/source/03-components/Tag/Tag.stories.tsx
+++ b/source/03-components/Tag/Tag.stories.tsx
@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import TagComponent from './Tag';
 import tagArgs from './tag.yml';
 
 const meta: Meta<typeof TagComponent> = {
   title: 'Components/Tag',
   component: TagComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/TagList/TagList.stories.tsx b/source/03-components/TagList/TagList.stories.tsx
index ec71374a..36724900 100644
--- a/source/03-components/TagList/TagList.stories.tsx
+++ b/source/03-components/TagList/TagList.stories.tsx
@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import TagListComponent from './TagList';
 import tagListArgs from './tag-list.yml';
 
 const meta: Meta<typeof TagListComponent> = {
   title: 'Components/Tag List',
   component: TagListComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
diff --git a/source/03-components/Video/Video.stories.tsx b/source/03-components/Video/Video.stories.tsx
index 370e8f05..0bdf33d4 100644
--- a/source/03-components/Video/Video.stories.tsx
+++ b/source/03-components/Video/Video.stories.tsx
@@ -1,15 +1,26 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import VideoComponent from './Video';
 import videoArgs from './video.yml';
 
 const meta: Meta<typeof VideoComponent> = {
   title: 'Components/Video',
   component: VideoComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };
 
 type Story = StoryObj<typeof VideoComponent>;
 const Video: Story = {
+  // Workaround to allow story to be imported elsewhere.
+  // See https://github.com/storybookjs/storybook/issues/22278
+  render: args => <VideoComponent {...args} />,
   args: videoArgs,
 };
 
diff --git a/source/03-components/Wysiwyg/Wysiwyg.stories.tsx b/source/03-components/Wysiwyg/Wysiwyg.stories.tsx
index ddec0481..dba6d06d 100644
--- a/source/03-components/Wysiwyg/Wysiwyg.stories.tsx
+++ b/source/03-components/Wysiwyg/Wysiwyg.stories.tsx
@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import WysiwygComponent from './Wysiwyg';
 import wysiwygArgs from './wysiwyg.yml';
 
 const meta: Meta<typeof WysiwygComponent> = {
   title: 'Components/WYSIWYG',
   component: WysiwygComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
   argTypes: {
     children: {
diff --git a/source/03-components/Wysiwyg/wysiwyg.yml b/source/03-components/Wysiwyg/wysiwyg.yml
index cd044fde..fb41046b 100644
--- a/source/03-components/Wysiwyg/wysiwyg.yml
+++ b/source/03-components/Wysiwyg/wysiwyg.yml
@@ -1,10 +1,10 @@
 ---
 children: |-
   <p>
-    This is WYSIWYG content, which can contain{' '}
+    This is WYSIWYG content, which can contain
     <abbr title="Hyper Text Markup Language">HTML</abbr> markup. There is no
-    limit to how long this content can be. it could have both{' '}
-    <a href="#0">internal</a> and <a href="https://example.com">external</a>{' '}
+    limit to how long this content can be. it could have both
+    <a href="#0">internal</a> and <a href="https://example.com">external</a>
     links.
   </p>
   <h2>Heading Level 2</h2>
@@ -28,7 +28,7 @@ children: |-
       An unordered list is a list in which the sequence of items is not
       important. Sometimes, an unordered list is a bulleted list. And this
       is a long list item in an unordered list that can wrap onto a new
-      line.{' '}
+      line.
     </li>
     <li>
       Lists can be nested inside of each other

From aadef95c760ccf894cc16694b5490549f9aec02d Mon Sep 17 00:00:00 2001
From: Sirod Johnson <sjohnson@forumone.com>
Date: Thu, 18 Jul 2024 12:19:29 -0400
Subject: [PATCH 2/2] Adds the Mega Menu component

---
 source/00-config/mixins/button.css            |   2 +-
 source/00-config/mixins/focus.css             |   4 +-
 source/00-config/vars/breakpoints.css         |   2 +
 source/00-config/vars/colors.css              |   2 +
 .../ImageTeaser/ImageTeaser.stories.tsx       |   1 +
 .../03-components/ImageTeaser/ImageTeaser.tsx |   2 +-
 .../Menu/MegaMenu/MegaMenu.stories.tsx        |  34 +++
 .../03-components/Menu/MegaMenu/MegaMenu.tsx  | 273 ++++++++++++++++++
 .../Menu/MegaMenu/MegaMenuLink.tsx            |  36 +++
 .../Menu/MegaMenu/mega-menu.module.css        | 253 ++++++++++++++++
 .../03-components/Menu/MegaMenu/mega-menu.yml |  57 ++++
 source/03-components/Menu/Menu.stories.tsx    |   8 +
 12 files changed, 670 insertions(+), 4 deletions(-)
 create mode 100644 source/03-components/Menu/MegaMenu/MegaMenu.stories.tsx
 create mode 100644 source/03-components/Menu/MegaMenu/MegaMenu.tsx
 create mode 100644 source/03-components/Menu/MegaMenu/MegaMenuLink.tsx
 create mode 100644 source/03-components/Menu/MegaMenu/mega-menu.module.css
 create mode 100644 source/03-components/Menu/MegaMenu/mega-menu.yml

diff --git a/source/00-config/mixins/button.css b/source/00-config/mixins/button.css
index 1cc1686b..ed829063 100644
--- a/source/00-config/mixins/button.css
+++ b/source/00-config/mixins/button.css
@@ -58,7 +58,7 @@
 }
 
 @mixin text-button() {
-  @include focus();
+  @include focus;
 
   appearance: none;
   background: transparent;
diff --git a/source/00-config/mixins/focus.css b/source/00-config/mixins/focus.css
index 92d8c771..282e1b72 100644
--- a/source/00-config/mixins/focus.css
+++ b/source/00-config/mixins/focus.css
@@ -1,9 +1,9 @@
-@mixin focus($width: 2px, $offset: 2px) {
+@mixin focus($color: var(--ui-focus), $width: 2px, $offset: 2px) {
   outline: $width solid transparent;
   outline-offset: $offset;
 
   &:focus {
-    outline-color: var(--ui-focus);
+    outline-color: $color;
   }
 
   &:focus:not(:focus-visible) {
diff --git a/source/00-config/vars/breakpoints.css b/source/00-config/vars/breakpoints.css
index 9625e0e4..863fb609 100644
--- a/source/00-config/vars/breakpoints.css
+++ b/source/00-config/vars/breakpoints.css
@@ -15,6 +15,8 @@
 @custom-media --mobile-lg-max (width < 480px);
 @custom-media --tablet (width >= 640px);
 @custom-media --tablet-max (width < 640px);
+@custom-media --mobile-menu (width >= 699px);
+@custom-media --mobile-menu-max (width < 699px);
 @custom-media --tablet-lg (width >= 880px);
 @custom-media --tablet-lg-max (width < 880px);
 @custom-media --desktop (width >= 1024px);
diff --git a/source/00-config/vars/colors.css b/source/00-config/vars/colors.css
index 53f13c8b..a41f7c12 100644
--- a/source/00-config/vars/colors.css
+++ b/source/00-config/vars/colors.css
@@ -38,8 +38,10 @@
   --ui-accent-dark: var(--brand-blue-dark-1);
   --ui-accent-light: var(--brand-blue-light);
   --ui-background: var(--grayscale-gray-3);
+  --ui-background-darker: var(--grayscale-gray-7);
   --ui-background-dark: var(--grayscale-gray-6);
   --ui-background-light: var(--grayscale-gray-1);
+  --ui-background-lighter: var(--grayscale-gray-1);
   --ui-border: var(--grayscale-gray-3);
   --ui-border-dark: var(--grayscale-gray-6);
   --ui-border-light: var(--grayscale-gray-1);
diff --git a/source/03-components/ImageTeaser/ImageTeaser.stories.tsx b/source/03-components/ImageTeaser/ImageTeaser.stories.tsx
index bd3e4cc2..66012d4f 100644
--- a/source/03-components/ImageTeaser/ImageTeaser.stories.tsx
+++ b/source/03-components/ImageTeaser/ImageTeaser.stories.tsx
@@ -19,6 +19,7 @@ const meta: Meta<typeof ImageTeaserComponent> = {
 
 type Story = StoryObj<typeof ImageTeaserComponent>;
 const ImageTeaser: Story = {
+  render: args => <ImageTeaserComponent {...args} />,
   args: {
     ...imageTeaserArgs,
     image: parse(imageTeaserArgs.image),
diff --git a/source/03-components/ImageTeaser/ImageTeaser.tsx b/source/03-components/ImageTeaser/ImageTeaser.tsx
index ca51e015..7183f0c6 100644
--- a/source/03-components/ImageTeaser/ImageTeaser.tsx
+++ b/source/03-components/ImageTeaser/ImageTeaser.tsx
@@ -5,7 +5,7 @@ import { ElementType, ReactNode } from 'react';
 import Media from '../../02-layouts/Media/Media';
 import styles from './image-teaser.module.css';
 
-interface ImageTeaserProps extends GessoComponent {
+export interface ImageTeaserProps extends GessoComponent {
   url?: string;
   title: string;
   image?: ReactNode;
diff --git a/source/03-components/Menu/MegaMenu/MegaMenu.stories.tsx b/source/03-components/Menu/MegaMenu/MegaMenu.stories.tsx
new file mode 100644
index 00000000..a894339f
--- /dev/null
+++ b/source/03-components/Menu/MegaMenu/MegaMenu.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ImageTeaser } from '../../ImageTeaser/ImageTeaser.stories';
+import MegaMenuComponent from './MegaMenu';
+import { MegaMenuLinkProps } from './MegaMenuLink';
+import megaMenuArgs from './mega-menu.yml';
+
+const meta: Meta<typeof MegaMenuComponent> = {
+  title: 'Components/Menu/Mega Menu',
+  component: MegaMenuComponent,
+  tags: ['autodocs'],
+};
+
+const menuItems = megaMenuArgs.items.map((item: MegaMenuLinkProps) => ({
+  ...item,
+  featured: ImageTeaser.render ? (
+    <ImageTeaser.render
+      {...ImageTeaser.args}
+      title={
+        ImageTeaser.args && ImageTeaser.args.title ? ImageTeaser.args.title : ''
+      }
+    />
+  ) : undefined,
+}));
+
+type Story = StoryObj<typeof MegaMenuComponent>;
+const MegaMenu: Story = {
+  args: {
+    ...megaMenuArgs,
+    items: menuItems,
+  },
+};
+
+export default meta;
+export { MegaMenu };
diff --git a/source/03-components/Menu/MegaMenu/MegaMenu.tsx b/source/03-components/Menu/MegaMenu/MegaMenu.tsx
new file mode 100644
index 00000000..0bdd6c80
--- /dev/null
+++ b/source/03-components/Menu/MegaMenu/MegaMenu.tsx
@@ -0,0 +1,273 @@
+import clsx from 'clsx';
+import { GessoComponent } from 'gesso';
+import { useEffect, useRef } from 'react';
+import Close from '../../../01-global/icon/icons/Close';
+import MegaMenuLink, { MegaMenuLinkProps } from './MegaMenuLink';
+import styles from './mega-menu.module.css';
+
+interface MegaMenuProps extends GessoComponent {
+  items: MegaMenuLinkProps[];
+  menuName: string;
+  useArrowKeys?: boolean;
+}
+
+function MegaMenu({
+  items,
+  menuName,
+  useArrowKeys = true,
+  modifierClasses,
+}: MegaMenuProps): JSX.Element {
+  const megaMenuRef = useRef<HTMLUListElement | null>(null);
+  const topLevelItems = useRef<HTMLElement[]>([]);
+
+  useEffect(() => {
+    if (megaMenuRef.current) {
+      topLevelItems.current = Array.from(
+        megaMenuRef.current.querySelectorAll<HTMLElement>(
+          'button[aria-expanded][aria-controls]',
+        ),
+      );
+    }
+
+    topLevelItems.current.forEach(button => {
+      toggleSection(button.nextElementSibling as HTMLDivElement, true);
+    });
+
+    document.addEventListener('click', handleClickAnywhere);
+    document.addEventListener('keydown', handleKeydownAnywhere);
+
+    return () => {
+      document.removeEventListener('click', handleClickAnywhere);
+      document.removeEventListener('keydown', handleKeydownAnywhere);
+    };
+  });
+
+  const toggleSection = (section: HTMLDivElement, hide: boolean) => {
+    const button = section.previousElementSibling as HTMLButtonElement;
+
+    if (hide) {
+      section.hidden = true;
+      button.setAttribute('aria-expanded', 'false');
+    } else {
+      section.hidden = !section.hidden;
+      button.setAttribute('aria-expanded', section.hidden ? 'false' : 'true');
+    }
+
+    const focusable = section.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]',
+    );
+    focusable.forEach(focusableItem => {
+      const focusableElement = focusableItem as HTMLElement;
+      focusableElement.tabIndex = section.hidden ? -1 : 0;
+    });
+
+    if (!section.hidden) {
+      const firstFocusable = focusable[0] as HTMLElement;
+      firstFocusable.focus();
+    }
+  };
+
+  const handleClickAnywhere = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    if (!target.closest(`.${styles.megaMenu}`)) {
+      const sections = document.querySelectorAll(`.${styles.section}`);
+      sections.forEach(section => {
+        toggleSection(section as HTMLDivElement, true);
+      });
+    }
+  };
+
+  const handleKeydownAnywhere = (event: KeyboardEvent) => {
+    const openButton = document.querySelector('button[aria-expanded="true"]');
+
+    if (event.key === 'Escape' && openButton) {
+      const sections = document.querySelectorAll(`.${styles.section}`);
+      sections.forEach(section => {
+        toggleSection(section as HTMLDivElement, true);
+      });
+    } else if (event.key === 'Tab') {
+      setTimeout(() => {
+        if (
+          document.activeElement &&
+          document.activeElement.classList.contains(`${styles.link}`) &&
+          document.activeElement instanceof HTMLButtonElement
+        ) {
+          if (openButton) {
+            toggleSection(
+              openButton.nextElementSibling as HTMLDivElement,
+              true,
+            );
+          }
+        }
+      }, 0);
+    }
+  };
+
+  const controlFocusByKey = (
+    event: React.KeyboardEvent<HTMLElement>,
+    menuLinks: HTMLElement[],
+    currentIndex: number,
+  ) => {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        event.preventDefault();
+        if (currentIndex > -1) {
+          const prevIndex = Math.max(0, currentIndex - 1);
+          menuLinks[prevIndex].focus();
+        }
+        break;
+      case 'ArrowDown':
+      case 'ArrowRight':
+        event.preventDefault();
+        if (currentIndex > -1) {
+          const nextIndex = Math.min(menuLinks.length - 1, currentIndex + 1);
+          menuLinks[nextIndex].focus();
+        }
+        break;
+      case 'Home':
+        event.preventDefault();
+        menuLinks[0].focus();
+        break;
+      case 'End':
+        event.preventDefault();
+        menuLinks[menuLinks.length - 1].focus();
+        break;
+      default:
+        // Do nothing.
+        break;
+    }
+  };
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const button = event.currentTarget;
+
+    const currentSection = button.nextElementSibling as HTMLDivElement;
+    const currentSectionId = currentSection.getAttribute('id');
+
+    button.setAttribute(
+      'aria-expanded',
+      currentSection.hidden === true ? 'true' : 'false',
+    );
+
+    toggleSection(currentSection, !currentSection.hidden);
+
+    const megaMenu = button.closest(`.${styles.megaMenu}`);
+    if (megaMenu) {
+      const sections = megaMenu.querySelectorAll(`.${styles.section}`);
+      sections.forEach(section => {
+        if (currentSectionId !== section.getAttribute('id')) {
+          toggleSection(section as HTMLDivElement, true);
+        }
+      });
+    }
+  };
+
+  const handleButtonKeydown = (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+  ) => {
+    const button = event.currentTarget;
+
+    if (!useArrowKeys) return;
+    const targetButtonIndex = topLevelItems.current.indexOf(button);
+
+    if (
+      button.getAttribute('aria-expanded') == 'true' &&
+      event.key === 'ArrowDown'
+    ) {
+      event.preventDefault();
+
+      const section = button.nextElementSibling;
+      if (section instanceof HTMLElement) {
+        const focusableElement = section.querySelector('a, button');
+        if (focusableElement instanceof HTMLElement) {
+          focusableElement.focus();
+        }
+      }
+    } else {
+      controlFocusByKey(event, topLevelItems.current, targetButtonIndex);
+    }
+  };
+
+  const handleSectionKeydown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const section = event.currentTarget;
+
+    if (section.hidden || !useArrowKeys) return;
+
+    const active = document.activeElement as HTMLElement;
+    if (section instanceof HTMLElement) {
+      const menuLinks = [
+        ...Array.from(section.querySelectorAll<HTMLElement>('a, button')),
+      ];
+      const currentIndex = menuLinks.indexOf(active);
+      controlFocusByKey(event, menuLinks, currentIndex);
+    }
+  };
+
+  const handleCloseClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    const closeButton = event.target as HTMLButtonElement;
+    const section = closeButton.closest(`.${styles.section}`);
+    toggleSection(section as HTMLDivElement, true);
+  };
+
+  return (
+    <>
+      {items && (
+        <ul
+          ref={megaMenuRef}
+          className={clsx(styles.megaMenu, modifierClasses)}
+        >
+          {items.map((item, index) => {
+            return (
+              <li
+                key={index}
+                className={clsx(
+                  styles.item,
+                  item.below && styles['has-subnav'],
+                )}
+              >
+                <button
+                  className={styles.link}
+                  aria-expanded="false"
+                  aria-controls={`mega-menu-${menuName}--${index}`}
+                  aria-current={item.isActive ? 'page' : 'false'}
+                  onClick={handleButtonClick}
+                  onKeyDown={handleButtonKeydown}
+                >
+                  <span>{item.title}</span>
+                </button>
+                <div
+                  className={styles.section}
+                  id={`mega-menu-${menuName}--${index}`}
+                  hidden
+                  onKeyDown={handleSectionKeydown}
+                >
+                  <div className={styles.sectionInner}>
+                    <div className={styles.overview}>
+                      <h2 className={styles.sectionTitle}>{item.title}</h2>
+                    </div>
+                    {item.below && (
+                      <MegaMenuLink items={item.below} menuLevel={1} />
+                    )}
+                    {item.featured}
+                  </div>
+                  <button
+                    aria-label="Close menu"
+                    className={styles.sectionClose}
+                    onClick={handleCloseClick}
+                  >
+                    <Close isHidden={false} />
+                  </button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </>
+  );
+}
+
+export default MegaMenu;
diff --git a/source/03-components/Menu/MegaMenu/MegaMenuLink.tsx b/source/03-components/Menu/MegaMenu/MegaMenuLink.tsx
new file mode 100644
index 00000000..caaa2047
--- /dev/null
+++ b/source/03-components/Menu/MegaMenu/MegaMenuLink.tsx
@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import { GessoComponent } from 'gesso';
+import styles from './mega-menu.module.css';
+
+export interface MegaMenuLinkProps extends GessoComponent {
+  items: MegaMenuLinkProps[];
+  menuLevel: number;
+  menuName?: string;
+  menuClass?: string;
+  itemClass?: string;
+  linkClass?: string;
+  title?: string;
+  url?: string;
+  below?: MegaMenuLinkProps[];
+  featured?: JSX.Element;
+  isActive?: boolean;
+}
+
+function MegaMenuLink({ items }: MegaMenuLinkProps): JSX.Element {
+  return (
+    <ul className={clsx(styles.subnav)}>
+      {items &&
+        items.map((item, index) => {
+          return (
+            <li key={index} className={styles.item}>
+              <a href={item.url} className={styles.link}>
+                {item.title}
+              </a>
+            </li>
+          );
+        })}
+    </ul>
+  );
+}
+
+export default MegaMenuLink;
diff --git a/source/03-components/Menu/MegaMenu/mega-menu.module.css b/source/03-components/Menu/MegaMenu/mega-menu.module.css
new file mode 100644
index 00000000..41ec0e5b
--- /dev/null
+++ b/source/03-components/Menu/MegaMenu/mega-menu.module.css
@@ -0,0 +1,253 @@
+@import 'mixins';
+
+@layer components {
+  .megaMenu {
+    align-items: center;
+    background: var(--background-site);
+    display: flex;
+    margin: 0 0 var(--spacing-2-5);
+    position: relative;
+    width: 100%;
+    z-index: 1;
+
+    &::after {
+      background-color: var(--background-site);
+      content: '';
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 1200;
+    }
+  }
+
+  .item {
+    margin-block-end: 0;
+
+    .megaMenu > & {
+      border-bottom: 1px solid var(--grayscale-white);
+      list-style-type: none;
+      padding: 1.25rem 1.8125rem 1.25rem 0.8125rem;
+  
+      > .link {
+        @include link(var(--text-link), var(--text-link-hover));
+
+        border-bottom: 2px solid transparent;
+        border-radius: 1px;
+        display: block;
+        font-size: var(--font-size-5);
+        font-weight: var(--font-weight-regular);
+        padding: 4.8px 0;
+        position: relative;
+        text-align: left;
+        transition: all 0.4s ease;
+        width: auto;
+        z-index: calc(1200 + 1);
+      }
+  
+      button.link {
+        @include text-button;
+
+        font-size: var(--font-size-5);
+      }
+
+      &:last-child > a {
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
+
+  .section {
+    background-color: var(--ui-background-dark);
+    color: var(--text-on-dark);
+    left: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    overflow-wrap: normal;
+    padding: var(--spacing-7);
+    position: absolute;
+    top: 100%;
+    transform: translate3d(0, 0, 0);
+    transition: transform var(--duration-long) var(--easing-ease-in-out);
+    width: 100%;
+    z-index: 0;
+  
+    /* stylelint-disable no-descending-specificity */
+    a,
+    button {
+      &:focus {
+        @include focus(var(--text-on-dark));
+      }
+    }
+  
+    &[hidden] {
+      display: block;
+      transform: translate3d(0, -100%, 0);
+      z-index: -1;
+    }
+  }
+
+  .sectionInner {
+    @include layout-constrain();
+
+    align-items: flex-start;
+    display: grid;
+    gap: var(--spacing-10);
+    grid-template-columns: 250px 1fr 1fr;
+    margin-top: var(--spacing-2);
+    padding-inline: var(--site-margins);
+  }
+
+  .overview {
+  }
+
+  .sectionTitle {
+    color: var(--text-on-dark);
+    display: block;
+    font-size: var(--font-size-13);
+  }
+
+  .sectionClose {
+    @include text-button;
+
+    color: var(--text-on-dark);
+    height: 50px;
+    position: absolute;
+    right: 10px;
+    text-align: center;
+    top: 10px;
+    transition: opacity var(--duration-short) var(--easing-ease-in);
+    width: 50px;
+  
+    svg {
+      height: 22px;
+      width: 32px;
+    }
+  
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+
+  .subnav {
+    @include list-clean;
+  }
+
+  .subnav .item:not(.has-subnav) {
+    margin-top: var(--spacing-1);
+  }
+
+  .subnav .item.has-subnav {
+    margin-top: 0;
+  }
+
+  .subnav .subnav {
+    margin-top: var(--spacing-1);
+  }
+
+  .subnav .subnav .item {
+    margin-bottom: var(--spacing-1);
+  }
+
+  .subnav .link {
+    border-bottom: 0;
+    color: inherit;
+    font-size: var(--font-size-5);
+    font-weight: var(--font-weight-bold);
+    position: static;
+    text-decoration: none;
+  }
+
+  .subnav a.link {
+    > span {
+      white-space: nowrap;
+  
+      &::after {
+        display: inline-block;
+        margin-left: var(--spacing-1);
+        margin-right: var(--spacing-0-5);
+        position: relative;
+        transition: margin 0.2s;
+        vertical-align: middle;
+        white-space: nowrap;
+      }
+    }
+  
+    /* 
+       Safari 14 doesn't recognize :focus-visible, so
+       combining with the above selector causes the entire
+       styles, including :hover, to be ignored.
+    */
+    &:hover {
+      opacity: 0.85;
+  
+      > span::after {
+        margin-left: var(--spacing-1-5);
+        margin-right: 0;
+      }
+    }
+  
+    &:focus-visible {
+      opacity: 0.85;
+  
+      > span::after {
+        margin-left: var(--spacing-1-5);
+        margin-right: 0;
+      }
+    }
+  }
+
+  .subnav .subnav .link {
+    color: var(--brand-blue-light-1);
+    font-size: var(--font-size-2);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-short);
+    text-transform: none;
+  
+    &:hover {
+      color: var(--grayscale-white);
+      opacity: 1;
+    }
+  
+    &:focus-visible {
+      color: var(--grayscale-white);
+      opacity: 1;
+    }
+  }
+
+  .subnav .subnav a.link {
+    > span::after {
+      content: '';
+      display: none;
+    }
+  }
+
+  @media (--mobile-menu-max) {
+    .section {
+      background-color: rgb(241 241 241 / 98%);
+    }
+  
+    .sectionTitle,
+    .sectionClose {
+      display: none;
+    }
+  }
+  
+  @media (--desktop-lg) {
+    .megaMenu {
+      .section {
+        padding: var(--spacing-10) var(--spacing-12);
+      }
+  
+      .sectionInner {
+        gap: 100px;
+      }
+  
+      .section .subnav {
+        gap: var(--spacing-4);
+      }
+    }
+  }
+}
diff --git a/source/03-components/Menu/MegaMenu/mega-menu.yml b/source/03-components/Menu/MegaMenu/mega-menu.yml
new file mode 100644
index 00000000..a6dc4a3d
--- /dev/null
+++ b/source/03-components/Menu/MegaMenu/mega-menu.yml
@@ -0,0 +1,57 @@
+---
+menuName: 'main'
+items:
+  - title: 'Visit'
+    url: '#0'
+    inActiveTrail: false
+    below:
+      - title: 'Submenu item one'
+        url: '#0'
+        inActiveTrail: false
+      - title: 'Submenu item two'
+        url: '#0'
+        inActiveTrail: false
+      - title: 'Submenu item three'
+        url: '#0'
+        inActiveTrail: false
+  - title: 'About'
+    url: '#0'
+    inActiveTrail: false
+    below:
+      - title: 'Submenu item one'
+        url: '#0'
+        inActiveTrail: false
+      - title: 'Submenu item two'
+        url: '#0'
+        inActiveTrail: false
+      - title: 'Submenu item three'
+        url: '#0'
+        inActiveTrail: false
+    section: 'about'
+  - title: 'Resources'
+    url: '#0'
+    inActiveTrail: false
+    below:
+      - title: 'Submenu item one'
+        url: '#0'
+        inActiveTrail: false
+      - title: 'Submenu item two'
+        url: '#0'
+        inActiveTrail: false
+    section: 'resources'
+  - title: 'Get Involved'
+    url: '#0'
+    inActiveTrail: false
+    below:
+      - title: 'Submenu item one'
+        url: '#0'
+        inActiveTrail: false
+      - title: 'Submenu item two'
+        url: '#0'
+        inActiveTrail: false
+      - title: 'Submenu item three'
+        url: '#0'
+        inActiveTrail: false
+    section: 'get-involved'
+itemClasses: ''
+linkClasses: ''
\ No newline at end of file
diff --git a/source/03-components/Menu/Menu.stories.tsx b/source/03-components/Menu/Menu.stories.tsx
index 94fca582..4d774d00 100644
--- a/source/03-components/Menu/Menu.stories.tsx
+++ b/source/03-components/Menu/Menu.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import Menu from './Menu';
 import footerStyles from './menu-footer.module.css';
 import footerMenuArgs from './menu-footer.yml';
@@ -7,6 +8,13 @@ import menuArgs from './menu.yml';
 const meta: Meta<typeof Menu> = {
   title: 'Components/Menu',
   component: Menu,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   tags: ['autodocs'],
 };