diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.module.css b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.module.css
deleted file mode 100644
index a510da6c69..0000000000
--- a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.module.css
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../../../src/design-tokens/mixins.css';
-/*-----------------------------------------*\
-    # COURSE PLANNER EDIT CLASSES
-\*-----------------------------------------*/
-
-/**
- * Margin top xl mobile
- * 
- * Forces margin top to 2rem (on smaller viewports only).
- */
-.button--mobile {
-  margin-top: var(--eds-size-4) !important;
-
-  @media all and (min-width: $eds-bp-md) {
-    margin-top: unset !important;
-  }
-}
-
-/**
- * Destructive variant of the Menu item.
- *
- * For indicating deletion of the project.
- */
-.menu-item--destructive {
-  color: var(--eds-theme-color-text-utility-error);
-}
-
-/*------------------------------------*\
-    # TABLE CARD
-\*------------------------------------*/
-
-/**
- * Card with a title, table, and button within
- */
-
-/**
-* Table card table
-*
-* Actual table within the card.
-*/
-.table-card__table {
-  color: var(--eds-theme-color-text-neutral-subtle);
-  margin-bottom: var(--eds-size-2);
-}
-
-/**
-* Table card table header cell
-*/
-.table-card__table-header-cell {
-  /**
-  * First child within table card table header cell
-  */
-  &:first-child {
-    @media all and (min-width: $eds-bp-md) {
-      width: 11.875rem;
-    }
-  }
-}
diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.stories.ts b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.stories.ts
deleted file mode 100644
index ee1f2b64d1..0000000000
--- a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.stories.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import { CoursePlannerEdit } from './CoursePlannerEdit';
-
-export default {
-  title: 'Pages/Course Planner/Edit',
-  component: CoursePlannerEdit,
-} as Meta<Args>;
-
-type Args = ComponentProps<typeof CoursePlannerEdit>;
-
-export const Default: StoryObj<Args> = {};
diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
deleted file mode 100644
index e4d00973b6..0000000000
--- a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
+++ /dev/null
@@ -1,669 +0,0 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
-import type { ReactNode } from 'react';
-
-import ProjectCard from './ProjectCard';
-
-import {
-  Button,
-  ButtonGroup,
-  Card,
-  DataBar,
-  DragDrop,
-  Grid,
-  Heading,
-  HorizontalStepper,
-  Icon,
-  Layout,
-  LayoutContainer,
-  LayoutSection,
-  Menu,
-  NumberIcon,
-  PageHeader,
-  Panel,
-  Table,
-  Text,
-} from '../../../src';
-
-import type { NewState } from '../../../src/components/DragDrop/DragDrop';
-
-import CardWithNotification from '../../recipes/CardWithNotification';
-import NumberIconList from '../../recipes/NumberIconList';
-
-import EmptyImage from '../../static/hand-pencil.svg';
-import styles from './CoursePlannerEdit.module.css';
-
-NumberIconList;
-const CognitiveSkillColumns = [
-  {
-    title: 'Least covered Cognitive Skills',
-  },
-  {
-    title: 'Planned Projects',
-  },
-];
-
-const CognitiveSkillRows = [
-  {
-    value1: 'Argumentative Claim',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 2',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 3',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 4',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 5',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 6',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 7',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 8',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 9',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 10',
-        complete: false,
-      },
-    ],
-  },
-  {
-    value1: 'Making Connections and Inferences',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: true,
-      },
-    ],
-  },
-  {
-    value1: 'A longer heading that is super duper long',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 2',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 3',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 4',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 5',
-        complete: true,
-      },
-    ],
-  },
-];
-
-const StandardsColumns = [
-  {
-    title: 'Least covered Stan',
-  },
-  {
-    title: 'Planned Projects',
-  },
-];
-
-const StandardsRows = [
-  {
-    value1: 'NGSS.3-5-ETS1-1',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 2',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 3',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 4',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 5',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 6',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 7',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 8',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 9',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 10',
-        complete: false,
-      },
-    ],
-  },
-  {
-    value1: 'NGSS.3-5.ESS1.C',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: true,
-      },
-    ],
-  },
-  {
-    value1: 'NGSS.3-5.ESS1.E',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 2',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 3',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 4',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 5',
-        complete: true,
-      },
-    ],
-  },
-  {
-    value1: 'NGSS.3-5.PS3.C',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 2',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 3',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 4',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 5',
-        complete: false,
-      },
-    ],
-  },
-  {
-    value1: 'NGSS.3-5.PS3.E',
-    projects: [
-      {
-        'aria-label': 'Project 1',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 2',
-        complete: true,
-      },
-      {
-        'aria-label': 'Project 3',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 4',
-        complete: false,
-      },
-      {
-        'aria-label': 'Project 5',
-        complete: false,
-      },
-    ],
-  },
-];
-
-interface Item {
-  'aria-label': string;
-  complete: boolean;
-}
-
-interface Row {
-  value1: string;
-  projects: Item[];
-}
-
-interface Column {
-  title: string;
-}
-
-interface CardProps {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  title?: string;
-  buttonContent?: ReactNode;
-  tableColumns: Column[];
-  tableRows: Row[];
-}
-
-/**
- * A Card containing a Table.
- */
-export const TableCard = ({
-  className,
-  title,
-  buttonContent,
-  tableRows,
-  tableColumns,
-  ...other
-}: CardProps) => {
-  const componentClassName = clsx(styles['table-card'], className);
-
-  return (
-    <Card className={componentClassName} {...other}>
-      <Card.Body>
-        <Heading
-          as="h2"
-          className="mb-4"
-          size="title-sm"
-          variant="neutral-strong"
-        >
-          {title}
-        </Heading>
-        <Table className={styles['table-card__table']} title={title}>
-          <Table.Header>
-            <Table.Row variant="header">
-              {tableColumns.map((item, index) => {
-                return (
-                  <Table.HeaderCell
-                    className={styles['table-card__table-header-cell']}
-                    key={'table-header-cell-' + item.title}
-                  >
-                    {item.title}
-                  </Table.HeaderCell>
-                );
-              })}
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {tableRows.map((item) => {
-              return (
-                <Table.Row key={`table-row-${item.value1}`}>
-                  <Table.HeaderCell variant="body">
-                    {item.value1}
-                  </Table.HeaderCell>
-                  <Table.Cell>
-                    <NumberIconList>
-                      {item.projects.map((item, index) => {
-                        return (
-                          <NumberIcon
-                            aria-label={item['aria-label']}
-                            incomplete={!item.complete}
-                            key={`number-icon-${item['aria-label']}`}
-                            number={index + 1}
-                            numberIconTitle={`incomplete step ${index + 1}`}
-                            size="sm"
-                          />
-                        );
-                      })}
-                    </NumberIconList>
-                  </Table.Cell>
-                </Table.Row>
-              );
-            })}
-          </Table.Body>
-        </Table>
-      </Card.Body>
-      <Card.Footer>
-        <Button status="neutral">{buttonContent}</Button>
-      </Card.Footer>
-    </Card>
-  );
-};
-
-export const CoursePlannerEdit = () => {
-  const container1EmptyContent = () => {
-    return (
-      <>
-        <Text className="mb-8 max-w-xl">
-          There are no more available projects to create your course plan
-        </Text>
-        <img alt="hand with pencil" src={EmptyImage} />
-      </>
-    );
-  };
-
-  const container2EmptyContent = () => {
-    return (
-      <>
-        <Text className="mb-8 max-w-xl">
-          Drag in available projects to build your course plan
-        </Text>
-        <img alt="hand with pencil" src={EmptyImage} />
-      </>
-    );
-  };
-
-  const projectCardMenuItems = () => {
-    return (
-      <>
-        <Menu.Item icon="schedule">Move to other section</Menu.Item>
-        <Menu.Item icon="schedule">Move up</Menu.Item>
-        <Menu.Item icon="schedule">Move down</Menu.Item>
-        <Menu.Item icon="schedule">Move view details</Menu.Item>
-      </>
-    );
-  };
-
-  const projectCardMenuItemsWithDelete = () => {
-    return (
-      <>
-        <Menu.Item icon="schedule">Move to other section</Menu.Item>
-        <Menu.Item icon="schedule">Move up</Menu.Item>
-        <Menu.Item icon="schedule">Move down</Menu.Item>
-        <Menu.Item className={styles['menu-item--destructive']} icon="delete">
-          Delete item
-        </Menu.Item>
-      </>
-    );
-  };
-
-  const [indexState, setIndexState] = useState<number | undefined>(2);
-  const [containers, setContainers] = useState({
-    'container-1': {
-      itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
-      emptyContent: container1EmptyContent(),
-      header: (
-        <DragDrop.ContainerHeader>
-          <div className="mb-4 flex items-center gap-4">
-            <Heading as="h2" size="title-sm" variant="neutral-strong">
-              Available projects
-            </Heading>
-            <div className="ml-auto">
-              <Button variant="icon">
-                <Icon name="add" purpose="decorative" />
-                Add project
-              </Button>
-            </div>
-          </div>
-        </DragDrop.ContainerHeader>
-      ),
-    },
-    'container-2': {
-      itemIds: [],
-      emptyContent: container2EmptyContent(),
-      header: (
-        <DragDrop.ContainerHeader>
-          <div className="mb-4 flex items-center gap-4">
-            <Heading as="h2" size="title-sm" variant="neutral-strong">
-              Planned projects
-            </Heading>
-            <div className="ml-auto">
-              <Button variant="icon">
-                <Icon name="add" purpose="decorative" />
-                Add project
-              </Button>
-            </div>
-          </div>
-        </DragDrop.ContainerHeader>
-      ),
-    },
-  });
-  const [items, setItems] = useState({
-    'item-1': {
-      title: 'Project #1',
-      children: (
-        <ProjectCard
-          behavior="draggable"
-          menuItems={projectCardMenuItemsWithDelete()}
-          meta="12 days"
-          metaIconName="event-note"
-          number={1}
-          numberAriaLabel="Project 1"
-          title="Longer project card title that wraps"
-        />
-      ),
-    },
-    'item-2': {
-      title: 'Project #2',
-      children: (
-        <ProjectCard
-          behavior="draggable"
-          menuItems={projectCardMenuItems()}
-          meta="12 days"
-          metaIconName="event-note"
-          number={indexState}
-          numberAriaLabel="Project 2"
-          title="Project card title"
-        />
-      ),
-    },
-    'item-3': {
-      title: 'Project #3',
-      children: (
-        <ProjectCard
-          behavior="draggable"
-          menuItems={projectCardMenuItems()}
-          meta="12 days"
-          metaIconName="event-note"
-          number={3}
-          numberAriaLabel="Project 3"
-          title="Project card title"
-        />
-      ),
-    },
-    'item-4': {
-      title: 'Project #4',
-      children: (
-        <ProjectCard
-          behavior="draggable"
-          menuItems={projectCardMenuItems()}
-          meta="12 days"
-          metaIconName="event-note"
-          number={4}
-          numberAriaLabel="Project 4"
-          title="Project card title"
-        />
-      ),
-    },
-    'item-5': {
-      title: 'Project #5',
-      children: (
-        <ProjectCard
-          behavior="draggable"
-          menuItems={projectCardMenuItems()}
-          meta="12 days"
-          metaIconName="event-note"
-          number={5}
-          numberAriaLabel="Project 5"
-          title="Project card title"
-        />
-      ),
-    },
-    'item-6': {
-      title: 'Project #6',
-      children: (
-        <ProjectCard
-          behavior="draggable"
-          menuItems={projectCardMenuItems()}
-          meta="12 days"
-          metaIconName="event-note"
-          number={6}
-          numberAriaLabel="Project 6"
-          title="Project card title"
-        />
-      ),
-    },
-  });
-  const returnUpdatedItems = (updatedItems: any) => {
-    setContainers(updatedItems.containers);
-    setItems(updatedItems.items);
-    updatedItems.containers['container-2'].itemIds.map(
-      (item: string, index: number) => {
-        if (item === 'item-2') {
-          updatedItems.items['item-2'].behavior = 'hover';
-          setIndexState(index + 1);
-        }
-      },
-    );
-  };
-  return (
-    <>
-      <Panel className="!mb-6" variant="squared">
-        <LayoutContainer>
-          <PageHeader
-            className="!mb-0"
-            description={
-              <HorizontalStepper
-                activeIndex={1}
-                steps={['Add classroom details', 'Add projects']}
-              />
-            }
-            headingSize="title-sm"
-            orientation="2up"
-            right={
-              // The parent class of this ButtonGroup is .page-header,
-              // which uses flex-direction:column, with a media query
-              // that changes flex-direction to row at the medium
-              // breakpoint. This ButtonGroup needs to have a margin
-              // above it only when the flex-direction is column, so
-              // this utility class was written with a media query
-              // that matches the behavior of .page-header
-              <ButtonGroup className={styles['button--mobile']}>
-                <Button>
-                  <Icon name="arrow-narrow-left" purpose="decorative" />
-                  Back
-                </Button>
-                <Button variant="primary">
-                  Next <Icon name="arrow-narrow-right" purpose="decorative" />
-                </Button>
-              </ButtonGroup>
-            }
-            title="Course Planner: History 6"
-          />
-        </LayoutContainer>
-      </Panel>
-      <LayoutContainer>
-        <Layout variant="67-33">
-          <LayoutSection region="main">
-            <Panel>
-              <Heading
-                as="h2"
-                className="!mb-4"
-                size="headline-sm"
-                variant="neutral-strong"
-              >
-                Select projects for your History 6 plan
-              </Heading>
-              <div className="mb-6 max-w-xl">
-                <Text className="mb-6">
-                  Make a plan so that you can stay connected to learning
-                  objectives even as changes occur throughout the year.
-                </Text>
-                <Text>
-                  Room for more instructional copy per Content Strategy lorem
-                  ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-                  est quam, consequat iaculis pretium accumsan, fringilla id
-                  ligula.
-                </Text>
-              </div>
-
-              <DragDrop
-                containers={containers}
-                getNewState={(updatedItems: NewState) =>
-                  returnUpdatedItems(updatedItems)
-                }
-                items={items}
-                multipleContainers={false}
-                unstyledItems
-              />
-            </Panel>
-          </LayoutSection>
-          <LayoutSection region="sidebar">
-            <CardWithNotification
-              className="!mb-6"
-              text="Summit recommends teaching at least five (5) projects for this course."
-              variant="brand"
-            >
-              <Card.Body>
-                <DataBar
-                  label="Total instructional days"
-                  max={60}
-                  segments={[
-                    { value: 10, text: 'Project 1' },
-                    { value: 11, text: 'Project 2' },
-                    { value: 22, text: 'Project 3' },
-                    { value: 11, text: 'Project 4' },
-                  ]}
-                />
-              </Card.Body>
-            </CardWithNotification>
-            <Grid className="!mb-6" variant="1-2-1up">
-              <Grid.Item>
-                <TableCard
-                  buttonContent="View all Cognitive Skills"
-                  tableColumns={CognitiveSkillColumns}
-                  tableRows={CognitiveSkillRows}
-                  title="Cognitive skills coverage"
-                />
-              </Grid.Item>
-              <Grid.Item>
-                <TableCard
-                  buttonContent="View all Standards"
-                  tableColumns={StandardsColumns}
-                  tableRows={StandardsRows}
-                  title="Standards coverage"
-                />
-              </Grid.Item>
-            </Grid>
-          </LayoutSection>
-        </Layout>
-      </LayoutContainer>
-    </>
-  );
-};
diff --git a/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.module.css b/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.module.css
deleted file mode 100644
index ee6c152803..0000000000
--- a/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-@import '../../../../src/design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # PROJECT CARD
-\*------------------------------------*/
-
-/**
- * Primary UI components acts as container for card components.
- */
-.project-card {
-  position: relative;
-  transition: all var(--eds-anim-fade-quick) var(--eds-anim-fade-quick);
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-.project-card__header.project-card__header {
-  margin-right: var(--eds-size-1);
-
-  /**
-  * Project card header within draggable project card.
-  */
-  .project-card--draggable & {
-    /* Allows room for the handle to show on hover without overlaying content. */
-    min-width: var(--eds-size-2-and-half);
-  }
-}
-
-.project-card__body {
-  flex-direction: row;
-  gap: var(--eds-);
-}
-
-.project-card__footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.project-card__title {
-  min-height: var(--eds-size-6);
-}
-
-.project-card__menu-button {
-  padding-top: var(--eds-size-2);
-  padding-bottom: var(--eds-size-2);
-}
-
-.project-card__meta {
-  font: var(--eds-theme-typography-body-xs);
-  color: var(--eds-theme-color-text-neutral-subtle);
-}
-
-.project-card__meta-icon {
-  margin-right: var(--eds-size-1);
-  position: relative;
-  bottom: 1px;
-}
diff --git a/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.tsx b/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.tsx
deleted file mode 100644
index f2588d15ca..0000000000
--- a/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-
-import { Card, Heading, Icon, Menu, NumberIcon } from '../../../../src';
-import type { HeadingElement } from '../../../../src/components/Heading';
-
-import type { IconName } from '../../../../src/components/Icon';
-import styles from './ProjectCard.module.css';
-
-export interface Props {
-  /**
-   * Determines type of clickable
-   * - **draggable** renders a card that is used to drag with space for the handle on the left
-   */
-  behavior?: 'draggable';
-  /**
-   * Menu items
-   *
-   * If not declared, the menu does not render.
-   */
-  menuItems?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Heading as element. Needed to create semantic heading order on page depending on
-   * where this is placed
-   */
-  headingAs?: HeadingElement;
-  /**
-   * Project card title
-   */
-  title?: string;
-  /**
-   * Project card meta data (e.g. calendar)
-   */
-  meta?: string;
-  /**
-   * Project card meta icon name. Should be appropriate EDS icon name.
-   */
-  metaIconName?: IconName;
-  /**
-   * Project card number
-   */
-  number?: number;
-  /**
-   * Number aria label. Required if number prop is passed.
-   */
-  numberAriaLabel?: string;
-  /**
-   * Property passed in to style draggable project card
-   */
-  isDragging?: boolean;
-}
-
-/**
- * A card containing project information to be used in the `DragDrop` component.
- */
-export const ProjectCard = ({
-  behavior,
-  className,
-  title,
-  meta,
-  metaIconName,
-  number,
-  headingAs = 'h3',
-  menuItems,
-  numberAriaLabel,
-  isDragging,
-  ...other
-}: Props) => {
-  if (number && !numberAriaLabel && process.env.NODE_ENV !== 'production') {
-    throw new Error(
-      'You must provide a "numberAriaLabel" for the number icon if a "number" has been passed',
-    );
-  }
-  const componentClassName = clsx(
-    styles['project-card'],
-    behavior === 'draggable' && styles['project-card--draggable'],
-    className,
-  );
-  return (
-    <Card
-      className={componentClassName}
-      elevation="raised"
-      isDragging={isDragging}
-      orientation="horizontal"
-      {...other}
-    >
-      <Card.Header className={styles['project-card__header']}>
-        {number && numberAriaLabel && (
-          <NumberIcon
-            aria-label={numberAriaLabel}
-            className={styles['project-card__number']}
-            number={number}
-            size="sm"
-          />
-        )}
-      </Card.Header>
-      <Card.Body className={styles['project-card__body']}>
-        <Heading
-          as={headingAs}
-          className={styles['project-card__title']}
-          size="title-xs"
-          variant="neutral-strong"
-        >
-          {title}
-        </Heading>
-        {meta && (
-          <div className={styles['project-card__meta']}>
-            {metaIconName && (
-              <Icon
-                className={styles['project-card__meta-icon']}
-                name={metaIconName}
-                purpose="decorative"
-                size="0.875rem"
-              />
-            )}
-            {meta}
-          </div>
-        )}
-      </Card.Body>
-      {menuItems && (
-        <Card.Footer className={styles['project-card__footer']}>
-          <Menu
-            modifiers={[
-              // Brings the Menu closer to the dots-vertical icon trigger button
-              {
-                name: 'offset',
-                options: { offset: [0, 0] },
-              },
-            ]}
-            placement="bottom-end"
-          >
-            <Menu.PlainButton>
-              <Icon
-                name="dots-vertical"
-                purpose="informative"
-                size="1.5rem"
-                title="Open project dropdown"
-              />
-            </Menu.PlainButton>
-            <Menu.Items>{menuItems}</Menu.Items>
-          </Menu>
-        </Card.Footer>
-      )}
-    </Card>
-  );
-};
diff --git a/.storybook/pages/CoursePlannerEdit/ProjectCard/index.ts b/.storybook/pages/CoursePlannerEdit/ProjectCard/index.ts
deleted file mode 100644
index 2c62b813b8..0000000000
--- a/.storybook/pages/CoursePlannerEdit/ProjectCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ProjectCard as default } from './ProjectCard';
diff --git a/.storybook/pages/CoursePlannerEdit/index.ts b/.storybook/pages/CoursePlannerEdit/index.ts
deleted file mode 100644
index 03be063f24..0000000000
--- a/.storybook/pages/CoursePlannerEdit/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CoursePlannerEdit as default } from './CoursePlannerEdit';
diff --git a/.storybook/pages/CoursePlannerModal/CoursePlannerModal.stories.tsx b/.storybook/pages/CoursePlannerModal/CoursePlannerModal.stories.tsx
deleted file mode 100644
index adb255b4b3..0000000000
--- a/.storybook/pages/CoursePlannerModal/CoursePlannerModal.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { ModalBrand } from './ModalBrand';
-import { ModalFinalStep } from './ModalFinalStep';
-import { ModalFirstStep } from './ModalFirstStep';
-
-export default {
-  title: 'Pages/Course Planner/Modal',
-  parameters: {
-    axe: {
-      /**
-       * Axe testing is flaky here, but is tested across the component modal stories and would be testing Headless Dialog functionality anyways.
-       */
-      disabledRules: ['aria-dialog-name'],
-    },
-  },
-};
-
-export const FirstStep: StoryObj = {
-  render: () => <ModalFirstStep />,
-};
-
-export const Brand: StoryObj = {
-  render: () => <ModalBrand />,
-};
-
-export const FinalStep: StoryObj = {
-  render: () => <ModalFinalStep />,
-};
diff --git a/.storybook/pages/CoursePlannerModal/ModalBrand.tsx b/.storybook/pages/CoursePlannerModal/ModalBrand.tsx
deleted file mode 100644
index c5fc4ac369..0000000000
--- a/.storybook/pages/CoursePlannerModal/ModalBrand.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { Button, Modal, Heading, Text } from '../../../src';
-
-import CompassSolo from '../../static/compass-solo.svg';
-
-export const ModalBrand = () => (
-  <Modal onClose={() => {}} open variant="brand">
-    <Modal.Header brandAsset={<img alt="a compass" src={CompassSolo} />}>
-      <Modal.Title>Check out the new course planner</Modal.Title>
-    </Modal.Header>
-    <Modal.Body>
-      <Heading as="h3" className="mb-4" size="title-sm">
-        Intro header copy
-      </Heading>
-      <Text>Content pieces go here</Text>
-    </Modal.Body>
-    <Modal.Footer className="flex justify-end">
-      <Button onClick={() => {}} variant="primary">
-        Button
-      </Button>
-    </Modal.Footer>
-  </Modal>
-);
diff --git a/.storybook/pages/CoursePlannerModal/ModalFinalStep.tsx b/.storybook/pages/CoursePlannerModal/ModalFinalStep.tsx
deleted file mode 100644
index 2a24271796..0000000000
--- a/.storybook/pages/CoursePlannerModal/ModalFinalStep.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { Button, Modal, Text } from '../../../src';
-
-import CadSuccess from '../../static/cad-success.svg';
-
-export const ModalFinalStep = () => (
-  <Modal isScrollable onClose={() => {}} open>
-    <Modal.Header>
-      <div
-        className="flex flex-col items-center justify-center"
-        style={{ height: '25rem' }}
-      >
-        <img alt="a checkmark" src={CadSuccess} />
-      </div>
-      <Modal.Title>Simple image and headline</Modal.Title>
-    </Modal.Header>
-    <Modal.Body>
-      <Text>Supporting copy goes here</Text>
-    </Modal.Body>
-    <Modal.Footer className="flex justify-end">
-      <Button onClick={() => {}} variant="primary">
-        Button
-      </Button>
-    </Modal.Footer>
-  </Modal>
-);
diff --git a/.storybook/pages/CoursePlannerModal/ModalFirstStep.tsx b/.storybook/pages/CoursePlannerModal/ModalFirstStep.tsx
deleted file mode 100644
index e76f1e6893..0000000000
--- a/.storybook/pages/CoursePlannerModal/ModalFirstStep.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  Button,
-  ButtonGroup,
-  Heading,
-  Icon,
-  Modal,
-  Radio,
-  Fieldset,
-} from '../../../src';
-
-export const ModalFirstStep = () => {
-  const [checked, setChecked] = useState([false, false, false]);
-  const handleChange = (index: number) => {
-    const newChecked = [false, false, false];
-    newChecked[index] = true;
-    setChecked(newChecked);
-  };
-  return (
-    <Modal isScrollable onClose={() => {}} open>
-      <Modal.Header>
-        <Modal.Title className="!mb-4">
-          Before we start, tell us your planning needs
-        </Modal.Title>
-        <Heading as="h3" size="title-md">
-          We’ll need to know how to set up your plan. Can you tell us how you’ll
-          use the planner?
-        </Heading>
-      </Modal.Header>
-      <Modal.Body>
-        <Fieldset className="!m-0">
-          <Fieldset.Legend text="Content pieces go here" />
-          <Fieldset.Items>
-            <Radio
-              checked={checked[0]}
-              label="I need my own planner. No additional teachers will need to create a plan for this course."
-              name="course-planner"
-              onChange={() => handleChange(0)}
-              value="radio1"
-            />
-            <Radio
-              checked={checked[1]}
-              label="I need my own plans, but other teachers may need their own plans for this course too."
-              name="course-planner"
-              onChange={() => handleChange(1)}
-              value="radio2"
-            />
-            <Radio
-              checked={checked[2]}
-              label="I’ll review and use a plan set by another teacher."
-              name="course-planner"
-              onChange={() => handleChange(2)}
-              value="radio3"
-            />
-          </Fieldset.Items>
-        </Fieldset>
-      </Modal.Body>
-      <Modal.Footer className="flex items-center justify-between">
-        <Modal.Stepper activeStep={1} totalSteps={3} />
-        <ButtonGroup className="justify-end">
-          <Button onClick={() => {}} status="neutral">
-            Not right now
-          </Button>
-          <Button disabled onClick={() => {}} variant="primary">
-            Next
-            <Icon name="arrow-forward" purpose="decorative" />
-          </Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal>
-  );
-};
diff --git a/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.module.css b/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.module.css
deleted file mode 100644
index 236c1fd2a3..0000000000
--- a/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@import '../../../../edu-design-system/src/design-tokens/mixins.css';
-
-/*------------------------------------*\
-  # TYPOGRAPHY USAGE UTILITY CLASS
-\*------------------------------------*/
-
-/**
- *  Utility classes to apply typography usage mixins to elements for Course Planner Step module
- */
-
-.course-planner-step1__text{
-    font: var(--eds-typography-preset-004);
-  }
\ No newline at end of file
diff --git a/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.stories.ts b/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.stories.ts
deleted file mode 100644
index 188bc6563e..0000000000
--- a/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.stories.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import { CoursePlannerStep1 } from './CoursePlannerStep1';
-
-export default {
-  title: 'Pages/Course Planner/Step 1',
-  component: CoursePlannerStep1,
-};
-
-type Args = ComponentProps<typeof CoursePlannerStep1>;
-
-export const Default: StoryObj<Args> = {};
diff --git a/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.tsx b/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.tsx
deleted file mode 100644
index 4f9ebf0d2b..0000000000
--- a/.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import {
-  Button,
-  ButtonGroup,
-  Grid,
-  Heading,
-  HorizontalStepper,
-  Icon,
-  InputField,
-  Layout,
-  LayoutContainer,
-  LayoutSection,
-  PageHeader,
-  Panel,
-  Text,
-} from '../../../src';
-
-import CompassCenter from '../../static/compass-center.svg';
-import styles from './CoursePlannerStep1.module.css';
-
-export const CoursePlannerStep1 = () => {
-  const textClassName = clsx(styles['course-planner-step1__text'], '!mb-2');
-  return (
-    <>
-      <Panel className="!mb-8" variant="squared">
-        <LayoutContainer>
-          <PageHeader
-            className="!mb-0"
-            description={
-              <HorizontalStepper
-                activeIndex={0}
-                steps={['Add course details', 'Select Projects']}
-              />
-            }
-            headingSize="title-md"
-            orientation="2up"
-            right={
-              <ButtonGroup className="!mt-8">
-                <Button>Return to Course</Button>
-                <Button variant="primary">
-                  Next <Icon name="arrow-narrow-right" purpose="decorative" />
-                </Button>
-              </ButtonGroup>
-            }
-            title="Course Planner: History 6"
-          />
-        </LayoutContainer>
-      </Panel>
-      <LayoutContainer>
-        <Layout gap="lg-xl" variant="50-50">
-          <LayoutSection region="main">
-            <Grid className="!mb-8" variant="1-2-1up">
-              <img alt="compass vignette" src={CompassCenter} />
-              <Heading as="h2" size="headline-lg">
-                Let&apos;s start planning, Amy Frankle.
-              </Heading>
-            </Grid>
-            <Text size="callout">
-              The course planner can help you set off on the right track, and
-              navigate whatever comes your way.
-            </Text>
-          </LayoutSection>
-          <LayoutSection region="main">
-            <div className="mb-8 max-w-xl">
-              <Heading className="mb-6" size="h3">
-                Tell us how often your course meets.
-              </Heading>
-              <Text className="mb-6">
-                We’ll adjust project plans based on your schedule. This way, you
-                can get a more accurate estimate of how long the course will
-                actually take.
-              </Text>
-              <Text>
-                If you teach multiple sections of this course, you can enter the
-                average amounts for each question below.
-              </Text>
-            </div>
-            <Text className={textClassName}>
-              How many times per week do you have class?
-            </Text>
-            <InputField
-              aria-label="times per week"
-              className="!mb-8"
-              min={0}
-              placeholder="times per week"
-              type="number"
-            />
-            <Text className={textClassName}>
-              How many minutes is each class?
-            </Text>
-            <InputField
-              aria-label="minutes"
-              className="!mb-8"
-              min={0}
-              placeholder="minutes"
-              type="number"
-            />
-          </LayoutSection>
-        </Layout>
-      </LayoutContainer>
-    </>
-  );
-};
diff --git a/.storybook/pages/FeedbackOverview/FeedbackOverview.module.css b/.storybook/pages/FeedbackOverview/FeedbackOverview.module.css
deleted file mode 100644
index 133f69f59d..0000000000
--- a/.storybook/pages/FeedbackOverview/FeedbackOverview.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../../src/design-tokens/mixins.css';
-
-.feedback-overview__card-header {
-  margin-bottom: var(--eds-size-1);
-  font: var(--eds-theme-typography-title-md);
-}
diff --git a/.storybook/pages/FeedbackOverview/FeedbackOverview.stories.ts b/.storybook/pages/FeedbackOverview/FeedbackOverview.stories.ts
deleted file mode 100644
index de41f4d741..0000000000
--- a/.storybook/pages/FeedbackOverview/FeedbackOverview.stories.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import { FeedbackOverview } from './FeedbackOverview';
-import { chromaticViewports } from '../../../src/util/viewports';
-
-export default {
-  title: 'Pages/Projects/Feedback',
-  component: FeedbackOverview,
-};
-
-type Args = ComponentProps<typeof FeedbackOverview>;
-
-export const Overview: StoryObj<Args> = {
-  parameters: {
-    chromatic: {
-      viewports: [
-        chromaticViewports.googlePixel2,
-        chromaticViewports.ipadMini,
-        chromaticViewports.chromebook,
-      ],
-    },
-  },
-};
-
-export const Checkpoint: StoryObj<Args> = {
-  args: {
-    activeIndex: 1,
-  },
-  parameters: {
-    chromatic: {
-      viewports: [
-        chromaticViewports.googlePixel2,
-        chromaticViewports.ipadMini,
-        chromaticViewports.chromebook,
-      ],
-    },
-  },
-};
diff --git a/.storybook/pages/FeedbackOverview/FeedbackOverview.tsx b/.storybook/pages/FeedbackOverview/FeedbackOverview.tsx
deleted file mode 100644
index 046e8a223d..0000000000
--- a/.storybook/pages/FeedbackOverview/FeedbackOverview.tsx
+++ /dev/null
@@ -1,572 +0,0 @@
-import { debounce } from 'lodash';
-import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Breadcrumbs,
-  Card,
-  Heading,
-  Icon,
-  NumberIcon,
-  PageHeader,
-  Panel,
-  Tab,
-  Tabs,
-  Table,
-  Text,
-  TimelineNav,
-} from '../../../src';
-
-import breakpoint from '../../../src/design-tokens/tier-1-definitions/breakpoints';
-
-import {
-  EdsThemeColorIconNeutralSubtle,
-  EdsThemeColorIconBrandPrimary,
-} from '../../../src/tokens-dist/ts/colors';
-import NumberIconList from '../../recipes/NumberIconList';
-import { PageShell } from '../../recipes/PageShell/PageShell';
-import styles from './FeedbackOverview.module.css';
-
-export interface Props {
-  /**
-   * Active index of the table to switch between stories
-   */
-  activeIndex?: number;
-}
-
-export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
-  const [isTable, setIsTable] = useState(false);
-  /**
-   * Display data as cards if mobile, table if not.
-   */
-  const tableBreakpoint = parseInt(breakpoint['eds-bp-md'], 10) * 16;
-  const updateScreenSize = debounce(
-    () => {
-      if (window.innerWidth >= tableBreakpoint && !isTable) {
-        setIsTable(true);
-      }
-      if (window.innerWidth < tableBreakpoint && isTable) {
-        setIsTable(false);
-      }
-    },
-    200,
-    { leading: true },
-  );
-  useEffect(() => {
-    updateScreenSize();
-    window.addEventListener('resize', updateScreenSize);
-    return () => {
-      window.removeEventListener('resize', updateScreenSize);
-    };
-  }, [updateScreenSize]);
-
-  const studentCheckpoints = [
-    {
-      student: 'Araya, Raquel',
-      checkpoints: 10,
-    },
-    {
-      student: 'Jesse Banet',
-      checkpoints: 5,
-    },
-    {
-      student: 'Julie Davis',
-      checkpoints: 10,
-    },
-    {
-      student: 'Hussain, Adnan',
-      checkpoints: 10,
-    },
-    {
-      student: 'Ilango, Megha',
-      checkpoints: 10,
-    },
-    {
-      student: 'Jaffer, Arman',
-      checkpoints: 10,
-    },
-    {
-      student: 'Kang, Michelle',
-      checkpoints: 10,
-    },
-    {
-      student: 'Lewine, Chris',
-      checkpoints: 10,
-    },
-    {
-      student: 'Luo, Celia',
-      checkpoints: 10,
-    },
-  ];
-
-  const feedbackOverviews = studentCheckpoints.map(
-    ({ student, checkpoints }) => {
-      const status = Array(checkpoints).fill(
-        <div
-          className="fpo"
-          style={{
-            height: '1.25rem',
-            width: '1.25rem',
-            padding: 0,
-            margin: 0,
-            flexShrink: 0,
-          }}
-        ></div>,
-      );
-      return {
-        student,
-        checkpointsStatus: status,
-      };
-    },
-  );
-
-  const checkpointProgresses = [
-    {
-      student: 'Araya, Raquel',
-      status: 'Stop and Revise',
-      cogSkill: 3,
-      timeSubmitted: '2 hours ago',
-    },
-    {
-      student: 'Jesse Banet',
-      status: 'Stop and Revise',
-      cogSkill: 1,
-      timeSubmitted: '3 days ago',
-    },
-    {
-      student: 'Julie Davis',
-      status: 'Working',
-      cogSkill: 0,
-      timeSubmitted: '3 days ago',
-    },
-    {
-      student: 'Hussain, Adnan',
-      status: 'Review Feedback',
-      cogSkill: 0,
-      timeSubmitted: '3 days ago',
-    },
-    {
-      student: 'Ilango, Megha',
-      status: 'Needs Feedback',
-      cogSkill: 3,
-      timeSubmitted: '3 days ago',
-    },
-    {
-      student: 'Jaffer, Arman',
-      status: 'Needs Feedback',
-      cogSkill: 1,
-      timeSubmitted: '3 days ago',
-    },
-    {
-      student: 'Kang, Michelle',
-      status: 'Review Feedback',
-      cogSkill: 1,
-      timeSubmitted: '3 days ago',
-    },
-    {
-      student: 'Lewine, Chris',
-      status: 'Continue Working',
-      cogSkill: 2,
-      timeSubmitted: '3 days ago',
-    },
-    {
-      student: 'Luo, Celia',
-      status: 'Review Feedback',
-      cogSkill: 1,
-      timeSubmitted: '3 days ago',
-    },
-  ];
-
-  return (
-    <PageShell className="body--alternate">
-      <Breadcrumbs className="mb-4">
-        <Breadcrumbs.Item href="#" text="My Courses" />
-        <Breadcrumbs.Item href="#" text="Modern World 2" />
-      </Breadcrumbs>
-      <PageHeader
-        className="!mb-8 !flex-row"
-        right={
-          <Button status="neutral" variant="icon">
-            <div className="sr-only lg:not-sr-only">More options</div>
-            <Icon name="dots-vertical" purpose="decorative" />
-          </Button>
-        }
-        title="Page title as Headline"
-      />
-      <Panel flush>
-        <Tabs activeIndex={3}>
-          <Tab title="Overview">
-            <div className="fpo">Overview</div>
-          </Tab>
-          <Tab title="Plans">
-            <div className="fpo">Learners</div>
-          </Tab>
-          <Tab title="Learners">
-            <div className="fpo">Plans</div>
-          </Tab>
-          <Tab title="Feedback">
-            <TimelineNav activeIndex={activeIndex}>
-              <TimelineNav.Panel title="Overview">
-                <div className="flex items-center gap-4 pb-4">
-                  <Heading as="h2" size="headline-md">
-                    Feedback Overview
-                  </Heading>
-                  <div className="ml-auto">
-                    <Button size="md" status="brand" variant="secondary">
-                      <Icon
-                        name="filter-list"
-                        purpose="decorative"
-                        size="1.375rem"
-                      />
-                      Filters
-                    </Button>
-                  </div>
-                </div>
-                {isTable && (
-                  <Table>
-                    <Table.Header>
-                      <Table.Row variant="header">
-                        <Table.HeaderCell>Student</Table.HeaderCell>
-                        <Table.HeaderCell>Checkpoints Status</Table.HeaderCell>
-                        <Table.HeaderCell>Final Product</Table.HeaderCell>
-                      </Table.Row>
-                      <Table.Row variant="header">
-                        <Table.Cell className="py-2"></Table.Cell>
-                        <Table.Cell className="py-2">
-                          <NumberIconList>
-                            <NumberIcon
-                              aria-label="Item 1"
-                              number={1}
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 2"
-                              number={2}
-                              numberIconTitle="incomplete step 2"
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 3"
-                              number={3}
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 4"
-                              number={4}
-                              numberIconTitle="incomplete step 4"
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 5"
-                              number={5}
-                              numberIconTitle="incomplete step 5"
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 6"
-                              number={6}
-                              numberIconTitle="incomplete step 6"
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 6"
-                              number={7}
-                              numberIconTitle="incomplete step 6"
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 6"
-                              number={8}
-                              numberIconTitle="incomplete step 6"
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 6"
-                              number={9}
-                              numberIconTitle="incomplete step 6"
-                              size="sm"
-                            />
-                            <NumberIcon
-                              aria-label="Item 6"
-                              number={10}
-                              numberIconTitle="incomplete step 6"
-                              size="sm"
-                            />
-                          </NumberIconList>
-                        </Table.Cell>
-                        <Table.Cell className="py-2"></Table.Cell>
-                      </Table.Row>
-                    </Table.Header>
-                    <Table.Body>
-                      {feedbackOverviews.map((overview) => (
-                        <Table.Row
-                          key={`feedback-overview-${overview.student}`}
-                        >
-                          <Table.Cell>{overview.student}</Table.Cell>
-                          <Table.Cell className="flex gap-1">
-                            {overview.checkpointsStatus}
-                          </Table.Cell>
-                          <Table.Cell>
-                            <Icon
-                              color={EdsThemeColorIconNeutralSubtle}
-                              name="star-outline"
-                              purpose="decorative"
-                              size="1.5rem"
-                            />
-                            <Icon
-                              color={EdsThemeColorIconNeutralSubtle}
-                              name="star-outline"
-                              purpose="decorative"
-                              size="1.5rem"
-                            />
-                            <Icon
-                              color={EdsThemeColorIconNeutralSubtle}
-                              name="star-outline"
-                              purpose="decorative"
-                              size="1.5rem"
-                            />
-                          </Table.Cell>
-                        </Table.Row>
-                      ))}
-                    </Table.Body>
-                  </Table>
-                )}
-                {!isTable &&
-                  feedbackOverviews.map((overview) => (
-                    <Card
-                      className="mb-4 py-8"
-                      key={`feedback-overview-${overview.student}`}
-                    >
-                      <Card.Header
-                        className={styles['feedback-overview__card-header']}
-                      >
-                        {overview.student}
-                      </Card.Header>
-                      <Card.Body>
-                        <div className="flex justify-between">
-                          <Text
-                            as="p"
-                            className="my-auto"
-                            size="sm"
-                            weight="bold"
-                          >
-                            Checkpoint Status
-                          </Text>
-                          <div className="flex flex-wrap justify-end gap-1">
-                            {overview.checkpointsStatus}
-                          </div>
-                        </div>
-                        <div className="flex justify-between">
-                          <Text as="p" size="sm" weight="bold">
-                            Final product
-                          </Text>
-                          <div className="flex justify-end gap-2">
-                            <Icon
-                              color={EdsThemeColorIconNeutralSubtle}
-                              name="star-outline"
-                              purpose="decorative"
-                              size="1.5rem"
-                            />
-                            <Icon
-                              color={EdsThemeColorIconNeutralSubtle}
-                              name="star-outline"
-                              purpose="decorative"
-                              size="1.5rem"
-                            />
-                            <Icon
-                              color={EdsThemeColorIconNeutralSubtle}
-                              name="star-outline"
-                              purpose="decorative"
-                              size="1.5rem"
-                            />
-                          </div>
-                        </div>
-                      </Card.Body>
-                    </Card>
-                  ))}
-              </TimelineNav.Panel>
-
-              <TimelineNav.Panel
-                title="Plan your body"
-                titleAfter={
-                  <Icon
-                    color={EdsThemeColorIconBrandPrimary}
-                    name="circle-small"
-                    purpose="informative"
-                    size="1.5em"
-                    title="2 students need feedback"
-                  />
-                }
-                variant="number"
-              >
-                <div className="flex items-center gap-4 pb-4">
-                  <Heading as="h2" size="h3">
-                    Checkpoint Progress
-                  </Heading>
-                  <div className="ml-auto">
-                    <Button size="md" status="brand" variant="secondary">
-                      <Icon
-                        name="filter-list"
-                        purpose="decorative"
-                        size="1.375rem"
-                      />
-                      Filters
-                    </Button>
-                  </div>
-                </div>
-                {isTable && (
-                  <Table>
-                    <Table.Header>
-                      <Table.Row variant="header">
-                        <Table.HeaderCell>Students</Table.HeaderCell>
-                        <Table.HeaderCell>Status</Table.HeaderCell>
-                        <Table.HeaderCell>Cog skill</Table.HeaderCell>
-                        <Table.HeaderCell>Time submitted</Table.HeaderCell>
-                      </Table.Row>
-                    </Table.Header>
-                    <Table.Body>
-                      {checkpointProgresses.map((progress) => (
-                        <Table.Row key={`progress-${progress.student}`}>
-                          <Table.Cell>{progress.student}</Table.Cell>
-                          <Table.Cell>{progress.status}</Table.Cell>
-                          <Table.Cell>{progress.cogSkill}</Table.Cell>
-                          <Table.Cell>{progress.timeSubmitted}</Table.Cell>
-                        </Table.Row>
-                      ))}
-                    </Table.Body>
-                  </Table>
-                )}
-                {!isTable &&
-                  checkpointProgresses.map((progress) => (
-                    <Card
-                      className="mb-4 py-8"
-                      key={`progress-${progress.student}`}
-                    >
-                      <Card.Header
-                        className={styles['feedback-overview__card-header']}
-                      >
-                        {progress.student}
-                      </Card.Header>
-                      <Card.Body>
-                        <div className="flex justify-between">
-                          <Text as="p" size="sm" weight="bold">
-                            Status
-                          </Text>
-                          <Text as="p" size="sm">
-                            {progress.status}
-                          </Text>
-                        </div>
-                        <div className="flex justify-between">
-                          <Text as="p" size="sm" weight="bold">
-                            Cog skill
-                          </Text>
-                          <Text as="p" size="sm">
-                            {progress.cogSkill}
-                          </Text>
-                        </div>
-                        <div className="flex justify-between">
-                          <Text as="p" size="sm" weight="bold">
-                            Time submitted
-                          </Text>
-                          <Text as="p" size="sm">
-                            {progress.timeSubmitted}
-                          </Text>
-                        </div>
-                      </Card.Body>
-                    </Card>
-                  ))}
-              </TimelineNav.Panel>
-
-              <TimelineNav.Panel
-                title="Research and Model Cells"
-                variant="number"
-              >
-                <div className="max-w-xl">
-                  <Heading className="mb-6" size="h3">
-                    Research and Model Cells
-                  </Heading>
-                  <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex
-                  </Text>
-                </div>
-              </TimelineNav.Panel>
-              <TimelineNav.Panel
-                title="Research and Model Body Systems"
-                variant="number"
-              >
-                <div className="max-w-xl">
-                  <Heading className="mb-6" size="h3">
-                    Research and Model Body Systems
-                  </Heading>
-                  <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex
-                  </Text>
-                </div>
-              </TimelineNav.Panel>
-              <TimelineNav.Panel title="Draft Your Book" variant="number">
-                <div className="max-w-xl">
-                  <Heading className="mb-6" size="h3">
-                    Draft Your Book
-                  </Heading>
-                  <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex
-                  </Text>
-                </div>
-              </TimelineNav.Panel>
-              <TimelineNav.Panel
-                title="Critique a Peer's Book"
-                variant="number"
-              >
-                <div className="max-w-xl">
-                  <Heading className="mb-6" size="h3">
-                    Critique a Peer&apos;s Book
-                  </Heading>
-                  <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex
-                  </Text>
-                </div>
-              </TimelineNav.Panel>
-              <TimelineNav.Panel title="Human Body Book" variant="number">
-                <div className="max-w-xl">
-                  <Heading className="mb-6" size="h3">
-                    Human Body Book
-                  </Heading>
-                  <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex
-                  </Text>
-                </div>
-              </TimelineNav.Panel>
-              <TimelineNav.Panel title="Book Review" variant="incomplete">
-                <div className="max-w-xl">
-                  <Heading className="mb-6" size="h3">
-                    Book Review
-                  </Heading>
-                  <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex
-                  </Text>
-                </div>
-              </TimelineNav.Panel>
-            </TimelineNav>
-          </Tab>
-        </Tabs>
-      </Panel>
-    </PageShell>
-  );
-};
diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.module.css b/.storybook/pages/ProjectOverview/ProjectOverview.module.css
deleted file mode 100644
index ff579f954e..0000000000
--- a/.storybook/pages/ProjectOverview/ProjectOverview.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '../../../../edu-design-system/src/design-tokens/mixins.css';
-
-/**
- *  Utility classes to apply typography usage mixins to Project Overview in body text xs bold
- */
-.project-overview__text {
-  font: var(--eds-theme-typography-body-xs);
-}
-
-.project-overview__link-description {
-  @apply mt-2;
-}
diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.stories.ts b/.storybook/pages/ProjectOverview/ProjectOverview.stories.ts
deleted file mode 100644
index 7e1eaedc1b..0000000000
--- a/.storybook/pages/ProjectOverview/ProjectOverview.stories.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import { ProjectOverview } from './ProjectOverview';
-
-export default {
-  title: 'Pages/Projects/Project',
-  component: ProjectOverview,
-};
-
-type Args = ComponentProps<typeof ProjectOverview>;
-
-export const StudentView: StoryObj<Args> = {};
-
-export const ProjectCheckpoint: StoryObj<Args> = {
-  args: {
-    activeIndex: 1,
-  },
-};
diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.tsx b/.storybook/pages/ProjectOverview/ProjectOverview.tsx
deleted file mode 100644
index 33414e5924..0000000000
--- a/.storybook/pages/ProjectOverview/ProjectOverview.tsx
+++ /dev/null
@@ -1,398 +0,0 @@
-import React from 'react';
-
-import {
-  Breadcrumbs,
-  Button,
-  Card,
-  Grid,
-  Heading,
-  Hr,
-  Icon,
-  Link,
-  PageHeader,
-  Section,
-  Text,
-  TimelineNav,
-} from '../../../src';
-// Project Overview pilot components -- not yet exported from src/index.ts
-import ButtonActionCalloutCard from '../../recipes/ButtonActionCalloutCard';
-
-import { PageShell } from '../../recipes/PageShell/PageShell';
-import styles from './ProjectOverview.module.css';
-
-export interface Props {
-  /**
-   * Passed down to initially set the activeIndex state
-   */
-  activeIndex?: number;
-}
-
-export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
-  return (
-    <PageShell className="body--alternate" mentoringIsActive>
-      <Breadcrumbs className="!mb-4">
-        <Breadcrumbs.Item href="#" text="My Courses" />
-        <Breadcrumbs.Item href="#" text="Disciplinary Science 7" />
-      </Breadcrumbs>
-      <PageHeader
-        headingSize="h3"
-        right={
-          <Button variant="icon">
-            View plan
-            <Icon name="arrow-narrow-right" purpose="decorative" />
-          </Button>
-        }
-        title="Feudal Honor Codes and Values"
-      />
-      <TimelineNav activeIndex={activeIndex}>
-        <TimelineNav.Panel title="Overview" variant="success">
-          <Heading
-            as="h2"
-            className="!mb-8"
-            size="headline-md"
-            variant="neutral-strong"
-          >
-            What is this Project About?
-          </Heading>
-          <Text size="lg">
-            Consectetur adipiscing elit. Ac id velit ut egestas arcu. At
-            maecenas urna, risus donec praesent eu consectetur. Nunc non eu
-            mattis sem turpis id dictum. Volutpat ornare turpis ultrices augue
-            bibendum pellentesque. Habitasse.
-          </Text>
-
-          <Heading
-            as="h3"
-            className="!mb-2"
-            size="title-md"
-            variant="neutral-strong"
-          >
-            Essential Questions
-          </Heading>
-          <div className="mb-8 max-w-xl">
-            <ul className="ml-4 list-disc">
-              <li className="mb-2">
-                How are structures in the body organized?
-              </li>
-              <li className="mb-2">
-                How do these structures work together to support life? But
-                really need to see what it looks like if we have an extra long
-                question.
-              </li>
-              <li className="mb-2">
-                How are structures in the body organized?
-              </li>
-            </ul>
-          </div>
-          <Heading
-            as="h3"
-            className="!mb-2"
-            size="title-md"
-            variant="neutral-strong"
-          >
-            Key Take Aways
-          </Heading>
-          <div className="mb-8 max-w-xl">
-            <ol className="ml-4 list-decimal">
-              <li className="mb-2">
-                Groups of specialized cells make up organs and body systems,
-                which work together to support an organism’s survival.
-              </li>
-              <li className="mb-2">
-                How are structures in the body organized? More text blah blah
-                blah.
-              </li>
-              <li className="mb-2">
-                How are structures in the body organized?
-              </li>
-            </ol>
-          </div>
-          <Hr className="!mb-0" />
-
-          <div className="fpo">FPO Brand asset</div>
-          <Section
-            headingSize="headline-sm"
-            title="Power Focus Areas"
-            titleAfter={
-              <Button size="sm" variant="icon">
-                <Icon
-                  name="help"
-                  purpose="informative"
-                  size="1.375rem"
-                  title="help"
-                />
-              </Button>
-            }
-          >
-            <Card className="!mb-4">
-              <Card.Body>
-                <Heading
-                  as="h3"
-                  className="!mb-2"
-                  size="title-xs"
-                  variant="neutral-strong"
-                >
-                  What Was Medieval Japan Like?
-                </Heading>
-                <Text>
-                  In this Focus Area, you explore the main question: How does
-                  the structures of organisms enable life’s functions?
-                </Text>
-              </Card.Body>
-            </Card>
-            <Card className="!mb-4">
-              <Card.Body>
-                <Heading
-                  as="h3"
-                  className="!mb-2"
-                  size="title-xs"
-                  variant="neutral-strong"
-                >
-                  What Was Medieval Japan Like?
-                </Heading>
-                <Text>
-                  In this Focus Area, you explore the main question: How does
-                  the structures of organisms enable life’s functions?
-                </Text>
-              </Card.Body>
-            </Card>
-            <Card>
-              <Card.Body>
-                <Heading
-                  as="h3"
-                  className="!mb-2"
-                  size="title-xs"
-                  variant="neutral-strong"
-                >
-                  What Was Medieval Japan Like?
-                </Heading>
-                <Text>
-                  In this Focus Area, you explore the main question: How does
-                  the structures of organisms enable life’s functions?
-                </Text>
-              </Card.Body>
-            </Card>
-          </Section>
-          <Section headingSize="headline-sm" title="Additional Focus Areas">
-            <Card className="!mb-4">
-              <Card.Body>
-                <Heading
-                  as="h3"
-                  className="!mb-2"
-                  size="title-xs"
-                  variant="neutral-strong"
-                >
-                  What Was Medieval Japan Like?
-                </Heading>
-                <Text>
-                  In this Focus Area, you explore the main question: How does
-                  the structures of organisms enable life’s functions?
-                </Text>
-              </Card.Body>
-            </Card>
-            <Card>
-              <Card.Body>
-                <Heading
-                  as="h3"
-                  className="!mb-2"
-                  size="title-xs"
-                  variant="neutral-strong"
-                >
-                  What Was Medieval Japan Like?
-                </Heading>
-                <Text>
-                  In this Focus Area, you explore the main question: How does
-                  the structures of organisms enable life’s functions?
-                </Text>
-              </Card.Body>
-            </Card>
-          </Section>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel title="Expectations of Samuri in Feudal Japan and Wars of 5th Century">
-          <Section
-            description={
-              <Text as="p" className={styles['project-overview__text']}>
-                Estimated schedule: Days 4,5,6
-              </Text>
-            }
-            overline={<Text size="overline">Overline above title</Text>}
-            title="Expectations of Samuri in Feudal Japan"
-          >
-            <Heading
-              as="h3"
-              className="!mb-6"
-              size="headline-sm"
-              variant="neutral-strong"
-            >
-              What to Focus on this Checkpoint
-            </Heading>
-            <Text className="mb-4 max-w-xl">
-              Students individually develop a follow up question that builds
-              from their group’s experiment and describe their follow up
-              question in their conclusion. Students craft evidence-supported
-              explanations of how the body is organized and functions.
-            </Text>
-            <dl className="mb-6 mt-0 flex">
-              <dt>Term 1:</dt>
-              <dd className="ml-4">
-                <Link>Constructing and Evidence based Explanation</Link>
-              </dd>
-            </dl>
-
-            <Text className="mb-4 max-w-xl">
-              Students collaboratively develop a single group research question
-              to frame their shared experiment, then describe the group research
-              question in the introduction.
-            </Text>
-            <dl className="mb-8 mt-0 flex">
-              <dt>Term 1:</dt>
-              <dd className="ml-4">
-                <Link>Constructing and Evidence based Explanation</Link>
-              </dd>
-            </dl>
-
-            <ButtonActionCalloutCard
-              actions={<Button variant="primary">Preview</Button>}
-              className="!mb-8"
-              title="Do This Checkpoint"
-            >
-              Develop the text of your Body Book, crafting evidence-supported
-              explanations on how the body is organized and its functions.
-            </ButtonActionCalloutCard>
-
-            <Hr className="!mt-12" />
-
-            <Heading
-              as="h3"
-              className="!mb-6"
-              size="headline-sm"
-              variant="neutral-strong"
-            >
-              Resources for You
-            </Heading>
-
-            <Grid className="!mb-8">
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-            </Grid>
-
-            <Heading
-              as="h3"
-              className="!mb-6"
-              size="headline-sm"
-              variant="neutral-strong"
-            >
-              Resources for You
-            </Heading>
-
-            <Grid className="!mb-8">
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-              <Grid.Item>
-                <Link href="#">This is a link</Link>
-                <Text className={styles['project-overview__link-description']}>
-                  This is a stacked block description
-                </Text>
-              </Grid.Item>
-            </Grid>
-            <Hr className="!mt-12" />
-          </Section>
-        </TimelineNav.Panel>
-
-        <TimelineNav.Panel title="Expectations of Samuri in Feudal Japan">
-          <Section
-            description={
-              <Text as="p" className={styles['project-overview__text']}>
-                Estimated schedule: Days 4,5,6
-              </Text>
-            }
-            overline={<Text size="overline">Checkpoint 2</Text>}
-            title="Expectations of Samuri in Feudal Japan"
-          >
-            <Text className="max-w-xl">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex
-            </Text>
-          </Section>
-        </TimelineNav.Panel>
-        <TimelineNav.Panel title="Expectations of Samuri in Feudal Japan">
-          <Section
-            description={
-              <Text as="p" className={styles['project-overview__text']}>
-                Estimated schedule: Days 4,5,6
-              </Text>
-            }
-            overline={<Text size="overline">Checkpoint 3</Text>}
-            title="Expectations of Samuri in Feudal Japan"
-          >
-            <Text className="max-w-xl">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex
-            </Text>
-          </Section>
-        </TimelineNav.Panel>
-        <TimelineNav.Panel title="Expectations of Samuri in Feudal Japan">
-          <Section
-            description={
-              <Text as="p" className={styles['project-overview__text']}>
-                Estimated schedule: Days 4,5,6
-              </Text>
-            }
-            overline={<Text size="overline">Checkpoint 4</Text>}
-            title="Expectations of Samuri in Feudal Japan"
-          >
-            <Text className="max-w-xl">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex
-            </Text>
-          </Section>
-        </TimelineNav.Panel>
-      </TimelineNav>
-    </PageShell>
-  );
-};
diff --git a/.storybook/pages/StudentRefinement/StudentRefinement.module.css b/.storybook/pages/StudentRefinement/StudentRefinement.module.css
deleted file mode 100644
index 97f4189572..0000000000
--- a/.storybook/pages/StudentRefinement/StudentRefinement.module.css
+++ /dev/null
@@ -1,154 +0,0 @@
-@import '../../../src/design-tokens/mixins.css';
-
-.student-refinement__summary-cards {
-  display: flex;
-  gap: var(--eds-size-2);
-  margin-bottom: 2.875rem;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.student-refinement__summary-card.student-refinement__summary-card {
-  width: 11rem;
-  flex-shrink: 0;
-}
-
-@media all and (min-width: $eds-bp-xl) {
-  .student-refinement__table-control-button-group {
-    justify-content: flex-end;
-  }
-}
-
-.student-refinement__header-row {
-  border-top: var(--eds-theme-border-width) solid
-    var(--eds-theme-color-border-neutral-strong);
-}
-
-.student-refinement__name-cell {
-  display: grid;
-  grid-template-columns: 7rem auto;
-  align-items: center;
-}
-
-/**
- * Shifts score left to align with scores without grades.
- */
-.student-refinement__cell--inset-left::after {
-  display: inline-block;
-  content: '';
-  width: var(--eds-size-2-and-half);
-}
-
-/*------------------------------------*\
-    # DATA SUMMARY CARD
-\*------------------------------------*/
-
-/**
- * Data Summary Card centers and wraps header, data, and footnote.
- */
-.data-summary-card {
-  width: 12.75rem;
-  height: 9.25rem;
-  position: relative;
-  overflow: hidden;
-
-  border: 0;
-  box-shadow: var(--eds-box-shadow-sm);
-
-  align-items: center;
-}
-.data-summary-card:hover {
-  border: var(--eds-border-width-sm) solid
-    var(--eds-theme-color-border-neutral-default);
-}
-
-/**
- * The header wraps the title.
- */
-.data-summary-card__header {
-  margin-top: var(--eds-size-2);
-  margin-bottom: var(--eds-size-half);
-}
-
-/**
- * Prevents jitter of the card components when hovering due to border spawning.
- * Transparent border can't be used due to off-track variant indicator needing full width.
- */
-.data-summary-card:hover > .data-summary-card__header {
-  margin-top: calc(var(--eds-size-2) - var(--eds-border-width-sm));
-}
-
-/**
- * The title communicates card organization.
- */
-.data-summary-card__title {
-  font: var(--eds-theme-typography-overline-sm);
-  text-transform: uppercase;
-}
-
-/**
- * The body wraps data and description text.
- */
-.data-summary-card__body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/**
- * The data is the main content for the card.
- */
-.data-summary-card__data {
-  font: var(--eds-theme-typography-headline-lg);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-001-mobile);
-  }
-
-  display: flex;
-  align-items: center;
-  gap: var(--eds-size-half);
-
-  margin-bottom: var(--eds-size-half);
-}
-
-/**
- * The data unit provides a unit of measurement for the data to make it relevant.
- */
-.data-summary-card__data-unit {
-  font: var(--eds-theme-typography-headline-sm);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-003-mobile);
-  }
-}
-
-/**
- * The Description provides more elucidation for the data.
- */
-.data-summary-card__description {
-  font: var(--eds-theme-typography-caption-sm);
-  font-weight: var(--eds-font-weight-light);
-}
-
-/**
- * Off track variant, bottom orange border indicates off track status.
- */
-.data-summary-card__indicator--off-track {
-  width: 100%;
-  height: 8px;
-
-  position: absolute;
-  bottom: 0;
-  left: 0;
-
-  background-color: var(--eds-theme-color-icon-utility-warning);
-}
-
-/**
- * Prevents jitter of the card components when hovering due to border spawning.
- * Transparent border can't be used due to off-track variant indicator needing full width.
- */
-.data-summary-card:hover > .data-summary-card__indicator--off-track {
-  height: 7px;
-}
diff --git a/.storybook/pages/StudentRefinement/StudentRefinement.stories.ts b/.storybook/pages/StudentRefinement/StudentRefinement.stories.ts
deleted file mode 100644
index d63094c438..0000000000
--- a/.storybook/pages/StudentRefinement/StudentRefinement.stories.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { StudentRefinement } from './StudentRefinement';
-import { chromaticViewports } from '../../../src/util/viewports';
-
-export default {
-  title: 'Pages/SDT/StudentRefinement',
-  component: StudentRefinement,
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof StudentRefinement>;
-
-export const Default: StoryObj<Args> = {
-  parameters: {
-    chromatic: {
-      viewports: [
-        chromaticViewports.googlePixel2,
-        chromaticViewports.ipadMini,
-        chromaticViewports.chromebook,
-      ],
-    },
-  },
-};
diff --git a/.storybook/pages/StudentRefinement/StudentRefinement.tsx b/.storybook/pages/StudentRefinement/StudentRefinement.tsx
deleted file mode 100644
index e0c7044dd4..0000000000
--- a/.storybook/pages/StudentRefinement/StudentRefinement.tsx
+++ /dev/null
@@ -1,624 +0,0 @@
-import clsx from 'clsx';
-import { debounce } from 'lodash';
-import React, { useEffect, useState } from 'react';
-
-import {
-  Breadcrumbs,
-  Button,
-  ButtonGroup,
-  Card,
-  Checkbox,
-  FiltersCheckboxField,
-  FiltersDrawer,
-  Heading,
-  Icon,
-  Layout,
-  PageHeader,
-  Panel,
-  SearchBar,
-  Score,
-  Tab,
-  Tabs,
-  Table,
-  Tag,
-  Text,
-} from '../../../src';
-import type { HeadingElement } from '../../../src/components/Heading';
-
-import breakpoint from '../../../src/design-tokens/tier-1-definitions/breakpoints';
-
-import { EdsThemeColorIconUtilityWarning } from '../../../src/tokens-dist/ts/colors';
-
-import { PageShell } from '../../recipes/PageShell/PageShell';
-import styles from './StudentRefinement.module.css';
-
-interface DataSummaryProps {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Main data text of the card.
-   */
-  dataAmount: string;
-  /**
-   * Text that provides a unit of measurement for the data.
-   */
-  dataUnit?: string;
-  /**
-   * Text to provide more context for the data.
-   */
-  description?: string;
-  /**
-   * Specifies the heading element to render the card heading as.
-   */
-  headingElement?: HeadingElement;
-  /**
-   * Title text of the data represented.
-   */
-  title: string;
-  /**
-   * Off track variant to indicate status.
-   */
-  variant?: 'off-track';
-}
-
-const DataSummaryCard = ({
-  className,
-  dataAmount,
-  dataUnit,
-  description,
-  headingElement,
-  title,
-  variant,
-  ...other
-}: DataSummaryProps) => {
-  const componentClassName = clsx(styles['data-summary-card'], className);
-  return (
-    <Card className={componentClassName} {...other}>
-      <Card.Header className={styles['data-summary-card__header']}>
-        <Heading
-          as={headingElement}
-          className={styles['data-summary-card__title']}
-          size="h3"
-        >
-          {title}
-        </Heading>
-      </Card.Header>
-      <Card.Body className={styles['data-summary-card__body']}>
-        <Text
-          className={styles['data-summary-card__data']}
-          variant="neutral-medium"
-        >
-          {dataAmount}
-          {dataUnit && (
-            <Text
-              as="span"
-              className={styles['data-summary-card__data-unit']}
-              variant="neutral-subtle"
-            >
-              {dataUnit}
-            </Text>
-          )}
-        </Text>
-        {description && (
-          <Text
-            className={styles['data-summary-card__description']}
-            variant="neutral-subtle"
-          >
-            {description}
-          </Text>
-        )}
-      </Card.Body>
-      {variant === 'off-track' && (
-        <div
-          aria-label="off track"
-          className={styles['data-summary-card__indicator--off-track']}
-          role="img"
-        />
-      )}
-    </Card>
-  );
-};
-
-export const StudentRefinement = () => {
-  const [isTable, setIsTable] = useState(false);
-  /**
-   * Display data as cards if mobile, table if not.
-   */
-  const tableBreakpoint = parseInt(breakpoint['eds-bp-md'], 10) * 16;
-  const updateScreenSize = debounce(
-    () => {
-      if (window.innerWidth >= tableBreakpoint && !isTable) {
-        setIsTable(true);
-      }
-      if (window.innerWidth < tableBreakpoint && isTable) {
-        setIsTable(false);
-      }
-    },
-    200,
-    { leading: true },
-  );
-  useEffect(() => {
-    updateScreenSize();
-    window.addEventListener('resize', updateScreenSize);
-    return () => {
-      window.removeEventListener('resize', updateScreenSize);
-    };
-  }, [updateScreenSize]);
-
-  const students = [
-    {
-      name: 'Caroline Garcia',
-      offTrack: true,
-      grade: {
-        offTrack: true,
-        score: '53%',
-      },
-      cogSkillAvg: {
-        offTrack: true,
-        score: '30%',
-      },
-      projects: {
-        score: 3,
-      },
-      powerFocusAreas: {
-        score: 8,
-      },
-    },
-    {
-      name: 'Anthony Smith',
-      grade: {
-        grade: 'A',
-        score: '93%',
-      },
-      cogSkillAvg: {
-        score: '84%',
-      },
-      projects: {
-        offTrack: true,
-        score: 2,
-      },
-      powerFocusAreas: {
-        score: 4,
-      },
-    },
-    {
-      name: 'Sai Kumar',
-      grade: {
-        grade: 'B-',
-        score: '81%',
-      },
-      cogSkillAvg: {
-        score: '78%',
-      },
-      projects: {
-        offTrack: true,
-        score: 1,
-      },
-      powerFocusAreas: {
-        score: 7,
-      },
-    },
-    {
-      name: 'Rachel Campbell',
-      grade: {
-        offTrack: true,
-        score: '68%',
-      },
-      cogSkillAvg: {
-        score: '73%',
-      },
-      projects: {
-        score: 3,
-      },
-      powerFocusAreas: {
-        score: 5,
-      },
-    },
-    {
-      name: 'Emily Tran',
-      offTrack: true,
-      grade: {
-        offTrack: true,
-        score: '30%',
-      },
-      cogSkillAvg: {
-        score: '100%',
-      },
-      projects: {
-        offTrack: true,
-        score: 2,
-      },
-      powerFocusAreas: {
-        offTrack: true,
-        score: 3,
-      },
-    },
-    {
-      name: 'Wei Zhang',
-      grade: {
-        grade: 'C',
-        score: '73%',
-      },
-      cogSkillAvg: {
-        score: '75%',
-      },
-      projects: {
-        score: 3,
-      },
-      powerFocusAreas: {
-        score: 6,
-      },
-    },
-  ];
-  const studentsTable = (
-    <Table>
-      <Table.Header className={styles['student-refinement__header-row']}>
-        <Table.Row variant="header">
-          <Table.HeaderCell>Students (32)</Table.HeaderCell>
-          <Table.HeaderCell className="text-center">Grade</Table.HeaderCell>
-          <Table.HeaderCell className="text-center">
-            Cog Skill Avg
-          </Table.HeaderCell>
-          <Table.HeaderCell className="text-center">Projects</Table.HeaderCell>
-          <Table.HeaderCell className="text-center">
-            Power Focus Areas
-          </Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {students.map((student) => (
-          <Table.Row key={'table-row-' + student.name}>
-            <Table.Cell className={styles['student-refinement__name-cell']}>
-              <Text as="span" size="sm">
-                {student.name}
-              </Text>
-              {student.offTrack && (
-                <Tag hasOutline text="Off Track" variant="warning" />
-              )}
-            </Table.Cell>
-            <Table.Cell className="text-center">
-              {student.grade.offTrack && (
-                <Icon
-                  className="inline-flex w-5 justify-center"
-                  color={EdsThemeColorIconUtilityWarning}
-                  name="circle-small"
-                  purpose="informative"
-                  size="1.25rem"
-                  title="off track"
-                />
-              )}
-              {student.grade.grade && (
-                <Text as="span" className="inline-flex w-5 justify-center">
-                  {student.grade.grade}
-                </Text>
-              )}
-              <Score text={student.grade.score} variant="table" />
-            </Table.Cell>
-            <Table.Cell
-              className={clsx(
-                'text-center',
-                student.cogSkillAvg.offTrack &&
-                  styles['student-refinement__cell--inset-left'],
-              )}
-            >
-              {student.cogSkillAvg.offTrack && (
-                <Icon
-                  className="inline-flex w-5 justify-center"
-                  color={EdsThemeColorIconUtilityWarning}
-                  name="circle-small"
-                  purpose="informative"
-                  size="1.25rem"
-                  title="off track"
-                />
-              )}
-              <Score text={student.cogSkillAvg.score} variant="table" />
-            </Table.Cell>
-            <Table.Cell
-              className={clsx(
-                'text-center',
-                student.projects.offTrack &&
-                  styles['student-refinement__cell--inset-left'],
-              )}
-            >
-              {student.projects.offTrack && (
-                <Icon
-                  className="inline-flex w-5 justify-center"
-                  color={EdsThemeColorIconUtilityWarning}
-                  name="circle-small"
-                  purpose="informative"
-                  size="1.25rem"
-                  title="off track"
-                />
-              )}
-              <Score text={`${student.projects.score} / 3`} variant="table" />
-            </Table.Cell>
-            <Table.Cell
-              className={clsx(
-                'text-center',
-                student.powerFocusAreas.offTrack &&
-                  styles['student-refinement__cell--inset-left'],
-              )}
-            >
-              {student.powerFocusAreas.offTrack && (
-                <Icon
-                  className="inline-flex w-5 justify-center"
-                  color={EdsThemeColorIconUtilityWarning}
-                  name="circle-small"
-                  purpose="informative"
-                  size="1.25rem"
-                  title="off track"
-                />
-              )}
-              <Score
-                text={`${student.powerFocusAreas.score} / 10`}
-                variant="table"
-              />
-            </Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-  const studentsCards = (
-    <div className="flex flex-col gap-4">
-      {students.map((student) => (
-        <Card className="p-6" key={'card-' + student.name}>
-          <Card.Header>
-            <Text as="span" size="lg" weight="bold">
-              {student.name}
-            </Text>
-            {student.offTrack && (
-              <Tag
-                className="ml-2"
-                hasOutline
-                text="Off Track"
-                variant="warning"
-              />
-            )}
-          </Card.Header>
-          <Card.Body>
-            <div className="flex justify-between">
-              <Text as="span" size="sm" weight="bold">
-                Grade
-              </Text>
-              <div className="flex w-16 items-center justify-between">
-                {student.grade.offTrack && (
-                  <Icon
-                    className="inline-flex w-5 justify-center"
-                    color={EdsThemeColorIconUtilityWarning}
-                    name="circle-small"
-                    purpose="informative"
-                    size="1.25rem"
-                    title="off track"
-                  />
-                )}
-                {student.grade.grade && (
-                  <Text as="span" className="inline-flex w-5 justify-center">
-                    {student.grade.grade}
-                  </Text>
-                )}
-                <Score
-                  className="!pl-2 !pr-0"
-                  text={student.grade.score}
-                  variant="table"
-                />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Text as="span" size="sm" weight="bold">
-                Cog Skill Avg
-              </Text>
-              <div
-                className={clsx(
-                  'flex items-center',
-                  !student.cogSkillAvg.offTrack && 'justify-end',
-                  student.cogSkillAvg.offTrack && 'w-16 justify-between',
-                )}
-              >
-                {student.cogSkillAvg.offTrack && (
-                  <Icon
-                    className="inline-flex w-5 justify-center"
-                    color={EdsThemeColorIconUtilityWarning}
-                    name="circle-small"
-                    purpose="informative"
-                    size="1.25rem"
-                    title="off track"
-                  />
-                )}
-                <Score
-                  className="!pl-2 !pr-0"
-                  text={student.cogSkillAvg.score}
-                  variant="table"
-                />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Text as="span" size="sm" weight="bold">
-                Project
-              </Text>
-              <div
-                className={clsx(
-                  'flex items-center',
-                  !student.projects.offTrack && 'justify-end',
-                  student.projects.offTrack && 'w-16 justify-between',
-                )}
-              >
-                {student.projects.offTrack && (
-                  <Icon
-                    className="inline-flex w-5 justify-center"
-                    color={EdsThemeColorIconUtilityWarning}
-                    name="circle-small"
-                    purpose="informative"
-                    size="1.25rem"
-                    title="off track"
-                  />
-                )}
-                <Score
-                  className="!pl-2 !pr-0"
-                  text={`${student.projects.score} / 3`}
-                  variant="table"
-                />
-              </div>
-            </div>
-            <div className="flex justify-between">
-              <Text as="span" size="sm" weight="bold">
-                Power Focus Area
-              </Text>
-              <div
-                className={clsx(
-                  'flex items-center',
-                  !student.powerFocusAreas.offTrack && 'justify-end',
-                  student.powerFocusAreas.offTrack && 'w-16 justify-between',
-                )}
-              >
-                {student.powerFocusAreas.offTrack && (
-                  <Icon
-                    className="inline-flex w-5 justify-center"
-                    color={EdsThemeColorIconUtilityWarning}
-                    name="circle-small"
-                    purpose="informative"
-                    size="1.25rem"
-                    title="off track"
-                  />
-                )}
-                <Score
-                  className="!pl-2 !pr-0"
-                  text={`${student.powerFocusAreas.score} / 10`}
-                  variant="table"
-                />
-              </div>
-            </div>
-          </Card.Body>
-        </Card>
-      ))}
-    </div>
-  );
-  return (
-    <PageShell>
-      <Breadcrumbs>
-        <Breadcrumbs.Item href="#" text="My Courses" />
-      </Breadcrumbs>
-      <div className="flex items-center justify-between">
-        <PageHeader title="Disciplinary Science 7 (Life Science Focus)" />
-        <Button className="gap-2" status="neutral" variant="icon">
-          More options
-          <Icon name="dots-vertical" purpose="decorative" />
-        </Button>
-      </div>
-      <Panel flush>
-        <Tabs activeIndex={1} className="pt-2">
-          <Tab title="Overview">
-            <div className="fpo">Overview</div>
-          </Tab>
-          <Tab title="Students">
-            <div className="px-12 pb-12 pt-8">
-              <div className={styles['student-refinement__summary-cards']}>
-                <DataSummaryCard
-                  className={styles['student-refinement__summary-card']}
-                  dataAmount="38"
-                  dataUnit="%"
-                  description="Off Track"
-                  headingElement="h2"
-                  title="Students"
-                  variant="off-track"
-                />
-                <DataSummaryCard
-                  className={styles['student-refinement__summary-card']}
-                  dataAmount="63"
-                  dataUnit="%"
-                  description="Below C-"
-                  headingElement="h2"
-                  title="Grade"
-                  variant="off-track"
-                />
-                <DataSummaryCard
-                  className={styles['student-refinement__summary-card']}
-                  dataAmount="41"
-                  dataUnit="%"
-                  description="Below 70%"
-                  headingElement="h2"
-                  title="Avg. Cog Skill Score"
-                  variant="off-track"
-                />
-                <DataSummaryCard
-                  className={styles['student-refinement__summary-card']}
-                  dataAmount="24"
-                  dataUnit="/ 96"
-                  description="Overdue"
-                  headingElement="h2"
-                  title="Projects"
-                  variant="off-track"
-                />
-                <DataSummaryCard
-                  className={styles['student-refinement__summary-card']}
-                  dataAmount="91"
-                  dataUnit="%"
-                  description="Students Off Track"
-                  headingElement="h2"
-                  title="Focus Area"
-                  variant="off-track"
-                />
-              </div>
-              <Layout className="mb-8" variant="50-50">
-                <SearchBar>
-                  <SearchBar.Field />
-                  <SearchBar.Button />
-                </SearchBar>
-                <ButtonGroup
-                  className={
-                    styles['student-refinement__table-control-button-group']
-                  }
-                >
-                  <FiltersDrawer
-                    className={styles['student-refinement__filters-drawer']}
-                    triggerText="Filters"
-                  >
-                    <div className="fpo">Toggle Switch FPO</div>
-                    <FiltersCheckboxField
-                      className="mt-12"
-                      legend="Student Status"
-                    >
-                      <Checkbox label="On Track" />
-                      <Checkbox label="Off Track" />
-                    </FiltersCheckboxField>
-                    <FiltersCheckboxField className="mt-12" legend="Section">
-                      <Checkbox label="Label" />
-                      <Checkbox label="Label" />
-                      <Checkbox label="Label" />
-                    </FiltersCheckboxField>
-                    <FiltersCheckboxField className="mt-12" legend="Grade">
-                      <Checkbox label="90-100%" />
-                      <Checkbox label="80-90%" />
-                      <Checkbox label="70-80%" />
-                      <Checkbox label="Below 70%" />
-                    </FiltersCheckboxField>
-                    <FiltersCheckboxField
-                      className="mt-12"
-                      legend="Average Cognitive Skill Balance"
-                    >
-                      <Checkbox label="90-100%" />
-                      <Checkbox label="80-90%" />
-                      <Checkbox label="70-80%" />
-                      <Checkbox label="Below 70%" />
-                    </FiltersCheckboxField>
-                  </FiltersDrawer>
-                  <Button>Export</Button>
-                </ButtonGroup>
-              </Layout>
-              {isTable && studentsTable}
-              {!isTable && studentsCards}
-            </div>
-          </Tab>
-          <Tab title="Assessments">
-            <div className="fpo">Assessments</div>
-          </Tab>
-          <Tab title="Goals">
-            <div className="fpo">Goals</div>
-          </Tab>
-        </Tabs>
-      </Panel>
-    </PageShell>
-  );
-};
diff --git a/.storybook/recipes/CalendarCard/CalendarCard.module.css b/.storybook/recipes/CalendarCard/CalendarCard.module.css
deleted file mode 100644
index 55c0411265..0000000000
--- a/.storybook/recipes/CalendarCard/CalendarCard.module.css
+++ /dev/null
@@ -1,98 +0,0 @@
-@import '../../../src/design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # CALENDAR CARD
-\*------------------------------------*/
-
-/**
- * Card recipe for displaying calendar data with a colored left border (color dependent on variant)
- */
-.calendar-card {
-  background-color: var(--eds-theme-color-background-neutral-default-hover);
-}
-/**
- * Brand variant (default): brand colored left border
- */
-.calendar-card--brand {
-  border-left: var(--eds-border-width-lg) solid
-    var(--eds-theme-color-border-brand-primary-strong);
-}
-
-/**
- * Revise variant
- */
-.calendar-card--revise {
-  border-left: var(--eds-border-width-lg) solid
-    var(--eds-theme-color-border-grade-revise-strong);
-}
-
-/** 
- * Success variant
- */
-.calendar-card--success {
-  border-left: var(--eds-border-width-lg) solid
-    var(--eds-theme-color-border-utility-success-strong);
-}
-
-/**
- * Stack the card's contents in a flex column.
- */
-.calendar-card__body {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: var(--eds-size-1);
-}
-
-/**
- * Card title row which holds an optional icon and a text string.
- */
-.calendar-card__title {
-  display: flex;
-  align-items: flex-start;
-  /**
-   * Keeps the icon positioned at the top of the cross-axis if the text string expands to use multiple lines.
-   */
-  justify-content: flex-start;
-  /**
-   * If icon is used, the gap setting will maintain spacing between icon and text.
-   */
-  gap: var(--eds-size-1);
-}
-
-/** 
- * Span to hold optional icon.
- */
-.calendar-card__title-icon {
-  min-width: 1.2rem;
-}
-
-/**
- * Card calendar row which holds an icon and a combination of text strings.
- * 
- * Keeps the icon positioned at the top of the cross-axis if the text strings expands to use multiple lines.
- * 
- * The gap setting will maintain spacing between icon and text.
- */
-.calendar-card__dates {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: var(--eds-size-1);
-}
-
-/* 
- * Span to hold icon before calendar text
- */
-.calendar-card__dates-icon {
-  min-width: 1.2rem;
-}
-
-/*
- * Keeps tags evenly spaced in rows, wrapping when needed
- */
-.calendar-card__tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--eds-size-1);
-}
diff --git a/.storybook/recipes/CalendarCard/CalendarCard.stories.tsx b/.storybook/recipes/CalendarCard/CalendarCard.stories.tsx
deleted file mode 100644
index afbe146a85..0000000000
--- a/.storybook/recipes/CalendarCard/CalendarCard.stories.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-import { CalendarCard } from './CalendarCard';
-
-export default {
-  title: 'Recipes/CalendarCard',
-  component: CalendarCard,
-  decorators: [(Story) => <div style={{ margin: '0.25rem' }}>{Story()}</div>],
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof CalendarCard>;
-
-export const Default: StoryObj<Args> = {
-  args: {
-    dateEnd: 'Feb 2, 2022',
-    dateStart: 'Apr 1',
-    title: 'Project name here',
-  },
-};
-
-export const ExtraMetadata: StoryObj<Args> = {
-  args: {
-    dateEnd: 'Feb 2, 2022',
-    dateStart: 'Apr 1',
-    meta: '(12 days)',
-    title: 'Project name here',
-  },
-};
-
-export const SingleTag: StoryObj<Args> = {
-  args: {
-    dateEnd: 'Feb 2, 2022',
-    dateStart: 'Apr 1',
-    tags: [{ text: 'Ancient Mayan History' }],
-    title: 'Project name here',
-  },
-};
-
-export const LongerTextStrings: StoryObj<Args> = {
-  args: {
-    dateEnd: 'Feb 2, 2022',
-    dateStart: 'Apr 1',
-    meta: '(Wednesday and Thursday only until further notice)',
-    tags: [{ text: 'Ancient Mayan History' }],
-    title: 'Project name here with extra long title',
-    variant: 'revise',
-  },
-};
-
-export const MultipleTags: StoryObj<Args> = {
-  args: {
-    dateEnd: 'Feb 2, 2022',
-    dateStart: 'Apr 1',
-    tags: [
-      { text: 'Tag One' },
-      { text: '2' },
-      { text: 'Three' },
-      { text: 'Tag with a longer text string' },
-    ],
-    title: 'Project name here',
-  },
-};
-
-export const ReviseVariant: StoryObj<Args> = {
-  args: {
-    dateEnd: 'Feb 2, 2022',
-    dateStart: 'Apr 1',
-    tags: [{ text: 'Ancient Mayan History' }],
-    title: 'Project name here',
-    variant: 'revise',
-  },
-};
-
-export const SuccessVariant: StoryObj<Args> = {
-  args: {
-    dateEnd: 'Feb 2, 2022',
-    dateStart: 'Apr 1',
-    tags: [{ text: 'Ancient Mayan History' }],
-    title: 'Project name here',
-    variant: 'success',
-  },
-};
diff --git a/.storybook/recipes/CalendarCard/CalendarCard.tsx b/.storybook/recipes/CalendarCard/CalendarCard.tsx
deleted file mode 100644
index 3ef4647249..0000000000
--- a/.storybook/recipes/CalendarCard/CalendarCard.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-
-import { Card, Heading, Icon, Tag, Text } from '../../../src';
-import type { Variant as TagVariant } from '../../../src/components/Tag/Tag';
-import styles from './CalendarCard.module.css';
-
-export const VARIANTS = ['brand', 'revise', 'success'] as const;
-
-export type Variant = (typeof VARIANTS)[number];
-
-export interface Props {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Card sub components that are nested within the Card wrapper.
-   */
-  children?: ReactNode;
-  /**
-   * End of date range
-   */
-  dateEnd?: string;
-  /**
-   * Start of date range
-   */
-  dateStart?: string;
-  /**
-   * Additional text for date range
-   */
-  meta?: string;
-  /**
-   * Text for tag(s)
-   */
-  tags?: TagType[];
-  /**
-   * The title text
-   */
-  title: string;
-  /**
-   * Notification variant for the card.
-   */
-  variant?: Variant;
-}
-
-interface TagType {
-  text: string;
-  variant?: TagVariant;
-  hasOutline?: boolean;
-}
-
-/**
- * Recipe for a Card component to represent an event within calendar UI.
- */
-export const CalendarCard = ({
-  children,
-  className,
-  dateEnd,
-  dateStart,
-  meta,
-  tags,
-  title,
-  variant = 'brand',
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    className,
-    styles['calendar-card'],
-    styles[`calendar-card--${variant}`],
-  );
-  return (
-    <Card className={componentClassName} {...other}>
-      <Card.Body className={styles['calendar-card__body']}>
-        <Heading
-          as="h3"
-          className={styles['calendar-card__title']}
-          size="title-xs"
-        >
-          {(variant === 'success' || variant === 'revise') && (
-            <span className={styles['calendar-card__title-icon']}>
-              <Icon
-                name={
-                  variant === 'success' ? 'status-check-circle' : 'status-error'
-                }
-                purpose="informative"
-                size="1.2rem"
-                title={variant}
-              />
-            </span>
-          )}
-          <span>{title}</span>
-        </Heading>
-        <Text as="p" className={styles['calendar-card__dates']} size="xs">
-          <span className={styles['calendar-card__dates-icon']}>
-            <Icon name="event-note" purpose="decorative" size="1.2rem" />
-          </span>
-          {dateStart} &mdash; {dateEnd} {meta}
-        </Text>
-        <div className={styles['calendar-card__tags']}>
-          {tags?.map(({ hasOutline = true, text, variant = 'neutral' }) => (
-            <Tag
-              hasOutline={hasOutline}
-              key={text}
-              text={text}
-              variant={variant}
-            />
-          ))}
-        </div>
-        {children}
-      </Card.Body>
-    </Card>
-  );
-};
diff --git a/.storybook/recipes/CalendarCard/index.ts b/.storybook/recipes/CalendarCard/index.ts
deleted file mode 100644
index a23c53d2bc..0000000000
--- a/.storybook/recipes/CalendarCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CalendarCard as default } from './CalendarCard';
diff --git a/.storybook/recipes/CardWithNotification/CardWithNotification.stories.tsx b/.storybook/recipes/CardWithNotification/CardWithNotification.stories.tsx
index 5e2b47bf44..563a131ee5 100644
--- a/.storybook/recipes/CardWithNotification/CardWithNotification.stories.tsx
+++ b/.storybook/recipes/CardWithNotification/CardWithNotification.stories.tsx
@@ -7,17 +7,7 @@ import { DataBar, Card } from '../../../src';
 export default {
   title: 'Recipes/CardWithNotification',
   component: CardWithNotification,
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          margin: '0.25rem',
-        }}
-      >
-        {Story()}
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
   argTypes: {
     children: {
       control: {
diff --git a/.storybook/recipes/PageShell/PageShell.module.css b/.storybook/recipes/PageShell/PageShell.module.css
deleted file mode 100644
index 1caaaae757..0000000000
--- a/.storybook/recipes/PageShell/PageShell.module.css
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../../../src/design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # PAGE SHELL
-\*------------------------------------*/
-
-/**
- * Primary shell around the entire page.
- */
-.page-shell {
-  position: relative;
-}
-
-/**
- * Skip link – allows the user to skip past the main navigation to the page content.
- */
-.page-shell__skip-link {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  z-index: 9999;
-  transform: translateY(-100%);
-  transition: transform var(--eds-anim-fade-quick);
-
-  &:focus {
-    transform: translateY(0%);
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-.page-shell__main {
-  padding-bottom: var(--eds-size-8);
-  padding-top: var(--eds-size-4);
-
-  @media all and (min-width: $eds-bp-xl) {
-    padding-top: var(--eds-size-6);
-  }
-}
diff --git a/.storybook/recipes/PageShell/PageShell.stories.ts b/.storybook/recipes/PageShell/PageShell.stories.ts
deleted file mode 100644
index 6fc37cf5f4..0000000000
--- a/.storybook/recipes/PageShell/PageShell.stories.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import { PageShell } from './PageShell';
-
-export default {
-  title: 'Recipes/PageShell',
-  component: PageShell,
-  args: {
-    children: 'Test',
-  },
-} as Meta;
-
-type Args = ComponentProps<typeof PageShell>;
-
-export const Default: StoryObj<Args> = {};
diff --git a/.storybook/recipes/PageShell/PageShell.tsx b/.storybook/recipes/PageShell/PageShell.tsx
deleted file mode 100644
index b651664b09..0000000000
--- a/.storybook/recipes/PageShell/PageShell.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import { Link, Layout, LayoutContainer, LayoutSection } from '../../../src';
-
-import styles from './PageShell.module.css';
-
-export interface Props {
-  /**
-   * Child node(s) that can be nested inside component.
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Search students primary nav item is active
-   */
-  searchStudentsIsActive?: boolean;
-  /**
-   * Announcements primary nav item is active
-   */
-  announcementsIsActive?: boolean;
-  /**
-   * Subject primary nav item is active
-   */
-  subjectIsActive?: boolean;
-  /**
-   * Mentoring primary nav item is active
-   */
-  mentoringIsActive?: boolean;
-  /**
-   * Student progress primary nav item is active
-   */
-  studentProgressIsActive?: boolean;
-  /**
-   * Search students primary nav item is active
-   */
-  educatorToolsIsActive?: boolean;
-  /**
-   * Search students primary nav item is active
-   */
-  curriculumIsActive?: boolean;
-}
-
-/**
- * A general wrapper for pages, comes with a stub for a header component baked in.
- */
-export const PageShell = ({
-  children,
-  className,
-  searchStudentsIsActive,
-  announcementsIsActive,
-  subjectIsActive,
-  mentoringIsActive,
-  studentProgressIsActive,
-  educatorToolsIsActive,
-  curriculumIsActive,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(styles['page-shell'], className, {});
-  return (
-    <body className={componentClassName}>
-      <Link
-        className={styles['page-shell__skip-link']}
-        href="#main-content"
-        size="sm"
-        variant="primary"
-      >
-        Skip to content
-      </Link>
-      <Layout gap="none">
-        <LayoutSection region="sidebar">
-          <div className="fpo xl:fixed xl:h-full">Sidebar Goes Here</div>
-        </LayoutSection>
-        <LayoutSection region="main">
-          <main className={styles['page-shell__main']}>
-            <LayoutContainer>{children}</LayoutContainer>
-          </main>
-        </LayoutSection>
-      </Layout>
-    </body>
-  );
-};
diff --git a/.storybook/recipes/PrimaryNav/PrimaryNav.module.css b/.storybook/recipes/PrimaryNav/PrimaryNav.module.css
deleted file mode 100755
index 91f5a76c4a..0000000000
--- a/.storybook/recipes/PrimaryNav/PrimaryNav.module.css
+++ /dev/null
@@ -1,90 +0,0 @@
-@import '../../../src/design-tokens/mixins.css';
-
-/*------------------------------------*\
-    # PRIMARY NAVIGATION ITEM
-\*------------------------------------*/
-
-/**
- * Primary nav link
- *
- * Individual link within each primary nav item.
- */
-.primary-nav__link {
-  display: flex;
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-  text-decoration: none;
-  white-space: nowrap;
-  padding: var(--eds-size-1);
-  border-radius: var(--eds-border-radius-md);
-  transition: background var(--eds-anim-fade-quick) var(--eds-anim-ease);
-
-  &:hover,
-  &:focus-visible {
-    background: var(--eds-theme-color-button-primary-brand-background-hover);
-  }
-
-  &:active {
-    background: var(--eds-theme-color-button-primary-brandbackground-active);
-  }
-
-  &:focus-visible {
-    @mixin focusInverted;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:hover,
-    &:focus {
-      background: var(--eds-theme-color-button-primary-brand-background-hover);
-    }
-
-    &:focus {
-      @mixin focusInverted;
-    }
-  }
-  @media screen and (prefers-reduced-motion) {
-    transition: none;
-  }
-}
-
-/**
- * Active primary nav link
- */
-.primary-nav__link--active {
-  background: var(--eds-theme-color-button-primary-brand-background-active);
-}
-
-/**
- * Primary nav icon
- */
-.primary-nav__icon {
-  margin-right: var(--eds-size-2-and-half);
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-}
-
-/*------------------------------------*\
-    # PRIMARY NAVIGATION
-\*------------------------------------*/
-
-/**
- * Primary navigation existing in the header and maybe the footer.
- * 
- * The outer <nav> wrapper of the primary navigation.
- */
-
-/**
- * Primary nav list
- * 
- The actual list of nav items.
- */
-.primary-nav__list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--eds-size-1);
-  width: fit-content;
-  z-index: var(--eds-z-index-200);
-
-  @media all and (min-width: $eds-bp-xl) {
-    width: auto;
-  }
-}
diff --git a/.storybook/recipes/PrimaryNav/PrimaryNav.stories.tsx b/.storybook/recipes/PrimaryNav/PrimaryNav.stories.tsx
deleted file mode 100644
index 38dc74aa93..0000000000
--- a/.storybook/recipes/PrimaryNav/PrimaryNav.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { PrimaryNav } from './PrimaryNav';
-
-export default {
-  title: 'Recipes/PrimaryNav',
-  component: PrimaryNav,
-  subcomponents: { 'PrimaryNav.Item': PrimaryNav.Item },
-  decorators: [(Story) => <div style={{ background: '#000' }}>{Story()}</div>],
-  args: {
-    children: (
-      <>
-        <PrimaryNav.Item href="#" text="Nav Item" />
-        <PrimaryNav.Item href="#" isActive text="Nav Item" />
-        <PrimaryNav.Item href="#" text="Nav Item" />
-      </>
-    ),
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof PrimaryNav>;
-
-export const Default: StoryObj<Args> = {};
diff --git a/.storybook/recipes/PrimaryNav/PrimaryNav.tsx b/.storybook/recipes/PrimaryNav/PrimaryNav.tsx
deleted file mode 100644
index c10b67b57f..0000000000
--- a/.storybook/recipes/PrimaryNav/PrimaryNav.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { IconName } from '../../../src';
-import { Icon } from '../../../src';
-import styles from './PrimaryNav.module.css';
-
-export type PrimaryNavItemProps = {
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * URL or a URL fragment string that the hyperlink points to
-   */
-  href?: string;
-  /**
-   * Name of SVG icon (i.e. caret-down, minus, warning)
-   */
-  iconName?: IconName;
-  /**
-   * Set to true when the primary nav item is the active page
-   */
-  isActive?: boolean;
-  /**
-   * Link text string
-   */
-  text?: string;
-};
-
-/**
- * Individual item within the PrimaryNav.
- */
-const PrimaryNavItem = React.forwardRef<HTMLLIElement, PrimaryNavItemProps>(
-  function PrimaryNavItem(
-    { className, text, href, isActive, iconName, ...other },
-    ref,
-  ) {
-    function createTagName() {
-      if (href) {
-        return 'a';
-      } else {
-        return 'button';
-      }
-    }
-
-    const TagName = createTagName();
-
-    const componentClassName = clsx(styles['primary-nav__item'], className);
-
-    const linkClassName = clsx(
-      styles['primary-nav__link'],
-      isActive && styles['primary-nav__link--active'],
-    );
-
-    return (
-      <li className={componentClassName} {...other} ref={ref}>
-        <TagName className={linkClassName} href={href}>
-          <Icon
-            className={styles['primary-nav__icon']}
-            name={iconName}
-            purpose="decorative"
-            size="1.25rem"
-          />
-          <span>{text}</span>
-        </TagName>
-      </li>
-    );
-  },
-);
-
-export type PrimaryNavProps = {
-  /**
-   * aria-label for `nav` element to describe Breadcrumbs navigation to screen readers
-   */
-  'aria-label'?: string;
-  /**
-   * Child node(s) that can be nested inside component. `ModalHeader`, `ModalBody`, and `ModelFooter` are the only permissible children of the Modal
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * HTML id for the component
-   */
-  id?: string;
-};
-
-/**
- * Primary navigation existing in the header and maybe the footer.
- */
-export const PrimaryNav = ({
-  className,
-  children,
-  id,
-  'aria-label': ariaLabel,
-  ...other
-}: PrimaryNavProps) => {
-  const componentClassName = clsx(styles['primary-nav'], className);
-
-  return (
-    <nav
-      aria-label={ariaLabel}
-      className={componentClassName}
-      id={id}
-      role="navigation"
-      title="Primary navigation"
-      {...other}
-    >
-      <ul className={styles['primary-nav__list']}>{children}</ul>
-    </nav>
-  );
-};
-
-PrimaryNav.Item = PrimaryNavItem;
diff --git a/.storybook/recipes/StackedCardsToTable/StackedCardsToTable.stories.tsx b/.storybook/recipes/StackedCardsToTable/StackedCardsToTable.stories.tsx
index bbd102b3fd..f95a0f75e6 100644
--- a/.storybook/recipes/StackedCardsToTable/StackedCardsToTable.stories.tsx
+++ b/.storybook/recipes/StackedCardsToTable/StackedCardsToTable.stories.tsx
@@ -11,7 +11,7 @@ export default {
 type Args = React.ComponentProps<typeof StackedCardsToTable>;
 
 export const Default: StoryObj<Args> = {
-  decorators: [(Story) => <div style={{ margin: '0.5rem' }}>{Story()}</div>],
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
   parameters: {
     chromatic: {
       viewports: [