+
+/**
+ * This component is used in the `Footer` to track progress of the Workflows steps.
+ * It has no reverse variant and should only be used in the Worflow's `Footer` component.
+ */
+export const Playground: Story = {
+ parameters: {
+ docs: {
+ canvas: {
+ sourceState: "shown",
+ },
+ },
+ },
+}
+
+/** To ensure WCAG AA compliance, there are 3 visually destinct states.
+ * These are reflected in their accessible names for screen reader: "Completed", "Current" and "Not started"
+ */
+export const ProgressStates: Story = {
+ args: {
+ currentStepId: "questions-step",
+ },
+}
+
+/**
+ * You can use the `isComplete` follow a successful submission to render all steps as complete.
+ */
+export const AllStepsComplete: Story = {
+ args: {
+ currentStepId: "schedule-step",
+ isComplete: true,
+ },
+}
+
+export const FewerSteps: Story = {
+ args: {
+ currentStepId: "questions-step",
+ steps: [
+ { label: "Settings", id: "settings-step" },
+ { label: "Questions", id: "questions-step" },
+ { label: "Preview", id: "preview-step" },
+ ],
+ },
+}
+
+/**
+ * We have baked in a container query to ensure the component can be responsive.
+ * When a step reaches its minimum size (4.5rem), it will hide the display name to maximise realestate.
+ */
+export const EightSteps: Story = {
+ args: {
+ currentStepId: "questions-step",
+ steps: [
+ ...meta.args.steps,
+ { label: "Plan", id: "plan-step" },
+ { label: "Provision", id: "provision-step" },
+ { label: "Procure", id: "procure-step" },
+ ],
+ },
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/_docs/Workflow.mdx b/packages/components/src/__layout__/Workflow/v3/_docs/Workflow.mdx
new file mode 100644
index 00000000000..cbcd52fc70f
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/_docs/Workflow.mdx
@@ -0,0 +1,165 @@
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
+import { Installation, ResourceLinks } from "~storybook/components"
+import * as Workflow from "./Workflow.stories"
+import * as WorkflowFooter from "./WorkflowFooter.stories"
+import * as WorkflowHeader from "./WorkflowHeader.stories"
+
+(false)
+ ...
+ return (
+ <>
+ setShowModal(true)}
+ />
+ {
+ setShowModal(false)
+ }}
+ >
+
+ {exitDescription}
+
+
+
+ )`
+ }}
+/>
+
+## Tracking progress
+
+The Footer tracks the progress of the form by using finding the index of the `currentStepId` within the `steps` array.
+
+
+
+
+
+
+ Name and schedule the self-reflection cycle
+
+
+
+
Draft ,
+ previousAction:
+
+export default meta
+
+type Story = StoryObj
+
+export const Playground: Story = {
+ parameters: {
+ docs: {
+ canvas: {
+ sourceState: "shown",
+ },
+ },
+ chromatic: { disable: false },
+ },
+}
+
+export const MultipleActions: Story = {
+ args: {
+ headerActions: [
+
+ step.id === currentStepId)!.label}
+ statusTag={statusTag}
+ headerActions={headerActions}
+ />
+
+ Content
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta error
+ labore dolorum debitis eaque laboriosam qui quidem itaque
+ necessitatibus obcaecati aut earum consectetur excepturi accusamus
+ nulla libero maxime, quibusdam vero?
+
+
+
+ ),
+ parameters: { chromatic: { disable: false } },
+}
+
+export const ResponsiveWorkflow: Story = {
+ parameters: {
+ docs: {
+ canvas: {
+ sourceState: "hidden",
+ },
+ },
+ viewport: {
+ viewports: {
+ vieportZoomed: {
+ name: "Simulate 400% zoom",
+ styles: {
+ width: "500px",
+ height: "800px",
+ },
+ type: "mobile",
+ },
+ },
+ defaultViewport: "vieportZoomed",
+ },
+ chromatic: {
+ disable: false,
+ viewports: [500, 1200],
+ },
+ },
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/_docs/WorkflowFooter.mdx b/packages/components/src/__layout__/Workflow/v3/_docs/WorkflowFooter.mdx
new file mode 100644
index 00000000000..b4b31f4f8fc
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/_docs/WorkflowFooter.mdx
@@ -0,0 +1,38 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { Installation, ResourceLinks } from "~storybook/components"
+import * as WorkflowFooterStories from "./WorkflowFooter.stories"
+
+
+
+export default meta
+
+type Story = StoryObj
+
+export const Playground: Story = {
+ parameters: {
+ docs: {
+ canvas: {
+ sourceState: "shown",
+ },
+ },
+ },
+}
+
+/** Next and previous button are passed in by the consumer to allow for page routing method to be determined by the user
*/
+export const FirstStep: Story = {
+ args: { currentStepId: "settings-step" },
+}
+
+export const NextStepDisabled: Story = {
+ args: { nextAction: Draft ,
+ headerActions: [
+
+
+export default meta
+
+type Story = StoryObj
+
+export const Playground: Story = {
+ parameters: {
+ docs: {
+ canvas: {
+ sourceState: "shown",
+ },
+ },
+ },
+}
+
+/** `headerActions` gives consumers the ability to add multiple `JSX Element`'s to top of the Workflow Header. We assume these will be Button or Button-like components
+ * There is no limit to the number of actions you can pass in, but please consider the limited realesate with labels.
*/
+export const MultipleActions: Story = {
+ args: {
+ headerActions: [
+ = {
+ headerActions: {
+ control: {
+ type: "radio",
+ },
+ options: ["Single action", "Multiple actions", "No actions"],
+ mapping: {
+ "Single action": [
+ >
+
+export const Footer = ({
+ steps,
+ currentStepId,
+ isComplete,
+ previousAction,
+ nextAction,
+ ...restProps
+}: FooterProps): JSX.Element => (
+
+
+)
+
+Footer.displayName = "Workflow.Footer"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.module.css b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.module.css
new file mode 100644
index 00000000000..c831d29804b
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.module.css
@@ -0,0 +1,15 @@
+.footerAction {
+ display: flex;
+ flex-grow: 1;
+ flex-basis: auto;
+}
+
+.footerActionPrevious {
+ grid-area: "prev";
+ justify-content: start;
+}
+
+.footerActionNext {
+ grid-area: "next";
+ justify-content: end;
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.tsx
new file mode 100644
index 00000000000..a99c43f5e75
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/FooterActions.tsx
@@ -0,0 +1,28 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./FooterActions.module.css"
+
+export type FooterActionsProps = {
+ actionType?: "Previous" | "Next"
+ action?: JSX.Element
+} & OverrideClassName, "children">>
+
+/** A simple wrapper for a Footer previous or next action */
+export const FooterAction = ({
+ actionType = "Previous",
+ action,
+ ...restProps
+}: FooterActionsProps): JSX.Element => (
+
+ {action}
+
+)
+
+FooterAction.displayName = "Workflow.FooterActions"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/index.ts b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/index.ts
new file mode 100644
index 00000000000..9c7a165d2cc
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/FooterActions/index.ts
@@ -0,0 +1 @@
+export * from "./FooterActions"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css
new file mode 100644
index 00000000000..2f5dcb2f186
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css
@@ -0,0 +1,110 @@
+.stepsContainer {
+ --progress-stepper-indicator-size: 1.25rem;
+
+ width: 100%;
+ grid-area: stepper;
+}
+
+.stepList {
+ display: none;
+ justify-content: center;
+ align-items: flex-end;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ @media (width >= 768px) {
+ display: flex;
+ }
+}
+
+.step {
+ display: flex;
+ flex-grow: 1;
+ flex-basis: 100%;
+ justify-content: center;
+ max-width: var(--spacing-96);
+ overflow-wrap: break-word;
+ position: relative;
+ container: step / inline-size;
+}
+
+.stepContent {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.stepIndicator {
+ width: var(--progress-stepper-indicator-size);
+ height: var(--progress-stepper-indicator-size);
+ position: relative;
+}
+
+.stepName {
+ display: none;
+ text-align: center;
+ margin-bottom: var(--spacing-12);
+ font-weight: var(--typography-paragraph-bold-font-weight);
+ color: var(--color-gray-600);
+}
+
+.stepName.isCurrent {
+ color: var(--color-purple-800);
+}
+
+.stepIcon {
+ color: var(--color-purple-800);
+ position: absolute;
+ width: var(--progress-stepper-indicator-size);
+ height: var(--progress-stepper-indicator-size);
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.stepIcon.isCompleted {
+ color: var(--color-green-500);
+}
+
+.stepDivider {
+ height: 0;
+ display: flex;
+ position: absolute;
+ flex-grow: 1;
+ min-width: calc(100% - var(--spacing-24));
+ border: solid var(--spacing-1) var(--color-gray-300);
+ margin: 0;
+ border-radius: var(--border-solid-border-radius);
+ left: 100%;
+
+ /* sets fron the bottom to the centre of the dot */
+ top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
+ transform: translateX(-50%);
+
+ [dir="rtl"] & {
+ left: unset;
+ right: 100%;
+ transform: translateX(50%);
+ }
+}
+
+.stepperDescription {
+ display: flex;
+ justify-content: center;
+
+ @media (width >= 768px) {
+ /* sr hidden styles */
+ position: absolute;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ }
+}
+
+/* Some defensive CSS for many steps on desktop screens */
+@container step (width >= 4.5rem) {
+ .stepName {
+ display: inline;
+ }
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx
new file mode 100644
index 00000000000..2be118e09b0
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { ProgressStepper, ProgressStepperProps } from "./"
+
+const defaultArgs = {
+ steps: [
+ { label: "Settings", id: "settings-step" },
+ { label: "Questions", id: "questions-step" },
+ { label: "Preview", id: "preview-step" },
+ { label: "Employees", id: "employees-step" },
+ { label: "Schedule", id: "schedule-step" },
+ ],
+} satisfies Pick
+
+describe("
+
+ {steps.map((step, index: number) => {
+ const isCurrentStep = currentStepIndex === index
+ const isCompletedStep = index < currentStepIndex || isComplete
+ const { accessibleName, icon: Icon } = getStepStatus(
+ isCompletedStep,
+ isCurrentStep,
+ step,
+ index
+ )
+ return (
+
+
+
+ {/* will need to be translated */}
+ {accessibleName}
+
+
+ {step.label}
+
+
+
+ {Icon}
+
+
+ {index < steps.length - 1 && (
+
+ )}
+
+ )
+ })}
+
+
+ Step {currentStepIndex + 1} of {steps.length}
+
+
+>
+
+export const FooterRoot = ({
+ children,
+ classNameOverride,
+ ...restProps
+}: FooterRootProps): JSX.Element => (
+
+)
+
+FooterRoot.displayName = "Workflow.FooterRoot"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/index.ts b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/index.ts
new file mode 100644
index 00000000000..aee034e3871
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/Root/index.ts
@@ -0,0 +1 @@
+export * from "./Root"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/index.ts b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/index.ts
new file mode 100644
index 00000000000..f379a3338d7
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./Root"
+export * from "./ProgressStepper"
+export * from "./FooterActions"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/index.ts b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/index.ts
new file mode 100644
index 00000000000..5bbffa1ee5e
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Footer/index.ts
@@ -0,0 +1,2 @@
+export * from "./Footer"
+export * from "./components"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/Header.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/Header.tsx
new file mode 100644
index 00000000000..3153df85133
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/Header.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+import {
+ HeaderRoot,
+ Branding,
+ Titles,
+ Actions,
+ WorkflowActionsProps,
+ WorkflowTitlesProps,
+} from "./components"
+
+export type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps
+
+export const Header = ({
+ workflowName,
+ stepName,
+ statusTag,
+ headerActions,
+ ...restProps
+}: HeaderProps): JSX.Element => (
+
+
+)
+
+Header.displayName = "Workflow.Header"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.module.css b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.module.css
new file mode 100644
index 00000000000..b274b395260
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.module.css
@@ -0,0 +1,15 @@
+.actions {
+ grid-area: actions;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ justify-content: center;
+ align-items: center;
+
+ @media (width >= 768px) {
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: flex-end;
+ margin-top: calc(-1 * var(--spacing-12));
+ }
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.tsx
new file mode 100644
index 00000000000..06e15486dc9
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.tsx
@@ -0,0 +1,24 @@
+import React, { HTMLAttributes } from "react"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Actions.module.css"
+
+export type WorkflowActionsProps = {
+ /**
+ * Header actions will render in order of the array.
+ */
+ headerActions?: JSX.Element[]
+} & OverrideClassName, "children">>
+
+/** A wrapper for an exit trigger (and other) actions of the Header Workflow */
+export const Actions = ({
+ headerActions,
+ ...restProps
+}: WorkflowActionsProps): JSX.Element => (
+
+ {headerActions?.map((action, index) => (
+
+ ))}
+
>
+
+export const Branding = ({
+ variant = "logo-horizontal",
+ alt,
+}: WorflowBrandingProps): JSX.Element => (
+
+
+)
+
+Branding.displayName = "Workflow.Branding"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/index.ts b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/index.ts
new file mode 100644
index 00000000000..6c0671616d5
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Branding/index.ts
@@ -0,0 +1 @@
+export * from "./Branding"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.module.css b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.module.css
new file mode 100644
index 00000000000..efce1ce0673
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.module.css
@@ -0,0 +1,20 @@
+.root {
+ display: grid;
+ background-color: var(--color-white);
+ grid-template: "branding" min-content "titles" max-content "actions" min-content / 1fr;
+ flex-grow: 1;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: var(--spacing-24);
+ gap: var(--spacing-16);
+ border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
+
+ @media (width >= 768px) {
+ align-items: start;
+ grid-template: "branding titles actions" min-content / 1fr max-content 1fr;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ }
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.tsx
new file mode 100644
index 00000000000..bd693465098
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.tsx
@@ -0,0 +1,20 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Root.module.css"
+
+export type HeaderRootProps = OverrideClassName<
+ HTMLAttributes
+>
+
+export const HeaderRoot = ({
+ children,
+ classNameOverride,
+ ...restProps
+}: HeaderRootProps): JSX.Element => (
+
+)
+
+HeaderRoot.displayName = "Workflow.HeaderRoot"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/index.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/index.tsx
new file mode 100644
index 00000000000..aee034e3871
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Root/index.tsx
@@ -0,0 +1 @@
+export * from "./Root"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.module.css b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.module.css
new file mode 100644
index 00000000000..994e37f5cfa
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.module.css
@@ -0,0 +1,21 @@
+.titles {
+ grid-area: titles;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1;
+}
+
+.pageTitle {
+ display: flex;
+ flex-direction: column;
+}
+
+.prefix {
+ margin-bottom: var(--spacing-4);
+}
+
+.statusTag {
+ margin-top: var(--spacing-8);
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.tsx
new file mode 100644
index 00000000000..59b48c38c37
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.tsx
@@ -0,0 +1,44 @@
+import React, { HTMLAttributes, ReactNode } from "react"
+import { Heading } from "~components/Heading"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Titles.module.css"
+
+export type WorkflowTitlesProps = {
+ workflowName: string
+ stepName: string
+ statusTag?: ReactNode
+} & OverrideClassName>
+
+export const Titles = ({
+ workflowName,
+ stepName,
+ statusTag,
+ ...restProps
+}: WorkflowTitlesProps): JSX.Element => (
+
+
+
+ {workflowName}
+ :
+
+ {stepName}
+
+ {statusTag && (
+ // status may need to be update by a fetch
+
{statusTag}
+ )}
+
+> & {
+ children: ReactNode
+}
+
+export const Main = ({
+ children,
+ classNameOverride,
+ ...restProps
+}: WorkflowMainProps): JSX.Element => (
+
+ {children}
+
+)
+
+Main.displayName = "Workflow.Main"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Main/index.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Main/index.tsx
new file mode 100644
index 00000000000..3c0d2743028
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Main/index.tsx
@@ -0,0 +1 @@
+export * from "./Main"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.module.css b/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.module.css
new file mode 100644
index 00000000000..93553ac28e4
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.module.css
@@ -0,0 +1,7 @@
+.wrapper {
+ display: grid;
+ grid-template-rows: min-content 1fr min-content;
+ position: relative;
+ min-height: 100vh;
+ background: var(--color-gray-100);
+}
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.tsx b/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.tsx
new file mode 100644
index 00000000000..cbed6d1ad8a
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.tsx
@@ -0,0 +1,22 @@
+import React, { HTMLAttributes, ReactNode } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~components/types/OverrideClassName"
+import styles from "./Wrapper.module.css"
+
+export type WorkflowWrapperProps = OverrideClassName<
+ HTMLAttributes
+> & {
+ children: ReactNode
+}
+
+export const Wrapper = ({
+ children,
+ classNameOverride,
+ ...restProps
+}: WorkflowWrapperProps): JSX.Element => (
+
+ {children}
+
+)
+
+Wrapper.displayName = "Workflow.Wrapper"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/index.ts b/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/index.ts
new file mode 100644
index 00000000000..de73e491dd8
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/Wrapper/index.ts
@@ -0,0 +1 @@
+export * from "./Wrapper"
diff --git a/packages/components/src/__layout__/Workflow/v3/subcomponents/index.ts b/packages/components/src/__layout__/Workflow/v3/subcomponents/index.ts
new file mode 100644
index 00000000000..b652662c049
--- /dev/null
+++ b/packages/components/src/__layout__/Workflow/v3/subcomponents/index.ts
@@ -0,0 +1,4 @@
+export * from "./Footer"
+export * from "./Header"
+export * from "./Main"
+export * from "./Wrapper"
diff --git a/packages/components/src/__layout__/v1.ts b/packages/components/src/__layout__/v1.ts
new file mode 100644
index 00000000000..df726afd7ef
--- /dev/null
+++ b/packages/components/src/__layout__/v1.ts
@@ -0,0 +1 @@
+export * from "./Workflow/v1"
diff --git a/packages/components/src/__layout__/v2.ts b/packages/components/src/__layout__/v2.ts
new file mode 100644
index 00000000000..eb67aa773a6
--- /dev/null
+++ b/packages/components/src/__layout__/v2.ts
@@ -0,0 +1 @@
+export * from "./Workflow/v2"
diff --git a/packages/components/src/__layout__/v3.ts b/packages/components/src/__layout__/v3.ts
new file mode 100644
index 00000000000..1fb6cca756a
--- /dev/null
+++ b/packages/components/src/__layout__/v3.ts
@@ -0,0 +1 @@
+export * from "./Workflow/v3"
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index ca1d8135b1f..95ad718095e 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -57,7 +57,7 @@ export * from "./ToggleSwitch"
export * from "./utils"
export * from "./VisuallyHidden"
export * from "./Well"
-export * from "./Workflow"
+export * from "./__layout__/Workflow/v1"
export * from "./__overlays__/Tooltip/v1"
export * from "./__actions__/Menu/v1"
export * from "./__actions__/Button/v1"
diff --git a/packages/components/v1/layout/package.json b/packages/components/v1/layout/package.json
new file mode 100644
index 00000000000..a7b33c0c287
--- /dev/null
+++ b/packages/components/v1/layout/package.json
@@ -0,0 +1,5 @@
+{
+ "main": "../../dist/cjs/layoutV1.cjs",
+ "module": "../../dist/esm/layoutV1.mjs",
+ "types": "../../dist/types/__layout__/v1.d.ts"
+}
diff --git a/packages/components/v2/layout/package.json b/packages/components/v2/layout/package.json
new file mode 100644
index 00000000000..320370f1250
--- /dev/null
+++ b/packages/components/v2/layout/package.json
@@ -0,0 +1,5 @@
+{
+ "main": "../../dist/cjs/layoutV2.cjs",
+ "module": "../../dist/esm/layoutV2.mjs",
+ "types": "../../dist/types/__layout__/v2.d.ts"
+}
diff --git a/packages/components/v3/layout/package.json b/packages/components/v3/layout/package.json
new file mode 100644
index 00000000000..85f7c4b8c7f
--- /dev/null
+++ b/packages/components/v3/layout/package.json
@@ -0,0 +1,5 @@
+{
+ "main": "../../dist/cjs/layoutV3.cjs",
+ "module": "../../dist/esm/layoutV3.mjs",
+ "types": "../../dist/types/__layout__/v3.d.ts"
+}