OperationCode · kylemh · Mar 22, 2026 · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,7 @@
  * @type {import("eslint").Linter.Config}
  */
 module.exports = {
+  ignorePatterns: ['next-env.d.ts'],
   extends: [
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:react/recommended',
@@ -167,7 +168,7 @@ module.exports = {
         'vitest/consistent-test-it': ['error', { fn: 'it', withinDescribe: 'it' }],
         'vitest/expect-expect': [
           'error',
-          { assertFunctionNames: ['expect', 'createShallowSnapshotTest', 'createSnapshotTest'] },
+          { assertFunctionNames: ['expect', 'createSnapshotTest'] },
         ],
         'vitest/prefer-lowercase-title': ['error', { ignore: ['describe'] }],
         'vitest/no-test-prefixes': 'error',

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-22
+24
diff --git a/.storybook/OCTheme.js b/.storybook/OCTheme.js
@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create';
+import { create } from 'storybook/theming/create';
 
 export default create({
   base: 'dark',

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,4 @@
-const svgoConfig = require('../common/config/svgo');
+import svgoConfig from '../common/config/svgo';
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
@@ -7,14 +7,11 @@ const config: StorybookConfig = {
     '../components/**/__stories__/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   staticDirs: ['../public'],
-  addons: [
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/addon-styling',
-      /** @see https://storybook.js.org/recipes/tailwindcss#:~:text=then%20leave%20the%20options%20object%20empty. */
-      options: {},
-    },
-  ],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
   webpackFinal: async config => {
     // Find the Storybook Webpack rule relevant to SVG files.
     // @ts-expect-error => 'config.module' is possibly 'undefined'.ts(18048)
@@ -48,13 +45,6 @@ const config: StorybookConfig = {
 
     return config;
   },
-  framework: {
-    name: '@storybook/nextjs',
-    options: {},
-  },
-  docs: {
-    autodocs: true,
-  },
 };
 
 export default config;
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from 'storybook/manager-api';
 import OCTheme from './OCTheme';
 
 addons.setConfig({

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,5 +1,5 @@
 import 'common/styles/globals.css';
-import * as viewports from '@storybook/addon-viewport';
+import { MINIMAL_VIEWPORTS, INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 export const decorators = [
   Story => (
@@ -9,13 +9,14 @@ export const decorators = [
   ),
 ];
 
+export const tags = ['autodocs'];
+
 const preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     viewport: {
       viewports: {
-        ...viewports.MINIMAL_VIEWPORTS,
-        ...viewports.INITIAL_VIEWPORTS,
+        ...MINIMAL_VIEWPORTS,
+        ...INITIAL_VIEWPORTS,
       },
     },
   },

diff --git a/components/Accordion/__stories__/Accordion.stories.tsx b/components/Accordion/__stories__/Accordion.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
 import Accordion from '../Accordion';
 
 type AccordionStoryType = StoryObj<typeof Accordion>;

diff --git a/components/Accordion/__tests__/Accordion.test.tsx b/components/Accordion/__tests__/Accordion.test.tsx
@@ -1,18 +1,23 @@
 import { fireEvent, render } from '@testing-library/react';
-import { composeStory } from '@storybook/react';
 import {
   ACCORDION_CONTENT,
   ACCORDION_TOGGLE_BUTTON,
   SCREEN_READER_ONLY,
 } from 'common/constants/testIDs';
 import { toggleMessages } from '../../ScreenReaderOnly/ScreenReaderOnly';
-import meta, { Default } from '../__stories__/Accordion.stories';
+import Accordion from '../Accordion';
 
-const AccordionStory = composeStory(Default, meta);
+const defaultProps = {
+  accessibilityId: '1',
+  content: {
+    headingChildren: <h5>Can be JSX</h5>,
+    bodyChildren: <p>Can also be JSX</p>,
+  },
+};
 
 describe('Accordion', () => {
   it('should render invisible text that turns visible on toggle click', async () => {
-    const component = render(<AccordionStory />);
+    const component = render(<Accordion {...defaultProps} />);
     const Content = component.queryByTestId(ACCORDION_CONTENT);
 
     expect(Content?.classList.contains('hidden')).toBe(true);
@@ -25,7 +30,7 @@ describe('Accordion', () => {
 
 describe('Accordion Accessibility', () => {
   it('should display the correct screenReader text for toggle button', async () => {
-    const component = render(<AccordionStory />);
+    const component = render(<Accordion {...defaultProps} />);
     const Button = component.queryByTestId(SCREEN_READER_ONLY)!;
 
     expect(Button.textContent).toBe(toggleMessages.open);

diff --git a/components/Alert/__stories__/Alert.stories.tsx b/components/Alert/__stories__/Alert.stories.tsx
@@ -1,11 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { fn } from 'storybook/test';
 import Alert from '../Alert';
 
 type AlertStoryType = StoryObj<typeof Alert>;
 
 const meta: Meta<typeof Alert> = {
   title: 'Alert',
   component: Alert,
+  args: {
+    onClose: fn(),
+  },
 };
 
 export default meta;

diff --git a/components/Alert/__tests__/Alert.test.tsx b/components/Alert/__tests__/Alert.test.tsx
@@ -1,22 +1,21 @@
 import { fireEvent, render } from '@testing-library/react';
-import { composeStory } from '@storybook/react';
 import createSnapshotTest from 'test-utils/createSnapshotTest';
 import { ALERT_CLOSE_BUTTON } from 'common/constants/testIDs';
-import meta, { ErrorAlert, SuccessAlert, WarningAlert } from '../__stories__/Alert.stories';
-
-const ErrorAlertStory = composeStory(ErrorAlert, meta);
-const SuccessAlertStory = composeStory(SuccessAlert, meta);
-const WarningAlertStory = composeStory(WarningAlert, meta);
+import Alert from '../Alert';
 
 describe('Alert', () => {
   it('should render error alert with required props', () => {
-    createSnapshotTest(<ErrorAlertStory />);
+    createSnapshotTest(<Alert type="error">Error Alert JSX or Text</Alert>);
   });
 
   it('should call close handler when close alert button clicked', () => {
     const onCloseMock = vi.fn();
 
-    const { queryByTestId } = render(<SuccessAlertStory onClose={onCloseMock} />);
+    const { queryByTestId } = render(
+      <Alert type="success" onClose={onCloseMock}>
+        Success Alert JSX or Text
+      </Alert>,
+    );
 
     expect(onCloseMock).toHaveBeenCalledTimes(0);
 
@@ -26,7 +25,7 @@ describe('Alert', () => {
   });
 
   it('should NOT render button if close handler not provided', () => {
-    const { queryByTestId } = render(<WarningAlertStory />);
+    const { queryByTestId } = render(<Alert type="warning">Warning Alert JSX or Text</Alert>);
 
     expect(queryByTestId(ALERT_CLOSE_BUTTON)).toBeNull();
   });

diff --git a/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
@@ -1,13 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert > should render error alert with required props 1`] = `
-<div
-  className="border border-solid rounded shadow-md text-sm p-2 bg-error border-error-deep text-error-deep"
-  data-testid="ALERT"
-  role="alert"
->
-  <span>
-    Error Alert JSX or Text
-  </span>
+<div>
+  <div
+    class="border border-solid rounded shadow-md text-sm p-2 bg-error border-error-deep text-error-deep"
+    data-testid="ALERT"
+    role="alert"
+  >
+    <span>
+      Error Alert JSX or Text
+    </span>
+  </div>
 </div>
 `;
diff --git a/components/Badge/__stories__/Badge.stories.tsx b/components/Badge/__stories__/Badge.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
 import GithubIcon from 'public/static/images/icons/github_logo.svg';
 import TwitterIcon from 'public/static/images/icons/twitter_logo.svg';
 import PinterestIcon from 'public/static/images/icons/pinterest_logo.svg';

diff --git a/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap
@@ -1,41 +1,69 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > should render with many props assigned 1`] = `
-<figure
-  className="flex flex-col justify-items-center place-content-start m-2 [&>svg]:fill-current [&>svg]:my-4 [&>img]:mx-0 [&>img]:h-24 [&>svg]:mx-0 [&>svg]:h-24 test-class"
->
-  <svg
-    dangerouslySetInnerHTML={
-      {
-        "__html": "<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="_7e6684a5"><title>GitHub Logo</title><path fill-rule="evenodd" d="M51.03 2.97C49.047.99 46.663 0 43.874 0h-33.75C7.336 0 4.95.99 2.97 2.97.99 4.951 0 7.336 0 10.125v33.75c0 2.79.99 5.174 2.97 7.154C4.951 53.01 7.336 54 10.125 54H18c.515 0 .902-.018 1.16-.052.257-.036.515-.188.773-.458s.387-.662.387-1.178l-.018-2.39c-.012-1.524-.018-2.731-.018-3.622l-.808.14c-.516.095-1.166.136-1.952.124-.785-.012-1.6-.094-2.443-.246a5.472 5.472 0 0 1-2.355-1.055 4.457 4.457 0 0 1-1.547-2.162l-.352-.809c-.234-.538-.603-1.136-1.107-1.792-.504-.656-1.013-1.102-1.53-1.336l-.245-.176a2.57 2.57 0 0 1-.457-.422 1.936 1.936 0 0 1-.316-.492c-.07-.164-.012-.3.175-.405.188-.106.528-.158 1.02-.158l.703.106c.468.093 1.048.374 1.74.843a5.67 5.67 0 0 1 1.705 1.828c.54.961 1.19 1.693 1.951 2.197.762.504 1.53.756 2.303.756.773 0 1.441-.058 2.004-.175a6.97 6.97 0 0 0 1.582-.528c.21-1.57.785-2.778 1.722-3.621-1.336-.141-2.537-.352-3.603-.633-1.067-.282-2.168-.739-3.305-1.372-1.137-.633-2.08-1.417-2.83-2.355s-1.365-2.169-1.846-3.692c-.48-1.523-.72-3.281-.72-5.273 0-2.836.926-5.25 2.777-7.243-.867-2.132-.785-4.523.246-7.171.68-.211 1.688-.053 3.024.474 1.336.528 2.314.98 2.935 1.354.622.375 1.12.691 1.495.95 2.18-.61 4.43-.915 6.75-.915 2.32 0 4.57.305 6.75.914l1.336-.843c.915-.563 1.992-1.079 3.235-1.547 1.242-.469 2.191-.598 2.848-.387 1.054 2.649 1.148 5.04.28 7.172 1.852 1.992 2.778 4.406 2.778 7.242 0 1.992-.24 3.756-.72 5.291-.48 1.535-1.102 2.766-1.864 3.692-.761.926-1.71 1.705-2.847 2.338-1.137.632-2.238 1.09-3.305 1.37-1.067.282-2.268.493-3.604.634 1.219 1.055 1.828 2.719 1.828 4.992v8.403c0 .398.058.72.176.967a.967.967 0 0 0 .562.51c.259.093.487.151.686.175.2.023.487.035.862.035h7.875c2.788 0 5.173-.99 7.153-2.97C53.01 49.047 54 46.662 54 43.873v-33.75c0-2.788-.99-5.173-2.97-7.154z"/></symbol><use href='#_7e6684a5'/>",
-      }
-    }
-    viewBox="0 0 54 54"
-  />
-  <figcaption
-    className="text-center whitespace-nowrap"
+<div>
+  <figure
+    class="flex flex-col justify-items-center place-content-start m-2 [&>svg]:fill-current [&>svg]:my-4 [&>img]:mx-0 [&>img]:h-24 [&>svg]:mx-0 [&>svg]:h-24 test-class"
   >
-    Badge Icon
-  </figcaption>
-</figure>
+    <svg
+      viewBox="0 0 54 54"
+    >
+      <symbol
+        id="_7e6684a5"
+        viewBox="0 0 54 54"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          GitHub Logo
+        </title>
+        <path
+          d="M51.03 2.97C49.047.99 46.663 0 43.874 0h-33.75C7.336 0 4.95.99 2.97 2.97.99 4.951 0 7.336 0 10.125v33.75c0 2.79.99 5.174 2.97 7.154C4.951 53.01 7.336 54 10.125 54H18c.515 0 .902-.018 1.16-.052.257-.036.515-.188.773-.458s.387-.662.387-1.178l-.018-2.39c-.012-1.524-.018-2.731-.018-3.622l-.808.14c-.516.095-1.166.136-1.952.124-.785-.012-1.6-.094-2.443-.246a5.472 5.472 0 0 1-2.355-1.055 4.457 4.457 0 0 1-1.547-2.162l-.352-.809c-.234-.538-.603-1.136-1.107-1.792-.504-.656-1.013-1.102-1.53-1.336l-.245-.176a2.57 2.57 0 0 1-.457-.422 1.936 1.936 0 0 1-.316-.492c-.07-.164-.012-.3.175-.405.188-.106.528-.158 1.02-.158l.703.106c.468.093 1.048.374 1.74.843a5.67 5.67 0 0 1 1.705 1.828c.54.961 1.19 1.693 1.951 2.197.762.504 1.53.756 2.303.756.773 0 1.441-.058 2.004-.175a6.97 6.97 0 0 0 1.582-.528c.21-1.57.785-2.778 1.722-3.621-1.336-.141-2.537-.352-3.603-.633-1.067-.282-2.168-.739-3.305-1.372-1.137-.633-2.08-1.417-2.83-2.355s-1.365-2.169-1.846-3.692c-.48-1.523-.72-3.281-.72-5.273 0-2.836.926-5.25 2.777-7.243-.867-2.132-.785-4.523.246-7.171.68-.211 1.688-.053 3.024.474 1.336.528 2.314.98 2.935 1.354.622.375 1.12.691 1.495.95 2.18-.61 4.43-.915 6.75-.915 2.32 0 4.57.305 6.75.914l1.336-.843c.915-.563 1.992-1.079 3.235-1.547 1.242-.469 2.191-.598 2.848-.387 1.054 2.649 1.148 5.04.28 7.172 1.852 1.992 2.778 4.406 2.778 7.242 0 1.992-.24 3.756-.72 5.291-.48 1.535-1.102 2.766-1.864 3.692-.761.926-1.71 1.705-2.847 2.338-1.137.632-2.238 1.09-3.305 1.37-1.067.282-2.268.493-3.604.634 1.219 1.055 1.828 2.719 1.828 4.992v8.403c0 .398.058.72.176.967a.967.967 0 0 0 .562.51c.259.093.487.151.686.175.2.023.487.035.862.035h7.875c2.788 0 5.173-.99 7.153-2.97C53.01 49.047 54 46.662 54 43.873v-33.75c0-2.788-.99-5.173-2.97-7.154z"
+          fill-rule="evenodd"
+        />
+      </symbol>
+      <use
+        href="#_7e6684a5"
+      />
+    </svg>
+    <figcaption
+      class="text-center whitespace-nowrap"
+    >
+      Badge Icon
+    </figcaption>
+  </figure>
+</div>
 `;
 
 exports[`Badge > should render with required props 1`] = `
-<figure
-  className="flex flex-col justify-items-center place-content-start m-2 [&>svg]:fill-current [&>svg]:my-4 [&>img]:mx-0 [&>img]:h-24 [&>svg]:mx-0 [&>svg]:h-24"
->
-  <svg
-    dangerouslySetInnerHTML={
-      {
-        "__html": "<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="_7e6684a5"><title>GitHub Logo</title><path fill-rule="evenodd" d="M51.03 2.97C49.047.99 46.663 0 43.874 0h-33.75C7.336 0 4.95.99 2.97 2.97.99 4.951 0 7.336 0 10.125v33.75c0 2.79.99 5.174 2.97 7.154C4.951 53.01 7.336 54 10.125 54H18c.515 0 .902-.018 1.16-.052.257-.036.515-.188.773-.458s.387-.662.387-1.178l-.018-2.39c-.012-1.524-.018-2.731-.018-3.622l-.808.14c-.516.095-1.166.136-1.952.124-.785-.012-1.6-.094-2.443-.246a5.472 5.472 0 0 1-2.355-1.055 4.457 4.457 0 0 1-1.547-2.162l-.352-.809c-.234-.538-.603-1.136-1.107-1.792-.504-.656-1.013-1.102-1.53-1.336l-.245-.176a2.57 2.57 0 0 1-.457-.422 1.936 1.936 0 0 1-.316-.492c-.07-.164-.012-.3.175-.405.188-.106.528-.158 1.02-.158l.703.106c.468.093 1.048.374 1.74.843a5.67 5.67 0 0 1 1.705 1.828c.54.961 1.19 1.693 1.951 2.197.762.504 1.53.756 2.303.756.773 0 1.441-.058 2.004-.175a6.97 6.97 0 0 0 1.582-.528c.21-1.57.785-2.778 1.722-3.621-1.336-.141-2.537-.352-3.603-.633-1.067-.282-2.168-.739-3.305-1.372-1.137-.633-2.08-1.417-2.83-2.355s-1.365-2.169-1.846-3.692c-.48-1.523-.72-3.281-.72-5.273 0-2.836.926-5.25 2.777-7.243-.867-2.132-.785-4.523.246-7.171.68-.211 1.688-.053 3.024.474 1.336.528 2.314.98 2.935 1.354.622.375 1.12.691 1.495.95 2.18-.61 4.43-.915 6.75-.915 2.32 0 4.57.305 6.75.914l1.336-.843c.915-.563 1.992-1.079 3.235-1.547 1.242-.469 2.191-.598 2.848-.387 1.054 2.649 1.148 5.04.28 7.172 1.852 1.992 2.778 4.406 2.778 7.242 0 1.992-.24 3.756-.72 5.291-.48 1.535-1.102 2.766-1.864 3.692-.761.926-1.71 1.705-2.847 2.338-1.137.632-2.238 1.09-3.305 1.37-1.067.282-2.268.493-3.604.634 1.219 1.055 1.828 2.719 1.828 4.992v8.403c0 .398.058.72.176.967a.967.967 0 0 0 .562.51c.259.093.487.151.686.175.2.023.487.035.862.035h7.875c2.788 0 5.173-.99 7.153-2.97C53.01 49.047 54 46.662 54 43.873v-33.75c0-2.788-.99-5.173-2.97-7.154z"/></symbol><use href='#_7e6684a5'/>",
-      }
-    }
-    viewBox="0 0 54 54"
-  />
-  <figcaption
-    className="text-center whitespace-nowrap"
+<div>
+  <figure
+    class="flex flex-col justify-items-center place-content-start m-2 [&>svg]:fill-current [&>svg]:my-4 [&>img]:mx-0 [&>img]:h-24 [&>svg]:mx-0 [&>svg]:h-24"
   >
-    Testing
-  </figcaption>
-</figure>
+    <svg
+      viewBox="0 0 54 54"
+    >
+      <symbol
+        id="_7e6684a5"
+        viewBox="0 0 54 54"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          GitHub Logo
+        </title>
+        <path
+          d="M51.03 2.97C49.047.99 46.663 0 43.874 0h-33.75C7.336 0 4.95.99 2.97 2.97.99 4.951 0 7.336 0 10.125v33.75c0 2.79.99 5.174 2.97 7.154C4.951 53.01 7.336 54 10.125 54H18c.515 0 .902-.018 1.16-.052.257-.036.515-.188.773-.458s.387-.662.387-1.178l-.018-2.39c-.012-1.524-.018-2.731-.018-3.622l-.808.14c-.516.095-1.166.136-1.952.124-.785-.012-1.6-.094-2.443-.246a5.472 5.472 0 0 1-2.355-1.055 4.457 4.457 0 0 1-1.547-2.162l-.352-.809c-.234-.538-.603-1.136-1.107-1.792-.504-.656-1.013-1.102-1.53-1.336l-.245-.176a2.57 2.57 0 0 1-.457-.422 1.936 1.936 0 0 1-.316-.492c-.07-.164-.012-.3.175-.405.188-.106.528-.158 1.02-.158l.703.106c.468.093 1.048.374 1.74.843a5.67 5.67 0 0 1 1.705 1.828c.54.961 1.19 1.693 1.951 2.197.762.504 1.53.756 2.303.756.773 0 1.441-.058 2.004-.175a6.97 6.97 0 0 0 1.582-.528c.21-1.57.785-2.778 1.722-3.621-1.336-.141-2.537-.352-3.603-.633-1.067-.282-2.168-.739-3.305-1.372-1.137-.633-2.08-1.417-2.83-2.355s-1.365-2.169-1.846-3.692c-.48-1.523-.72-3.281-.72-5.273 0-2.836.926-5.25 2.777-7.243-.867-2.132-.785-4.523.246-7.171.68-.211 1.688-.053 3.024.474 1.336.528 2.314.98 2.935 1.354.622.375 1.12.691 1.495.95 2.18-.61 4.43-.915 6.75-.915 2.32 0 4.57.305 6.75.914l1.336-.843c.915-.563 1.992-1.079 3.235-1.547 1.242-.469 2.191-.598 2.848-.387 1.054 2.649 1.148 5.04.28 7.172 1.852 1.992 2.778 4.406 2.778 7.242 0 1.992-.24 3.756-.72 5.291-.48 1.535-1.102 2.766-1.864 3.692-.761.926-1.71 1.705-2.847 2.338-1.137.632-2.238 1.09-3.305 1.37-1.067.282-2.268.493-3.604.634 1.219 1.055 1.828 2.719 1.828 4.992v8.403c0 .398.058.72.176.967a.967.967 0 0 0 .562.51c.259.093.487.151.686.175.2.023.487.035.862.035h7.875c2.788 0 5.173-.99 7.153-2.97C53.01 49.047 54 46.662 54 43.873v-33.75c0-2.788-.99-5.173-2.97-7.154z"
+          fill-rule="evenodd"
+        />
+      </symbol>
+      <use
+        href="#_7e6684a5"
+      />
+    </svg>
+    <figcaption
+      class="text-center whitespace-nowrap"
+    >
+      Testing
+    </figcaption>
+  </figure>
+</div>
 `;
diff --git a/components/Branding/ColorSection/__tests__/ColorSection.test.tsx b/components/Branding/ColorSection/__tests__/ColorSection.test.tsx
@@ -1,9 +1,9 @@
-import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
+import createSnapshotTest from 'test-utils/createSnapshotTest';
 
 import ColorSection from '../ColorSection';
 
 describe('ColorSection', () => {
   it('should render with required props', () => {
-    createShallowSnapshotTest(<ColorSection />);
+    createSnapshotTest(<ColorSection />);
   });
 });